refactor: replace git command for branch retrieval

- Updated multiple route handlers to use 'git symbolic-ref --short HEAD' instead of 'git rev-parse --abbrev-ref HEAD' for retrieving the current branch name, improving consistency and clarity in branch management across the application.

.claude/.gitignore

@@ -0,0 +1 @@
+hans/

.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.

.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

.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)

.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.

.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

.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

.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)

.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

.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.

.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.).

.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).

.claude_settings.json

@@ -1,24 +0,0 @@
-{
-  "sandbox": {
-    "enabled": true,
-    "autoAllowBashIfSandboxed": true
-  },
-  "permissions": {
-    "defaultMode": "acceptEdits",
-    "allow": [
-      "Read(./**)",
-      "Write(./**)",
-      "Edit(./**)",
-      "Glob(./**)",
-      "Grep(./**)",
-      "Bash(*)",
-      "mcp__puppeteer__puppeteer_navigate",
-      "mcp__puppeteer__puppeteer_screenshot",
-      "mcp__puppeteer__puppeteer_click",
-      "mcp__puppeteer__puppeteer_fill",
-      "mcp__puppeteer__puppeteer_select",
-      "mcp__puppeteer__puppeteer_hover",
-      "mcp__puppeteer__puppeteer_evaluate"
-    ]
-  }
-}

.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/

.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

.github/actions/setup-project/action.yml

@@ -0,0 +1,71 @@
+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: Check for SSH URLs in lockfile
+      if: inputs.check-lockfile == 'true'
+      shell: bash
+      run: npm run lint:lockfile
+
+    - 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: 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
+      run: npm install --ignore-scripts
+
+    - name: Install Linux native bindings
+      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 }}

.github/scripts/upload-to-r2.js

