feat: Add "Expand Project" for bulk AI-powered feature creation

Adds the ability to add multiple features to an existing project through
a natural language conversation with Claude, similar to how initial spec
creation works.

Features:
- New "Expand" button in header (keyboard shortcut: E)
- Full-screen chat interface for describing new features
- Claude reads existing app_spec.txt for context
- Features created directly in database after user approval
- Bulk feature creation endpoint for batch operations

New files:
- .claude/commands/expand-project.md - Claude skill for expansion
- server/services/expand_chat_session.py - Chat session service
- server/routers/expand_project.py - WebSocket endpoint
- ui/src/components/ExpandProjectChat.tsx - Chat UI
- ui/src/components/ExpandProjectModal.tsx - Modal wrapper
- ui/src/hooks/useExpandChat.ts - WebSocket hook

Modified:
- Added POST /bulk endpoint to features router
- Added FeatureBulkCreate schemas
- Integrated Expand button and modal in App.tsx

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

.claude/commands/expand-project.md

@@ -0,0 +1,241 @@
+---
+description: Expand an existing project with new features
+---
+
+# PROJECT DIRECTORY
+
+This command **requires** the project directory as an argument via `$ARGUMENTS`.
+
+**Example:** `/expand-project generations/my-app`
+
+If `$ARGUMENTS` is empty, inform the user they must provide a project path and exit.
+
+---
+
+# GOAL
+
+Help the user add new features to an existing project. You will:
+1. Understand the current project by reading its specification
+2. Discuss what NEW capabilities they want to add
+3. Create features directly in the database (no file generation needed)
+
+This is different from `/create-spec` because:
+- The project already exists with features
+- We're ADDING to it, not creating from scratch
+- Features go directly to the database
+
+---
+
+# YOUR ROLE
+
+You are the **Project Expansion Assistant** - an expert at understanding existing projects and adding new capabilities. Your job is to:
+
+1. Read and understand the existing project specification
+2. Ask about what NEW features the user wants
+3. Clarify requirements through focused conversation
+4. Create features that integrate well with existing ones
+
+**IMPORTANT:** Like create-spec, cater to all skill levels. Many users are product owners. Ask about WHAT they want, not HOW to build it.
+
+---
+
+# FIRST: Read and Understand Existing Project
+
+**Step 1:** Read the existing specification:
+- Read `$ARGUMENTS/prompts/app_spec.txt`
+
+**Step 2:** Present a summary to the user:
+
+> "I've reviewed your **[Project Name]** project. Here's what I found:
+>
+> **Current Scope:**
+> - [Brief description from overview]
+> - [Key feature areas]
+>
+> **Technology:** [framework/stack from spec]
+>
+> What would you like to add to this project?"
+
+**STOP HERE and wait for their response.**
+
+---
+
+# CONVERSATION FLOW
+
+## Phase 1: Understand Additions
+
+Start with open questions:
+
+> "Tell me about what you want to add. What new things should users be able to do?"
+
+**Follow-up questions:**
+- How does this connect to existing features?
+- Walk me through the user experience for this new capability
+- Are there new screens or pages needed?
+- What data will this create or use?
+
+**Keep asking until you understand:**
+- What the user sees
+- What actions they can take
+- What happens as a result
+- What errors could occur
+
+## Phase 2: Clarify Details
+
+For each new capability, understand:
+
+**User flows:**
+- What triggers this feature?
+- What steps does the user take?
+- What's the success state?
+- What's the error state?
+
+**Integration:**
+- Does this modify existing features?
+- Does this need new data/fields?
+- What permissions apply?
+
+**Edge cases:**
+- What validation is needed?
+- What happens with empty/invalid input?
+- What about concurrent users?
+
+## Phase 3: Derive Features
+
+**Count the testable behaviors** for additions:
+
+For each new capability, estimate features:
+- Each CRUD operation = 1 feature
+- Each UI interaction = 1 feature
+- Each validation/error case = 1 feature
+- Each visual requirement = 1 feature
+
+**Present breakdown for approval:**
+
+> "Based on what we discussed, here's my feature breakdown for the additions:
+>
+> **[New Category 1]:** ~X features
+> - [Brief description of what's covered]
+>
+> **[New Category 2]:** ~Y features
+> - [Brief description of what's covered]
+>
+> **Total: ~N new features**
+>
+> These will be added to your existing features. The agent will implement them in order. Does this look right?"
+
+**Wait for approval before creating features.**
+
+---
+
+# FEATURE CREATION
+
+Once the user approves, create features directly.
+
+**Signal that you're ready to create features by saying:**
+
+> "Great! I'll create these N features now. Each feature will include:
+> - Category
+> - Name (what's being tested)
+> - Description (how to verify it)
+> - Test steps
+>
+> Creating features..."
+
+**Then output the features in this exact JSON format (the system will parse this):**
+
+```
+<features_to_create>
+[
+  {
+    "category": "functional",
+    "name": "Brief feature name",
+    "description": "What this feature tests and how to verify it works",
+    "steps": [
+      "Step 1: Action to take",
+      "Step 2: Expected result",
+      "Step 3: Verification"
+    ]
+  },
+  {
+    "category": "style",
+    "name": "Another feature name",
+    "description": "Description of visual/style requirement",
+    "steps": [
+      "Step 1: Navigate to page",
+      "Step 2: Check visual element",
+      "Step 3: Verify styling"
+    ]
+  }
+]
+</features_to_create>
+```
+
+**CRITICAL:**
+- Wrap the JSON array in `<features_to_create>` tags exactly as shown
+- Use valid JSON (double quotes, no trailing commas)
+- Include ALL features you promised to create
+- Each feature needs: category, name, description, steps (array of strings)
+
+---
+
+# FEATURE QUALITY STANDARDS
+
+**Categories to use:**
+- `security` - Authentication, authorization, access control
+- `functional` - Core functionality, CRUD operations, workflows
+- `style` - Visual design, layout, responsive behavior
+- `navigation` - Routing, links, breadcrumbs
+- `error-handling` - Error states, validation, edge cases
+- `data` - Data integrity, persistence, relationships
+
+**Good feature names:**
+- Start with what the user does: "User can create new task"
+- Or what happens: "Login form validates email format"
+- Be specific: "Dashboard shows task count per category"
+
+**Good descriptions:**
+- Explain what's being tested
+- Include the expected behavior
+- Make it clear how to verify success
+
+**Good test steps:**
+- 2-5 steps for simple features
+- 5-10 steps for complex workflows
+- Each step is a concrete action or verification
+- Include setup, action, and verification
+
+---
+
+# AFTER FEATURE CREATION
+
+Once features are created, tell the user:
+
+> "I've created N new features for your project!
+>
+> **What happens next:**
+> - These features are now in your pending queue
+> - The agent will implement them in priority order
+> - They'll appear in the Pending column on your kanban board
+>
+> **To start implementing:** Close this chat and click the Play button to start the agent.
+>
+> Would you like to add more features, or are you done for now?"
+
+If they want to add more, go back to Phase 1.
+
+---
+
+# IMPORTANT GUIDELINES
+
+1. **Preserve existing features** - We're adding, not replacing
+2. **Integration focus** - New features should work with existing ones
+3. **Quality standards** - Same thoroughness as initial features
+4. **Incremental is fine** - Multiple expansion sessions are OK
+5. **Don't over-engineer** - Only add what the user asked for
+
+---
+
+# BEGIN
+
+Start by reading the app specification file at `$ARGUMENTS/prompts/app_spec.txt`, then greet the user with a summary of their existing project and ask what they want to add.

server/main.py

@@ -18,6 +18,7 @@ from fastapi.staticfiles import StaticFiles
 from .routers import (
     agent_router,
     assistant_chat_router,
+    expand_project_router,
     features_router,
     filesystem_router,
     projects_router,
@@ -25,6 +26,7 @@ from .routers import (
 )
 from .schemas import SetupStatus
 from .services.assistant_chat_session import cleanup_all_sessions as cleanup_assistant_sessions
+from .services.expand_chat_session import cleanup_all_expand_sessions
 from .services.process_manager import cleanup_all_managers
 from .websocket import project_websocket
 
@@ -38,9 +40,10 @@ async def lifespan(app: FastAPI):
     """Lifespan context manager for startup and shutdown."""
     # Startup
     yield
-    # Shutdown - cleanup all running agents and assistant sessions
+    # Shutdown - cleanup all running agents and sessions
     await cleanup_all_managers()
     await cleanup_assistant_sessions()
+    await cleanup_all_expand_sessions()
 
 
 # Create FastAPI app
@@ -90,6 +93,7 @@ app.include_router(projects_router)
 app.include_router(features_router)
 app.include_router(agent_router)
 app.include_router(spec_creation_router)
+app.include_router(expand_project_router)
 app.include_router(filesystem_router)
 app.include_router(assistant_chat_router)
 

server/routers/__init__.py

@@ -7,6 +7,7 @@ FastAPI routers for different API endpoints.
 
 from .agent import router as agent_router
 from .assistant_chat import router as assistant_chat_router
+from .expand_project import router as expand_project_router
 from .features import router as features_router
 from .filesystem import router as filesystem_router
 from .projects import router as projects_router
@@ -17,6 +18,7 @@ __all__ = [
     "features_router",
     "agent_router",
     "spec_creation_router",
+    "expand_project_router",
     "filesystem_router",
     "assistant_chat_router",
 ]

server/routers/expand_project.py

@@ -0,0 +1,246 @@
+"""
+Expand Project Router
+=====================
+
+WebSocket and REST endpoints for interactive project expansion with Claude.
+Allows adding multiple features to existing projects via natural language.
+"""
+
+import json
+import logging
+import re
+from pathlib import Path
+from typing import Optional
+
+from fastapi import APIRouter, HTTPException, WebSocket, WebSocketDisconnect
+from pydantic import BaseModel, ValidationError
+
+from ..schemas import ImageAttachment
+from ..services.expand_chat_session import (
+    ExpandChatSession,
+    create_expand_session,
+    get_expand_session,
+    list_expand_sessions,
+    remove_expand_session,
+)
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/expand", tags=["expand-project"])
+
+# Root directory
+ROOT_DIR = Path(__file__).parent.parent.parent
+
+
+def _get_project_path(project_name: str) -> Path:
+    """Get project path from registry."""
+    import sys
+    root = Path(__file__).parent.parent.parent
+    if str(root) not in sys.path:
+        sys.path.insert(0, str(root))
+
+    from registry import get_project_path
+    return get_project_path(project_name)
+
+
+def validate_project_name(name: str) -> bool:
+    """Validate project name to prevent path traversal."""
+    return bool(re.match(r'^[a-zA-Z0-9_-]{1,50}$', name))
+
+
+# ============================================================================
+# REST Endpoints
+# ============================================================================
+
+class ExpandSessionStatus(BaseModel):
+    """Status of an expansion session."""
+    project_name: str
+    is_active: bool
+    is_complete: bool
+    features_created: int
+    message_count: int
+
+
+@router.get("/sessions", response_model=list[str])
+async def list_expand_sessions_endpoint():
+    """List all active expansion sessions."""
+    return list_expand_sessions()
+
+
+@router.get("/sessions/{project_name}", response_model=ExpandSessionStatus)
+async def get_expand_session_status(project_name: str):
+    """Get status of an expansion session."""
+    if not validate_project_name(project_name):
+        raise HTTPException(status_code=400, detail="Invalid project name")
+
+    session = get_expand_session(project_name)
+    if not session:
+        raise HTTPException(status_code=404, detail="No active expansion session for this project")
+
+    return ExpandSessionStatus(
+        project_name=project_name,
+        is_active=True,
+        is_complete=session.is_complete(),
+        features_created=session.get_features_created(),
+        message_count=len(session.get_messages()),
+    )
+
+
+@router.delete("/sessions/{project_name}")
+async def cancel_expand_session(project_name: str):
+    """Cancel and remove an expansion session."""
+    if not validate_project_name(project_name):
+        raise HTTPException(status_code=400, detail="Invalid project name")
+
+    session = get_expand_session(project_name)
+    if not session:
+        raise HTTPException(status_code=404, detail="No active expansion session for this project")
+
+    await remove_expand_session(project_name)
+    return {"success": True, "message": "Expansion session cancelled"}
+
+
+# ============================================================================
+# WebSocket Endpoint
+# ============================================================================
+
+@router.websocket("/ws/{project_name}")
+async def expand_project_websocket(websocket: WebSocket, project_name: str):
+    """
+    WebSocket endpoint for interactive project expansion chat.
+
+    Message protocol:
+
+    Client -> Server:
+    - {"type": "start"} - Start the expansion session
+    - {"type": "message", "content": "..."} - Send user message
+    - {"type": "ping"} - Keep-alive ping
+
+    Server -> Client:
+    - {"type": "text", "content": "..."} - Text chunk from Claude
+    - {"type": "features_created", "count": N, "features": [...]} - Features added
+    - {"type": "expansion_complete", "total_added": N} - Session complete
+    - {"type": "response_done"} - Response complete
+    - {"type": "error", "content": "..."} - Error message
+    - {"type": "pong"} - Keep-alive pong
+    """
+    if not validate_project_name(project_name):
+        await websocket.close(code=4000, reason="Invalid project name")
+        return
+
+    # Look up project directory from registry
+    project_dir = _get_project_path(project_name)
+    if not project_dir:
+        await websocket.close(code=4004, reason="Project not found in registry")
+        return
+
+    if not project_dir.exists():
+        await websocket.close(code=4004, reason="Project directory not found")
+        return
+
+    # Verify project has app_spec.txt
+    spec_path = project_dir / "prompts" / "app_spec.txt"
+    if not spec_path.exists():
+        await websocket.close(code=4004, reason="Project has no spec. Create spec first.")
+        return
+
+    await websocket.accept()
+
+    session: Optional[ExpandChatSession] = None
+
+    try:
+        while True:
+            try:
+                # Receive message from client
+                data = await websocket.receive_text()
+                message = json.loads(data)
+                msg_type = message.get("type")
+
+                if msg_type == "ping":
+                    await websocket.send_json({"type": "pong"})
+                    continue
+
+                elif msg_type == "start":
+                    # Create and start a new expansion session
+                    session = await create_expand_session(project_name, project_dir)
+
+                    # Stream the initial greeting
+                    async for chunk in session.start():
+                        await websocket.send_json(chunk)
+
+                elif msg_type == "message":
+                    # User sent a message
+                    if not session:
+                        session = get_expand_session(project_name)
+                        if not session:
+                            await websocket.send_json({
+                                "type": "error",
+                                "content": "No active session. Send 'start' first."
+                            })
+                            continue
+
+                    user_content = message.get("content", "").strip()
+
+                    # Parse attachments if present
+                    attachments: list[ImageAttachment] = []
+                    raw_attachments = message.get("attachments", [])
+                    if raw_attachments:
+                        try:
+                            for raw_att in raw_attachments:
+                                attachments.append(ImageAttachment(**raw_att))
+                        except (ValidationError, Exception) as e:
+                            logger.warning(f"Invalid attachment data: {e}")
+                            await websocket.send_json({
+                                "type": "error",
+                                "content": f"Invalid attachment: {str(e)}"
+                            })
+                            continue
+
+                    # Allow empty content if attachments are present
+                    if not user_content and not attachments:
+                        await websocket.send_json({
+                            "type": "error",
+                            "content": "Empty message"
+                        })
+                        continue
+
+                    # Stream Claude's response
+                    async for chunk in session.send_message(user_content, attachments if attachments else None):
+                        await websocket.send_json(chunk)
+
+                elif msg_type == "done":
+                    # User is done adding features
+                    if session:
+                        await websocket.send_json({
+                            "type": "expansion_complete",
+                            "total_added": session.get_features_created()
+                        })
+
+                else:
+                    await websocket.send_json({
+                        "type": "error",
+                        "content": f"Unknown message type: {msg_type}"
+                    })
+
+            except json.JSONDecodeError:
+                await websocket.send_json({
+                    "type": "error",
+                    "content": "Invalid JSON"
+                })
+
+    except WebSocketDisconnect:
+        logger.info(f"Expand chat WebSocket disconnected for {project_name}")
+
+    except Exception as e:
+        logger.exception(f"Expand chat WebSocket error for {project_name}")
+        try:
+            await websocket.send_json({
+                "type": "error",
+                "content": f"Server error: {str(e)}"
+            })
+        except Exception:
+            pass
+
+    finally:
+        # Don't remove the session on disconnect - allow resume
+        pass

server/routers/features.py

@@ -13,6 +13,8 @@ from pathlib import Path
 from fastapi import APIRouter, HTTPException
 
 from ..schemas import (
+    FeatureBulkCreate,
+    FeatureBulkCreateResponse,
     FeatureCreate,
     FeatureListResponse,
     FeatureResponse,
@@ -295,3 +297,83 @@ async def skip_feature(project_name: str, feature_id: int):
     except Exception:
         logger.exception("Failed to skip feature")
         raise HTTPException(status_code=500, detail="Failed to skip feature")
+
+
+@router.post("/bulk", response_model=FeatureBulkCreateResponse)
+async def create_features_bulk(project_name: str, bulk: FeatureBulkCreate):
+    """
+    Create multiple features at once.
+
+    Features are assigned sequential priorities starting from:
+    - starting_priority if specified
+    - max(existing priorities) + 1 if not specified
+
+    This is useful for:
+    - Expanding a project with new features via AI
+    - Importing features from external sources
+    - Batch operations
+
+    Returns:
+        {"created": N, "features": [...]}
+    """
+    project_name = validate_project_name(project_name)
+    project_dir = _get_project_path(project_name)
+
+    if not project_dir:
+        raise HTTPException(status_code=404, detail=f"Project '{project_name}' not found in registry")
+
+    if not project_dir.exists():
+        raise HTTPException(status_code=404, detail="Project directory not found")
+
+    if not bulk.features:
+        return FeatureBulkCreateResponse(created=0, features=[])
+
+    _, Feature = _get_db_classes()
+
+    try:
+        with get_db_session(project_dir) as session:
+            # Determine starting priority
+            if bulk.starting_priority is not None:
+                current_priority = bulk.starting_priority
+            else:
+                max_priority_feature = session.query(Feature).order_by(Feature.priority.desc()).first()
+                current_priority = (max_priority_feature.priority + 1) if max_priority_feature else 1
+
+            created_features = []
+
+            for feature_data in bulk.features:
+                db_feature = Feature(
+                    priority=current_priority,
+                    category=feature_data.category,
+                    name=feature_data.name,
+                    description=feature_data.description,
+                    steps=feature_data.steps,
+                    passes=False,
+                )
+                session.add(db_feature)
+                current_priority += 1
+
+            session.commit()
+
+            # Refresh to get IDs and return responses
+            for db_feature in session.query(Feature).order_by(Feature.priority.desc()).limit(len(bulk.features)).all():
+                created_features.insert(0, feature_to_response(db_feature))
+
+            # Re-query to get the actual created features in order
+            created_features = []
+            start_priority = current_priority - len(bulk.features)
+            for db_feature in session.query(Feature).filter(
+                Feature.priority >= start_priority,
+                Feature.priority < current_priority
+            ).order_by(Feature.priority).all():
+                created_features.append(feature_to_response(db_feature))
+
+            return FeatureBulkCreateResponse(
+                created=len(created_features),
+                features=created_features
+            )
+    except HTTPException:
+        raise
+    except Exception:
+        logger.exception("Failed to bulk create features")
+        raise HTTPException(status_code=500, detail="Failed to bulk create features")

server/schemas.py

@@ -96,6 +96,18 @@ class FeatureListResponse(BaseModel):
     done: list[FeatureResponse]
 
 
+class FeatureBulkCreate(BaseModel):
+    """Request schema for bulk creating features."""
+    features: list[FeatureCreate]
+    starting_priority: int | None = None  # If None, appends after max priority
+
+
+class FeatureBulkCreateResponse(BaseModel):
+    """Response for bulk feature creation."""
+    created: int
+    features: list[FeatureResponse]
+
+
 # ============================================================================
 # Agent Schemas
 # ============================================================================

server/services/expand_chat_session.py

@@ -0,0 +1,444 @@
+"""
+Expand Chat Session
+===================
+
+Manages interactive project expansion conversation with Claude.
+Uses the expand-project.md skill to help users add features to existing projects.
+"""
+
+import json
+import logging
+import re
+import shutil
+import threading
+from datetime import datetime
+from pathlib import Path
+from typing import AsyncGenerator, Optional
+
+from claude_agent_sdk import ClaudeAgentOptions, ClaudeSDKClient
+
+from ..schemas import ImageAttachment
+
+logger = logging.getLogger(__name__)
+
+
+async def _make_multimodal_message(content_blocks: list[dict]) -> AsyncGenerator[dict, None]:
+    """
+    Create an async generator that yields a properly formatted multimodal message.
+    """
+    yield {
+        "type": "user",
+        "message": {"role": "user", "content": content_blocks},
+        "parent_tool_use_id": None,
+        "session_id": "default",
+    }
+
+
+# Root directory of the project
+ROOT_DIR = Path(__file__).parent.parent.parent
+
+
+class ExpandChatSession:
+    """
+    Manages a project expansion conversation.
+
+    Unlike SpecChatSession which writes spec files, this session:
+    1. Reads existing app_spec.txt for context
+    2. Parses feature definitions from Claude's output
+    3. Creates features via REST API
+    4. Tracks which features were created during the session
+    """
+
+    def __init__(self, project_name: str, project_dir: Path):
+        """
+        Initialize the session.
+
+        Args:
+            project_name: Name of the project being expanded
+            project_dir: Absolute path to the project directory
+        """
+        self.project_name = project_name
+        self.project_dir = project_dir
+        self.client: Optional[ClaudeSDKClient] = None
+        self.messages: list[dict] = []
+        self.complete: bool = False
+        self.created_at = datetime.now()
+        self._conversation_id: Optional[str] = None
+        self._client_entered: bool = False
+        self.features_created: int = 0
+        self.created_feature_ids: list[int] = []
+
+    async def close(self) -> None:
+        """Clean up resources and close the Claude client."""
+        if self.client and self._client_entered:
+            try:
+                await self.client.__aexit__(None, None, None)
+            except Exception as e:
+                logger.warning(f"Error closing Claude client: {e}")
+            finally:
+                self._client_entered = False
+                self.client = None
+
+    async def start(self) -> AsyncGenerator[dict, None]:
+        """
+        Initialize session and get initial greeting from Claude.
+
+        Yields message chunks as they stream in.
+        """
+        # Load the expand-project skill
+        skill_path = ROOT_DIR / ".claude" / "commands" / "expand-project.md"
+
+        if not skill_path.exists():
+            yield {
+                "type": "error",
+                "content": f"Expand project skill not found at {skill_path}"
+            }
+            return
+
+        # Verify project has existing spec
+        spec_path = self.project_dir / "prompts" / "app_spec.txt"
+        if not spec_path.exists():
+            yield {
+                "type": "error",
+                "content": "Project has no app_spec.txt. Please create it first using spec creation."
+            }
+            return
+
+        try:
+            skill_content = skill_path.read_text(encoding="utf-8")
+        except UnicodeDecodeError:
+            skill_content = skill_path.read_text(encoding="utf-8", errors="replace")
+
+        # Create security settings file
+        security_settings = {
+            "sandbox": {"enabled": False},
+            "permissions": {
+                "defaultMode": "acceptEdits",
+                "allow": [
+                    "Read(./**)",
+                    "Glob(./**)",
+                ],
+            },
+        }
+        settings_file = self.project_dir / ".claude_settings.json"
+        with open(settings_file, "w") as f:
+            json.dump(security_settings, f, indent=2)
+
+        # Replace $ARGUMENTS with absolute project path
+        project_path = str(self.project_dir.resolve())
+        system_prompt = skill_content.replace("$ARGUMENTS", project_path)
+
+        # Create Claude SDK client
+        system_cli = shutil.which("claude")
+        try:
+            self.client = ClaudeSDKClient(
+                options=ClaudeAgentOptions(
+                    model="claude-opus-4-5-20251101",
+                    cli_path=system_cli,
+                    system_prompt=system_prompt,
+                    allowed_tools=[
+                        "Read",
+                        "Glob",
+                    ],
+                    permission_mode="acceptEdits",
+                    max_turns=100,
+                    cwd=str(self.project_dir.resolve()),
+                    settings=str(settings_file.resolve()),
+                )
+            )
+            await self.client.__aenter__()
+            self._client_entered = True
+        except Exception as e:
+            logger.exception("Failed to create Claude client")
+            yield {
+                "type": "error",
+                "content": f"Failed to initialize Claude: {str(e)}"
+            }
+            return
+
+        # Start the conversation
+        try:
+            async for chunk in self._query_claude("Begin the project expansion process."):
+                yield chunk
+            yield {"type": "response_done"}
+        except Exception as e:
+            logger.exception("Failed to start expand chat")
+            yield {
+                "type": "error",
+                "content": f"Failed to start conversation: {str(e)}"
+            }
+
+    async def send_message(
+        self,
+        user_message: str,
+        attachments: list[ImageAttachment] | None = None
+    ) -> AsyncGenerator[dict, None]:
+        """
+        Send user message and stream Claude's response.
+
+        Args:
+            user_message: The user's response
+            attachments: Optional list of image attachments
+
+        Yields:
+            Message chunks of various types:
+            - {"type": "text", "content": str}
+            - {"type": "features_created", "count": N, "features": [...]}
+            - {"type": "expansion_complete", "total_added": N}
+            - {"type": "error", "content": str}
+        """
+        if not self.client:
+            yield {
+                "type": "error",
+                "content": "Session not initialized. Call start() first."
+            }
+            return
+
+        # Store the user message
+        self.messages.append({
+            "role": "user",
+            "content": user_message,
+            "has_attachments": bool(attachments),
+            "timestamp": datetime.now().isoformat()
+        })
+
+        try:
+            async for chunk in self._query_claude(user_message, attachments):
+                yield chunk
+            yield {"type": "response_done"}
+        except Exception as e:
+            logger.exception("Error during Claude query")
+            yield {
+                "type": "error",
+                "content": f"Error: {str(e)}"
+            }
+
+    async def _query_claude(
+        self,
+        message: str,
+        attachments: list[ImageAttachment] | None = None
+    ) -> AsyncGenerator[dict, None]:
+        """
+        Internal method to query Claude and stream responses.
+
+        Handles text responses and detects feature creation blocks.
+        """
+        if not self.client:
+            return
+
+        # Build the message content
+        if attachments and len(attachments) > 0:
+            content_blocks = []
+            if message:
+                content_blocks.append({"type": "text", "text": message})
+            for att in attachments:
+                content_blocks.append({
+                    "type": "image",
+                    "source": {
+                        "type": "base64",
+                        "media_type": att.mimeType,
+                        "data": att.base64Data,
+                    }
+                })
+            await self.client.query(_make_multimodal_message(content_blocks))
+            logger.info(f"Sent multimodal message with {len(attachments)} image(s)")
+        else:
+            await self.client.query(message)
+
+        # Accumulate full response to detect feature blocks
+        full_response = ""
+
+        # Stream the response
+        async for msg in self.client.receive_response():
+            msg_type = type(msg).__name__
+
+            if msg_type == "AssistantMessage" and hasattr(msg, "content"):
+                for block in msg.content:
+                    block_type = type(block).__name__
+
+                    if block_type == "TextBlock" and hasattr(block, "text"):
+                        text = block.text
+                        if text:
+                            full_response += text
+                            yield {"type": "text", "content": text}
+
+                            self.messages.append({
+                                "role": "assistant",
+                                "content": text,
+                                "timestamp": datetime.now().isoformat()
+                            })
+
+        # Check for feature creation block in full response
+        features_match = re.search(
+            r'<features_to_create>\s*(\[[\s\S]*?\])\s*</features_to_create>',
+            full_response
+        )
+
+        if features_match:
+            try:
+                features_json = features_match.group(1)
+                features_data = json.loads(features_json)
+
+                if features_data and isinstance(features_data, list):
+                    # Create features via REST API
+                    created = await self._create_features_bulk(features_data)
+
+                    if created:
+                        self.features_created += len(created)
+                        self.created_feature_ids.extend([f["id"] for f in created])
+
+                        yield {
+                            "type": "features_created",
+                            "count": len(created),
+                            "features": created
+                        }
+
+                        logger.info(f"Created {len(created)} features for {self.project_name}")
+            except json.JSONDecodeError as e:
+                logger.error(f"Failed to parse features JSON: {e}")
+                yield {
+                    "type": "error",
+                    "content": f"Failed to parse feature definitions: {str(e)}"
+                }
+            except Exception as e:
+                logger.exception("Failed to create features")
+                yield {
+                    "type": "error",
+                    "content": f"Failed to create features: {str(e)}"
+                }
+
+    async def _create_features_bulk(self, features: list[dict]) -> list[dict]:
+        """
+        Create features directly in the database.
+
+        Args:
+            features: List of feature dictionaries with category, name, description, steps
+
+        Returns:
+            List of created feature dictionaries with IDs
+        """
+        # Import database classes
+        import sys
+        root = Path(__file__).parent.parent.parent
+        if str(root) not in sys.path:
+            sys.path.insert(0, str(root))
+
+        from api.database import Feature, create_database
+
+        # Get database session
+        _, SessionLocal = create_database(self.project_dir)
+        session = SessionLocal()
+
+        try:
+            # Determine starting priority
+            max_priority_feature = session.query(Feature).order_by(Feature.priority.desc()).first()
+            current_priority = (max_priority_feature.priority + 1) if max_priority_feature else 1
+
+            created_features = []
+
+            for f in features:
+                db_feature = Feature(
+                    priority=current_priority,
+                    category=f.get("category", "functional"),
+                    name=f.get("name", "Unnamed feature"),
+                    description=f.get("description", ""),
+                    steps=f.get("steps", []),
+                    passes=False,
+                )
+                session.add(db_feature)
+                current_priority += 1
+
+            session.commit()
+
+            # Re-query to get the created features with IDs
+            start_priority = current_priority - len(features)
+            for db_feature in session.query(Feature).filter(
+                Feature.priority >= start_priority,
+                Feature.priority < current_priority
+            ).order_by(Feature.priority).all():
+                created_features.append({
+                    "id": db_feature.id,
+                    "name": db_feature.name,
+                    "category": db_feature.category,
+                })
+
+            return created_features
+
+        finally:
+            session.close()
+
+    def get_features_created(self) -> int:
+        """Get the total number of features created in this session."""
+        return self.features_created
+
+    def is_complete(self) -> bool:
+        """Check if expansion session is complete."""
+        return self.complete
+
+    def get_messages(self) -> list[dict]:
+        """Get all messages in the conversation."""
+        return self.messages.copy()
+
+
+# Session registry with thread safety
+_expand_sessions: dict[str, ExpandChatSession] = {}
+_expand_sessions_lock = threading.Lock()
+
+
+def get_expand_session(project_name: str) -> Optional[ExpandChatSession]:
+    """Get an existing expansion session for a project."""
+    with _expand_sessions_lock:
+        return _expand_sessions.get(project_name)
+
+
+async def create_expand_session(project_name: str, project_dir: Path) -> ExpandChatSession:
+    """Create a new expansion session for a project, closing any existing one."""
+    old_session: Optional[ExpandChatSession] = None
+
+    with _expand_sessions_lock:
+        old_session = _expand_sessions.pop(project_name, None)
+        session = ExpandChatSession(project_name, project_dir)
+        _expand_sessions[project_name] = session
+
+    if old_session:
+        try:
+            await old_session.close()
+        except Exception as e:
+            logger.warning(f"Error closing old expand session for {project_name}: {e}")
+
+    return session
+
+
+async def remove_expand_session(project_name: str) -> None:
+    """Remove and close an expansion session."""
+    session: Optional[ExpandChatSession] = None
+
+    with _expand_sessions_lock:
+        session = _expand_sessions.pop(project_name, None)
+
+    if session:
+        try:
+            await session.close()
+        except Exception as e:
+            logger.warning(f"Error closing expand session for {project_name}: {e}")
+
+
+def list_expand_sessions() -> list[str]:
+    """List all active expansion session project names."""
+    with _expand_sessions_lock:
+        return list(_expand_sessions.keys())
+
+
+async def cleanup_all_expand_sessions() -> None:
+    """Close all active expansion sessions. Called on server shutdown."""
+    sessions_to_close: list[ExpandChatSession] = []
+
+    with _expand_sessions_lock:
+        sessions_to_close = list(_expand_sessions.values())
+        _expand_sessions.clear()
+
+    for session in sessions_to_close:
+        try:
+            await session.close()
+        except Exception as e:
+            logger.warning(f"Error closing expand session {session.project_name}: {e}")

ui/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 import { useProjects, useFeatures, useAgentStatus } from './hooks/useProjects'
 import { useProjectWebSocket } from './hooks/useWebSocket'
 import { useFeatureSound } from './hooks/useFeatureSound'
@@ -16,7 +17,8 @@ import { DebugLogViewer } from './components/DebugLogViewer'
 import { AgentThought } from './components/AgentThought'
 import { AssistantFAB } from './components/AssistantFAB'
 import { AssistantPanel } from './components/AssistantPanel'
-import { Plus, Loader2 } from 'lucide-react'
+import { ExpandProjectModal } from './components/ExpandProjectModal'
+import { Plus, Loader2, Sparkles } from 'lucide-react'
 import type { Feature } from './lib/types'
 
 function App() {
@@ -29,12 +31,14 @@ function App() {
     }
   })
   const [showAddFeature, setShowAddFeature] = useState(false)
+  const [showExpandProject, setShowExpandProject] = useState(false)
   const [selectedFeature, setSelectedFeature] = useState<Feature | null>(null)
   const [setupComplete, setSetupComplete] = useState(true) // Start optimistic
   const [debugOpen, setDebugOpen] = useState(false)
   const [debugPanelHeight, setDebugPanelHeight] = useState(288) // Default height
   const [assistantOpen, setAssistantOpen] = useState(false)
 
+  const queryClient = useQueryClient()
   const { data: projects, isLoading: projectsLoading } = useProjects()
   const { data: features } = useFeatures(selectedProject)
   const { data: agentStatusData } = useAgentStatus(selectedProject)
@@ -87,6 +91,13 @@ function App() {
         setShowAddFeature(true)
       }
 
+      // E : Expand project with AI (when project selected and has features)
+      if ((e.key === 'e' || e.key === 'E') && selectedProject && features &&
+          (features.pending.length + features.in_progress.length + features.done.length) > 0) {
+        e.preventDefault()
+        setShowExpandProject(true)
+      }
+
       // A : Toggle assistant panel (when project selected)
       if ((e.key === 'a' || e.key === 'A') && selectedProject) {
         e.preventDefault()
@@ -95,7 +106,9 @@ function App() {
 
       // Escape : Close modals
       if (e.key === 'Escape') {
-        if (assistantOpen) {
+        if (showExpandProject) {
+          setShowExpandProject(false)
+        } else if (assistantOpen) {
           setAssistantOpen(false)
         } else if (showAddFeature) {
           setShowAddFeature(false)
@@ -109,7 +122,7 @@ function App() {
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [selectedProject, showAddFeature, selectedFeature, debugOpen, assistantOpen])
+  }, [selectedProject, showAddFeature, showExpandProject, selectedFeature, debugOpen, assistantOpen, features])
 
   // Combine WebSocket progress with feature data
   const progress = wsState.progress.total > 0 ? wsState.progress : {
@@ -160,6 +173,21 @@ function App() {
                     </kbd>
                   </button>
 
+                  {/* Expand Project - only show if project has features */}
+                  {features && (features.pending.length + features.in_progress.length + features.done.length) > 0 && (
+                    <button
+                      onClick={() => setShowExpandProject(true)}
+                      className="neo-btn bg-[var(--color-neo-progress)] text-black text-sm"
+                      title="Add multiple features via AI (Press E)"
+                    >
+                      <Sparkles size={18} />
+                      Expand
+                      <kbd className="ml-1.5 px-1.5 py-0.5 text-xs bg-black/20 rounded font-mono">
+                        E
+                      </kbd>
+                    </button>
+                  )}
+
                   <AgentControl
                     projectName={selectedProject}
                     status={wsState.agentStatus}
@@ -245,6 +273,19 @@ function App() {
         />
       )}
 
+      {/* Expand Project Modal - AI-powered bulk feature creation */}
+      {showExpandProject && selectedProject && (
+        <ExpandProjectModal
+          isOpen={showExpandProject}
+          projectName={selectedProject}
+          onClose={() => setShowExpandProject(false)}
+          onFeaturesAdded={() => {
+            // Invalidate features query to refresh the kanban board
+            queryClient.invalidateQueries({ queryKey: ['features', selectedProject] })
+          }}
+        />
+      )}
+
       {/* Debug Log Viewer - fixed to bottom */}
       {selectedProject && (
         <DebugLogViewer
@@ -256,8 +297,8 @@ function App() {
         />
       )}
 
-      {/* Assistant FAB and Panel */}
+      {/* Assistant FAB and Panel - hide FAB when expand modal is open */}
-      {selectedProject && (
+      {selectedProject && !showExpandProject && (
         <>
           <AssistantFAB
             onClick={() => setAssistantOpen(!assistantOpen)}

ui/src/components/ExpandProjectChat.tsx

@@ -0,0 +1,375 @@
+/**
+ * Expand Project Chat Component
+ *
+ * Full chat interface for interactive project expansion with Claude.
+ * Allows users to describe new features in natural language.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Send, X, CheckCircle2, AlertCircle, Wifi, WifiOff, RotateCcw, Paperclip, Plus } from 'lucide-react'
+import { useExpandChat } from '../hooks/useExpandChat'
+import { ChatMessage } from './ChatMessage'
+import { TypingIndicator } from './TypingIndicator'
+import type { ImageAttachment } from '../lib/types'
+
+// Image upload validation constants
+const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5 MB
+const ALLOWED_TYPES = ['image/jpeg', 'image/png']
+
+interface ExpandProjectChatProps {
+  projectName: string
+  onComplete: (featuresAdded: number) => void
+  onCancel: () => void
+}
+
+export function ExpandProjectChat({
+  projectName,
+  onComplete,
+  onCancel,
+}: ExpandProjectChatProps) {
+  const [input, setInput] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [pendingAttachments, setPendingAttachments] = useState<ImageAttachment[]>([])
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const {
+    messages,
+    isLoading,
+    isComplete,
+    connectionStatus,
+    featuresCreated,
+    start,
+    sendMessage,
+    disconnect,
+  } = useExpandChat({
+    projectName,
+    onComplete,
+    onError: (err) => setError(err),
+  })
+
+  // Start the chat session when component mounts
+  useEffect(() => {
+    start()
+
+    return () => {
+      disconnect()
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages, isLoading])
+
+  // Focus input when not loading
+  useEffect(() => {
+    if (!isLoading && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isLoading])
+
+  const handleSendMessage = () => {
+    const trimmed = input.trim()
+    // Allow sending if there's text OR attachments
+    if ((!trimmed && pendingAttachments.length === 0) || isLoading) return
+
+    sendMessage(trimmed, pendingAttachments.length > 0 ? pendingAttachments : undefined)
+    setInput('')
+    setPendingAttachments([]) // Clear attachments after sending
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSendMessage()
+    }
+  }
+
+  // File handling for image attachments
+  const handleFileSelect = useCallback((files: FileList | null) => {
+    if (!files) return
+
+    Array.from(files).forEach((file) => {
+      // Validate file type
+      if (!ALLOWED_TYPES.includes(file.type)) {
+        setError(`Invalid file type: ${file.name}. Only JPEG and PNG are supported.`)
+        return
+      }
+
+      // Validate file size
+      if (file.size > MAX_FILE_SIZE) {
+        setError(`File too large: ${file.name}. Maximum size is 5 MB.`)
+        return
+      }
+
+      // Read and convert to base64
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result as string
+        const base64Data = dataUrl.split(',')[1]
+
+        const attachment: ImageAttachment = {
+          id: `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+          filename: file.name,
+          mimeType: file.type as 'image/jpeg' | 'image/png',
+          base64Data,
+          previewUrl: dataUrl,
+          size: file.size,
+        }
+
+        setPendingAttachments((prev) => [...prev, attachment])
+      }
+      reader.readAsDataURL(file)
+    })
+  }, [])
+
+  const handleRemoveAttachment = useCallback((id: string) => {
+    setPendingAttachments((prev) => prev.filter((a) => a.id !== id))
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      handleFileSelect(e.dataTransfer.files)
+    },
+    [handleFileSelect]
+  )
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+  }, [])
+
+  // Connection status indicator
+  const ConnectionIndicator = () => {
+    switch (connectionStatus) {
+      case 'connected':
+        return (
+          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-done)]">
+            <Wifi size={12} />
+            Connected
+          </span>
+        )
+      case 'connecting':
+        return (
+          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-pending)]">
+            <Wifi size={12} className="animate-pulse" />
+            Connecting...
+          </span>
+        )
+      case 'error':
+        return (
+          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-danger)]">
+            <WifiOff size={12} />
+            Error
+          </span>
+        )
+      default:
+        return (
+          <span className="flex items-center gap-1 text-xs text-[var(--color-neo-text-secondary)]">
+            <WifiOff size={12} />
+            Disconnected
+          </span>
+        )
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-[var(--color-neo-bg)]">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)] bg-white">
+        <div className="flex items-center gap-3">
+          <h2 className="font-display font-bold text-lg text-[#1a1a1a]">
+            Expand Project: {projectName}
+          </h2>
+          <ConnectionIndicator />
+          {featuresCreated > 0 && (
+            <span className="flex items-center gap-1 text-sm text-[var(--color-neo-done)] font-bold">
+              <Plus size={14} />
+              {featuresCreated} added
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {isComplete && (
+            <span className="flex items-center gap-1 text-sm text-[var(--color-neo-done)] font-bold">
+              <CheckCircle2 size={16} />
+              Complete
+            </span>
+          )}
+
+          <button
+            onClick={onCancel}
+            className="neo-btn neo-btn-ghost p-2"
+            title="Close"
+          >
+            <X size={20} />
+          </button>
+        </div>
+      </div>
+
+      {/* Error banner */}
+      {error && (
+        <div className="flex items-center gap-2 p-3 bg-[var(--color-neo-danger)] text-white border-b-3 border-[var(--color-neo-border)]">
+          <AlertCircle size={16} />
+          <span className="flex-1 text-sm">{error}</span>
+          <button
+            onClick={() => setError(null)}
+            className="p-1 hover:bg-white/20 rounded"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      )}
+
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto py-4">
+        {messages.length === 0 && !isLoading && (
+          <div className="flex flex-col items-center justify-center h-full text-center p-8">
+            <div className="neo-card p-6 max-w-md">
+              <h3 className="font-display font-bold text-lg mb-2">
+                Starting Project Expansion
+              </h3>
+              <p className="text-sm text-[var(--color-neo-text-secondary)]">
+                Connecting to Claude to help you add new features to your project...
+              </p>
+              {connectionStatus === 'error' && (
+                <button
+                  onClick={start}
+                  className="neo-btn neo-btn-primary mt-4 text-sm"
+                >
+                  <RotateCcw size={14} />
+                  Retry Connection
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+
+        {messages.map((message) => (
+          <ChatMessage key={message.id} message={message} />
+        ))}
+
+        {/* Typing indicator */}
+        {isLoading && <TypingIndicator />}
+
+        {/* Scroll anchor */}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input area */}
+      {!isComplete && (
+        <div
+          className="p-4 border-t-3 border-[var(--color-neo-border)] bg-white"
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+        >
+          {/* Attachment previews */}
+          {pendingAttachments.length > 0 && (
+            <div className="flex flex-wrap gap-2 mb-3">
+              {pendingAttachments.map((attachment) => (
+                <div
+                  key={attachment.id}
+                  className="relative group border-2 border-[var(--color-neo-border)] p-1 bg-white shadow-[2px_2px_0px_rgba(0,0,0,1)]"
+                >
+                  <img
+                    src={attachment.previewUrl}
+                    alt={attachment.filename}
+                    className="w-16 h-16 object-cover"
+                  />
+                  <button
+                    onClick={() => handleRemoveAttachment(attachment.id)}
+                    className="absolute -top-2 -right-2 bg-[var(--color-neo-danger)] text-white rounded-full p-0.5 border-2 border-[var(--color-neo-border)] hover:scale-110 transition-transform"
+                    title="Remove attachment"
+                  >
+                    <X size={12} />
+                  </button>
+                  <span className="text-xs truncate block max-w-16 mt-1 text-center">
+                    {attachment.filename.length > 10
+                      ? `${attachment.filename.substring(0, 7)}...`
+                      : attachment.filename}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div className="flex gap-3">
+            {/* Hidden file input */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/jpeg,image/png"
+              multiple
+              onChange={(e) => handleFileSelect(e.target.files)}
+              className="hidden"
+            />
+
+            {/* Attach button */}
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              disabled={connectionStatus !== 'connected'}
+              className="neo-btn neo-btn-ghost p-3"
+              title="Attach image (JPEG, PNG - max 5MB)"
+            >
+              <Paperclip size={18} />
+            </button>
+
+            <input
+              ref={inputRef}
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={
+                pendingAttachments.length > 0
+                  ? 'Add a message with your image(s)...'
+                  : 'Describe the features you want to add...'
+              }
+              className="neo-input flex-1"
+              disabled={isLoading || connectionStatus !== 'connected'}
+            />
+            <button
+              onClick={handleSendMessage}
+              disabled={
+                (!input.trim() && pendingAttachments.length === 0) ||
+                isLoading ||
+                connectionStatus !== 'connected'
+              }
+              className="neo-btn neo-btn-primary px-6"
+            >
+              <Send size={18} />
+            </button>
+          </div>
+
+          {/* Help text */}
+          <p className="text-xs text-[var(--color-neo-text-secondary)] mt-2">
+            Press Enter to send. Drag & drop or click <Paperclip size={12} className="inline" /> to attach images.
+          </p>
+        </div>
+      )}
+
+      {/* Completion footer */}
+      {isComplete && (
+        <div className="p-4 border-t-3 border-[var(--color-neo-border)] bg-[var(--color-neo-done)]">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <CheckCircle2 size={20} />
+              <span className="font-bold">
+                Added {featuresCreated} new feature{featuresCreated !== 1 ? 's' : ''}!
+              </span>
+            </div>
+            <button
+              onClick={() => onComplete(featuresCreated)}
+              className="neo-btn bg-white"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

ui/src/components/ExpandProjectModal.tsx

@@ -0,0 +1,41 @@
+/**
+ * Expand Project Modal
+ *
+ * Full-screen modal wrapper for the ExpandProjectChat component.
+ * Allows users to add multiple features to an existing project via AI.
+ */
+
+import { ExpandProjectChat } from './ExpandProjectChat'
+
+interface ExpandProjectModalProps {
+  isOpen: boolean
+  projectName: string
+  onClose: () => void
+  onFeaturesAdded: () => void  // Called to refresh feature list
+}
+
+export function ExpandProjectModal({
+  isOpen,
+  projectName,
+  onClose,
+  onFeaturesAdded,
+}: ExpandProjectModalProps) {
+  if (!isOpen) return null
+
+  const handleComplete = (featuresAdded: number) => {
+    if (featuresAdded > 0) {
+      onFeaturesAdded()
+    }
+    onClose()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
+      <ExpandProjectChat
+        projectName={projectName}
+        onComplete={handleComplete}
+        onCancel={onClose}
+      />
+    </div>
+  )
+}

ui/src/hooks/useExpandChat.ts

@@ -0,0 +1,323 @@
+/**
+ * Hook for managing project expansion chat WebSocket connection
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react'
+import type { ChatMessage, ImageAttachment, ExpandChatServerMessage } from '../lib/types'
+
+type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error'
+
+interface CreatedFeature {
+  id: number
+  name: string
+  category: string
+}
+
+interface UseExpandChatOptions {
+  projectName: string
+  onComplete?: (totalAdded: number) => void
+  onError?: (error: string) => void
+}
+
+interface UseExpandChatReturn {
+  messages: ChatMessage[]
+  isLoading: boolean
+  isComplete: boolean
+  connectionStatus: ConnectionStatus
+  featuresCreated: number
+  recentFeatures: CreatedFeature[]
+  start: () => void
+  sendMessage: (content: string, attachments?: ImageAttachment[]) => void
+  disconnect: () => void
+}
+
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+}
+
+export function useExpandChat({
+  projectName,
+  onComplete,
+  onError,
+}: UseExpandChatOptions): UseExpandChatReturn {
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [isComplete, setIsComplete] = useState(false)
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('disconnected')
+  const [featuresCreated, setFeaturesCreated] = useState(0)
+  const [recentFeatures, setRecentFeatures] = useState<CreatedFeature[]>([])
+
+  const wsRef = useRef<WebSocket | null>(null)
+  const currentAssistantMessageRef = useRef<string | null>(null)
+  const reconnectAttempts = useRef(0)
+  const maxReconnectAttempts = 3
+  const pingIntervalRef = useRef<number | null>(null)
+  const reconnectTimeoutRef = useRef<number | null>(null)
+  const isCompleteRef = useRef(false)
+
+  // Keep isCompleteRef in sync with isComplete state
+  useEffect(() => {
+    isCompleteRef.current = isComplete
+  }, [isComplete])
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current)
+      }
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current)
+      }
+      if (wsRef.current) {
+        wsRef.current.close()
+      }
+    }
+  }, [])
+
+  const connect = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      return
+    }
+
+    setConnectionStatus('connecting')
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    const host = window.location.host
+    const wsUrl = `${protocol}//${host}/api/expand/ws/${encodeURIComponent(projectName)}`
+
+    const ws = new WebSocket(wsUrl)
+    wsRef.current = ws
+
+    ws.onopen = () => {
+      setConnectionStatus('connected')
+      reconnectAttempts.current = 0
+
+      // Start ping interval to keep connection alive
+      pingIntervalRef.current = window.setInterval(() => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'ping' }))
+        }
+      }, 30000)
+    }
+
+    ws.onclose = () => {
+      setConnectionStatus('disconnected')
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current)
+        pingIntervalRef.current = null
+      }
+
+      // Attempt reconnection if not intentionally closed
+      if (reconnectAttempts.current < maxReconnectAttempts && !isCompleteRef.current) {
+        reconnectAttempts.current++
+        const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.current), 10000)
+        reconnectTimeoutRef.current = window.setTimeout(connect, delay)
+      }
+    }
+
+    ws.onerror = () => {
+      setConnectionStatus('error')
+      onError?.('WebSocket connection error')
+    }
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as ExpandChatServerMessage
+
+        switch (data.type) {
+          case 'text': {
+            // Append text to current assistant message or create new one
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1]
+              if (lastMessage?.role === 'assistant' && lastMessage.isStreaming) {
+                // Append to existing streaming message
+                return [
+                  ...prev.slice(0, -1),
+                  {
+                    ...lastMessage,
+                    content: lastMessage.content + data.content,
+                  },
+                ]
+              } else {
+                // Create new assistant message
+                currentAssistantMessageRef.current = generateId()
+                return [
+                  ...prev,
+                  {
+                    id: currentAssistantMessageRef.current,
+                    role: 'assistant',
+                    content: data.content,
+                    timestamp: new Date(),
+                    isStreaming: true,
+                  },
+                ]
+              }
+            })
+            break
+          }
+
+          case 'features_created': {
+            // Features were created
+            setFeaturesCreated((prev) => prev + data.count)
+            setRecentFeatures(data.features)
+
+            // Add system message about feature creation
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: generateId(),
+                role: 'system',
+                content: `Created ${data.count} new feature${data.count !== 1 ? 's' : ''}!`,
+                timestamp: new Date(),
+              },
+            ])
+            break
+          }
+
+          case 'expansion_complete': {
+            setIsComplete(true)
+            setIsLoading(false)
+
+            // Mark current message as done
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1]
+              if (lastMessage?.role === 'assistant' && lastMessage.isStreaming) {
+                return [
+                  ...prev.slice(0, -1),
+                  { ...lastMessage, isStreaming: false },
+                ]
+              }
+              return prev
+            })
+
+            onComplete?.(data.total_added)
+            break
+          }
+
+          case 'error': {
+            setIsLoading(false)
+            onError?.(data.content)
+
+            // Add error as system message
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: generateId(),
+                role: 'system',
+                content: `Error: ${data.content}`,
+                timestamp: new Date(),
+              },
+            ])
+            break
+          }
+
+          case 'pong': {
+            // Keep-alive response, nothing to do
+            break
+          }
+
+          case 'response_done': {
+            // Response complete - hide loading indicator and mark message as done
+            setIsLoading(false)
+
+            // Mark current message as done streaming
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1]
+              if (lastMessage?.role === 'assistant' && lastMessage.isStreaming) {
+                return [
+                  ...prev.slice(0, -1),
+                  { ...lastMessage, isStreaming: false },
+                ]
+              }
+              return prev
+            })
+            break
+          }
+        }
+      } catch (e) {
+        console.error('Failed to parse WebSocket message:', e)
+      }
+    }
+  }, [projectName, onComplete, onError])
+
+  const start = useCallback(() => {
+    connect()
+
+    // Wait for connection then send start message
+    const checkAndSend = () => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        setIsLoading(true)
+        wsRef.current.send(JSON.stringify({ type: 'start' }))
+      } else if (wsRef.current?.readyState === WebSocket.CONNECTING) {
+        setTimeout(checkAndSend, 100)
+      }
+    }
+
+    setTimeout(checkAndSend, 100)
+  }, [connect])
+
+  const sendMessage = useCallback((content: string, attachments?: ImageAttachment[]) => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      onError?.('Not connected')
+      return
+    }
+
+    // Add user message to chat (with attachments for display)
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: generateId(),
+        role: 'user',
+        content,
+        attachments,
+        timestamp: new Date(),
+      },
+    ])
+
+    setIsLoading(true)
+
+    // Build message payload
+    const payload: { type: string; content: string; attachments?: Array<{ filename: string; mimeType: string; base64Data: string }> } = {
+      type: 'message',
+      content,
+    }
+
+    // Add attachments if present (send base64 data, not preview URL)
+    if (attachments && attachments.length > 0) {
+      payload.attachments = attachments.map((a) => ({
+        filename: a.filename,
+        mimeType: a.mimeType,
+        base64Data: a.base64Data,
+      }))
+    }
+
+    // Send to server
+    wsRef.current.send(JSON.stringify(payload))
+  }, [onError])
+
+  const disconnect = useCallback(() => {
+    reconnectAttempts.current = maxReconnectAttempts // Prevent reconnection
+    if (pingIntervalRef.current) {
+      clearInterval(pingIntervalRef.current)
+      pingIntervalRef.current = null
+    }
+    if (wsRef.current) {
+      wsRef.current.close()
+      wsRef.current = null
+    }
+    setConnectionStatus('disconnected')
+  }, [])
+
+  return {
+    messages,
+    isLoading,
+    isComplete,
+    connectionStatus,
+    featuresCreated,
+    recentFeatures,
+    start,
+    sendMessage,
+    disconnect,
+  }
+}

ui/src/lib/api.ts

@@ -9,6 +9,8 @@ import type {
   FeatureListResponse,
   Feature,
   FeatureCreate,
+  FeatureBulkCreate,
+  FeatureBulkCreateResponse,
   AgentStatusResponse,
   AgentActionResponse,
   SetupStatus,
@@ -111,6 +113,16 @@ export async function skipFeature(projectName: string, featureId: number): Promi
   })
 }
 
+export async function createFeaturesBulk(
+  projectName: string,
+  bulk: FeatureBulkCreate
+): Promise<FeatureBulkCreateResponse> {
+  return fetchJSON(`/projects/${encodeURIComponent(projectName)}/features/bulk`, {
+    method: 'POST',
+    body: JSON.stringify(bulk),
+  })
+}
+
 // ============================================================================
 // Agent API
 // ============================================================================

ui/src/lib/types.ts

@@ -295,3 +295,37 @@ export type AssistantChatServerMessage =
   | AssistantChatErrorMessage
   | AssistantChatConversationCreatedMessage
   | AssistantChatPongMessage
+
+// ============================================================================
+// Expand Chat Types
+// ============================================================================
+
+export interface ExpandChatFeaturesCreatedMessage {
+  type: 'features_created'
+  count: number
+  features: { id: number; name: string; category: string }[]
+}
+
+export interface ExpandChatCompleteMessage {
+  type: 'expansion_complete'
+  total_added: number
+}
+
+export type ExpandChatServerMessage =
+  | SpecChatTextMessage        // Reuse text message type
+  | ExpandChatFeaturesCreatedMessage
+  | ExpandChatCompleteMessage
+  | SpecChatErrorMessage       // Reuse error message type
+  | SpecChatPongMessage        // Reuse pong message type
+  | SpecChatResponseDoneMessage // Reuse response_done type
+
+// Bulk feature creation
+export interface FeatureBulkCreate {
+  features: FeatureCreate[]
+  starting_priority?: number
+}
+
+export interface FeatureBulkCreateResponse {
+  created: number
+  features: Feature[]
+}