@@ -1,15 +1,11 @@
-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, 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",
+  region: 'auto',
   endpoint: process.env.R2_ENDPOINT,
   credentials: {
     accessKeyId: process.env.R2_ACCESS_KEY_ID,
@@ -28,14 +24,14 @@ async function fetchExistingReleases() {
     const response = await s3Client.send(
       new GetObjectCommand({
         Bucket: BUCKET,
-        Key: "releases.json",
+        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");
+    if (error.name === 'NoSuchKey' || error.$metadata?.httpStatusCode === 404) {
+      console.log('No existing releases.json found, creating new one');
       return { latestVersion: null, releases: [] };
     }
     throw error;
@@ -85,7 +81,7 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
               resolve({
                 accessible: false,
                 statusCode,
-                error: "Redirect without location header",
+                error: 'Redirect without location header',
               });
               return;
             }
@@ -93,18 +89,16 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
             return https
               .get(redirectUrl, { timeout: 10000 }, (redirectResponse) => {
                 const redirectStatus = redirectResponse.statusCode;
-                const contentType =
-                  redirectResponse.headers["content-type"] || "";
+                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;
+                  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,
@@ -113,38 +107,38 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
                   contentType,
                 });
               })
-              .on("error", (error) => {
+              .on('error', (error) => {
                 resolve({
                   accessible: false,
                   statusCode,
                   error: error.message,
                 });
               })
-              .on("timeout", function () {
+              .on('timeout', function () {
                 this.destroy();
                 resolve({
                   accessible: false,
                   statusCode,
-                  error: "Timeout following redirect",
+                  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 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");
+            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) => {
+        request.on('error', (error) => {
           resolve({
             accessible: false,
             statusCode: null,
@@ -152,12 +146,12 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
           });
         });
 
-        request.on("timeout", () => {
+        request.on('timeout', () => {
           request.destroy();
           resolve({
             accessible: false,
             statusCode: null,
-            error: "Request timeout",
+            error: 'Request timeout',
           });
         });
       });
@@ -168,22 +162,14 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
             `✓ URL ${url} is now accessible after ${attempt} retries (status: ${result.statusCode})`
           );
         } else {
-          console.log(
-            `✓ URL ${url} is accessible (status: ${result.statusCode})`
-          );
+          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}`
-        );
+        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}`);
@@ -191,9 +177,7 @@ async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
 
     if (attempt < maxRetries - 1) {
       const delay = initialDelay * Math.pow(2, attempt);
-      console.log(
-        `  Retrying in ${delay}ms... (attempt ${attempt + 1}/${maxRetries})`
-      );
+      console.log(`  Retrying in ${delay}ms... (attempt ${attempt + 1}/${maxRetries})`);
       await new Promise((resolve) => setTimeout(resolve, delay));
     }
   }
@@ -207,12 +191,7 @@ async function downloadFromGitHub(url, outputPath) {
       const statusCode = response.statusCode;
 
       // Follow redirects (all redirect types)
-      if (
-        statusCode === 301 ||
-        statusCode === 302 ||
-        statusCode === 307 ||
-        statusCode === 308
-      ) {
+      if (statusCode === 301 || statusCode === 302 || statusCode === 307 || statusCode === 308) {
         const redirectUrl = response.headers.location;
         response.destroy();
         if (!redirectUrl) {
@@ -220,39 +199,33 @@ async function downloadFromGitHub(url, outputPath) {
           return;
         }
         // Resolve relative redirects
-        const finalRedirectUrl = redirectUrl.startsWith("http")
+        const finalRedirectUrl = redirectUrl.startsWith('http')
           ? redirectUrl
           : new URL(redirectUrl, url).href;
         console.log(`  Following redirect: ${finalRedirectUrl}`);
-        return downloadFromGitHub(finalRedirectUrl, outputPath)
-          .then(resolve)
-          .catch(reject);
+        return downloadFromGitHub(finalRedirectUrl, outputPath).then(resolve).catch(reject);
       }
 
       if (statusCode !== 200) {
         response.destroy();
-        reject(
-          new Error(
-            `Failed to download ${url}: ${statusCode} ${response.statusMessage}`
-          )
-        );
+        reject(new Error(`Failed to download ${url}: ${statusCode} ${response.statusMessage}`));
         return;
       }
 
       const fileStream = fs.createWriteStream(outputPath);
       response.pipe(fileStream);
-      fileStream.on("finish", () => {
+      fileStream.on('finish', () => {
         fileStream.close();
         resolve();
       });
-      fileStream.on("error", (error) => {
+      fileStream.on('error', (error) => {
         response.destroy();
         reject(error);
       });
     });
 
-    request.on("error", reject);
-    request.on("timeout", () => {
+    request.on('error', reject);
+    request.on('timeout', () => {
       request.destroy();
       reject(new Error(`Request timeout for ${url}`));
     });
@@ -260,8 +233,8 @@ async function downloadFromGitHub(url, outputPath) {
 }
 
 async function main() {
-  const artifactsDir = "artifacts";
-  const tempDir = path.join(artifactsDir, "temp");
+  const artifactsDir = 'artifacts';
+  const tempDir = path.join(artifactsDir, 'temp');
 
   // Create temp directory for downloaded GitHub archives
   if (!fs.existsSync(tempDir)) {
@@ -292,40 +265,30 @@ async function main() {
 
   // 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$/
-    ),
+    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:");
+  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"
-      }`
+      `  ${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",
+    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)) {
@@ -345,11 +308,11 @@ async function main() {
       filename,
       size,
       arch:
-        platform === "macosArm"
-          ? "arm64"
-          : platform === "sourceZip" || platform === "sourceTarGz"
-          ? "source"
-          : "x64",
+        platform === 'macosArm'
+          ? 'arm64'
+          : platform === 'sourceZip' || platform === 'sourceTarGz'
+            ? 'source'
+            : 'x64',
     };
   }
 
@@ -364,9 +327,7 @@ async function main() {
   };
 
   // Remove existing entry for this version if re-running
-  releasesData.releases = releasesData.releases.filter(
-    (r) => r.version !== VERSION
-  );
+  releasesData.releases = releasesData.releases.filter((r) => r.version !== VERSION);
 
   // Prepend new release
   releasesData.releases.unshift(newRelease);
@@ -376,19 +337,19 @@ async function main() {
   await s3Client.send(
     new PutObjectCommand({
       Bucket: BUCKET,
-      Key: "releases.json",
+      Key: 'releases.json',
       Body: JSON.stringify(releasesData, null, 2),
-      ContentType: "application/json",
-      CacheControl: "public, max-age=60",
+      ContentType: 'application/json',
+      CacheControl: 'public, max-age=60',
     })
   );
 
-  console.log("Successfully updated releases.json");
+  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);
+  console.error('Failed to upload to R2:', err);
   process.exit(1);
 });

.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:*)'

.github/workflows/e2e-tests.yml

@@ -3,7 +3,7 @@ name: E2E Tests
 on:
   pull_request:
     branches:
-      - "*"
+      - '*'
   push:
     branches:
       - main
@@ -18,34 +18,15 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup-project
         with:
-          node-version: "22"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
-
-      - name: Configure Git for HTTPS
-        # 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: Install dependencies
-        # Use npm install instead of npm ci to correctly resolve platform-specific
-        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
-        run: npm install
-
-      - name: Install Linux native bindings
-        # Workaround for npm optional dependencies bug (npm/cli#4828)
-        # Explicitly install Linux bindings needed for build tools
-        run: |
-          npm install --no-save --force \
-            @rollup/rollup-linux-x64-gnu@4.53.3 \
-            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+          check-lockfile: 'true'
+          rebuild-node-pty-path: 'apps/server'
 
       - name: Install Playwright browsers
         run: npx playwright install --with-deps chromium
-        working-directory: apps/app
+        working-directory: apps/ui
 
       - name: Build server
         run: npm run build --workspace=apps/server
@@ -71,20 +52,20 @@ jobs:
           exit 1
 
       - name: Run E2E tests
-        # Playwright automatically starts the Next.js frontend via webServer config
-        # (see apps/app/playwright.config.ts) - no need to start it manually
-        run: npm run test --workspace=apps/app
+        # Playwright automatically starts the Vite frontend via webServer config
+        # (see apps/ui/playwright.config.ts) - no need to start it manually
+        run: npm run test --workspace=apps/ui
         env:
           CI: true
-          NEXT_PUBLIC_SERVER_URL: http://localhost:3008
-          NEXT_PUBLIC_SKIP_SETUP: "true"
+          VITE_SERVER_URL: http://localhost:3008
+          VITE_SKIP_SETUP: 'true'
 
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
-          path: apps/app/playwright-report/
+          path: apps/ui/playwright-report/
           retention-days: 7
 
       - name: Upload test results
@@ -92,5 +73,5 @@ jobs:
         if: failure()
         with:
           name: test-results
-          path: apps/app/test-results/
+          path: apps/ui/test-results/
           retention-days: 7

.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
+
+      - name: Check formatting
+        run: npm run format:check

.github/workflows/pr-check.yml

@@ -3,7 +3,7 @@ name: PR Build Check
 on:
   pull_request:
     branches:
-      - "*"
+      - '*'
   push:
     branches:
       - main
@@ -17,33 +17,10 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup-project
         with:
-          node-version: "22"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
+          check-lockfile: 'true'
 
-      - name: Check for SSH URLs in lockfile
-        run: npm run lint:lockfile
-
-      - name: Configure Git for HTTPS
-        # 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: Install dependencies
-        # Use npm install instead of npm ci to correctly resolve platform-specific
-        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
-        run: npm install
-
-      - name: Install Linux native bindings
-        # Workaround for npm optional dependencies bug (npm/cli#4828)
-        # Explicitly install Linux bindings needed for build tools
-        run: |
-          npm install --no-save --force \
-            @rollup/rollup-linux-x64-gnu@4.53.3 \
-            @tailwindcss/oxide-linux-x64-gnu@4.1.17
-
-      - name: Run build:electron
-        run: npm run build:electron
+      - name: Run build:electron (dir only - faster CI)
+        run: npm run build:electron:dir

.github/workflows/release.yml

@@ -1,180 +1,111 @@
-name: Build and Release Electron App
+name: Release Build
 
 on:
-  push:
-    tags:
-      - "v*.*.*" # Triggers on version tags like v1.0.0
-  workflow_dispatch: # Allows manual triggering
-    inputs:
-      version:
-        description: "Version to release (e.g., v1.0.0)"
-        required: true
-        default: "v0.1.0"
+  release:
+    types: [published]
 
 jobs:
-  build-and-release:
+  build:
     strategy:
-      fail-fast: false
       matrix:
-        include:
-          - os: macos-latest
-            name: macOS
-            artifact-name: macos-builds
-          - os: windows-latest
-            name: Windows
-            artifact-name: windows-builds
-          - os: ubuntu-latest
-            name: Linux
-            artifact-name: linux-builds
-
+        os: [ubuntu-latest, macos-latest, windows-latest]
     runs-on: ${{ matrix.os }}
 
-    permissions:
-      contents: write
-
     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: Configure Git for HTTPS
-        # 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: Install dependencies
-        # Use npm install instead of npm ci to correctly resolve platform-specific
-        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
-        run: npm install
-
-      - name: Install Linux native bindings
-        # Workaround for npm optional dependencies bug (npm/cli#4828)
-        # Only needed on Linux - macOS and Windows get their bindings automatically
-        if: matrix.os == 'ubuntu-latest'
-        run: |
-          npm install --no-save --force \
-            @rollup/rollup-linux-x64-gnu@4.53.3 \
-            @tailwindcss/oxide-linux-x64-gnu@4.1.17
-
-      - name: Extract and set version
+      - name: Extract version from tag
         id: version
         shell: bash
         run: |
-          VERSION_TAG="${{ github.event.inputs.version || github.ref_name }}"
-          # Remove 'v' prefix if present (e.g., v1.0.0 -> 1.0.0)
-          VERSION="${VERSION_TAG#v}"
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-          echo "Extracted version: $VERSION from tag: $VERSION_TAG"
-          # Update the app's package.json version
-          cd apps/app
-          npm version $VERSION --no-git-tag-version
-          cd ../..
-          echo "Updated apps/app/package.json to version $VERSION"
+          # 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: Build Electron App (macOS)
-        if: matrix.os == 'macos-latest'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: npm run build:electron -- --mac --x64 --arm64
+      - name: Update package.json version
+        shell: bash
+        run: |
+          node apps/ui/scripts/update-version.mjs "${{ steps.version.outputs.version }}"
 
-      - name: Build Electron App (Windows)
-        if: matrix.os == 'windows-latest'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: npm run build:electron -- --win --x64
-
-      - name: Build Electron App (Linux)
-        if: matrix.os == 'ubuntu-latest'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: npm run build:electron -- --linux --x64
-
-      - name: Upload Release Assets
-        uses: softprops/action-gh-release@v1
+      - name: Setup project
+        uses: ./.github/actions/setup-project
         with:
-          tag_name: ${{ github.event.inputs.version || github.ref_name }}
-          files: |
-            apps/app/dist/*.exe
-            apps/app/dist/*.dmg
-            apps/app/dist/*.AppImage
-            apps/app/dist/*.zip
-            apps/app/dist/*.deb
-            apps/app/dist/*.rpm
-          draft: false
-          prerelease: false
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          check-lockfile: 'true'
 
-      - name: Upload macOS artifacts for R2
+      - 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: ${{ matrix.artifact-name }}
-          path: apps/app/dist/*.dmg
-          retention-days: 1
+          name: macos-builds
+          path: apps/ui/release/*.{dmg,zip}
+          retention-days: 30
 
-      - name: Upload Windows artifacts for R2
+      - name: Upload Windows artifacts
         if: matrix.os == 'windows-latest'
         uses: actions/upload-artifact@v4
         with:
-          name: ${{ matrix.artifact-name }}
-          path: apps/app/dist/*.exe
-          retention-days: 1
+          name: windows-builds
+          path: apps/ui/release/*.exe
+          retention-days: 30
 
-      - name: Upload Linux artifacts for R2
+      - name: Upload Linux artifacts
         if: matrix.os == 'ubuntu-latest'
         uses: actions/upload-artifact@v4
         with:
-          name: ${{ matrix.artifact-name }}
-          path: apps/app/dist/*.AppImage
-          retention-days: 1
+          name: linux-builds
+          path: apps/ui/release/*.{AppImage,deb}
+          retention-days: 30
 
-  upload-to-r2:
-    needs: build-and-release
+  upload:
+    needs: build
     runs-on: ubuntu-latest
+    if: github.event.release.draft == false
 
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-
-      - name: Download all artifacts
+      - name: Download macOS artifacts
         uses: actions/download-artifact@v4
         with:
-          path: artifacts
+          name: macos-builds
+          path: artifacts/macos-builds
 
-      - name: Install AWS SDK
-        run: npm install @aws-sdk/client-s3
+      - name: Download Windows artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: windows-builds
+          path: artifacts/windows-builds
 
-      - name: Extract version
-        id: version
-        shell: bash
-        run: |
-          VERSION_TAG="${{ github.event.inputs.version || github.ref_name }}"
-          # Remove 'v' prefix if present (e.g., v1.0.0 -> 1.0.0)
-          VERSION="${VERSION_TAG#v}"
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-          echo "version_tag=$VERSION_TAG" >> $GITHUB_OUTPUT
-          echo "Extracted version: $VERSION from tag: $VERSION_TAG"
+      - name: Download Linux artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: linux-builds
+          path: artifacts/linux-builds
 
-      - name: Upload to R2 and update releases.json
+      - name: Upload to GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            artifacts/macos-builds/*
+            artifacts/windows-builds/*
+            artifacts/linux-builds/*
         env:
-          R2_ENDPOINT: ${{ secrets.R2_ENDPOINT }}
-          R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
-          R2_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
-          R2_BUCKET_NAME: ${{ secrets.R2_BUCKET_NAME }}
-          R2_PUBLIC_URL: ${{ secrets.R2_PUBLIC_URL }}
-          RELEASE_VERSION: ${{ steps.version.outputs.version }}
-          RELEASE_TAG: ${{ steps.version.outputs.version_tag }}
-          GITHUB_REPOSITORY: ${{ github.repository }}
-        run: node .github/scripts/upload-to-r2.js
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.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=moderate
+        continue-on-error: false

.github/workflows/test.yml

@@ -3,7 +3,7 @@ name: Test Suite
 on:
   pull_request:
     branches:
-      - "*"
+      - '*'
   push:
     branches:
       - main
@@ -17,30 +17,16 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup-project
         with:
-          node-version: "22"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
+          check-lockfile: 'true'
+          rebuild-node-pty-path: 'apps/server'
 
-      - name: Configure Git for HTTPS
-        # 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: Install dependencies
-        # Use npm install instead of npm ci to correctly resolve platform-specific
-        # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
-        run: npm install
-
-      - name: Install Linux native bindings
-        # Workaround for npm optional dependencies bug (npm/cli#4828)
-        # Explicitly install Linux bindings needed for build tools
-        run: |
-          npm install --no-save --force \
-            @rollup/rollup-linux-x64-gnu@4.53.3 \
-            @tailwindcss/oxide-linux-x64-gnu@4.1.17
+      - 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

.gitignore

@@ -78,3 +78,10 @@ blob-report/
 
 # Misc
 *.pem
+
+docker-compose.override.yml
+.claude/docker-compose.override.yml
+.claude/hans/
+
+pnpm-lock.yaml
+yarn.lock

.husky/pre-commit

@@ -0,0 +1,46 @@
+#!/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.
+export PATH="$PATH:/usr/local/bin:/opt/homebrew/bin:/usr/bin"
+
+# 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

.nvmrc

@@ -0,0 +1,2 @@
+22
+

.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/

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

CLAUDE.md

@@ -0,0 +1,172 @@
+# 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-5-20251101`
+
+## Environment Variables
+
+- `ANTHROPIC_API_KEY` - Anthropic API key (or use Claude Code CLI auth)
+- `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

CONTRIBUTING.md

@@ -0,0 +1,685 @@
+# 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)
+    - [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.
+
+### 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:
+
+```bash
+# Fetch latest changes from upstream
+git fetch upstream
+
+# Rebase your branch on main (if needed)
+git rebase upstream/main
+```
+
+#### 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. Ensure the base repository is `AutoMaker-Org/automaker` and base branch is `main`
+4. Fill out the PR template completely
+
+#### PR Requirements Checklist
+
+Your PR should include:
+
+- [ ] **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 main 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!

DISCLAIMER.md

@@ -30,6 +30,26 @@ Before running Automaker, we strongly recommend reviewing the source code yourse
 - **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:

Dockerfile

@@ -0,0 +1,195 @@
+# 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/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 (--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
+
+# Install git, curl, bash (for terminal), gosu (for user switching), and GitHub CLI (pinned version, multi-arch)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git curl bash gosu ca-certificates \
+    && 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
+RUN groupadd -g 1001 automaker && \
+    useradd -u 1001 -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)"
+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
+
+# 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
+# VITE_SERVER_URL tells the UI where to find the API server
+# Use ARG to allow overriding at build time: --build-arg VITE_SERVER_URL=http://api.example.com
+ARG VITE_SERVER_URL=http://localhost:3008
+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
+
+# 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;"]

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="apps/app/public/readme_logo.png" alt="Automaker Logo" height="80" />
+  <img src="apps/ui/public/readme_logo.svg" alt="Automaker Logo" height="80" />
 </p>
 
 > **[!TIP]**
@@ -8,7 +8,7 @@
 >
 > 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).
+> **Learn how:** Master these same techniques and workflows in the [Agentic Jumpstart course](https://agenticjumpstart.com/?utm=automaker-gh).
 
 # Automaker
 
@@ -19,7 +19,7 @@
 
 - [What Makes Automaker Different?](#what-makes-automaker-different)
   - [The Workflow](#the-workflow)
-  - [Powered by Claude Code](#powered-by-claude-code)
+  - [Powered by Claude Agent SDK](#powered-by-claude-agent-sdk)
   - [Why This Matters](#why-this-matters)
 - [Security Disclaimer](#security-disclaimer)
 - [Community & Support](#community--support)
@@ -28,22 +28,36 @@
   - [Quick Start](#quick-start)
 - [How to Run](#how-to-run)
   - [Development Mode](#development-mode)
-    - [Electron Desktop App (Recommended)](#electron-desktop-app-recommended)
-    - [Web Browser Mode](#web-browser-mode)
   - [Building for Production](#building-for-production)
-  - [Running Production Build](#running-production-build)
   - [Testing](#testing)
   - [Linting](#linting)
-  - [Authentication Options](#authentication-options)
-  - [Persistent Setup (Optional)](#persistent-setup-optional)
+  - [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 Code automatically implement them.
+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)
 
@@ -59,43 +73,27 @@ Traditional development tools help you write code. Automaker helps you **orchest
 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 Code
+### Powered by Claude Agent SDK
 
-Automaker leverages the [Claude Agent SDK](https://docs.anthropic.com/en/docs/claude-code) 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.
+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.
 
----
-
-> **[!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)**
-
----
-
 ## 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:**  
-https://discord.gg/jjem7aEDKU
+👉 **Join the Discord:** [Agentic Jumpstart Discord](https://discord.gg/jjem7aEDKU)
 
 ---
 
@@ -103,25 +101,57 @@ https://discord.gg/jjem7aEDKU
 
 ### Prerequisites
 
-- Node.js 18+
-- npm
-- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and authenticated
+- **Node.js 18+** (tested with Node.js 22)
+- **npm** (comes with Node.js)
+- **Authentication** (choose one):
+  - **[Claude Code CLI](https://code.claude.com/docs/en/overview)** (recommended) - Install and authenticate, credentials used automatically
+  - **Anthropic API Key** - Direct API key for Claude Agent SDK ([get one here](https://console.anthropic.com/))
 
 ### Quick Start
 
 ```bash
-# 1. Clone the repo
+# 1. Clone the repository
 git clone https://github.com/AutoMaker-Org/automaker.git
 cd automaker
 
 # 2. Install dependencies
 npm install
 
-# 3. Run Automaker (pick your mode)
-npm run dev
-# Then choose your run mode when prompted, or use specific commands below
+# 3. Build shared packages (Now can be skipped npm install / run dev does it automaticly)
+npm run build:packages
+
+# 4. Start Automaker (production mode)
+npm run start
+# Choose between:
+#   1. Web Application (browser at localhost:3007)
+#   2. Desktop Application (Electron - recommended)
 ```
 
+**Note:** The `npm run start` command will:
+
+- Check for dependencies and install if needed
+- Build the application if needed
+- Kill any processes on ports 3007/3008
+- Present an interactive menu to choose your run mode
+- Run in production mode (no hot reload)
+
+**Authentication Setup:** On first run, Automaker will automatically show a setup wizard where you can configure authentication. You can choose to:
+
+- Use **Claude Code CLI** (recommended) - Automaker will detect your CLI credentials automatically
+- Enter an **API key** directly in the wizard
+
+If you prefer to set up authentication before running (e.g., for headless deployments or CI/CD), you can set it manually:
+
+```bash
+# Option A: Environment variable
+export ANTHROPIC_API_KEY="sk-ant-..."
+
+# Option B: Create .env file in project root
+echo "ANTHROPIC_API_KEY=sk-ant-..." > .env
+```
+
+**For Development:** If you want to develop on Automaker with Vite live reload and hot module replacement, use `npm run dev` instead. This will start the development server with fast refresh and instant updates as you make changes.
+
 ## How to Run
 
 ### Development Mode
@@ -159,31 +189,162 @@ npm run dev:web
 
 ### Building for Production
 
+#### Web Application
+
 ```bash
-# Build Next.js app
+# Build for web deployment (uses Vite)
 npm run build
 
-# Build Electron app for distribution
-npm run build:electron
-```
-
-### Running Production Build
-
-```bash
-# Start production Next.js server
+# Run production build
 npm run start
 ```
 
-### Testing
+#### Desktop Application
 
 ```bash
-# Run tests headless
-npm run test
+# Build for current platform (macOS/Windows/Linux)
+npm run build:electron
 
-# Run tests with browser visible
-npm run test:headed
+# 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, x64)
+
+# Output directory: apps/ui/release/
 ```
 
+#### 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
+```
+
+##### Configuration
+
+Create a `.env` file in the project root if using API key authentication:
+
+```bash
+# Optional: Anthropic API key (not needed if using Claude CLI authentication)
+ANTHROPIC_API_KEY=sk-ant-...
+```
+
+**Note:** Most users authenticate via Claude CLI instead of API keys. See [Claude CLI Authentication](#claude-cli-authentication-optional) 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 (Optional)
+
+To use Claude Code CLI authentication instead of an API key, mount your Claude CLI config directory:
+
+```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.
+
+##### 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.
+
+### 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
@@ -191,59 +352,300 @@ npm run test:headed
 npm run lint
 ```
 
-### Authentication Options
+### Environment Configuration
 
-Automaker supports multiple authentication methods (in order of priority):
+#### Authentication (if not using Claude Code CLI)
 
-| Method           | Environment Variable | Description                     |
-| ---------------- | -------------------- | ------------------------------- |
-| API Key (env)    | `ANTHROPIC_API_KEY`  | Anthropic API key               |
-| API Key (stored) | —                    | Anthropic API key stored in app |
+- `ANTHROPIC_API_KEY` - Your Anthropic API key for Claude Agent SDK (not needed if using Claude Code CLI)
 
-### Persistent Setup (Optional)
+#### 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 policy (default: \*)
+
+#### Optional - Development
+
+- `VITE_SKIP_ELECTRON` - Skip Electron in dev mode
+- `OPEN_DEVTOOLS` - Auto-open DevTools in Electron
+
+### Authentication Setup
+
+#### Option 1: Claude Code CLI (Recommended)
+
+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!
+
+#### Option 2: Direct API Key
+
+If you prefer not to use the CLI, you can provide an Anthropic API key directly using one of these methods:
+
+##### 2a. Shell Configuration
 
 Add to your `~/.bashrc` or `~/.zshrc`:
 
 ```bash
-export ANTHROPIC_API_KEY="YOUR_API_KEY_HERE"
+export ANTHROPIC_API_KEY="sk-ant-..."
 ```
 
-Then restart your terminal or run `source ~/.bashrc`.
+Then restart your terminal or run `source ~/.bashrc` (or `source ~/.zshrc`).
+
+##### 2b. .env File
+
+Create a `.env` file in the project root (gitignored):
+
+```bash
+ANTHROPIC_API_KEY=sk-ant-...
+PORT=3008
+DATA_DIR=./data
+```
+
+##### 2c. In-App Storage
+
+The application can store your API key securely in the settings UI. The key is persisted in the `DATA_DIR` directory.
 
 ## 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"
-- 🧠 **Multi-Model Support** - Choose from multiple AI models including Claude Opus, Sonnet, and more
-- 💭 **Extended Thinking** - Enable extended thinking modes for complex problem-solving
-- 📡 **Real-time Agent Output** - View live agent output, logs, and file diffs as features are being implemented
-- 🔍 **Project Analysis** - AI-powered project structure analysis to understand your codebase
-- 📁 **Context Management** - Add context files to help AI agents understand your project better
-- 💡 **Feature Suggestions** - AI-generated feature suggestions based on your project
-- 🖼️ **Image Support** - Attach images and screenshots to feature descriptions
-- ⚡ **Concurrent Processing** - Configure concurrency to process multiple features simultaneously
-- 🧪 **Test Integration** - Automatic test running and verification for implemented features
-- 🔀 **Git Integration** - View git diffs and track changes made by AI agents
-- 👤 **AI Profiles** - Create and manage different AI agent profiles for various tasks
-- 💬 **Chat History** - Keep track of conversations and interactions with AI agents
-- ⌨️ **Keyboard Shortcuts** - Efficient navigation and actions via keyboard shortcuts
-- 🎨 **Dark/Light Theme** - Beautiful UI with theme support
-- 🖥️ **Cross-Platform** - Desktop application built with Electron for Windows, macOS, and Linux
+- 🔀 **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
 
-- [Next.js](https://nextjs.org) - React framework
-- [Electron](https://www.electronjs.org/) - Desktop application framework
-- [Tailwind CSS](https://tailwindcss.com/) - Styling
-- [Zustand](https://zustand-demo.pmnd.rs/) - State management
-- [dnd-kit](https://dndkit.com/) - Drag and drop functionality
+### 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                   |
+| **Profiles**       | `M`      | Create and manage AI agent profiles with custom prompts and configurations                       |
+| **Settings**       | `S`      | Configure themes, shortcuts, defaults, authentication, and more                                  |
+| **Terminal**       | `T`      | Integrated terminal with tabs, splits, and persistent sessions                                   |
+| **GitHub Issues**  | -        | Import and validate GitHub issues, convert to tasks                                              |
+| **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), `M` (Profiles), `T` (Terminal)
+- **UI:** `` ` `` (Toggle sidebar)
+- **Actions:** `N` (New item in current view), `G` (Start next features), `O` (Open project), `P` (Project picker)
+- **Projects:** `Q`/`E` (Cycle previous/next project)
+
+## 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
+├── settings.json          # Project-specific settings
+├── spec.md               # Project specification
+├── analysis.json         # Project structure analysis
+└── feature-suggestions.json # AI-generated suggestions
+```
+
+#### 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
 
-To learn more about Next.js, take a look at the following resources:
+### Documentation
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Contributing Guide](./CONTRIBUTING.md) - How to contribute to Automaker
+- [Project Documentation](./docs/) - Architecture guides, patterns, and developer docs
+- [Docker Isolation Guide](./docs/docker-isolation.md) - Security-focused Docker deployment
+- [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)
 
 ## License
 
@@ -252,19 +654,16 @@ This project is licensed under the **Automaker License Agreement**. See [LICENSE
 **Summary of Terms:**
 
 - **Allowed:**
-
   - **Build Anything:** You can clone and use Automaker locally or in your organization to build ANY product (commercial or free).
   - **Internal Use:** You can use it internally within your company (commercial or non-profit) without restriction.
   - **Modify:** You can modify the code for internal use within your organization (commercial or non-profit).
 
 - **Restricted (The "No Monetization of the Tool" Rule):**
-
   - **No Resale:** You cannot resell Automaker itself.
   - **No SaaS:** You cannot host Automaker as a service for others.
   - **No Monetizing Mods:** You cannot distribute modified versions of Automaker for money.
 
 - **Liability:**
-
   - **Use at Own Risk:** This tool uses AI. We are **NOT** responsible if it breaks your computer, deletes your files, or generates bad code. You assume all risk.
 
 - **Contributing:**

REFACTORING_CANDIDATES.md

@@ -1,310 +0,0 @@
-# Large Files - Refactoring Candidates
-
-This document tracks files in the AutoMaker codebase that exceed 3000 lines or are significantly large (1000+ lines) and should be considered for refactoring into smaller, more maintainable components.
-
-**Last Updated:** 2025-12-15
-**Total Large Files:** 8
-**Combined Size:** 15,027 lines
-
----
-
-## 🔴 CRITICAL - Over 3000 Lines
-
-### 1. board-view.tsx - 3,325 lines
-**Path:** `apps/app/src/components/views/board-view.tsx`
-**Type:** React Component (TSX)
-**Priority:** VERY HIGH
-
-**Description:**
-Main Kanban board view component that serves as the centerpiece of the application.
-
-**Current Responsibilities:**
-- Feature/task card management and drag-and-drop operations using @dnd-kit
-- Adding, editing, and deleting features
-- Running autonomous agents to implement features
-- Displaying feature status across multiple columns (Backlog, In Progress, Waiting Approval, Verified)
-- Model/AI profile selection for feature implementation
-- Advanced options configuration (thinking level, model selection, skip tests)
-- Search/filtering functionality for cards
-- Output modal for viewing agent results
-- Feature suggestions dialog
-- Board background customization
-- Integration with Electron APIs for IPC communication
-- Keyboard shortcuts support
-- 40+ state variables for managing UI state
-
-**Refactoring Recommendations:**
-Extract into smaller components:
-- `AddFeatureDialog.tsx` - Feature creation dialog with image upload
-- `EditFeatureDialog.tsx` - Feature editing dialog
-- `AgentOutputModal.tsx` - Already exists, verify separation
-- `FeatureSuggestionsDialog.tsx` - Already exists, verify separation
-- `BoardHeader.tsx` - Header with controls and search
-- `BoardSearchBar.tsx` - Search and filter functionality
-- `ConcurrencyControl.tsx` - Concurrency slider component
-- `BoardActions.tsx` - Action buttons (add feature, auto mode, etc.)
-- `DragDropContext.tsx` - Wrap drag-and-drop logic
-- Custom hooks:
-  - `useBoardFeatures.ts` - Feature loading and management
-  - `useBoardDragDrop.ts` - Drag and drop handlers
-  - `useBoardActions.ts` - Feature action handlers (run, verify, delete, etc.)
-  - `useBoardKeyboardShortcuts.ts` - Keyboard shortcut logic
-
----
-
-## 🟡 HIGH PRIORITY - 2000+ Lines
-
-### 2. sidebar.tsx - 2,396 lines
-**Path:** `apps/app/src/components/layout/sidebar.tsx`
-**Type:** React Component (TSX)
-**Priority:** HIGH
-
-**Description:**
-Main navigation sidebar with comprehensive project management.
-
-**Current Responsibilities:**
-- Project folder navigation and selection
-- View mode switching (Board, Agent, Settings, etc.)
-- Project operations (create, delete, rename)
-- Theme and appearance controls
-- Terminal, Wiki, and other view launchers
-- Drag-and-drop project reordering
-- Settings and configuration access
-
-**Refactoring Recommendations:**
-Split into focused components:
-- `ProjectSelector.tsx` - Project list and selection
-- `NavigationTabs.tsx` - View mode tabs
-- `ProjectActions.tsx` - Create, delete, rename operations
-- `SettingsMenu.tsx` - Settings dropdown
-- `ThemeSelector.tsx` - Theme controls
-- `ViewLaunchers.tsx` - Terminal, Wiki launchers
-- Custom hooks:
-  - `useProjectManagement.ts` - Project CRUD operations
-  - `useSidebarState.ts` - Sidebar state management
-
----
-
-### 3. electron.ts - 2,356 lines
-**Path:** `apps/app/src/lib/electron.ts`
-**Type:** TypeScript Utility/API Bridge
-**Priority:** HIGH
-
-**Description:**
-Electron IPC bridge and type definitions for frontend-backend communication.
-
-**Current Responsibilities:**
-- File system operations (read, write, directory listing)
-- Project management APIs
-- Feature management APIs
-- Terminal/shell execution
-- Auto mode and agent execution APIs
-- Worktree management
-- Provider status APIs
-- Event handling and subscriptions
-
-**Refactoring Recommendations:**
-Modularize into domain-specific API modules:
-- `api/file-system-api.ts` - File operations
-- `api/project-api.ts` - Project CRUD
-- `api/feature-api.ts` - Feature management
-- `api/execution-api.ts` - Auto mode and agent execution
-- `api/provider-api.ts` - Provider status and management
-- `api/worktree-api.ts` - Git worktree operations
-- `api/terminal-api.ts` - Terminal/shell APIs
-- `types/electron-types.ts` - Shared type definitions
-- `electron.ts` - Main export aggregator
-
----
-
-### 4. app-store.ts - 2,174 lines
-**Path:** `apps/app/src/store/app-store.ts`
-**Type:** TypeScript State Management (Zustand Store)
-**Priority:** HIGH
-
-**Description:**
-Centralized application state store using Zustand.
-
-**Current Responsibilities:**
-- Global app state types and interfaces
-- Project and feature management state
-- Theme and appearance settings
-- API keys configuration
-- Keyboard shortcuts configuration
-- Terminal themes configuration
-- Auto mode settings
-- All store mutations and selectors
-
-**Refactoring Recommendations:**
-Split into domain-specific stores:
-- `stores/projects-store.ts` - Project state and actions
-- `stores/features-store.ts` - Feature state and actions
-- `stores/ui-store.ts` - UI state (theme, sidebar, modals)
-- `stores/settings-store.ts` - User settings and preferences
-- `stores/execution-store.ts` - Auto mode and running tasks
-- `stores/provider-store.ts` - Provider configuration
-- `types/store-types.ts` - Shared type definitions
-- `app-store.ts` - Main store aggregator with combined selectors
-
----
-
-## 🟢 MEDIUM PRIORITY - 1000-2000 Lines
-
-### 5. auto-mode-service.ts - 1,232 lines
-**Path:** `apps/server/src/services/auto-mode-service.ts`
-**Type:** TypeScript Service (Backend)
-**Priority:** MEDIUM-HIGH
-
-**Description:**
-Core autonomous feature implementation service.
-
-**Current Responsibilities:**
-- Worktree creation and management
-- Feature execution with Claude Agent SDK
-- Concurrent execution with concurrency limits
-- Progress streaming via events
-- Verification and merge workflows
-- Provider management
-- Error handling and classification
-
-**Refactoring Recommendations:**
-Extract into service modules:
-- `services/worktree-manager.ts` - Worktree operations
-- `services/feature-executor.ts` - Feature execution logic
-- `services/concurrency-manager.ts` - Concurrency control
-- `services/verification-service.ts` - Verification workflows
-- `utils/error-classifier.ts` - Error handling utilities
-
----
-
-### 6. spec-view.tsx - 1,230 lines
-**Path:** `apps/app/src/components/views/spec-view.tsx`
-**Type:** React Component (TSX)
-**Priority:** MEDIUM
-
-**Description:**
-Specification editor view component for feature specification management.
-
-**Refactoring Recommendations:**
-Extract editor components and hooks:
-- `SpecEditor.tsx` - Main editor component
-- `SpecToolbar.tsx` - Editor toolbar
-- `SpecSidebar.tsx` - Spec navigation sidebar
-- `useSpecEditor.ts` - Editor state management
-
----
-
-### 7. kanban-card.tsx - 1,180 lines
-**Path:** `apps/app/src/components/views/kanban-card.tsx`
-**Type:** React Component (TSX)
-**Priority:** MEDIUM
-
-**Description:**
-Individual Kanban card component with rich feature display and interaction.
-
-**Refactoring Recommendations:**
-Split into smaller card components:
-- `KanbanCardHeader.tsx` - Card title and metadata
-- `KanbanCardBody.tsx` - Card content
-- `KanbanCardActions.tsx` - Action buttons
-- `KanbanCardStatus.tsx` - Status indicators
-- `useKanbanCard.ts` - Card interaction logic
-
----
-
-### 8. analysis-view.tsx - 1,134 lines
-**Path:** `apps/app/src/components/views/analysis-view.tsx`
-**Type:** React Component (TSX)
-**Priority:** MEDIUM
-
-**Description:**
-Analysis view component for displaying and managing feature analysis data.
-
-**Refactoring Recommendations:**
-Extract visualization and data components:
-- `AnalysisChart.tsx` - Chart/graph components
-- `AnalysisTable.tsx` - Data table
-- `AnalysisFilters.tsx` - Filter controls
-- `useAnalysisData.ts` - Data fetching and processing
-
----
-
-## Refactoring Strategy
-
-### Phase 1: Critical (Immediate)
-1. **board-view.tsx** - Break into dialogs, header, and custom hooks
-   - Extract all dialogs first (AddFeature, EditFeature)
-   - Move to custom hooks for business logic
-   - Split remaining UI into smaller components
-
-### Phase 2: High Priority (Next Sprint)
-2. **sidebar.tsx** - Componentize navigation and project management
-3. **electron.ts** - Modularize into API domains
-4. **app-store.ts** - Split into domain stores
-
-### Phase 3: Medium Priority (Future)
-5. **auto-mode-service.ts** - Extract service modules
-6. **spec-view.tsx** - Break into editor components
-7. **kanban-card.tsx** - Split card into sub-components
-8. **analysis-view.tsx** - Extract visualization components
-
----
-
-## General Refactoring Guidelines
-
-### When Refactoring Large Components:
-
-1. **Extract Dialogs/Modals First**
-   - Move dialog components to separate files
-   - Keep dialog state management in parent initially
-   - Later extract to custom hooks if complex
-
-2. **Create Custom Hooks for Business Logic**
-   - Move data fetching to `useFetch*` hooks
-   - Move complex state logic to `use*State` hooks
-   - Move side effects to `use*Effect` hooks
-
-3. **Split UI into Presentational Components**
-   - Header/toolbar components
-   - Content area components
-   - Footer/action components
-
-4. **Move Utils and Helpers**
-   - Extract pure functions to utility files
-   - Move constants to separate constant files
-   - Create type files for shared interfaces
-
-### When Refactoring Large Files:
-
-1. **Identify Domains/Concerns**
-   - Group related functionality
-   - Find natural boundaries
-
-2. **Extract Gradually**
-   - Start with least coupled code
-   - Work towards core functionality
-   - Test after each extraction
-
-3. **Maintain Type Safety**
-   - Export types from extracted modules
-   - Use shared type files for common interfaces
-   - Ensure no type errors after refactoring
-
----
-
-## Progress Tracking
-
-- [ ] board-view.tsx (3,325 lines)
-- [ ] sidebar.tsx (2,396 lines)
-- [ ] electron.ts (2,356 lines)
-- [ ] app-store.ts (2,174 lines)
-- [ ] auto-mode-service.ts (1,232 lines)
-- [ ] spec-view.tsx (1,230 lines)
-- [ ] kanban-card.tsx (1,180 lines)
-- [ ] analysis-view.tsx (1,134 lines)
-
-**Target:** All files under 500 lines, most under 300 lines
-
----
-
-*Generated: 2025-12-15*

TODO.md

@@ -0,0 +1,17 @@
+# Bugs
+
+- Setting the default model does not seem like it works.
+
+# UX
+
+- Consolidate all models to a single place in the settings instead of having AI profiles and all this other stuff
+- Simplify the create feature modal. It should just be one page. I don't need nessa tabs and all these nested buttons. It's too complex.
+- added to do's list checkbox directly into the card so as it's going through if there's any to do items we can see those update live
+- When the feature is done, I want to see a summary of the LLM. That's the first thing I should see when I double click the card.
+- I went away to mass edit all my features. For example, when I created a new project, it added auto testing on every single feature card. Now I have to manually go through one by one and change those. Have a way to mass edit those, the configuration of all them.
+- Double check and debug if there's memory leaks. It seems like the memory of automaker grows like 3 gigabytes. It's 5gb right now and I'm running three different cursor cli features implementing at the same time.
+- Typing in the text area of the plan mode was super laggy.
+- When I have a bunch of features running at the same time, it seems like I cannot edit the features in the backlog. Like they don't persist their file changes and I think this is because of the secure FS file has an internal queue to prevent hitting that file open write limit. We may have to reconsider refactoring away from file system and do Postgres or SQLite or something.
+- modals are not scrollable if height of the screen is small enough
+- and the Agent Runner add an archival button for the new sessions.
+- investigate a potential issue with the feature cards not refreshing. I see a lock icon on the feature card But it doesn't go away until I open the card and edit it and I turn the testing mode off. I think there's like a refresh sync issue.

apps/app/electron/.eslintrc.js

@@ -1,5 +0,0 @@
-module.exports = {
-  rules: {
-    "@typescript-eslint/no-require-imports": "off",
-  },
-};

apps/app/electron/main.js

@@ -1,435 +0,0 @@
-/**
- * Simplified Electron main process
- *
- * This version spawns the backend server and uses HTTP API for most operations.
- * Only native features (dialogs, shell) use IPC.
- */
-
-const path = require("path");
-const { spawn } = require("child_process");
-const fs = require("fs");
-const http = require("http");
-const { app, BrowserWindow, ipcMain, dialog, shell } = require("electron");
-
-// Load environment variables from .env file (development only)
-if (!app.isPackaged) {
-  try {
-    require("dotenv").config({ path: path.join(__dirname, "../.env") });
-  } catch (error) {
-    console.warn("[Electron] dotenv not available:", error.message);
-  }
-}
-
-let mainWindow = null;
-let serverProcess = null;
-let staticServer = null;
-const SERVER_PORT = 3008;
-const STATIC_PORT = 3007;
-
-// Get icon path - works in both dev and production, cross-platform
-function getIconPath() {
-  // Different icon formats for different platforms
-  let iconFile;
-  if (process.platform === "win32") {
-    iconFile = "icon.ico";
-  } else if (process.platform === "darwin") {
-    iconFile = "logo_larger.png";
-  } else {
-    // Linux
-    iconFile = "logo_larger.png";
-  }
-
-  const iconPath = path.join(__dirname, "../public", iconFile);
-
-  // Verify the icon exists
-  if (!fs.existsSync(iconPath)) {
-    console.warn(`[Electron] Icon not found at: ${iconPath}`);
-    return null;
-  }
-
-  return iconPath;
-}
-
-/**
- * Start static file server for production builds
- */
-async function startStaticServer() {
-  const staticPath = path.join(__dirname, "../out");
-
-  staticServer = http.createServer((request, response) => {
-    // Parse the URL and remove query string
-    let filePath = path.join(staticPath, request.url.split("?")[0]);
-
-    // Default to index.html for directory requests
-    if (filePath.endsWith("/")) {
-      filePath = path.join(filePath, "index.html");
-    } else if (!path.extname(filePath)) {
-      filePath += ".html";
-    }
-
-    // Check if file exists
-    fs.stat(filePath, (err, stats) => {
-      if (err || !stats.isFile()) {
-        // Try index.html for SPA fallback
-        filePath = path.join(staticPath, "index.html");
-      }
-
-      // Read and serve the file
-      fs.readFile(filePath, (error, content) => {
-        if (error) {
-          response.writeHead(500);
-          response.end("Server Error");
-          return;
-        }
-
-        // Set content type based on file extension
-        const ext = path.extname(filePath);
-        const contentTypes = {
-          ".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",
-        };
-
-        response.writeHead(200, { "Content-Type": contentTypes[ext] || "application/octet-stream" });
-        response.end(content);
-      });
-    });
-  });
-
-  return new Promise((resolve, reject) => {
-    staticServer.listen(STATIC_PORT, (err) => {
-      if (err) {
-        reject(err);
-      } else {
-        console.log(`[Electron] Static server running at http://localhost:${STATIC_PORT}`);
-        resolve();
-      }
-    });
-  });
-}
-
-/**
- * Start the backend server
- */
-async function startServer() {
-  const isDev = !app.isPackaged;
-
-  // Server entry point - use tsx in dev, compiled version in production
-  let command, args, serverPath;
-  if (isDev) {
-    // In development, use tsx to run TypeScript directly
-    // Use node from PATH (process.execPath in Electron points to Electron, not Node.js)
-    // spawn() resolves "node" from PATH on all platforms (Windows, Linux, macOS)
-    command = "node";
-    serverPath = path.join(__dirname, "../../server/src/index.ts");
-
-    // Find tsx CLI - check server node_modules first, then root
-    const serverNodeModules = path.join(
-      __dirname,
-      "../../server/node_modules/tsx"
-    );
-    const rootNodeModules = path.join(__dirname, "../../../node_modules/tsx");
-
-    let tsxCliPath;
-    if (fs.existsSync(path.join(serverNodeModules, "dist/cli.mjs"))) {
-      tsxCliPath = path.join(serverNodeModules, "dist/cli.mjs");
-    } else if (fs.existsSync(path.join(rootNodeModules, "dist/cli.mjs"))) {
-      tsxCliPath = path.join(rootNodeModules, "dist/cli.mjs");
-    } else {
-      // Last resort: try require.resolve
-      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 {
-    // In production, use compiled JavaScript
-    command = "node";
-    serverPath = path.join(process.resourcesPath, "server", "index.js");
-    args = [serverPath];
-
-    // Verify server files exist
-    if (!fs.existsSync(serverPath)) {
-      throw new Error(`Server not found at: ${serverPath}`);
-    }
-  }
-
-  // Set environment variables for server
-  const serverNodeModules = app.isPackaged
-    ? path.join(process.resourcesPath, "server", "node_modules")
-    : path.join(__dirname, "../../server/node_modules");
-
-  // Set default workspace directory to user's Documents/Automaker
-  const defaultWorkspaceDir = path.join(app.getPath("documents"), "Automaker");
-
-  // Ensure workspace directory exists
-  if (!fs.existsSync(defaultWorkspaceDir)) {
-    try {
-      fs.mkdirSync(defaultWorkspaceDir, { recursive: true });
-      console.log("[Electron] Created workspace directory:", defaultWorkspaceDir);
-    } catch (error) {
-      console.error("[Electron] Failed to create workspace directory:", error);
-    }
-  }
-
-  const env = {
-    ...process.env,
-    PORT: SERVER_PORT.toString(),
-    DATA_DIR: app.getPath("userData"),
-    NODE_PATH: serverNodeModules,
-    WORKSPACE_DIR: process.env.WORKSPACE_DIR || defaultWorkspaceDir,
-  };
-
-  console.log("[Electron] Starting backend server...");
-  console.log("[Electron] Server path:", serverPath);
-  console.log("[Electron] NODE_PATH:", serverNodeModules);
-
-  serverProcess = spawn(command, args, {
-    cwd: path.dirname(serverPath),
-    env,
-    stdio: ["ignore", "pipe", "pipe"],
-  });
-
-  serverProcess.stdout.on("data", (data) => {
-    console.log(`[Server] ${data.toString().trim()}`);
-  });
-
-  serverProcess.stderr.on("data", (data) => {
-    console.error(`[Server Error] ${data.toString().trim()}`);
-  });
-
-  serverProcess.on("close", (code) => {
-    console.log(`[Server] Process exited with code ${code}`);
-    serverProcess = null;
-  });
-
-  serverProcess.on("error", (err) => {
-    console.error(`[Server] Failed to start server process:`, err);
-    serverProcess = null;
-  });
-
-  // Wait for server to be ready
-  await waitForServer();
-}
-
-/**
- * Wait for server to be available
- */
-async function waitForServer(maxAttempts = 30) {
-  const http = require("http");
-
-  for (let i = 0; i < maxAttempts; i++) {
-    try {
-      await new Promise((resolve, reject) => {
-        const req = http.get(
-          `http://localhost:${SERVER_PORT}/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"));
-        });
-      });
-      console.log("[Electron] Server is ready");
-      return;
-    } catch {
-      await new Promise((r) => setTimeout(r, 500));
-    }
-  }
-
-  throw new Error("Server failed to start");
-}
-
-/**
- * Create the main window
- */
-function createWindow() {
-  const iconPath = getIconPath();
-  const windowOptions = {
-    width: 1400,
-    height: 900,
-    minWidth: 1024,
-    minHeight: 700,
-    webPreferences: {
-      preload: path.join(__dirname, "preload.js"),
-      contextIsolation: true,
-      nodeIntegration: false,
-    },
-    titleBarStyle: "hiddenInset",
-    backgroundColor: "#0a0a0a",
-  };
-
-  // Only set icon if it exists
-  if (iconPath) {
-    windowOptions.icon = iconPath;
-  }
-
-  mainWindow = new BrowserWindow(windowOptions);
-
-  // Load Next.js dev server in development or static server in production
-  const isDev = !app.isPackaged;
-  mainWindow.loadURL(`http://localhost:${STATIC_PORT}`);
-  if (isDev && process.env.OPEN_DEVTOOLS === "true") {
-    mainWindow.webContents.openDevTools();
-  }
-
-  mainWindow.on("closed", () => {
-    mainWindow = null;
-  });
-
-  // Handle external links - open in default browser
-  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
-    shell.openExternal(url);
-    return { action: "deny" };
-  });
-}
-
-// App lifecycle
-app.whenReady().then(async () => {
-  // Set app icon (dock icon on macOS)
-  if (process.platform === "darwin" && app.dock) {
-    const iconPath = getIconPath();
-    if (iconPath) {
-      try {
-        app.dock.setIcon(iconPath);
-      } catch (error) {
-        console.warn("[Electron] Failed to set dock icon:", error.message);
-      }
-    }
-  }
-
-  try {
-    // Start static file server in production
-    if (app.isPackaged) {
-      await startStaticServer();
-    }
-
-    // Start backend server
-    await startServer();
-
-    // Create window
-    createWindow();
-  } catch (error) {
-    console.error("[Electron] Failed to start:", error);
-    app.quit();
-  }
-
-  app.on("activate", () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow();
-    }
-  });
-});
-
-app.on("window-all-closed", () => {
-  if (process.platform !== "darwin") {
-    app.quit();
-  }
-});
-
-app.on("before-quit", () => {
-  // Kill server process
-  if (serverProcess) {
-    console.log("[Electron] Stopping server...");
-    serverProcess.kill();
-    serverProcess = null;
-  }
-
-  // Close static server
-  if (staticServer) {
-    console.log("[Electron] Stopping static server...");
-    staticServer.close();
-    staticServer = null;
-  }
-});
-
-// ============================================
-// IPC Handlers - Only native features
-// ============================================
-
-// Native file dialogs
-ipcMain.handle("dialog:openDirectory", async () => {
-  const result = await dialog.showOpenDialog(mainWindow, {
-    properties: ["openDirectory", "createDirectory"],
-  });
-  return result;
-});
-
-ipcMain.handle("dialog:openFile", async (_, options = {}) => {
-  const result = await dialog.showOpenDialog(mainWindow, {
-    properties: ["openFile"],
-    ...options,
-  });
-  return result;
-});
-
-ipcMain.handle("dialog:saveFile", async (_, options = {}) => {
-  const result = await dialog.showSaveDialog(mainWindow, options);
-  return result;
-});
-
-// Shell operations
-ipcMain.handle("shell:openExternal", async (_, url) => {
-  try {
-    await shell.openExternal(url);
-    return { success: true };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-});
-
-ipcMain.handle("shell:openPath", async (_, filePath) => {
-  try {
-    await shell.openPath(filePath);
-    return { success: true };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-});
-
-// App info
-ipcMain.handle("app:getPath", async (_, name) => {
-  return app.getPath(name);
-});
-
-ipcMain.handle("app:getVersion", async () => {
-  return app.getVersion();
-});
-
-ipcMain.handle("app:isPackaged", async () => {
-  return app.isPackaged;
-});
-
-// Ping - for connection check
-ipcMain.handle("ping", async () => {
-  return "pong";
-});
-
-// Get server URL for HTTP client
-ipcMain.handle("server:getUrl", async () => {
-  return `http://localhost:${SERVER_PORT}`;
-});

apps/app/electron/preload.js

@@ -1,37 +0,0 @@
-/**
- * Simplified Electron preload script
- *
- * Only exposes native features (dialogs, shell) and server URL.
- * All other operations go through HTTP API.
- */
-
-const { contextBridge, ipcRenderer } = require("electron");
-
-// Expose minimal API for native features
-contextBridge.exposeInMainWorld("electronAPI", {
-  // Platform info
-  platform: process.platform,
-  isElectron: true,
-
-  // Connection check
-  ping: () => ipcRenderer.invoke("ping"),
-
-  // Get server URL for HTTP client
-  getServerUrl: () => ipcRenderer.invoke("server:getUrl"),
-
-  // Native dialogs - better UX than prompt()
-  openDirectory: () => ipcRenderer.invoke("dialog:openDirectory"),
-  openFile: (options) => ipcRenderer.invoke("dialog:openFile", options),
-  saveFile: (options) => ipcRenderer.invoke("dialog:saveFile", options),
-
-  // Shell operations
-  openExternalLink: (url) => ipcRenderer.invoke("shell:openExternal", url),
-  openPath: (filePath) => ipcRenderer.invoke("shell:openPath", filePath),
-
-  // App info
-  getPath: (name) => ipcRenderer.invoke("app:getPath", name),
-  getVersion: () => ipcRenderer.invoke("app:getVersion"),
-  isPackaged: () => ipcRenderer.invoke("app:isPackaged"),
-});
-
-console.log("[Preload] Electron API exposed (simplified mode)");

apps/app/eslint.config.mjs

@@ -1,20 +0,0 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-    // Electron files use CommonJS
-    "electron/**",
-  ]),
-]);
-
-export default eslintConfig;

apps/app/next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: "export",
-};
-
-export default nextConfig;

apps/app/package.json

@@ -1,196 +0,0 @@
-{
-  "name": "@automaker/app",
-  "version": "0.1.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": {
-    "name": "Cody Seibert",
-    "email": "webdevcody@gmail.com"
-  },
-  "private": true,
-  "license": "Unlicense",
-  "main": "electron/main.js",
-  "scripts": {
-    "dev": "next dev -p 3007",
-    "dev:web": "next dev -p 3007",
-    "dev:electron": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && electron .\"",
-    "dev:electron:debug": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && OPEN_DEVTOOLS=true electron .\"",
-    "build": "next build",
-    "build:electron": "node scripts/prepare-server.js && next build && electron-builder",
-    "build:electron:win": "node scripts/prepare-server.js && next build && electron-builder --win",
-    "build:electron:mac": "node scripts/prepare-server.js && next build && electron-builder --mac",
-    "build:electron:linux": "node scripts/prepare-server.js && next build && electron-builder --linux",
-    "postinstall": "electron-builder install-app-deps",
-    "start": "next start",
-    "lint": "eslint",
-    "pretest": "node scripts/setup-e2e-fixtures.js",
-    "test": "playwright test",
-    "test:headed": "playwright test --headed",
-    "dev:electron:wsl": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && electron . --no-sandbox --disable-gpu\"",
-    "dev:electron:wsl:gpu": "concurrently \"next dev -p 3007\" \"wait-on http://localhost:3007 && MESA_D3D12_DEFAULT_ADAPTER_NAME=NVIDIA electron . --no-sandbox --disable-gpu-sandbox\""
-  },
-  "dependencies": {
-    "@codemirror/lang-xml": "^6.1.0",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@lezer/highlight": "^1.2.3",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@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-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.12",
-    "@uiw/react-codemirror": "^4.25.4",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-webgl": "^0.18.0",
-    "@xterm/xterm": "^5.5.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "dotenv": "^17.2.3",
-    "geist": "^1.5.1",
-    "lucide-react": "^0.556.0",
-    "next": "^16.0.10",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.6",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.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",
-    "@playwright/test": "^1.57.0",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "concurrently": "^9.2.1",
-    "electron": "39.2.7",
-    "electron-builder": "^26.0.12",
-    "eslint": "^9",
-    "eslint-config-next": "16.0.7",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "5.9.3",
-    "wait-on": "^9.0.3"
-  },
-  "build": {
-    "appId": "com.automaker.app",
-    "productName": "Automaker",
-    "artifactName": "${productName}-${version}-${arch}.${ext}",
-    "afterPack": "./scripts/rebuild-server-natives.js",
-    "directories": {
-      "output": "dist"
-    },
-    "files": [
-      "electron/**/*",
-      "out/**/*",
-      "public/**/*",
-      "!node_modules/**/*"
-    ],
-    "extraResources": [
-      {
-        "from": "server-bundle/dist",
-        "to": "server"
-      },
-      {
-        "from": "server-bundle/node_modules",
-        "to": "server/node_modules"
-      },
-      {
-        "from": "server-bundle/package.json",
-        "to": "server/package.json"
-      },
-      {
-        "from": "../../.env",
-        "to": ".env",
-        "filter": [
-          "**/*"
-        ]
-      }
-    ],
-    "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"
-          ]
-        }
-      ],
-      "category": "Development",
-      "icon": "public/logo_larger.png",
-      "maintainer": "webdevcody@gmail.com",
-      "executableName": "automaker"
-    },
-    "nsis": {
-      "oneClick": false,
-      "allowToChangeInstallationDirectory": true,
-      "createDesktopShortcut": true,
-      "createStartMenuShortcut": true
-    }
-  }
-}

apps/app/playwright.config.ts

@@ -1,60 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-const port = process.env.TEST_PORT || 3007;
-const serverPort = process.env.TEST_SERVER_PORT || 3008;
-const reuseServer = process.env.TEST_REUSE_SERVER === "true";
-const mockAgent =
-  process.env.CI === "true" || process.env.AUTOMAKER_MOCK_AGENT === "true";
-
-export default defineConfig({
-  testDir: "./tests",
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: undefined,
-  reporter: "html",
-  timeout: 30000,
-  use: {
-    baseURL: `http://localhost:${port}`,
-    trace: "on-first-retry",
-    screenshot: "only-on-failure",
-  },
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-  ],
-  ...(reuseServer
-    ? {}
-    : {
-        webServer: [
-          // Backend server - runs with mock agent enabled in CI
-          {
-            command: `cd ../server && npm run dev`,
-            url: `http://localhost:${serverPort}/api/health`,
-            reuseExistingServer: true,
-            timeout: 60000,
-            env: {
-              ...process.env,
-              PORT: String(serverPort),
-              // Enable mock agent in CI to avoid real API calls
-              AUTOMAKER_MOCK_AGENT: mockAgent ? "true" : "false",
-              // Allow access to test directories and common project paths
-              ALLOWED_PROJECT_DIRS: "/Users,/home,/tmp,/var/folders",
-            },
-          },
-          // Frontend Next.js server
-          {
-            command: `npx next dev -p ${port}`,
-            url: `http://localhost:${port}`,
-            reuseExistingServer: true,
-            timeout: 120000,
-            env: {
-              ...process.env,
-              NEXT_PUBLIC_SKIP_SETUP: "true",
-            },
-          },
-        ],
-      }),
-});

apps/app/postcss.config.mjs

@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
-export default config;

apps/app/src/app/api/claude/test/route.ts

@@ -1,97 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-interface AnthropicResponse {
-  content?: Array<{ type: string; text?: string }>;
-  model?: string;
-  error?: { message?: string };
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    const { apiKey } = await request.json();
-
-    // Use provided API key or fall back to environment variable
-    const effectiveApiKey = apiKey || process.env.ANTHROPIC_API_KEY;
-
-    if (!effectiveApiKey) {
-      return NextResponse.json(
-        { success: false, error: "No API key provided or configured in environment" },
-        { status: 400 }
-      );
-    }
-
-    // Send a simple test prompt to the Anthropic API
-    const response = await fetch("https://api.anthropic.com/v1/messages", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "x-api-key": effectiveApiKey,
-        "anthropic-version": "2023-06-01",
-      },
-      body: JSON.stringify({
-        model: "claude-sonnet-4-20250514",
-        max_tokens: 100,
-        messages: [
-          {
-            role: "user",
-            content: "Respond with exactly: 'Claude API connection successful!' and nothing else.",
-          },
-        ],
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = (await response.json()) as AnthropicResponse;
-      const errorMessage = errorData.error?.message || `HTTP ${response.status}`;
-
-      if (response.status === 401) {
-        return NextResponse.json(
-          { success: false, error: "Invalid API key. Please check your Anthropic API key." },
-          { status: 401 }
-        );
-      }
-
-      if (response.status === 429) {
-        return NextResponse.json(
-          { success: false, error: "Rate limit exceeded. Please try again later." },
-          { status: 429 }
-        );
-      }
-
-      return NextResponse.json(
-        { success: false, error: `API error: ${errorMessage}` },
-        { status: response.status }
-      );
-    }
-
-    const data = (await response.json()) as AnthropicResponse;
-
-    // Check if we got a valid response
-    if (data.content && data.content.length > 0) {
-      const textContent = data.content.find((block) => block.type === "text");
-      if (textContent && textContent.type === "text" && textContent.text) {
-        return NextResponse.json({
-          success: true,
-          message: `Connection successful! Response: "${textContent.text}"`,
-          model: data.model,
-        });
-      }
-    }
-
-    return NextResponse.json({
-      success: true,
-      message: "Connection successful! Claude responded.",
-      model: data.model,
-    });
-  } catch (error: unknown) {
-    console.error("Claude API test error:", error);
-
-    const errorMessage =
-      error instanceof Error ? error.message : "Failed to connect to Claude API";
-
-    return NextResponse.json(
-      { success: false, error: errorMessage },
-      { status: 500 }
-    );
-  }
-}

apps/app/src/app/api/gemini/test/route.ts

@@ -1,191 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-interface GeminiContent {
-  parts: Array<{
-    text?: string;
-    inlineData?: {
-      mimeType: string;
-      data: string;
-    };
-  }>;
-  role?: string;
-}
-
-interface GeminiRequest {
-  contents: GeminiContent[];
-  generationConfig?: {
-    maxOutputTokens?: number;
-    temperature?: number;
-  };
-}
-
-interface GeminiResponse {
-  candidates?: Array<{
-    content: {
-      parts: Array<{
-        text: string;
-      }>;
-      role: string;
-    };
-    finishReason: string;
-    safetyRatings?: Array<{
-      category: string;
-      probability: string;
-    }>;
-  }>;
-  promptFeedback?: {
-    safetyRatings?: Array<{
-      category: string;
-      probability: string;
-    }>;
-  };
-  error?: {
-    code: number;
-    message: string;
-    status: string;
-  };
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    const { apiKey, imageData, mimeType, prompt } = await request.json();
-
-    // Use provided API key or fall back to environment variable
-    const effectiveApiKey = apiKey || process.env.GOOGLE_API_KEY;
-
-    if (!effectiveApiKey) {
-      return NextResponse.json(
-        { success: false, error: "No API key provided or configured in environment" },
-        { status: 400 }
-      );
-    }
-
-    // Build the request body
-    const requestBody: GeminiRequest = {
-      contents: [
-        {
-          parts: [],
-        },
-      ],
-      generationConfig: {
-        maxOutputTokens: 150,
-        temperature: 0.4,
-      },
-    };
-
-    // Add image if provided
-    if (imageData && mimeType) {
-      requestBody.contents[0].parts.push({
-        inlineData: {
-          mimeType: mimeType,
-          data: imageData,
-        },
-      });
-    }
-
-    // Add text prompt
-    const textPrompt = prompt || (imageData
-      ? "Describe what you see in this image briefly."
-      : "Respond with exactly: 'Gemini SDK connection successful!' and nothing else.");
-
-    requestBody.contents[0].parts.push({
-      text: textPrompt,
-    });
-
-    // Call Gemini API - using gemini-1.5-flash as it supports both text and vision
-    const model = imageData ? "gemini-1.5-flash" : "gemini-1.5-flash";
-    const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${effectiveApiKey}`;
-
-    const response = await fetch(geminiUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(requestBody),
-    });
-
-    const data: GeminiResponse = await response.json();
-
-    // Check for API errors
-    if (data.error) {
-      const errorMessage = data.error.message || "Unknown Gemini API error";
-      const statusCode = data.error.code || 500;
-
-      if (statusCode === 400 && errorMessage.includes("API key")) {
-        return NextResponse.json(
-          { success: false, error: "Invalid API key. Please check your Google API key." },
-          { status: 401 }
-        );
-      }
-
-      if (statusCode === 429) {
-        return NextResponse.json(
-          { success: false, error: "Rate limit exceeded. Please try again later." },
-          { status: 429 }
-        );
-      }
-
-      return NextResponse.json(
-        { success: false, error: `API error: ${errorMessage}` },
-        { status: statusCode }
-      );
-    }
-
-    // Check for valid response
-    if (!response.ok) {
-      return NextResponse.json(
-        { success: false, error: `HTTP error: ${response.status} ${response.statusText}` },
-        { status: response.status }
-      );
-    }
-
-    // Extract response text
-    if (data.candidates && data.candidates.length > 0 && data.candidates[0].content?.parts?.length > 0) {
-      const responseText = data.candidates[0].content.parts
-        .filter((part) => part.text)
-        .map((part) => part.text)
-        .join("");
-
-      return NextResponse.json({
-        success: true,
-        message: `Connection successful! Response: "${responseText.substring(0, 200)}${responseText.length > 200 ? '...' : ''}"`,
-        model: model,
-        hasImage: !!imageData,
-      });
-    }
-
-    // Handle blocked responses
-    if (data.promptFeedback?.safetyRatings) {
-      return NextResponse.json({
-        success: true,
-        message: "Connection successful! Gemini responded (response may have been filtered).",
-        model: model,
-        hasImage: !!imageData,
-      });
-    }
-
-    return NextResponse.json({
-      success: true,
-      message: "Connection successful! Gemini responded.",
-      model: model,
-      hasImage: !!imageData,
-    });
-  } catch (error: unknown) {
-    console.error("Gemini API test error:", error);
-
-    if (error instanceof TypeError && error.message.includes("fetch")) {
-      return NextResponse.json(
-        { success: false, error: "Network error. Unable to reach Gemini API." },
-        { status: 503 }
-      );
-    }
-
-    const errorMessage =
-      error instanceof Error ? error.message : "Failed to connect to Gemini API";
-
-    return NextResponse.json(
-      { success: false, error: errorMessage },
-      { status: 500 }
-    );
-  }
-}

apps/app/src/app/layout.tsx

@@ -1,26 +0,0 @@
-import type { Metadata } from "next";
-import { GeistSans } from "geist/font/sans";
-import { GeistMono } from "geist/font/mono";
-import { Toaster } from "sonner";
-import "./globals.css";
-export const metadata: Metadata = {
-  title: "Automaker - Autonomous AI Development Studio",
-  description: "Build software autonomously with intelligent orchestration",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
-      >
-        {children}
-        <Toaster richColors position="bottom-right" />
-      </body>
-    </html>
-  );
-}

apps/app/src/app/page.tsx

@@ -1,234 +0,0 @@
-"use client";
-
-import { useEffect, useState, useCallback } from "react";
-import { Sidebar } from "@/components/layout/sidebar";
-import { WelcomeView } from "@/components/views/welcome-view";
-import { BoardView } from "@/components/views/board-view";
-import { SpecView } from "@/components/views/spec-view";
-import { AgentView } from "@/components/views/agent-view";
-import { SettingsView } from "@/components/views/settings-view";
-import { InterviewView } from "@/components/views/interview-view";
-import { ContextView } from "@/components/views/context-view";
-import { ProfilesView } from "@/components/views/profiles-view";
-import { SetupView } from "@/components/views/setup-view";
-import { RunningAgentsView } from "@/components/views/running-agents-view";
-import { TerminalView } from "@/components/views/terminal-view";
-import { WikiView } from "@/components/views/wiki-view";
-import { useAppStore } from "@/store/app-store";
-import { useSetupStore } from "@/store/setup-store";
-import { getElectronAPI, isElectron } from "@/lib/electron";
-import {
-  FileBrowserProvider,
-  useFileBrowser,
-  setGlobalFileBrowser,
-} from "@/contexts/file-browser-context";
-
-function HomeContent() {
-  const {
-    currentView,
-    setCurrentView,
-    setIpcConnected,
-    theme,
-    currentProject,
-    previewTheme,
-    getEffectiveTheme,
-  } = useAppStore();
-  const { isFirstRun, setupComplete } = useSetupStore();
-  const [isMounted, setIsMounted] = useState(false);
-  const [streamerPanelOpen, setStreamerPanelOpen] = useState(false);
-  const { openFileBrowser } = useFileBrowser();
-
-  // Hidden streamer panel - opens with "\" key
-  const handleStreamerPanelShortcut = useCallback((event: KeyboardEvent) => {
-    // Don't trigger when typing in inputs
-    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 trigger with modifier keys
-    if (event.ctrlKey || event.altKey || event.metaKey) {
-      return;
-    }
-
-    // Check for "\" key (backslash)
-    if (event.key === "\\") {
-      event.preventDefault();
-      setStreamerPanelOpen((prev) => !prev);
-    }
-  }, []);
-
-  // Register the "\" shortcut for streamer panel
-  useEffect(() => {
-    window.addEventListener("keydown", handleStreamerPanelShortcut);
-    return () => {
-      window.removeEventListener("keydown", handleStreamerPanelShortcut);
-    };
-  }, [handleStreamerPanelShortcut]);
-
-  // Compute the effective theme: previewTheme takes priority, then project theme, then global theme
-  // This is reactive because it depends on previewTheme, currentProject, and theme from the store
-  const effectiveTheme = getEffectiveTheme();
-
-  // Prevent hydration issues
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  // Initialize global file browser for HttpApiClient
-  useEffect(() => {
-    setGlobalFileBrowser(openFileBrowser);
-  }, [openFileBrowser]);
-
-  // Check if this is first run and redirect to setup if needed
-  useEffect(() => {
-    console.log("[Setup Flow] Checking setup state:", {
-      isMounted,
-      isFirstRun,
-      setupComplete,
-      currentView,
-      shouldShowSetup: isMounted && isFirstRun && !setupComplete,
-    });
-
-    if (isMounted && isFirstRun && !setupComplete) {
-      console.log(
-        "[Setup Flow] Redirecting to setup wizard (first run, not complete)"
-      );
-      setCurrentView("setup");
-    } else if (isMounted && setupComplete) {
-      console.log("[Setup Flow] Setup already complete, showing normal view");
-    }
-  }, [isMounted, isFirstRun, setupComplete, setCurrentView, currentView]);
-
-  // Test IPC connection on mount
-  useEffect(() => {
-    const testConnection = async () => {
-      try {
-        const api = getElectronAPI();
-        const result = await api.ping();
-        setIpcConnected(result === "pong");
-      } catch (error) {
-        console.error("IPC connection failed:", error);
-        setIpcConnected(false);
-      }
-    };
-
-    testConnection();
-  }, [setIpcConnected]);
-
-  // Apply theme class to document (uses effective theme - preview, project-specific, or global)
-  useEffect(() => {
-    const root = document.documentElement;
-    const themeClasses = [
-      "dark",
-      "light",
-      "retro",
-      "dracula",
-      "nord",
-      "monokai",
-      "tokyonight",
-      "solarized",
-      "gruvbox",
-      "catppuccin",
-      "onedark",
-      "synthwave",
-      "red",
-      "cream",
-      "sunset",
-      "gray",
-    ];
-
-    // Remove all theme classes
-    root.classList.remove(...themeClasses);
-
-    // Apply the effective theme
-    if (themeClasses.includes(effectiveTheme)) {
-      root.classList.add(effectiveTheme);
-    } else if (effectiveTheme === "system") {
-      // System theme - detect OS preference
-      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      root.classList.add(isDark ? "dark" : "light");
-    }
-  }, [effectiveTheme, previewTheme, currentProject, theme]);
-
-  const renderView = () => {
-    switch (currentView) {
-      case "welcome":
-        return <WelcomeView />;
-      case "setup":
-        return <SetupView />;
-      case "board":
-        return <BoardView />;
-      case "spec":
-        return <SpecView />;
-      case "agent":
-        return <AgentView />;
-      case "settings":
-        return <SettingsView />;
-      case "interview":
-        return <InterviewView />;
-      case "context":
-        return <ContextView />;
-      case "profiles":
-        return <ProfilesView />;
-      case "running-agents":
-        return <RunningAgentsView />;
-      case "terminal":
-        return <TerminalView />;
-      case "wiki":
-        return <WikiView />;
-      default:
-        return <WelcomeView />;
-    }
-  };
-
-  // Setup view is full-screen without sidebar
-  if (currentView === "setup") {
-    return (
-      <main className="h-screen overflow-hidden" data-testid="app-container">
-        <SetupView />
-      </main>
-    );
-  }
-
-  return (
-    <main className="flex h-screen overflow-hidden" data-testid="app-container">
-      <Sidebar />
-      <div
-        className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-        style={{ marginRight: streamerPanelOpen ? "250px" : "0" }}
-      >
-        {renderView()}
-      </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"
-        }`}
-      />
-    </main>
-  );
-}
-
-export default function Home() {
-  return (
-    <FileBrowserProvider>
-      <HomeContent />
-    </FileBrowserProvider>
-  );
-}

apps/app/src/components/layout/project-setup-dialog.tsx

@@ -1,167 +0,0 @@
-"use client";
-
-import { Sparkles, Clock } 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 { cn } from "@/lib/utils";
-
-// Feature count options
-export type FeatureCount = 20 | 50 | 100;
-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" },
-];
-
-interface ProjectSetupDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  projectOverview: string;
-  onProjectOverviewChange: (value: string) => void;
-  generateFeatures: boolean;
-  onGenerateFeaturesChange: (value: boolean) => void;
-  featureCount: FeatureCount;
-  onFeatureCountChange: (value: FeatureCount) => void;
-  onCreateSpec: () => void;
-  onSkip: () => void;
-  isCreatingSpec: boolean;
-}
-
-export function ProjectSetupDialog({
-  open,
-  onOpenChange,
-  projectOverview,
-  onProjectOverviewChange,
-  generateFeatures,
-  onGenerateFeaturesChange,
-  featureCount,
-  onFeatureCountChange,
-  onCreateSpec,
-  onSkip,
-  isCreatingSpec,
-}: ProjectSetupDialogProps) {
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(open) => {
-        onOpenChange(open);
-        if (!open && !isCreatingSpec) {
-          onSkip();
-        }
-      }}
-    >
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Set Up Your Project</DialogTitle>
-          <DialogDescription className="text-muted-foreground">
-            We didn&apos;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&apos;ll analyze your project&apos;s tech stack and create a
-            comprehensive specification.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-4">
-          <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
-            />
-          </div>
-
-          <div className="flex items-start space-x-3 pt-2">
-            <Checkbox
-              id="sidebar-generate-features"
-              checked={generateFeatures}
-              onCheckedChange={(checked) =>
-                onGenerateFeaturesChange(checked === true)
-              }
-            />
-            <div className="space-y-1">
-              <label
-                htmlFor="sidebar-generate-features"
-                className="text-sm font-medium 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)}
-                    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>
-              {FEATURE_COUNT_OPTIONS.find((o) => o.value === featureCount)
-                ?.warning && (
-                <p className="text-xs text-amber-500 flex items-center gap-1">
-                  <Clock className="w-3 h-3" />
-                  {
-                    FEATURE_COUNT_OPTIONS.find((o) => o.value === featureCount)
-                      ?.warning
-                  }
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="ghost" onClick={onSkip}>
-            Skip for now
-          </Button>
-          <Button onClick={onCreateSpec} disabled={!projectOverview.trim()}>
-            <Sparkles className="w-4 h-4 mr-2" />
-            Generate Spec
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/app/src/components/ui/badge.tsx

@@ -1,57 +0,0 @@
-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 };

apps/app/src/components/ui/card.tsx

@@ -1,100 +0,0 @@
-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-6 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,
-};

apps/app/src/components/ui/course-promo-badge.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Sparkles, X } from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-interface CoursePromoBadgeProps {
-  sidebarOpen?: boolean;
-}
-
-export function CoursePromoBadge({ sidebarOpen = true }: CoursePromoBadgeProps) {
-  const [dismissed, setDismissed] = React.useState(false);
-
-  if (dismissed) {
-    return null;
-  }
-
-  // Collapsed state - show only icon with tooltip
-  if (!sidebarOpen) {
-    return (
-      <div className="p-2 pb-0 flex justify-center">
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <a
-                href="https://agenticjumpstart.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group cursor-pointer flex items-center justify-center w-10 h-10 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-all border border-primary/30"
-                data-testid="course-promo-badge-collapsed"
-              >
-                <Sparkles className="size-4 shrink-0" />
-              </a>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="flex items-center gap-2">
-              <span>Become a 10x Dev</span>
-              <span
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  setDismissed(true);
-                }}
-                className="p-0.5 rounded-full hover:bg-primary/30 transition-colors cursor-pointer"
-                aria-label="Dismiss"
-              >
-                <X className="size-3" />
-              </span>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-    );
-  }
-
-  // Expanded state - show full badge
-  return (
-    <div className="p-2 pb-0">
-      <a
-        href="https://agenticjumpstart.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="group cursor-pointer flex items-center justify-between w-full px-2 lg:px-3 py-2.5 bg-primary/10 text-primary rounded-lg font-medium text-sm hover:bg-primary/20 transition-all border border-primary/30"
-        data-testid="course-promo-badge"
-      >
-        <div className="flex items-center gap-2">
-          <Sparkles className="size-4 shrink-0" />
-          <span className="hidden lg:block">Become a 10x Dev</span>
-        </div>
-        <span
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setDismissed(true);
-          }}
-          className="hidden lg:block p-1 rounded-full hover:bg-primary/30 transition-colors cursor-pointer"
-          aria-label="Dismiss"
-        >
-          <X className="size-3.5" />
-        </span>
-      </a>
-    </div>
-  );
-}

apps/app/src/components/ui/dialog.tsx

@@ -1,233 +0,0 @@
-"use client";
-
-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;
-};
-
-const DialogContent = React.forwardRef<
-  HTMLDivElement,
-  DialogContentProps
->(({ className, children, showCloseButton = true, compact = false, ...props }, ref) => {
-  // Check if className contains a custom max-width
-  const hasCustomMaxWidth =
-    typeof className === "string" && className.includes("max-w-");
-
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogContentPrimitive
-        ref={ref}
-        data-slot="dialog-content"
-        className={cn(
-          "fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-          "flex flex-col w-full max-w-[calc(100%-2rem)] max-h-[calc(100vh-4rem)]",
-          "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-4xl p-4"
-            : !hasCustomMaxWidth
-            ? "sm:max-w-2xl p-6"
-            : "p-6",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogClosePrimitive
-            data-slot="dialog-close"
-            className={cn(
-              "absolute 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-1.5",
-              compact ? "top-2 right-3" : "top-4 right-4"
-            )}
-          >
-            <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,
-};

apps/app/src/components/ui/image-drop-zone.tsx

@@ -1,292 +0,0 @@
-"use client";
-
-import React, { useState, useRef, useCallback } from "react";
-import { cn } from "@/lib/utils";
-import { ImageIcon, X, Upload } from "lucide-react";
-import type { ImageAttachment } from "@/store/app-store";
-
-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
-}
-
-const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
-const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-
-export function ImageDropZone({
-  onImagesSelected,
-  maxFiles = 5,
-  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 type
-      if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-        errors.push(`${file.name}: Unsupported file type. Please use JPG, PNG, GIF, or WebP.`);
-        continue;
-      }
-
-      // 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
-      if (newImages.length + selectedImages.length >= maxFiles) {
-        errors.push(`Maximum ${maxFiles} images allowed.`);
-        break;
-      }
-
-      try {
-        const base64 = await fileToBase64(file);
-        const imageAttachment: ImageAttachment = {
-          id: `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-          data: base64,
-          mimeType: file.type,
-          filename: file.name,
-          size: file.size,
-        };
-        newImages.push(imageAttachment);
-      } catch (error) {
-        errors.push(`${file.name}: Failed to process image.`);
-      }
-    }
-
-    if (errors.length > 0) {
-      console.warn('Image upload errors:', errors);
-      // You could show these errors to the user via a toast or notification
-    }
-
-    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 ? (
-                <Upload className="h-6 w-6 animate-spin text-muted-foreground" />
-              ) : (
-                <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 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">
-                    {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>
-  );
-}
-
-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);
-  });
-}
-
-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];
-}

apps/app/src/components/ui/keyboard-map.tsx

@@ -1,660 +0,0 @@
-"use client";
-
-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,
-  TooltipProvider,
-  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",
-  agent: "Agent Runner",
-  spec: "Spec Editor",
-  context: "Context",
-  settings: "Settings",
-  profiles: "AI Profiles",
-  terminal: "Terminal",
-  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",
-  addProfile: "Add Profile",
-  splitTerminalRight: "Split Right",
-  splitTerminalDown: "Split Down",
-  closeTerminal: "Close Terminal",
-};
-
-// Categorize shortcuts for color coding
-const SHORTCUT_CATEGORIES: Record<keyof KeyboardShortcuts, "navigation" | "ui" | "action"> = {
-  board: "navigation",
-  agent: "navigation",
-  spec: "navigation",
-  context: "navigation",
-  settings: "navigation",
-  profiles: "navigation",
-  terminal: "navigation",
-  toggleSidebar: "ui",
-  addFeature: "action",
-  addContextFile: "action",
-  startNext: "action",
-  newSession: "action",
-  openProject: "action",
-  projectPicker: "action",
-  cyclePrevProject: "action",
-  cycleNextProject: "action",
-  addProfile: "action",
-  splitTerminalRight: "action",
-  splitTerminalDown: "action",
-  closeTerminal: "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 (
-    <TooltipProvider>
-      <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>
-    </TooltipProvider>
-  );
-}
-
-// 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 (
-    <TooltipProvider>
-      <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>
-    </TooltipProvider>
-  );
-}

apps/app/src/components/ui/label.tsx

@@ -1,24 +0,0 @@
-"use client"
-
-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 }

apps/app/src/components/ui/markdown.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import ReactMarkdown from "react-markdown";
-import { cn } from "@/lib/utils";
-
-interface MarkdownProps {
-  children: string;
-  className?: string;
-}
-
-/**
- * Reusable Markdown component for rendering markdown content
- * Theme-aware styling that adapts to all predefined themes
- */
-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",
-        className
-      )}
-    >
-      <ReactMarkdown>{children}</ReactMarkdown>
-    </div>
-  );
-}

apps/app/src/components/ui/task-progress-panel.tsx

@@ -1,274 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { cn } from "@/lib/utils";
-import { Check, Loader2, Circle, ChevronDown, ChevronRight, FileCode } from "lucide-react";
-import { getElectronAPI } from "@/lib/electron";
-import type { AutoModeEvent } from "@/types/electron";
-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;
-}
-
-export function TaskProgressPanel({ featureId, projectPath, className }: TaskProgressPanelProps) {
-  const [tasks, setTasks] = useState<TaskInfo[]>([]);
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [isLoading, setIsLoading] = useState(true);
-  const [currentTaskId, 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);
-      if (result.success && result.feature?.planSpec?.tasks) {
-        const planTasks = result.feature.planSpec.tasks;
-        const currentId = result.feature.planSpec.currentTaskId;
-        const completedCount = result.feature.planSpec.tasksCompleted || 0;
-
-        // Convert planSpec tasks to TaskInfo with proper status
-        const initialTasks: TaskInfo[] = planTasks.map((t: any, index: number) => ({
-          id: t.id,
-          description: t.description,
-          filePath: t.filePath,
-          phase: t.phase,
-          status: index < completedCount
-            ? "completed" as const
-            : t.id === currentId
-              ? "in_progress" as const
-              : "pending" as const,
-        }));
-
-        setTasks(initialTasks);
-        setCurrentTaskId(currentId || null);
-      }
-    } catch (error) {
-      console.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 status to in_progress and mark previous as completed
-                return prev.map((t, idx) => {
-                   if (t.id === taskEvent.taskId) {
-                     return { ...t, status: "in_progress" as const };
-                   }
-                   // If we are moving to a task that is further down the list, assume previous ones are completed
-                   // This is a heuristic, but usually correct for sequential execution
-                   if (idx < existingIndex && t.status !== "completed") {
-                     return { ...t, status: "completed" 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;
-      }
-    });
-
-    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-xl 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 p-4 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-5 pt-2 relative max-h-[300px] overflow-y-auto scrollbar-visible">
-            {/* Vertical Connector Line */}
-            <div className="absolute left-[2.35rem] top-4 bottom-8 w-px bg-gradient-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 && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
-                      {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>
-  );
-}

apps/app/src/components/ui/xml-syntax-editor.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import CodeMirror from "@uiw/react-codemirror";
-import { xml } from "@codemirror/lang-xml";
-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 XmlSyntaxEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-  "data-testid"?: string;
-}
-
-// Syntax highlighting that uses CSS variables from the app's theme system
-// This automatically adapts to any theme (dark, light, dracula, nord, etc.)
-const syntaxColors = HighlightStyle.define([
-  // XML tags - use primary color
-  { tag: t.tagName, color: "var(--primary)" },
-  { tag: t.angleBracket, color: "var(--muted-foreground)" },
-
-  // Attributes
-  { tag: t.attributeName, color: "var(--chart-2, oklch(0.6 0.118 184.704))" },
-  { tag: t.attributeValue, color: "var(--chart-1, oklch(0.646 0.222 41.116))" },
-
-  // Strings and content
-  { tag: t.string, color: "var(--chart-1, oklch(0.646 0.222 41.116))" },
-  { tag: t.content, color: "var(--foreground)" },
-
-  // Comments
-  { tag: t.comment, color: "var(--muted-foreground)", fontStyle: "italic" },
-
-  // Special
-  { tag: t.processingInstruction, color: "var(--muted-foreground)" },
-  { tag: t.documentMeta, color: "var(--muted-foreground)" },
-]);
-
-// Editor theme using CSS variables
-const editorTheme = EditorView.theme({
-  "&": {
-    height: "100%",
-    fontSize: "0.875rem",
-    fontFamily: "ui-monospace, monospace",
-    backgroundColor: "transparent",
-    color: "var(--foreground)",
-  },
-  ".cm-scroller": {
-    overflow: "auto",
-    fontFamily: "ui-monospace, monospace",
-  },
-  ".cm-content": {
-    padding: "1rem",
-    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",
-  },
-  "&.cm-focused": {
-    outline: "none",
-  },
-  ".cm-gutters": {
-    display: "none",
-  },
-  ".cm-placeholder": {
-    color: "var(--muted-foreground)",
-    fontStyle: "italic",
-  },
-});
-
-// Combine all extensions
-const extensions: Extension[] = [
-  xml(),
-  syntaxHighlighting(syntaxColors),
-  editorTheme,
-];
-
-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={extensions}
-        theme="none"
-        placeholder={placeholder}
-        className="h-full [&_.cm-editor]:h-full"
-        basicSetup={{
-          lineNumbers: false,
-          foldGutter: false,
-          highlightActiveLine: false,
-          highlightSelectionMatches: true,
-          autocompletion: true,
-          bracketMatching: true,
-          indentOnInput: true,
-        }}
-      />
-    </div>
-  );
-}

apps/app/src/components/views/agent-view.tsx

@@ -1,916 +0,0 @@
-"use client";
-
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
-import { useAppStore, type AgentModel } from "@/store/app-store";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { ImageDropZone } from "@/components/ui/image-drop-zone";
-import {
-  Bot,
-  Send,
-  User,
-  Loader2,
-  Sparkles,
-  Wrench,
-  Trash2,
-  PanelLeftClose,
-  PanelLeft,
-  Paperclip,
-  X,
-  ImageIcon,
-  ChevronDown,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { useElectronAgent } from "@/hooks/use-electron-agent";
-import { SessionManager } from "@/components/session-manager";
-import { Markdown } from "@/components/ui/markdown";
-import type { ImageAttachment } from "@/store/app-store";
-import {
-  useKeyboardShortcuts,
-  useKeyboardShortcutsConfig,
-  KeyboardShortcut,
-} from "@/hooks/use-keyboard-shortcuts";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { CLAUDE_MODELS } from "@/components/views/board-view/shared/model-constants";
-
-export function AgentView() {
-  const { currentProject, setLastSelectedSession, getLastSelectedSession } =
-    useAppStore();
-  const shortcuts = useKeyboardShortcutsConfig();
-  const [input, setInput] = useState("");
-  const [selectedImages, setSelectedImages] = useState<ImageAttachment[]>([]);
-  const [showImageDropZone, setShowImageDropZone] = useState(false);
-  const [currentTool, setCurrentTool] = useState<string | null>(null);
-  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
-  const [showSessionManager, setShowSessionManager] = useState(true);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [selectedModel, setSelectedModel] = useState<AgentModel>("sonnet");
-
-  // Track if initial session has been loaded
-  const initialSessionLoadedRef = useRef(false);
-
-  // Scroll management for auto-scroll
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const [isUserAtBottom, setIsUserAtBottom] = useState(true);
-
-  // Input ref for auto-focus
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Ref for quick create session function from SessionManager
-  const quickCreateSessionRef = useRef<(() => Promise<void>) | null>(null);
-
-  // Use the Electron agent hook (only if we have a session)
-  const {
-    messages,
-    isProcessing,
-    isConnected,
-    sendMessage,
-    clearHistory,
-    error: agentError,
-  } = useElectronAgent({
-    sessionId: currentSessionId || "",
-    workingDirectory: currentProject?.path,
-    model: selectedModel,
-    onToolUse: (toolName) => {
-      setCurrentTool(toolName);
-      setTimeout(() => setCurrentTool(null), 2000);
-    },
-  });
-
-  // Handle session selection with persistence
-  const handleSelectSession = useCallback(
-    (sessionId: string | null) => {
-      setCurrentSessionId(sessionId);
-      // Persist the selection for this project
-      if (currentProject?.path) {
-        setLastSelectedSession(currentProject.path, sessionId);
-      }
-    },
-    [currentProject?.path, setLastSelectedSession]
-  );
-
-  // Restore last selected session when switching to Agent view or when project changes
-  useEffect(() => {
-    if (!currentProject?.path) {
-      // No project, reset
-      setCurrentSessionId(null);
-      initialSessionLoadedRef.current = false;
-      return;
-    }
-
-    // Only restore once per project
-    if (initialSessionLoadedRef.current) return;
-    initialSessionLoadedRef.current = true;
-
-    const lastSessionId = getLastSelectedSession(currentProject.path);
-    if (lastSessionId) {
-      console.log(
-        "[AgentView] Restoring last selected session:",
-        lastSessionId
-      );
-      setCurrentSessionId(lastSessionId);
-    }
-  }, [currentProject?.path, getLastSelectedSession]);
-
-  // Reset initialSessionLoadedRef when project changes
-  useEffect(() => {
-    initialSessionLoadedRef.current = false;
-  }, [currentProject?.path]);
-
-  const handleSend = useCallback(async () => {
-    if ((!input.trim() && selectedImages.length === 0) || isProcessing) return;
-
-    const messageContent = input;
-    const messageImages = selectedImages;
-
-    setInput("");
-    setSelectedImages([]);
-    setShowImageDropZone(false);
-
-    await sendMessage(messageContent, messageImages);
-  }, [input, selectedImages, isProcessing, sendMessage]);
-
-  const handleImagesSelected = useCallback((images: ImageAttachment[]) => {
-    setSelectedImages(images);
-  }, []);
-
-  const toggleImageDropZone = useCallback(() => {
-    setShowImageDropZone(!showImageDropZone);
-  }, [showImageDropZone]);
-
-  // Helper function to 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);
-    });
-  }, []);
-
-  // Process dropped files
-  const processDroppedFiles = useCallback(
-    async (files: FileList) => {
-      if (isProcessing) return;
-
-      const ACCEPTED_IMAGE_TYPES = [
-        "image/jpeg",
-        "image/jpg",
-        "image/png",
-        "image/gif",
-        "image/webp",
-      ];
-      const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-      const MAX_FILES = 5;
-
-      const newImages: ImageAttachment[] = [];
-      const errors: string[] = [];
-
-      for (const file of Array.from(files)) {
-        // Validate file type
-        if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-          errors.push(
-            `${file.name}: Unsupported file type. Please use JPG, PNG, GIF, or WebP.`
-          );
-          continue;
-        }
-
-        // Validate file size
-        if (file.size > MAX_FILE_SIZE) {
-          const maxSizeMB = MAX_FILE_SIZE / (1024 * 1024);
-          errors.push(
-            `${file.name}: File too large. Maximum size is ${maxSizeMB}MB.`
-          );
-          continue;
-        }
-
-        // Check if we've reached max files
-        if (newImages.length + selectedImages.length >= MAX_FILES) {
-          errors.push(`Maximum ${MAX_FILES} images allowed.`);
-          break;
-        }
-
-        try {
-          const base64 = await fileToBase64(file);
-          const imageAttachment: ImageAttachment = {
-            id: `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-            data: base64,
-            mimeType: file.type,
-            filename: file.name,
-            size: file.size,
-          };
-          newImages.push(imageAttachment);
-        } catch (error) {
-          errors.push(`${file.name}: Failed to process image.`);
-        }
-      }
-
-      if (errors.length > 0) {
-        console.warn("Image upload errors:", errors);
-      }
-
-      if (newImages.length > 0) {
-        setSelectedImages((prev) => [...prev, ...newImages]);
-      }
-    },
-    [isProcessing, selectedImages, fileToBase64]
-  );
-
-  // Remove individual image
-  const removeImage = useCallback((imageId: string) => {
-    setSelectedImages((prev) => prev.filter((img) => img.id !== imageId));
-  }, []);
-
-  // Drag and drop handlers for the input area
-  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]
-  );
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  const handleClearChat = async () => {
-    if (!confirm("Are you sure you want to clear this conversation?")) return;
-    await clearHistory();
-  };
-
-  // 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 && messages.length > 0) {
-      // Use a small delay to ensure DOM is updated
-      setTimeout(() => {
-        scrollToBottom("smooth");
-      }, 100);
-    }
-  }, [messages, isUserAtBottom, scrollToBottom]);
-
-  // Initial scroll to bottom when session changes
-  useEffect(() => {
-    if (currentSessionId && messages.length > 0) {
-      // Scroll immediately without animation when switching sessions
-      setTimeout(() => {
-        scrollToBottom("auto");
-        setIsUserAtBottom(true);
-      }, 100);
-    }
-  }, [currentSessionId, scrollToBottom]);
-
-  // Auto-focus input when session is selected/changed
-  useEffect(() => {
-    if (currentSessionId && inputRef.current) {
-      // Small delay to ensure UI has updated
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 200);
-    }
-  }, [currentSessionId]);
-
-  // 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]);
-
-  // Register keyboard shortcuts
-  useKeyboardShortcuts(agentShortcuts);
-
-  if (!currentProject) {
-    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>
-    );
-  }
-
-  // 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;
-
-  return (
-    <div
-      className="flex-1 flex overflow-hidden bg-background"
-      data-testid="agent-view"
-    >
-      {/* Session Manager Sidebar */}
-      {showSessionManager && currentProject && (
-        <div className="w-80 border-r border-border flex-shrink-0 bg-card/50">
-          <SessionManager
-            currentSessionId={currentSessionId}
-            onSelectSession={handleSelectSession}
-            projectPath={currentProject.path}
-            isCurrentSessionThinking={isProcessing}
-            onQuickCreateRef={quickCreateSessionRef}
-          />
-        </div>
-      )}
-
-      {/* Chat Area */}
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-card/50 backdrop-blur-sm">
-          <div className="flex items-center gap-4">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setShowSessionManager(!showSessionManager)}
-              className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-            >
-              {showSessionManager ? (
-                <PanelLeftClose className="w-4 h-4" />
-              ) : (
-                <PanelLeft className="w-4 h-4" />
-              )}
-            </Button>
-            <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
-              <Bot className="w-5 h-5 text-primary" />
-            </div>
-            <div>
-              <h1 className="text-lg font-semibold text-foreground">
-                AI Agent
-              </h1>
-              <p className="text-sm text-muted-foreground">
-                {currentProject.name}
-                {currentSessionId && !isConnected && " - Connecting..."}
-              </p>
-            </div>
-          </div>
-
-          {/* Status indicators & actions */}
-          <div className="flex items-center gap-3">
-            {/* Model Selector */}
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-8 gap-1.5 text-xs font-medium"
-                  disabled={isProcessing}
-                  data-testid="model-selector"
-                >
-                  <Bot className="w-3.5 h-3.5" />
-                  {CLAUDE_MODELS.find((m) => m.id === selectedModel)?.label.replace("Claude ", "") || "Sonnet"}
-                  <ChevronDown className="w-3 h-3 opacity-50" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48">
-                {CLAUDE_MODELS.map((model) => (
-                  <DropdownMenuItem
-                    key={model.id}
-                    onClick={() => setSelectedModel(model.id)}
-                    className={cn(
-                      "cursor-pointer",
-                      selectedModel === model.id && "bg-accent"
-                    )}
-                    data-testid={`model-option-${model.id}`}
-                  >
-                    <div className="flex flex-col">
-                      <span className="font-medium">{model.label}</span>
-                      <span className="text-xs text-muted-foreground">
-                        {model.description}
-                      </span>
-                    </div>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            {currentTool && (
-              <div className="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>
-            )}
-            {agentError && (
-              <span className="text-xs text-destructive font-medium">
-                {agentError}
-              </span>
-            )}
-            {currentSessionId && messages.length > 0 && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handleClearChat}
-                disabled={isProcessing}
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <Trash2 className="w-4 h-4 mr-2" />
-                Clear
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {/* Messages */}
-        {!currentSessionId ? (
-          <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>
-              <Button
-                onClick={() => setShowSessionManager(true)}
-                variant="outline"
-                className="gap-2"
-              >
-                <PanelLeft className="w-4 h-4" />
-                {showSessionManager ? "View" : "Show"} Sessions
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div
-            ref={messagesContainerRef}
-            className="flex-1 overflow-y-auto px-6 py-6 space-y-6 scroll-smooth"
-            data-testid="message-list"
-            onScroll={handleScroll}
-          >
-            {displayMessages.map((message) => (
-              <div
-                key={message.id}
-                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",
-                    message.role === "assistant"
-                      ? "bg-primary/10 ring-1 ring-primary/20"
-                      : "bg-muted ring-1 ring-border"
-                  )}
-                >
-                  {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",
-                    message.role === "user"
-                      ? "bg-primary text-primary-foreground"
-                      : "bg-card border border-border"
-                  )}
-                >
-                  {message.role === "assistant" ? (
-                    <Markdown className="text-sm text-foreground prose-p:leading-relaxed prose-headings:text-foreground prose-strong:text-foreground prose-code:text-primary prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded">
-                      {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",
-                      message.role === "user"
-                        ? "text-primary-foreground/70"
-                        : "text-muted-foreground"
-                    )}
-                  >
-                    {new Date(message.timestamp).toLocaleTimeString([], {
-                      hour: "2-digit",
-                      minute: "2-digit",
-                    })}
-                  </p>
-                </div>
-              </div>
-            ))}
-
-            {/* Thinking Indicator */}
-            {isProcessing && (
-              <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">
-                    <div className="flex items-center gap-1">
-                      <span
-                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
-                        style={{ animationDelay: "0ms" }}
-                      />
-                      <span
-                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
-                        style={{ animationDelay: "150ms" }}
-                      />
-                      <span
-                        className="w-2 h-2 rounded-full bg-primary animate-pulse"
-                        style={{ animationDelay: "300ms" }}
-                      />
-                    </div>
-                    <span className="text-sm text-muted-foreground">
-                      Thinking...
-                    </span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Input Area */}
-        {currentSessionId && (
-          <div className="border-t border-border p-4 bg-card/50 backdrop-blur-sm">
-            {/* Image Drop Zone (when visible) */}
-            {showImageDropZone && (
-              <ImageDropZone
-                onImagesSelected={handleImagesSelected}
-                images={selectedImages}
-                maxFiles={5}
-                className="mb-4"
-                disabled={isProcessing || !isConnected}
-              />
-            )}
-
-            {/* Selected Images Preview */}
-            {selectedImages.length > 0 && (
-              <div className="mb-4 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" : ""} attached
-                  </p>
-                  <button
-                    onClick={() => setSelectedImages([])}
-                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-                    disabled={isProcessing}
-                  >
-                    Clear all
-                  </button>
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  {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={() => removeImage(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>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Text Input and Controls */}
-            <div
-              className={cn(
-                "flex gap-2 transition-all duration-200 rounded-xl p-1",
-                isDragOver && "bg-primary/5 ring-2 ring-primary/30"
-              )}
-              onDragEnter={handleDragEnter}
-              onDragLeave={handleDragLeave}
-              onDragOver={handleDragOver}
-              onDrop={handleDrop}
-            >
-              <div className="flex-1 relative">
-                <Input
-                  ref={inputRef}
-                  placeholder={
-                    isDragOver
-                      ? "Drop your images here..."
-                      : "Describe what you want to build..."
-                  }
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                  onPaste={handlePaste}
-                  disabled={isProcessing || !isConnected}
-                  data-testid="agent-input"
-                  className={cn(
-                    "h-11 bg-background border-border rounded-xl pl-4 pr-20 text-sm transition-all",
-                    "focus:ring-2 focus:ring-primary/20 focus:border-primary/50",
-                    selectedImages.length > 0 && "border-primary/30",
-                    isDragOver && "border-primary bg-primary/5"
-                  )}
-                />
-                {selectedImages.length > 0 && !isDragOver && (
-                  <div className="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">
-                    {selectedImages.length} image
-                    {selectedImages.length > 1 ? "s" : ""}
-                  </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>
-
-              {/* Image Attachment Button */}
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={toggleImageDropZone}
-                disabled={isProcessing || !isConnected}
-                className={cn(
-                  "h-11 w-11 rounded-xl border-border",
-                  showImageDropZone &&
-                    "bg-primary/10 text-primary border-primary/30",
-                  selectedImages.length > 0 && "border-primary/30 text-primary"
-                )}
-                title="Attach images"
-              >
-                <Paperclip className="w-4 h-4" />
-              </Button>
-
-              {/* Send Button */}
-              <Button
-                onClick={handleSend}
-                disabled={
-                  (!input.trim() && selectedImages.length === 0) ||
-                  isProcessing ||
-                  !isConnected
-                }
-                className="h-11 px-4 rounded-xl"
-                data-testid="send-message"
-              >
-                <Send className="w-4 h-4" />
-              </Button>
-            </div>
-
-            {/* Keyboard hint */}
-            <p className="text-[11px] text-muted-foreground mt-2 text-center">
-              Press{" "}
-              <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">
-                Enter
-              </kbd>{" "}
-              to send
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// Helper function to format file size
-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];
-}

apps/app/src/components/views/board-view/board-header.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { HotkeyButton } from "@/components/ui/hotkey-button";
-import { Slider } from "@/components/ui/slider";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { Plus, Users } from "lucide-react";
-import { KeyboardShortcut } from "@/hooks/use-keyboard-shortcuts";
-
-interface BoardHeaderProps {
-  projectName: string;
-  maxConcurrency: number;
-  onConcurrencyChange: (value: number) => void;
-  isAutoModeRunning: boolean;
-  onAutoModeToggle: (enabled: boolean) => void;
-  onAddFeature: () => void;
-  addFeatureShortcut: KeyboardShortcut;
-  isMounted: boolean;
-}
-
-export function BoardHeader({
-  projectName,
-  maxConcurrency,
-  onConcurrencyChange,
-  isAutoModeRunning,
-  onAutoModeToggle,
-  onAddFeature,
-  addFeatureShortcut,
-  isMounted,
-}: BoardHeaderProps) {
-  return (
-    <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
-      <div>
-        <h1 className="text-xl font-bold">Kanban Board</h1>
-        <p className="text-sm text-muted-foreground">{projectName}</p>
-      </div>
-      <div className="flex gap-2 items-center">
-        {/* Concurrency Slider - only show after mount to prevent hydration issues */}
-        {isMounted && (
-          <div
-            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-secondary border border-border"
-            data-testid="concurrency-slider-container"
-          >
-            <Users className="w-4 h-4 text-muted-foreground" />
-            <Slider
-              value={[maxConcurrency]}
-              onValueChange={(value) => onConcurrencyChange(value[0])}
-              min={1}
-              max={10}
-              step={1}
-              className="w-20"
-              data-testid="concurrency-slider"
-            />
-            <span
-              className="text-sm text-muted-foreground min-w-[2ch] text-center"
-              data-testid="concurrency-value"
-            >
-              {maxConcurrency}
-            </span>
-          </div>
-        )}
-
-        {/* Auto Mode Toggle - only show after mount to prevent hydration issues */}
-        {isMounted && (
-          <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-secondary border border-border">
-            <Label
-              htmlFor="auto-mode-toggle"
-              className="text-sm font-medium cursor-pointer"
-            >
-              Auto Mode
-            </Label>
-            <Switch
-              id="auto-mode-toggle"
-              checked={isAutoModeRunning}
-              onCheckedChange={onAutoModeToggle}
-              data-testid="auto-mode-toggle"
-            />
-          </div>
-        )}
-
-        <HotkeyButton
-          size="sm"
-          onClick={onAddFeature}
-          hotkey={addFeatureShortcut}
-          hotkeyActive={false}
-          data-testid="add-feature-button"
-        >
-          <Plus className="w-4 h-4 mr-2" />
-          Add Feature
-        </HotkeyButton>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/board-view/components/index.ts

@@ -1,2 +0,0 @@
-export { KanbanCard } from "./kanban-card";
-export { KanbanColumn } from "./kanban-column";

apps/app/src/components/views/board-view/constants.ts

@@ -1,22 +0,0 @@
-import { Feature } from "@/store/app-store";
-
-export type ColumnId = Feature["status"];
-
-export const COLUMNS: { id: ColumnId; title: string; colorClass: string }[] = [
-  { id: "backlog", title: "Backlog", colorClass: "bg-[var(--status-backlog)]" },
-  {
-    id: "in_progress",
-    title: "In Progress",
-    colorClass: "bg-[var(--status-in-progress)]",
-  },
-  {
-    id: "waiting_approval",
-    title: "Waiting Approval",
-    colorClass: "bg-[var(--status-waiting)]",
-  },
-  {
-    id: "verified",
-    title: "Verified",
-    colorClass: "bg-[var(--status-success)]",
-  },
-];

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

@@ -1,544 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { HotkeyButton } from "@/components/ui/hotkey-button";
-import { Label } from "@/components/ui/label";
-import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
-import {
-  DescriptionImageDropZone,
-  FeatureImagePath as DescriptionImagePath,
-  ImagePreviewMap,
-} from "@/components/ui/description-image-dropzone";
-import {
-  MessageSquare,
-  Settings2,
-  SlidersHorizontal,
-  FlaskConical,
-  Sparkles,
-  ChevronDown,
-} from "lucide-react";
-import { toast } from "sonner";
-import { getElectronAPI } from "@/lib/electron";
-import { modelSupportsThinking } from "@/lib/utils";
-import {
-  useAppStore,
-  AgentModel,
-  ThinkingLevel,
-  FeatureImage,
-  AIProfile,
-  PlanningMode,
-} from "@/store/app-store";
-import {
-  ModelSelector,
-  ThinkingLevelSelector,
-  ProfileQuickSelect,
-  TestingTabContent,
-  PrioritySelector,
-  BranchSelector,
-  PlanningModeSelector,
-} from "../shared";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-interface AddFeatureDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onAdd: (feature: {
-    category: string;
-    description: string;
-    steps: string[];
-    images: FeatureImage[];
-    imagePaths: DescriptionImagePath[];
-    skipTests: boolean;
-    model: AgentModel;
-    thinkingLevel: ThinkingLevel;
-    branchName: string; // Can be empty string to use current branch
-    priority: number;
-    planningMode: PlanningMode;
-    requirePlanApproval: boolean;
-  }) => void;
-  categorySuggestions: string[];
-  branchSuggestions: string[];
-  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
-  defaultSkipTests: boolean;
-  defaultBranch?: string;
-  currentBranch?: string;
-  isMaximized: boolean;
-  showProfilesOnly: boolean;
-  aiProfiles: AIProfile[];
-}
-
-export function AddFeatureDialog({
-  open,
-  onOpenChange,
-  onAdd,
-  categorySuggestions,
-  branchSuggestions,
-  branchCardCounts,
-  defaultSkipTests,
-  defaultBranch = "main",
-  currentBranch,
-  isMaximized,
-  showProfilesOnly,
-  aiProfiles,
-}: AddFeatureDialogProps) {
-  const [useCurrentBranch, setUseCurrentBranch] = useState(true);
-  const [newFeature, setNewFeature] = useState({
-    category: "",
-    description: "",
-    steps: [""],
-    images: [] as FeatureImage[],
-    imagePaths: [] as DescriptionImagePath[],
-    skipTests: false,
-    model: "opus" as AgentModel,
-    thinkingLevel: "none" as ThinkingLevel,
-    branchName: "",
-    priority: 2 as number, // Default to medium priority
-  });
-  const [newFeaturePreviewMap, setNewFeaturePreviewMap] =
-    useState<ImagePreviewMap>(() => new Map());
-  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
-  const [descriptionError, setDescriptionError] = useState(false);
-  const [isEnhancing, setIsEnhancing] = useState(false);
-  const [enhancementMode, setEnhancementMode] = useState<
-    "improve" | "technical" | "simplify" | "acceptance"
-  >("improve");
-  const [planningMode, setPlanningMode] = useState<PlanningMode>("skip");
-  const [requirePlanApproval, setRequirePlanApproval] = useState(false);
-
-  // Get enhancement model, planning mode defaults, and worktrees setting from store
-  const {
-    enhancementModel,
-    defaultPlanningMode,
-    defaultRequirePlanApproval,
-    useWorktrees,
-  } = useAppStore();
-
-  // Sync defaults when dialog opens
-  useEffect(() => {
-    if (open) {
-      setNewFeature((prev) => ({
-        ...prev,
-        skipTests: defaultSkipTests,
-        branchName: defaultBranch || "",
-      }));
-      setUseCurrentBranch(true);
-      setPlanningMode(defaultPlanningMode);
-      setRequirePlanApproval(defaultRequirePlanApproval);
-    }
-  }, [
-    open,
-    defaultSkipTests,
-    defaultBranch,
-    defaultPlanningMode,
-    defaultRequirePlanApproval,
-  ]);
-
-  const handleAdd = () => {
-    if (!newFeature.description.trim()) {
-      setDescriptionError(true);
-      return;
-    }
-
-    // Validate branch selection when "other branch" is selected
-    if (useWorktrees && !useCurrentBranch && !newFeature.branchName.trim()) {
-      toast.error("Please select a branch name");
-      return;
-    }
-
-    const category = newFeature.category || "Uncategorized";
-    const selectedModel = newFeature.model;
-    const normalizedThinking = modelSupportsThinking(selectedModel)
-      ? newFeature.thinkingLevel
-      : "none";
-
-    // Use current branch if toggle is on
-    // If currentBranch is provided (non-primary worktree), use it
-    // Otherwise (primary worktree), use empty string which means "unassigned" (show only on primary)
-    const finalBranchName = useCurrentBranch
-      ? currentBranch || ""
-      : newFeature.branchName || "";
-
-    onAdd({
-      category,
-      description: newFeature.description,
-      steps: newFeature.steps.filter((s) => s.trim()),
-      images: newFeature.images,
-      imagePaths: newFeature.imagePaths,
-      skipTests: newFeature.skipTests,
-      model: selectedModel,
-      thinkingLevel: normalizedThinking,
-      branchName: finalBranchName,
-      priority: newFeature.priority,
-      planningMode,
-      requirePlanApproval,
-    });
-
-    // Reset form
-    setNewFeature({
-      category: "",
-      description: "",
-      steps: [""],
-      images: [],
-      imagePaths: [],
-      skipTests: defaultSkipTests,
-      model: "opus",
-      priority: 2,
-      thinkingLevel: "none",
-      branchName: "",
-    });
-    setUseCurrentBranch(true);
-    setPlanningMode(defaultPlanningMode);
-    setRequirePlanApproval(defaultRequirePlanApproval);
-    setNewFeaturePreviewMap(new Map());
-    setShowAdvancedOptions(false);
-    setDescriptionError(false);
-    onOpenChange(false);
-  };
-
-  const handleDialogClose = (open: boolean) => {
-    onOpenChange(open);
-    if (!open) {
-      setNewFeaturePreviewMap(new Map());
-      setShowAdvancedOptions(false);
-      setDescriptionError(false);
-    }
-  };
-
-  const handleEnhanceDescription = async () => {
-    if (!newFeature.description.trim() || isEnhancing) return;
-
-    setIsEnhancing(true);
-    try {
-      const api = getElectronAPI();
-      const result = await api.enhancePrompt?.enhance(
-        newFeature.description,
-        enhancementMode,
-        enhancementModel
-      );
-
-      if (result?.success && result.enhancedText) {
-        const enhancedText = result.enhancedText;
-        setNewFeature((prev) => ({ ...prev, description: enhancedText }));
-        toast.success("Description enhanced!");
-      } else {
-        toast.error(result?.error || "Failed to enhance description");
-      }
-    } catch (error) {
-      console.error("Enhancement failed:", error);
-      toast.error("Failed to enhance description");
-    } finally {
-      setIsEnhancing(false);
-    }
-  };
-
-  const handleModelSelect = (model: AgentModel) => {
-    setNewFeature({
-      ...newFeature,
-      model,
-      thinkingLevel: modelSupportsThinking(model)
-        ? newFeature.thinkingLevel
-        : "none",
-    });
-  };
-
-  const handleProfileSelect = (
-    model: AgentModel,
-    thinkingLevel: ThinkingLevel
-  ) => {
-    setNewFeature({
-      ...newFeature,
-      model,
-      thinkingLevel,
-    });
-  };
-
-  const newModelAllowsThinking = modelSupportsThinking(newFeature.model);
-
-  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>Add New Feature</DialogTitle>
-          <DialogDescription>
-            Create a new feature card for the Kanban board.
-          </DialogDescription>
-        </DialogHeader>
-        <Tabs
-          defaultValue="prompt"
-          className="py-4 flex-1 min-h-0 flex flex-col"
-        >
-          <TabsList className="w-full grid grid-cols-3 mb-4">
-            <TabsTrigger value="prompt" data-testid="tab-prompt">
-              <MessageSquare className="w-4 h-4 mr-2" />
-              Prompt
-            </TabsTrigger>
-            <TabsTrigger value="model" data-testid="tab-model">
-              <Settings2 className="w-4 h-4 mr-2" />
-              Model
-            </TabsTrigger>
-            <TabsTrigger value="options" data-testid="tab-options">
-              <SlidersHorizontal className="w-4 h-4 mr-2" />
-              Options
-            </TabsTrigger>
-          </TabsList>
-
-          {/* Prompt Tab */}
-          <TabsContent
-            value="prompt"
-            className="space-y-4 overflow-y-auto cursor-default"
-          >
-            <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
-              <DescriptionImageDropZone
-                value={newFeature.description}
-                onChange={(value) => {
-                  setNewFeature({ ...newFeature, description: value });
-                  if (value.trim()) {
-                    setDescriptionError(false);
-                  }
-                }}
-                images={newFeature.imagePaths}
-                onImagesChange={(images) =>
-                  setNewFeature({ ...newFeature, imagePaths: images })
-                }
-                placeholder="Describe the feature..."
-                previewMap={newFeaturePreviewMap}
-                onPreviewMapChange={setNewFeaturePreviewMap}
-                autoFocus
-                error={descriptionError}
-              />
-            </div>
-            <div className="flex w-fit items-center gap-3 select-none cursor-default">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="w-[200px] justify-between"
-                  >
-                    {enhancementMode === "improve" && "Improve Clarity"}
-                    {enhancementMode === "technical" && "Add Technical Details"}
-                    {enhancementMode === "simplify" && "Simplify"}
-                    {enhancementMode === "acceptance" &&
-                      "Add Acceptance Criteria"}
-                    <ChevronDown className="w-4 h-4 ml-2" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  <DropdownMenuItem
-                    onClick={() => setEnhancementMode("improve")}
-                  >
-                    Improve Clarity
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={() => setEnhancementMode("technical")}
-                  >
-                    Add Technical Details
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={() => setEnhancementMode("simplify")}
-                  >
-                    Simplify
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={() => setEnhancementMode("acceptance")}
-                  >
-                    Add Acceptance Criteria
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={handleEnhanceDescription}
-                disabled={!newFeature.description.trim() || isEnhancing}
-                loading={isEnhancing}
-              >
-                <Sparkles className="w-4 h-4 mr-2" />
-                Enhance with AI
-              </Button>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="category">Category (optional)</Label>
-              <CategoryAutocomplete
-                value={newFeature.category}
-                onChange={(value) =>
-                  setNewFeature({ ...newFeature, category: value })
-                }
-                suggestions={categorySuggestions}
-                placeholder="e.g., Core, UI, API"
-                data-testid="feature-category-input"
-              />
-            </div>
-            {useWorktrees && (
-              <BranchSelector
-                useCurrentBranch={useCurrentBranch}
-                onUseCurrentBranchChange={setUseCurrentBranch}
-                branchName={newFeature.branchName}
-                onBranchNameChange={(value) =>
-                  setNewFeature({ ...newFeature, branchName: value })
-                }
-                branchSuggestions={branchSuggestions}
-                branchCardCounts={branchCardCounts}
-                currentBranch={currentBranch}
-                testIdPrefix="feature"
-              />
-            )}
-
-            {/* Priority Selector */}
-            <PrioritySelector
-              selectedPriority={newFeature.priority}
-              onPrioritySelect={(priority) =>
-                setNewFeature({ ...newFeature, priority })
-              }
-              testIdPrefix="priority"
-            />
-          </TabsContent>
-
-          {/* Model Tab */}
-          <TabsContent
-            value="model"
-            className="space-y-4 overflow-y-auto cursor-default"
-          >
-            {/* Show Advanced Options Toggle */}
-            {showProfilesOnly && (
-              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
-                <div className="space-y-1">
-                  <p className="text-sm font-medium text-foreground">
-                    Simple Mode Active
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    Only showing AI profiles. Advanced model tweaking is hidden.
-                  </p>
-                </div>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-                  data-testid="show-advanced-options-toggle"
-                >
-                  <Settings2 className="w-4 h-4 mr-2" />
-                  {showAdvancedOptions ? "Hide" : "Show"} Advanced
-                </Button>
-              </div>
-            )}
-
-            {/* Quick Select Profile Section */}
-            <ProfileQuickSelect
-              profiles={aiProfiles}
-              selectedModel={newFeature.model}
-              selectedThinkingLevel={newFeature.thinkingLevel}
-              onSelect={handleProfileSelect}
-              showManageLink
-              onManageLinkClick={() => {
-                onOpenChange(false);
-                useAppStore.getState().setCurrentView("profiles");
-              }}
-            />
-
-            {/* Separator */}
-            {aiProfiles.length > 0 &&
-              (!showProfilesOnly || showAdvancedOptions) && (
-                <div className="border-t border-border" />
-              )}
-
-            {/* Claude Models Section */}
-            {(!showProfilesOnly || showAdvancedOptions) && (
-              <>
-                <ModelSelector
-                  selectedModel={newFeature.model}
-                  onModelSelect={handleModelSelect}
-                />
-                {newModelAllowsThinking && (
-                  <ThinkingLevelSelector
-                    selectedLevel={newFeature.thinkingLevel}
-                    onLevelSelect={(level) =>
-                      setNewFeature({ ...newFeature, thinkingLevel: level })
-                    }
-                  />
-                )}
-              </>
-            )}
-          </TabsContent>
-
-          {/* Options Tab */}
-          <TabsContent
-            value="options"
-            className="space-y-4 overflow-y-auto cursor-default"
-          >
-            {/* Planning Mode Section */}
-            <PlanningModeSelector
-              mode={planningMode}
-              onModeChange={setPlanningMode}
-              requireApproval={requirePlanApproval}
-              onRequireApprovalChange={setRequirePlanApproval}
-              featureDescription={newFeature.description}
-              testIdPrefix="add-feature"
-              compact
-            />
-
-            <div className="border-t border-border my-4" />
-
-            {/* Testing Section */}
-            <TestingTabContent
-              skipTests={newFeature.skipTests}
-              onSkipTestsChange={(skipTests) =>
-                setNewFeature({ ...newFeature, skipTests })
-              }
-              steps={newFeature.steps}
-              onStepsChange={(steps) => setNewFeature({ ...newFeature, steps })}
-            />
-          </TabsContent>
-        </Tabs>
-        <DialogFooter>
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <HotkeyButton
-            onClick={handleAdd}
-            hotkey={{ key: "Enter", cmdCtrl: true }}
-            hotkeyActive={open}
-            data-testid="confirm-add-feature"
-            disabled={
-              useWorktrees && !useCurrentBranch && !newFeature.branchName.trim()
-            }
-          >
-            Add Feature
-          </HotkeyButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/app/src/components/views/board-view/dialogs/feature-suggestions-dialog.tsx

@@ -1,540 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState, useCallback } 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 { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import {
-  Loader2,
-  Lightbulb,
-  Download,
-  StopCircle,
-  ChevronDown,
-  ChevronRight,
-  RefreshCw,
-  Shield,
-  Zap,
-} from "lucide-react";
-import { getElectronAPI, FeatureSuggestion, SuggestionsEvent, SuggestionType } from "@/lib/electron";
-import { useAppStore, Feature } from "@/store/app-store";
-import { toast } from "sonner";
-
-interface FeatureSuggestionsDialogProps {
-  open: boolean;
-  onClose: () => void;
-  projectPath: string;
-  // Props to persist state across dialog open/close
-  suggestions: FeatureSuggestion[];
-  setSuggestions: (suggestions: FeatureSuggestion[]) => void;
-  isGenerating: boolean;
-  setIsGenerating: (generating: boolean) => void;
-}
-
-// Configuration for each suggestion type
-const suggestionTypeConfig: Record<SuggestionType, {
-  label: string;
-  icon: React.ComponentType<{ className?: string }>;
-  description: string;
-  color: string;
-}> = {
-  features: {
-    label: "Feature Suggestions",
-    icon: Lightbulb,
-    description: "Discover missing features and improvements",
-    color: "text-yellow-500",
-  },
-  refactoring: {
-    label: "Refactoring Suggestions",
-    icon: RefreshCw,
-    description: "Find code smells and refactoring opportunities",
-    color: "text-blue-500",
-  },
-  security: {
-    label: "Security Suggestions",
-    icon: Shield,
-    description: "Identify security vulnerabilities and issues",
-    color: "text-red-500",
-  },
-  performance: {
-    label: "Performance Suggestions",
-    icon: Zap,
-    description: "Discover performance bottlenecks and optimizations",
-    color: "text-green-500",
-  },
-};
-
-export function FeatureSuggestionsDialog({
-  open,
-  onClose,
-  projectPath,
-  suggestions,
-  setSuggestions,
-  isGenerating,
-  setIsGenerating,
-}: FeatureSuggestionsDialogProps) {
-  const [progress, setProgress] = useState<string[]>([]);
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
-  const [isImporting, setIsImporting] = useState(false);
-  const [currentSuggestionType, setCurrentSuggestionType] = useState<SuggestionType | null>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const autoScrollRef = useRef(true);
-
-  const { features, setFeatures } = useAppStore();
-
-  // Initialize selectedIds when suggestions change
-  useEffect(() => {
-    if (suggestions.length > 0 && selectedIds.size === 0) {
-      setSelectedIds(new Set(suggestions.map((s) => s.id)));
-    }
-  }, [suggestions, selectedIds.size]);
-
-  // Auto-scroll progress when new content arrives
-  useEffect(() => {
-    if (autoScrollRef.current && scrollRef.current && isGenerating) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [progress, isGenerating]);
-
-  // Listen for suggestion events when dialog is open
-  useEffect(() => {
-    if (!open) return;
-
-    const api = getElectronAPI();
-    if (!api?.suggestions) return;
-
-    const unsubscribe = api.suggestions.onEvent((event: SuggestionsEvent) => {
-      if (event.type === "suggestions_progress") {
-        setProgress((prev) => [...prev, event.content || ""]);
-      } else if (event.type === "suggestions_tool") {
-        const toolName = event.tool || "Unknown Tool";
-        setProgress((prev) => [...prev, `Using tool: ${toolName}\n`]);
-      } else if (event.type === "suggestions_complete") {
-        setIsGenerating(false);
-        if (event.suggestions && event.suggestions.length > 0) {
-          setSuggestions(event.suggestions);
-          // Select all by default
-          setSelectedIds(new Set(event.suggestions.map((s) => s.id)));
-          const typeLabel = currentSuggestionType ? suggestionTypeConfig[currentSuggestionType].label.toLowerCase() : "suggestions";
-          toast.success(`Generated ${event.suggestions.length} ${typeLabel}!`);
-        } else {
-          toast.info("No suggestions generated. Try again.");
-        }
-      } else if (event.type === "suggestions_error") {
-        setIsGenerating(false);
-        toast.error(`Error: ${event.error}`);
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [open, setSuggestions, setIsGenerating, currentSuggestionType]);
-
-  // Start generating suggestions for a specific type
-  const handleGenerate = useCallback(async (suggestionType: SuggestionType) => {
-    const api = getElectronAPI();
-    if (!api?.suggestions) {
-      toast.error("Suggestions API not available");
-      return;
-    }
-
-    setIsGenerating(true);
-    setProgress([]);
-    setSuggestions([]);
-    setSelectedIds(new Set());
-    setCurrentSuggestionType(suggestionType);
-
-    try {
-      const result = await api.suggestions.generate(projectPath, suggestionType);
-      if (!result.success) {
-        toast.error(result.error || "Failed to start generation");
-        setIsGenerating(false);
-      }
-    } catch (error) {
-      console.error("Failed to generate suggestions:", error);
-      toast.error("Failed to start generation");
-      setIsGenerating(false);
-    }
-  }, [projectPath, setIsGenerating, setSuggestions]);
-
-  // Stop generating
-  const handleStop = useCallback(async () => {
-    const api = getElectronAPI();
-    if (!api?.suggestions) return;
-
-    try {
-      await api.suggestions.stop();
-      setIsGenerating(false);
-      toast.info("Generation stopped");
-    } catch (error) {
-      console.error("Failed to stop generation:", error);
-    }
-  }, [setIsGenerating]);
-
-  // Toggle suggestion selection
-  const toggleSelection = useCallback((id: string) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  // Toggle expand/collapse for a suggestion
-  const toggleExpanded = useCallback((id: string) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  // Select/deselect all
-  const toggleSelectAll = useCallback(() => {
-    if (selectedIds.size === suggestions.length) {
-      setSelectedIds(new Set());
-    } else {
-      setSelectedIds(new Set(suggestions.map((s) => s.id)));
-    }
-  }, [selectedIds.size, suggestions]);
-
-  // Import selected suggestions as features
-  const handleImport = useCallback(async () => {
-    if (selectedIds.size === 0) {
-      toast.warning("No suggestions selected");
-      return;
-    }
-
-    setIsImporting(true);
-
-    try {
-      const api = getElectronAPI();
-      const selectedSuggestions = suggestions.filter((s) =>
-        selectedIds.has(s.id)
-      );
-
-      // Create new features from selected suggestions
-      const newFeatures: Feature[] = selectedSuggestions.map((s) => ({
-        id: `feature-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        category: s.category,
-        description: s.description,
-        steps: s.steps,
-        status: "backlog" as const,
-        skipTests: true, // As specified, testing mode true
-        priority: s.priority, // Preserve priority from suggestion
-      }));
-
-      // Create each new feature using the features API
-      if (api.features) {
-        for (const feature of newFeatures) {
-          await api.features.create(projectPath, feature);
-        }
-      }
-
-      // Merge with existing features for store update
-      const updatedFeatures = [...features, ...newFeatures];
-
-      // Update store
-      setFeatures(updatedFeatures);
-
-      toast.success(`Imported ${newFeatures.length} features to backlog!`);
-
-      // Clear suggestions after importing
-      setSuggestions([]);
-      setSelectedIds(new Set());
-      setProgress([]);
-      setCurrentSuggestionType(null);
-
-      onClose();
-    } catch (error) {
-      console.error("Failed to import features:", error);
-      toast.error("Failed to import features");
-    } finally {
-      setIsImporting(false);
-    }
-  }, [selectedIds, suggestions, features, setFeatures, setSuggestions, projectPath, onClose]);
-
-  // 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 < 50;
-    autoScrollRef.current = isAtBottom;
-  };
-
-  // Go back to type selection
-  const handleBackToSelection = useCallback(() => {
-    setSuggestions([]);
-    setSelectedIds(new Set());
-    setProgress([]);
-    setCurrentSuggestionType(null);
-  }, [setSuggestions]);
-
-  const hasStarted = progress.length > 0 || suggestions.length > 0;
-  const hasSuggestions = suggestions.length > 0;
-  const currentConfig = currentSuggestionType ? suggestionTypeConfig[currentSuggestionType] : null;
-
-  return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent
-        className="w-[70vw] max-w-[70vw] max-h-[85vh] flex flex-col"
-        data-testid="feature-suggestions-dialog"
-      >
-        <DialogHeader className="flex-shrink-0">
-          <DialogTitle className="flex items-center gap-2">
-            {currentConfig ? (
-              <>
-                <currentConfig.icon className={`w-5 h-5 ${currentConfig.color}`} />
-                {currentConfig.label}
-              </>
-            ) : (
-              <>
-                <Lightbulb className="w-5 h-5 text-yellow-500" />
-                AI Suggestions
-              </>
-            )}
-          </DialogTitle>
-          <DialogDescription>
-            {currentConfig
-              ? currentConfig.description
-              : "Analyze your project to discover improvements. Choose a suggestion type below."}
-          </DialogDescription>
-        </DialogHeader>
-
-        {!hasStarted ? (
-          // Initial state - show suggestion type buttons
-          <div className="flex-1 flex flex-col items-center justify-center py-8">
-            <p className="text-muted-foreground text-center max-w-lg mb-8">
-              Our AI will analyze your project and generate actionable suggestions.
-              Choose what type of analysis you want to perform:
-            </p>
-            <div className="grid grid-cols-2 gap-4 w-full max-w-2xl">
-              {(Object.entries(suggestionTypeConfig) as [SuggestionType, typeof suggestionTypeConfig[SuggestionType]][]).map(
-                ([type, config]) => {
-                  const Icon = config.icon;
-                  return (
-                    <Button
-                      key={type}
-                      variant="outline"
-                      className="h-auto py-6 px-6 flex flex-col items-center gap-3 hover:border-primary/50 transition-colors"
-                      onClick={() => handleGenerate(type)}
-                      data-testid={`generate-${type}-btn`}
-                    >
-                      <Icon className={`w-8 h-8 ${config.color}`} />
-                      <div className="text-center">
-                        <div className="font-semibold">{config.label.replace(" Suggestions", "")}</div>
-                        <div className="text-xs text-muted-foreground mt-1">
-                          {config.description}
-                        </div>
-                      </div>
-                    </Button>
-                  );
-                }
-              )}
-            </div>
-          </div>
-        ) : isGenerating ? (
-          // Generating state - show progress
-          <div className="flex-1 flex flex-col min-h-0">
-            <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <Loader2 className="w-4 h-4 animate-spin" />
-                Analyzing project...
-              </div>
-              <Button variant="destructive" size="sm" onClick={handleStop}>
-                <StopCircle className="w-4 h-4 mr-2" />
-                Stop
-              </Button>
-            </div>
-            <div
-              ref={scrollRef}
-              onScroll={handleScroll}
-              className="flex-1 overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs min-h-[200px] max-h-[400px]"
-            >
-              <div className="whitespace-pre-wrap break-words text-zinc-300">
-                {progress.join("")}
-              </div>
-            </div>
-          </div>
-        ) : hasSuggestions ? (
-          // Results state - show suggestions list
-          <div className="flex-1 flex flex-col min-h-0">
-            <div className="flex items-center justify-between mb-3">
-              <div className="flex items-center gap-4">
-                <span className="text-sm text-muted-foreground">
-                  {suggestions.length} suggestions generated
-                </span>
-                <Button variant="ghost" size="sm" onClick={toggleSelectAll}>
-                  {selectedIds.size === suggestions.length
-                    ? "Deselect All"
-                    : "Select All"}
-                </Button>
-              </div>
-              <span className="text-sm font-medium">
-                {selectedIds.size} selected
-              </span>
-            </div>
-
-            <div
-              ref={scrollRef}
-              className="flex-1 overflow-y-auto space-y-2 min-h-[200px] max-h-[400px] pr-2"
-            >
-              {suggestions.map((suggestion) => {
-                const isSelected = selectedIds.has(suggestion.id);
-                const isExpanded = expandedIds.has(suggestion.id);
-
-                return (
-                  <div
-                    key={suggestion.id}
-                    className={`border rounded-lg p-3 transition-colors ${
-                      isSelected
-                        ? "border-primary bg-primary/5"
-                        : "border-border hover:border-primary/50"
-                    }`}
-                    data-testid={`suggestion-${suggestion.id}`}
-                  >
-                    <div className="flex items-start gap-3">
-                      <Checkbox
-                        id={suggestion.id}
-                        checked={isSelected}
-                        onCheckedChange={() => toggleSelection(suggestion.id)}
-                        className="mt-1"
-                      />
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-1">
-                          <button
-                            onClick={() => toggleExpanded(suggestion.id)}
-                            className="flex items-center gap-1 text-muted-foreground hover:text-foreground"
-                          >
-                            {isExpanded ? (
-                              <ChevronDown className="w-4 h-4" />
-                            ) : (
-                              <ChevronRight className="w-4 h-4" />
-                            )}
-                          </button>
-                          <span className="text-xs px-2 py-0.5 rounded-full bg-primary/20 text-primary font-medium">
-                            #{suggestion.priority}
-                          </span>
-                          <span className="text-xs px-2 py-0.5 rounded-full bg-secondary text-secondary-foreground">
-                            {suggestion.category}
-                          </span>
-                        </div>
-                        <Label
-                          htmlFor={suggestion.id}
-                          className="text-sm font-medium cursor-pointer"
-                        >
-                          {suggestion.description}
-                        </Label>
-
-                        {isExpanded && (
-                          <div className="mt-3 space-y-2 text-sm">
-                            {suggestion.reasoning && (
-                              <p className="text-muted-foreground italic">
-                                {suggestion.reasoning}
-                              </p>
-                            )}
-                            {suggestion.steps.length > 0 && (
-                              <div>
-                                <p className="text-xs font-medium text-muted-foreground mb-1">
-                                  Implementation Steps:
-                                </p>
-                                <ul className="list-disc list-inside text-xs text-muted-foreground space-y-0.5">
-                                  {suggestion.steps.map((step, i) => (
-                                    <li key={i}>{step}</li>
-                                  ))}
-                                </ul>
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        ) : (
-          // No results state
-          <div className="flex-1 flex flex-col items-center justify-center py-8 text-center">
-            <p className="text-muted-foreground mb-4">
-              No suggestions were generated. Try running the analysis again.
-            </p>
-            <div className="flex gap-2">
-              <Button variant="outline" onClick={handleBackToSelection}>
-                Back to Selection
-              </Button>
-              {currentSuggestionType && (
-                <Button onClick={() => handleGenerate(currentSuggestionType)}>
-                  <Lightbulb className="w-4 h-4 mr-2" />
-                  Try Again
-                </Button>
-              )}
-            </div>
-          </div>
-        )}
-
-        <DialogFooter className="flex-shrink-0">
-          {hasSuggestions && (
-            <div className="flex gap-2 w-full justify-between">
-              <div className="flex gap-2">
-                <Button variant="outline" onClick={handleBackToSelection}>
-                  Back
-                </Button>
-                {currentSuggestionType && (
-                  <Button variant="outline" onClick={() => handleGenerate(currentSuggestionType)}>
-                    {currentConfig && <currentConfig.icon className="w-4 h-4 mr-2" />}
-                    Regenerate
-                  </Button>
-                )}
-              </div>
-              <div className="flex gap-2">
-                <Button variant="ghost" onClick={onClose}>
-                  Cancel
-                </Button>
-                <HotkeyButton
-                  onClick={handleImport}
-                  disabled={selectedIds.size === 0 || isImporting}
-                  hotkey={{ key: "Enter", cmdCtrl: true }}
-                  hotkeyActive={open && hasSuggestions}
-                >
-                  {isImporting ? (
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  ) : (
-                    <Download className="w-4 h-4 mr-2" />
-                  )}
-                  Import {selectedIds.size} Feature
-                  {selectedIds.size !== 1 ? "s" : ""}
-                </HotkeyButton>
-              </div>
-            </div>
-          )}
-          {!hasSuggestions && !isGenerating && hasStarted && (
-            <Button variant="ghost" onClick={onClose}>
-              Close
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/app/src/components/views/board-view/dialogs/index.ts

@@ -1,9 +0,0 @@
-export { AddFeatureDialog } from "./add-feature-dialog";
-export { AgentOutputModal } from "./agent-output-modal";
-export { CompletedFeaturesModal } from "./completed-features-modal";
-export { ArchiveAllVerifiedDialog } from "./archive-all-verified-dialog";
-export { DeleteCompletedFeatureDialog } from "./delete-completed-feature-dialog";
-export { EditFeatureDialog } from "./edit-feature-dialog";
-export { FeatureSuggestionsDialog } from "./feature-suggestions-dialog";
-export { FollowUpDialog } from "./follow-up-dialog";
-export { PlanApprovalDialog } from "./plan-approval-dialog";

apps/app/src/components/views/board-view/hooks/index.ts

@@ -1,10 +0,0 @@
-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 { useSuggestionsState } from "./use-suggestions-state";

apps/app/src/components/views/board-view/hooks/use-suggestions-state.ts

@@ -1,34 +0,0 @@
-import { useState, useCallback } from "react";
-import type { FeatureSuggestion } from "@/lib/electron";
-
-export function useSuggestionsState() {
-  const [showSuggestionsDialog, setShowSuggestionsDialog] = useState(false);
-  const [suggestionsCount, setSuggestionsCount] = useState(0);
-  const [featureSuggestions, setFeatureSuggestions] = useState<FeatureSuggestion[]>([]);
-  const [isGeneratingSuggestions, setIsGeneratingSuggestions] = useState(false);
-
-  const updateSuggestions = useCallback((suggestions: FeatureSuggestion[]) => {
-    setFeatureSuggestions(suggestions);
-    setSuggestionsCount(suggestions.length);
-  }, []);
-
-  const closeSuggestionsDialog = useCallback(() => {
-    setShowSuggestionsDialog(false);
-  }, []);
-
-  return {
-    // State
-    showSuggestionsDialog,
-    suggestionsCount,
-    featureSuggestions,
-    isGeneratingSuggestions,
-    // Setters
-    setShowSuggestionsDialog,
-    setSuggestionsCount,
-    setFeatureSuggestions,
-    setIsGeneratingSuggestions,
-    // Helpers
-    updateSuggestions,
-    closeSuggestionsDialog,
-  };
-}

apps/app/src/components/views/board-view/kanban-board.tsx

@@ -1,244 +0,0 @@
-"use client";
-
-import {
-  DndContext,
-  DragOverlay,
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { HotkeyButton } from "@/components/ui/hotkey-button";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { KanbanColumn, KanbanCard } from "./components";
-import { Feature } from "@/store/app-store";
-import { FastForward, Lightbulb, Archive } from "lucide-react";
-import { useKeyboardShortcutsConfig } from "@/hooks/use-keyboard-shortcuts";
-import { COLUMNS, ColumnId } from "./constants";
-
-interface KanbanBoardProps {
-  sensors: any;
-  collisionDetectionStrategy: (args: any) => any;
-  onDragStart: (event: any) => void;
-  onDragEnd: (event: any) => void;
-  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;
-  onCommit: (feature: Feature) => void;
-  onComplete: (feature: Feature) => void;
-  onImplement: (feature: Feature) => void;
-  onViewPlan: (feature: Feature) => void;
-  onApprovePlan: (feature: Feature) => void;
-  featuresWithContext: Set<string>;
-  runningAutoTasks: string[];
-  shortcuts: ReturnType<typeof useKeyboardShortcutsConfig>;
-  onStartNextFeatures: () => void;
-  onShowSuggestions: () => void;
-  suggestionsCount: number;
-  onArchiveAllVerified: () => void;
-}
-
-export function KanbanBoard({
-  sensors,
-  collisionDetectionStrategy,
-  onDragStart,
-  onDragEnd,
-  activeFeature,
-  getColumnFeatures,
-  backgroundImageStyle,
-  backgroundSettings,
-  onEdit,
-  onDelete,
-  onViewOutput,
-  onVerify,
-  onResume,
-  onForceStop,
-  onManualVerify,
-  onMoveBackToInProgress,
-  onFollowUp,
-  onCommit,
-  onComplete,
-  onImplement,
-  onViewPlan,
-  onApprovePlan,
-  featuresWithContext,
-  runningAutoTasks,
-  shortcuts,
-  onStartNextFeatures,
-  onShowSuggestions,
-  suggestionsCount,
-  onArchiveAllVerified,
-}: KanbanBoardProps) {
-  return (
-    <div
-      className="flex-1 overflow-x-auto px-4 pb-4 relative"
-      style={backgroundImageStyle}
-    >
-      <DndContext
-        sensors={sensors}
-        collisionDetection={collisionDetectionStrategy}
-        onDragStart={onDragStart}
-        onDragEnd={onDragEnd}
-      >
-        <div className="flex gap-5 h-full min-w-max py-1">
-          {COLUMNS.map((column) => {
-            const columnFeatures = getColumnFeatures(column.id);
-            return (
-              <KanbanColumn
-                key={column.id}
-                id={column.id}
-                title={column.title}
-                colorClass={column.colorClass}
-                count={columnFeatures.length}
-                opacity={backgroundSettings.columnOpacity}
-                showBorder={backgroundSettings.columnBorderEnabled}
-                hideScrollbar={backgroundSettings.hideScrollbar}
-                headerAction={
-                  column.id === "verified" &&
-                  columnFeatures.length > 0 ? (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-6 px-2 text-xs"
-                      onClick={onArchiveAllVerified}
-                      data-testid="archive-all-verified-button"
-                    >
-                      <Archive className="w-3 h-3 mr-1" />
-                      Archive All
-                    </Button>
-                  ) : column.id === "backlog" ? (
-                    <div className="flex items-center gap-1">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 w-6 p-0 text-yellow-500 hover:text-yellow-400 hover:bg-yellow-500/10 relative"
-                        onClick={onShowSuggestions}
-                        title="Feature Suggestions"
-                        data-testid="feature-suggestions-button"
-                      >
-                        <Lightbulb className="w-3.5 h-3.5" />
-                        {suggestionsCount > 0 && (
-                          <span
-                            className="absolute -top-1 -right-1 w-4 h-4 text-[9px] font-mono rounded-full bg-yellow-500 text-black flex items-center justify-center"
-                            data-testid="suggestions-count"
-                          >
-                            {suggestionsCount}
-                          </span>
-                        )}
-                      </Button>
-                      {columnFeatures.length > 0 && (
-                        <HotkeyButton
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 px-2 text-xs text-primary hover:text-primary hover:bg-primary/10"
-                          onClick={onStartNextFeatures}
-                          hotkey={shortcuts.startNext}
-                          hotkeyActive={false}
-                          data-testid="start-next-button"
-                        >
-                          <FastForward className="w-3 h-3 mr-1" />
-                          Make
-                        </HotkeyButton>
-                      )}
-                    </div>
-                  ) : undefined
-                }
-              >
-                <SortableContext
-                  items={columnFeatures.map((f) => f.id)}
-                  strategy={verticalListSortingStrategy}
-                >
-                  {columnFeatures.map((feature, index) => {
-                    // Calculate shortcut key for in-progress cards (first 10 get 1-9, 0)
-                    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)}
-                        onCommit={() => onCommit(feature)}
-                        onComplete={() => onComplete(feature)}
-                        onImplement={() => onImplement(feature)}
-                        onViewPlan={() => onViewPlan(feature)}
-                        onApprovePlan={() => onApprovePlan(feature)}
-                        hasContext={featuresWithContext.has(feature.id)}
-                        isCurrentAutoTask={runningAutoTasks.includes(
-                          feature.id
-                        )}
-                        shortcutKey={shortcutKey}
-                        opacity={backgroundSettings.cardOpacity}
-                        glassmorphism={
-                          backgroundSettings.cardGlassmorphism
-                        }
-                        cardBorderEnabled={
-                          backgroundSettings.cardBorderEnabled
-                        }
-                        cardBorderOpacity={
-                          backgroundSettings.cardBorderOpacity
-                        }
-                      />
-                    );
-                  })}
-                </SortableContext>
-              </KanbanColumn>
-            );
-          })}
-        </div>
-
-        <DragOverlay
-          dropAnimation={{
-            duration: 200,
-            easing: "cubic-bezier(0.18, 0.67, 0.6, 1.22)",
-          }}
-        >
-          {activeFeature && (
-            <Card className="w-72 rotate-2 shadow-2xl shadow-black/25 border-primary/50 bg-card/95 backdrop-blur-sm transition-transform">
-              <CardHeader className="p-3">
-                <CardTitle className="text-sm font-medium line-clamp-2">
-                  {activeFeature.description}
-                </CardTitle>
-                <CardDescription className="text-xs text-muted-foreground">
-                  {activeFeature.category}
-                </CardDescription>
-              </CardHeader>
-            </Card>
-          )}
-        </DragOverlay>
-      </DndContext>
-    </div>
-  );
-}

apps/app/src/components/views/board-view/shared/index.ts

@@ -1,8 +0,0 @@
-export * from "./model-constants";
-export * from "./model-selector";
-export * from "./thinking-level-selector";
-export * from "./profile-quick-select";
-export * from "./testing-tab-content";
-export * from "./priority-selector";
-export * from "./branch-selector";
-export * from "./planning-mode-selector";

apps/app/src/components/views/board-view/shared/model-constants.ts

@@ -1,70 +0,0 @@
-import { AgentModel, ThinkingLevel } from "@/store/app-store";
-import {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-} from "lucide-react";
-
-export type ModelOption = {
-  id: AgentModel;
-  label: string;
-  description: string;
-  badge?: string;
-  provider: "claude";
-};
-
-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",
-  },
-];
-
-export const THINKING_LEVELS: ThinkingLevel[] = [
-  "none",
-  "low",
-  "medium",
-  "high",
-  "ultrathink",
-];
-
-export const THINKING_LEVEL_LABELS: Record<ThinkingLevel, string> = {
-  none: "None",
-  low: "Low",
-  medium: "Med",
-  high: "High",
-  ultrathink: "Ultra",
-};
-
-// Profile icon mapping
-export const PROFILE_ICONS: Record<
-  string,
-  React.ComponentType<{ className?: string }>
-> = {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-};

apps/app/src/components/views/board-view/shared/model-selector.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { Label } from "@/components/ui/label";
-import { Brain } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { AgentModel } from "@/store/app-store";
-import { CLAUDE_MODELS, ModelOption } from "./model-constants";
-
-interface ModelSelectorProps {
-  selectedModel: AgentModel;
-  onModelSelect: (model: AgentModel) => void;
-  testIdPrefix?: string;
-}
-
-export function ModelSelector({
-  selectedModel,
-  onModelSelect,
-  testIdPrefix = "model-select",
-}: ModelSelectorProps) {
-  return (
-    <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 (SDK)
-        </Label>
-        <span className="text-[11px] px-2 py-0.5 rounded-full border border-primary/40 text-primary">
-          Native
-        </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>
-  );
-}

apps/app/src/components/views/board-view/shared/profile-quick-select.tsx

@@ -1,99 +0,0 @@
-"use client";
-
-import { Label } from "@/components/ui/label";
-import { Brain, UserCircle } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { AgentModel, ThinkingLevel, AIProfile } from "@/store/app-store";
-import { PROFILE_ICONS } from "./model-constants";
-
-interface ProfileQuickSelectProps {
-  profiles: AIProfile[];
-  selectedModel: AgentModel;
-  selectedThinkingLevel: ThinkingLevel;
-  onSelect: (model: AgentModel, thinkingLevel: ThinkingLevel) => void;
-  testIdPrefix?: string;
-  showManageLink?: boolean;
-  onManageLinkClick?: () => void;
-}
-
-export function ProfileQuickSelect({
-  profiles,
-  selectedModel,
-  selectedThinkingLevel,
-  onSelect,
-  testIdPrefix = "profile-quick-select",
-  showManageLink = false,
-  onManageLinkClick,
-}: ProfileQuickSelectProps) {
-  if (profiles.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between">
-        <Label className="flex items-center gap-2">
-          <UserCircle className="w-4 h-4 text-brand-500" />
-          Quick Select Profile
-        </Label>
-        <span className="text-[11px] px-2 py-0.5 rounded-full border border-brand-500/40 text-brand-500">
-          Presets
-        </span>
-      </div>
-      <div className="grid grid-cols-2 gap-2">
-        {profiles.slice(0, 6).map((profile) => {
-          const IconComponent = profile.icon
-            ? PROFILE_ICONS[profile.icon]
-            : Brain;
-          const isSelected =
-            selectedModel === profile.model &&
-            selectedThinkingLevel === profile.thinkingLevel;
-          return (
-            <button
-              key={profile.id}
-              type="button"
-              onClick={() => onSelect(profile.model, profile.thinkingLevel)}
-              className={cn(
-                "flex items-center gap-2 p-2 rounded-lg border text-left transition-all",
-                isSelected
-                  ? "bg-brand-500/10 border-brand-500 text-foreground"
-                  : "bg-background hover:bg-accent border-input"
-              )}
-              data-testid={`${testIdPrefix}-${profile.id}`}
-            >
-              <div className="w-7 h-7 rounded flex items-center justify-center shrink-0 bg-primary/10">
-                {IconComponent && (
-                  <IconComponent className="w-4 h-4 text-primary" />
-                )}
-              </div>
-              <div className="min-w-0 flex-1">
-                <p className="text-sm font-medium truncate">{profile.name}</p>
-                <p className="text-[10px] text-muted-foreground truncate">
-                  {profile.model}
-                  {profile.thinkingLevel !== "none" &&
-                    ` + ${profile.thinkingLevel}`}
-                </p>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-      <p className="text-xs text-muted-foreground">
-        Or customize below.
-        {showManageLink && onManageLinkClick && (
-          <>
-            {" "}
-            Manage profiles in{" "}
-            <button
-              type="button"
-              onClick={onManageLinkClick}
-              className="text-brand-500 hover:underline"
-            >
-              AI Profiles
-            </button>
-          </>
-        )}
-      </p>
-    </div>
-  );
-}

apps/app/src/components/views/board-view/shared/testing-tab-content.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-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 { FlaskConical, Plus } from "lucide-react";
-
-interface TestingTabContentProps {
-  skipTests: boolean;
-  onSkipTestsChange: (skipTests: boolean) => void;
-  steps: string[];
-  onStepsChange: (steps: string[]) => void;
-  testIdPrefix?: string;
-}
-
-export function TestingTabContent({
-  skipTests,
-  onSkipTestsChange,
-  steps,
-  onStepsChange,
-  testIdPrefix = "",
-}: TestingTabContentProps) {
-  const checkboxId = testIdPrefix ? `${testIdPrefix}-skip-tests` : "skip-tests";
-
-  const handleStepChange = (index: number, value: string) => {
-    const newSteps = [...steps];
-    newSteps[index] = value;
-    onStepsChange(newSteps);
-  };
-
-  const handleAddStep = () => {
-    onStepsChange([...steps, ""]);
-  };
-
-  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, this feature will use automated TDD. When disabled, it
-        will require manual verification.
-      </p>
-
-      {/* Verification Steps - Only shown when skipTests is enabled */}
-      {skipTests && (
-        <div className="space-y-2 pt-2 border-t border-border">
-          <Label>Verification Steps</Label>
-          <p className="text-xs text-muted-foreground mb-2">
-            Add manual steps to verify this feature works correctly.
-          </p>
-          {steps.map((step, index) => (
-            <Input
-              key={index}
-              value={step}
-              placeholder={`Verification step ${index + 1}`}
-              onChange={(e) => handleStepChange(index, e.target.value)}
-              data-testid={`${testIdPrefix ? testIdPrefix + "-" : ""}feature-step-${index}${testIdPrefix ? "" : "-input"}`}
-            />
-          ))}
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleAddStep}
-            data-testid={`${testIdPrefix ? testIdPrefix + "-" : ""}add-step-button`}
-          >
-            <Plus className="w-4 h-4 mr-2" />
-            Add Verification Step
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}

apps/app/src/components/views/board-view/worktree-panel/components/index.ts

@@ -1,3 +0,0 @@
-export { BranchSwitchDropdown } from "./branch-switch-dropdown";
-export { WorktreeActionsDropdown } from "./worktree-actions-dropdown";
-export { WorktreeTab } from "./worktree-tab";

apps/app/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx

@@ -1,195 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuLabel,
-} from "@/components/ui/dropdown-menu";
-import {
-  Trash2,
-  MoreHorizontal,
-  GitCommit,
-  GitPullRequest,
-  ExternalLink,
-  Download,
-  Upload,
-  Play,
-  Square,
-  Globe,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import type { WorktreeInfo, DevServerInfo } from "../types";
-
-interface WorktreeActionsDropdownProps {
-  worktree: WorktreeInfo;
-  isSelected: boolean;
-  defaultEditorName: string;
-  aheadCount: number;
-  behindCount: number;
-  isPulling: boolean;
-  isPushing: boolean;
-  isStartingDevServer: boolean;
-  isDevServerRunning: boolean;
-  devServerInfo?: DevServerInfo;
-  onOpenChange: (open: boolean) => void;
-  onPull: (worktree: WorktreeInfo) => void;
-  onPush: (worktree: WorktreeInfo) => void;
-  onOpenInEditor: (worktree: WorktreeInfo) => void;
-  onCommit: (worktree: WorktreeInfo) => void;
-  onCreatePR: (worktree: WorktreeInfo) => void;
-  onDeleteWorktree: (worktree: WorktreeInfo) => void;
-  onStartDevServer: (worktree: WorktreeInfo) => void;
-  onStopDevServer: (worktree: WorktreeInfo) => void;
-  onOpenDevServerUrl: (worktree: WorktreeInfo) => void;
-}
-
-export function WorktreeActionsDropdown({
-  worktree,
-  isSelected,
-  defaultEditorName,
-  aheadCount,
-  behindCount,
-  isPulling,
-  isPushing,
-  isStartingDevServer,
-  isDevServerRunning,
-  devServerInfo,
-  onOpenChange,
-  onPull,
-  onPush,
-  onOpenInEditor,
-  onCommit,
-  onCreatePR,
-  onDeleteWorktree,
-  onStartDevServer,
-  onStopDevServer,
-  onOpenDevServerUrl,
-}: WorktreeActionsDropdownProps) {
-  return (
-    <DropdownMenu onOpenChange={onOpenChange}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant={isSelected ? "default" : "outline"}
-          size="sm"
-          className={cn(
-            "h-7 w-7 p-0 rounded-l-none",
-            isSelected && "bg-primary text-primary-foreground",
-            !isSelected && "bg-secondary/50 hover:bg-secondary"
-          )}
-        >
-          <MoreHorizontal className="w-3 h-3" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-56">
-        {isDevServerRunning ? (
-          <>
-            <DropdownMenuLabel className="text-xs flex items-center gap-2">
-              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-              Dev Server Running (:{devServerInfo?.port})
-            </DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => onOpenDevServerUrl(worktree)}
-              className="text-xs"
-            >
-              <Globe className="w-3.5 h-3.5 mr-2" />
-              Open in Browser
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => onStopDevServer(worktree)}
-              className="text-xs text-destructive focus:text-destructive"
-            >
-              <Square className="w-3.5 h-3.5 mr-2" />
-              Stop Dev Server
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-          </>
-        ) : (
-          <>
-            <DropdownMenuItem
-              onClick={() => onStartDevServer(worktree)}
-              disabled={isStartingDevServer}
-              className="text-xs"
-            >
-              <Play
-                className={cn(
-                  "w-3.5 h-3.5 mr-2",
-                  isStartingDevServer && "animate-pulse"
-                )}
-              />
-              {isStartingDevServer ? "Starting..." : "Start Dev Server"}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-          </>
-        )}
-        <DropdownMenuItem
-          onClick={() => onPull(worktree)}
-          disabled={isPulling}
-          className="text-xs"
-        >
-          <Download
-            className={cn("w-3.5 h-3.5 mr-2", isPulling && "animate-pulse")}
-          />
-          {isPulling ? "Pulling..." : "Pull"}
-          {behindCount > 0 && (
-            <span className="ml-auto text-[10px] bg-muted px-1.5 py-0.5 rounded">
-              {behindCount} behind
-            </span>
-          )}
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={() => onPush(worktree)}
-          disabled={isPushing || aheadCount === 0}
-          className="text-xs"
-        >
-          <Upload
-            className={cn("w-3.5 h-3.5 mr-2", isPushing && "animate-pulse")}
-          />
-          {isPushing ? "Pushing..." : "Push"}
-          {aheadCount > 0 && (
-            <span className="ml-auto text-[10px] bg-primary/20 text-primary px-1.5 py-0.5 rounded">
-              {aheadCount} ahead
-            </span>
-          )}
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => onOpenInEditor(worktree)}
-          className="text-xs"
-        >
-          <ExternalLink className="w-3.5 h-3.5 mr-2" />
-          Open in {defaultEditorName}
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        {worktree.hasChanges && (
-          <DropdownMenuItem onClick={() => onCommit(worktree)} className="text-xs">
-            <GitCommit className="w-3.5 h-3.5 mr-2" />
-            Commit Changes
-          </DropdownMenuItem>
-        )}
-        {/* Show PR option for non-primary worktrees, or primary worktree with changes */}
-        {(!worktree.isMain || worktree.hasChanges) && (
-          <DropdownMenuItem onClick={() => onCreatePR(worktree)} className="text-xs">
-            <GitPullRequest className="w-3.5 h-3.5 mr-2" />
-            Create Pull Request
-          </DropdownMenuItem>
-        )}
-        {!worktree.isMain && (
-          <>
-            <DropdownMenuSeparator />
-            <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>
-  );
-}

apps/app/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx

@@ -1,194 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { RefreshCw, Globe, Loader2 } from "lucide-react";
-import { cn } from "@/lib/utils";
-import type { WorktreeInfo, BranchInfo, DevServerInfo } from "../types";
-import { BranchSwitchDropdown } from "./branch-switch-dropdown";
-import { WorktreeActionsDropdown } from "./worktree-actions-dropdown";
-
-interface WorktreeTabProps {
-  worktree: WorktreeInfo;
-  cardCount?: number; // Number of unarchived cards for this branch
-  isSelected: boolean;
-  isRunning: boolean;
-  isActivating: boolean;
-  isDevServerRunning: boolean;
-  devServerInfo?: DevServerInfo;
-  defaultEditorName: string;
-  branches: BranchInfo[];
-  filteredBranches: BranchInfo[];
-  branchFilter: string;
-  isLoadingBranches: boolean;
-  isSwitching: boolean;
-  isPulling: boolean;
-  isPushing: boolean;
-  isStartingDevServer: boolean;
-  aheadCount: number;
-  behindCount: number;
-  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;
-  onOpenInEditor: (worktree: WorktreeInfo) => void;
-  onCommit: (worktree: WorktreeInfo) => void;
-  onCreatePR: (worktree: WorktreeInfo) => void;
-  onDeleteWorktree: (worktree: WorktreeInfo) => void;
-  onStartDevServer: (worktree: WorktreeInfo) => void;
-  onStopDevServer: (worktree: WorktreeInfo) => void;
-  onOpenDevServerUrl: (worktree: WorktreeInfo) => void;
-}
-
-export function WorktreeTab({
-  worktree,
-  cardCount,
-  isSelected,
-  isRunning,
-  isActivating,
-  isDevServerRunning,
-  devServerInfo,
-  defaultEditorName,
-  branches,
-  filteredBranches,
-  branchFilter,
-  isLoadingBranches,
-  isSwitching,
-  isPulling,
-  isPushing,
-  isStartingDevServer,
-  aheadCount,
-  behindCount,
-  onSelectWorktree,
-  onBranchDropdownOpenChange,
-  onActionsDropdownOpenChange,
-  onBranchFilterChange,
-  onSwitchBranch,
-  onCreateBranch,
-  onPull,
-  onPush,
-  onOpenInEditor,
-  onCommit,
-  onCreatePR,
-  onDeleteWorktree,
-  onStartDevServer,
-  onStopDevServer,
-  onOpenDevServerUrl,
-}: WorktreeTabProps) {
-  return (
-    <div className="flex items-center">
-      {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 main"
-          >
-            {isRunning && <Loader2 className="w-3 h-3 animate-spin" />}
-            {isActivating && !isRunning && (
-              <RefreshCw className="w-3 h-3 animate-spin" />
-            )}
-            {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>
-            )}
-          </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 && <Loader2 className="w-3 h-3 animate-spin" />}
-          {isActivating && !isRunning && (
-            <RefreshCw className="w-3 h-3 animate-spin" />
-          )}
-          {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>
-          )}
-        </Button>
-      )}
-
-      {isDevServerRunning && (
-        <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)}
-          title={`Open dev server (port ${devServerInfo?.port})`}
-        >
-          <Globe className="w-3 h-3" />
-        </Button>
-      )}
-
-      <WorktreeActionsDropdown
-        worktree={worktree}
-        isSelected={isSelected}
-        defaultEditorName={defaultEditorName}
-        aheadCount={aheadCount}
-        behindCount={behindCount}
-        isPulling={isPulling}
-        isPushing={isPushing}
-        isStartingDevServer={isStartingDevServer}
-        isDevServerRunning={isDevServerRunning}
-        devServerInfo={devServerInfo}
-        onOpenChange={onActionsDropdownOpenChange}
-        onPull={onPull}
-        onPush={onPush}
-        onOpenInEditor={onOpenInEditor}
-        onCommit={onCommit}
-        onCreatePR={onCreatePR}
-        onDeleteWorktree={onDeleteWorktree}
-        onStartDevServer={onStartDevServer}
-        onStopDevServer={onStopDevServer}
-        onOpenDevServerUrl={onOpenDevServerUrl}
-      />
-    </div>
-  );
-}

apps/app/src/components/views/board-view/worktree-panel/hooks/index.ts

@@ -1,6 +0,0 @@
-export { useWorktrees } from "./use-worktrees";
-export { useDevServers } from "./use-dev-servers";
-export { useBranches } from "./use-branches";
-export { useWorktreeActions } from "./use-worktree-actions";
-export { useDefaultEditor } from "./use-default-editor";
-export { useRunningFeatures } from "./use-running-features";

apps/app/src/components/views/board-view/worktree-panel/hooks/use-branches.ts

@@ -1,54 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import { getElectronAPI } from "@/lib/electron";
-import type { BranchInfo } from "../types";
-
-export function useBranches() {
-  const [branches, setBranches] = useState<BranchInfo[]>([]);
-  const [aheadCount, setAheadCount] = useState(0);
-  const [behindCount, setBehindCount] = useState(0);
-  const [isLoadingBranches, setIsLoadingBranches] = useState(false);
-  const [branchFilter, setBranchFilter] = useState("");
-
-  const fetchBranches = useCallback(async (worktreePath: string) => {
-    setIsLoadingBranches(true);
-    try {
-      const api = getElectronAPI();
-      if (!api?.worktree?.listBranches) {
-        console.warn("List branches API not available");
-        return;
-      }
-      const result = await api.worktree.listBranches(worktreePath);
-      if (result.success && result.result) {
-        setBranches(result.result.branches);
-        setAheadCount(result.result.aheadCount || 0);
-        setBehindCount(result.result.behindCount || 0);
-      }
-    } catch (error) {
-      console.error("Failed to fetch branches:", error);
-    } finally {
-      setIsLoadingBranches(false);
-    }
-  }, []);
-
-  const resetBranchFilter = useCallback(() => {
-    setBranchFilter("");
-  }, []);
-
-  const filteredBranches = branches.filter((b) =>
-    b.name.toLowerCase().includes(branchFilter.toLowerCase())
-  );
-
-  return {
-    branches,
-    filteredBranches,
-    aheadCount,
-    behindCount,
-    isLoadingBranches,
-    branchFilter,
-    setBranchFilter,
-    resetBranchFilter,
-    fetchBranches,
-  };
-}

apps/app/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts

@@ -1,105 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { useAppStore } from "@/store/app-store";
-import { getElectronAPI } from "@/lib/electron";
-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 [isLoading, setIsLoading] = useState(false);
-  const [worktrees, setWorktrees] = useState<WorktreeInfo[]>([]);
-
-  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);
-
-  const fetchWorktrees = useCallback(async () => {
-    if (!projectPath) return;
-    setIsLoading(true);
-    try {
-      const api = getElectronAPI();
-      if (!api?.worktree?.listAll) {
-        console.warn("Worktree API not available");
-        return;
-      }
-      const result = await api.worktree.listAll(projectPath, true);
-      if (result.success && result.worktrees) {
-        setWorktrees(result.worktrees);
-        setWorktreesInStore(projectPath, result.worktrees);
-      }
-      // Return removed worktrees so they can be handled by the caller
-      return result.removedWorktrees;
-    } catch (error) {
-      console.error("Failed to fetch worktrees:", error);
-      return undefined;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [projectPath, setWorktreesInStore]);
-
-  useEffect(() => {
-    fetchWorktrees();
-  }, [fetchWorktrees]);
-
-  useEffect(() => {
-    if (refreshTrigger > 0) {
-      fetchWorktrees().then((removedWorktrees) => {
-        if (removedWorktrees && removedWorktrees.length > 0 && onRemovedWorktrees) {
-          onRemovedWorktrees(removedWorktrees);
-        }
-      });
-    }
-  }, [refreshTrigger, fetchWorktrees, onRemovedWorktrees]);
-
-  useEffect(() => {
-    if (worktrees.length > 0) {
-      const currentPath = currentWorktree?.path;
-      const currentWorktreeExists = currentPath === null
-        ? true
-        : worktrees.some((w) => !w.isMain && pathsEqual(w.path, currentPath));
-
-      if (currentWorktree == 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";
-        setCurrentWorktree(projectPath, null, mainBranch);
-      }
-    }
-  }, [worktrees, currentWorktree, projectPath, setCurrentWorktree]);
-
-  const handleSelectWorktree = useCallback(
-    (worktree: WorktreeInfo) => {
-      setCurrentWorktree(
-        projectPath,
-        worktree.isMain ? null : worktree.path,
-        worktree.branch
-      );
-    },
-    [projectPath, setCurrentWorktree]
-  );
-
-  const currentWorktreePath = currentWorktree?.path ?? null;
-  const selectedWorktree = currentWorktreePath
-    ? worktrees.find((w) => pathsEqual(w.path, currentWorktreePath))
-    : worktrees.find((w) => w.isMain);
-
-  return {
-    isLoading,
-    worktrees,
-    currentWorktree,
-    currentWorktreePath,
-    selectedWorktree,
-    useWorktreesEnabled,
-    fetchWorktrees,
-    handleSelectWorktree,
-  };
-}

apps/app/src/components/views/board-view/worktree-panel/worktree-panel.tsx

@@ -1,186 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { GitBranch, Plus, RefreshCw } from "lucide-react";
-import { cn, pathsEqual } from "@/lib/utils";
-import type { WorktreePanelProps, WorktreeInfo } from "./types";
-import {
-  useWorktrees,
-  useDevServers,
-  useBranches,
-  useWorktreeActions,
-  useDefaultEditor,
-  useRunningFeatures,
-} from "./hooks";
-import { WorktreeTab } from "./components";
-
-export function WorktreePanel({
-  projectPath,
-  onCreateWorktree,
-  onDeleteWorktree,
-  onCommit,
-  onCreatePR,
-  onCreateBranch,
-  onRemovedWorktrees,
-  runningFeatureIds = [],
-  features = [],
-  branchCardCounts,
-  refreshTrigger = 0,
-}: WorktreePanelProps) {
-  const {
-    isLoading,
-    worktrees,
-    currentWorktree,
-    currentWorktreePath,
-    useWorktreesEnabled,
-    fetchWorktrees,
-    handleSelectWorktree,
-  } = useWorktrees({ projectPath, refreshTrigger, onRemovedWorktrees });
-
-  const {
-    isStartingDevServer,
-    getWorktreeKey,
-    isDevServerRunning,
-    getDevServerInfo,
-    handleStartDevServer,
-    handleStopDevServer,
-    handleOpenDevServerUrl,
-  } = useDevServers({ projectPath });
-
-  const {
-    branches,
-    filteredBranches,
-    aheadCount,
-    behindCount,
-    isLoadingBranches,
-    branchFilter,
-    setBranchFilter,
-    resetBranchFilter,
-    fetchBranches,
-  } = useBranches();
-
-  const {
-    isPulling,
-    isPushing,
-    isSwitching,
-    isActivating,
-    handleSwitchBranch,
-    handlePull,
-    handlePush,
-    handleOpenInEditor,
-  } = useWorktreeActions({
-    fetchWorktrees,
-    fetchBranches,
-  });
-
-  const { defaultEditorName } = useDefaultEditor();
-
-  const { hasRunningFeatures } = useRunningFeatures({
-    runningFeatureIds,
-    features,
-  });
-
-  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);
-    }
-  };
-
-  if (!useWorktreesEnabled) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-glass/50 backdrop-blur-sm">
-      <GitBranch className="w-4 h-4 text-muted-foreground" />
-      <span className="text-sm text-muted-foreground mr-2">Branch:</span>
-
-      <div className="flex items-center gap-1 flex-wrap">
-        {worktrees.map((worktree) => {
-          const cardCount = branchCardCounts?.[worktree.branch];
-          return (
-            <WorktreeTab
-              key={worktree.path}
-              worktree={worktree}
-              cardCount={cardCount}
-              isSelected={isWorktreeSelected(worktree)}
-              isRunning={hasRunningFeatures(worktree)}
-              isActivating={isActivating}
-              isDevServerRunning={isDevServerRunning(worktree)}
-              devServerInfo={getDevServerInfo(worktree)}
-              defaultEditorName={defaultEditorName}
-              branches={branches}
-              filteredBranches={filteredBranches}
-              branchFilter={branchFilter}
-              isLoadingBranches={isLoadingBranches}
-              isSwitching={isSwitching}
-              isPulling={isPulling}
-              isPushing={isPushing}
-              isStartingDevServer={isStartingDevServer}
-              aheadCount={aheadCount}
-              behindCount={behindCount}
-              onSelectWorktree={handleSelectWorktree}
-              onBranchDropdownOpenChange={handleBranchDropdownOpenChange(worktree)}
-              onActionsDropdownOpenChange={handleActionsDropdownOpenChange(worktree)}
-              onBranchFilterChange={setBranchFilter}
-              onSwitchBranch={handleSwitchBranch}
-              onCreateBranch={onCreateBranch}
-              onPull={handlePull}
-              onPush={handlePush}
-              onOpenInEditor={handleOpenInEditor}
-              onCommit={onCommit}
-              onCreatePR={onCreatePR}
-              onDeleteWorktree={onDeleteWorktree}
-              onStartDevServer={handleStartDevServer}
-              onStopDevServer={handleStopDevServer}
-              onOpenDevServerUrl={handleOpenDevServerUrl}
-            />
-          );
-        })}
-
-        <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"
-        >
-          <RefreshCw
-            className={cn("w-3.5 h-3.5", isLoading && "animate-spin")}
-          />
-        </Button>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/context-view.tsx

@@ -1,859 +0,0 @@
-"use client";
-
-import { useEffect, useState, useCallback, useMemo } from "react";
-import { useAppStore } from "@/store/app-store";
-import { getElectronAPI } from "@/lib/electron";
-import { Button } from "@/components/ui/button";
-import { HotkeyButton } from "@/components/ui/hotkey-button";
-import { Card } from "@/components/ui/card";
-import {
-  Plus,
-  RefreshCw,
-  FileText,
-  Image as ImageIcon,
-  Trash2,
-  Save,
-  Upload,
-  File,
-  X,
-  BookOpen,
-  EditIcon,
-  Eye,
-  Pencil,
-} from "lucide-react";
-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 { Markdown } from "../ui/markdown";
-
-interface ContextFile {
-  name: string;
-  type: "text" | "image";
-  content?: string;
-  path: 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 [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
-  const [renameFileName, setRenameFileName] = useState("");
-  const [newFileName, setNewFileName] = useState("");
-  const [newFileType, setNewFileType] = useState<"text" | "image">("text");
-  const [uploadedImageData, setUploadedImageData] = useState<string | null>(
-    null
-  );
-  const [newFileContent, setNewFileContent] = useState("");
-  const [isDropHovering, setIsDropHovering] = useState(false);
-  const [isPreviewMode, setIsPreviewMode] = useState(false);
-
-  // Keyboard shortcuts for this view
-  const contextShortcuts: KeyboardShortcut[] = useMemo(
-    () => [
-      {
-        key: shortcuts.addContextFile,
-        action: () => setIsAddDialogOpen(true),
-        description: "Add new context 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]);
-
-  const isMarkdownFile = (filename: string): boolean => {
-    const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
-    return ext === ".md" || ext === ".markdown";
-  };
-
-  // Determine if a file is an image based on extension
-  const isImageFile = (filename: string): boolean => {
-    const imageExtensions = [
-      ".png",
-      ".jpg",
-      ".jpeg",
-      ".gif",
-      ".webp",
-      ".svg",
-      ".bmp",
-    ];
-    const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
-    return imageExtensions.includes(ext);
-  };
-
-  // 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);
-
-      // Read directory contents
-      const result = await api.readdir(contextPath);
-      if (result.success && result.entries) {
-        const files: ContextFile[] = result.entries
-          .filter((entry) => entry.isFile)
-          .map((entry) => ({
-            name: entry.name,
-            type: isImageFile(entry.name) ? "image" : "text",
-            path: `${contextPath}/${entry.name}`,
-          }));
-        setContextFiles(files);
-      }
-    } catch (error) {
-      console.error("Failed to load context files:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [getContextPath]);
-
-  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) {
-      console.error("Failed to load file content:", error);
-    }
-  }, []);
-
-  // Select a file
-  const handleSelectFile = (file: ContextFile) => {
-    if (hasChanges) {
-      // Could add a confirmation dialog here
-    }
-    loadFileContent(file);
-    setIsPreviewMode(isMarkdownFile(file.name));
-  };
-
-  // 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) {
-      console.error("Failed to save file:", error);
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  // Handle content change
-  const handleContentChange = (value: string) => {
-    setEditedContent(value);
-    setHasChanges(true);
-  };
-
-  // Add new context file
-  const handleAddFile = async () => {
-    const contextPath = getContextPath();
-    if (!contextPath || !newFileName.trim()) return;
-
-    try {
-      const api = getElectronAPI();
-      let filename = newFileName.trim();
-
-      // Add default extension if not provided
-      if (newFileType === "text" && !filename.includes(".")) {
-        filename += ".md";
-      }
-
-      const filePath = `${contextPath}/${filename}`;
-
-      if (newFileType === "image" && uploadedImageData) {
-        // Write image data
-        await api.writeFile(filePath, uploadedImageData);
-      } else {
-        // Write text file with content (or empty if no content)
-        await api.writeFile(filePath, newFileContent);
-      }
-      
-      // Only reload files on success
-      await loadContextFiles();
-    } catch (error) {
-      console.error("Failed to add file:", error);
-      // Optionally show error toast to user here
-    } finally {
-      // Close dialog and reset state
-      setIsAddDialogOpen(false);
-      setNewFileName("");
-      setNewFileType("text");
-      setUploadedImageData(null);
-      setNewFileContent("");
-      setIsDropHovering(false);
-    }
-  };
-
-  // 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 loadContextFiles();
-    } catch (error) {
-      console.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) {
-        console.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) {
-        console.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 loadContextFiles();
-
-      // Update selected file with new name and path
-      const renamedFile: ContextFile = {
-        name: newName,
-        type: isImageFile(newName) ? "image" : "text",
-        path: newPath,
-        content: result.content,
-      };
-      setSelectedFile(renamedFile);
-    } catch (error) {
-      console.error("Failed to rename file:", error);
-    }
-  };
-
-  // Handle image upload
-  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      const base64 = event.target?.result as string;
-      setUploadedImageData(base64);
-      if (!newFileName) {
-        setNewFileName(file.name);
-      }
-    };
-    reader.readAsDataURL(file);
-  };
-
-  // Handle drag and drop for file upload
-  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length === 0) return;
-
-    const contextPath = getContextPath();
-    if (!contextPath) return;
-
-    const api = getElectronAPI();
-
-    for (const file of files) {
-      const reader = new FileReader();
-      reader.onload = async (event) => {
-        const content = event.target?.result as string;
-        const filePath = `${contextPath}/${file.name}`;
-        await api.writeFile(filePath, content);
-        await loadContextFiles();
-      };
-
-      if (isImageFile(file.name)) {
-        reader.readAsDataURL(file);
-      } else {
-        reader.readAsText(file);
-      }
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  // Handle drag and drop for .txt and .md files in the add context dialog textarea
-  const handleTextAreaDrop = async (
-    e: React.DragEvent<HTMLTextAreaElement>
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDropHovering(false);
-
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length === 0) return;
-
-    const file = files[0]; // Only handle the first file
-    const fileName = file.name.toLowerCase();
-
-    // Only accept .txt and .md files
-    if (!fileName.endsWith(".txt") && !fileName.endsWith(".md")) {
-      console.warn("Only .txt and .md files are supported for drag and drop");
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      const content = event.target?.result as string;
-      setNewFileContent(content);
-
-      // Auto-fill filename if empty
-      if (!newFileName) {
-        setNewFileName(file.name);
-      }
-    };
-    reader.readAsText(file);
-  };
-
-  const handleTextAreaDragOver = (e: React.DragEvent<HTMLTextAreaElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDropHovering(true);
-  };
-
-  const handleTextAreaDragLeave = (e: React.DragEvent<HTMLTextAreaElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDropHovering(false);
-  };
-
-  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"
-      >
-        <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="flex-1 flex flex-col overflow-hidden content-bg"
-      data-testid="context-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">
-          <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 gap-2">
-          <HotkeyButton
-            size="sm"
-            onClick={() => setIsAddDialogOpen(true)}
-            hotkey={shortcuts.addContextFile}
-            hotkeyActive={false}
-            data-testid="add-context-file"
-          >
-            <Plus className="w-4 h-4 mr-2" />
-            Add File
-          </HotkeyButton>
-        </div>
-      </div>
-
-      {/* Main content area with file list and editor */}
-      <div
-        className="flex-1 flex overflow-hidden"
-        onDrop={handleDrop}
-        onDragOver={handleDragOver}
-        data-testid="context-drop-zone"
-      >
-        {/* Left Panel - File List */}
-        <div className="w-64 border-r border-border flex flex-col overflow-hidden">
-          <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 click Add File.
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-1">
-                {contextFiles.map((file) => (
-                  <div
-                    key={file.path}
-                    className={cn(
-                      "group w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-colors",
-                      selectedFile?.path === file.path
-                        ? "bg-primary/20 text-foreground border border-primary/30"
-                        : "text-muted-foreground hover:bg-accent hover:text-foreground"
-                    )}
-                  >
-                    <button
-                      onClick={() => handleSelectFile(file)}
-                      className="flex-1 flex items-center gap-2 text-left min-w-0"
-                      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" />
-                      )}
-                      <span className="truncate text-sm">{file.name}</span>
-                    </button>
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setRenameFileName(file.name);
-                        setSelectedFile(file);
-                        setIsRenameDialogOpen(true);
-                      }}
-                      className="opacity-0 group-hover:opacity-100 p-1 hover:bg-accent rounded transition-opacity"
-                      data-testid={`rename-context-file-${file.name}`}
-                    >
-                      <Pencil className="w-3 h-3" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Right Panel - Editor/Preview */}
-        <div className="flex-1 flex flex-col overflow-hidden">
-          {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">
-                  {selectedFile.type === "image" ? (
-                    <ImageIcon className="w-4 h-4 text-muted-foreground" />
-                  ) : (
-                    <FileText className="w-4 h-4 text-muted-foreground" />
-                  )}
-                  <span className="text-sm font-medium">
-                    {selectedFile.name}
-                  </span>
-                </div>
-                <div className="flex gap-2">
-                  {selectedFile.type === "text" &&
-                    isMarkdownFile(selectedFile.name) && (
-                      <Button
-                        variant={"outline"}
-                        size="sm"
-                        onClick={() => setIsPreviewMode(!isPreviewMode)}
-                        data-testid="toggle-preview-mode"
-                      >
-                        {isPreviewMode ? (
-                          <>
-                            <EditIcon className="w-4 h-4 mr-2" />
-                            Edit
-                          </>
-                        ) : (
-                          <>
-                            <Eye className="w-4 h-4 mr-2" />
-                            Preview
-                          </>
-                        )}
-                      </Button>
-                    )}
-                  {selectedFile.type === "text" && (
-                    <Button
-                      size="sm"
-                      onClick={saveFile}
-                      disabled={!hasChanges || isSaving}
-                      data-testid="save-context-file"
-                    >
-                      <Save className="w-4 h-4 mr-2" />
-                      {isSaving ? "Saving..." : hasChanges ? "Save" : "Saved"}
-                    </Button>
-                  )}
-                  <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"
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </Button>
-                </div>
-              </div>
-
-              {/* Content area */}
-              <div className="flex-1 overflow-hidden p-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>
-
-      {/* Add File Dialog */}
-      <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-        <DialogContent
-          data-testid="add-context-dialog"
-          className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
-        >
-          <DialogHeader>
-            <DialogTitle>Add Context File</DialogTitle>
-            <DialogDescription>
-              Add a new text or image file to the context.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="flex gap-2">
-              <Button
-                variant={newFileType === "text" ? "default" : "outline"}
-                size="sm"
-                onClick={() => setNewFileType("text")}
-                data-testid="add-text-type"
-              >
-                <FileText className="w-4 h-4 mr-2" />
-                Text
-              </Button>
-              <Button
-                variant={newFileType === "image" ? "default" : "outline"}
-                size="sm"
-                onClick={() => setNewFileType("image")}
-                data-testid="add-image-type"
-              >
-                <ImageIcon className="w-4 h-4 mr-2" />
-                Image
-              </Button>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="filename">File Name</Label>
-              <Input
-                id="filename"
-                value={newFileName}
-                onChange={(e) => setNewFileName(e.target.value)}
-                placeholder={
-                  newFileType === "text" ? "context.md" : "image.png"
-                }
-                data-testid="new-file-name"
-              />
-            </div>
-
-            {newFileType === "text" && (
-              <div className="space-y-2">
-                <Label htmlFor="context-content">Context Content</Label>
-                <div
-                  className={cn(
-                    "relative rounded-lg transition-colors",
-                    isDropHovering && "ring-2 ring-primary"
-                  )}
-                >
-                  <textarea
-                    id="context-content"
-                    value={newFileContent}
-                    onChange={(e) => setNewFileContent(e.target.value)}
-                    onDrop={handleTextAreaDrop}
-                    onDragOver={handleTextAreaDragOver}
-                    onDragLeave={handleTextAreaDragLeave}
-                    placeholder="Enter context content here or drag & drop a .txt or .md file..."
-                    className={cn(
-                      "w-full h-40 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",
-                      isDropHovering && "border-primary bg-primary/10"
-                    )}
-                    spellCheck={false}
-                    data-testid="new-file-content"
-                  />
-                  {isDropHovering && (
-                    <div className="absolute inset-0 flex items-center justify-center bg-primary/20 rounded-lg pointer-events-none">
-                      <div className="flex flex-col items-center text-primary">
-                        <Upload className="w-8 h-8 mb-2" />
-                        <span className="text-sm font-medium">
-                          Drop .txt or .md file here
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  Drag & drop .txt or .md files to import their content
-                </p>
-              </div>
-            )}
-
-            {newFileType === "image" && (
-              <div className="space-y-2">
-                <Label>Upload Image</Label>
-                <div className="border-2 border-dashed border-border rounded-lg p-4 text-center">
-                  <input
-                    type="file"
-                    accept="image/*"
-                    onChange={handleImageUpload}
-                    className="hidden"
-                    id="image-upload"
-                    data-testid="image-upload-input"
-                  />
-                  <label
-                    htmlFor="image-upload"
-                    className="cursor-pointer flex flex-col items-center"
-                  >
-                    {uploadedImageData ? (
-                      <img
-                        src={uploadedImageData}
-                        alt="Preview"
-                        className="max-w-32 max-h-32 object-contain mb-2"
-                      />
-                    ) : (
-                      <Upload className="w-8 h-8 text-muted-foreground mb-2" />
-                    )}
-                    <span className="text-sm text-muted-foreground">
-                      {uploadedImageData
-                        ? "Click to change"
-                        : "Click to upload"}
-                    </span>
-                  </label>
-                </div>
-              </div>
-            )}
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setIsAddDialogOpen(false);
-                setNewFileName("");
-                setUploadedImageData(null);
-                setNewFileContent("");
-                setIsDropHovering(false);
-              }}
-            >
-              Cancel
-            </Button>
-            <HotkeyButton
-              onClick={handleAddFile}
-              disabled={
-                !newFileName.trim() ||
-                (newFileType === "image" && !uploadedImageData)
-              }
-              hotkey={{ key: "Enter", cmdCtrl: true }}
-              hotkeyActive={isAddDialogOpen}
-              data-testid="confirm-add-file"
-            >
-              Add File
-            </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>
-    </div>
-  );
-}

apps/app/src/components/views/profiles-view/components/index.ts

@@ -1,3 +0,0 @@
-export { SortableProfileCard } from "./sortable-profile-card";
-export { ProfileForm } from "./profile-form";
-export { ProfilesHeader } from "./profiles-header";

apps/app/src/components/views/profiles-view/components/profile-form.tsx

@@ -1,204 +0,0 @@
-"use client";
-
-import { useState } from "react";
-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 { Textarea } from "@/components/ui/textarea";
-import { cn, modelSupportsThinking } from "@/lib/utils";
-import { DialogFooter } from "@/components/ui/dialog";
-import { Brain } from "lucide-react";
-import { toast } from "sonner";
-import type { AIProfile, AgentModel, ThinkingLevel } from "@/store/app-store";
-import { CLAUDE_MODELS, THINKING_LEVELS, ICON_OPTIONS } from "../constants";
-import { getProviderFromModel } from "../utils";
-
-interface ProfileFormProps {
-  profile: Partial<AIProfile>;
-  onSave: (profile: Omit<AIProfile, "id">) => void;
-  onCancel: () => void;
-  isEditing: boolean;
-  hotkeyActive: boolean;
-}
-
-export function ProfileForm({
-  profile,
-  onSave,
-  onCancel,
-  isEditing,
-  hotkeyActive,
-}: ProfileFormProps) {
-  const [formData, setFormData] = useState({
-    name: profile.name || "",
-    description: profile.description || "",
-    model: profile.model || ("opus" as AgentModel),
-    thinkingLevel: profile.thinkingLevel || ("none" as ThinkingLevel),
-    icon: profile.icon || "Brain",
-  });
-
-  const provider = getProviderFromModel(formData.model);
-  const supportsThinking = modelSupportsThinking(formData.model);
-
-  const handleModelChange = (model: AgentModel) => {
-    setFormData({
-      ...formData,
-      model,
-    });
-  };
-
-  const handleSubmit = () => {
-    if (!formData.name.trim()) {
-      toast.error("Please enter a profile name");
-      return;
-    }
-
-    onSave({
-      name: formData.name.trim(),
-      description: formData.description.trim(),
-      model: formData.model,
-      thinkingLevel: supportsThinking ? formData.thinkingLevel : "none",
-      provider,
-      isBuiltIn: false,
-      icon: formData.icon,
-    });
-  };
-
-  return (
-    <>
-      <div className="overflow-y-auto flex-1 min-h-0 space-y-4 pr-3 -mr-3 pl-1">
-        {/* Name */}
-        <div className="mt-2 space-y-2">
-          <Label htmlFor="profile-name">Profile Name</Label>
-          <Input
-            id="profile-name"
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            placeholder="e.g., Heavy Task, Quick Fix"
-            data-testid="profile-name-input"
-          />
-        </div>
-
-        {/* Description */}
-        <div className="space-y-2">
-          <Label htmlFor="profile-description">Description</Label>
-          <Textarea
-            id="profile-description"
-            value={formData.description}
-            onChange={(e) =>
-              setFormData({ ...formData, description: e.target.value })
-            }
-            placeholder="Describe when to use this profile..."
-            rows={2}
-            data-testid="profile-description-input"
-          />
-        </div>
-
-        {/* Icon Selection */}
-        <div className="space-y-2">
-          <Label>Icon</Label>
-          <div className="flex gap-2 flex-wrap">
-            {ICON_OPTIONS.map(({ name, icon: Icon }) => (
-              <button
-                key={name}
-                type="button"
-                onClick={() => setFormData({ ...formData, icon: name })}
-                className={cn(
-                  "w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
-                  formData.icon === name
-                    ? "bg-primary text-primary-foreground border-primary"
-                    : "bg-background hover:bg-accent border-border"
-                )}
-                data-testid={`icon-select-${name}`}
-              >
-                <Icon className="w-5 h-5" />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Model Selection */}
-        <div className="space-y-2">
-          <Label className="flex items-center gap-2">
-            <Brain className="w-4 h-4 text-primary" />
-            Model
-          </Label>
-          <div className="flex gap-2 flex-wrap">
-            {CLAUDE_MODELS.map(({ id, label }) => (
-              <button
-                key={id}
-                type="button"
-                onClick={() => handleModelChange(id)}
-                className={cn(
-                  "flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
-                  formData.model === id
-                    ? "bg-primary text-primary-foreground border-primary"
-                    : "bg-background hover:bg-accent border-border"
-                )}
-                data-testid={`model-select-${id}`}
-              >
-                {label.replace("Claude ", "")}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Thinking Level */}
-        {supportsThinking && (
-          <div className="space-y-2">
-            <Label className="flex items-center gap-2">
-              <Brain className="w-4 h-4 text-amber-500" />
-              Thinking Level
-            </Label>
-            <div className="flex gap-2 flex-wrap">
-              {THINKING_LEVELS.map(({ id, label }) => (
-                <button
-                  key={id}
-                  type="button"
-                  onClick={() => {
-                    setFormData({ ...formData, thinkingLevel: id });
-                    if (id === "ultrathink") {
-                      toast.warning("Ultrathink uses extensive reasoning", {
-                        description:
-                          "Best for complex architecture, migrations, or deep debugging (~$0.48/task).",
-                        duration: 4000,
-                      });
-                    }
-                  }}
-                  className={cn(
-                    "flex-1 min-w-[70px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
-                    formData.thinkingLevel === id
-                      ? "bg-amber-500 text-white border-amber-400"
-                      : "bg-background hover:bg-accent border-border"
-                  )}
-                  data-testid={`thinking-select-${id}`}
-                >
-                  {label}
-                </button>
-              ))}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              Higher levels give more time to reason through complex problems.
-            </p>
-          </div>
-        )}
-      </div>
-
-      {/* Actions */}
-      <DialogFooter className="pt-4 border-t border-border mt-4 shrink-0">
-        <Button variant="ghost" onClick={onCancel}>
-          Cancel
-        </Button>
-        <HotkeyButton
-          onClick={handleSubmit}
-          hotkey={{ key: "Enter", cmdCtrl: true }}
-          hotkeyActive={hotkeyActive}
-          data-testid="save-profile-button"
-        >
-          {isEditing ? "Save Changes" : "Create Profile"}
-        </HotkeyButton>
-      </DialogFooter>
-    </>
-  );
-}
-

apps/app/src/components/views/profiles-view/constants.ts

@@ -1,49 +0,0 @@
-import {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-} from "lucide-react";
-import type { AgentModel, ThinkingLevel } from "@/store/app-store";
-
-// Icon mapping for profiles
-export const PROFILE_ICONS: Record<
-  string,
-  React.ComponentType<{ className?: string }>
-> = {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-};
-
-// Available icons for selection
-export const ICON_OPTIONS = [
-  { name: "Brain", icon: Brain },
-  { name: "Zap", icon: Zap },
-  { name: "Scale", icon: Scale },
-  { name: "Cpu", icon: Cpu },
-  { name: "Rocket", icon: Rocket },
-  { name: "Sparkles", icon: Sparkles },
-];
-
-// Model options for the form
-export const CLAUDE_MODELS: { id: AgentModel; label: string }[] = [
-  { id: "haiku", label: "Claude Haiku" },
-  { id: "sonnet", label: "Claude Sonnet" },
-  { id: "opus", label: "Claude Opus" },
-];
-
-export const THINKING_LEVELS: { id: ThinkingLevel; label: string }[] = [
-  { id: "none", label: "None" },
-  { id: "low", label: "Low" },
-  { id: "medium", label: "Medium" },
-  { id: "high", label: "High" },
-  { id: "ultrathink", label: "Ultrathink" },
-];
-
-

apps/app/src/components/views/profiles-view/utils.ts

@@ -1,8 +0,0 @@
-import type { AgentModel, ModelProvider } from "@/store/app-store";
-
-// Helper to determine provider from model
-export function getProviderFromModel(model: AgentModel): ModelProvider {
-  return "claude";
-}
-
-

apps/app/src/components/views/settings-view/ai-enhancement/ai-enhancement-section.tsx

@@ -1,91 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Sparkles } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { useAppStore } from "@/store/app-store";
-import { CLAUDE_MODELS } from "@/components/views/board-view/shared/model-constants";
-
-export function AIEnhancementSection() {
-  const { enhancementModel, setEnhancementModel } = 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-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-            <Sparkles className="w-5 h-5 text-brand-500" />
-          </div>
-          <h2 className="text-lg font-semibold text-foreground tracking-tight">AI Enhancement</h2>
-        </div>
-        <p className="text-sm text-muted-foreground/80 ml-12">
-          Choose the model used when enhancing feature descriptions.
-        </p>
-      </div>
-      <div className="p-6 space-y-4">
-        <div className="space-y-4">
-          <Label className="text-foreground font-medium">
-            Enhancement Model
-          </Label>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-            {CLAUDE_MODELS.map(({ id, label, description, badge }) => {
-              const isActive = enhancementModel === id;
-              return (
-                <button
-                  key={id}
-                  onClick={() => setEnhancementModel(id)}
-                  className={cn(
-                    "group flex flex-col items-start gap-2 px-4 py-4 rounded-xl text-left",
-                    "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={`enhancement-model-${id}`}
-                >
-                  <div className="flex items-center gap-2 w-full">
-                    <span className={cn(
-                      "font-medium text-sm",
-                      isActive ? "text-foreground" : "group-hover:text-foreground"
-                    )}>
-                      {label}
-                    </span>
-                    {badge && (
-                      <span className={cn(
-                        "ml-auto text-xs px-2 py-0.5 rounded-full",
-                        isActive
-                          ? "bg-brand-500/20 text-brand-500"
-                          : "bg-accent text-muted-foreground"
-                      )}>
-                        {badge}
-                      </span>
-                    )}
-                  </div>
-                  <span className="text-xs text-muted-foreground/80">
-                    {description}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/ai-enhancement/index.ts

@@ -1 +0,0 @@
-export { AIEnhancementSection } from "./ai-enhancement-section";

apps/app/src/components/views/settings-view/appearance/appearance-section.tsx

@@ -1,87 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Palette } from "lucide-react";
-import { themeOptions } from "@/config/theme-options";
-import { cn } from "@/lib/utils";
-import type { Theme, Project } from "../shared/types";
-
-interface AppearanceSectionProps {
-  effectiveTheme: Theme;
-  currentProject: Project | null;
-  onThemeChange: (theme: Theme) => void;
-}
-
-export function AppearanceSection({
-  effectiveTheme,
-  currentProject,
-  onThemeChange,
-}: AppearanceSectionProps) {
-  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-4">
-        <div className="space-y-4">
-          <Label className="text-foreground font-medium">
-            Theme{" "}
-            <span className="text-muted-foreground font-normal">
-              {currentProject ? `(for ${currentProject.name})` : "(Global)"}
-            </span>
-          </Label>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-            {themeOptions.map(({ value, label, Icon, testId }) => {
-              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={cn(
-                    "w-4 h-4 transition-all duration-200",
-                    isActive ? "text-brand-500" : "group-hover:text-brand-400"
-                  )} />
-                  <span>{label}</span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/cli-status/claude-cli-status.tsx

@@ -1,156 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Terminal,
-  CheckCircle2,
-  AlertCircle,
-  RefreshCw,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import type { CliStatus } from "../shared/types";
-
-interface CliStatusProps {
-  status: CliStatus | null;
-  isChecking: boolean;
-  onRefresh: () => void;
-}
-
-export function ClaudeCliStatus({
-  status,
-  isChecking,
-  onRefresh,
-}: CliStatusProps) {
-  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">
-              <Terminal 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"
-            )}
-          >
-            <RefreshCw
-              className={cn("w-4 h-4", isChecking && "animate-spin")}
-            />
-          </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>
-            {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>
-  );
-}

apps/app/src/components/views/settings-view/components/settings-header.tsx

@@ -1,37 +0,0 @@
-import { Settings } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-interface SettingsHeaderProps {
-  title?: string;
-  description?: string;
-}
-
-export function SettingsHeader({
-  title = "Settings",
-  description = "Configure your API keys and preferences",
-}: 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-8 py-6">
-        <div className="flex items-center gap-4">
-          <div className={cn(
-            "w-12 h-12 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"
-          )}>
-            <Settings className="w-6 h-6 text-white" />
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold text-foreground tracking-tight">{title}</h1>
-            <p className="text-sm text-muted-foreground/80 mt-0.5">{description}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/config/navigation.ts

@@ -1,30 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-import {
-  Key,
-  Terminal,
-  Palette,
-  Settings2,
-  Volume2,
-  FlaskConical,
-  Trash2,
-  Sparkles,
-} from "lucide-react";
-import type { SettingsViewId } from "../hooks/use-settings-view";
-
-export interface NavigationItem {
-  id: SettingsViewId;
-  label: string;
-  icon: LucideIcon;
-}
-
-// Navigation items for the settings side panel
-export const NAV_ITEMS: NavigationItem[] = [
-  { id: "api-keys", label: "API Keys", icon: Key },
-  { id: "claude", label: "Claude", icon: Terminal },
-  { id: "ai-enhancement", label: "AI Enhancement", icon: Sparkles },
-  { id: "appearance", label: "Appearance", icon: Palette },
-  { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
-  { id: "audio", label: "Audio", icon: Volume2 },
-  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
-  { id: "danger", label: "Danger Zone", icon: Trash2 },
-];

apps/app/src/components/views/settings-view/danger-zone/danger-zone-section.tsx

@@ -1,70 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Trash2, Folder, AlertTriangle } from "lucide-react";
-import { cn } from "@/lib/utils";
-import type { Project } from "../shared/types";
-
-interface DangerZoneSectionProps {
-  project: Project | null;
-  onDeleteClick: () => void;
-}
-
-export function DangerZoneSection({
-  project,
-  onDeleteClick,
-}: DangerZoneSectionProps) {
-  if (!project) return null;
-
-  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">
-          Permanently remove this project from Automaker.
-        </p>
-      </div>
-      <div className="p-6">
-        <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" />
-            Delete Project
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/app/src/components/views/settings-view/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useCliStatus } from "./use-cli-status";
-export { useSettingsView, type SettingsViewId } from "./use-settings-view";

apps/app/src/components/views/settings-view/hooks/use-cli-status.ts

@@ -1,106 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { useSetupStore } from "@/store/setup-store";
-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);
-
-  // 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) {
-          console.error("Failed to check Claude CLI status:", error);
-        }
-      }
-
-      // Check Claude auth status (re-fetch on mount to ensure persistence)
-      if (api?.setup?.getClaudeStatus) {
-        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) {
-          console.error("Failed to check Claude auth status:", error);
-        }
-      }
-    };
-
-    checkCliStatus();
-  }, [setClaudeAuthStatus]);
-
-  // Refresh Claude CLI status
-  const handleRefreshClaudeCli = useCallback(async () => {
-    setIsCheckingClaudeCli(true);
-    try {
-      const api = getElectronAPI();
-      if (api?.checkClaudeCli) {
-        const status = await api.checkClaudeCli();
-        setClaudeCliStatus(status);
-      }
-    } catch (error) {
-      console.error("Failed to refresh Claude CLI status:", error);
-    } finally {
-      setIsCheckingClaudeCli(false);
-    }
-  }, []);
-
-  return {
-    claudeCliStatus,
-    isCheckingClaudeCli,
-    handleRefreshClaudeCli,
-  };
-}

apps/app/src/components/views/setup-view.tsx

@@ -1,144 +0,0 @@
-"use client";
-
-import { useSetupStore } from "@/store/setup-store";
-import { useAppStore } from "@/store/app-store";
-import { StepIndicator } from "./setup-view/components";
-import {
-  WelcomeStep,
-  CompleteStep,
-  ClaudeSetupStep,
-  GitHubSetupStep,
-} from "./setup-view/steps";
-
-// Main Setup View
-export function SetupView() {
-  const {
-    currentStep,
-    setCurrentStep,
-    completeSetup,
-    setSkipClaudeSetup,
-  } = useSetupStore();
-  const { setCurrentView } = useAppStore();
-
-  const steps = ["welcome", "claude", "github", "complete"] as const;
-  type StepName = (typeof steps)[number];
-  const getStepName = (): StepName => {
-    if (currentStep === "claude_detect" || currentStep === "claude_auth")
-      return "claude";
-    if (currentStep === "welcome") return "welcome";
-    if (currentStep === "github") return "github";
-    return "complete";
-  };
-  const currentIndex = steps.indexOf(getStepName());
-
-  const handleNext = (from: string) => {
-    console.log(
-      "[Setup Flow] handleNext called from:",
-      from,
-      "currentStep:",
-      currentStep
-    );
-    switch (from) {
-      case "welcome":
-        console.log("[Setup Flow] Moving to claude_detect step");
-        setCurrentStep("claude_detect");
-        break;
-      case "claude":
-        console.log("[Setup Flow] Moving to github step");
-        setCurrentStep("github");
-        break;
-      case "github":
-        console.log("[Setup Flow] Moving to complete step");
-        setCurrentStep("complete");
-        break;
-    }
-  };
-
-  const handleBack = (from: string) => {
-    console.log("[Setup Flow] handleBack called from:", from);
-    switch (from) {
-      case "claude":
-        setCurrentStep("welcome");
-        break;
-      case "github":
-        setCurrentStep("claude_detect");
-        break;
-    }
-  };
-
-  const handleSkipClaude = () => {
-    console.log("[Setup Flow] Skipping Claude setup");
-    setSkipClaudeSetup(true);
-    setCurrentStep("github");
-  };
-
-  const handleSkipGithub = () => {
-    console.log("[Setup Flow] Skipping GitHub setup");
-    setCurrentStep("complete");
-  };
-
-  const handleFinish = () => {
-    console.log("[Setup Flow] handleFinish called - completing setup");
-    completeSetup();
-    console.log("[Setup Flow] Setup completed, redirecting to welcome view");
-    setCurrentView("welcome");
-  };
-
-  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">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <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">
-        <div className="p-8">
-          <div className="w-full max-w-2xl mx-auto">
-            <div className="mb-8">
-              <StepIndicator
-                currentStep={currentIndex}
-                totalSteps={steps.length}
-              />
-            </div>
-
-            <div className="py-8">
-              {currentStep === "welcome" && (
-                <WelcomeStep onNext={() => handleNext("welcome")} />
-              )}
-
-              {(currentStep === "claude_detect" ||
-                currentStep === "claude_auth") && (
-                <ClaudeSetupStep
-                  onNext={() => handleNext("claude")}
-                  onBack={() => handleBack("claude")}
-                  onSkip={handleSkipClaude}
-                />
-              )}
-
-              {currentStep === "github" && (
-                <GitHubSetupStep
-                  onNext={() => handleNext("github")}
-                  onBack={() => handleBack("github")}
-                  onSkip={handleSkipGithub}
-                />
-              )}
-
-              {currentStep === "complete" && (
-                <CompleteStep onFinish={handleFinish} />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}