chore: add dev branch policy to AGENTS.md

- Document that dev is the default working branch
- main is reserved for stable/production merges only

AGENTS.md

@@ -4,10 +4,6 @@
 
 OpenSpec is the source of truth. Superpowers is the default workflow. Keep changes small, scoped, and verified.
 
-## Communication
-
-All agent output, code comments, commit messages, documentation, and artifacts must be in **English** unless the user explicitly requests another language.
-
 ## Priority order
 
 1. Current user instruction
@@ -75,7 +71,6 @@ Do not:
 * Introduce new dependencies without clear justification.
 * Treat existing code as more authoritative than OpenSpec for intended behavior.
 * Decide product behavior silently when the spec is unclear.
-* Run `docker compose` commands (build, up, down, etc.) without explicit user approval and proper isolation (e.g., feature branches, separate worktrees, or staged rollouts). Docker Compose operations are deployment-level changes that can affect running services, shared volumes, and network state. Always ask first.
 
 If scope must change, propose an OpenSpec update first.
 
@@ -90,33 +85,15 @@ Before completion, report:
 
 Do not claim completion without verification evidence.
 
+## Git branch policy
+
+- **Default working branch:** `dev` — all commits and pushes target `dev` unless the user explicitly requests otherwise.
+- `main` is the stable/production branch; merge to `main` only when explicitly instructed.
+- After committing, push to `origin/dev`.
+- If `dev` does not exist locally, create it from `main` or fetch it from origin.
+
 ## Git workflow
 
-### Branching strategy
-
-For every spec change or new functionality:
-
-1. Create a new branch from `dev` with a proper prefix:
-   - `feat/` for new features (e.g., `feat/tool-workshop`)
-   - `fix/` for bug fixes (e.g., `fix/terminal-tty`)
-   - `refactor/` for refactors (e.g., `refactor/api-cleanup`)
-   - `docs/` for documentation (e.g., `docs/api-guide`)
-   - `chore/` for maintenance (e.g., `chore/update-deps`)
-2. Branch name should reference the OpenSpec change name when applicable.
-3. Do not commit directly to `main` or `dev`.
-
-### Completion and merge
-
-When implementation is complete and verified:
-
-1. Ensure all tests pass and quality gates are met.
-2. Stage all changes with `git add -A`.
-3. Create a commit with a proper conventional commit message (see below).
-4. Switch to `dev`: `git checkout dev`.
-5. Merge the feature branch: `git merge --no-ff <branch-name>`.
-6. Push to remote: `git push origin dev`.
-7. Delete the local feature branch if desired: `git branch -d <branch-name>`.
-
 ### Auto-commit on spec completion
 
 When an OpenSpec change is fully implemented and all tasks are complete:

apps/api/Dockerfile

@@ -27,7 +27,6 @@ WORKDIR /app
 RUN apt-get update && apt-get install -y --no-install-recommends \
     libpq5 \
     git \
-    openssh-client \
     netcat-openbsd \
     ca-certificates \
     curl \
@@ -50,8 +49,8 @@ ENV PATH=/root/.local/bin:$PATH
 # Copy application code
 COPY --chown=appuser:appgroup . .
 
-# Create directories for repo, instance, and workspace storage
-RUN mkdir -p /data/repos /data/instances /data/working-copies && chown -R appuser:appgroup /data
+# Create directories for repo and instance storage
+RUN mkdir -p /data/repos /data/instances && chown -R appuser:appgroup /data
 
 # Copy wait-for-db script
 COPY wait-for-db.sh /usr/local/bin/wait-for-db.sh

apps/api/src/api/__init__.py

@@ -1,6 +1,4 @@
 from src.api.auth import router as auth_router
-from src.api.events import router as events_router
-from src.api.notifications import router as notifications_router
 from src.api.users import router as users_router
 
-__all__ = ["auth_router", "events_router", "notifications_router", "users_router"]
+__all__ = ["auth_router", "users_router"]

apps/api/src/api/auth.py

@@ -48,7 +48,7 @@ async def login(next: str = "/") -> RedirectResponse:
         redirect_uri=redirect_uri,
         state=state,
     )
-    logger.debug("Auth login initiated: redirect_uri=%s, next=%s", redirect_uri, next)
+    logger.info("Auth login initiated: redirect_uri=%s, next=%s", redirect_uri, next)
     response = RedirectResponse(location)
     response.set_cookie("auth_state", state, httponly=True, samesite="lax")
     response.set_cookie("auth_next", next, httponly=True, samesite="lax")
@@ -63,7 +63,7 @@ async def callback(
     auth_next: str | None = Cookie(default="/"),
     session: AsyncSession = Depends(get_db_session),
 ) -> RedirectResponse:
-    logger.debug("Auth callback received: code=%s... state=%s", code[:10] if code else "None", state[:10] if state else "None")
+    logger.info("Auth callback received: code=%s... state=%s", code[:10] if code else "None", state[:10] if state else "None")
     
     if auth_state is None or auth_state != state:
         logger.warning("State mismatch: cookie=%s, param=%s", auth_state, state)
@@ -71,7 +71,7 @@ async def callback(
 
     settings = Settings()
     redirect_uri = f"{settings.api_base_url}/auth/callback"
-    logger.debug("Exchanging code for tokens (redirect_uri=%s)", redirect_uri)
+    logger.info("Exchanging code for tokens (redirect_uri=%s)", redirect_uri)
     
     async with httpx.AsyncClient() as client:
         try:
@@ -92,7 +92,7 @@ async def callback(
                 access_token=token_payload["access_token"],
                 client=client,
             )
-            logger.debug("User info fetched successfully")
+            logger.info("User info fetched successfully")
         except Exception as exc:
             logger.error("User info fetch failed: %s", exc)
             raise HTTPException(status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail="failed to fetch user info")
@@ -100,19 +100,19 @@ async def callback(
     authentik_id = str(user_info.get("sub", ""))
     email = str(user_info.get("email", f"{authentik_id}@authentik.local"))
     name = str(user_info.get("name", email))
-    logger.debug("User info: authentik_id=%s, email=%s, name=%s", authentik_id, email, name)
+    logger.info("User info: authentik_id=%s, email=%s, name=%s", authentik_id, email, name)
 
     try:
         user = await session.scalar(select(User).where(User.authentik_id == authentik_id))
         if user is None:
-            logger.debug("Creating new user: authentik_id=%s", authentik_id)
+            logger.info("Creating new user: authentik_id=%s", authentik_id)
             user = User(email=email, name=name, authentik_id=authentik_id, avatar_url=None)
             session.add(user)
             await session.commit()
             await session.refresh(user)
             logger.info("New user created: id=%s", user.id)
         else:
-            logger.debug("Existing user found: id=%s, updating info", user.id)
+            logger.info("Existing user found: id=%s, updating info", user.id)
             user.email = email
             user.name = name
             await session.commit()
@@ -165,20 +165,20 @@ async def me(
     session_cookie: str | None = Cookie(default=None, alias="session"),
     session: AsyncSession = Depends(get_db_session),
 ) -> dict[str, Any]:
-    logger.debug("Auth /me called, cookie present: %s", bool(session_cookie))
+    logger.info("Auth /me called, cookie present: %s", bool(session_cookie))
     
     if not session_cookie:
         logger.warning("Auth /me: missing session cookie")
         raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="missing session")
 
     settings = Settings()
-    logger.debug("Auth /me: cookie_domain=%s, cookie_secure=%s, cookie_samesite=%s", 
+    logger.info("Auth /me: cookie_domain=%s, cookie_secure=%s, cookie_samesite=%s", 
                 settings.cookie_domain, settings.cookie_secure, settings.cookie_samesite)
     
     try:
         payload = decode_session_cookie(settings=settings, cookie_value=session_cookie)
         user_id = payload["user_id"]
-        logger.debug("Auth /me: decoded session for user_id=%s", user_id)
+        logger.info("Auth /me: decoded session for user_id=%s", user_id)
     except ValueError as exc:
         logger.warning("Auth /me: invalid session: %s", exc)
         raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail=str(exc))

apps/api/src/api/instance_proxy.py

@@ -2,6 +2,7 @@
 
 import logging
 import uuid
+from typing import Any
 
 import httpx
 from fastapi import APIRouter, Depends, HTTPException, Request, Response, status

apps/api/src/logging_config.py

@@ -1,52 +1,15 @@
-"""Structured JSON logging configuration."""
-
-import json
 import logging
 import sys
 import time
 import traceback
-from collections.abc import Callable
+from typing import Callable
 
 from fastapi import Request, Response
 from starlette.middleware.base import BaseHTTPMiddleware
 
-from src.services.correlation import get_correlation_id
-
 logger = logging.getLogger(__name__)
 
 
-class CorrelationIdFilter(logging.Filter):
-    """Inject correlation_id into every log record from context var."""
-
-    def filter(self, record: logging.LogRecord) -> bool:
-        record.correlation_id = get_correlation_id()  # type: ignore[attr-defined]
-        return True
-
-
-class JSONFormatter(logging.Formatter):
-    """Emit log records as single-line JSON."""
-
-    def format(self, record: logging.LogRecord) -> str:
-        log_obj: dict = {
-            "timestamp": self.formatTime(record),
-            "level": record.levelname,
-            "logger": record.name,
-            "message": record.getMessage(),
-            "correlation_id": getattr(record, "correlation_id", None),
-        }
-        # Optional extra fields
-        for key in ("instance_id", "event_type"):
-            value = getattr(record, key, None)
-            if value is not None:
-                log_obj[key] = value
-        if record.exc_info:
-            log_obj["exception"] = self.formatException(record.exc_info)
-        return json.dumps(log_obj, default=str)
-
-    def formatTime(self, record: logging.LogRecord, datefmt: str | None = None) -> str:
-        return time.strftime("%Y-%m-%dT%H:%M:%S", time.gmtime(record.created))
-
-
 class RequestLoggingMiddleware(BaseHTTPMiddleware):
     """Log all HTTP requests with timing and status codes."""
 
@@ -54,6 +17,7 @@ class RequestLoggingMiddleware(BaseHTTPMiddleware):
         start_time = time.time()
         client_host = request.client.host if request.client else "unknown"
 
+        # Log the incoming request
         logger.info(
             "→ Request: %s %s (client: %s)",
             request.method,
@@ -65,6 +29,7 @@ class RequestLoggingMiddleware(BaseHTTPMiddleware):
             response = await call_next(request)
             duration = time.time() - start_time
 
+            # Log the response
             logger.info(
                 "← Response: %s %s → %d (%dms)",
                 request.method,
@@ -104,13 +69,15 @@ class ExceptionLoggingMiddleware(BaseHTTPMiddleware):
 
 
 def configure_logging(level: int = logging.INFO) -> None:
-    """Configure structured JSON logging for the application."""
-    formatter = JSONFormatter()
+    """Configure structured logging for the application."""
+    formatter = logging.Formatter(
+        fmt="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
+        datefmt="%Y-%m-%d %H:%M:%S",
+    )
 
     # Console handler
     console_handler = logging.StreamHandler(sys.stdout)
     console_handler.setFormatter(formatter)
-    console_handler.addFilter(CorrelationIdFilter())
 
     # Configure root logger
     root_logger = logging.getLogger()

apps/api/src/models/git_repository.py

@@ -10,7 +10,6 @@ from src.models.base import Base, TimestampMixin, UUIDPrimaryKeyMixin
 
 if TYPE_CHECKING:
     from src.models.project import Project
-    from src.models.ssh_key import SSHKey
     from src.models.user import User
 
 
@@ -19,15 +18,11 @@ class GitRepository(UUIDPrimaryKeyMixin, TimestampMixin, Base):
 
     name: Mapped[str] = mapped_column(String(255))
     path: Mapped[str] = mapped_column(String(1024))
-    project_id: Mapped[uuid.UUID | None] = mapped_column(UUID(), ForeignKey("projects.id"), nullable=True)
+    project_id: Mapped[uuid.UUID] = mapped_column(UUID(), ForeignKey("projects.id"), nullable=False)
     owner_id: Mapped[uuid.UUID] = mapped_column(UUID(), ForeignKey("users.id"), nullable=False)
     is_mirror: Mapped[bool] = mapped_column(Boolean, default=False, nullable=False)
     remote_url: Mapped[str | None] = mapped_column(String(1024), nullable=True)
     last_push: Mapped[datetime | None] = mapped_column(DateTime(timezone=True), nullable=True)
-    ssh_key_id: Mapped[uuid.UUID | None] = mapped_column(
-        UUID(), ForeignKey("ssh_keys.id"), nullable=True
-    )
 
     project: Mapped["Project"] = relationship(back_populates="repositories")
     owner: Mapped["User"] = relationship()
-    ssh_key: Mapped["SSHKey | None"] = relationship()

apps/api/src/models/tool_config.py

@@ -0,0 +1,48 @@
+import uuid
+from typing import TYPE_CHECKING
+
+from sqlalchemy import ForeignKey, JSON, String, Text
+from sqlalchemy import Uuid as UUID
+from sqlalchemy.orm import Mapped, mapped_column, relationship
+
+from src.models.base import Base, TimestampMixin, UUIDPrimaryKeyMixin
+
+if TYPE_CHECKING:
+    from src.models.project import Project
+    from src.models.tool_type import ToolType
+    from src.models.user import User
+
+
+class ToolConfig(UUIDPrimaryKeyMixin, TimestampMixin, Base):
+    __tablename__ = "tool_configs"
+
+    user_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(), ForeignKey("users.id"), nullable=False
+    )
+    tool_type_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(), ForeignKey("tool_types.id"), nullable=False
+    )
+    project_id: Mapped[uuid.UUID | None] = mapped_column(
+        UUID(), ForeignKey("projects.id"), nullable=True
+    )
+    key: Mapped[str] = mapped_column(String(255), nullable=False)
+    value: Mapped[str] = mapped_column(Text, nullable=False)
+    config_type: Mapped[str] = mapped_column(
+        String(20), nullable=False, default="env"
+    )  # "env" or "file"
+    file_path: Mapped[str | None] = mapped_column(
+        String(1024), nullable=True
+    )  # Only for file type
+    port_override: Mapped[int | None] = mapped_column(nullable=True)
+    start_command: Mapped[str | None] = mapped_column(Text, nullable=True)
+    working_directory: Mapped[str | None] = mapped_column(Text, nullable=True)
+    environment_variables: Mapped[dict | None] = mapped_column(
+        JSON, default=dict, nullable=True
+    )
+    volumes: Mapped[list[dict] | None] = mapped_column(
+        JSON, default=list, nullable=True
+    )
+
+    user: Mapped["User"] = relationship()
+    tool_type: Mapped["ToolType"] = relationship()
+    project: Mapped["Project | None"] = relationship()

apps/api/src/models/tool_type.py

@@ -8,7 +8,6 @@ from sqlalchemy.orm import Mapped, mapped_column, relationship
 from src.models.base import Base, TimestampMixin, UUIDPrimaryKeyMixin
 
 if TYPE_CHECKING:
-    from src.models.tool_definition_manifest import ToolDefinitionManifest
     from src.models.user import User
 
 
@@ -19,36 +18,23 @@ class ToolType(UUIDPrimaryKeyMixin, TimestampMixin, Base):
     display_name: Mapped[str] = mapped_column(String(255), nullable=False)
     description: Mapped[str | None] = mapped_column(Text, nullable=True)
     category: Mapped[str] = mapped_column(String(50), nullable=False, default="other")
-    interface_type: Mapped[str] = mapped_column(
-        String(20), nullable=False, default="web"
-    )
-    requires_port: Mapped[bool] = mapped_column(Boolean, default=True, nullable=False)
+    interfaces: Mapped[list[str]] = mapped_column(JSON, default=list, nullable=False)
     default_port: Mapped[int] = mapped_column(nullable=False)
     definition_type: Mapped[str] = mapped_column(
-        String(16), nullable=False, default="legacy"
-    )  # "legacy" | "manifest"
-    manifest_id: Mapped[uuid.UUID | None] = mapped_column(
-        UUID(),
-        ForeignKey("tool_definition_manifests.id"),
-        nullable=True,
-    )
+        String(20), nullable=False, default="compose"
+    )  # "compose" or "dockerfile"
     compose_template: Mapped[str | None] = mapped_column(Text, nullable=True)
     dockerfile_template: Mapped[str | None] = mapped_column(Text, nullable=True)
     build_context: Mapped[dict | None] = mapped_column(
         JSON, default=dict, nullable=True
     )
     readiness_probe: Mapped[dict | None] = mapped_column(JSON, nullable=True)
-    startup_command: Mapped[str | None] = mapped_column(Text, nullable=True)
-    required_variables: Mapped[list[str]] = mapped_column(
-        JSON, default=list, nullable=False
-    )
+    required_variables: Mapped[list[str]] = mapped_column(JSON, default=list, nullable=False)
+    is_builtin: Mapped[bool] = mapped_column(Boolean, default=False, nullable=False)
     created_by_id: Mapped[uuid.UUID | None] = mapped_column(
         UUID(),
         ForeignKey("users.id"),
         nullable=True,
     )
 
-    manifest: Mapped["ToolDefinitionManifest | None"] = relationship(
-        foreign_keys=[manifest_id],
-    )
     created_by: Mapped["User | None"] = relationship()

apps/api/src/services/docker.py

@@ -0,0 +1,484 @@
+"""Docker service for managing tool instances."""
+
+import logging
+import subprocess
+import time
+from collections import Counter
+from pathlib import Path
+from typing import Any
+
+logger = logging.getLogger(__name__)
+
+
+def sort_volumes_by_specificity(volumes: list[str]) -> list[str]:
+    """Sort volume strings so parent paths come before child paths.
+
+    Docker Compose mounts volumes in array order. A later mount at a parent
+    path hides earlier mounts at child paths. By sorting shallow paths first
+    and deep paths last, deeper (more specific) mounts overlay correctly.
+
+    Volume format: source:target or source:target:type
+
+    Args:
+        volumes: List of Docker volume mount strings.
+
+    Returns:
+        Sorted list with parent paths before child paths.
+    """
+
+    def _target_depth(vol: str) -> int:
+        parts = vol.split(":")
+        if len(parts) < 2:
+            return 0
+        target = parts[1].rstrip("/")
+        if not target or target == "/":
+            return 0
+        return target.count("/")
+
+    # Detect duplicate targets and warn
+    targets = []
+    for vol in volumes:
+        parts = vol.split(":")
+        targets.append(parts[1] if len(parts) > 1 else "")
+    dupes = [t for t, c in Counter(targets).items() if c > 1]
+    if dupes:
+        logger.warning("Duplicate mount targets detected: %s", dupes)
+
+    # Stable sort: parent paths first, child paths last
+    return sorted(volumes, key=_target_depth)
+
+
+def render_compose_template(template: str, variables: dict[str, Any]) -> str:
+    """Render a Docker Compose template with variable substitution.
+
+    Args:
+        template: The compose template string
+        variables: Dictionary of variable names to values
+
+    Returns:
+        Rendered compose file content
+    """
+    result = template
+    for key, value in variables.items():
+        placeholder = f"{{{{{key}}}}}"
+        result = result.replace(placeholder, str(value))
+    return result
+
+
+def ensure_instance_directory(instance_id: str, base_path: str | None = None) -> str:
+    """Create and return the instance directory path.
+
+    Args:
+        instance_id: Unique instance identifier
+        base_path: Base directory for all instances (defaults to Settings.instance_base_path)
+
+    Returns:
+        Absolute path to instance directory
+    """
+    if base_path is None:
+        from src.config import Settings
+
+        base_path = Settings().instance_base_path
+    instance_dir = Path(base_path) / instance_id
+    instance_dir.mkdir(parents=True, exist_ok=True)
+    return str(instance_dir.absolute())
+
+
+def write_compose_file(instance_dir: str, content: str) -> str:
+    """Write the rendered compose file to the instance directory.
+
+    Args:
+        instance_dir: Path to instance directory
+        content: Rendered compose content
+
+    Returns:
+        Path to the compose file
+    """
+    compose_path = Path(instance_dir) / "docker-compose.yml"
+    compose_path.write_text(content)
+    return str(compose_path)
+
+
+def write_env_file(instance_dir: str, env_vars: dict[str, str]) -> str:
+    """Write environment variables to a .env file.
+
+    Args:
+        instance_dir: Path to instance directory
+        env_vars: Dictionary of env var names to values
+
+    Returns:
+        Path to the env file
+    """
+    env_path = Path(instance_dir) / ".env"
+    lines = [f'{key}="{value}"' for key, value in env_vars.items()]
+    env_path.write_text("\n".join(lines) + "\n")
+    return str(env_path)
+
+
+def write_config_files(instance_dir: str, files: dict[str, str]) -> None:
+    """Write config files to the instance directory.
+
+    Args:
+        instance_dir: Path to instance directory
+        files: Dictionary of file paths (relative to instance dir) to content
+    """
+    instance_path = Path(instance_dir)
+    for file_path, content in files.items():
+        # Ensure the path is within the instance directory (security)
+        full_path = instance_path / file_path
+        try:
+            full_path.resolve().relative_to(instance_path.resolve())
+        except ValueError:
+            raise ValueError(f"File path '{file_path}' escapes instance directory")
+
+        full_path.parent.mkdir(parents=True, exist_ok=True)
+        full_path.write_text(content)
+
+
+def execute_compose_command(
+    compose_path: str, action: str, timeout: int = 60, env_file: str | None = None
+) -> tuple[int, str, str]:
+    """Execute a docker compose command.
+
+    Args:
+        compose_path: Path to docker-compose.yml
+        action: The compose action (up, down, start, stop, restart)
+        timeout: Command timeout in seconds
+        env_file: Optional path to .env file for environment variables
+
+    Returns:
+        Tuple of (returncode, stdout, stderr)
+    """
+    instance_dir = Path(compose_path).parent
+
+    cmd = ["docker", "compose", "-f", compose_path]
+
+    if env_file:
+        cmd.extend(["--env-file", env_file])
+
+    if action == "up":
+        cmd.extend(["up", "-d", "--force-recreate"])
+    elif action == "down":
+        cmd.extend(["down", "-v"])
+    elif action in ("start", "stop", "restart"):
+        cmd.append(action)
+    else:
+        raise ValueError(f"Unknown compose action: {action}")
+
+    result = subprocess.run(
+        cmd,
+        cwd=str(instance_dir),
+        capture_output=True,
+        text=True,
+        timeout=timeout,
+    )
+
+    return result.returncode, result.stdout, result.stderr
+
+
+def get_container_id(instance_name: str) -> str | None:
+    """Get the container ID for a compose service.
+
+    Uses exact name matching to avoid substring collisions with tunnel
+    containers (e.g. tunnel-code-server-... matching code-server-...).
+    Falls back to case-insensitive matching since Docker DNS is case-
+    insensitive but docker inspect is case-sensitive.
+
+    Args:
+        instance_name: The expected container name.
+
+    Returns:
+        Container ID or None if not found.
+    """
+    expected = instance_name.lower()
+
+    # Fast path: exact match via docker inspect
+    result = subprocess.run(
+        ["docker", "inspect", "-f", "{{.Id}}", expected],
+        capture_output=True,
+        text=True,
+    )
+    if result.returncode == 0 and result.stdout.strip():
+        return result.stdout.strip()
+
+    # Fallback: list all containers and do case-insensitive exact match
+    ps_result = subprocess.run(
+        ["docker", "ps", "-a", "--format", "{{.Names}}\t{{.ID}}"],
+        capture_output=True,
+        text=True,
+    )
+    if ps_result.returncode == 0:
+        for line in ps_result.stdout.strip().splitlines():
+            parts = line.split("\t")
+            if len(parts) == 2:
+                name, cid = parts
+                if name.lower() == expected:
+                    return cid
+    return None
+
+
+def get_container_name(instance_name: str) -> str | None:
+    """Get the full container name for a compose service.
+
+    Uses exact name matching via docker inspect to avoid substring collisions.
+
+    Args:
+        instance_name: The exact container name (case-insensitive for Docker).
+
+    Returns:
+        Container name or None if not found.
+    """
+    result = subprocess.run(
+        ["docker", "inspect", "-f", "{{.Name}}", instance_name.lower()],
+        capture_output=True,
+        text=True,
+    )
+    if result.returncode == 0 and result.stdout.strip():
+        return result.stdout.strip().lstrip("/")
+    return None
+
+
+def get_backend_network_name() -> str:
+    """Auto-detect the actual Docker network name for the backend network.
+
+    Docker Compose prefixes network names with the project directory name
+    (e.g. 'headquarter_backend' instead of 'backend'). We inspect the API
+    container itself to find the real network name it's connected to.
+
+    Returns:
+        The actual Docker network name, or 'backend' as fallback.
+    """
+    # Try to find the API container by its known name
+    api_container = "hq-api"
+    result = subprocess.run(
+        [
+            "docker",
+            "inspect",
+            "-f",
+            "{{range $k, $v := .NetworkSettings.Networks}}{{$k}} {{end}}",
+            api_container,
+        ],
+        capture_output=True,
+        text=True,
+    )
+    if result.returncode == 0 and result.stdout.strip():
+        networks = result.stdout.strip().split()
+        for net in networks:
+            if "backend" in net.lower():
+                return net
+        # API container is on some network — return the first one
+        return networks[0]
+    return "backend"
+
+
+def connect_container_to_network(
+    container_name: str, network_name: str | None = None
+) -> bool:
+    """Connect a Docker container to an existing network.
+
+    Args:
+        container_name: Name or ID of the container
+        network_name: Name of the Docker network. If None, auto-detects
+            from the API container's own network membership.
+
+    Returns:
+        True if successful, False otherwise
+    """
+    if network_name is None:
+        network_name = get_backend_network_name()
+    result = subprocess.run(
+        ["docker", "network", "connect", network_name, container_name],
+        capture_output=True,
+        text=True,
+    )
+    return result.returncode == 0
+
+
+def get_container_ip_on_network(
+    container_id: str, network_name: str | None = None
+) -> str | None:
+    """Get a container's IP address on a specific Docker network.
+
+    Args:
+        container_id: Docker container ID or name.
+        network_name: Network name. If None, auto-detects from the API container.
+
+    Returns:
+        IP address string, or None if the container is not on that network.
+    """
+    if network_name is None:
+        network_name = get_backend_network_name()
+    result = subprocess.run(
+        [
+            "docker",
+            "inspect",
+            "-f",
+            f"{{{{.NetworkSettings.Networks.{network_name}.IPAddress}}}}",
+            container_id,
+        ],
+        capture_output=True,
+        text=True,
+    )
+    if result.returncode == 0:
+        ip = result.stdout.strip()
+        if ip and ip != "<no value>":
+            return ip
+    return None
+
+
+def is_container_on_network(container_id: str, network_name: str | None = None) -> bool:
+    """Check whether a container is already attached to a Docker network.
+
+    Args:
+        container_id: Docker container ID or name.
+        network_name: Network name. If None, auto-detects from the API container.
+
+    Returns:
+        True if the container is on the network.
+    """
+    if network_name is None:
+        network_name = get_backend_network_name()
+    result = subprocess.run(
+        [
+            "docker",
+            "inspect",
+            "-f",
+            f"{{{{.NetworkSettings.Networks.{network_name}}}}}",
+            container_id,
+        ],
+        capture_output=True,
+        text=True,
+    )
+    return result.returncode == 0 and "<no value>" not in result.stdout
+
+
+def get_container_status(container_id: str) -> dict[str, Any]:
+    """Get the status of a Docker container.
+
+    Args:
+        container_id: Docker container ID
+
+    Returns:
+        Dict with 'status' (running, exited, restarting, not_found),
+        'exit_code' (int or None), and 'health' (health status or None)
+    """
+    result = subprocess.run(
+        [
+            "docker",
+            "inspect",
+            "-f",
+            "{{.State.Status}}|{{.State.ExitCode}}|{{if .State.Health}}{{.State.Health.Status}}{{else}}none{{end}}",
+            container_id,
+        ],
+        capture_output=True,
+        text=True,
+    )
+
+    if result.returncode != 0:
+        return {"status": "not_found", "exit_code": None, "health": None}
+
+    parts = result.stdout.strip().split("|")
+    status = parts[0] if parts else "unknown"
+    exit_code = int(parts[1]) if len(parts) > 1 and parts[1].isdigit() else None
+    health = parts[2] if len(parts) > 2 and parts[2] != "none" else None
+
+    return {"status": status, "exit_code": exit_code, "health": health}
+
+
+def wait_for_container_running(
+    container_id: str, timeout: int = 30, interval: float = 2.0
+) -> dict[str, Any]:
+    """Wait for a container to reach the running state.
+
+    Polls docker inspect until the container status is "running" or timeout.
+
+    Args:
+        container_id: Docker container ID
+        timeout: Maximum seconds to wait
+        interval: Seconds between polls
+
+    Returns:
+        Dict with 'success' (bool), 'status' (str), 'exit_code' (int or None),
+        and 'waited_seconds' (float)
+    """
+
+    start_time = time.time()
+
+    while time.time() - start_time < timeout:
+        info = get_container_status(container_id)
+
+        if info["status"] == "running":
+            return {
+                "success": True,
+                "status": "running",
+                "exit_code": None,
+                "waited_seconds": time.time() - start_time,
+            }
+
+        if info["status"] == "exited":
+            return {
+                "success": False,
+                "status": "exited",
+                "exit_code": info["exit_code"],
+                "waited_seconds": time.time() - start_time,
+            }
+
+        if info["status"] == "not_found":
+            return {
+                "success": False,
+                "status": "not_found",
+                "exit_code": None,
+                "waited_seconds": time.time() - start_time,
+            }
+
+        time.sleep(interval)
+
+    # Timeout reached
+    info = get_container_status(container_id)
+    return {
+        "success": False,
+        "status": info["status"],
+        "exit_code": info["exit_code"],
+        "waited_seconds": time.time() - start_time,
+    }
+
+
+def get_container_logs(container_id: str, tail: int = 100) -> str:
+    """Get the logs of a Docker container.
+
+    Args:
+        container_id: Docker container ID
+        tail: Number of lines to return
+
+    Returns:
+        Container logs
+    """
+    result = subprocess.run(
+        ["docker", "logs", "--tail", str(tail), container_id],
+        capture_output=True,
+        text=True,
+    )
+
+    if result.returncode == 0:
+        return result.stdout
+    return f"Failed to get logs: {result.stderr}"
+
+
+def find_free_port(start: int = 10000, end: int = 20000) -> int:
+    """Find a free TCP port in the given range.
+
+    Args:
+        start: Start of port range
+        end: End of port range
+
+    Returns:
+        Free port number
+    """
+    import socket
+
+    for port in range(start, end):
+        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+            if s.connect_ex(("localhost", port)) != 0:
+                return port
+
+    raise RuntimeError(f"No free port found in range {start}-{end}")

apps/api/src/services/docker_build.py

@@ -6,9 +6,7 @@ import subprocess
 logger = logging.getLogger(__name__)
 
 
-def build_image(
-    instance_dir: str, dockerfile: str, tag: str, build_context: dict | None = None
-) -> tuple[int, str, str]:
+def build_image(instance_dir: str, dockerfile: str, tag: str, build_context: dict | None = None) -> tuple[int, str, str]:
     """Build a Docker image from a Dockerfile.
 
     Args:
@@ -20,18 +18,13 @@ def build_image(
     Returns:
         Tuple of (returncode, stdout, stderr)
     """
+    import os
     from pathlib import Path
 
-    # Defensive: normalise any CRLF that may have crept in from manifest DB
-    # strings — Docker's legacy builder treats \r as a character after the
-    # backslash, breaking RUN continuations and producing
-    # "unknown instruction" errors.
-    dockerfile = dockerfile.replace("\r\n", "\n").replace("\r", "\n")
-
     # Write Dockerfile
     dockerfile_path = Path(instance_dir) / "Dockerfile"
-    dockerfile_path.write_text(dockerfile, newline="\n")
-    logger.debug("Wrote Dockerfile to %s (%d bytes)", dockerfile_path, len(dockerfile))
+    dockerfile_path.write_text(dockerfile)
+    logger.info("Wrote Dockerfile to %s", dockerfile_path)
 
     # Write build context files
     if build_context:
@@ -41,27 +34,19 @@ def build_image(
             try:
                 full_path.resolve().relative_to(Path(instance_dir).resolve())
             except ValueError:
-                logger.error(
-                    "Build context file path escapes instance directory: %s", file_path
-                )
-                raise ValueError(
-                    f"Build context file path '{file_path}' escapes instance directory"
-                )
-
+                logger.error("Build context file path escapes instance directory: %s", file_path)
+                raise ValueError(f"Build context file path '{file_path}' escapes instance directory")
+            
             full_path.parent.mkdir(parents=True, exist_ok=True)
-            normalized = content.replace("\r\n", "\n").replace("\r", "\n")
-            full_path.write_text(normalized, newline="\n")
-            logger.debug("Wrote build context file: %s", full_path)
+            full_path.write_text(content)
+            logger.info("Wrote build context file: %s", full_path)
 
     # Build image
-    logger.debug("Building Docker image with tag: %s", tag)
+    logger.info("Building Docker image with tag: %s", tag)
     cmd = [
-        "docker",
-        "build",
-        "-t",
-        tag,
-        "-f",
-        str(dockerfile_path),
+        "docker", "build",
+        "-t", tag,
+        "-f", str(dockerfile_path),
         instance_dir,
     ]
 
@@ -72,7 +57,7 @@ def build_image(
             text=True,
             timeout=300,  # 5 minute timeout for builds
         )
-        logger.debug("Docker build completed: returncode=%d", result.returncode)
+        logger.info("Docker build completed: returncode=%d", result.returncode)
         if result.returncode != 0:
             logger.error("Docker build failed: %s", result.stderr[:1000])
         return result.returncode, result.stdout, result.stderr

apps/api/src/utils/git_control.py

@@ -2,6 +2,7 @@
 
 import subprocess
 from dataclasses import dataclass, field
+from typing import Any
 
 
 def _run_git_command(repo_path: str, *args: str) -> str:
@@ -123,15 +124,7 @@ def create_branch(repo_path: str, name: str, base_branch: str = "HEAD") -> None:
     try:
         _run_git_command(repo_path, "rev-parse", "--verify", "HEAD^{commit}")
     except RuntimeError:
-        # No commits yet - empty repository
-        try:
-            _run_git_command(repo_path, "checkout", "--orphan", name)
-        except RuntimeError as e:
-            if "work tree" in str(e).lower():
-                # Bare repository - use symbolic-ref instead
-                _run_git_command(repo_path, "symbolic-ref", "HEAD", f"refs/heads/{name}")
-                return
-            raise
+        _run_git_command(repo_path, "checkout", "--orphan", name)
         return
 
     _run_git_command(repo_path, "branch", name, base_branch)
@@ -162,14 +155,7 @@ def checkout_branch(repo_path: str, name: str) -> None:
     Raises:
         RuntimeError: If checkout fails
     """
-    try:
-        _run_git_command(repo_path, "checkout", name)
-    except RuntimeError as e:
-        if "work tree" in str(e).lower():
-            # Bare repository - use symbolic-ref instead
-            _run_git_command(repo_path, "symbolic-ref", "HEAD", f"refs/heads/{name}")
-            return
-        raise
+    _run_git_command(repo_path, "checkout", name)
 
 
 def commit_changes(
@@ -304,10 +290,6 @@ def get_current_branch(repo_path: str) -> str:
         Current branch name
     """
     try:
-        branch = _run_git_command(repo_path, "rev-parse", "--abbrev-ref", "HEAD").strip()
-        if branch != "HEAD":
-            return branch
+        return _run_git_command(repo_path, "rev-parse", "--abbrev-ref", "HEAD").strip()
     except RuntimeError:
-        pass
-
-    return _run_git_command(repo_path, "symbolic-ref", "--short", "HEAD").strip()
+        return _run_git_command(repo_path, "symbolic-ref", "--short", "HEAD").strip()

apps/api/src/utils/git_files.py

@@ -289,37 +289,19 @@ def list_branches(repo_path: str) -> tuple[list[BranchInfo], str]:
     branches: list[BranchInfo] = []
     default_branch = "main"
 
-    # Get list of remote names to properly filter remote tracking branches
-    try:
-        remote_output = _run_git_command(repo_path, "remote")
-        remote_names = {r.strip() for r in remote_output.strip().split("\n") if r.strip()}
-    except RuntimeError:
-        remote_names = set()
-
     for line in output.strip().split("\n"):
         if not line:
             continue
 
         branch_name = line.strip()
-        
-        # Skip detached HEAD pointer
-        if branch_name == "HEAD":
-            continue
-            
-        # Skip remote tracking branches - they appear as "origin/branch-name"
-        # Check if first part is a remote name
-        if "/" in branch_name:
-            first_part = branch_name.split("/", 1)[0]
-            if first_part in remote_names:
-                # Extract just the branch name part (after "origin/")
-                branch_name = branch_name.split("/", 1)[1]
-            elif branch_name.startswith("remotes/"):
-                # Handle "remotes/origin/branch-name" format
-                parts = branch_name.split("/", 2)
-                if len(parts) >= 3:
-                    branch_name = parts[2]
-                else:
-                    continue
+        # Skip remote tracking branches (they start with remotes/)
+        if branch_name.startswith("remotes/"):
+            # Extract just the branch name part
+            parts = branch_name.split("/", 2)
+            if len(parts) >= 3:
+                branch_name = parts[2]
+            else:
+                continue
 
         # Skip duplicates
         if any(b.name == branch_name for b in branches):

apps/api/tests/conftest.py

@@ -8,14 +8,16 @@ from unittest.mock import patch
 import pytest
 import pytest_asyncio
 from fastapi.testclient import TestClient
+from sqlalchemy import create_engine, text
 from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
+from sqlalchemy.orm import sessionmaker
 
 # Set test environment BEFORE importing app modules
 os.environ["APP_ENV"] = "testing"
 os.environ["SECRET_KEY"] = "test-secret-key-for-testing-only-do-not-use-in-production"
 os.environ["DATABASE_URL"] = "sqlite+aiosqlite:///:memory:"
 
-from src.config import Settings
+from src.config import Settings, build_database_url
 from src.models.base import Base
 from src.main import app
 from src.auth.dependencies import get_db_session
@@ -45,8 +47,10 @@ def test_client() -> Generator[TestClient, None, None]:
     app.dependency_overrides[get_db_session] = override_get_db_session
     
     # Patch startup events to prevent PostgreSQL connection attempts
-    with patch("src.main.init_database") as mock_init:
+    with patch("src.main.init_database") as mock_init, \
+         patch("src.main.seed_builtin_tool_types") as mock_seed:
         mock_init.return_value = True
+        mock_seed.return_value = None
         
         try:
             with TestClient(app) as client:
@@ -57,31 +61,6 @@ def test_client() -> Generator[TestClient, None, None]:
             asyncio.run(engine.dispose())
 
 
-@pytest_asyncio.fixture
-async def db_session(test_client) -> AsyncGenerator[AsyncSession, None]:
-    """Provide an async database session for unit tests."""
-    # Get the override function from the test_client fixture
-    override_fn = app.dependency_overrides.get(get_db_session)
-    if override_fn:
-        gen = override_fn()
-        session = await gen.asend(None)
-        try:
-            yield session
-        finally:
-            await gen.aclose()
-    else:
-        # Fallback: create a new engine and session
-        engine = create_async_engine(
-            "sqlite+aiosqlite:///:memory:",
-            connect_args={"check_same_thread": False},
-        )
-        async with engine.begin() as conn:
-            await conn.run_sync(Base.metadata.create_all)
-        async with async_sessionmaker(engine, expire_on_commit=False)() as session:
-            yield session
-        await engine.dispose()
-
-
 @pytest.fixture
 def authenticated_client(test_client) -> Generator[TestClient, None, None]:
     """Provide an authenticated test client with a test user."""
@@ -131,65 +110,6 @@ def authenticated_client(test_client) -> Generator[TestClient, None, None]:
     yield test_client
 
 
-@pytest.fixture
-def test_project_and_repo(authenticated_client) -> tuple[str, str]:
-    """Create a project and repository directly in the database."""
-    import uuid
-    from src.models.project import Project
-    from src.models.git_repository import GitRepository
-    
-    project_id = uuid.uuid4()
-    repo_id = uuid.uuid4()
-    user_id = None
-    
-    # Get user ID from session
-    async def get_user_id():
-        nonlocal user_id
-        from src.auth.session import decode_session_cookie
-        settings = Settings()
-        session_cookie = authenticated_client.cookies.get("session")
-        if session_cookie:
-            session = decode_session_cookie(settings=settings, cookie_value=session_cookie)
-            if session:
-                user_id = uuid.UUID(session["user_id"])
-    
-    asyncio.run(get_user_id())
-    
-    if not user_id:
-        raise RuntimeError("Could not get user ID from authenticated client")
-    
-    async def create_project_and_repo():
-        override_fn = app.dependency_overrides.get(get_db_session)
-        if override_fn:
-            gen = override_fn()
-            session = await gen.asend(None)
-            try:
-                project = Project(
-                    id=project_id,
-                    name="test-project",
-                    description="Test project",
-                    owner_id=user_id,
-                )
-                session.add(project)
-                
-                repo = GitRepository(
-                    id=repo_id,
-                    name="test-repo",
-                    path="/tmp/test-repo",
-                    project_id=project_id,
-                    owner_id=user_id,
-                    remote_url="https://github.com/test/repo.git",
-                )
-                session.add(repo)
-                await session.commit()
-            finally:
-                await gen.aclose()
-    
-    asyncio.run(create_project_and_repo())
-    
-    return str(project_id), str(repo_id)
-
-
 @pytest.fixture
 def admin_client(test_client) -> Generator[TestClient, None, None]:
     """Provide an authenticated test client with an admin user."""

apps/api/tests/integration/test_config_folders_api.py

@@ -0,0 +1,255 @@
+import uuid
+import pytest
+from fastapi.testclient import TestClient
+
+
+@pytest.mark.integration
+class TestConfigFoldersAPI:
+    """Integration tests for config folders API."""
+
+    def test_list_config_folders_requires_authentication(self, test_client: TestClient) -> None:
+        """Test that listing config folders requires authentication."""
+        response = test_client.get("/config-folders")
+        assert response.status_code == 401
+
+    def test_list_config_folders_returns_user_folders(self, authenticated_client: TestClient) -> None:
+        """Test that authenticated users can list their folders."""
+        response = authenticated_client.get("/config-folders")
+        assert response.status_code == 200
+        data = response.json()
+        assert isinstance(data, dict)
+        assert "folders" in data
+        assert isinstance(data["folders"], list)
+
+    def test_create_config_folder_successfully(self, authenticated_client: TestClient) -> None:
+        """Test creating a config folder."""
+        response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "test-folder",
+                "description": "Test folder",
+                "mount_path": "/home/user",
+                "files": {"test.txt": "hello world"},
+            },
+        )
+        assert response.status_code == 201
+        data = response.json()
+        assert data["name"] == "test-folder"
+        assert data["mount_path"] == "/home/user"
+        assert data["files"] == {"test.txt": "hello world"}
+
+    def test_create_config_folder_duplicate_name(self, authenticated_client: TestClient) -> None:
+        """Test that duplicate folder names are rejected."""
+        # Create first folder
+        response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "duplicate-folder",
+                "mount_path": "/home/user",
+                "files": {},
+            },
+        )
+        assert response.status_code == 201
+
+        # Try to create second with same name
+        response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "duplicate-folder",
+                "mount_path": "/home/user",
+                "files": {},
+            },
+        )
+        assert response.status_code == 409
+
+    def test_create_config_folder_exceeds_size_limit(self, authenticated_client: TestClient) -> None:
+        """Test that folders exceeding 10MB are rejected."""
+        large_content = "x" * (11 * 1024 * 1024)  # 11MB
+        response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "large-folder",
+                "mount_path": "/home/user",
+                "files": {"large.txt": large_content},
+            },
+        )
+        assert response.status_code == 422
+
+    def test_create_config_folder_path_traversal_attack(self, authenticated_client: TestClient) -> None:
+        """Test that path traversal in file paths is prevented."""
+        response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "bad-folder",
+                "mount_path": "/home/user",
+                "files": {"../../../etc/passwd": "malicious"},
+            },
+        )
+        assert response.status_code == 422
+
+    def test_get_config_folder_by_id(self, authenticated_client: TestClient) -> None:
+        """Test getting a config folder by ID."""
+        # Create folder first
+        create_response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "get-test",
+                "mount_path": "/home/user",
+                "files": {},
+            },
+        )
+        folder_id = create_response.json()["id"]
+
+        # Get it back
+        response = authenticated_client.get(f"/config-folders/{folder_id}")
+        assert response.status_code == 200
+        data = response.json()
+        assert data["name"] == "get-test"
+
+    def test_get_config_folder_not_found(self, authenticated_client: TestClient) -> None:
+        """Test getting a non-existent folder."""
+        response = authenticated_client.get(f"/config-folders/{uuid.uuid4()}")
+        assert response.status_code == 404
+
+    def test_update_config_folder_successfully(self, authenticated_client: TestClient) -> None:
+        """Test updating a config folder."""
+        # Create folder first
+        create_response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "update-test",
+                "mount_path": "/home/user",
+                "files": {},
+            },
+        )
+        folder_id = create_response.json()["id"]
+
+        # Update it
+        response = authenticated_client.put(
+            f"/config-folders/{folder_id}",
+            json={
+                "name": "updated-name",
+                "mount_path": "/workspace",
+                "files": {"new.txt": "content"},
+            },
+        )
+        assert response.status_code == 200
+        data = response.json()
+        assert data["name"] == "updated-name"
+        assert data["mount_path"] == "/workspace"
+
+    def test_delete_config_folder_successfully(self, authenticated_client: TestClient) -> None:
+        """Test deleting a config folder."""
+        # Create folder first
+        create_response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "delete-test",
+                "mount_path": "/home/user",
+                "files": {},
+            },
+        )
+        folder_id = create_response.json()["id"]
+
+        # Delete it
+        response = authenticated_client.delete(f"/config-folders/{folder_id}")
+        assert response.status_code == 204
+
+        # Verify it's gone
+        get_response = authenticated_client.get(f"/config-folders/{folder_id}")
+        assert get_response.status_code == 404
+
+    def test_add_project_override_successfully(self, authenticated_client: TestClient) -> None:
+        """Test adding a project override."""
+        # Create folder first
+        create_response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "override-test",
+                "mount_path": "/home/user",
+                "files": {"global.txt": "global"},
+            },
+        )
+        folder_id = create_response.json()["id"]
+        project_id = str(uuid.uuid4())
+
+        # Add override
+        response = authenticated_client.post(
+            f"/config-folders/{folder_id}/overrides",
+            json={
+                "project_id": project_id,
+                "mount_path": "/workspace",
+                "files": {"project.txt": "project"},
+            },
+        )
+        assert response.status_code == 200
+        data = response.json()
+        assert project_id in data["project_overrides"]
+
+    def test_update_project_override_successfully(self, authenticated_client: TestClient) -> None:
+        """Test updating a project override."""
+        # Create folder with override
+        create_response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "update-override-test",
+                "mount_path": "/home/user",
+                "files": {},
+            },
+        )
+        folder_id = create_response.json()["id"]
+        project_id = str(uuid.uuid4())
+
+        # Add override
+        authenticated_client.post(
+            f"/config-folders/{folder_id}/overrides",
+            json={
+                "project_id": project_id,
+                "mount_path": "/workspace",
+                "files": {"old.txt": "old"},
+            },
+        )
+
+        # Update override
+        response = authenticated_client.put(
+            f"/config-folders/{folder_id}/overrides/{project_id}",
+            json={
+                "mount_path": "/app",
+                "files": {"new.txt": "new"},
+            },
+        )
+        assert response.status_code == 200
+        data = response.json()
+        assert data["project_overrides"][project_id]["mount_path"] == "/app"
+
+    def test_delete_project_override_successfully(self, authenticated_client: TestClient) -> None:
+        """Test deleting a project override."""
+        # Create folder with override
+        create_response = authenticated_client.post(
+            "/config-folders",
+            json={
+                "name": "delete-override-test",
+                "mount_path": "/home/user",
+                "files": {},
+            },
+        )
+        folder_id = create_response.json()["id"]
+        project_id = str(uuid.uuid4())
+
+        # Add override
+        authenticated_client.post(
+            f"/config-folders/{folder_id}/overrides",
+            json={
+                "project_id": project_id,
+                "mount_path": "/workspace",
+                "files": {},
+            },
+        )
+
+        # Delete override
+        response = authenticated_client.delete(
+            f"/config-folders/{folder_id}/overrides/{project_id}"
+        )
+        assert response.status_code == 200
+        data = response.json()
+        assert project_id not in data["project_overrides"]

apps/api/tests/integration/test_git_control.py

@@ -70,20 +70,6 @@ def test_get_current_branch_handles_unborn_main() -> None:
         assert get_current_branch(tmpdir) == "main"
 
 
-def test_create_branch_on_bare_repo_with_no_commits() -> None:
-    with tempfile.TemporaryDirectory() as tmpdir:
-        os.system(f"git init --bare {tmpdir}/bare.git >/dev/null 2>&1")
-        create_branch(f"{tmpdir}/bare.git", "main")
-        assert get_current_branch(f"{tmpdir}/bare.git") == "main"
-
-
-def test_checkout_branch_on_bare_repo_with_no_commits() -> None:
-    with tempfile.TemporaryDirectory() as tmpdir:
-        os.system(f"git init --bare {tmpdir}/bare.git >/dev/null 2>&1")
-        checkout_branch(f"{tmpdir}/bare.git", "main")
-        assert get_current_branch(f"{tmpdir}/bare.git") == "main"
-
-
 class TestBranchOperations:
     """Tests for branch management functions."""
 

apps/api/tests/integration/test_models.py

@@ -16,6 +16,7 @@ def test_base_metadata_collects_declared_tables() -> None:
 
 
 @pytest.mark.integration
+
 def test_shared_mixins_define_expected_columns() -> None:
     assert "id" in UUIDPrimaryKeyMixin.__dict__
     assert "created_at" in TimestampMixin.__dict__
@@ -23,26 +24,20 @@ def test_shared_mixins_define_expected_columns() -> None:
 
 
 @pytest.mark.integration
+
 def test_expected_tables_are_registered() -> None:
     assert set(Base.metadata.tables) == {
-        "config_profile_includes",
-        "config_profiles",
+        "refresh_tokens",
         "git_repositories",
-        "health_checks",
-        "instance_events",
-        "notifications",
         "projects",
         "ssh_keys",
-        "terminal_sessions",
-        "tool_definition_manifests",
-        "tool_instances",
-        "tool_types",
         "user_configs",
         "users",
     }
 
 
 @pytest.mark.integration
+
 def test_user_table_has_required_columns() -> None:
     columns = User.__table__.columns
 
@@ -61,6 +56,7 @@ def test_user_table_has_required_columns() -> None:
 
 
 @pytest.mark.integration
+
 def test_project_relationships_point_to_owner_and_default_ssh_key() -> None:
     owner_fk = next(iter(Project.__table__.c.owner_id.foreign_keys))
     ssh_fk = next(iter(Project.__table__.c.default_ssh_key_id.foreign_keys))
@@ -72,6 +68,7 @@ def test_project_relationships_point_to_owner_and_default_ssh_key() -> None:
 
 
 @pytest.mark.integration
+
 def test_repository_and_user_config_relationships_are_registered() -> None:
     project_fk = next(iter(GitRepository.__table__.c.project_id.foreign_keys))
     owner_fk = next(iter(GitRepository.__table__.c.owner_id.foreign_keys))
@@ -85,15 +82,33 @@ def test_repository_and_user_config_relationships_are_registered() -> None:
     assert UserConfig.user.property.mapper.class_ is User
 
 
+@pytest.mark.integration
+
+def test_refresh_token_table_has_required_columns_and_relationships() -> None:
+    columns = RefreshToken.__table__.columns
+    user_fk = next(iter(RefreshToken.__table__.c.user_id.foreign_keys))
+
+    assert set(columns.keys()) == {
+        "id",
+        "user_id",
+        "token_hash",
+        "expires_at",
+        "revoked_at",
+        "user_agent",
+        "ip_address",
+        "created_at",
+    }
+    assert columns["token_hash"].unique is True
+    assert columns["revoked_at"].nullable is True
+    assert user_fk.target_fullname == "users.id"
+    assert RefreshToken.user.property.mapper.class_ is User
+
+
 @pytest.mark.asyncio
 @pytest.mark.integration
+
 async def test_async_session_can_insert_and_load_user(db_session: AsyncSession) -> None:
-    user = User(
-        email="dev@headquarter.local",
-        name="Dev User",
-        authentik_id="dev-user",
-        avatar_url=None,
-    )
+    user = User(email="dev@headquarter.local", name="Dev User", authentik_id="dev-user", avatar_url=None)
 
     db_session.add(user)
     await db_session.commit()

apps/api/tests/integration/test_projects_api.py

@@ -3,7 +3,6 @@ from datetime import datetime, timedelta, timezone
 import asyncio
 
 import pytest
-from fastapi.testclient import TestClient
 from sqlalchemy import text
 from sqlalchemy.ext.asyncio import create_async_engine, async_sessionmaker
 

apps/api/tests/integration/test_tool_configs_api_extended.py

@@ -0,0 +1,256 @@
+import uuid
+import pytest
+from fastapi.testclient import TestClient
+
+
+@pytest.mark.integration
+class TestToolConfigsAPIExtended:
+    """Integration tests for tool configs API with new fields."""
+
+    def test_create_tool_config_with_new_fields(self, authenticated_client: TestClient) -> None:
+        """Test creating a tool config with all new fields."""
+        # Create a tool type first
+        tool_response = authenticated_client.post(
+            "/tool-types",
+            json={
+                "name": "config-test-tool",
+                "display_name": "Config Test Tool",
+                "default_port": 8080,
+                "definition_type": "compose",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
+                "required_variables": [],
+            },
+        )
+        tool_id = tool_response.json()["id"]
+
+        # Create config with new fields
+        response = authenticated_client.post(
+            "/tool-configs",
+            json={
+                "tool_type_id": tool_id,
+                "key": "ADVANCED_CONFIG",
+                "value": "test-value",
+                "config_type": "env",
+                "port_override": 9090,
+                "start_command": "python app.py",
+                "working_directory": "/app",
+                "environment_variables": {"DEBUG": "true", "LOG_LEVEL": "debug"},
+                "volumes": [
+                    {"source": "data", "target": "/data", "type": "bind"}
+                ],
+            },
+        )
+        assert response.status_code == 201
+        data = response.json()
+        assert data["key"] == "ADVANCED_CONFIG"
+        assert data["port_override"] == 9090
+        assert data["start_command"] == "python app.py"
+        assert data["working_directory"] == "/app"
+        assert data["environment_variables"] == {"DEBUG": "true", "LOG_LEVEL": "debug"}
+        assert data["volumes"] == [{"source": "data", "target": "/data", "type": "bind"}]
+
+    def test_create_tool_config_invalid_port(self, authenticated_client: TestClient) -> None:
+        """Test that invalid port numbers are rejected."""
+        # Create a tool type first
+        tool_response = authenticated_client.post(
+            "/tool-types",
+            json={
+                "name": "port-test-tool",
+                "display_name": "Port Test Tool",
+                "default_port": 8080,
+                "definition_type": "compose",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
+                "required_variables": [],
+            },
+        )
+        tool_id = tool_response.json()["id"]
+
+        # Try to create config with invalid port
+        response = authenticated_client.post(
+            "/tool-configs",
+            json={
+                "tool_type_id": tool_id,
+                "key": "BAD_PORT",
+                "value": "test",
+                "config_type": "env",
+                "port_override": 99999,
+            },
+        )
+        assert response.status_code == 422
+
+    def test_create_tool_config_invalid_volume_structure(self, authenticated_client: TestClient) -> None:
+        """Test that invalid volume structures are rejected."""
+        # Create a tool type first
+        tool_response = authenticated_client.post(
+            "/tool-types",
+            json={
+                "name": "volume-test-tool",
+                "display_name": "Volume Test Tool",
+                "default_port": 8080,
+                "definition_type": "compose",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
+                "required_variables": [],
+            },
+        )
+        tool_id = tool_response.json()["id"]
+
+        # Try to create config with invalid volume
+        response = authenticated_client.post(
+            "/tool-configs",
+            json={
+                "tool_type_id": tool_id,
+                "key": "BAD_VOLUME",
+                "value": "test",
+                "config_type": "env",
+                "volumes": [{"invalid": "structure"}],
+            },
+        )
+        assert response.status_code == 422
+
+    def test_update_tool_config_with_new_fields(self, authenticated_client: TestClient) -> None:
+        """Test updating a tool config with new fields."""
+        # Create a tool type first
+        tool_response = authenticated_client.post(
+            "/tool-types",
+            json={
+                "name": "update-config-tool",
+                "display_name": "Update Config Tool",
+                "default_port": 8080,
+                "definition_type": "compose",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
+                "required_variables": [],
+            },
+        )
+        tool_id = tool_response.json()["id"]
+
+        # Create config
+        create_response = authenticated_client.post(
+            "/tool-configs",
+            json={
+                "tool_type_id": tool_id,
+                "key": "UPDATE_TEST",
+                "value": "original",
+                "config_type": "env",
+            },
+        )
+        config_id = create_response.json()["id"]
+
+        # Update with new fields
+        response = authenticated_client.put(
+            f"/tool-configs/{config_id}",
+            json={
+                "value": "updated",
+                "port_override": 3000,
+                "start_command": "npm start",
+                "working_directory": "/workspace",
+                "environment_variables": {"NODE_ENV": "production"},
+                "volumes": [{"source": "src", "target": "/app/src", "type": "bind"}],
+            },
+        )
+        assert response.status_code == 200
+        data = response.json()
+        assert data["value"] == "updated"
+        assert data["port_override"] == 3000
+        assert data["start_command"] == "npm start"
+        assert data["working_directory"] == "/workspace"
+        assert data["environment_variables"] == {"NODE_ENV": "production"}
+
+    def test_list_tool_configs_returns_new_fields(self, authenticated_client: TestClient) -> None:
+        """Test that listing configs returns new fields."""
+        # Create a tool type first
+        tool_response = authenticated_client.post(
+            "/tool-types",
+            json={
+                "name": "list-config-tool",
+                "display_name": "List Config Tool",
+                "default_port": 8080,
+                "definition_type": "compose",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
+                "required_variables": [],
+            },
+        )
+        tool_id = tool_response.json()["id"]
+
+        # Create config with new fields
+        authenticated_client.post(
+            "/tool-configs",
+            json={
+                "tool_type_id": tool_id,
+                "key": "LIST_TEST",
+                "value": "test",
+                "config_type": "env",
+                "port_override": 5000,
+                "environment_variables": {"TEST": "true"},
+            },
+        )
+
+        # List configs
+        response = authenticated_client.get("/tool-configs")
+        assert response.status_code == 200
+        data = response.json()
+        assert len(data) > 0
+        config = data[0]
+        assert "port_override" in config
+        assert "start_command" in config
+        assert "working_directory" in config
+        assert "environment_variables" in config
+        assert "volumes" in config
+
+    def test_get_tool_config_defaults(self, authenticated_client: TestClient) -> None:
+        """Test getting tool config defaults."""
+        # Create a tool type first
+        tool_response = authenticated_client.post(
+            "/tool-types",
+            json={
+                "name": "defaults-tool",
+                "display_name": "Defaults Tool",
+                "default_port": 8080,
+                "definition_type": "compose",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx\n    volumes:\n      - \"{{REPO_PATH}}:/workspace\"\n",
+                "required_variables": ["REPO_PATH"],
+            },
+        )
+        tool_id = tool_response.json()["id"]
+
+        # Get defaults
+        response = authenticated_client.get(f"/tool-configs/defaults/{tool_id}")
+        assert response.status_code == 200
+        data = response.json()
+        assert data["tool_type_id"] == tool_id
+        assert "suggested_configs" in data
+
+    def test_tool_config_backward_compatibility(self, authenticated_client: TestClient) -> None:
+        """Test that old configs without new fields still work."""
+        # Create a tool type first
+        tool_response = authenticated_client.post(
+            "/tool-types",
+            json={
+                "name": "backward-compat-tool",
+                "display_name": "Backward Compat Tool",
+                "default_port": 8080,
+                "definition_type": "compose",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
+                "required_variables": [],
+            },
+        )
+        tool_id = tool_response.json()["id"]
+
+        # Create config without new fields (simulating old client)
+        response = authenticated_client.post(
+            "/tool-configs",
+            json={
+                "tool_type_id": tool_id,
+                "key": "OLD_STYLE",
+                "value": "value",
+                "config_type": "env",
+            },
+        )
+        assert response.status_code == 201
+        data = response.json()
+        assert data["key"] == "OLD_STYLE"
+        # New fields should have default values
+        assert data["port_override"] is None
+        assert data["start_command"] is None
+        assert data["working_directory"] is None
+        assert data["environment_variables"] is None
+        assert data["volumes"] is None

apps/api/tests/integration/test_tool_types_api.py

@@ -98,6 +98,7 @@ def _insert_tool_type(
     name: str,
     display_name: str,
     compose_template: str,
+    is_builtin: bool = False,
     created_by_id: str | None = None,
 ) -> None:
     async def _run() -> None:
@@ -119,6 +120,7 @@ def _insert_tool_type(
                 description="A test tool type",
                 compose_template=compose_template,
                 required_variables=["REPO_PATH", "TOOL_NAME"],
+                is_builtin=is_builtin,
                 created_by_id=uuid.UUID(created_by_id) if created_by_id else None,
             )
             await session.merge(tool_type)
@@ -232,6 +234,7 @@ def test_create_tool_type_successfully() -> None:
     assert data["name"] == "my-custom-tool"
     assert data["display_name"] == "My Custom Tool"
     assert data["description"] == "A custom development tool"
+    assert data["is_builtin"] == False
     assert data["created_by_id"] == user_id
     assert "id" in data
 
@@ -373,7 +376,28 @@ def test_update_tool_type_not_found() -> None:
     assert response.status_code == 404
 
 
+@pytest.mark.integration
+def test_update_builtin_tool_type_fails() -> None:
+    _prepare_test_db()
+    user_id = "11111111-1111-1111-1111-111111111111"
+    tool_type_id = "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
+    _insert_user(user_id)
+    _insert_tool_type(
+        tool_type_id,
+        "builtin-tool",
+        "Built-in Tool",
+        "version: '3.8'\nservices:\n  app:\n    image: builtin",
+        is_builtin=True,
+    )
+    
+    app = _load_app()
+    client = TestClient(app)
+    client.cookies.set("access_token", _mint_token(user_id))
 
+    payload = {"display_name": "Updated"}
+    response = client.put(f"/tool-types/{tool_type_id}", json=payload)
+    
+    assert response.status_code == 403
 
 
 @pytest.mark.integration
@@ -418,4 +442,53 @@ def test_delete_tool_type_not_found() -> None:
     assert response.status_code == 404
 
 
+@pytest.mark.integration
+def test_delete_builtin_tool_type_fails() -> None:
+    _prepare_test_db()
+    user_id = "11111111-1111-1111-1111-111111111111"
+    tool_type_id = "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
+    _insert_user(user_id)
+    _insert_tool_type(
+        tool_type_id,
+        "builtin-tool",
+        "Built-in Tool",
+        "version: '3.8'\nservices:\n  app:\n    image: builtin",
+        is_builtin=True,
+    )
+    
+    app = _load_app()
+    client = TestClient(app)
+    client.cookies.set("access_token", _mint_token(user_id))
 
+    response = client.delete(f"/tool-types/{tool_type_id}")
+    
+    assert response.status_code == 403
+
+
+@pytest.mark.integration
+def test_builtin_tool_types_seeded_on_startup() -> None:
+    _prepare_test_db()
+    user_id = "11111111-1111-1111-1111-111111111111"
+    _insert_user(user_id)
+    
+    # Load app triggers startup event which seeds built-in types
+    app = _load_app()
+    client = TestClient(app)
+    client.cookies.set("access_token", _mint_token(user_id))
+
+    response = client.get("/tool-types")
+    
+    assert response.status_code == 200
+    data = response.json()
+    
+    # Check that built-in types exist
+    builtin_names = [t["name"] for t in data if t["is_builtin"]]
+    assert "code-server" in builtin_names
+    assert "jupyter-notebook" in builtin_names
+    
+    # Verify built-in types have correct attributes
+    code_server = next((t for t in data if t["name"] == "code-server"), None)
+    assert code_server is not None
+    assert code_server["display_name"] == "VS Code Server"
+    assert "services" in code_server["compose_template"]
+    assert code_server["required_variables"] == ["REPO_PATH", "TOOL_NAME"]

apps/api/tests/integration/test_tool_types_api_extended.py

@@ -1,3 +1,4 @@
+import uuid
 import pytest
 from fastapi.testclient import TestClient
 
@@ -6,9 +7,7 @@ from fastapi.testclient import TestClient
 class TestToolTypesAPIExtended:
     """Integration tests for tool types API with new fields."""
 
-    def test_create_tool_type_with_dockerfile(
-        self, authenticated_client: TestClient
-    ) -> None:
+    def test_create_tool_type_with_dockerfile(self, authenticated_client: TestClient) -> None:
         """Test creating a tool type with dockerfile definition."""
         response = authenticated_client.post(
             "/tool-types",
@@ -29,9 +28,7 @@ class TestToolTypesAPIExtended:
         assert data["definition_type"] == "dockerfile"
         assert data["dockerfile_template"] == "FROM python:3.11\nRUN pip install flask"
 
-    def test_create_tool_type_with_readiness_probe(
-        self, authenticated_client: TestClient
-    ) -> None:
+    def test_create_tool_type_with_readiness_probe(self, authenticated_client: TestClient) -> None:
         """Test creating a tool type with readiness probe."""
         response = authenticated_client.post(
             "/tool-types",
@@ -42,7 +39,7 @@ class TestToolTypesAPIExtended:
                 "interfaces": ["web"],
                 "default_port": 8080,
                 "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx\n    ports:\n      - '8080:8080'",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
                 "readiness_probe": {
                     "command": "curl -f http://localhost:8080",
                     "timeout": 30,
@@ -56,9 +53,7 @@ class TestToolTypesAPIExtended:
         assert data["readiness_probe"]["command"] == "curl -f http://localhost:8080"
         assert data["readiness_probe"]["timeout"] == 30
 
-    def test_create_tool_type_invalid_definition_type(
-        self, authenticated_client: TestClient
-    ) -> None:
+    def test_create_tool_type_invalid_definition_type(self, authenticated_client: TestClient) -> None:
         """Test that invalid definition types are rejected."""
         response = authenticated_client.post(
             "/tool-types",
@@ -73,9 +68,7 @@ class TestToolTypesAPIExtended:
         )
         assert response.status_code == 422
 
-    def test_create_tool_type_dockerfile_without_template(
-        self, authenticated_client: TestClient
-    ) -> None:
+    def test_create_tool_type_dockerfile_without_template(self, authenticated_client: TestClient) -> None:
         """Test that dockerfile type requires dockerfile_template."""
         response = authenticated_client.post(
             "/tool-types",
@@ -89,9 +82,7 @@ class TestToolTypesAPIExtended:
         )
         assert response.status_code == 422
 
-    def test_update_tool_type_with_new_fields(
-        self, authenticated_client: TestClient
-    ) -> None:
+    def test_update_tool_type_with_new_fields(self, authenticated_client: TestClient) -> None:
         """Test updating a tool type with new fields."""
         # Create tool type first
         create_response = authenticated_client.post(
@@ -101,7 +92,7 @@ class TestToolTypesAPIExtended:
                 "display_name": "Update Test Tool",
                 "default_port": 8080,
                 "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx\n    ports:\n      - '8080:8080'",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
                 "required_variables": [],
             },
         )
@@ -122,9 +113,7 @@ class TestToolTypesAPIExtended:
         assert response.status_code == 200
         data = response.json()
         assert data["display_name"] == "Updated Name"
-        assert (
-            data["readiness_probe"]["command"] == "curl -f http://localhost:8080/health"
-        )
+        assert data["readiness_probe"]["command"] == "curl -f http://localhost:8080/health"
 
     def test_validate_tool_type_compose(self, authenticated_client: TestClient) -> None:
         """Test validating compose template."""
@@ -139,9 +128,7 @@ class TestToolTypesAPIExtended:
         data = response.json()
         assert data["valid"] is True
 
-    def test_validate_tool_type_invalid_compose(
-        self, authenticated_client: TestClient
-    ) -> None:
+    def test_validate_tool_type_invalid_compose(self, authenticated_client: TestClient) -> None:
         """Test validating invalid compose template."""
         response = authenticated_client.post(
             "/tool-types/validate",
@@ -155,9 +142,7 @@ class TestToolTypesAPIExtended:
         assert data["valid"] is False
         assert "errors" in data
 
-    def test_validate_tool_type_dockerfile(
-        self, authenticated_client: TestClient
-    ) -> None:
+    def test_validate_tool_type_dockerfile(self, authenticated_client: TestClient) -> None:
         """Test validating dockerfile template."""
         response = authenticated_client.post(
             "/tool-types/validate",
@@ -170,9 +155,7 @@ class TestToolTypesAPIExtended:
         data = response.json()
         assert data["valid"] is True
 
-    def test_get_tool_type_returns_new_fields(
-        self, authenticated_client: TestClient
-    ) -> None:
+    def test_get_tool_type_returns_new_fields(self, authenticated_client: TestClient) -> None:
         """Test that GET returns new fields."""
         # Create tool type with all fields
         create_response = authenticated_client.post(
@@ -184,7 +167,7 @@ class TestToolTypesAPIExtended:
                 "interfaces": ["web", "terminal"],
                 "default_port": 8443,
                 "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: code-server\n    command: --bind-addr 0.0.0.0:8443\n    ports:\n      - '8443:8443'\n    volumes:\n      - \"{{REPO_PATH}}:/workspace\"",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: code-server\n    volumes:\n      - \"{{REPO_PATH}}:/workspace\"",
                 "readiness_probe": {
                     "command": "curl -f http://localhost:8443",
                     "timeout": 30,
@@ -203,124 +186,3 @@ class TestToolTypesAPIExtended:
         assert data["category"] == "editor"
         assert data["interfaces"] == ["web", "terminal"]
         assert "readiness_probe" in data
-
-    def test_create_tool_type_without_port_fails(
-        self, authenticated_client: TestClient
-    ) -> None:
-        """Test that creating a tool type without default_port fails validation."""
-        response = authenticated_client.post(
-            "/tool-types",
-            json={
-                "name": "no-port-tool",
-                "display_name": "No Port Tool",
-                "category": "utility",
-                "interfaces": ["web"],
-                "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx\n    ports:\n      - '8080:8080'",
-                "required_variables": [],
-            },
-        )
-        assert response.status_code == 422
-        data = response.json()
-        assert "default_port" in str(data)
-
-    def test_create_tool_type_with_port_mismatch_fails(
-        self, authenticated_client: TestClient
-    ) -> None:
-        """Test that port mismatch between default_port and compose template fails."""
-        response = authenticated_client.post(
-            "/tool-types",
-            json={
-                "name": "port-mismatch-tool",
-                "display_name": "Port Mismatch Tool",
-                "category": "utility",
-                "interfaces": ["web"],
-                "default_port": 9999,
-                "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx\n    ports:\n      - '8080:8080'",
-                "required_variables": [],
-            },
-        )
-        assert response.status_code == 422
-        _ = response.json()
-
-    def test_create_tool_type_with_startup_command(
-        self, authenticated_client: TestClient
-    ) -> None:
-        """Test creating a tool type with startup_command."""
-        response = authenticated_client.post(
-            "/tool-types",
-            json={
-                "name": "startup-tool",
-                "display_name": "Startup Tool",
-                "category": "utility",
-                "interface_type": "terminal",
-                "requires_port": False,
-                "default_port": 0,
-                "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: alpine",
-                "startup_command": "cd /workspace && ls",
-                "required_variables": [],
-            },
-        )
-        assert response.status_code == 201
-        data = response.json()
-        assert data["startup_command"] == "cd /workspace && ls"
-        assert data["interface_type"] == "terminal"
-
-    def test_update_tool_type_startup_command(
-        self, authenticated_client: TestClient
-    ) -> None:
-        """Test updating a tool type's startup_command."""
-        # Create tool type first
-        create_response = authenticated_client.post(
-            "/tool-types",
-            json={
-                "name": "update-startup-tool",
-                "display_name": "Update Startup Tool",
-                "interface_type": "terminal",
-                "requires_port": False,
-                "default_port": 0,
-                "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: alpine",
-                "required_variables": [],
-            },
-        )
-        tool_id = create_response.json()["id"]
-
-        # Update with startup_command
-        response = authenticated_client.put(
-            f"/tool-types/{tool_id}",
-            json={
-                "startup_command": "source /etc/profile",
-            },
-        )
-        assert response.status_code == 200
-        data = response.json()
-        assert data["startup_command"] == "source /etc/profile"
-
-    def test_get_tool_type_returns_startup_command(
-        self, authenticated_client: TestClient
-    ) -> None:
-        """Test that GET returns startup_command."""
-        create_response = authenticated_client.post(
-            "/tool-types",
-            json={
-                "name": "get-startup-tool",
-                "display_name": "Get Startup Tool",
-                "interface_type": "terminal",
-                "requires_port": False,
-                "default_port": 0,
-                "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: alpine",
-                "startup_command": "echo hello",
-                "required_variables": [],
-            },
-        )
-        tool_id = create_response.json()["id"]
-
-        response = authenticated_client.get(f"/tool-types/{tool_id}")
-        assert response.status_code == 200
-        data = response.json()
-        assert data["startup_command"] == "echo hello"
-        assert "Port 9999 is not exposed" in str(data)

apps/api/tests/unit/test_git_url_parser.py

@@ -1,5 +1,6 @@
 """Tests for git URL parsing utilities."""
 
+import pytest
 
 from src.utils.git_url_parser import extract_base_repo_url, is_valid_clone_url, parse_git_url
 

apps/api/tests/unit/test_readiness_probe.py

@@ -1,7 +1,9 @@
 """Unit tests for readiness probe service."""
 
+import asyncio
 from unittest.mock import MagicMock, patch
 
+import pytest
 
 from src.services.readiness_probe import execute_probe
 

apps/web/nginx.conf

@@ -15,12 +15,6 @@ server {
         try_files $uri $uri/ /index.html;
     }
 
-    # Never cache index.html so browsers always fetch new hashed JS/CSS
-    location = /index.html {
-        add_header Cache-Control "no-cache, no-store, must-revalidate";
-        add_header Pragma "no-cache";
-    }
-
     # Cache static assets
     location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
         expires 1y;

apps/web/src/api/client.ts

@@ -1,4 +1,4 @@
-import axios, { type AxiosRequestConfig } from "axios";
+import axios from "axios";
 
 const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
 
@@ -14,38 +14,13 @@ export const shouldSkipAuthRedirect = (path: string): boolean => {
   return path.startsWith("/login") || path.startsWith("/auth");
 };
 
-// Retry config for transient network errors
-const MAX_RETRIES = 2;
-const RETRY_DELAY_MS = 1000;
-
-// Track retry count per request
-const retryCount = new WeakMap<AxiosRequestConfig, number>();
-
 apiClient.interceptors.response.use(
   (response) => response,
-  async (error) => {
+  (error) => {
     const status = error?.response?.status;
     if (status === 401 && !shouldSkipAuthRedirect(window.location.pathname)) {
       window.location.assign(`${BASE_URL}/auth/login`);
-      return Promise.reject(error);
     }
-
-    // Retry on transient network errors (ERR_NETWORK_CHANGED, etc.)
-    const isNetworkError = !error.response && error.message?.includes("Network");
-    const isRetryable = isNetworkError || status >= 502; // 502 Bad Gateway, 503 Service Unavailable, 504 Gateway Timeout
-    
-    if (isRetryable) {
-      const config = error.config;
-      const currentRetry = retryCount.get(config) || 0;
-      
-      if (currentRetry < MAX_RETRIES) {
-        retryCount.set(config, currentRetry + 1);
-        // Wait before retrying
-        await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS * (currentRetry + 1)));
-        return apiClient(config);
-      }
-    }
-
     return Promise.reject(error);
   }
 );

apps/web/src/api/git-repositories.ts

@@ -22,17 +22,6 @@ export type {
 	URLParseResult,
 } from "../types/git-repository";
 
-export interface Branch {
-	name: string;
-	is_default: boolean;
-	last_commit: string | null;
-}
-
-export interface BranchesResponse {
-	branches: Branch[];
-	default_branch: string;
-}
-
 export async function parseGitUrl(url: string): Promise<URLParseResult> {
 	const response = await apiClient.post("/projects/repositories/parse-url", {
 		url,
@@ -47,16 +36,6 @@ export async function listRepositories(
 	return response.data;
 }
 
-export async function listRepositoryBranches(
-	projectId: string,
-	repoId: string,
-): Promise<BranchesResponse> {
-	const response = await apiClient.get(
-		`/projects/${projectId}/repositories/${repoId}/branches`,
-	);
-	return response.data;
-}
-
 export async function createRepository(
 	projectId: string,
 	data: GitRepositoryCreate,

apps/web/src/api/git_repositories.ts

@@ -0,0 +1,299 @@
+import { apiClient } from "./client";
+
+export interface GitRepository {
+  id: string;
+  name: string;
+  path: string;
+  project_id: string;
+  owner_id: string;
+  is_mirror: boolean;
+  remote_url: string | null;
+  ssh_key_id: string | null;
+  last_push: string | null;
+  created_at: string | null;
+}
+
+export interface GitRepositoryCreate {
+  name: string;
+  remote_url?: string;
+  force_original_url?: boolean;
+  ssh_key_id?: string;
+}
+
+export interface URLParseResult {
+  original_url: string;
+  base_url: string | null;
+  is_valid_clone_url: boolean;
+  needs_parsing: boolean;
+  host: string | null;
+  message: string;
+  error_code: string | null;
+}
+
+export async function parseGitUrl(url: string): Promise<URLParseResult> {
+  const response = await apiClient.post("/repositories/parse-url", { url });
+  return response.data;
+}
+
+export async function listRepositories(projectId?: string): Promise<GitRepository[]> {
+  if (projectId) {
+    const response = await apiClient.get<GitRepository[]>(
+      `/projects/${projectId}/repositories`
+    );
+    return response.data;
+  }
+  // List all user repositories (including external)
+  const response = await apiClient.get<GitRepository[]>("/repositories");
+  return response.data;
+}
+
+export async function listAllUserRepositories(): Promise<GitRepository[]> {
+  const response = await apiClient.get<GitRepository[]>("/repositories");
+  return response.data;
+}
+
+export async function createRepository(
+  projectId: string,
+  data: GitRepositoryCreate
+): Promise<GitRepository> {
+  const response = await apiClient.post(`/projects/${projectId}/repositories`, data);
+  return response.data;
+}
+
+export async function createExternalRepository(
+  data: GitRepositoryCreate
+): Promise<GitRepository> {
+  const response = await apiClient.post<GitRepository>("/repositories", data);
+  return response.data;
+}
+
+export async function deleteRepository(projectId: string, repoId: string): Promise<void> {
+  await apiClient.delete(`/projects/${projectId}/repositories/${repoId}`);
+}
+
+export async function updateRepositorySshKey(
+  projectId: string,
+  repoId: string,
+  sshKeyId: string | null
+): Promise<GitRepository> {
+  const response = await apiClient.patch(
+    `/projects/${projectId}/repositories/${repoId}/ssh-key`,
+    { ssh_key_id: sshKeyId }
+  );
+  return response.data;
+}
+
+export interface Branch {
+  name: string;
+  is_default: boolean;
+  last_commit: string | null;
+}
+
+export interface BranchesResponse {
+  branches: Branch[];
+  default_branch: string;
+}
+
+export async function listRepositoryBranches(
+  projectId: string,
+  repoId: string
+): Promise<BranchesResponse> {
+  const response = await apiClient.get(
+    `/projects/${projectId}/repositories/${repoId}/branches`
+  );
+  return response.data;
+}
+
+export interface CommitHistoryEntry {
+  hash: string;
+  short_hash: string;
+  message: string;
+  author_name: string;
+  author_email: string;
+  author_date: string;
+  refs: string[];
+  graph_symbol: string;
+  graph_depth: number;
+}
+
+export interface CommitHistoryResponse {
+  commits: CommitHistoryEntry[];
+  branches: string[];
+  tags: string[];
+}
+
+export async function getRepositoryHistory(
+  projectId: string,
+  repoId: string,
+  branch?: string,
+  limit?: number
+): Promise<CommitHistoryResponse> {
+  const searchParams = new URLSearchParams();
+  if (branch) searchParams.set("branch", branch);
+  if (limit) searchParams.set("limit", String(limit));
+  const queryString = searchParams.toString();
+  const params = queryString ? `?${queryString}` : "";
+  const response = await apiClient.get(`/projects/${projectId}/repositories/${repoId}/history${params}`);
+  return response.data;
+}
+
+export interface CommitDetail {
+  hash: string;
+  short_hash: string;
+  message: string;
+  author_name: string;
+  author_email: string;
+  author_date: string;
+  committer_name: string;
+  committer_email: string;
+  committer_date: string;
+  stats: {
+    additions: number;
+    deletions: number;
+    files_changed: number;
+  };
+  diff: string;
+  parents: string[];
+}
+
+export async function getCommitDetail(
+  projectId: string,
+  repoId: string,
+  commitHash: string
+): Promise<CommitDetail> {
+  const response = await apiClient.get(
+    `/projects/${projectId}/repositories/${repoId}/commits/${commitHash}`
+  );
+  return response.data;
+}
+
+// Git Control API
+
+export interface GitStatus {
+  branch: string;
+  modified: string[];
+  added: string[];
+  deleted: string[];
+  untracked: string[];
+  renamed: string[];
+  ahead: number;
+  behind: number;
+}
+
+export async function getRepositoryStatus(
+  projectId: string,
+  repoId: string
+): Promise<GitStatus> {
+  const response = await apiClient.get(
+    `/projects/${projectId}/repositories/${repoId}/status`
+  );
+  return response.data;
+}
+
+export async function createBranch(
+  projectId: string,
+  repoId: string,
+  name: string,
+  baseBranch: string = "HEAD"
+): Promise<{ message: string; branch: string }> {
+  const response = await apiClient.post(
+    `/projects/${projectId}/repositories/${repoId}/branches`,
+    { name, base_branch: baseBranch }
+  );
+  return response.data;
+}
+
+export async function deleteBranch(
+  projectId: string,
+  repoId: string,
+  branchName: string,
+  force: boolean = false
+): Promise<{ message: string }> {
+  const response = await apiClient.delete(
+    `/projects/${projectId}/repositories/${repoId}/branches/${branchName}?force=${force}`
+  );
+  return response.data;
+}
+
+export async function checkoutBranch(
+  projectId: string,
+  repoId: string,
+  branch: string
+): Promise<{ message: string; branch: string }> {
+  const response = await apiClient.post(
+    `/projects/${projectId}/repositories/${repoId}/checkout`,
+    { branch }
+  );
+  return response.data;
+}
+
+export interface CommitResponse {
+  commit_hash: string;
+  message: string;
+}
+
+export async function commitChanges(
+  projectId: string,
+  repoId: string,
+  message: string,
+  files?: string[]
+): Promise<CommitResponse> {
+  const response = await apiClient.post(
+    `/projects/${projectId}/repositories/${repoId}/commit`,
+    { message, files }
+  );
+  return response.data;
+}
+
+export async function fetchRepository(
+  projectId: string,
+  repoId: string
+): Promise<{ message: string }> {
+  const response = await apiClient.post(
+    `/projects/${projectId}/repositories/${repoId}/fetch`
+  );
+  return response.data;
+}
+
+export async function pullRepository(
+  projectId: string,
+  repoId: string,
+  branch?: string
+): Promise<{ message: string }> {
+  const params = branch ? `?branch=${branch}` : "";
+  const response = await apiClient.post(
+    `/projects/${projectId}/repositories/${repoId}/pull${params}`
+  );
+  return response.data;
+}
+
+export async function pushRepository(
+  projectId: string,
+  repoId: string,
+  branch?: string
+): Promise<{ message: string }> {
+  const params = branch ? `?branch=${branch}` : "";
+  const response = await apiClient.post(
+    `/projects/${projectId}/repositories/${repoId}/push${params}`
+  );
+  return response.data;
+}
+
+export interface MergeResponse {
+  commit_hash: string;
+  message: string;
+}
+
+export async function mergeBranches(
+  projectId: string,
+  repoId: string,
+  sourceBranch: string,
+  targetBranch?: string,
+  message?: string
+): Promise<MergeResponse> {
+  const response = await apiClient.post(
+    `/projects/${projectId}/repositories/${repoId}/merge`,
+    { source_branch: sourceBranch, target_branch: targetBranch, message }
+  );
+  return response.data;
+}

apps/web/src/api/projects.ts

@@ -1,54 +1,51 @@
 import { apiClient } from "./client";
-import type { Project, ProjectWithRepos } from "../types";
+import type { Project } from "../types";
 
 export type ProjectCreateInput = {
-	name: string;
-	description?: string | null;
+  name: string;
+  description?: string | null;
 };
 
 export type ProjectUpdateInput = {
-	name?: string | null;
-	description?: string | null;
+  name?: string | null;
+  description?: string | null;
 };
 
 export type SetDefaultSSHKeyInput = {
-	ssh_key_id: string;
+  ssh_key_id: string;
 };
 
-export const listProjects = async (): Promise<ProjectWithRepos[]> => {
-	const response = await apiClient.get<ProjectWithRepos[]>("/projects");
-	return response.data;
+export const listProjects = async (): Promise<Project[]> => {
+  const response = await apiClient.get<Project[]>("/projects");
+  return response.data;
 };
 
 export const createProject = async (
-	input: ProjectCreateInput,
+  input: ProjectCreateInput
 ): Promise<Project> => {
-	const response = await apiClient.post<Project>("/projects", input);
-	return response.data;
+  const response = await apiClient.post<Project>("/projects", input);
+  return response.data;
 };
 
 export const updateProject = async (
-	projectId: string,
-	input: ProjectUpdateInput,
+  projectId: string,
+  input: ProjectUpdateInput
 ): Promise<Project> => {
-	const response = await apiClient.patch<Project>(
-		`/projects/${projectId}`,
-		input,
-	);
-	return response.data;
+  const response = await apiClient.patch<Project>(`/projects/${projectId}`, input);
+  return response.data;
 };
 
 export const deleteProject = async (projectId: string): Promise<void> => {
-	await apiClient.delete(`/projects/${projectId}`);
+  await apiClient.delete(`/projects/${projectId}`);
 };
 
 export const setDefaultSSHKey = async (
-	projectId: string,
-	input: SetDefaultSSHKeyInput,
+  projectId: string,
+  input: SetDefaultSSHKeyInput
 ): Promise<Project> => {
-	const response = await apiClient.patch<Project>(
-		`/projects/${projectId}/default-ssh-key`,
-		input,
-	);
-	return response.data;
+  const response = await apiClient.patch<Project>(
+    `/projects/${projectId}/default-ssh-key`,
+    input
+  );
+  return response.data;
 };

apps/web/src/api/sessions.ts

@@ -5,18 +5,6 @@ import type { ToolInstance } from "../types/tool-instance";
 export type { Session } from "../types/session";
 export type { ToolInstance } from "../types/tool-instance";
 
-export interface InstanceHealth {
-	healthy: boolean;
-	container_status: string;
-	container_health: string | null;
-	container_exit_code: number | null;
-	tunnel_status: string;
-	tunnel_status_code: number | null;
-	probe_status: string;
-	last_probe_output: string | null;
-	error: string | null;
-}
-
 export async function listInstances(
 	projectId: string,
 	repoId: string,
@@ -32,20 +20,12 @@ export async function createInstance(
 	repoId: string,
 	toolTypeId: string,
 	displayName?: string,
-	_cloneMode?: string,
-	_branch?: string,
-	_newBranch?: string,
-	configProfileId?: string,
-	_sshKeyIds?: string[],
-	workspaceId?: string,
 ): Promise<ToolInstance> {
 	const response = await apiClient.post(
 		`/projects/${projectId}/repositories/${repoId}/instances`,
 		{
 			tool_type_id: toolTypeId,
 			display_name: displayName,
-			workspace_id: workspaceId || undefined,
-			config_profile_id: configProfileId || undefined,
 		},
 	);
 	return response.data;
@@ -55,15 +35,9 @@ export async function startInstance(
 	projectId: string,
 	repoId: string,
 	instanceId: string,
-	configProfileId?: string,
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	_sshKeyIds?: string[],
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	_retries?: number,
 ): Promise<{ status: string; url?: string }> {
 	const response = await apiClient.post(
 		`/projects/${projectId}/repositories/${repoId}/instances/${instanceId}/start`,
-		{ config_profile_id: configProfileId },
 	);
 	return response.data;
 }
@@ -94,12 +68,10 @@ export async function deleteInstance(
 	projectId: string,
 	repoId: string,
 	instanceId: string,
-	force?: boolean,
 ): Promise<void> {
-	const url = force
-		? `/projects/${projectId}/repositories/${repoId}/instances/${instanceId}?force=true`
-		: `/projects/${projectId}/repositories/${repoId}/instances/${instanceId}`;
-	await apiClient.delete(url);
+	await apiClient.delete(
+		`/projects/${projectId}/repositories/${repoId}/instances/${instanceId}`,
+	);
 }
 
 export async function getUserSessions(): Promise<Session[]> {

apps/web/src/api/settings.ts

@@ -1,33 +1,27 @@
 import { apiClient } from "./client";
 
 export interface UserConfig {
-	default_editor: string | null;
-	theme: string;
-	git_user_name: string | null;
-	git_user_email: string | null;
-	last_session_id: string | null;
-	notification_toast_level?: "all" | "errors" | "none";
-	notification_mute_categories?: string[];
+  default_editor: string | null;
+  theme: string;
+  git_user_name: string | null;
+  git_user_email: string | null;
+  last_session_id: string | null;
 }
 
 export interface UserConfigUpdate {
-	default_editor?: string | null;
-	theme?: string | null;
-	git_user_name?: string | null;
-	git_user_email?: string | null;
-	last_session_id?: string | null;
-	notification_toast_level?: "all" | "errors" | "none";
-	notification_mute_categories?: string[];
+  default_editor?: string | null;
+  theme?: string | null;
+  git_user_name?: string | null;
+  git_user_email?: string | null;
+  last_session_id?: string | null;
 }
 
 export const getUserConfig = async (): Promise<UserConfig> => {
-	const response = await apiClient.get<UserConfig>("/users/me/config");
-	return response.data;
+  const response = await apiClient.get<UserConfig>("/users/me/config");
+  return response.data;
 };
 
-export const updateUserConfig = async (
-	data: UserConfigUpdate,
-): Promise<UserConfig> => {
-	const response = await apiClient.patch<UserConfig>("/users/me/config", data);
-	return response.data;
+export const updateUserConfig = async (data: UserConfigUpdate): Promise<UserConfig> => {
+  const response = await apiClient.patch<UserConfig>("/users/me/config", data);
+  return response.data;
 };

apps/web/src/api/ssh-keys.ts

@@ -24,30 +24,3 @@ export async function createSSHKey(data: SSHKeyCreate): Promise<SSHKey> {
 export async function deleteSSHKey(keyId: string): Promise<void> {
   await apiClient.delete(`/ssh-keys/${keyId}`);
 }
-
-export interface SignPayloadRequest {
-  payload: string;
-}
-
-export interface SignatureResponse {
-  signature: string;
-}
-
-export interface VerifySignatureRequest {
-  payload: string;
-  signature: string;
-}
-
-export interface VerifySignatureResponse {
-  valid: boolean;
-}
-
-export async function signPayload(keyId: string, data: SignPayloadRequest): Promise<SignatureResponse> {
-  const response = await apiClient.post<SignatureResponse>(`/ssh-keys/${keyId}/sign`, data);
-  return response.data;
-}
-
-export async function verifySignature(keyId: string, data: VerifySignatureRequest): Promise<VerifySignatureResponse> {
-  const response = await apiClient.post<VerifySignatureResponse>(`/ssh-keys/${keyId}/verify`, data);
-  return response.data;
-}

apps/web/src/api/ssh_keys.ts

@@ -0,0 +1,53 @@
+import { apiClient } from "./client";
+
+export interface SSHKey {
+  id: string;
+  name: string;
+  public_key: string;
+  created_at: string;
+}
+
+export interface SSHKeyCreate {
+  name: string;
+}
+
+export async function listSSHKeys(): Promise<SSHKey[]> {
+  const response = await apiClient.get<SSHKey[]>("/ssh-keys");
+  return response.data;
+}
+
+export async function createSSHKey(data: SSHKeyCreate): Promise<SSHKey> {
+  const response = await apiClient.post<SSHKey>("/ssh-keys", data);
+  return response.data;
+}
+
+export async function deleteSSHKey(keyId: string): Promise<void> {
+  await apiClient.delete(`/ssh-keys/${keyId}`);
+}
+
+export interface SignPayloadRequest {
+  payload: string;
+}
+
+export interface SignatureResponse {
+  signature: string;
+}
+
+export interface VerifySignatureRequest {
+  payload: string;
+  signature: string;
+}
+
+export interface VerifySignatureResponse {
+  valid: boolean;
+}
+
+export async function signPayload(keyId: string, data: SignPayloadRequest): Promise<SignatureResponse> {
+  const response = await apiClient.post<SignatureResponse>(`/ssh-keys/${keyId}/sign`, data);
+  return response.data;
+}
+
+export async function verifySignature(keyId: string, data: VerifySignatureRequest): Promise<VerifySignatureResponse> {
+  const response = await apiClient.post<VerifySignatureResponse>(`/ssh-keys/${keyId}/verify`, data);
+  return response.data;
+}

apps/web/src/api/tool_types.test.ts

@@ -0,0 +1,227 @@
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  createToolType,
+  deleteToolType,
+  listToolTypes,
+  updateToolType,
+  validateToolType,
+} from "../api/tool_types";
+
+const mockGet = vi.fn();
+const mockPost = vi.fn();
+const mockPut = vi.fn();
+const mockDelete = vi.fn();
+
+vi.mock("../api/client", () => ({
+  apiClient: {
+    get: (...args: unknown[]) => mockGet(...args),
+    post: (...args: unknown[]) => mockPost(...args),
+    put: (...args: unknown[]) => mockPut(...args),
+    delete: (...args: unknown[]) => mockDelete(...args),
+    interceptors: {
+      response: {
+        use: vi.fn(),
+      },
+    },
+  },
+  shouldSkipAuthRedirect: vi.fn(() => false),
+}));
+
+describe("tool_types API", () => {
+  describe("listToolTypes", () => {
+    it("returns tool types with new fields", async () => {
+      const mockResponse = {
+        data: [
+          {
+            id: "type-1",
+            name: "custom-tool",
+            display_name: "Custom Tool",
+            definition_type: "dockerfile",
+            dockerfile_template: "FROM python:3.11",
+            readiness_probe: {
+              command: "python --version",
+              timeout: 30,
+              interval: 2,
+            },
+            build_context: null,
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-01T00:00:00Z",
+          },
+        ],
+      };
+      mockGet.mockResolvedValue(mockResponse);
+
+      const result = await listToolTypes();
+
+      expect(result[0].definition_type).toBe("dockerfile");
+      expect(result[0].dockerfile_template).toBe("FROM python:3.11");
+      expect(result[0].readiness_probe).toEqual({
+        command: "python --version",
+        timeout: 30,
+        interval: 2,
+      });
+    });
+
+    it("returns compose tool types", async () => {
+      const mockResponse = {
+        data: [
+          {
+            id: "type-1",
+            name: "code-server",
+            definition_type: "compose",
+            compose_template: "version: '3.8'",
+            dockerfile_template: null,
+            build_context: null,
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-01T00:00:00Z",
+          },
+        ],
+      };
+      mockGet.mockResolvedValue(mockResponse);
+
+      const result = await listToolTypes();
+
+      expect(result[0].definition_type).toBe("compose");
+      expect(result[0].dockerfile_template).toBeNull();
+    });
+  });
+
+  describe("createToolType", () => {
+    it("creates tool type with dockerfile", async () => {
+      const mockResponse = {
+        data: {
+          id: "new-type",
+          name: "docker-tool",
+          definition_type: "dockerfile",
+          dockerfile_template: "FROM node:18",
+          build_context: null,
+          created_at: "2024-01-01T00:00:00Z",
+          updated_at: "2024-01-01T00:00:00Z",
+        },
+      };
+      mockPost.mockResolvedValue(mockResponse);
+
+      const result = await createToolType({
+        name: "docker-tool",
+        display_name: "Docker Tool",
+        definition_type: "dockerfile",
+        dockerfile_template: "FROM node:18",
+        default_port: 3000,
+        required_variables: [],
+      });
+
+      expect(result.definition_type).toBe("dockerfile");
+      expect(mockPost).toHaveBeenCalledWith(
+        "/tool-types",
+        expect.objectContaining({
+          definition_type: "dockerfile",
+          dockerfile_template: "FROM node:18",
+        })
+      );
+    });
+
+    it("creates tool type with readiness probe", async () => {
+      const mockResponse = {
+        data: {
+          id: "new-type",
+          name: "probed-tool",
+          readiness_probe: {
+            command: "curl -f http://localhost:8080",
+            timeout: 60,
+            interval: 3,
+          },
+          build_context: null,
+          created_at: "2024-01-01T00:00:00Z",
+          updated_at: "2024-01-01T00:00:00Z",
+        },
+      };
+      mockPost.mockResolvedValue(mockResponse);
+
+      const result = await createToolType({
+        name: "probed-tool",
+        display_name: "Probed Tool",
+        compose_template: "version: '3.8'",
+        default_port: 8080,
+        required_variables: [],
+        readiness_probe: {
+          command: "curl -f http://localhost:8080",
+          timeout: 60,
+          interval: 3,
+        },
+      });
+
+      expect(result.readiness_probe).toEqual({
+        command: "curl -f http://localhost:8080",
+        timeout: 60,
+        interval: 3,
+      });
+    });
+  });
+
+  describe("validateToolType", () => {
+    it("validates tool type by id", async () => {
+      const mockResponse = {
+        data: { valid: true, errors: [] },
+      };
+      mockGet.mockResolvedValue(mockResponse);
+
+      const result = await validateToolType("type-1");
+
+      expect(result.valid).toBe(true);
+      expect(mockGet).toHaveBeenCalledWith("/tool-types/type-1/validate");
+    });
+
+    it("returns validation errors", async () => {
+      const mockResponse = {
+        data: { valid: false, errors: ["Invalid YAML"] },
+      };
+      mockGet.mockResolvedValue(mockResponse);
+
+      const result = await validateToolType("type-1");
+
+      expect(result.valid).toBe(false);
+      expect(result.errors).toContain("Invalid YAML");
+    });
+  });
+
+  describe("updateToolType", () => {
+    it("updates tool type with new fields", async () => {
+      const mockResponse = {
+        data: {
+          id: "type-1",
+          name: "updated-tool",
+          definition_type: "dockerfile",
+          dockerfile_template: "FROM python:3.11",
+          build_context: null,
+          created_at: "2024-01-01T00:00:00Z",
+          updated_at: "2024-01-01T00:00:00Z",
+        },
+      };
+      mockPut.mockResolvedValue(mockResponse);
+
+      const result = await updateToolType("type-1", {
+        definition_type: "dockerfile",
+        dockerfile_template: "FROM python:3.11",
+      });
+
+      expect(result.definition_type).toBe("dockerfile");
+      expect(mockPut).toHaveBeenCalledWith(
+        "/tool-types/type-1",
+        expect.objectContaining({
+          definition_type: "dockerfile",
+        })
+      );
+    });
+  });
+
+  describe("deleteToolType", () => {
+    it("deletes tool type", async () => {
+      mockDelete.mockResolvedValue({ data: undefined });
+
+      await deleteToolType("type-1");
+
+      expect(mockDelete).toHaveBeenCalledWith("/tool-types/type-1");
+    });
+  });
+});

apps/web/src/api/tool_types.ts

@@ -0,0 +1,102 @@
+import { apiClient } from "./client";
+
+export interface ReadinessProbe {
+	command: string;
+	timeout: number;
+	interval: number;
+}
+
+export interface ToolType {
+	id: string;
+	name: string;
+	display_name: string;
+	description: string | null;
+	category: string;
+	interface_type: string;
+	requires_port: boolean;
+	default_port: number | null;
+	definition_type: "compose" | "dockerfile" | "manifest";
+	manifest_id: string | null;
+	compose_template: string | null;
+	dockerfile_template: string | null;
+	build_context: Record<string, string> | null;
+	readiness_probe: ReadinessProbe | null;
+	startup_command: string | null;
+	required_variables: string[];
+	created_by_id: string | null;
+	created_at: string;
+	updated_at: string;
+}
+
+export interface CreateToolTypeRequest {
+	name: string;
+	display_name: string;
+	description?: string;
+	category?: string;
+	interface_type?: string;
+	requires_port?: boolean;
+	default_port: number;
+	definition_type?: "compose" | "dockerfile" | "manifest";
+	manifest_id?: string;
+	compose_template?: string;
+	dockerfile_template?: string;
+	build_context?: Record<string, string>;
+	readiness_probe?: ReadinessProbe;
+	startup_command?: string;
+	required_variables: string[];
+}
+
+export interface UpdateToolTypeRequest {
+	display_name?: string;
+	description?: string;
+	category?: string;
+	interface_type?: string;
+	requires_port?: boolean;
+	default_port?: number;
+	definition_type?: "compose" | "dockerfile" | "manifest";
+	manifest_id?: string;
+	compose_template?: string;
+	dockerfile_template?: string;
+	build_context?: Record<string, string>;
+	readiness_probe?: ReadinessProbe;
+	startup_command?: string;
+	required_variables?: string[];
+}
+
+export const listToolTypes = async (): Promise<ToolType[]> => {
+	const response = await apiClient.get<ToolType[]>("/tool-types");
+	return response.data;
+};
+
+export const getToolType = async (id: string): Promise<ToolType> => {
+	const response = await apiClient.get<ToolType>(`/tool-types/${id}`);
+	return response.data;
+};
+
+export const createToolType = async (
+	data: CreateToolTypeRequest,
+): Promise<ToolType> => {
+	const response = await apiClient.post<ToolType>("/tool-types", data);
+	return response.data;
+};
+
+export const updateToolType = async (
+	id: string,
+	data: UpdateToolTypeRequest,
+): Promise<ToolType> => {
+	const response = await apiClient.put<ToolType>(`/tool-types/${id}`, data);
+	return response.data;
+};
+
+export const deleteToolType = async (id: string): Promise<void> => {
+	await apiClient.delete(`/tool-types/${id}`);
+};
+
+export const validateToolType = async (
+	id: string,
+): Promise<{ valid: boolean; errors?: string[] }> => {
+	const response = await apiClient.get<{ valid: boolean; errors?: string[] }>(
+		`/tool-types/${id}/validate`,
+	);
+	return response.data;
+};

apps/web/src/components/app-shell.tsx

@@ -0,0 +1,192 @@
+import { useCallback, useEffect } from "react";
+import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
+
+import { getUserSessions } from "../api/sessions";
+import type { Session } from "../api/sessions";
+import { useTheme } from "../hooks/use-theme";
+import { useAuth } from "../state/auth";
+import { useSessions } from "../state/sessions";
+import { useMobileViewport } from "../hooks/use-mobile-viewport";
+import { EventProvider } from "../state/events";
+import { ToastProvider } from "../state/toast";
+import { NotificationProvider } from "../state/notifications";
+import { EventToastBridge } from "./event-toast-bridge";
+import { NotificationCenter } from "./notification-center";
+import { Icon } from "./icon";
+import { MobileNav } from "./mobile-nav";
+import { StartToolFAB } from "./start-tool-fab";
+import type { IconName } from "../utils/icons";
+
+const NAV_ITEMS: {
+	to: string;
+	label: string;
+	icon: IconName;
+	badge?: "sessions";
+}[] = [
+	{ to: "/", label: "Home", icon: "dashboard" },
+	{ to: "/sessions", label: "Sessions", icon: "terminal", badge: "sessions" },
+	{ to: "/workspaces", label: "Workspaces", icon: "folder" },
+	{ to: "/projects", label: "Projects", icon: "projects" },
+	{ to: "/tool-workshop", label: "Tool Workshop", icon: "settings" },
+	{ to: "/config-profiles", label: "Config Profiles", icon: "folder" },
+	{ to: "/settings", label: "Settings", icon: "settings" },
+];
+
+const SessionItem = ({ session }: { session: Session }) => {
+	const isRunning = session.status === "running";
+
+	// Determine the link target:
+	// - Web tools open their tunnel URL
+	// - Terminal tools open the terminal page
+	// - Everything else falls back to the project page
+	const hasTerminal = session.tool_type_interfaces.includes("terminal");
+	const hasWeb = session.tool_type_interfaces.includes("web");
+	const href = session.url && hasWeb
+		? session.url
+		: hasTerminal
+			? `/instances/${session.id}/terminal`
+			: `/projects/${session.project_id}`;
+
+	return (
+		<a
+			href={href}
+			target="_blank"
+			rel="noopener noreferrer"
+			className="nav-item session-item"
+			title={`${session.display_name} (${session.status})`}
+		>
+			<span className={`session-status ${isRunning ? "running" : ""}`} />
+			<Icon name={session.tool_icon as IconName} size="sm" />
+			<span className="session-name">{session.display_name}</span>
+		</a>
+	);
+};
+
+export const AppShell = () => {
+	useTheme();
+	const { user, logout } = useAuth();
+	const { sessions, setAllSessions } = useSessions();
+	const location = useLocation();
+	const isMobile = useMobileViewport();
+	const isMobileTerminal =
+		isMobile &&
+		location.pathname.includes("/instances/") &&
+		location.pathname.includes("/terminal");
+
+	const loadSessions = useCallback(async () => {
+		try {
+			const data = await getUserSessions();
+			setAllSessions(data);
+		} catch {
+			// Silently fail - sessions are optional
+		}
+	}, [setAllSessions]);
+
+	useEffect(() => {
+		void loadSessions();
+		// Poll every 30 seconds (reduced from 10s to avoid ERR_NETWORK_CHANGED from Docker network changes)
+		const interval = setInterval(() => {
+			void loadSessions();
+		}, 30000);
+		return () => clearInterval(interval);
+	}, [loadSessions]);
+
+	if (isMobileTerminal) {
+		return (
+			<EventProvider>
+				<ToastProvider>
+					<NotificationProvider>
+						<EventToastBridge />
+						<div className="shell mobile-terminal-shell">
+							<Outlet />
+						</div>
+					</NotificationProvider>
+				</ToastProvider>
+			</EventProvider>
+		);
+	}
+
+	return (
+		<EventProvider>
+			<ToastProvider>
+				<NotificationProvider>
+					<EventToastBridge />
+					<div className="shell">
+						<header className="shell-header">
+							<Link className="brand" to="/">
+								Headquarter
+							</Link>
+							<div className="header-actions">
+								<NotificationCenter isMobileTerminal={isMobileTerminal} />
+								<Link className="user-chip" to="/profile">
+									{user?.name ?? "User"}
+								</Link>
+								<button
+									className="ghost-button"
+									onClick={() => {
+										void logout();
+									}}
+									type="button"
+								>
+									<Icon name="logout" size="sm" />
+									Logout
+								</button>
+							</div>
+						</header>
+
+						<div className="shell-body">
+							{!isMobile && (
+								<aside className="shell-nav" aria-label="Primary navigation">
+									{NAV_ITEMS.map((item) => {
+										const activeCount = sessions.filter(
+											(s) => s.status === "running",
+										).length;
+										return (
+											<NavLink
+												key={item.to}
+												to={item.to}
+												className={({ isActive }) =>
+													isActive ? "nav-item nav-item-active" : "nav-item"
+												}
+												end={item.to === "/"}
+											>
+												<Icon name={item.icon} size="sm" />
+												{item.label}
+												{item.badge === "sessions" && activeCount > 0 && (
+													<span className="nav-badge">{activeCount}</span>
+												)}
+											</NavLink>
+										);
+									})}
+
+									{sessions.length > 0 && (
+										<>
+											<div className="nav-divider" />
+											<div className="nav-section-title">Live sessions</div>
+											{sessions.map((session) => (
+												<SessionItem key={session.id} session={session} />
+											))}
+										</>
+									)}
+								</aside>
+							)}
+
+							<main className={`shell-content ${isMobile ? "mobile" : ""}`}>
+								<Outlet />
+							</main>
+						</div>
+
+						{isMobile && (
+							<MobileNav
+								sessionCount={
+									sessions.filter((s) => s.status === "running").length
+								}
+							/>
+						)}
+						<StartToolFAB />
+					</div>
+				</NotificationProvider>
+			</ToastProvider>
+		</EventProvider>
+	);
+};

apps/web/src/components/code-editor.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect } from "react";
+import Editor from "react-simple-code-editor";
+import { highlightCode, loadLanguage } from "../utils/language";
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  language: string;
+  readOnly?: boolean;
+}
+
+export const CodeEditor: React.FC<CodeEditorProps> = ({
+  value,
+  onChange,
+  language,
+  readOnly = false,
+}) => {
+  useEffect(() => {
+    const highlight = async () => {
+      await loadLanguage(language);
+    };
+    void highlight();
+  }, [language]);
+
+  const hightlightWithLineNumbers = (input: string) =>
+    input
+      .split("\n")
+      .map(
+        (line, i) =>
+          `<div class="editor-line"><span class="editor-line-number">${
+            i + 1
+          }</span><span class="editor-line-content">${highlightCode(
+            line || " ",
+            language
+          )}</span></div>`
+      )
+      .join("");
+
+  return (
+    <div className="code-editor">
+      <Editor
+        value={value}
+        onValueChange={onChange}
+        highlight={hightlightWithLineNumbers}
+        padding={0}
+        className="editor-textarea"
+        textareaClassName="editor-textarea-input"
+        readOnly={readOnly}
+        style={{
+          fontFamily: '"Fira Code", "Monaco", "Courier New", monospace',
+          fontSize: 14,
+        }}
+      />
+    </div>
+  );
+};

apps/web/src/components/commit-dialog.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+
+import { Icon } from "./icon";
+
+interface CommitDialogProps {
+  isOpen: boolean;
+  filePath: string;
+  originalContent: string;
+  newContent: string;
+  onCommit: (message: string) => Promise<void>;
+  onCancel: () => void;
+}
+
+export const CommitDialog: React.FC<CommitDialogProps> = ({
+  isOpen,
+  filePath,
+  originalContent,
+  newContent,
+  onCommit,
+  onCancel,
+}) => {
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(">");
+
+  if (!isOpen) return null;
+
+  const generateDiff = () => {
+    const originalLines = originalContent.split("\n");
+    const newLines = newContent.split("\n");
+    const maxLines = Math.max(originalLines.length, newLines.length);
+    const diff: { type: "same" | "added" | "removed"; line: string; lineNum: number }[] = [];
+
+    for (let i = 0; i < maxLines; i++) {
+      const original = originalLines[i] || "";
+      const updated = newLines[i] || "";
+
+      if (original === updated) {
+        diff.push({ type: "same", line: updated, lineNum: i + 1 });
+      } else {
+        if (original) {
+          diff.push({ type: "removed", line: original, lineNum: i + 1 });
+        }
+        if (updated) {
+          diff.push({ type: "added", line: updated, lineNum: i + 1 });
+        }
+      }
+    }
+
+    return diff;
+  };
+
+  const handleCommit = async () => {
+    if (!message.trim()) {
+      setError("Please enter a commit message");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+    try {
+      await onCommit(message);
+    } catch {
+      setError("Failed to commit changes");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const diff = generateDiff();
+  const hasChanges = diff.some((d) => d.type !== "same");
+
+  return (
+    <div className="dialog-overlay">
+      <div className="commit-dialog">
+        <div className="dialog-header">
+          <h3>Commit Changes</h3>
+          <button className="dialog-close" onClick={onCancel} type="button">
+            ×
+          </button>
+        </div>
+
+        <div className="dialog-body">
+          <p className="file-info">
+            Editing: <strong>{filePath}</strong>
+          </p>
+
+          {!hasChanges && (
+            <div className="warning-message">No changes to commit</div>
+          )}
+
+          {hasChanges && (
+            <div className="diff-preview">
+              <h4>Changes</h4>
+              <div className="diff-content">
+                {diff.map((line, i) => (
+                  <div
+                    key={i}
+                    className={`diff-line diff-${line.type}`}
+                  >
+                    <span className="diff-line-number">{line.lineNum}</span>
+                    <span className="diff-marker">
+                      {line.type === "added" && "+"}
+                      {line.type === "removed" && "-"}
+                      {line.type === "same" && " "}
+                    </span>
+                    <span className="diff-line-content">{line.line}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="form-group">
+            <label>Commit Message *</label>
+            <textarea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Describe your changes..."
+              rows={3}
+              className="form-textarea"
+            />
+          </div>
+
+          {error && <div className="error-message">{error}</div>}
+        </div>
+
+        <div className="dialog-footer">
+          <button
+            className="btn-secondary"
+            onClick={onCancel}
+            type="button"
+          >
+            <Icon name="cancel" size="sm" />
+            Cancel
+          </button>
+          <button
+            className="btn-primary"
+            onClick={handleCommit}
+            disabled={loading || !hasChanges || !message.trim()}
+            type="button"
+          >
+            {loading ? (
+              <>
+                <Icon name="loading" size="sm" />
+                Committing...
+              </>
+            ) : (
+              <>
+                <Icon name="commit" size="sm" />
+                Commit Changes
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/commit-panel.tsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+
+import { commitChanges } from "../api/git_repositories";
+
+interface CommitPanelProps {
+  projectId: string;
+  repoId: string;
+  modified: string[];
+  added: string[];
+  deleted: string[];
+  untracked: string[];
+  onCommit: () => void;
+}
+
+export const CommitPanel = ({
+  projectId,
+  repoId,
+  modified,
+  added,
+  deleted,
+  untracked,
+  onCommit,
+}: CommitPanelProps) => {
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const allFiles = [...modified, ...added, ...deleted, ...untracked];
+  const hasChanges = allFiles.length > 0;
+
+  const handleCommit = async () => {
+    if (!message.trim()) {
+      setError("Please enter a commit message");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      await commitChanges(projectId, repoId, message);
+      setMessage("");
+      onCommit();
+    } catch {
+      setError("Commit failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!hasChanges) return null;
+
+  return (
+    <div className="commit-panel">
+      <h4>Changes</h4>
+      
+      <div className="file-list">
+        {modified.map((file) => (
+          <div key={file} className="file-item modified">
+            <span className="file-status">M</span>
+            <span className="file-name">{file}</span>
+          </div>
+        ))}
+        {added.map((file) => (
+          <div key={file} className="file-item added">
+            <span className="file-status">A</span>
+            <span className="file-name">{file}</span>
+          </div>
+        ))}
+        {deleted.map((file) => (
+          <div key={file} className="file-item deleted">
+            <span className="file-status">D</span>
+            <span className="file-name">{file}</span>
+          </div>
+        ))}
+        {untracked.map((file) => (
+          <div key={file} className="file-item untracked">
+            <span className="file-status">?</span>
+            <span className="file-name">{file}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="commit-form">
+        <textarea
+          placeholder="Commit message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          rows={2}
+          className="commit-message-input"
+        />
+        {error && <div className="commit-error">{error}</div>}
+        <button
+          onClick={handleCommit}
+          disabled={loading || !message.trim()}
+          className="commit-button"
+          type="button"
+        >
+          {loading ? "Committing..." : "Commit"}
+        </button>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/create-session-form.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect } from "react";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { createInstance, startInstance, type ToolInstance } from "../api/sessions";
 import type { Project } from "../types";
-import { listRepositoryBranches, type GitRepository, type Branch } from "@/api/git-repositories";
-import type { ToolType } from "@/api/tool-types";
-import { listSSHKeys, type SSHKey } from "@/api/ssh-keys";
+import { listRepositoryBranches, type GitRepository, type Branch } from "../api/git_repositories";
+import type { ToolType } from "../api/tool_types";
+import { listSSHKeys, type SSHKey } from "../api/ssh_keys";
 import { listConfigProfiles, type ConfigProfile } from "../api/config_profiles";
 
 interface CreateSessionFormProps {

apps/web/src/components/data-states.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 
 interface LoadingStateProps {
   message?: string;

apps/web/src/components/features/git/FileEditor.tsx

@@ -10,296 +10,299 @@ import { SyntaxHighlighter } from "./SyntaxHighlighter";
 import { detectLanguage } from "../../../utils/language";
 
 interface GitFileStatus {
-  modified: string[];
-  added: string[];
-  deleted: string[];
-  untracked: string[];
+	modified: string[];
+	added: string[];
+	deleted: string[];
+	untracked: string[];
 }
 
 interface FileEditorProps {
-  projectId: string;
-  repoId: string;
-  gitStatus?: GitFileStatus | null;
+	projectId: string;
+	repoId: string;
+	gitStatus?: GitFileStatus | null;
 }
 
 export const FileEditor: React.FC<FileEditorProps> = ({
-  projectId,
-  repoId,
-  gitStatus,
+	projectId,
+	repoId,
+	gitStatus,
 }) => {
-  const [searchParams] = useSearchParams();
-  const { user } = useAuth();
+	const [searchParams] = useSearchParams();
+	const { user } = useAuth();
 
-  const [mode, setMode] = useState<"view" | "edit">("view");
-  const [content, setContent] = useState(">");
-  const [originalContent, setOriginalContent] = useState(">");
-  const [language, setLanguage] = useState("plaintext");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [showCommitDialog, setShowCommitDialog] = useState(false);
-  const [isBinary, setIsBinary] = useState(false);
-  const [saving, setSaving] = useState(false);
+	const [mode, setMode] = useState<"view" | "edit">("view");
+	const [content, setContent] = useState(">");
+	const [originalContent, setOriginalContent] = useState(">");
+	const [language, setLanguage] = useState("plaintext");
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [showCommitDialog, setShowCommitDialog] = useState(false);
+	const [isBinary, setIsBinary] = useState(false);
+	const [saving, setSaving] = useState(false);
 
-  const handleDiscard = async () => {
-    if (!filePath) return;
-    try {
-      const response = await apiClient.get(
-        `/projects/${projectId}/repositories/${repoId}/files/content`,
-        {
-          params: {
-            branch,
-            path: filePath,
-          },
-        }
-      );
-      const data = response.data;
-      if (data.is_binary) {
-        setIsBinary(true);
-        setContent("Binary file - cannot display");
-        setOriginalContent("");
-      } else {
-        setIsBinary(false);
-        setContent(data.content);
-        setOriginalContent(data.content);
-      }
-      setMode("view");
-    } catch {
-      setError("Failed to discard changes");
-    }
-  };
+	const handleDiscard = async () => {
+		if (!filePath) return;
+		try {
+			const response = await apiClient.get(
+				`/projects/${projectId}/repositories/${repoId}/files/content`,
+				{
+					params: {
+						branch,
+						path: filePath,
+					},
+				},
+			);
+			const data = response.data;
+			if (data.is_binary) {
+				setIsBinary(true);
+				setContent("Binary file - cannot display");
+				setOriginalContent("");
+			} else {
+				setIsBinary(false);
+				setContent(data.content);
+				setOriginalContent(data.content);
+			}
+			setMode("view");
+		} catch {
+			setError("Failed to discard changes");
+		}
+	};
 
-  const branch = searchParams.get("branch") || "main";
-  const filePath = searchParams.get("file");
+	const branch = searchParams.get("branch") || "main";
+	const filePath = searchParams.get("file");
 
-  const fileStatus = gitStatus
-    ? gitStatus.modified.includes(filePath || "")
-      ? "modified"
-      : gitStatus.added.includes(filePath || "")
-        ? "added"
-        : gitStatus.deleted.includes(filePath || "")
-          ? "deleted"
-          : gitStatus.untracked.includes(filePath || "")
-            ? "untracked"
-            : undefined
-    : undefined;
+	const fileStatus = gitStatus
+		? gitStatus.modified.includes(filePath || "")
+			? "modified"
+			: gitStatus.added.includes(filePath || "")
+				? "added"
+				: gitStatus.deleted.includes(filePath || "")
+					? "deleted"
+					: gitStatus.untracked.includes(filePath || "")
+						? "untracked"
+						: undefined
+		: undefined;
 
-  const loadFile = useCallback(async () => {
-    if (!filePath) {
-      setContent("");
-      setOriginalContent("");
-      return;
-    }
+	const loadFile = useCallback(async () => {
+		if (!filePath) {
+			setContent("");
+			setOriginalContent("");
+			return;
+		}
 
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await apiClient.get(
-        `/projects/${projectId}/repositories/${repoId}/files/content`,
-        {
-          params: {
-            branch,
-            path: filePath,
-          },
-        }
-      );
-      const data = response.data;
-      if (data.is_binary) {
-        setIsBinary(true);
-        setContent("Binary file - cannot display");
-        setOriginalContent("");
-      } else {
-        setIsBinary(false);
-        setContent(data.content);
-        setOriginalContent(data.content);
-        setLanguage(detectLanguage(filePath));
-      }
-    } catch {
-      setError("Failed to load file");
-    } finally {
-      setLoading(false);
-    }
-  }, [projectId, repoId, branch, filePath]);
+		setLoading(true);
+		setError(null);
+		try {
+			const response = await apiClient.get(
+				`/projects/${projectId}/repositories/${repoId}/files/content`,
+				{
+					params: {
+						branch,
+						path: filePath,
+					},
+				},
+			);
+			const data = response.data;
+			if (data.is_binary) {
+				setIsBinary(true);
+				setContent("Binary file - cannot display");
+				setOriginalContent("");
+			} else {
+				setIsBinary(false);
+				setContent(data.content);
+				setOriginalContent(data.content);
+				setLanguage(detectLanguage(filePath));
+			}
+		} catch {
+			setError("Failed to load file");
+		} finally {
+			setLoading(false);
+		}
+	}, [projectId, repoId, branch, filePath]);
 
-  useEffect(() => {
-    void loadFile();
-  }, [loadFile]);
+	useEffect(() => {
+		void loadFile();
+	}, [loadFile]);
 
-  const handleEdit = () => {
-    if (isBinary) return;
-    setMode("edit");
-  };
+	const handleEdit = () => {
+		if (isBinary) return;
+		setMode("edit");
+	};
 
-  const handleCancel = () => {
-    setContent(originalContent);
-    setMode("view");
-    setShowCommitDialog(false);
-  };
+	const handleCancel = () => {
+		setContent(originalContent);
+		setMode("view");
+		setShowCommitDialog(false);
+	};
 
-  const handleSave = () => {
-    if (content === originalContent) {
-      setMode("view");
-      return;
-    }
-    setShowCommitDialog(true);
-  };
+	const handleSave = () => {
+		if (content === originalContent) {
+			setMode("view");
+			return;
+		}
+		setShowCommitDialog(true);
+	};
 
-  const handleCommit = async (message: string) => {
-    if (!filePath || !user) return;
+	const handleCommit = async (message: string) => {
+		if (!filePath || !user) return;
 
-    setSaving(true);
-    try {
-      await apiClient.post(
-        `/projects/${projectId}/repositories/${repoId}/files/content`,
-        {
-          path: filePath,
-          branch,
-          content,
-          commit_message: message,
-          author_name: user.name || "User",
-          author_email: user.email || "user@example.com",
-        }
-      );
-      setOriginalContent(content);
-      setMode("view");
-      setShowCommitDialog(false);
-    } catch {
-      setError("Failed to save changes");
-    } finally {
-      setSaving(false);
-    }
-  };
+		setSaving(true);
+		try {
+			await apiClient.post(
+				`/projects/${projectId}/repositories/${repoId}/files/content`,
+				{
+					path: filePath,
+					branch,
+					content,
+					commit_message: message,
+					author_name: user.name || "User",
+					author_email: user.email || "user@example.com",
+				},
+			);
+			setOriginalContent(content);
+			setMode("view");
+			setShowCommitDialog(false);
+		} catch {
+			setError("Failed to save changes");
+		} finally {
+			setSaving(false);
+		}
+	};
 
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "e") {
-        e.preventDefault();
-        if (mode === "view" && !isBinary) {
-          handleEdit();
-        } else if (mode === "edit") {
-          handleCancel();
-        }
-      }
-      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
-        e.preventDefault();
-        if (mode === "edit") {
-          handleSave();
-        }
-      }
-    };
+	// Keyboard shortcuts
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === "e") {
+				e.preventDefault();
+				if (mode === "view" && !isBinary) {
+					handleEdit();
+				} else if (mode === "edit") {
+					handleCancel();
+				}
+			}
+			if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+				e.preventDefault();
+				if (mode === "edit") {
+					handleSave();
+				}
+			}
+		};
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [mode, isBinary, content, originalContent]);
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [mode, isBinary, content, originalContent]);
 
-  if (!filePath) {
-    return (
-      <div className="file-viewer-empty">
-        <p className="muted">Select a file to view its contents</p>
-      </div>
-    );
-  }
+	if (!filePath) {
+		return (
+			<div className="file-viewer-empty">
+				<p className="muted">Select a file to view its contents</p>
+			</div>
+		);
+	}
 
-  if (loading) return <p className="muted">Loading file...</p>;
-  if (error) return <p className="error-text">{error}</p>;
+	if (loading) return <p className="muted">Loading file...</p>;
+	if (error) return <p className="error-text">{error}</p>;
 
-  return (
-    <div className={styles.fileEditor}>
-      <div className={styles.fileEditorToolbar}>
-        <div className="file-breadcrumbs">
-          {filePath?.split("/").map((part, i, arr) => (
-            <span key={i}>
-              {part}
-              {i < arr.length - 1 && (
-                <span className="breadcrumb-sep">/</span>
-              )}
-            </span>
-          ))}
-        </div>
-        <div className={styles.fileActions}>
-          {fileStatus && (
-            <span className={`git-status-badge ${fileStatus}`} title={fileStatus}>
-              {fileStatus === "modified" ? "M" : fileStatus === "added" ? "A" : fileStatus === "deleted" ? "D" : "?"}
-            </span>
-          )}
-          {mode === "view" && !isBinary && (
-            <button
-              className="btn-primary"
-              onClick={handleEdit}
-              type="button"
-            >
-              <Icon name="edit" size="sm" />
-              Edit
-            </button>
-          )}
-          {mode === "edit" && (
-            <>
-              <button
-                className="btn-primary"
-                onClick={handleSave}
-                disabled={content === originalContent || saving}
-                type="button"
-              >
-                {saving ? (
-                  <>
-                    <Icon name="loading" size="sm" />
-                    Saving...
-                  </>
-                ) : (
-                  <>
-                    <Icon name="save" size="sm" />
-                    Save
-                  </>
-                )}
-              </button>
-              <button
-                className="btn-secondary"
-                onClick={handleDiscard}
-                type="button"
-                title="Revert to last committed version"
-              >
-                <Icon name="undo" size="sm" />
-                Discard
-              </button>
-              <button
-                className="btn-secondary"
-                onClick={handleCancel}
-                type="button"
-              >
-                <Icon name="cancel" size="sm" />
-                Cancel
-              </button>
-            </>
-          )}
-        </div>
-      </div>
+	return (
+		<div className={styles.fileEditor}>
+			<div className={styles.fileEditorToolbar}>
+				<div className="file-breadcrumbs">
+					{filePath?.split("/").map((part, i, arr) => (
+						<span key={i}>
+							{part}
+							{i < arr.length - 1 && <span className="breadcrumb-sep">/</span>}
+						</span>
+					))}
+				</div>
+				<div className={styles.fileActions}>
+					{fileStatus && (
+						<span
+							className={`git-status-badge ${fileStatus}`}
+							title={fileStatus}
+						>
+							{fileStatus === "modified"
+								? "M"
+								: fileStatus === "added"
+									? "A"
+									: fileStatus === "deleted"
+										? "D"
+										: "?"}
+						</span>
+					)}
+					{mode === "view" && !isBinary && (
+						<button className="btn-primary" onClick={handleEdit} type="button">
+							<Icon name="edit" size="sm" />
+							Edit
+						</button>
+					)}
+					{mode === "edit" && (
+						<>
+							<button
+								className="btn-primary"
+								onClick={handleSave}
+								disabled={content === originalContent || saving}
+								type="button"
+							>
+								{saving ? (
+									<>
+										<Icon name="loading" size="sm" />
+										Saving...
+									</>
+								) : (
+									<>
+										<Icon name="save" size="sm" />
+										Save
+									</>
+								)}
+							</button>
+							<button
+								className="btn-secondary"
+								onClick={handleDiscard}
+								type="button"
+								title="Revert to last committed version"
+							>
+								<Icon name="undo" size="sm" />
+								Discard
+							</button>
+							<button
+								className="btn-secondary"
+								onClick={handleCancel}
+								type="button"
+							>
+								<Icon name="cancel" size="sm" />
+								Cancel
+							</button>
+						</>
+					)}
+				</div>
+			</div>
 
-      <div className={styles.fileEditorContent}>
-        {mode === "view" && (
-          <SyntaxHighlighter
-            code={content}
-            language={language}
-            showLineNumbers={!isBinary}
-          />
-        )}
+			<div className={styles.fileEditorContent}>
+				{mode === "view" && (
+					<SyntaxHighlighter
+						code={content}
+						language={language}
+						showLineNumbers={!isBinary}
+					/>
+				)}
 
-        {mode === "edit" && (
-          <CodeEditor
-            value={content}
-            onChange={setContent}
-            language={language}
-          />
-        )}
-      </div>
+				{mode === "edit" && (
+					<CodeEditor
+						value={content}
+						onChange={setContent}
+						language={language}
+					/>
+				)}
+			</div>
 
-      <CommitDialog
-        isOpen={showCommitDialog}
-        filePath={filePath}
-        originalContent={originalContent}
-        newContent={content}
-        onCommit={handleCommit}
-        onCancel={() => setShowCommitDialog(false)}
-      />
-    </div>
-  );
+			<CommitDialog
+				isOpen={showCommitDialog}
+				filePath={filePath}
+				originalContent={originalContent}
+				newContent={content}
+				onCommit={handleCommit}
+				onCancel={() => setShowCommitDialog(false)}
+			/>
+		</div>
+	);
 };

apps/web/src/components/features/terminal/TerminalComponent.tsx

@@ -15,15 +15,6 @@ import styles from "./TerminalComponent.module.css";
 interface TerminalProps {
 	instanceId: string;
 	onClose?: () => void;
-	isMobile?: boolean;
-	activeModifier?: "ctrl" | "alt" | null;
-	onModifierChange?: (modifier: "ctrl" | "alt" | null) => void;
-	onTerminalReady?: (
-		sendData: (data: string) => void,
-		connectionStatus: "connecting" | "connected" | "disconnected" | "error" | "resetting",
-		focusInput: () => void,
-		changeFontSize: (delta: number) => void,
-	) => void;
 }
 
 const STATUS_DOT_COLORS: Record<TerminalConnectionState["status"], string> = {
@@ -53,17 +44,7 @@ function getStatusText(state: TerminalConnectionState): string {
 export const TerminalComponent: React.FC<TerminalProps> = ({
 	instanceId,
 	onClose,
-	isMobile,
-	activeModifier,
-	onModifierChange,
-	onTerminalReady,
 }) => {
-	// Mobile and modifier props are accepted for backward compatibility
-	// but not yet implemented in this simplified component.
-	void isMobile;
-	void activeModifier;
-	void onModifierChange;
-	void onTerminalReady;
 	const terminalRef = useRef<HTMLDivElement>(null);
 	const xtermRef = useRef<Terminal | null>(null);
 	const fitAddonRef = useRef<FitAddon | null>(null);

apps/web/src/components/file-editor.tsx

@@ -0,0 +1,241 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { apiClient } from "../api/client";
+import { useAuth } from "../state/auth";
+import { CodeEditor } from "../components/code-editor";
+import { CommitDialog } from "../components/commit-dialog";
+import { Icon } from "../components/icon";
+import { SyntaxHighlighter } from "../components/syntax-highlighter";
+import { detectLanguage } from "../utils/language";
+
+interface FileEditorProps {
+  projectId: string;
+  repoId: string;
+}
+
+export const FileEditor: React.FC<FileEditorProps> = ({
+  projectId,
+  repoId,
+}) => {
+  const [searchParams] = useSearchParams();
+  const { user } = useAuth();
+
+  const [mode, setMode] = useState<"view" | "edit">("view");
+  const [content, setContent] = useState(">");
+  const [originalContent, setOriginalContent] = useState(">");
+  const [language, setLanguage] = useState("plaintext");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showCommitDialog, setShowCommitDialog] = useState(false);
+  const [isBinary, setIsBinary] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const branch = searchParams.get("branch") || "main";
+  const filePath = searchParams.get("file");
+
+  const loadFile = useCallback(async () => {
+    if (!filePath) {
+      setContent("");
+      setOriginalContent("");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await apiClient.get(
+        `/projects/${projectId}/repositories/${repoId}/files/content`,
+        {
+          params: {
+            branch,
+            path: filePath,
+          },
+        }
+      );
+      const data = response.data;
+      if (data.is_binary) {
+        setIsBinary(true);
+        setContent("Binary file - cannot display");
+        setOriginalContent("");
+      } else {
+        setIsBinary(false);
+        setContent(data.content);
+        setOriginalContent(data.content);
+        setLanguage(detectLanguage(filePath));
+      }
+    } catch {
+      setError("Failed to load file");
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, repoId, branch, filePath]);
+
+  useEffect(() => {
+    void loadFile();
+  }, [loadFile]);
+
+  const handleEdit = () => {
+    if (isBinary) return;
+    setMode("edit");
+  };
+
+  const handleCancel = () => {
+    setContent(originalContent);
+    setMode("view");
+    setShowCommitDialog(false);
+  };
+
+  const handleSave = () => {
+    if (content === originalContent) {
+      setMode("view");
+      return;
+    }
+    setShowCommitDialog(true);
+  };
+
+  const handleCommit = async (message: string) => {
+    if (!filePath || !user) return;
+
+    setSaving(true);
+    try {
+      await apiClient.post(
+        `/projects/${projectId}/repositories/${repoId}/files/content`,
+        {
+          path: filePath,
+          branch,
+          content,
+          commit_message: message,
+          author_name: user.name || "User",
+          author_email: user.email || "user@example.com",
+        }
+      );
+      setOriginalContent(content);
+      setMode("view");
+      setShowCommitDialog(false);
+    } catch {
+      setError("Failed to save changes");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "e") {
+        e.preventDefault();
+        if (mode === "view" && !isBinary) {
+          handleEdit();
+        } else if (mode === "edit") {
+          handleCancel();
+        }
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        if (mode === "edit") {
+          handleSave();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [mode, isBinary, content, originalContent]);
+
+  if (!filePath) {
+    return (
+      <div className="file-viewer-empty">
+        <p className="muted">Select a file to view its contents</p>
+      </div>
+    );
+  }
+
+  if (loading) return <p className="muted">Loading file...</p>;
+  if (error) return <p className="error-text">{error}</p>;
+
+  return (
+    <div className="file-editor">
+      <div className="file-editor-toolbar">
+        <div className="file-breadcrumbs">
+          {filePath.split("/").map((part, i, arr) => (
+            <span key={i}>
+              {part}
+              {i < arr.length - 1 && (
+                <span className="breadcrumb-sep">/</span>
+              )}
+            </span>
+          ))}
+        </div>
+        <div className="file-actions">
+          {mode === "view" && !isBinary && (
+            <button
+              className="btn-primary"
+              onClick={handleEdit}
+              type="button"
+            >
+              <Icon name="edit" size="sm" />
+              Edit
+            </button>
+          )}
+          {mode === "edit" && (
+            <>
+          <button
+            className="btn-primary"
+            onClick={handleSave}
+            disabled={content === originalContent || saving}
+            type="button"
+          >
+            {saving ? (
+              <>
+                <Icon name="loading" size="sm" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Icon name="save" size="sm" />
+                Save
+              </>
+            )}
+          </button>
+              <button
+                className="btn-secondary"
+                onClick={handleCancel}
+                type="button"
+              >
+                <Icon name="cancel" size="sm" />
+                Cancel
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="file-editor-content">
+        {mode === "view" && (
+          <SyntaxHighlighter
+            code={content}
+            language={language}
+            showLineNumbers={!isBinary}
+          />
+        )}
+
+        {mode === "edit" && (
+          <CodeEditor
+            value={content}
+            onChange={setContent}
+            language={language}
+          />
+        )}
+      </div>
+
+      <CommitDialog
+        isOpen={showCommitDialog}
+        filePath={filePath}
+        originalContent={originalContent}
+        newContent={content}
+        onCommit={handleCommit}
+        onCancel={() => setShowCommitDialog(false)}
+      />
+    </div>
+  );
+};

apps/web/src/components/git-mount-editor.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { validateGitUrl } from "../api/config_profiles";
 import type { GitMount, GitMountMapping } from "../api/config_profiles";
 

apps/web/src/components/git-toolbar.tsx

@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  checkoutBranch,
+  createBranch,
+  fetchRepository,
+  getRepositoryStatus,
+  pullRepository,
+  pushRepository,
+  type GitStatus,
+} from "../api/git_repositories";
+import { Icon } from "./icon";
+import { MergeDialog } from "./merge-dialog";
+
+interface GitToolbarProps {
+  projectId: string;
+  repoId: string;
+  currentBranch: string;
+  branches: string[];
+  hasRemote: boolean;
+  isMirror: boolean;
+  onBranchChange: (branch: string) => void;
+  onRefresh: () => void;
+}
+
+export const GitToolbar = ({
+  projectId,
+  repoId,
+  currentBranch,
+  branches,
+  hasRemote,
+  isMirror,
+  onBranchChange,
+  onRefresh,
+}: GitToolbarProps) => {
+  const [status, setStatus] = useState<GitStatus | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showNewBranch, setShowNewBranch] = useState(false);
+  const [newBranchName, setNewBranchName] = useState("");
+  const [newBranchBase, setNewBranchBase] = useState("");
+  const [showMergeDialog, setShowMergeDialog] = useState(false);
+
+  const loadStatus = useCallback(async () => {
+    try {
+      const data = await getRepositoryStatus(projectId, repoId);
+      setStatus(data);
+      setError(null);
+    } catch {
+      setError("Failed to load status");
+    }
+  }, [projectId, repoId]);
+
+  useEffect(() => {
+    void loadStatus();
+    // Poll status every 5 seconds
+    const interval = setInterval(() => void loadStatus(), 5000);
+    return () => clearInterval(interval);
+  }, [loadStatus]);
+
+  const handleFetch = async () => {
+    if (!hasRemote) return;
+    setLoading(true);
+    try {
+      await fetchRepository(projectId, repoId);
+      await loadStatus();
+    } catch {
+      setError("Fetch failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePull = async () => {
+    if (!hasRemote) return;
+    setLoading(true);
+    try {
+      await pullRepository(projectId, repoId, currentBranch || undefined);
+      await loadStatus();
+      onRefresh();
+    } catch {
+      setError("Pull failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePush = async () => {
+    setLoading(true);
+    try {
+      await pushRepository(projectId, repoId, currentBranch);
+      await loadStatus();
+    } catch {
+      setError("Push failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCheckout = async (branch: string) => {
+    setLoading(true);
+    try {
+      await checkoutBranch(projectId, repoId, branch);
+      onBranchChange(branch);
+      onRefresh();
+    } catch {
+      setError("Checkout failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateBranch = async () => {
+    if (!newBranchName.trim()) return;
+    setLoading(true);
+    try {
+      await createBranch(projectId, repoId, newBranchName, newBranchBase || currentBranch || "HEAD");
+      setShowNewBranch(false);
+      setNewBranchName("");
+      setNewBranchBase("");
+      onRefresh();
+    } catch {
+      setError("Failed to create branch");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const hasChanges = status && (
+    status.modified.length > 0 ||
+    status.added.length > 0 ||
+    status.deleted.length > 0 ||
+    status.untracked.length > 0
+  );
+
+  const canSync = hasRemote;
+
+  return (
+    <div className="git-toolbar">
+      {error && <div className="toolbar-error">{error}</div>}
+      {isMirror && (
+        <div className="warning-message">
+          <Icon name="warning" size="sm" /> This repository is a bare mirror.
+          Editing, committing, pulling, and merging are not available.
+          Delete and recreate it to enable full workspace features.
+        </div>
+      )}
+      <div className="toolbar-row">
+        <div className="toolbar-group">
+          <select
+            value={currentBranch}
+            onChange={(e) => handleCheckout(e.target.value)}
+            disabled={loading}
+            className="branch-select"
+          >
+            {branches.map((b) => (
+              <option key={b} value={b}>
+                {b === currentBranch ? (
+                  <>
+                    <Icon name="branch" size="sm" /> {b}
+                  </>
+                ) : (
+                  b
+                )}
+              </option>
+            ))}
+          </select>
+          <button
+            className="toolbar-button"
+            onClick={() => setShowNewBranch(!showNewBranch)}
+            disabled={loading}
+            type="button"
+          >
+            <Icon name="add" size="sm" /> New
+          </button>
+        </div>
+
+        <div className="toolbar-group">
+          <button
+            className="toolbar-button"
+            onClick={handleFetch}
+            disabled={loading || !canSync}
+            type="button"
+          >
+            <Icon name="fetch" size="sm" /> Fetch
+          </button>
+          <button
+            className="toolbar-button"
+            onClick={handlePull}
+            disabled={loading || !canSync}
+            type="button"
+          >
+            <Icon name="pull" size="sm" /> Pull
+            {status?.behind ? <span className="badge">{status.behind}</span> : null}
+          </button>
+          <button
+            className="toolbar-button"
+            onClick={handlePush}
+            disabled={loading || !canSync || !status?.ahead}
+            type="button"
+          >
+            <Icon name="push" size="sm" /> Push
+            {status?.ahead ? <span className="badge">{status.ahead}</span> : null}
+          </button>
+          <button
+            className="toolbar-button"
+            onClick={() => setShowMergeDialog(true)}
+            disabled={loading}
+            type="button"
+          >
+            <Icon name="merge" size="sm" /> Merge
+          </button>
+        </div>
+      </div>
+
+      {showNewBranch && (
+        <div className="toolbar-row new-branch-form">
+          <input
+            type="text"
+            placeholder="Branch name"
+            value={newBranchName}
+            onChange={(e) => setNewBranchName(e.target.value)}
+            className="toolbar-input"
+          />
+          <select
+            value={newBranchBase}
+            onChange={(e) => setNewBranchBase(e.target.value)}
+            className="toolbar-input"
+          >
+            <option value="">Base: HEAD</option>
+            {branches.map((b) => (
+              <option key={b} value={b}>{ b}</option>
+            ))}
+          </select>
+          <button
+            className="toolbar-button primary"
+            onClick={handleCreateBranch}
+            disabled={loading || !newBranchName.trim()}
+            type="button"
+          >
+            <Icon name="add" size="sm" /> Create
+          </button>
+          <button
+            className="toolbar-button"
+            onClick={() => setShowNewBranch(false)}
+            type="button"
+          >
+            <Icon name="cancel" size="sm" /> Cancel
+          </button>
+        </div>
+      )}
+
+      {hasChanges && status && (
+        <div className="toolbar-row status-summary">
+          {status.modified.length > 0 && <span className="status-badge modified"><Icon name="edit" size="sm" /> {status.modified.length} modified</span>}
+          {status.added.length > 0 && <span className="status-badge added"><Icon name="add" size="sm" /> {status.added.length} added</span>}
+          {status.deleted.length > 0 && <span className="status-badge deleted"><Icon name="delete" size="sm" /> {status.deleted.length} deleted</span>}
+          {status.untracked.length > 0 && <span className="status-badge untracked"><Icon name="warning" size="sm" /> {status.untracked.length} untracked</span>}
+        </div>
+      )}
+
+      <MergeDialog
+        projectId={projectId}
+        repoId={repoId}
+        branches={branches}
+        currentBranch={currentBranch}
+        isOpen={showMergeDialog}
+        onClose={() => setShowMergeDialog(false)}
+        onMerge={() => {
+          void loadStatus();
+          onRefresh();
+        }}
+      />
+    </div>
+  );
+};

apps/web/src/components/icon.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import {
+	House,
+	Folder,
+	GitBranch,
+	Gear,
+	User,
+	SignOut,
+	Plus,
+	PencilSimple,
+	Trash,
+	FloppyDisk,
+	X,
+	ArrowsClockwise,
+	Copy,
+	MagnifyingGlass,
+	List,
+	Check,
+	Warning,
+	Info,
+	Spinner,
+	GitCommit,
+	GitMerge,
+	ClockCounterClockwise,
+	ArrowDown,
+	ArrowUp,
+	File,
+	FileText,
+	Image,
+	Binary,
+	Code,
+	ArrowSquareOut,
+	Play,
+	Stop,
+	Terminal,
+	ArrowLeft,
+	DotsSixVertical,
+	Bell,
+	CaretDown,
+	CaretRight,
+} from "@phosphor-icons/react";
+
+export type IconName =
+	| "dashboard"
+	| "projects"
+	| "repositories"
+	| "settings"
+	| "profile"
+	| "logout"
+	| "add"
+	| "edit"
+	| "delete"
+	| "save"
+	| "cancel"
+	| "refresh"
+	| "copy"
+	| "search"
+	| "menu"
+	| "close"
+	| "success"
+	| "error"
+	| "warning"
+	| "info"
+	| "loading"
+	| "branch"
+	| "commit"
+	| "merge"
+	| "history"
+	| "pull"
+	| "push"
+	| "fetch"
+	| "file"
+	| "folder"
+	| "code"
+	| "document"
+	| "image"
+	| "binary"
+	| "external"
+	| "play"
+	| "stop"
+	| "terminal"
+	| "arrow-left"
+	| "drag"
+	| "bell"
+	| "chevron-down"
+	| "chevron-right";
+
+const iconMap: Record<
+	IconName,
+	React.ComponentType<{
+		size?: number | string;
+		weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+	}>
+> = {
+	dashboard: House,
+	projects: Folder,
+	repositories: GitBranch,
+	settings: Gear,
+	profile: User,
+	logout: SignOut,
+	add: Plus,
+	edit: PencilSimple,
+	delete: Trash,
+	save: FloppyDisk,
+	cancel: X,
+	refresh: ArrowsClockwise,
+	copy: Copy,
+	search: MagnifyingGlass,
+	menu: List,
+	close: X,
+	success: Check,
+	error: X,
+	warning: Warning,
+	info: Info,
+	loading: Spinner,
+	branch: GitBranch,
+	commit: GitCommit,
+	merge: GitMerge,
+	history: ClockCounterClockwise,
+	pull: ArrowDown,
+	push: ArrowUp,
+	fetch: ArrowsClockwise,
+	file: File,
+	folder: Folder,
+	code: Code,
+	document: FileText,
+	image: Image,
+	binary: Binary,
+	external: ArrowSquareOut,
+	play: Play,
+	stop: Stop,
+	terminal: Terminal,
+	"arrow-left": ArrowLeft,
+	drag: DotsSixVertical,
+	bell: Bell,
+	"chevron-down": CaretDown,
+	"chevron-right": CaretRight,
+};
+
+export interface IconProps {
+	name: IconName;
+	size?: "sm" | "md" | "lg" | "xl";
+	color?: string;
+	weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+	className?: string;
+	ariaLabel?: string;
+}
+
+const sizeMap: Record<NonNullable<IconProps["size"]>, number> = {
+	sm: 16,
+	md: 20,
+	lg: 24,
+	xl: 32,
+};
+
+export const Icon: React.FC<IconProps> = ({
+	name,
+	size = "md",
+	color,
+	weight = "regular",
+	className,
+	ariaLabel,
+}) => {
+	const IconComponent = iconMap[name];
+	const sizeValue = sizeMap[size];
+
+	if (!IconComponent) {
+		return null;
+	}
+
+	return (
+		<span
+			className={`icon icon-${size}${className ? ` ${className}` : ""}`}
+			style={{ color }}
+			aria-label={ariaLabel}
+			aria-hidden={!ariaLabel}
+			role="img"
+		>
+			<IconComponent size={sizeValue} weight={weight} />
+		</span>
+	);
+};

apps/web/src/components/instance-list.tsx

@@ -0,0 +1,608 @@
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Icon } from "./icon";
+import type { ToolInstance } from "../api/sessions";
+import {
+	deleteInstance,
+	listInstances,
+	restartInstance,
+	startInstance,
+	stopInstance,
+} from "../api/sessions";
+import type { ToolType } from "../api/tool_types";
+import { CreateSessionForm } from "./create-session-form";
+import { listConfigProfiles, type ConfigProfile } from "../api/config_profiles";
+import { listSSHKeys, type SSHKey } from "../api/ssh_keys";
+import { useEventContext } from "../state/events";
+
+const API_BASE_URL =
+	import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
+
+interface InstanceListProps {
+	projectId: string;
+	repoId: string;
+	projectName?: string;
+	repoName?: string;
+	toolTypes: ToolType[];
+}
+
+export const InstanceList = ({
+	projectId,
+	repoId,
+	projectName,
+	repoName,
+	toolTypes,
+}: InstanceListProps) => {
+	const navigate = useNavigate();
+	const [instances, setInstances] = useState<ToolInstance[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [showCreate, setShowCreate] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	// Stop confirmation
+	const [stopConfirmId, setStopConfirmId] = useState<string | null>(null);
+
+	// Config profile selection for start/restart
+	const [configProfiles, setConfigProfiles] = useState<ConfigProfile[]>([]);
+	const [profileSelectInstanceId, setProfileSelectInstanceId] = useState<
+		string | null
+	>(null);
+	const [selectedProfileForAction, setSelectedProfileForAction] = useState("");
+	const [selectedSshKeyIdsForAction, setSelectedSshKeyIdsForAction] = useState<
+		string[]
+	>([]);
+	const [sshKeys, setSshKeys] = useState<SSHKey[]>([]);
+
+	// Per-instance busy state for actions
+	const [busyInstanceId, setBusyInstanceId] = useState<string | null>(null);
+
+	const loadInstances = useCallback(async () => {
+		setLoading(true);
+		try {
+			const data = await listInstances(projectId, repoId);
+			setInstances(data);
+		} catch {
+			setError("Failed to load instances");
+		} finally {
+			setLoading(false);
+		}
+	}, [projectId, repoId]);
+
+	const { events } = useEventContext();
+
+	useEffect(() => {
+		void loadInstances();
+	}, [loadInstances]);
+
+	// Lightweight list refresh every 60 seconds for resilience
+	useEffect(() => {
+		const interval = setInterval(() => void loadInstances(), 60000);
+		return () => clearInterval(interval);
+	}, [loadInstances]);
+
+	// Real-time status updates from SSE events
+	useEffect(() => {
+		if (events.length === 0) return;
+		const latestEvent = events[events.length - 1];
+		const statusEvents = [
+			"instance.started",
+			"instance.health_changed",
+			"instance.error",
+			"instance.stopped",
+			"instance.restarted",
+		];
+		if (!statusEvents.includes(latestEvent.event)) return;
+
+		setInstances((prev) =>
+			prev.map((inst) =>
+				inst.id === latestEvent.instance_id
+					? { ...inst, status: latestEvent.status ?? inst.status }
+					: inst,
+			),
+		);
+	}, [events]);
+
+	const handleCreateSuccess = async () => {
+		setShowCreate(false);
+		await loadInstances();
+	};
+
+	const loadConfigProfiles = useCallback(
+		async (toolTypeId: string) => {
+			try {
+				const [profiles, keys] = await Promise.all([
+					listConfigProfiles(projectId, toolTypeId),
+					listSSHKeys(),
+				]);
+				setConfigProfiles(profiles);
+				setSshKeys(keys);
+			} catch {
+				// ignore
+			}
+		},
+		[projectId],
+	);
+
+	const handleStart = async (
+		instanceId: string,
+		configProfileId?: string,
+		sshKeyIds?: string[],
+	) => {
+		setBusyInstanceId(instanceId);
+		try {
+			await startInstance(
+				projectId,
+				repoId,
+				instanceId,
+				configProfileId,
+				sshKeyIds,
+			);
+			setProfileSelectInstanceId(null);
+			setSelectedProfileForAction("");
+			setSelectedSshKeyIdsForAction([]);
+			await loadInstances();
+		} catch {
+			setError("Failed to start instance");
+		} finally {
+			setBusyInstanceId(null);
+		}
+	};
+
+	const handleStop = async (instanceId: string) => {
+		setBusyInstanceId(instanceId);
+		try {
+			await stopInstance(projectId, repoId, instanceId);
+			setStopConfirmId(null);
+			await loadInstances();
+		} catch {
+			setError("Failed to stop instance");
+		} finally {
+			setBusyInstanceId(null);
+		}
+	};
+
+	const handleRestart = async (
+		instanceId: string,
+		configProfileId?: string,
+		sshKeyIds?: string[],
+	) => {
+		setBusyInstanceId(instanceId);
+		try {
+			await restartInstance(
+				projectId,
+				repoId,
+				instanceId,
+				configProfileId,
+				sshKeyIds,
+			);
+			setProfileSelectInstanceId(null);
+			setSelectedProfileForAction("");
+			setSelectedSshKeyIdsForAction([]);
+			await loadInstances();
+		} catch {
+			setError("Failed to restart instance");
+		} finally {
+			setBusyInstanceId(null);
+		}
+	};
+
+	const handleDelete = async (instanceId: string) => {
+		if (!confirm("Are you sure you want to delete this instance?")) return;
+		setBusyInstanceId(instanceId);
+		try {
+			await deleteInstance(projectId, repoId, instanceId);
+			// Update state immediately instead of reloading
+			setInstances((prev) => prev.filter((i) => i.id !== instanceId));
+		} catch {
+			setError("Failed to delete instance");
+		} finally {
+			setBusyInstanceId(null);
+		}
+	};
+
+	const getStatusColor = (status: string) => {
+		switch (status) {
+			case "running":
+				return "var(--success)";
+			case "starting":
+			case "probing":
+				return "var(--info)";
+			case "unhealthy":
+				return "var(--warning)";
+			case "error":
+				return "var(--danger)";
+			case "pending":
+			case "building":
+				return "var(--warning)";
+			default:
+				return "var(--muted)";
+		}
+	};
+
+	return (
+		<div className="instance-list">
+			<div className="instance-list-header">
+				<h3>Tool Instances</h3>
+				<button
+					className="secondary-button small"
+					onClick={() => setShowCreate(true)}
+					type="button"
+				>
+					<Icon name="add" size="sm" />
+					Launch Tool
+				</button>
+			</div>
+
+			{error && <div className="error-message">{error}</div>}
+
+			{loading ? (
+				<p className="muted">Loading instances...</p>
+			) : instances.length === 0 ? (
+				<p className="muted">No instances yet. Launch a tool to get started.</p>
+			) : (
+				<div className="instance-grid">
+					{instances.map((instance) => (
+						<div
+							key={instance.id}
+							className={`instance-card ${busyInstanceId === instance.id ? "busy" : ""}`}
+						>
+							{busyInstanceId === instance.id && (
+								<div className="instance-busy-overlay">
+									<Icon name="loading" size="md" />
+								</div>
+							)}
+							<div className="instance-info">
+								<div className="instance-name">{instance.display_name}</div>
+								<div className="instance-meta">
+									<span
+										className="status-dot"
+										style={{ backgroundColor: getStatusColor(instance.status) }}
+									/>
+									{instance.status}
+								</div>
+								{instance.selected_config_profile_id && (
+									<div className="instance-profile">
+										<span className="badge">
+											Profile:{" "}
+											{configProfiles.find(
+												(p) => p.id === instance.selected_config_profile_id,
+											)?.name || instance.selected_config_profile_id}
+										</span>
+									</div>
+								)}
+							</div>
+							<div className="instance-actions">
+								{instance.status === "running" &&
+									instance.url &&
+									instance.tool_type_interfaces.includes("web") && (
+										<>
+											<a
+												href={
+													instance.url.startsWith("http")
+														? instance.url
+														: `${API_BASE_URL}${instance.url}`
+												}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="secondary-button small"
+											>
+												<Icon name="external" size="sm" />
+												Open
+											</a>
+										</>
+									)}
+								{instance.status === "running" &&
+									instance.tool_type_interfaces.includes("terminal") && (
+										<button
+											className="secondary-button small"
+											onClick={() =>
+												navigate(`/instances/${instance.id}/terminal`)
+											}
+											type="button"
+											disabled={busyInstanceId === instance.id}
+										>
+											<Icon name="terminal" size="sm" />
+											Terminal
+										</button>
+									)}
+								{instance.status !== "running" && (
+									<>
+								{profileSelectInstanceId === instance.id ? (
+									<div className="inline-profile-select">
+										<select
+											value={selectedProfileForAction}
+											onChange={(e) =>
+												setSelectedProfileForAction(e.target.value)
+											}
+										>
+											<option value="">Default (none)</option>
+											{configProfiles.map((p) => (
+												<option key={p.id} value={p.id}>
+													{p.name}
+												</option>
+											))}
+										</select>
+										<div
+											style={{
+												display: "flex",
+												flexWrap: "wrap",
+												gap: "0.25rem",
+												marginTop: "0.25rem",
+											}}
+										>
+											{sshKeys.map((key) => (
+												<label
+													key={key.id}
+													className="checkbox-label"
+													style={{
+														fontSize: "0.75rem",
+														display: "flex",
+														alignItems: "center",
+														gap: "0.25rem",
+													}}
+												>
+													<input
+														type="checkbox"
+														checked={selectedSshKeyIdsForAction.includes(
+															key.id,
+														)}
+														onChange={(e) => {
+															if (e.target.checked) {
+																setSelectedSshKeyIdsForAction(
+																	(prev) => [...prev, key.id],
+																);
+															} else {
+																setSelectedSshKeyIdsForAction(
+																	(prev) =>
+																		prev.filter(
+																			(id) =>
+																				id !== key.id,
+																		),
+																);
+															}
+														}}
+													/>
+													{key.name}
+												</label>
+											))}
+										</div>
+										<button
+											className="primary-button small"
+											onClick={() =>
+												void handleStart(
+													instance.id,
+													selectedProfileForAction || undefined,
+													selectedSshKeyIdsForAction.length > 0
+														? selectedSshKeyIdsForAction
+														: undefined,
+												)
+											}
+											type="button"
+											disabled={busyInstanceId === instance.id}
+										>
+											<Icon name="play" size="sm" />
+											Start
+										</button>
+										<button
+											className="ghost-button small"
+											onClick={() => {
+												setProfileSelectInstanceId(null);
+												setSelectedProfileForAction("");
+												setSelectedSshKeyIdsForAction([]);
+											}}
+											type="button"
+											disabled={busyInstanceId === instance.id}
+										>
+											Cancel
+										</button>
+									</div>
+								) : (
+									<button
+										className="secondary-button small"
+										onClick={() => {
+											const toolType = toolTypes.find(
+												(t) => t.id === instance.tool_type_id,
+											);
+											if (toolType) {
+												void loadConfigProfiles(toolType.id);
+											}
+											setProfileSelectInstanceId(instance.id);
+											setSelectedProfileForAction(
+												instance.selected_config_profile_id || "",
+											);
+											setSelectedSshKeyIdsForAction(
+												instance.ssh_key_ids || [],
+											);
+										}}
+										type="button"
+										disabled={busyInstanceId === instance.id}
+									>
+										<Icon name="play" size="sm" />
+										Start
+									</button>
+								)}
+									</>
+								)}
+								{instance.status === "running" && (
+									<>
+										{stopConfirmId === instance.id ? (
+											<div className="inline-confirm">
+												<span>Stop?</span>
+												<button
+													className="ghost-button small danger-text"
+													onClick={() => void handleStop(instance.id)}
+													type="button"
+													disabled={busyInstanceId === instance.id}
+												>
+													Yes
+												</button>
+												<button
+													className="ghost-button small"
+													onClick={() => setStopConfirmId(null)}
+													type="button"
+													disabled={busyInstanceId === instance.id}
+												>
+													No
+												</button>
+											</div>
+										) : (
+											<button
+												className="ghost-button small"
+												onClick={() => setStopConfirmId(instance.id)}
+												type="button"
+												disabled={busyInstanceId === instance.id}
+											>
+												<Icon name="stop" size="sm" />
+											</button>
+										)}
+								{profileSelectInstanceId === instance.id ? (
+									<div className="inline-profile-select">
+										<select
+											value={selectedProfileForAction}
+											onChange={(e) =>
+												setSelectedProfileForAction(e.target.value)
+											}
+										>
+											<option value="">Default (none)</option>
+											{configProfiles.map((p) => (
+												<option key={p.id} value={p.id}>
+													{p.name}
+												</option>
+											))}
+										</select>
+										<div
+											style={{
+												display: "flex",
+												flexWrap: "wrap",
+												gap: "0.25rem",
+												marginTop: "0.25rem",
+											}}
+										>
+											{sshKeys.map((key) => (
+												<label
+													key={key.id}
+													className="checkbox-label"
+													style={{
+														fontSize: "0.75rem",
+														display: "flex",
+														alignItems: "center",
+														gap: "0.25rem",
+													}}
+												>
+													<input
+														type="checkbox"
+														checked={selectedSshKeyIdsForAction.includes(
+															key.id,
+														)}
+														onChange={(e) => {
+															if (e.target.checked) {
+																setSelectedSshKeyIdsForAction(
+																	(prev) => [...prev, key.id],
+																);
+															} else {
+																setSelectedSshKeyIdsForAction(
+																	(prev) =>
+																		prev.filter(
+																			(id) =>
+																				id !== key.id,
+																		),
+																);
+															}
+														}}
+													/>
+													{key.name}
+												</label>
+											))}
+										</div>
+										<button
+											className="primary-button small"
+											onClick={() =>
+												void handleRestart(
+													instance.id,
+													selectedProfileForAction || undefined,
+													selectedSshKeyIdsForAction.length > 0
+														? selectedSshKeyIdsForAction
+														: undefined,
+												)
+											}
+											type="button"
+											disabled={busyInstanceId === instance.id}
+										>
+											<Icon name="refresh" size="sm" />
+											Restart
+										</button>
+										<button
+											className="ghost-button small"
+											onClick={() => {
+												setProfileSelectInstanceId(null);
+												setSelectedProfileForAction("");
+												setSelectedSshKeyIdsForAction([]);
+											}}
+											type="button"
+											disabled={busyInstanceId === instance.id}
+										>
+											Cancel
+										</button>
+									</div>
+								) : (
+									<button
+										className="ghost-button small"
+										onClick={() => {
+											const toolType = toolTypes.find(
+												(t) => t.id === instance.tool_type_id,
+											);
+											if (toolType) {
+												void loadConfigProfiles(toolType.id);
+											}
+											setProfileSelectInstanceId(instance.id);
+											setSelectedProfileForAction(
+												instance.selected_config_profile_id || "",
+											);
+											setSelectedSshKeyIdsForAction(
+												instance.ssh_key_ids || [],
+											);
+										}}
+										type="button"
+										disabled={busyInstanceId === instance.id}
+									>
+										<Icon name="refresh" size="sm" />
+									</button>
+								)}
+									</>
+								)}
+								<button
+									className="ghost-button small danger-text"
+									onClick={() => void handleDelete(instance.id)}
+									type="button"
+									disabled={busyInstanceId === instance.id}
+								>
+									<Icon name="delete" size="sm" />
+								</button>
+							</div>
+						</div>
+					))}
+				</div>
+			)}
+
+			{showCreate && (
+				<div className="dialog-overlay" role="dialog" aria-modal="true">
+					<div className="dialog">
+						<h2>Launch Tool</h2>
+						<CreateSessionForm
+							projects={[]}
+							repositories={[]}
+							toolTypes={toolTypes}
+							fixedProjectId={projectId}
+							fixedRepoId={repoId}
+							projectName={projectName}
+							repoName={repoName}
+							onSuccess={handleCreateSuccess}
+							onCancel={() => setShowCreate(false)}
+							submitLabel="Launch"
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};

apps/web/src/components/manifest-editor.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { extractErrorMessage } from "../utils/errors";
 import {
 	compileToolDefinition,

apps/web/src/components/merge-dialog.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+
+import { mergeBranches } from "../api/git_repositories";
+import { Icon } from "./icon";
+
+interface MergeDialogProps {
+  projectId: string;
+  repoId: string;
+  branches: string[];
+  currentBranch: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onMerge: () => void;
+}
+
+export const MergeDialog = ({
+  projectId,
+  repoId,
+  branches,
+  currentBranch,
+  isOpen,
+  onClose,
+  onMerge,
+}: MergeDialogProps) => {
+  const [sourceBranch, setSourceBranch] = useState("");
+  const [commitMessage, setCommitMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  if (!isOpen) return null;
+
+  const availableBranches = branches.filter((b) => b !== currentBranch);
+
+  const handleMerge = async () => {
+    if (!sourceBranch) {
+      setError("Please select a source branch");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+    try {
+      await mergeBranches(
+        projectId,
+        repoId,
+        sourceBranch,
+        currentBranch,
+        commitMessage || undefined
+      );
+      setSuccess(true);
+      setTimeout(() => {
+        onMerge();
+        onClose();
+      }, 1500);
+    } catch {
+      setError("Merge failed. There may be conflicts to resolve.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <h2>Merge Branch</h2>
+        
+        <div className="merge-form">
+          <div className="form-field">
+            <label>Source Branch (merge from)</label>
+            <select
+              value={sourceBranch}
+              onChange={(e) => setSourceBranch(e.target.value)}
+              disabled={loading}
+            >
+              <option value="">Select branch...</option>
+              {availableBranches.map((branch) => (
+                <option key={branch} value={branch}>
+                  {branch}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="form-field">
+            <label>Target Branch (merge into)</label>
+            <input
+              type="text"
+              value={currentBranch}
+              disabled
+              className="input-disabled"
+            />
+          </div>
+
+          <div className="form-field">
+            <label>Commit Message (optional)</label>
+            <textarea
+              value={commitMessage}
+              onChange={(e) => setCommitMessage(e.target.value)}
+              placeholder={`Merge ${sourceBranch || "branch"} into ${currentBranch}`}
+              rows={3}
+              disabled={loading}
+            />
+          </div>
+
+          {error && <div className="error-text">{error}</div>}
+          {success && (
+            <div className="success-text">Merge successful!</div>
+          )}
+
+          <div className="modal-actions">
+            <button
+              className="secondary-button"
+              onClick={onClose}
+              disabled={loading}
+              type="button"
+            >
+              <Icon name="cancel" size="sm" />
+              Cancel
+            </button>
+            <button
+              className="primary-button"
+              onClick={handleMerge}
+              disabled={loading || !sourceBranch}
+              type="button"
+            >
+              {loading ? (
+                <>
+                  <Icon name="loading" size="sm" />
+                  Merging...
+                </>
+              ) : (
+                <>
+                  <Icon name="merge" size="sm" />
+                  Merge
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/mobile-action-sheet.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
-import { Icon } from "@/components/ui/Icon";
-import type { IconName } from "@/components/ui/Icon";
+import { Icon } from "./icon";
+import type { IconName } from "./icon";
 
 export interface MobileActionSheetItem {
   id: string;

apps/web/src/components/mobile-detail-view.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 
 interface Field {
   label: string;

apps/web/src/components/mobile-fab.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 
 interface MobileFABProps {
   onClick: () => void;

apps/web/src/components/mobile-list-view.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import type { IconName } from "../utils/icons";
 
 interface MobileListItem {

apps/web/src/components/mobile-nav.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { ToolsBottomSheet } from "./tools-bottom-sheet";
 import type { IconName } from "../utils/icons";
 

apps/web/src/components/mobile-page-header.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 
 interface MobilePageHeaderProps {
   title: string;

apps/web/src/components/mobile-terminal-header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 
 interface MobileTerminalHeaderProps {
   instanceName?: string;

apps/web/src/components/mobile-terminal-wrapper.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from "react";
-import { TerminalComponent } from "@/components/features/terminal/TerminalComponent";
+import { TerminalComponent } from "./terminal";
 import { MobileTerminalHeader } from "./mobile-terminal-header";
 import { SpecialKeysStrip } from "./special-keys-strip";
 import { SpecialKeysPanel } from "./special-keys-panel";

apps/web/src/components/notification-center.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import { useNotifications } from "../hooks/use-notifications";
 import { NotificationItem } from "./notification-item";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 
 interface NotificationCenterProps {
 	isMobileTerminal?: boolean;

apps/web/src/components/notification-item.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { formatRelativeTime } from "../utils/time";
 import type { NotificationItem as NotificationItemType } from "../api/notifications";
 

apps/web/src/components/protected-route.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+
+import { ProtectedRoute } from "./protected-route";
+
+const mockUseAuth = vi.fn();
+
+vi.mock("../state/auth", () => ({
+  useAuth: () => mockUseAuth()
+}));
+
+describe("ProtectedRoute", () => {
+  it("shows loading while session is resolving", () => {
+    mockUseAuth.mockReturnValue({ state: "loading" });
+
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <ProtectedRoute>
+          <div>private content</div>
+        </ProtectedRoute>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("Checking session...")).toBeInTheDocument();
+  });
+
+  it("redirects unauthenticated users to login", () => {
+    mockUseAuth.mockReturnValue({ state: "unauthenticated" });
+
+    render(
+      <MemoryRouter initialEntries={["/settings"]}>
+        <Routes>
+          <Route
+            path="/settings"
+            element={
+              <ProtectedRoute>
+                <div>private content</div>
+              </ProtectedRoute>
+            }
+          />
+          <Route path="/login" element={<div>login page</div>} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("login page")).toBeInTheDocument();
+  });
+});

apps/web/src/components/protected-route.tsx

@@ -0,0 +1,19 @@
+import { Navigate, useLocation } from "react-router-dom";
+
+import { useAuth } from "../state/auth";
+
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { state } = useAuth();
+  const location = useLocation();
+
+  if (state === "loading") {
+    return <div className="center-screen">Checking session...</div>;
+  }
+
+  if (state === "unauthenticated") {
+    const nextPath = encodeURIComponent(location.pathname);
+    return <Navigate to={`/login?next=${nextPath}`} replace />;
+  }
+
+  return <>{children}</>;
+};

apps/web/src/components/repositories-settings-tab.test.tsx

@@ -0,0 +1,114 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { RepositoriesSettingsTab } from "./repositories-settings-tab";
+import * as gitRepositoriesApi from "../api/git_repositories";
+
+const mockRepositories = [
+  {
+    id: "repo-1",
+    name: "Main Repo",
+    path: "/repos/main",
+    project_id: "proj-1",
+    owner_id: "user-1",
+    is_mirror: false,
+    remote_url: null,
+    last_push: null,
+    created_at: null,
+  },
+];
+
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual<typeof import("react-router-dom")>("react-router-dom");
+  return {
+    ...actual,
+    useParams: () => ({ projectId: "proj-1" }),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("RepositoriesSettingsTab", () => {
+  it("opens create dialog and clones an existing repository", async () => {
+    const listMock = vi.spyOn(gitRepositoriesApi, "listRepositories").mockResolvedValue(mockRepositories);
+    const createMock = vi.spyOn(gitRepositoriesApi, "createRepository").mockResolvedValue(mockRepositories[0]);
+
+    render(<RepositoriesSettingsTab />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Main Repo")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
+    fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
+      target: { value: "New Repo" },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/owner/i), {
+      target: { value: "alice" },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/repo-name/i), {
+      target: { value: "demo" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
+
+    await waitFor(() => {
+      expect(createMock).toHaveBeenCalledWith("proj-1", {
+        name: "New Repo",
+        remote_url: "git@git.commumedia.org:alice/demo.git",
+      });
+    });
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("uses advanced url fallback when requested", async () => {
+    const listMock = vi.spyOn(gitRepositoriesApi, "listRepositories").mockResolvedValue(mockRepositories);
+    const createMock = vi.spyOn(gitRepositoriesApi, "createRepository").mockResolvedValue(mockRepositories[0]);
+
+    render(<RepositoriesSettingsTab />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Main Repo")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
+    fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
+      target: { value: "New Repo" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /use full url instead/i }));
+    fireEvent.change(screen.getByPlaceholderText(/https:\/\/github.com\/user\/repo.git/i), {
+      target: { value: "https://github.com/user/repo.git" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
+
+    await waitFor(() => {
+      expect(createMock).toHaveBeenCalledWith("proj-1", {
+        name: "New Repo",
+        remote_url: "https://github.com/user/repo.git",
+      });
+    });
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows validation when cloning without a remote url", async () => {
+    vi.spyOn(gitRepositoriesApi, "listRepositories").mockResolvedValue(mockRepositories);
+    render(<RepositoriesSettingsTab />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Main Repo")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
+    fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
+      target: { value: "New Repo" },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/owner/i), {
+      target: { value: "" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
+
+    expect(screen.getByText(/owner and repository name are required/i)).toBeInTheDocument();
+  });
+});

apps/web/src/components/repositories-settings-tab.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+import { deleteRepository, listRepositories, type GitRepository } from "../api/git_repositories";
+import { RepositoryCreateDialog } from "./repository-create-dialog";
+import { Icon } from "./icon";
+
+export const RepositoriesSettingsTab: React.FC = () => {
+  const { projectId } = useParams<{ projectId: string }>();
+  const [repositories, setRepositories] = useState<GitRepository[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [error, setError] = useState("");
+
+  const loadRepositories = useCallback(async () => {
+    if (!projectId) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const data = await listRepositories(projectId);
+      setRepositories(data);
+    } catch {
+      setError("Failed to load repositories");
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    void loadRepositories();
+  }, [loadRepositories]);
+
+  const handleDelete = async (repoId: string) => {
+    if (!projectId) return;
+    if (!window.confirm("Are you sure you want to delete this repository?")) return;
+    try {
+      await deleteRepository(projectId, repoId);
+      setRepositories((current) => current.filter((r) => r.id !== repoId));
+    } catch {
+      setError("Failed to delete repository");
+    }
+  };
+
+  if (loading) return <div>Loading...</div>;
+
+  return (
+    <div className="repositories-settings-tab">
+      <div className="page-header">
+        <h2>Repositories</h2>
+        <button
+          className="primary-button"
+          onClick={() => setShowCreate(true)}
+          type="button"
+        >
+          <Icon name="add" size="sm" />
+          Add Repository
+        </button>
+      </div>
+      {error && <div className="error-message">{error}</div>}
+
+      <div className="repositories-list">
+        {repositories.length === 0 ? (
+          <p>No repositories yet.</p>
+        ) : (
+          repositories.map((repo) => (
+            <div key={repo.id} className="repository-card">
+              <div className="repository-info">
+                <h3>{repo.name}</h3>
+                <p>{repo.remote_url}</p>
+                <span className="repo-type">
+                  {repo.is_mirror ? "Mirror" : "Clone"}
+                </span>
+              </div>
+              <button
+                onClick={() => handleDelete(repo.id)}
+                className="btn-danger"
+              >
+                Delete
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+
+      {showCreate && (
+        <RepositoryCreateDialog
+          projectId={projectId!}
+          open={showCreate}
+          title="Add Repository"
+          onClose={() => setShowCreate(false)}
+          onCreated={loadRepositories}
+        />
+      )}
+    </div>
+  );
+};

apps/web/src/components/repository-create-dialog.tsx

@@ -0,0 +1,343 @@
+import { useEffect, useRef, useState } from "react";
+
+import { createRepository, parseGitUrl, type GitRepositoryCreate, type URLParseResult } from "../api/git_repositories";
+import { listSSHKeys, type SSHKey } from "../api/ssh_keys";
+import { Icon } from "./icon";
+
+type CreateMode = "clone" | "blank";
+type UrlValidationStatus = "idle" | "validating" | "valid" | "needs-parsing" | "invalid";
+
+interface RepositoryCreateDialogProps {
+  projectId: string;
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  onCreated: () => Promise<void> | void;
+}
+
+export const RepositoryCreateDialog = ({ projectId, open, title, onClose, onCreated }: RepositoryCreateDialogProps) => {
+  const [createMode, setCreateMode] = useState<CreateMode>("clone");
+  const [formName, setFormName] = useState("");
+  const [owner, setOwner] = useState("");
+  const [repoName, setRepoName] = useState("");
+  const [advancedUrl, setAdvancedUrl] = useState("");
+  const [useAdvancedUrl, setUseAdvancedUrl] = useState(true);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [urlValidation, setUrlValidation] = useState<{
+    status: UrlValidationStatus;
+    result: URLParseResult | null;
+  }>({ status: "idle", result: null });
+  const [sshKeys, setSshKeys] = useState<SSHKey[]>([]);
+  const [selectedSshKey, setSelectedSshKey] = useState<string>("");
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!open && debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+      debounceTimer.current = null;
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const loadKeys = async () => {
+      try {
+        const data = await listSSHKeys();
+        setSshKeys(data);
+      } catch {
+        // ignore
+      }
+    };
+    void loadKeys();
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (!useAdvancedUrl) {
+      setUrlValidation({ status: "idle", result: null });
+      return;
+    }
+
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+    }
+
+    if (!advancedUrl.trim()) {
+      setUrlValidation({ status: "idle", result: null });
+      return;
+    }
+
+    setUrlValidation({ status: "validating", result: null });
+
+    debounceTimer.current = setTimeout(async () => {
+      try {
+        const result = await parseGitUrl(advancedUrl.trim());
+        if (result.is_valid_clone_url) {
+          setUrlValidation({ status: "valid", result });
+        } else if (result.needs_parsing) {
+          setUrlValidation({ status: "needs-parsing", result });
+        } else {
+          setUrlValidation({ status: "invalid", result });
+        }
+      } catch {
+        setUrlValidation({ status: "invalid", result: null });
+      }
+    }, 300);
+
+    return () => {
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+    };
+  }, [advancedUrl, open, useAdvancedUrl]);
+
+  const resetForm = () => {
+    setCreateMode("clone");
+    setFormName("");
+    setOwner("");
+    setRepoName("");
+    setAdvancedUrl("");
+    setUseAdvancedUrl(true);
+    setFormError(null);
+    setUrlValidation({ status: "idle", result: null });
+    setSelectedSshKey("");
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setFormError(null);
+
+    if (!formName.trim()) {
+      setFormError("Repository name is required");
+      return;
+    }
+
+    try {
+      const input: GitRepositoryCreate = {
+        name: formName.trim(),
+        remote_url: undefined,
+      };
+
+      if (createMode === "clone") {
+        if (useAdvancedUrl) {
+          if (!advancedUrl.trim()) {
+            setFormError("Remote URL is required for advanced cloning");
+            return;
+          }
+          input.remote_url = advancedUrl.trim();
+        } else {
+          if (!owner.trim() || !repoName.trim()) {
+            setFormError("Owner and repository name are required");
+            return;
+          }
+          input.remote_url = `git@git.commumedia.org:${owner.trim()}/${repoName.trim()}.git`;
+        }
+        if (selectedSshKey) {
+          input.ssh_key_id = selectedSshKey;
+        }
+      }
+
+      await createRepository(projectId, input);
+      handleClose();
+      await onCreated();
+    } catch (error: unknown) {
+      const response = error as { response?: { data?: { detail?: string } } };
+      const detail = response.response?.data?.detail;
+      setFormError(typeof detail === "string" ? detail : "Failed to create repository");
+    }
+  };
+
+  const handleUseSuggestedUrl = () => {
+    if (urlValidation.result?.base_url) {
+      setAdvancedUrl(urlValidation.result.base_url);
+      setUrlValidation({ status: "idle", result: null });
+      setFormError(null);
+    }
+  };
+
+  const getUrlInputClass = () => {
+    switch (urlValidation.status) {
+      case "valid":
+        return "valid-url";
+      case "needs-parsing":
+        return "needs-parsing-url";
+      case "invalid":
+        return "invalid-url";
+      default:
+        return "";
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="dialog-overlay" role="dialog" aria-modal="true">
+      <div className="dialog">
+        <h3>{title}</h3>
+        <p className="muted">
+          Clone an existing repository from git.commumedia.org, or create a blank bare repo here.
+        </p>
+        <form onSubmit={handleSubmit} className="stack">
+          <div className="form-field">
+            <label>
+              <input
+                type="radio"
+                name="repository-mode"
+                checked={createMode === "clone"}
+                onChange={() => setCreateMode("clone")}
+              />
+              Clone existing repository
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="repository-mode"
+                checked={createMode === "blank"}
+                onChange={() => setCreateMode("blank")}
+              />
+              Create blank repository
+            </label>
+          </div>
+          <label className="form-field">
+            Repository name
+            <input
+              type="text"
+              value={formName}
+              onChange={(event) => setFormName(event.target.value)}
+              placeholder="repository-name"
+            />
+          </label>
+          {createMode === "clone" && !useAdvancedUrl && (
+            <>
+              <label className="form-field">
+                Owner
+                <input
+                  type="text"
+                  value={owner}
+                  onChange={(event) => setOwner(event.target.value)}
+                  placeholder="owner"
+                />
+              </label>
+              <label className="form-field">
+                Repository
+                <input
+                  type="text"
+                  value={repoName}
+                  onChange={(event) => setRepoName(event.target.value)}
+                  placeholder="repo-name"
+                />
+              </label>
+              <label className="form-field">
+                SSH Key
+                <select
+                  value={selectedSshKey}
+                  onChange={(event) => setSelectedSshKey(event.target.value)}
+                >
+                  <option value="">Select SSH key (optional)...</option>
+                  {sshKeys.map((k) => (
+                    <option key={k.id} value={k.id}>
+                      {k.name}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <p className="muted">SSH target: git@git.commumedia.org:{owner || "owner"}/{repoName || "repo"}.git</p>
+              <button
+                type="button"
+                className="secondary-button small"
+                onClick={() => setUseAdvancedUrl(true)}
+              >
+                Use full URL instead
+              </button>
+            </>
+          )}
+          {createMode === "clone" && useAdvancedUrl && (
+            <>
+              <label className="form-field">
+                Remote URL
+                <input
+                  type="text"
+                  value={advancedUrl}
+                  onChange={(event) => setAdvancedUrl(event.target.value)}
+                  placeholder="https://github.com/user/repo.git"
+                  className={getUrlInputClass()}
+                />
+                {urlValidation.status === "validating" && (
+                  <span className="validation-status validating">Validating...</span>
+                )}
+                {urlValidation.status === "valid" && (
+                  <span className="validation-status valid">
+                    <Icon name="success" size="sm" /> Valid git URL
+                  </span>
+                )}
+                {urlValidation.status === "needs-parsing" && urlValidation.result && (
+                  <div className="url-suggestion">
+                    <span className="validation-status warning">
+                      <Icon name="warning" size="sm" /> This looks like a browser URL
+                    </span>
+                    <div className="suggestion-actions">
+                      <span className="suggested-url">Suggested: {urlValidation.result.base_url}</span>
+                      <button
+                        type="button"
+                        className="secondary-button small"
+                        onClick={handleUseSuggestedUrl}
+                      >
+                        Use Suggested
+                      </button>
+                    </div>
+                  </div>
+                )}
+                {urlValidation.status === "invalid" && (
+                  <span className="validation-status invalid">
+                    <Icon name="error" size="sm" /> Invalid URL
+                  </span>
+                )}
+              </label>
+              <label className="form-field">
+                SSH Key
+                <select
+                  value={selectedSshKey}
+                  onChange={(event) => setSelectedSshKey(event.target.value)}
+                >
+                  <option value="">Select SSH key (optional)...</option>
+                  {sshKeys.map((k) => (
+                    <option key={k.id} value={k.id}>
+                      {k.name}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <button
+                type="button"
+                className="secondary-button small"
+                onClick={() => setUseAdvancedUrl(false)}
+              >
+                Use owner/repo instead
+              </button>
+            </>
+          )}
+          {formError && (
+            <div className="error-message">
+              <p className="error-text">{formError}</p>
+            </div>
+          )}
+          <div className="dialog-actions">
+            <button className="secondary-button" onClick={handleClose} type="button">
+              <Icon name="cancel" size="sm" />
+              Cancel
+            </button>
+            <button className="primary-button" type="submit">
+              <Icon name="add" size="sm" />
+              {createMode === "clone" ? "Clone Repository" : "Create Blank Repository"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/session-card.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import type { Session } from "../api/sessions";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
 import { MobileActionSheet } from "./mobile-action-sheet";
-import type { IconName } from "@/components/ui/Icon";
+import type { IconName } from "./icon";
 
 export interface SessionCardProps {
 	session: Session;

apps/web/src/components/settings-tab-layout.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+interface Tab {
+  id: string;
+  label: string;
+  path: string;
+}
+
+interface SettingsTabLayoutProps {
+  tabs: Tab[];
+  children: React.ReactNode;
+  basePath: string;
+}
+
+export const SettingsTabLayout: React.FC<SettingsTabLayoutProps> = ({
+  tabs,
+  children,
+  basePath,
+}) => {
+  const location = useLocation();
+
+  return (
+    <div className="settings-layout">
+      <aside className="settings-sidebar">
+        <nav className="settings-nav">
+          {tabs.map((tab) => (
+            <Link
+              key={tab.id}
+              to={`${basePath}/${tab.path}`}
+              className={`settings-nav-link ${
+                location.pathname.includes(tab.path) ? "active" : ""
+              }`}
+            >
+              {tab.label}
+            </Link>
+          ))}
+        </nav>
+      </aside>
+      <main className="settings-content">{children}</main>
+    </div>
+  );
+};

apps/web/src/components/start-tool-fab.tsx

@@ -1,7 +1,7 @@
 /** Floating action button to start a tool from any page. */
 
 import { useState } from "react";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { ToolStarter } from "./tool-starter";
 import type { Workspace } from "../types/workspace";
 import { listAllWorkspaces } from "../api/workspaces";

apps/web/src/components/start-tool-modal.tsx

@@ -1,8 +1,8 @@
 /** Modal for starting a tool on a workspace. */
 
 import { useState } from "react";
-import { Icon } from "@/components/ui/Icon";
-import { listToolTypes, type ToolType } from "@/api/tool-types";
+import { Icon } from "./icon";
+import { listToolTypes, type ToolType } from "../api/tool_types";
 import { useAsyncData } from "../hooks/use-async-data";
 import type { Workspace } from "../types/workspace";
 

apps/web/src/components/syntax-highlighter.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+
+import { Icon } from "./icon";
+import { highlightCode, loadLanguage } from "../utils/language";
+
+interface SyntaxHighlighterProps {
+  code: string;
+  language: string;
+  showLineNumbers?: boolean;
+}
+
+export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
+  code,
+  language,
+  showLineNumbers = true,
+}) => {
+  const [highlighted, setHighlighted] = useState(">");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const highlight = async () => {
+      await loadLanguage(language);
+      setHighlighted(highlightCode(code, language));
+    };
+    void highlight();
+  }, [code, language]);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const lines = code.split("\n");
+
+  return (
+    <div className="syntax-highlighter">
+      <div className="highlighter-toolbar">
+        <span className="language-badge">{language}</span>
+        <button
+          className="copy-button"
+          onClick={handleCopy}
+          type="button"
+        >
+          {copied ? (
+            <>
+              <Icon name="success" size="sm" />
+              Copied!
+            </>
+          ) : (
+            <>
+              <Icon name="copy" size="sm" />
+              Copy
+            </>
+          )}
+        </button>
+      </div>
+      <div className="code-container">
+        {showLineNumbers && (
+          <div className="line-numbers">
+            {lines.map((_, i) => (
+              <div key={i} className="line-number">
+                {i + 1}
+              </div>
+            ))}
+          </div>
+        )}
+        <pre className="code-block">
+          <code
+            className={`language-${language}`}
+            dangerouslySetInnerHTML={{ __html: highlighted }}
+          />
+        </pre>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/terminal.tsx

@@ -0,0 +1,866 @@
+import React, {
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+	useCallback,
+} from "react";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import { WebLinksAddon } from "xterm-addon-web-links";
+import { WebglAddon } from "xterm-addon-webgl";
+import "xterm/css/xterm.css";
+
+import {
+	applyModifierToChar,
+	type ModifierKey,
+} from "../hooks/use-special-keys";
+
+export interface TerminalProps {
+	instanceId: string;
+	sessionId?: string;
+	onClose?: () => void;
+	isMobile?: boolean;
+	showControls?: boolean;
+	activeModifier?: ModifierKey | null;
+	onModifierChange?: (modifier: ModifierKey | null) => void;
+	onTerminalReady?: (
+		sendData: (data: string) => void,
+		connectionStatus:
+			| "connecting"
+			| "connected"
+			| "disconnected"
+			| "error"
+			| "resetting",
+		focusInput: () => void,
+		changeFontSize: (delta: number) => void,
+	) => void;
+}
+
+export interface TerminalRef {
+	fit: () => void;
+	focus: () => void;
+	reset: () => void;
+}
+
+const FONT_SIZE_KEY = "terminal-font-size";
+const MIN_FONT_SIZE = 4;
+const MAX_FONT_SIZE = 24;
+const RECONNECT_ATTEMPTS = 3;
+const RECONNECT_DELAY_BASE = 1000;
+
+export const TerminalComponent = React.forwardRef<TerminalRef, TerminalProps>(
+	(
+		{
+			instanceId,
+			sessionId,
+			onClose,
+			isMobile = false,
+			showControls = true,
+			activeModifier,
+			onModifierChange,
+			onTerminalReady,
+		},
+		ref,
+	) => {
+		const terminalRef = useRef<HTMLDivElement>(null);
+		const hiddenInputRef = useRef<HTMLInputElement>(null);
+		const wsRef = useRef<WebSocket | null>(null);
+		const termRef = useRef<Terminal | null>(null);
+		const fitAddonRef = useRef<FitAddon | null>(null);
+		const reconnectAttemptsRef = useRef(0);
+		const onTerminalReadyRef = useRef(onTerminalReady);
+		onTerminalReadyRef.current = onTerminalReady;
+		const handleFontSizeChangeRef = useRef<(delta: number) => void>(() => {});
+		const [status, setStatus] = useState<
+			"connecting" | "connected" | "disconnected" | "error" | "resetting"
+		>("connecting");
+		const [error, setError] = useState<string | null>(null);
+		const [showResetConfirm, setShowResetConfirm] = useState(false);
+		const activeModifierRef = useRef(activeModifier);
+		activeModifierRef.current = activeModifier;
+		const [fontSize, setFontSize] = useState(() => {
+			if (typeof window === "undefined") return isMobile ? 8 : 8;
+			const stored = localStorage.getItem(FONT_SIZE_KEY);
+			if (stored) {
+				const parsed = parseInt(stored, 10);
+				return Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, parsed));
+			}
+			return isMobile ? 8 : 8;
+		});
+		const lastPingRef = useRef<number>(0);
+		const heartbeatCheckRef = useRef<number | null>(null);
+		const isUnmountingRef = useRef(false);
+		const permanentErrorRef = useRef<string | null>(null);
+
+		const calculateFontSize = useCallback(() => {
+			return fontSize;
+		}, [fontSize]);
+
+		const connectWebSocket = useCallback(() => {
+			const apiUrl = import.meta.env.VITE_API_BASE_URL || "";
+			const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+			const wsHost = apiUrl.replace(/^https?:\/\//, "").replace(/\/+$/, "");
+			const wsPath = sessionId
+				? `/ws/tool-instances/${instanceId}/terminal/${sessionId}`
+				: `/ws/tool-instances/${instanceId}/terminal`;
+			const wsUrl = `${wsProtocol}//${wsHost}${wsPath}`;
+
+			// WebSocket connection established
+			const ws = new WebSocket(wsUrl);
+			ws.binaryType = "arraybuffer";
+			wsRef.current = ws;
+
+			ws.onopen = () => {
+				setStatus("connected");
+				setError(null);
+				reconnectAttemptsRef.current = 0;
+				lastPingRef.current = Date.now();
+
+				// Send current terminal size immediately on connect
+				if (termRef.current) {
+					const { cols, rows } = termRef.current;
+					// Only send if we have valid dimensions
+					if (cols > 0 && rows > 0) {
+						ws.send(JSON.stringify({ type: "resize", cols, rows }));
+					}
+				}
+
+				// Start heartbeat check
+				if (heartbeatCheckRef.current) {
+					window.clearInterval(heartbeatCheckRef.current);
+				}
+				heartbeatCheckRef.current = window.setInterval(() => {
+					const elapsed = Date.now() - lastPingRef.current;
+					if (elapsed > 60000) {
+						// No ping for 60 seconds, connection may be dead
+						ws.close(4000, "Heartbeat timeout");
+					}
+				}, 30000);
+			};
+
+			// Flow control: accumulate processed bytes and send ack
+			let ackAccumulator = 0;
+			const ACK_THRESHOLD = 4096;
+			let ackTimeout: ReturnType<typeof setTimeout> | null = null;
+
+			const flushAck = () => {
+				if (ackAccumulator > 0 && ws.readyState === WebSocket.OPEN) {
+					ws.send(JSON.stringify({ type: "ack", chars: ackAccumulator }));
+					ackAccumulator = 0;
+				}
+			};
+
+			ws.onmessage = (event) => {
+				if (!termRef.current) return;
+
+				if (event.data instanceof ArrayBuffer) {
+					const data = new Uint8Array(event.data);
+					termRef.current.write(data);
+
+					// Flow control: accumulate processed bytes
+					ackAccumulator += data.length;
+					if (ackAccumulator >= ACK_THRESHOLD) {
+						flushAck();
+					} else if (!ackTimeout) {
+						ackTimeout = setTimeout(() => {
+							ackTimeout = null;
+							flushAck();
+						}, 100);
+					}
+				} else if (typeof event.data === "string") {
+					try {
+						const msg = JSON.parse(event.data);
+						if (msg.type === "status") {
+							if (msg.status === "connected") {
+								setStatus("connected");
+								setError(null);
+								// Clear terminal and refit after reset/reconnect
+								if (termRef.current) {
+									termRef.current.clear();
+									requestAnimationFrame(() => {
+										if (fitAddonRef.current && termRef.current) {
+											fitAddonRef.current.fit();
+											const { cols, rows } = termRef.current;
+											const currentWs = wsRef.current;
+											if (currentWs?.readyState === WebSocket.OPEN) {
+												currentWs.send(
+													JSON.stringify({ type: "resize", cols, rows }),
+												);
+											}
+										}
+									});
+								}
+							} else if (msg.status === "resetting") {
+								setStatus("resetting");
+							}
+						} else if (msg.type === "ping") {
+							// Respond with pong and update last ping time
+							lastPingRef.current = Date.now();
+							if (ws.readyState === WebSocket.OPEN) {
+								ws.send(JSON.stringify({ type: "pong" }));
+							}
+						}
+					} catch {
+						termRef.current?.write(event.data);
+					}
+				}
+			};
+
+			ws.onclose = (event) => {
+				// Clean up heartbeat check
+				if (heartbeatCheckRef.current) {
+					window.clearInterval(heartbeatCheckRef.current);
+					heartbeatCheckRef.current = null;
+				}
+
+				// Permanent errors: do not retry
+				if (event.code === 4001 || event.code === 4003 || event.code === 4004) {
+					const reason = event.reason || `Instance error (code: ${event.code})`;
+					setStatus("error");
+					setError(reason);
+					permanentErrorRef.current = reason;
+					return;
+				}
+
+				if (event.code === 1000) {
+					setStatus("disconnected");
+					return;
+				}
+
+				if (event.code === 4000) {
+					// Server closed old connection for concurrent connection - don't reconnect
+					// The new connection is already established
+					return;
+				}
+
+				// Transient errors: attempt reconnection
+				setStatus("disconnected");
+				setError(`Connection closed (code: ${event.code})`);
+
+				if (reconnectAttemptsRef.current < RECONNECT_ATTEMPTS) {
+					reconnectAttemptsRef.current++;
+					const delay =
+						RECONNECT_DELAY_BASE *
+						Math.pow(2, reconnectAttemptsRef.current - 1);
+					setTimeout(() => {
+						if (isUnmountingRef.current) {
+							return;
+						}
+						if (document.visibilityState !== "hidden") {
+							connectWebSocket();
+						}
+					}, delay);
+				}
+			};
+
+			ws.onerror = () => {
+				setStatus("error");
+				setError("WebSocket error");
+			};
+
+			return ws;
+		}, [instanceId, sessionId]);
+
+		useEffect(() => {
+			if (!terminalRef.current) return;
+
+			// Initialize terminal
+			const currentFontSize = calculateFontSize();
+			const term = new Terminal({
+				cursorBlink: true,
+				fontSize: currentFontSize,
+				fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+				lineHeight: 1.2,
+				letterSpacing: 0,
+				allowTransparency: false,
+				scrollback: 10000,
+				ignoreBracketedPasteMode: false,
+				fastScrollSensitivity: 5,
+				scrollSensitivity: 1,
+				smoothScrollDuration: 0,
+				theme: {
+					background: "#1e1e1e",
+					foreground: "#d4d4d4",
+					cursor: "#d4d4d4",
+					selectionBackground: "#264f78",
+					black: "#000000",
+					red: "#cd3131",
+					green: "#0dbc79",
+					yellow: "#e5e510",
+					blue: "#2472c8",
+					magenta: "#bc3fbc",
+					cyan: "#11a8cd",
+					white: "#e5e5e5",
+					brightBlack: "#666666",
+					brightRed: "#f14c4c",
+					brightGreen: "#23d18b",
+					brightYellow: "#f5f543",
+					brightBlue: "#3b8eea",
+					brightMagenta: "#d670d6",
+					brightCyan: "#29b8db",
+					brightWhite: "#e5e5e5",
+				},
+			});
+
+			termRef.current = term;
+
+			const fitAddon = new FitAddon();
+			fitAddonRef.current = fitAddon;
+			term.loadAddon(fitAddon);
+			term.loadAddon(new WebLinksAddon());
+
+			// Load WebGL renderer for GPU acceleration, fall back to DOM
+			let webglAddon: WebglAddon | null = null;
+			try {
+				webglAddon = new WebglAddon();
+				term.loadAddon(webglAddon);
+				webglAddon.onContextLoss(() => {
+					console.warn("WebGL context lost, falling back to DOM renderer");
+					try {
+						webglAddon?.dispose();
+					} catch {
+						// ignore
+					}
+					webglAddon = null;
+					// Trigger a refit since cell dimensions may differ
+					requestAnimationFrame(() => fitTerminal());
+				});
+			} catch (e) {
+				console.warn("WebGL renderer failed to load, using DOM renderer", e);
+			}
+
+			const container = terminalRef.current;
+
+			// Define fitTerminal before connectWebSocket so it's available in onmessage
+			let lastSentCols = 0;
+			let lastSentRows = 0;
+			const fitTerminal = () => {
+				if (!fitAddonRef.current || !termRef.current) return;
+				try {
+					fitAddonRef.current.fit();
+				} catch {
+					// Ignore fit errors during initialization
+					return;
+				}
+				const { cols, rows } = termRef.current;
+				// Only send resize when dimensions actually changed
+				if (
+					cols > 0 &&
+					rows > 0 &&
+					(cols !== lastSentCols || rows !== lastSentRows)
+				) {
+					lastSentCols = cols;
+					lastSentRows = rows;
+					const currentWs = wsRef.current;
+					if (currentWs?.readyState === WebSocket.OPEN) {
+						currentWs.send(JSON.stringify({ type: "resize", cols, rows }));
+					}
+				}
+			};
+
+			// Open xterm first (must happen before fit)
+			term.open(container);
+			term.focus();
+			const ws = connectWebSocket();
+
+			// Mobile touch scroll.
+			// In normal mode xterm.js has a scrollable viewport; in alternate
+			// screen (tmux/vim) there is no scrollback and the only way to
+			// scroll is to send mouse-wheel protocol sequences to the
+			// application.  We detect which situation we're in by checking
+			// whether the viewport has scrollable height.
+			let touchCleanup: (() => void) | undefined;
+			if (isMobile) {
+				let startY = 0;
+				let startX = 0;
+				let isScrolling = false;
+
+				const onTouchStart = (e: TouchEvent) => {
+					if (e.touches.length === 1) {
+						startY = e.touches[0].clientY;
+						startX = e.touches[0].clientX;
+						isScrolling = false;
+					}
+				};
+				const onTouchMove = (e: TouchEvent) => {
+					if (e.touches.length !== 1) return;
+					const touch = e.touches[0];
+					const deltaY = startY - touch.clientY;
+					const deltaX = Math.abs(startX - touch.clientX);
+					if (!isScrolling) {
+						if (Math.abs(deltaY) > deltaX && Math.abs(deltaY) > 4) {
+							isScrolling = true;
+						}
+					}
+					if (isScrolling) {
+						e.preventDefault();
+						const viewport = container.querySelector(
+							".xterm-viewport",
+						) as HTMLElement | null;
+						if (!viewport) return;
+
+						// If the viewport is scrollable, scroll it directly.
+						// Otherwise we are in alternate screen (tmux/vim) and must
+						// send SGR 1006 mouse-wheel protocol data.
+						const hasScrollback = viewport.scrollHeight > viewport.clientHeight;
+						if (hasScrollback) {
+							viewport.scrollTop += deltaY;
+						} else {
+							const ws = wsRef.current;
+							if (ws?.readyState === WebSocket.OPEN && termRef.current) {
+								// Use the cursor position as the wheel location so
+								// tmux knows which pane to scroll.
+								const buf = termRef.current.buffer.active;
+								const col = buf.cursorX + 1;
+								const row = buf.cursorY + 1;
+								// SGR 1006: 64 = wheel-up, 65 = wheel-down
+								const btn = deltaY > 0 ? 64 : 65;
+								ws.send(`\x1b[<${btn};${col};${row}M`);
+							}
+						}
+						startY = touch.clientY;
+					}
+				};
+				const onTouchEnd = () => {
+					isScrolling = false;
+				};
+
+				container.addEventListener("touchstart", onTouchStart, {
+					passive: true,
+					capture: true,
+				});
+				container.addEventListener("touchmove", onTouchMove, {
+					passive: false,
+					capture: true,
+				});
+				container.addEventListener("touchend", onTouchEnd, {
+					capture: true,
+				});
+				touchCleanup = () => {
+					container.removeEventListener("touchstart", onTouchStart, {
+						capture: true,
+					});
+					container.removeEventListener("touchmove", onTouchMove, {
+						capture: true,
+					});
+					container.removeEventListener("touchend", onTouchEnd, {
+						capture: true,
+					});
+				};
+			}
+
+			// Initial fit after layout settles (terminal must be opened first)
+			let fitAttempts = 0;
+			const doInitialFit = () => {
+				if (!container.isConnected) return;
+				fitAttempts++;
+				// Ensure container has dimensions before fitting
+				if (container.clientWidth > 0 && container.clientHeight > 0) {
+					fitTerminal();
+				} else if (fitAttempts < 50) {
+					// Container not ready yet, try again (max 50 attempts ~ 1s)
+					requestAnimationFrame(doInitialFit);
+				}
+			};
+			requestAnimationFrame(doInitialFit);
+
+			// Refit after font load (metrics may change)
+			document.fonts.ready.then(() => {
+				requestAnimationFrame(() => fitTerminal());
+			});
+
+			// Handle terminal input
+			term.onData((data) => {
+				const currentWs = wsRef.current;
+				if (currentWs?.readyState !== WebSocket.OPEN) return;
+
+				// Apply active modifier to single-character input
+				const modifier = activeModifierRef.current;
+				if (modifier && data.length === 1) {
+					const modified = applyModifierToChar(data, modifier);
+					if (modified) {
+						currentWs.send(modified);
+						onModifierChange?.(null);
+						return;
+					}
+				}
+
+				currentWs.send(data);
+			});
+
+			// Handle container resize with ResizeObserver for accurate dimension tracking
+			let resizeTimeout: ReturnType<typeof setTimeout>;
+			let lastWidth = 0;
+			let lastHeight = 0;
+			const resizeObserver = new ResizeObserver((entries) => {
+				const entry = entries[0];
+				if (!entry) return;
+
+				const { width, height } = entry.contentRect;
+				// Only trigger if dimensions actually changed
+				if (width === lastWidth && height === lastHeight) return;
+				lastWidth = width;
+				lastHeight = height;
+
+				clearTimeout(resizeTimeout);
+				resizeTimeout = setTimeout(() => {
+					requestAnimationFrame(() => {
+						if (!container.isConnected) return;
+						fitTerminal();
+					});
+				}, 50);
+			});
+			resizeObserver.observe(container);
+
+			// Window resize fallback (for viewport changes that don't affect container dimensions)
+			let windowResizeTimeout: ReturnType<typeof setTimeout>;
+			const handleWindowResize = () => {
+				clearTimeout(windowResizeTimeout);
+				windowResizeTimeout = setTimeout(() => {
+					requestAnimationFrame(() => fitTerminal());
+				}, 250);
+			};
+			window.addEventListener("resize", handleWindowResize);
+
+			// Refit after mobile header auto-hides (3s delay + 0.3s transition)
+			const headerHideTimeout = setTimeout(() => {
+				fitTerminal();
+			}, 4000);
+
+			// Notify parent about terminal readiness
+			if (onTerminalReadyRef.current) {
+				const sendData = (data: string) => {
+					const currentWs = wsRef.current;
+					if (currentWs?.readyState === WebSocket.OPEN) {
+						currentWs.send(data);
+					}
+				};
+				const focusInput = () => {
+					termRef.current?.focus();
+				};
+				const changeFontSize = (delta: number) => {
+					handleFontSizeChangeRef.current(delta);
+				};
+				onTerminalReadyRef.current(
+					sendData,
+					status,
+					focusInput,
+					changeFontSize,
+				);
+			}
+
+			// Visibility API for reconnection
+			const handleVisibilityChange = () => {
+				if (
+					document.visibilityState === "visible" &&
+					ws &&
+					ws.readyState !== WebSocket.OPEN
+				) {
+					if (permanentErrorRef.current) {
+						return;
+					}
+					reconnectAttemptsRef.current = 0;
+					connectWebSocket();
+				}
+			};
+			document.addEventListener("visibilitychange", handleVisibilityChange);
+
+			return () => {
+				isUnmountingRef.current = true;
+				clearTimeout(resizeTimeout);
+				clearTimeout(windowResizeTimeout);
+				clearTimeout(headerHideTimeout);
+				resizeObserver.disconnect();
+				window.removeEventListener("resize", handleWindowResize);
+				document.removeEventListener(
+					"visibilitychange",
+					handleVisibilityChange,
+				);
+				if (touchCleanup) touchCleanup();
+				if (ws) {
+					ws.close(1000, "Component unmounting");
+				}
+				if (heartbeatCheckRef.current) {
+					window.clearInterval(heartbeatCheckRef.current);
+					heartbeatCheckRef.current = null;
+				}
+				// Dispose WebGL addon BEFORE the terminal to avoid race with
+				// RenderService.setRenderer accessing a disposed renderer
+				if (webglAddon) {
+					try {
+						webglAddon.dispose();
+					} catch {
+						// Ignore disposal errors from partially torn-down terminal
+					}
+					webglAddon = null;
+				}
+				try {
+					term.dispose();
+				} catch {
+					// Ignore disposal errors from partially torn-down terminal
+				}
+			};
+		}, [instanceId, connectWebSocket]);
+
+		useImperativeHandle(ref, () => ({
+			fit: () => {
+				if (fitAddonRef.current && termRef.current) {
+					try {
+						fitAddonRef.current.fit();
+						const { cols, rows } = termRef.current;
+						if (
+							wsRef.current?.readyState === WebSocket.OPEN &&
+							cols > 0 &&
+							rows > 0
+						) {
+							wsRef.current.send(
+								JSON.stringify({ type: "resize", cols, rows }),
+							);
+						}
+					} catch {
+						// Ignore fit errors
+					}
+				}
+			},
+			focus: () => {
+				termRef.current?.focus();
+			},
+			reset: () => {
+				if (wsRef.current?.readyState === WebSocket.OPEN) {
+					wsRef.current.send(JSON.stringify({ type: "reset" }));
+				}
+			},
+		}));
+
+		// Update parent about status changes
+		useEffect(() => {
+			if (onTerminalReady && termRef.current) {
+				const sendData = (data: string) => {
+					if (wsRef.current?.readyState === WebSocket.OPEN) {
+						wsRef.current.send(data);
+					}
+				};
+				const focusInput = () => {
+					termRef.current?.focus();
+				};
+				const changeFontSize = (delta: number) => {
+					handleFontSizeChangeRef.current(delta);
+				};
+				onTerminalReady(sendData, status, focusInput, changeFontSize);
+			}
+		}, [status, onTerminalReady]);
+
+		const handleFontSizeChange = (delta: number) => {
+			const newSize = Math.max(
+				MIN_FONT_SIZE,
+				Math.min(MAX_FONT_SIZE, fontSize + delta),
+			);
+			setFontSize(newSize);
+			localStorage.setItem(FONT_SIZE_KEY, newSize.toString());
+			if (termRef.current && fitAddonRef.current) {
+				termRef.current.options.fontSize = newSize;
+				requestAnimationFrame(() => {
+					if (termRef.current && fitAddonRef.current) {
+						try {
+							fitAddonRef.current.fit();
+							const { cols, rows } = termRef.current;
+							if (wsRef.current?.readyState === WebSocket.OPEN) {
+								wsRef.current.send(
+									JSON.stringify({
+										type: "resize",
+										cols,
+										rows,
+									}),
+								);
+							}
+						} catch {
+							// Ignore fit errors during re-initialization
+						}
+					}
+				});
+			}
+		};
+		handleFontSizeChangeRef.current = handleFontSizeChange;
+
+		const handleCopy = async () => {
+			if (!termRef.current) return;
+			const selection = termRef.current.getSelection();
+			if (selection) {
+				try {
+					await navigator.clipboard.writeText(selection);
+				} catch {
+					// Fallback for older browsers
+					const textarea = document.createElement("textarea");
+					textarea.value = selection;
+					document.body.appendChild(textarea);
+					textarea.select();
+					document.execCommand("copy");
+					document.body.removeChild(textarea);
+				}
+			}
+		};
+
+		const handlePaste = async () => {
+			try {
+				const text = await navigator.clipboard.readText();
+				if (wsRef.current?.readyState === WebSocket.OPEN) {
+					wsRef.current.send(text);
+				}
+			} catch {
+				// Clipboard API not available
+			}
+		};
+
+		// Focus terminal on mobile to keep keyboard open
+		const handleTerminalClick = () => {
+			if (isMobile && termRef.current) {
+				termRef.current.focus();
+			}
+		};
+
+		return (
+			<div
+				className={`terminal-wrapper ${isMobile ? "mobile" : ""} ${!showControls ? "no-controls" : ""}`}
+			>
+				{showControls && (
+					<div className="terminal-header">
+						<div className="terminal-header-left">
+							<div className="terminal-status">
+								<span
+									className={`status-dot ${status}`}
+									aria-label={`Terminal status: ${status}`}
+								/>
+								<span className="status-text">
+									{status === "resetting"
+										? "Resetting..."
+										: reconnectAttemptsRef.current > 0 && status !== "connected"
+											? `Reconnecting (${reconnectAttemptsRef.current}/${RECONNECT_ATTEMPTS})...`
+											: status}
+								</span>
+							</div>
+							{isMobile && (
+								<>
+									<button
+										className="terminal-header-button"
+										onClick={handleCopy}
+										type="button"
+										aria-label="Copy selection"
+									>
+										Copy
+									</button>
+									<button
+										className="terminal-header-button"
+										onClick={handlePaste}
+										type="button"
+										aria-label="Paste from clipboard"
+									>
+										Paste
+									</button>
+								</>
+							)}
+						</div>
+						<div className="terminal-header-right">
+							<button
+								className="terminal-header-button"
+								onClick={() => handleFontSizeChange(-1)}
+								type="button"
+								aria-label="Decrease font size"
+							>
+								A-
+							</button>
+							<button
+								className="terminal-header-button"
+								onClick={() => handleFontSizeChange(1)}
+								type="button"
+								aria-label="Increase font size"
+							>
+								A+
+							</button>
+							<button
+								className="terminal-header-button"
+								onClick={() => setShowResetConfirm(true)}
+								type="button"
+								aria-label="Reset terminal"
+							>
+								Reset
+							</button>
+							{onClose && (
+								<button
+									className="terminal-close"
+									onClick={onClose}
+									type="button"
+								>
+									Close
+								</button>
+							)}
+						</div>
+					</div>
+				)}
+				{showResetConfirm && (
+					<div className="terminal-reset-confirm">
+						<div className="terminal-reset-confirm-content">
+							<p>
+								Reset terminal? This will kill the current shell session and
+								start fresh.
+							</p>
+							<div className="terminal-reset-confirm-buttons">
+								<button
+									className="terminal-reset-confirm-button cancel"
+									onClick={() => setShowResetConfirm(false)}
+									type="button"
+								>
+									Cancel
+								</button>
+								<button
+									className="terminal-reset-confirm-button confirm"
+									onClick={() => {
+										setShowResetConfirm(false);
+										if (wsRef.current?.readyState === WebSocket.OPEN) {
+											wsRef.current.send(JSON.stringify({ type: "reset" }));
+										}
+									}}
+									type="button"
+								>
+									Reset
+								</button>
+							</div>
+						</div>
+					</div>
+				)}
+				{error && (
+					<div className="terminal-error">
+						{error}
+						{status === "error" && (
+							<button
+								className="terminal-reconnect"
+								onClick={() => {
+									reconnectAttemptsRef.current = 0;
+									connectWebSocket();
+								}}
+								type="button"
+							>
+								Reconnect
+							</button>
+						)}
+					</div>
+				)}
+				<div
+					ref={terminalRef}
+					className="terminal-container"
+					onClick={handleTerminalClick}
+				/>
+				{isMobile && (
+					<input
+						ref={hiddenInputRef}
+						type="text"
+						className="terminal-hidden-input"
+						aria-hidden="true"
+					/>
+				)}
+			</div>
+		);
+	},
+);
+
+TerminalComponent.displayName = "TerminalComponent";

apps/web/src/components/tool-starter.tsx

@@ -1,10 +1,10 @@
 /** Unified tool starter — workspace-first, fetches real tool types and config profiles. */
 
 import { useState, useEffect, useCallback } from "react";
-import { Icon } from "@/components/ui/Icon";
-import { listToolTypes, type ToolType } from "@/api/tool-types";
+import { Icon } from "./icon";
+import { listToolTypes, type ToolType } from "../api/tool_types";
 import { listConfigProfiles, type ConfigProfile } from "../api/config_profiles";
-import { listSSHKeys, type SSHKey } from "@/api/ssh-keys";
+import { listSSHKeys, type SSHKey } from "../api/ssh_keys";
 import type { Workspace } from "../types/workspace";
 import type { ToolInstance } from "../api/sessions";
 

apps/web/src/components/tools-bottom-sheet.tsx

@@ -1,5 +1,5 @@
 import { useLocation, useNavigate } from "react-router-dom";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 
 interface ToolsBottomSheetProps {
   isOpen: boolean;

apps/web/src/components/ui/Icon.tsx

@@ -1,173 +1,173 @@
 import React from "react";
 import {
-  House,
-  Folder,
-  GitBranch,
-  Gear,
-  User,
-  SignOut,
-  Plus,
-  PencilSimple,
-  Trash,
-  FloppyDisk,
-  X,
-  ArrowsClockwise,
-  Copy,
-  MagnifyingGlass,
-  List,
-  Check,
-  Warning,
-  Info,
-  Spinner,
-  GitCommit,
-  GitMerge,
-  ClockCounterClockwise,
-  ArrowDown,
-  ArrowUp,
-  File,
-  FileText,
-  Image,
-  Binary,
-  Code,
-  ArrowSquareOut,
-  Play,
-  Stop,
-  Terminal,
-  ArrowLeft,
-  Bell,
-  DotsSixVertical,
+	House,
+	Folder,
+	GitBranch,
+	Gear,
+	User,
+	SignOut,
+	Plus,
+	PencilSimple,
+	Trash,
+	FloppyDisk,
+	X,
+	ArrowsClockwise,
+	Copy,
+	MagnifyingGlass,
+	List,
+	Check,
+	Warning,
+	Info,
+	Spinner,
+	GitCommit,
+	GitMerge,
+	ClockCounterClockwise,
+	ArrowDown,
+	ArrowUp,
+	File,
+	FileText,
+	Image,
+	Binary,
+	Code,
+	ArrowSquareOut,
+	Play,
+	Stop,
+	Terminal,
+	ArrowLeft,
 } from "@phosphor-icons/react";
 
 export type IconName =
-  | "dashboard"
-  | "projects"
-  | "repositories"
-  | "settings"
-  | "profile"
-  | "logout"
-  | "add"
-  | "edit"
-  | "delete"
-  | "save"
-  | "cancel"
-  | "refresh"
-  | "copy"
-  | "search"
-  | "menu"
-  | "close"
-  | "success"
-  | "error"
-  | "warning"
-  | "info"
-  | "loading"
-  | "branch"
-  | "commit"
-  | "merge"
-  | "history"
-  | "pull"
-  | "push"
-  | "fetch"
-  | "file"
-  | "folder"
-  | "code"
-  | "document"
-  | "image"
-  | "binary"
-  | "external"
-  | "play"
-  | "stop"
-  | "terminal"
-  | "arrow-left"
-  | "undo"
-  | "bell"
-  | "drag";
+	| "dashboard"
+	| "projects"
+	| "repositories"
+	| "settings"
+	| "profile"
+	| "logout"
+	| "add"
+	| "edit"
+	| "delete"
+	| "save"
+	| "cancel"
+	| "refresh"
+	| "copy"
+	| "search"
+	| "menu"
+	| "close"
+	| "success"
+	| "error"
+	| "warning"
+	| "info"
+	| "loading"
+	| "branch"
+	| "commit"
+	| "merge"
+	| "history"
+	| "pull"
+	| "push"
+	| "fetch"
+	| "file"
+	| "folder"
+	| "code"
+	| "document"
+	| "image"
+	| "binary"
+	| "external"
+	| "play"
+	| "stop"
+	| "terminal"
+	| "arrow-left"
+	| "undo";
 
-const iconMap: Record<IconName, React.ComponentType<{ size?: number | string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }>> = {
-  dashboard: House,
-  projects: Folder,
-  repositories: GitBranch,
-  settings: Gear,
-  profile: User,
-  logout: SignOut,
-  add: Plus,
-  edit: PencilSimple,
-  delete: Trash,
-  save: FloppyDisk,
-  cancel: X,
-  refresh: ArrowsClockwise,
-  copy: Copy,
-  search: MagnifyingGlass,
-  menu: List,
-  close: X,
-  success: Check,
-  error: X,
-  warning: Warning,
-  info: Info,
-  loading: Spinner,
-  branch: GitBranch,
-  commit: GitCommit,
-  merge: GitMerge,
-  history: ClockCounterClockwise,
-  pull: ArrowDown,
-  push: ArrowUp,
-  fetch: ArrowsClockwise,
-  file: File,
-  folder: Folder,
-  code: Code,
-  document: FileText,
-  image: Image,
-  binary: Binary,
-  external: ArrowSquareOut,
-  play: Play,
-  stop: Stop,
-  terminal: Terminal,
-  "arrow-left": ArrowLeft,
-  undo: ClockCounterClockwise,
-  bell: Bell,
-  drag: DotsSixVertical,
+const iconMap: Record<
+	IconName,
+	React.ComponentType<{
+		size?: number | string;
+		weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+	}>
+> = {
+	dashboard: House,
+	projects: Folder,
+	repositories: GitBranch,
+	settings: Gear,
+	profile: User,
+	logout: SignOut,
+	add: Plus,
+	edit: PencilSimple,
+	delete: Trash,
+	save: FloppyDisk,
+	cancel: X,
+	refresh: ArrowsClockwise,
+	copy: Copy,
+	search: MagnifyingGlass,
+	menu: List,
+	close: X,
+	success: Check,
+	error: X,
+	warning: Warning,
+	info: Info,
+	loading: Spinner,
+	branch: GitBranch,
+	commit: GitCommit,
+	merge: GitMerge,
+	history: ClockCounterClockwise,
+	pull: ArrowDown,
+	push: ArrowUp,
+	fetch: ArrowsClockwise,
+	file: File,
+	folder: Folder,
+	code: Code,
+	document: FileText,
+	image: Image,
+	binary: Binary,
+	external: ArrowSquareOut,
+	play: Play,
+	stop: Stop,
+	terminal: Terminal,
+	"arrow-left": ArrowLeft,
+	undo: ClockCounterClockwise,
 };
 
 export interface IconProps {
-  name: IconName;
-  size?: "sm" | "md" | "lg" | "xl";
-  color?: string;
-  weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
-  className?: string;
-  ariaLabel?: string;
+	name: IconName;
+	size?: "sm" | "md" | "lg" | "xl";
+	color?: string;
+	weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+	className?: string;
+	ariaLabel?: string;
 }
 
 const sizeMap: Record<NonNullable<IconProps["size"]>, number> = {
-  sm: 16,
-  md: 20,
-  lg: 24,
-  xl: 32,
+	sm: 16,
+	md: 20,
+	lg: 24,
+	xl: 32,
 };
 
 export const Icon: React.FC<IconProps> = ({
-  name,
-  size = "md",
-  color,
-  weight = "regular",
-  className,
-  ariaLabel,
+	name,
+	size = "md",
+	color,
+	weight = "regular",
+	className,
+	ariaLabel,
 }) => {
-  const IconComponent = iconMap[name];
-  const sizeValue = sizeMap[size];
+	const IconComponent = iconMap[name];
+	const sizeValue = sizeMap[size];
 
-  if (!IconComponent) {
-    console.warn(`Icon "${name}" not found`);
-    return null;
-  }
+	if (!IconComponent) {
+		console.warn(`Icon "${name}" not found`);
+		return null;
+	}
 
-  return (
-    <span
-      className={`icon icon-${size}${className ? ` ${className}` : ""}`}
-      style={{ color }}
-      aria-label={ariaLabel}
-      aria-hidden={!ariaLabel}
-      role="img"
-    >
-      <IconComponent size={sizeValue} weight={weight} />
-    </span>
-  );
+	return (
+		<span
+			className={`icon icon-${size}${className ? ` ${className}` : ""}`}
+			style={{ color }}
+			aria-label={ariaLabel}
+			aria-hidden={!ariaLabel}
+			role="img"
+		>
+			<IconComponent size={sizeValue} weight={weight} />
+		</span>
+	);
 };

apps/web/src/components/workspace-card.tsx

@@ -1,7 +1,7 @@
 /** Card component for displaying a workspace. */
 
 import { Link } from "react-router-dom";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { WorkspaceInstanceChips } from "./workspace-instance-chips";
 import type { Workspace } from "../types/workspace";
 

apps/web/src/components/workspace-create-form.tsx

@@ -1,13 +1,13 @@
 /** Unified workspace creation form with project/repo/branch selectors. */
 
 import { useState, useEffect, useCallback } from "react";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "./icon";
 import { listProjects } from "../api/projects";
-import { listRepositories } from "@/api/git-repositories";
+import { listRepositories } from "../api/git_repositories";
 import { createWorkspaceTopLevel } from "../api/workspaces";
 import { useGitRepo } from "../hooks/use-git-repo";
 import type { ProjectWithRepos } from "../types";
-import type { GitRepository } from "@/api/git-repositories";
+import type { GitRepository } from "../api/git_repositories";
 
 export interface WorkspaceCreateFormProps {
 	/** Called after successful creation. */

apps/web/src/components/workspace-header.tsx

@@ -0,0 +1,48 @@
+import { Link } from "react-router-dom";
+import { Icon } from "./icon";
+
+interface WorkspaceHeaderProps {
+  project: {
+    id: string;
+    name: string;
+    description?: string | null;
+  };
+  currentRepo?: {
+    id: string;
+    name: string;
+  } | null;
+}
+
+export const WorkspaceHeader = ({ project, currentRepo }: WorkspaceHeaderProps) => {
+  return (
+    <div className="workspace-header">
+      <div className="workspace-header-left">
+        <div className="workspace-header-icon">
+          <Icon name="folder" size="lg" />
+        </div>
+        <div className="workspace-header-info">
+          <h1 className="workspace-header-title">{project.name}</h1>
+          {currentRepo && (
+            <span className="workspace-header-subtitle">{currentRepo.name}</span>
+          )}
+        </div>
+      </div>
+      <div className="workspace-header-actions">
+        <Link
+          className="workspace-header-action-btn"
+          to={`/projects/${project.id}/repositories/${currentRepo?.id || ""}/history`}
+        >
+          <Icon name="history" size="sm" />
+          History
+        </Link>
+        <Link
+          className="workspace-header-action-btn"
+          to={`/projects/${project.id}/settings`}
+        >
+          <Icon name="settings" size="sm" />
+          Settings
+        </Link>
+      </div>
+    </div>
+  );
+};

apps/web/src/hooks/use-git-repo.ts

@@ -21,7 +21,7 @@ import {
 	type Branch,
 	type CommitHistoryResponse,
 	type CommitDetail,
-} from "@/api/git-repositories";
+} from "../api/git_repositories";
 
 export interface GitStatus {
 	branch: string;

apps/web/src/pages/RepoWorkspacePage.tsx

@@ -198,7 +198,11 @@ export const RepoWorkspace = () => {
 						)}
 						<main className="workspace-main">
 							{selectedRepoId && (
-								<FileEditor projectId={projectId!} repoId={selectedRepoId} gitStatus={gitStatus} />
+								<FileEditor
+									projectId={projectId!}
+									repoId={selectedRepoId}
+									gitStatus={gitStatus}
+								/>
 							)}
 						</main>
 					</div>

apps/web/src/pages/config-profiles.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { ErrorState, LoadingState } from "../components/data-states";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "../components/icon";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
 import { extractErrorMessage } from "../utils/errors";
 import { MobileListView } from "../components/mobile-list-view";
@@ -20,7 +20,7 @@ import {
 } from "../api/config_profiles";
 import { listProjects } from "../api/projects";
 import type { ProjectWithRepos } from "../types";
-import { listToolTypes, type ToolType } from "@/api/tool-types";
+import { listToolTypes, type ToolType } from "../api/tool_types";
 import { GitMountEditor } from "../components/git-mount-editor";
 
 type Status = "loading" | "ready" | "error";

apps/web/src/pages/dashboard.test.tsx

@@ -0,0 +1,81 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { HomePage } from "./dashboard";
+
+const mockDashboard = vi.fn();
+const mockSessions = vi.fn();
+const mockProjects = vi.fn();
+const mockRepos = vi.fn();
+
+vi.mock("../api/dashboard", () => ({
+  getDashboardSummary: (...args: unknown[]) => mockDashboard(...args)
+}));
+
+vi.mock("../api/sessions", () => ({
+  getUserSessions: (...args: unknown[]) => mockSessions(...args),
+  createInstance: vi.fn(),
+  startInstance: vi.fn(),
+  stopInstance: vi.fn(),
+  deleteInstance: vi.fn(),
+  recreateInstanceTunnel: vi.fn()
+}));
+
+vi.mock("../api/projects", () => ({
+  listProjects: (...args: unknown[]) => mockProjects(...args)
+}));
+
+vi.mock("../api/git_repositories", () => ({
+  listRepositories: (...args: unknown[]) => mockRepos(...args)
+}));
+
+vi.mock("../api/tool_types", () => ({
+  listToolTypes: vi.fn().mockResolvedValue([])
+}));
+
+describe("HomePage", () => {
+  beforeEach(() => {
+    mockDashboard.mockReset();
+    mockSessions.mockReset();
+    mockProjects.mockReset();
+    mockRepos.mockReset();
+  });
+
+  it("shows overview sections", async () => {
+    mockDashboard.mockResolvedValue({ projects: 1, repositories: 2, sshKeys: 3, recentActivity: [] });
+    mockSessions.mockResolvedValue([]);
+    mockProjects.mockResolvedValue([]);
+    mockRepos.mockResolvedValue([]);
+
+    render(
+      <MemoryRouter>
+        <HomePage />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("Loading overview...")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getAllByText("Open sessions").length).toBeGreaterThan(0);
+      expect(screen.getByText("Available projects")).toBeInTheDocument();
+    });
+  });
+
+  it("shows retry action when home load fails", async () => {
+    mockDashboard.mockRejectedValueOnce(new Error("failed"));
+    mockSessions.mockRejectedValueOnce(new Error("failed"));
+    mockProjects.mockRejectedValueOnce(new Error("failed"));
+
+    render(
+      <MemoryRouter>
+        <HomePage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Unable to load your workspace overview.")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getAllByRole("button", { name: "Retry" })[0]);
+  });
+});

apps/web/src/pages/dashboard.tsx

@@ -0,0 +1,254 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { getDashboardSummary, type DashboardSummary } from "../api/dashboard";
+import {
+	getUserSessions,
+	checkInstanceHealth,
+	type Session as SessionApi,
+	type InstanceHealth,
+} from "../api/sessions";
+import { ErrorState, LoadingState } from "../components/data-states";
+import { SessionList } from "../components/session-list";
+import { useInstanceActions } from "../hooks/use-instance-actions";
+
+type HomeStatus = "loading" | "ready" | "error";
+
+const summaryCards = [
+	{ label: "Open sessions", key: "openSessions" },
+	{ label: "Projects", key: "projects" },
+	{ label: "Repositories", key: "repositories" },
+] as const;
+
+type SessionView = SessionApi;
+
+export const HomePage = () => {
+	const navigate = useNavigate();
+	const [status, setStatus] = useState<HomeStatus>("loading");
+	const [summary, setSummary] = useState<DashboardSummary | null>(null);
+	const [sessions, setSessions] = useState<SessionView[]>([]);
+	const [tunnelHealth, setTunnelHealth] = useState<
+		Record<string, InstanceHealth>
+	>({});
+	const safeSessions = Array.isArray(sessions) ? sessions : [];
+
+	const loadHome = useCallback(async () => {
+		setStatus("loading");
+		try {
+			const [dashboard, sessionData] = await Promise.all([
+				getDashboardSummary(),
+				getUserSessions(),
+			]);
+			setSummary(dashboard);
+			setSessions(sessionData as SessionView[]);
+			setStatus("ready");
+		} catch {
+			setStatus("error");
+		}
+	}, []);
+
+	useEffect(() => {
+		void loadHome();
+	}, [loadHome]);
+
+	const {
+		loadingSessionId: actionBusy,
+		handleOpen,
+		handleStart,
+		handleStop,
+		handleDelete,
+		handleRecreateTunnel,
+	} = useInstanceActions({ onRefresh: loadHome });
+
+	// Poll tunnel health every 30 seconds for running instances
+	useEffect(() => {
+		const checkHealth = async () => {
+			const runningSessions = safeSessions.filter(
+				(s) => s.status === "running" && s.url,
+			);
+			for (const session of runningSessions) {
+				try {
+					const health = await checkInstanceHealth(
+						session.project_id,
+						session.repository_id,
+						session.id,
+					);
+					setTunnelHealth((prev) => ({
+						...prev,
+						[session.id]: health,
+					}));
+				} catch {
+					setTunnelHealth((prev) => ({
+						...prev,
+						[session.id]: {
+							healthy: false,
+							container_status: "unknown",
+							container_health: null,
+							container_exit_code: null,
+							tunnel_status: "error",
+							tunnel_status_code: null,
+							probe_status: "error",
+							last_probe_output: null,
+							error: "check failed",
+						},
+					}));
+				}
+			}
+		};
+
+		void checkHealth();
+		const interval = setInterval(() => {
+			void checkHealth();
+		}, 30000);
+		return () => clearInterval(interval);
+	}, [safeSessions]);
+
+	const activeSessions = useMemo(
+		() =>
+			safeSessions.filter((session) =>
+				["running", "building", "pending"].includes(session.status),
+			),
+		[safeSessions],
+	);
+
+	return (
+		<section className="stack home-page">
+			<header className="home-hero card">
+				<div className="stack-sm">
+					<p className="eyebrow">Workspace overview</p>
+					<h1>Home</h1>
+					<p className="muted">
+						Open sessions, available projects, and the fastest path back into
+						work.
+					</p>
+				</div>
+				<div className="home-hero-actions">
+					<button
+						className="primary-button"
+						type="button"
+						onClick={() => navigate("/projects")}
+					>
+						New Project
+					</button>
+					<button
+						className="secondary-button"
+						type="button"
+						onClick={() => navigate("/settings")}
+					>
+						Settings
+					</button>
+				</div>
+			</header>
+
+			{status === "loading" && <LoadingState message="Loading overview..." />}
+
+			{status === "error" && (
+				<ErrorState
+					message="Unable to load your workspace overview."
+					onRetry={() => void loadHome()}
+				/>
+			)}
+
+			{status === "ready" && summary && (
+				<>
+					<div className="home-summary-grid">
+						{summaryCards.map((card) => (
+							<article className="card home-summary-card" key={card.label}>
+								<p className="card-label">{card.label}</p>
+								<p className="card-value">
+									{card.key === "openSessions"
+										? activeSessions.length
+										: card.key === "projects"
+											? summary.projects
+											: summary.repositories}
+								</p>
+							</article>
+						))}
+					</div>
+
+					<section className="card stack home-section">
+						<div className="page-header">
+							<div>
+								<p className="eyebrow">Open sessions</p>
+								<h2>
+									{
+										safeSessions.filter((s) =>
+											[
+												"running",
+												"building",
+												"pending",
+												"starting",
+												"probing",
+												"unhealthy",
+											].includes(s.status),
+										).length
+									}
+								</h2>
+							</div>
+						</div>
+						<SessionList
+							sessions={safeSessions}
+							onOpen={handleOpen}
+							onStop={handleStop}
+							onDelete={handleDelete}
+							onRecreateTunnel={handleRecreateTunnel}
+							actionBusyId={actionBusy}
+							tunnelHealth={tunnelHealth}
+							showGrouping={false}
+							emptyMessage="No active sessions right now."
+						/>
+					</section>
+
+					<section className="card stack home-section">
+						<div className="page-header">
+							<div>
+								<p className="eyebrow">Workspaces</p>
+								<h2>Quick access</h2>
+							</div>
+							<button
+								className="secondary-button"
+								type="button"
+								onClick={() => navigate("/workspaces")}
+							>
+								View all
+							</button>
+						</div>
+						<p className="muted">
+							Use the floating button to start a tool in any workspace.
+						</p>
+					</section>
+
+					{safeSessions.filter((s) => ["stopped", "error"].includes(s.status))
+						.length > 0 && (
+						<section className="card stack home-section">
+							<div className="page-header">
+								<div>
+									<p className="eyebrow">Recent sessions</p>
+									<h2>
+										{
+											safeSessions.filter((s) =>
+												["stopped", "error"].includes(s.status),
+											).length
+										}
+									</h2>
+								</div>
+							</div>
+							<SessionList
+								sessions={safeSessions}
+								onOpen={handleOpen}
+								onStart={handleStart}
+								onDelete={handleDelete}
+								actionBusyId={actionBusy}
+								showGrouping={false}
+								maxRecent={5}
+								emptyMessage="No recent sessions."
+							/>
+						</section>
+					)}
+				</>
+			)}
+		</section>
+	);
+};
+
+export { HomePage as DashboardPage };

apps/web/src/pages/git-history.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+import { getCommitDetail, getRepositoryHistory, type CommitDetail, type CommitHistoryResponse } from "../api/git_repositories";
+import { ErrorState, LoadingState } from "../components/data-states";
+import { Icon } from "../components/icon";
+import { useAsyncData } from "../hooks/use-async-data";
+
+export const GitHistoryPage = () => {
+  const { projectId, repoId } = useParams<{ projectId: string; repoId: string }>();
+  const navigate = useNavigate();
+  const [selectedCommit, setSelectedCommit] = useState<string | null>(null);
+  const [commitDetail, setCommitDetail] = useState<CommitDetail | null>(null);
+  const [selectedBranch, setSelectedBranch] = useState<string>("");
+  const [detailStatus, setDetailStatus] = useState<"idle" | "loading" | "ready" | "error">("idle");
+
+  const { data: historyData, status, reload } = useAsyncData<CommitHistoryResponse>(
+    async () => {
+      if (!projectId || !repoId) return { commits: [], branches: [], tags: [] };
+      return await getRepositoryHistory(projectId, repoId, selectedBranch || undefined, 10000);
+    },
+    [projectId, repoId, selectedBranch]
+  );
+
+  // Auto-select first branch when data loads
+  useEffect(() => {
+    if (historyData?.branches.length && !selectedBranch) {
+      setSelectedBranch(historyData.branches[0]);
+    }
+  }, [historyData?.branches, selectedBranch]);
+
+  const handleCommitClick = async (hash: string) => {
+    if (!projectId || !repoId) return;
+    setSelectedCommit(hash);
+    setDetailStatus("loading");
+    try {
+      const detail = await getCommitDetail(projectId, repoId, hash);
+      setCommitDetail(detail);
+      setDetailStatus("ready");
+    } catch {
+      setDetailStatus("error");
+    }
+  };
+
+  const handleCloseDetail = () => {
+    setSelectedCommit(null);
+    setCommitDetail(null);
+    setDetailStatus("idle");
+  };
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleString();
+  };
+
+  if (status === "loading") {
+    return (
+      <section className="stack">
+        <LoadingState message="Loading commit history..." />
+      </section>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <section className="stack">
+        <ErrorState message="Failed to load commit history" onRetry={reload} />
+      </section>
+    );
+  }
+
+  const commits = historyData?.commits ?? [];
+  const branches = historyData?.branches ?? [];
+
+  return (
+    <section className="stack">
+      <div className="page-header">
+        <div>
+          <h1>Commit History</h1>
+          <p className="muted">{commits.length} commits</p>
+        </div>
+        <div className="history-actions">
+          {branches.length > 0 && (
+            <select
+              value={selectedBranch}
+              onChange={(e) => setSelectedBranch(e.target.value)}
+              className="branch-selector"
+            >
+              {branches.map((branch) => (
+                <option key={branch} value={branch}>
+                  {branch}
+                </option>
+              ))}
+            </select>
+          )}
+          <button
+            className="secondary-button"
+            onClick={() => navigate(`/projects/${projectId}/repositories`)}
+            type="button"
+          >
+            Back to Repositories
+          </button>
+        </div>
+      </div>
+
+      <div className="history-container">
+        <div className={`commit-list ${selectedCommit ? "with-detail" : ""}`}>
+          {commits.map((commit) => (
+            <div
+              key={commit.hash}
+              className={`commit-item ${selectedCommit === commit.hash ? "selected" : ""}`}
+              onClick={() => void handleCommitClick(commit.hash)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  void handleCommitClick(commit.hash);
+                }
+              }}
+            >
+              <div className="commit-graph">
+                <span className="graph-line" style={{ marginLeft: `${commit.graph_depth * 12}px` }}>
+                  {commit.graph_symbol}
+                </span>
+              </div>
+              <div className="commit-content">
+                <div className="commit-header">
+                  <span className="commit-hash">{commit.short_hash}</span>
+                  {commit.refs.length > 0 && (
+                    <span className="commit-refs">
+                      {commit.refs.map((ref) => (
+                        <span key={ref} className="ref-tag">
+                          {ref}
+                        </span>
+                      ))}
+                    </span>
+                  )}
+                </div>
+                <p className="commit-message">{commit.message.split("\n")[0]}</p>
+                <div className="commit-meta">
+                  <span>{commit.author_name}</span>
+                  <span className="muted">{formatDate(commit.author_date)}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {selectedCommit && (
+          <div className="commit-detail-panel">
+            <div className="detail-header">
+              <h3>Commit Details</h3>
+              <button className="ghost-button" onClick={handleCloseDetail} type="button">
+                <Icon name="close" size="sm" />
+              </button>
+            </div>
+
+            {detailStatus === "loading" && <p className="muted">Loading details...</p>}
+            
+            {detailStatus === "error" && (
+              <p>Failed to load commit details</p>
+            )}
+
+            {detailStatus === "ready" && commitDetail && (
+              <div className="detail-content">
+                <div className="detail-section">
+                  <p className="commit-hash-full">{commitDetail.hash}</p>
+                  <p className="commit-message-full">{commitDetail.message}</p>
+                </div>
+
+                <div className="detail-section">
+                  <h4>Author</h4>
+                  <p>{commitDetail.author_name} &lt;{commitDetail.author_email}&gt;</p>
+                  <p className="muted">{formatDate(commitDetail.author_date)}</p>
+                </div>
+
+                <div className="detail-section">
+                  <h4>Committer</h4>
+                  <p>{commitDetail.committer_name} &lt;{commitDetail.committer_email}&gt;</p>
+                  <p className="muted">{formatDate(commitDetail.committer_date)}</p>
+                </div>
+
+                <div className="detail-section">
+                  <h4>Stats</h4>
+                  <div className="stats-grid">
+                    <div className="stat">
+                      <span className="stat-value">{commitDetail.stats.files_changed}</span>
+                      <span className="stat-label">Files</span>
+                    </div>
+                    <div className="stat additions">
+                      <span className="stat-value">+{commitDetail.stats.additions}</span>
+                      <span className="stat-label">Additions</span>
+                    </div>
+                    <div className="stat deletions">
+                      <span className="stat-value">-{commitDetail.stats.deletions}</span>
+                      <span className="stat-label">Deletions</span>
+                    </div>
+                  </div>
+                </div>
+
+                {commitDetail.parents.length > 0 && (
+                  <div className="detail-section">
+                    <h4>Parents</h4>
+                    <div className="parent-list">
+                      {commitDetail.parents.map((parent) => (
+                        <span key={parent} className="parent-hash">
+                          {parent.substring(0, 8)}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {commitDetail.diff && (
+                  <div className="detail-section">
+                    <h4>Diff</h4>
+                    <pre className="diff-content">{commitDetail.diff}</pre>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};

apps/web/src/pages/git-repositories.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+import {
+  deleteRepository,
+  listRepositories,
+} from "../api/git_repositories";
+import type { GitRepository } from "../api/git_repositories";
+import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
+import { Icon } from "../components/icon";
+import { RepositoryCreateDialog } from "../components/repository-create-dialog";
+import { useAsyncData } from "../hooks/use-async-data";
+
+export const GitRepositoriesPage = () => {
+  const { projectId } = useParams<{ projectId: string }>();
+  const navigate = useNavigate();
+  const [showCreate, setShowCreate] = useState(false);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+  const { data: repositories, status, reload } = useAsyncData<GitRepository[]>(
+    async () => {
+      if (!projectId) return [];
+      return await listRepositories(projectId);
+    },
+    [projectId]
+  );
+
+  const handleDelete = async (repoId: string) => {
+    if (!projectId) return;
+    try {
+      await deleteRepository(projectId, repoId);
+      setDeleteConfirmId(null);
+      reload();
+    } catch {
+      setDeleteConfirmId(null);
+    }
+  };
+
+  const safeRepositories = repositories ?? [];
+  const isEmpty = status === "ready" && safeRepositories.length === 0;
+
+  return (
+    <section className="stack">
+      <div className="page-header">
+        <h1>Repositories</h1>
+        <button className="primary-button" onClick={() => setShowCreate(true)} type="button">
+          <Icon name="add" size="sm" />
+          New Repository
+        </button>
+      </div>
+
+      {status === "loading" && <LoadingState message="Loading repositories..." />}
+
+      {status === "error" && <ErrorState message="Failed to load repositories" onRetry={reload} />}
+
+      {isEmpty && <EmptyState message="No repositories yet. Create your first repository above." />}
+
+      {status === "ready" && safeRepositories.length > 0 && (
+        <div className="repository-list">
+          {safeRepositories.map((repo) => (
+            <article className="card repository-card" key={repo.id}>
+              <div className="repository-info">
+                <h3>{repo.name}</h3>
+                {repo.is_mirror && repo.remote_url && (
+                  <p className="muted">Mirror of {repo.remote_url}</p>
+                )}
+                <p className="muted">{repo.path}</p>
+              </div>
+              <div className="repository-actions">
+                <button
+                  className="secondary-button small"
+                  onClick={() => navigate(`/projects/${projectId}/repositories/${repo.id}/history`)}
+                  type="button"
+                >
+                  History
+                </button>
+                {deleteConfirmId === repo.id ? (
+                  <div className="delete-confirm">
+                    <span>Are you sure?</span>
+                    <button
+                      className="danger-button"
+                      onClick={() => void handleDelete(repo.id)}
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                    <button
+                      className="ghost-button"
+                      onClick={() => setDeleteConfirmId(null)}
+                      type="button"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    className="ghost-button danger-text"
+                    onClick={() => setDeleteConfirmId(repo.id)}
+                    type="button"
+                  >
+                    Delete
+                  </button>
+                )}
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+
+      {showCreate && (
+        <RepositoryCreateDialog
+          projectId={projectId!}
+          open={showCreate}
+          title="Create Repository"
+          onClose={() => setShowCreate(false)}
+          onCreated={reload}
+        />
+      )}
+    </section>
+  );
+};

apps/web/src/pages/placeholder.tsx

@@ -0,0 +1,37 @@
+export const PlaceholderPage = ({ title }: { title: string }) => {
+  return (
+    <section className="stack">
+      <h1>{title}</h1>
+      <p className="muted">This page is part of the frontend foundation scaffold.</p>
+    </section>
+  );
+};
+
+export const NotFoundPage = () => {
+  return (
+    <section className="stack center-screen">
+      <h1>404</h1>
+      <p className="muted">The page you requested does not exist.</p>
+    </section>
+  );
+};
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
+
+import { Icon } from "../components/icon";
+
+export const LoginRedirectPage = () => {
+  const nextPath = new URLSearchParams(window.location.search).get("next") ?? "/";
+  const encodedNext = encodeURIComponent(nextPath);
+
+  return (
+    <section className="stack center-screen">
+      <h1>Sign in required</h1>
+      <p className="muted">You need to authenticate to access this section.</p>
+      <a className="primary-button" href={`${API_BASE_URL}/auth/login?next=${encodedNext}`}>
+        <Icon name="profile" size="sm" />
+        Continue to login
+      </a>
+    </section>
+  );
+};

apps/web/src/pages/profile.tsx

@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { getProfile, updateProfile, uploadAvatar } from "../api/profile";
+import { ErrorState, LoadingState } from "../components/data-states";
+import { Icon } from "../components/icon";
+import { useAuth } from "../state/auth";
+import { useAsyncData } from "../hooks/use-async-data";
+import type { UserProfile } from "../api/profile";
+
+type ProfileStatus = "loading" | "ready" | "error" | "saving";
+
+export const ProfilePage = () => {
+  const { refreshSession } = useAuth();
+  const { data: profile, status: loadStatus, reload } = useAsyncData<UserProfile>(getProfile, []);
+  const [displayStatus, setDisplayStatus] = useState<ProfileStatus>("loading");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sync loaded profile into form fields
+  useEffect(() => {
+    if (profile) {
+      setName(profile.name);
+      setEmail(profile.email);
+      setDisplayStatus("ready");
+      setError(null);
+    }
+  }, [profile]);
+
+  useEffect(() => {
+    if (loadStatus === "error") {
+      setDisplayStatus("error");
+    }
+  }, [loadStatus]);
+
+  const handleSave = useCallback(async () => {
+    if (!name.trim()) {
+      setError("Name cannot be empty");
+      return;
+    }
+    if (!email.includes("@")) {
+      setError("Please enter a valid email");
+      return;
+    }
+
+    setDisplayStatus("saving");
+    setError(null);
+    try {
+      await updateProfile({ name: name.trim(), email: email.trim() });
+      await refreshSession();
+      setDisplayStatus("ready");
+    } catch {
+      setError("Failed to update profile");
+      setDisplayStatus("ready");
+    }
+  }, [name, email, refreshSession]);
+
+  const handleAvatarChange = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+
+      if (!file.type.startsWith("image/")) {
+        setError("Please upload an image file (PNG or JPEG)");
+        return;
+      }
+
+      if (file.size > 2 * 1024 * 1024) {
+        setError("File too large. Maximum size is 2MB.");
+        return;
+      }
+
+      setDisplayStatus("saving");
+      setError(null);
+      try {
+        await uploadAvatar(file);
+        await refreshSession();
+        reload();
+        setDisplayStatus("ready");
+      } catch {
+        setError("Failed to upload avatar");
+        setDisplayStatus("ready");
+      }
+    },
+    [refreshSession, reload]
+  );
+
+  const avatarUrl = profile?.avatar_url ?? null;
+
+  return (
+    <section className="stack">
+      <h1>Profile</h1>
+
+      {displayStatus === "loading" && <LoadingState message="Loading profile..." />}
+
+      {displayStatus === "error" && <ErrorState message="Failed to load profile" onRetry={reload} />}
+
+      {(displayStatus === "ready" || displayStatus === "saving") && profile && (
+        <div className="card stack">
+          <div className="profile-avatar-section">
+            <div className="avatar-preview">
+              {avatarUrl ? (
+                <img alt="Avatar" className="avatar-image" src={avatarUrl} />
+              ) : (
+                <div className="avatar-placeholder">{profile.name.charAt(0).toUpperCase()}</div>
+              )}
+            </div>
+            <button
+              className="secondary-button"
+              disabled={displayStatus === "saving"}
+              onClick={() => fileInputRef.current?.click()}
+              type="button"
+            >
+              {displayStatus === "saving" ? (
+                <>
+                  <Icon name="loading" size="sm" />
+                  Uploading...
+                </>
+              ) : (
+                <>
+                  <Icon name="edit" size="sm" />
+                  Change Avatar
+                </>
+              )}
+            </button>
+            <input
+              accept="image/png,image/jpeg"
+              onChange={handleAvatarChange}
+              ref={fileInputRef}
+              style={{ display: "none" }}
+              type="file"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="profile-name">Name</label>
+            <input
+              disabled={displayStatus === "saving"}
+              id="profile-name"
+              onChange={(e) => setName(e.target.value)}
+              type="text"
+              value={name}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="profile-email">Email</label>
+            <input
+              disabled={displayStatus === "saving"}
+              id="profile-email"
+              onChange={(e) => setEmail(e.target.value)}
+              type="email"
+              value={email}
+            />
+          </div>
+
+          {error && <p className="error-message">{error}</p>}
+
+          <div className="form-actions">
+            <button
+              className="primary-button"
+              disabled={displayStatus === "saving"}
+              onClick={() => void handleSave()}
+              type="button"
+            >
+              {displayStatus === "saving" ? (
+                <>
+                  <Icon name="loading" size="sm" />
+                  Saving...
+                </>
+              ) : (
+                <>
+                  <Icon name="save" size="sm" />
+                  Save Changes
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};

apps/web/src/pages/project-settings.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from "react";
+import { useParams, Link, useNavigate, Routes, Route } from "react-router-dom";
+import { SettingsTabLayout } from "../components/settings-tab-layout";
+import { RepositoriesSettingsTab } from "../components/repositories-settings-tab";
+import { apiClient } from "../api/client";
+import { Project } from "../types";
+
+const tabs = [
+  { id: "general", label: "General", path: "general" },
+  { id: "repositories", label: "Repositories", path: "repositories" },
+  { id: "members", label: "Members", path: "members" },
+];
+
+const GeneralSettings: React.FC<{
+  project: Project;
+  projectId: string;
+}> = ({ project, projectId }) => {
+  const navigate = useNavigate();
+  const [name, setName] = useState(project.name);
+  const [description, setDescription] = useState(project.description || "");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await apiClient.patch(`/projects/${projectId}`, {
+        name,
+        description,
+      });
+    } catch (err) {
+      setError("Failed to save changes");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!window.confirm("Are you sure you want to delete this project?")) return;
+    try {
+      await apiClient.delete(`/projects/${projectId}`);
+      navigate("/projects");
+    } catch (err) {
+      setError("Failed to delete project");
+    }
+  };
+
+  return (
+    <div className="settings-panel">
+      <h2>General Settings</h2>
+      {error && <div className="error-message">{error}</div>}
+
+      <div className="form-group">
+        <label>Project Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="form-input"
+        />
+      </div>
+
+      <div className="form-group">
+        <label>Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          className="form-textarea"
+          rows={4}
+        />
+      </div>
+
+      <div className="form-actions">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="btn-primary"
+        >
+          {saving ? "Saving..." : "Save Changes"}
+        </button>
+      </div>
+
+      <div className="danger-zone">
+        <h3>Danger Zone</h3>
+        <button onClick={handleDelete} className="btn-danger">
+          Delete Project
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const MembersSettingsTab: React.FC = () => (
+  <div className="settings-panel">
+    <h2>Members</h2>
+    <p>Team members management coming soon.</p>
+  </div>
+);
+
+export const ProjectSettingsPage: React.FC = () => {
+  const { projectId } = useParams<{ projectId: string }>();
+  const [project, setProject] = useState<Project | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchProject = async () => {
+      try {
+        const response = await apiClient.get(`/projects/${projectId}`);
+        setProject(response.data);
+      } catch (err) {
+        setError("Failed to load project");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProject();
+  }, [projectId]);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div className="error-message">{error}</div>;
+  if (!project) return <div>Project not found</div>;
+
+  return (
+    <div className="project-settings-page">
+      <div className="settings-breadcrumb">
+        <Link to="/projects">Projects</Link>
+        <span> &gt; </span>
+        <Link to={`/projects/${projectId}`}>{project.name}</Link>
+        <span> &gt; </span>
+        <span>Settings</span>
+      </div>
+
+      <SettingsTabLayout tabs={tabs} basePath={`/projects/${projectId}/settings`}>
+        <Routes>
+          <Route
+            path="general"
+            element={<GeneralSettings project={project} projectId={projectId!} />}
+          />
+          <Route path="repositories" element={<RepositoriesSettingsTab />} />
+          <Route path="members" element={<MembersSettingsTab />} />
+          <Route path="*" element={<GeneralSettings project={project} projectId={projectId!} />} />
+        </Routes>
+      </SettingsTabLayout>
+    </div>
+  );
+};

apps/web/src/pages/projects.test.tsx

@@ -0,0 +1,196 @@
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ProjectsPage } from "./projects";
+import * as projectsApi from "../api/projects";
+
+const mockProjects = [
+  {
+    id: "proj-1",
+    name: "Alpha Project",
+    description: "First project",
+    owner_id: "user-1",
+    default_ssh_key_id: null,
+  },
+  {
+    id: "proj-2",
+    name: "Beta Project",
+    description: null,
+    owner_id: "user-1",
+    default_ssh_key_id: null,
+  },
+];
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("ProjectsPage", () => {
+  it("renders loading state initially", () => {
+    vi.spyOn(projectsApi, "listProjects").mockImplementation(() => new Promise(() => {}));
+    render(
+      <MemoryRouter>
+        <ProjectsPage />
+      </MemoryRouter>
+    );
+    expect(screen.getByText(/loading projects/i)).toBeInTheDocument();
+  });
+
+  it("renders project list after loading", async () => {
+    vi.spyOn(projectsApi, "listProjects").mockResolvedValue(mockProjects);
+    render(
+      <MemoryRouter>
+        <ProjectsPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Alpha Project")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Beta Project")).toBeInTheDocument();
+    expect(screen.getByText("First project")).toBeInTheDocument();
+  });
+
+  it("renders empty state when no projects", async () => {
+    vi.spyOn(projectsApi, "listProjects").mockResolvedValue([]);
+    render(
+      <MemoryRouter>
+        <ProjectsPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/no projects yet/i)).toBeInTheDocument();
+    });
+  });
+
+  it("renders error state with retry button", async () => {
+    vi.spyOn(projectsApi, "listProjects").mockRejectedValue(new Error("fail"));
+    render(
+      <MemoryRouter>
+        <ProjectsPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/failed to load projects/i)).toBeInTheDocument();
+    });
+    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
+  });
+
+  it("opens create dialog and submits new project", async () => {
+    const listMock = vi.spyOn(projectsApi, "listProjects").mockResolvedValue([]);
+    const createMock = vi.spyOn(projectsApi, "createProject").mockResolvedValue(mockProjects[0]);
+
+    render(
+      <MemoryRouter>
+        <ProjectsPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/no projects yet/i)).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /new project/i }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    fireEvent.change(screen.getByPlaceholderText(/project name/i), {
+      target: { value: "Gamma Project" },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/optional description/i), {
+      target: { value: "A new project" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /create/i }));
+
+    await waitFor(() => {
+      expect(createMock).toHaveBeenCalledWith({
+        name: "Gamma Project",
+        description: "A new project",
+      });
+    });
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows validation error when name is empty", async () => {
+    vi.spyOn(projectsApi, "listProjects").mockResolvedValue([]);
+
+    render(
+      <MemoryRouter>
+        <ProjectsPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/no projects yet/i)).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /new project/i }));
+    fireEvent.click(screen.getByRole("button", { name: /create/i }));
+
+    expect(screen.getByText(/project name is required/i)).toBeInTheDocument();
+  });
+
+  it("opens edit dialog and saves changes", async () => {
+    const listMock = vi.spyOn(projectsApi, "listProjects").mockResolvedValue(mockProjects);
+    const updateMock = vi.spyOn(projectsApi, "updateProject").mockResolvedValue(mockProjects[0]);
+
+    render(
+      <MemoryRouter>
+        <ProjectsPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Alpha Project")).toBeInTheDocument();
+    });
+
+    const alphaCard = screen.getByText("Alpha Project").closest(".project-card") as HTMLElement | null;
+    if (!alphaCard) throw new Error("Card not found");
+
+    fireEvent.click(within(alphaCard).getByRole("button", { name: /edit/i }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    const nameInput = screen.getByDisplayValue("Alpha Project");
+    fireEvent.change(nameInput, { target: { value: "Alpha Updated" } });
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalledWith("proj-1", {
+        name: "Alpha Updated",
+        description: "First project",
+      });
+    });
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows delete confirmation and deletes project", async () => {
+    const listMock = vi.spyOn(projectsApi, "listProjects").mockResolvedValue(mockProjects);
+    const deleteMock = vi.spyOn(projectsApi, "deleteProject").mockResolvedValue(undefined);
+
+    render(
+      <MemoryRouter>
+        <ProjectsPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Alpha Project")).toBeInTheDocument();
+    });
+
+    const alphaCard = screen.getByText("Alpha Project").closest(".project-card") as HTMLElement | null;
+    if (!alphaCard) throw new Error("Card not found");
+
+    fireEvent.click(within(alphaCard).getByRole("button", { name: /delete/i }));
+    expect(within(alphaCard).getByText(/are you sure/i)).toBeInTheDocument();
+
+    fireEvent.click(within(alphaCard).getByRole("button", { name: /delete/i }));
+
+    await waitFor(() => {
+      expect(deleteMock).toHaveBeenCalledWith("proj-1");
+    });
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+});

apps/web/src/pages/projects.tsx

@@ -0,0 +1,433 @@
+/** Projects page with inline repositories and workspaces. */
+
+import { useState } from "react";
+
+import {
+	createProject,
+	deleteProject,
+	listProjects,
+	updateProject,
+	type ProjectCreateInput,
+	type ProjectUpdateInput,
+} from "../api/projects";
+import { deleteWorkspace, syncWorkspace } from "../api/workspaces";
+import {
+	EmptyState,
+	ErrorState,
+	LoadingState,
+} from "../components/data-states";
+import { Icon } from "../components/icon";
+import { WorkspaceCreateForm } from "../components/workspace-create-form";
+import { useAsyncData } from "../hooks/use-async-data";
+import type { ProjectWithRepos, WorkspaceSummary } from "../types";
+
+type DialogMode = "none" | "create" | "edit";
+
+export const ProjectsPage = () => {
+	const {
+		data: projects,
+		status,
+		reload,
+	} = useAsyncData<ProjectWithRepos[]>(listProjects, []);
+	const [dialogMode, setDialogMode] = useState<DialogMode>("none");
+	const [editingProject, setEditingProject] = useState<ProjectWithRepos | null>(
+		null,
+	);
+	const [formName, setFormName] = useState("");
+	const [formDescription, setFormDescription] = useState("");
+	const [formError, setFormError] = useState<string | null>(null);
+	const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+	const [expandedProject, setExpandedProject] = useState<string | null>(null);
+	const [creatingWorkspace, setCreatingWorkspace] = useState<{
+		projectId: string;
+		repoId: string;
+	} | null>(null);
+	const [workspaceLoading, setWorkspaceLoading] = useState<string | null>(null);
+
+	const safeProjects = projects ?? [];
+
+	const openCreate = () => {
+		setFormName("");
+		setFormDescription("");
+		setFormError(null);
+		setEditingProject(null);
+		setDialogMode("create");
+	};
+
+	const openEdit = (project: ProjectWithRepos) => {
+		setFormName(project.name);
+		setFormDescription(project.description ?? "");
+		setFormError(null);
+		setEditingProject(project);
+		setDialogMode("edit");
+	};
+
+	const closeDialog = () => {
+		setDialogMode("none");
+		setEditingProject(null);
+		setFormError(null);
+	};
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setFormError(null);
+
+		if (!formName.trim()) {
+			setFormError("Project name is required");
+			return;
+		}
+
+		try {
+			if (dialogMode === "create") {
+				const input: ProjectCreateInput = {
+					name: formName.trim(),
+					description: formDescription.trim() || null,
+				};
+				await createProject(input);
+			} else if (dialogMode === "edit" && editingProject) {
+				const input: ProjectUpdateInput = {
+					name: formName.trim(),
+					description: formDescription.trim() || null,
+				};
+				await updateProject(editingProject.id, input);
+			}
+			closeDialog();
+			reload();
+		} catch {
+			setFormError("Failed to save project");
+		}
+	};
+
+	const handleDelete = async (projectId: string) => {
+		try {
+			await deleteProject(projectId);
+			setDeleteConfirmId(null);
+			reload();
+		} catch {
+			setDeleteConfirmId(null);
+		}
+	};
+
+	const handleSyncWorkspace = async (
+		projectId: string,
+		repoId: string,
+		workspace: WorkspaceSummary,
+	) => {
+		setWorkspaceLoading(workspace.id);
+		try {
+			await syncWorkspace(projectId, repoId, workspace.id);
+			reload();
+		} catch (err) {
+			alert(err instanceof Error ? err.message : "Failed to sync workspace");
+		} finally {
+			setWorkspaceLoading(null);
+		}
+	};
+
+	const handleDeleteWorkspace = async (workspace: WorkspaceSummary) => {
+		if (!confirm(`Delete workspace "${workspace.name}"?`)) return;
+		setWorkspaceLoading(workspace.id);
+		try {
+			await deleteWorkspace(workspace.id);
+			reload();
+		} catch (err) {
+			alert(err instanceof Error ? err.message : "Failed to delete workspace");
+		} finally {
+			setWorkspaceLoading(null);
+		}
+	};
+
+	const isEmpty = status === "ready" && safeProjects.length === 0;
+
+	return (
+		<section className="stack">
+			<div className="page-header">
+				<h1>Projects</h1>
+				<button className="primary-button" onClick={openCreate} type="button">
+					<Icon name="add" size="sm" />
+					New Project
+				</button>
+			</div>
+
+			{status === "loading" && <LoadingState message="Loading projects..." />}
+
+			{status === "error" && (
+				<ErrorState message="Failed to load projects" onRetry={reload} />
+			)}
+
+			{isEmpty && (
+				<EmptyState message="No projects yet. Create your first project above." />
+			)}
+
+			{status === "ready" && safeProjects.length > 0 && (
+				<div className="project-list">
+					{safeProjects.map((project) => (
+						<ProjectCard
+							key={project.id}
+							project={project}
+							expanded={expandedProject === project.id}
+							onToggle={() =>
+								setExpandedProject(
+									expandedProject === project.id ? null : project.id,
+								)
+							}
+							onEdit={() => openEdit(project)}
+							onDelete={() => setDeleteConfirmId(project.id)}
+							deleteConfirm={deleteConfirmId === project.id}
+							onConfirmDelete={() => void handleDelete(project.id)}
+							onCancelDelete={() => setDeleteConfirmId(null)}
+							onCreateWorkspace={(repoId) =>
+								setCreatingWorkspace({ projectId: project.id, repoId })
+							}
+							onWorkspaceAction={(repoId, workspace, action) => {
+								if (action === "sync") {
+									void handleSyncWorkspace(project.id, repoId, workspace);
+								} else if (action === "delete") {
+									void handleDeleteWorkspace(workspace);
+								}
+							}}
+							workspaceLoading={workspaceLoading}
+							showCreateForm={
+								creatingWorkspace?.projectId === project.id
+									? creatingWorkspace.repoId
+									: null
+							}
+							onCancelCreate={() => setCreatingWorkspace(null)}
+							onCreated={() => {
+								setCreatingWorkspace(null);
+								reload();
+							}}
+						/>
+					))}
+				</div>
+			)}
+
+			{dialogMode !== "none" && (
+				<div className="dialog-overlay" role="dialog" aria-modal="true">
+					<div className="dialog">
+						<h2>
+							{dialogMode === "create" ? "Create Project" : "Edit Project"}
+						</h2>
+						<form onSubmit={handleSubmit} className="stack">
+							<label className="form-field">
+								Name
+								<input
+									type="text"
+									value={formName}
+									onChange={(e) => setFormName(e.target.value)}
+									placeholder="Project name"
+								/>
+							</label>
+							<label className="form-field">
+								Description
+								<textarea
+									value={formDescription}
+									onChange={(e) => setFormDescription(e.target.value)}
+									placeholder="Optional description"
+									rows={3}
+								/>
+							</label>
+							{formError && <p className="error-text">{formError}</p>}
+							<div className="dialog-actions">
+								<button
+									className="secondary-button"
+									onClick={closeDialog}
+									type="button"
+								>
+									<Icon name="cancel" size="sm" />
+									Cancel
+								</button>
+								<button className="primary-button" type="submit">
+									{dialogMode === "create" ? (
+										<>
+											<Icon name="add" size="sm" />
+											Create
+										</>
+									) : (
+										<>
+											<Icon name="save" size="sm" />
+											Save
+										</>
+									)}
+								</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			)}
+		</section>
+	);
+};
+
+/* ─── Project Card ─── */
+
+function ProjectCard({
+	project,
+	expanded,
+	onToggle,
+	onEdit,
+	onDelete,
+	deleteConfirm,
+	onConfirmDelete,
+	onCancelDelete,
+	onCreateWorkspace,
+	onWorkspaceAction,
+	workspaceLoading,
+	showCreateForm,
+	onCancelCreate,
+	onCreated,
+}: {
+	project: ProjectWithRepos;
+	expanded: boolean;
+	onToggle: () => void;
+	onEdit: () => void;
+	onDelete: () => void;
+	deleteConfirm: boolean;
+	onConfirmDelete: () => void;
+	onCancelDelete: () => void;
+	onCreateWorkspace: (repoId: string) => void;
+	onWorkspaceAction: (
+		repoId: string,
+		workspace: WorkspaceSummary,
+		action: "sync" | "delete",
+	) => void;
+	workspaceLoading: string | null;
+	onCancelCreate: () => void;
+	showCreateForm: string | null;
+	onCreated: () => void;
+}) {
+	return (
+		<article className="card project-card">
+			<div className="project-info-row">
+				<button
+					className="project-toggle"
+					onClick={onToggle}
+					type="button"
+					aria-expanded={expanded}
+				>
+					<Icon name={expanded ? "chevron-down" : "chevron-right"} size="sm" />
+					<h3>{project.name}</h3>
+					{project.repositories.length > 0 && (
+						<span className="repo-count">
+							{project.repositories.length} repo
+							{project.repositories.length > 1 ? "s" : ""}
+						</span>
+					)}
+				</button>
+				<div className="project-actions">
+					<button className="ghost-button" onClick={onEdit} type="button">
+						<Icon name="edit" size="sm" />
+						Edit
+					</button>
+					{deleteConfirm ? (
+						<div className="delete-confirm">
+							<span>Are you sure?</span>
+							<button
+								className="danger-button"
+								onClick={onConfirmDelete}
+								type="button"
+							>
+								<Icon name="delete" size="sm" />
+								Delete
+							</button>
+							<button
+								className="ghost-button"
+								onClick={onCancelDelete}
+								type="button"
+							>
+								<Icon name="cancel" size="sm" />
+								Cancel
+							</button>
+						</div>
+					) : (
+						<button
+							className="ghost-button danger-text"
+							onClick={onDelete}
+							type="button"
+						>
+							<Icon name="delete" size="sm" />
+							Delete
+						</button>
+					)}
+				</div>
+			</div>
+
+			{expanded && (
+				<div className="project-detail">
+					{project.repositories.length === 0 ? (
+						<p className="muted">No repositories yet.</p>
+					) : (
+						<div className="repo-list">
+							{project.repositories.map((repo) => (
+								<div key={repo.id} className="repo-block">
+									<div className="repo-header">
+										<h4>{repo.name}</h4>
+										<button
+											className="btn btn-sm btn-primary"
+											onClick={() => onCreateWorkspace(repo.id)}
+											type="button"
+										>
+											<Icon name="add" size="sm" /> New Workspace
+										</button>
+									</div>
+									{showCreateForm === repo.id && (
+										<WorkspaceCreateForm
+											defaultProjectId={project.id}
+											defaultRepoId={repo.id}
+											onSubmit={onCreated}
+											onCancel={onCancelCreate}
+										/>
+									)}
+									{repo.workspaces.length === 0 ? (
+										<p className="muted">No workspaces.</p>
+									) : (
+										<div className="workspace-grid">
+											{repo.workspaces.map((ws) => (
+												<div
+													key={ws.id}
+													className={`workspace-chip ${ws.status}`}
+												>
+													<a href={`/workspaces/${ws.id}`}>{ws.name}</a>
+													<span className="ws-branch">
+														<Icon name="branch" size="sm" /> {ws.branch}
+													</span>
+													{ws.instance_count > 0 && (
+														<span className="ws-instances">
+															{ws.instance_count} tool
+															{ws.instance_count > 1 ? "s" : ""}
+														</span>
+													)}
+													<div className="ws-actions">
+														<button
+															type="button"
+															disabled={workspaceLoading === ws.id}
+															onClick={() =>
+																onWorkspaceAction(repo.id, ws, "sync")
+															}
+														>
+															<Icon name="refresh" size="sm" />
+														</button>
+														<button
+															type="button"
+															className="danger-text"
+															disabled={workspaceLoading === ws.id}
+															onClick={() =>
+																onWorkspaceAction(repo.id, ws, "delete")
+															}
+														>
+															<Icon name="delete" size="sm" />
+														</button>
+													</div>
+												</div>
+											))}
+										</div>
+									)}
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			)}
+		</article>
+	);
+}

apps/web/src/pages/repo-workspace.tsx

@@ -0,0 +1,505 @@
+import { useCallback, useEffect, useState } from "react";
+import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
+import { Icon } from "../components/icon";
+import { useMobileViewport } from "../hooks/use-mobile-viewport";
+
+import { Link, useParams, useSearchParams } from "react-router-dom";
+
+import { apiClient } from "../api/client";
+import {
+  getRepositoryStatus,
+  listRepositories,
+  type GitRepository,
+  type GitStatus,
+} from "../api/git_repositories";
+import { CommitPanel } from "../components/commit-panel";
+import { FileEditor } from "../components/file-editor";
+import { GitToolbar } from "../components/git-toolbar";
+import { InstanceList } from "../components/instance-list";
+import { WorkspaceHeader } from "../components/workspace-header";
+import { listToolTypes } from "../api/tool_types";
+import type { ToolType } from "../api/tool_types";
+
+type MobileTab = "files" | "editor" | "git" | "terminal";
+
+type WorkspaceStatus = "loading" | "ready" | "error" | "empty";
+
+interface FileTreeEntry {
+  name: string;
+  type: "file" | "directory";
+  path: string;
+  size?: number;
+  mode?: string;
+  last_commit?: {
+    hash: string;
+    message: string;
+    author: string;
+    date: string;
+  } | null;
+}
+
+interface Project {
+  id: string;
+  name: string;
+  description?: string | null;
+}
+
+export const RepoWorkspace = () => {
+  const { projectId } = useParams<{ projectId: string }>();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const isMobile = useMobileViewport();
+  const [mobileTab, setMobileTab] = useState<MobileTab>("files");
+
+  const [status, setStatus] = useState<WorkspaceStatus>("loading");
+  const [project, setProject] = useState<Project | null>(null);
+  const [repositories, setRepositories] = useState<GitRepository[]>([]);
+  const [selectedRepoId, setSelectedRepoId] = useState<string | null>(
+    searchParams.get("repo")
+  );
+  const [branches, setBranches] = useState<string[]>([]);
+  const [currentBranch, setCurrentBranch] = useState<string>("main");
+  const [gitStatus, setGitStatus] = useState<GitStatus | null>(null);
+  const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
+
+  const loadProject = useCallback(async () => {
+    if (!projectId) return;
+    try {
+      const response = await apiClient.get(`/projects/${projectId}`);
+      setProject(response.data);
+    } catch {
+      setProject(null);
+    }
+  }, [projectId]);
+
+  const loadRepositories = useCallback(async () => {
+    if (!projectId) return;
+
+    setStatus("loading");
+    try {
+      const data = await listRepositories(projectId);
+      setRepositories(data);
+
+      if (data.length === 0) {
+        setStatus("empty");
+      } else {
+        setStatus("ready");
+        // If no repo selected, select the first one
+        if (!selectedRepoId) {
+          setSelectedRepoId(data[0].id);
+          const newParams = new URLSearchParams(searchParams);
+          newParams.set("repo", data[0].id);
+          setSearchParams(newParams, { replace: true });
+        }
+      }
+    } catch {
+      setRepositories([]);
+      setStatus("error");
+    }
+  }, [projectId, selectedRepoId, searchParams, setSearchParams]);
+
+  const loadBranches = useCallback(async () => {
+    if (!projectId || !selectedRepoId) return;
+    try {
+      const response = await apiClient.get(
+        `/projects/${projectId}/repositories/${selectedRepoId}/branches`
+      );
+      const branchList = response.data.branches.map((b: { name: string }) => b.name);
+      setBranches(branchList);
+      const defaultBranch = response.data.default_branch;
+      if (defaultBranch) {
+        setCurrentBranch(defaultBranch);
+      }
+    } catch {
+      setBranches([]);
+    }
+  }, [projectId, selectedRepoId]);
+
+  const loadGitStatus = useCallback(async () => {
+    if (!projectId || !selectedRepoId) return;
+    try {
+      const data = await getRepositoryStatus(projectId, selectedRepoId);
+      setGitStatus(data);
+    } catch {
+      setGitStatus(null);
+    }
+  }, [projectId, selectedRepoId]);
+
+  const loadToolTypes = useCallback(async () => {
+    try {
+      const data = await listToolTypes();
+      setToolTypes(data);
+    } catch {
+      setToolTypes([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProject();
+    void loadRepositories();
+    void loadToolTypes();
+  }, [loadProject, loadRepositories, loadToolTypes]);
+
+  useEffect(() => {
+    void loadBranches();
+    void loadGitStatus();
+  }, [loadBranches, loadGitStatus]);
+
+  const handleRepoChange = (repoId: string) => {
+    setSelectedRepoId(repoId);
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set("repo", repoId);
+    newParams.delete("branch");
+    newParams.delete("path");
+    setSearchParams(newParams);
+  };
+
+  const selectedRepo = repositories.find((r) => r.id === selectedRepoId);
+
+  return (
+    <section className="repo-workspace">
+      {project && (
+        <WorkspaceHeader
+          project={project}
+          currentRepo={selectedRepo || null}
+        />
+      )}
+
+      {status === "loading" && (
+        <LoadingState message="Loading repositories..." />
+      )}
+
+      {status === "error" && (
+        <ErrorState message="Failed to load repositories" onRetry={() => void loadRepositories()} />
+      )}
+
+      {status === "empty" && (
+        <div className="card stack">
+          <EmptyState message="No repositories in this project yet." />
+          <Link
+            className="primary-button"
+            to={`/projects/${projectId}/settings/repositories`}
+          >
+            Manage Repositories
+          </Link>
+        </div>
+      )}
+
+      {status === "ready" && repositories.length > 0 && (
+        <>
+          {isMobile ? (
+            // Mobile Layout
+            <div className="mobile-workspace">
+              <div className="mobile-workspace-header">
+                <select
+                  value={selectedRepoId || ""}
+                  onChange={(e) => handleRepoChange(e.target.value)}
+                  className="mobile-repo-selector"
+                >
+                  {repositories.map((repo) => (
+                    <option key={repo.id} value={repo.id}>
+                      {repo.name}
+                    </option>
+                  ))}
+                </select>
+                {selectedRepoId && (
+                  <select
+                    value={currentBranch}
+                    onChange={(e) => {
+                      const branch = e.target.value;
+                      setCurrentBranch(branch);
+                      const newParams = new URLSearchParams(searchParams);
+                      newParams.set("branch", branch);
+                      setSearchParams(newParams);
+                    }}
+                    className="mobile-branch-selector"
+                  >
+                    {branches.map((branch) => (
+                      <option key={branch} value={branch}>
+                        {branch}
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </div>
+
+              <div className="mobile-workspace-content">
+                {mobileTab === "files" && selectedRepoId && (
+                  <FileBrowser
+                    projectId={projectId!}
+                    repoId={selectedRepoId}
+                    gitStatus={gitStatus}
+                  />
+                )}
+                {mobileTab === "editor" && selectedRepoId && (
+                  <FileEditor projectId={projectId!} repoId={selectedRepoId} />
+                )}
+                {mobileTab === "git" && selectedRepoId && gitStatus && (
+                  <div className="mobile-git-view">
+                    <CommitPanel
+                      projectId={projectId!}
+                      repoId={selectedRepoId}
+                      modified={gitStatus.modified}
+                      added={gitStatus.added}
+                      deleted={gitStatus.deleted}
+                      untracked={gitStatus.untracked}
+                      onCommit={() => {
+                        void loadGitStatus();
+                        window.dispatchEvent(new CustomEvent("refresh-file-tree"));
+                      }}
+                    />
+                  </div>
+                )}
+                {mobileTab === "terminal" && selectedRepoId && (
+                  <InstanceList
+                    projectId={projectId!}
+                    repoId={selectedRepoId}
+                    projectName={project?.name}
+                    repoName={repositories.find((r) => r.id === selectedRepoId)?.name}
+                    toolTypes={toolTypes}
+                  />
+                )}
+              </div>
+
+              <div className="mobile-workspace-tabs">
+                <button
+                  className={`mobile-workspace-tab ${mobileTab === "files" ? "active" : ""}`}
+                  onClick={() => setMobileTab("files")}
+                  type="button"
+                >
+                  <Icon name="folder" size="sm" />
+                  <span>Files</span>
+                </button>
+                <button
+                  className={`mobile-workspace-tab ${mobileTab === "editor" ? "active" : ""}`}
+                  onClick={() => setMobileTab("editor")}
+                  type="button"
+                >
+                  <Icon name="edit" size="sm" />
+                  <span>Editor</span>
+                </button>
+                <button
+                  className={`mobile-workspace-tab ${mobileTab === "git" ? "active" : ""}`}
+                  onClick={() => setMobileTab("git")}
+                  type="button"
+                >
+                  <Icon name="branch" size="sm" />
+                  <span>Git</span>
+                </button>
+                <button
+                  className={`mobile-workspace-tab ${mobileTab === "terminal" ? "active" : ""}`}
+                  onClick={() => setMobileTab("terminal")}
+                  type="button"
+                >
+                  <Icon name="terminal" size="sm" />
+                  <span>Terminal</span>
+                </button>
+              </div>
+            </div>
+          ) : (
+            // Desktop Layout
+            <>
+              {selectedRepoId && (
+                <GitToolbar
+                  projectId={projectId!}
+                  repoId={selectedRepoId}
+                  currentBranch={currentBranch}
+                  branches={branches}
+                  hasRemote={Boolean(selectedRepo?.remote_url)}
+                  isMirror={Boolean(selectedRepo?.is_mirror)}
+                  onBranchChange={(branch) => {
+                    setCurrentBranch(branch);
+                    const newParams = new URLSearchParams(searchParams);
+                    newParams.set("branch", branch);
+                    setSearchParams(newParams);
+                  }}
+                  onRefresh={() => {
+                    void loadBranches();
+                    void loadGitStatus();
+                    window.dispatchEvent(new CustomEvent("refresh-file-tree"));
+                  }}
+                />
+              )}
+              <div className="workspace-layout">
+                <aside className="workspace-sidebar">
+                  <div className="sidebar-section">
+                    <label className="form-field">
+                      Repository
+                      <select
+                        value={selectedRepoId || ""}
+                        onChange={(e) => handleRepoChange(e.target.value)}
+                      >
+                        {repositories.map((repo) => (
+                          <option key={repo.id} value={repo.id}>
+                            {repo.name}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  </div>
+
+                  {selectedRepoId && (
+                    <>
+                      <FileBrowser
+                        projectId={projectId!}
+                        repoId={selectedRepoId}
+                        gitStatus={gitStatus}
+                      />
+                      {gitStatus && (
+                        <CommitPanel
+                          projectId={projectId!}
+                          repoId={selectedRepoId}
+                          modified={gitStatus.modified}
+                          added={gitStatus.added}
+                          deleted={gitStatus.deleted}
+                          untracked={gitStatus.untracked}
+                          onCommit={() => {
+                            void loadGitStatus();
+                            window.dispatchEvent(new CustomEvent("refresh-file-tree"));
+                          }}
+                        />
+                      )}
+                      <InstanceList
+                        projectId={projectId!}
+                        repoId={selectedRepoId}
+                        projectName={project?.name}
+                        repoName={repositories.find((r) => r.id === selectedRepoId)?.name}
+                        toolTypes={toolTypes}
+                      />
+                    </>
+                  )}
+                </aside>
+
+                <main className="workspace-main">
+                  {selectedRepoId && (
+                    <FileEditor projectId={projectId!} repoId={selectedRepoId} />
+                  )}
+                </main>
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </section>
+  );
+};
+
+// File Browser Component
+const FileBrowser = ({
+  projectId,
+  repoId,
+  gitStatus,
+}: {
+  projectId: string;
+  repoId: string;
+  gitStatus: GitStatus | null;
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [entries, setEntries] = useState<FileTreeEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const branch = searchParams.get("branch") || "main";
+  const path = searchParams.get("path") || "";
+
+  const loadFiles = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await apiClient.get(
+        `/projects/${projectId}/repositories/${repoId}/files`,
+        {
+          params: {
+            branch,
+            path,
+          },
+        }
+      );
+      setEntries(response.data.entries || []);
+    } catch {
+      setError("Failed to load files");
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, repoId, branch, path]);
+
+  useEffect(() => {
+    void loadFiles();
+  }, [loadFiles]);
+
+  // Listen for refresh events
+  useEffect(() => {
+    const handleRefresh = () => void loadFiles();
+    window.addEventListener("refresh-file-tree", handleRefresh);
+    return () => window.removeEventListener("refresh-file-tree", handleRefresh);
+  }, [loadFiles]);
+
+  const handleEntryClick = (entry: FileTreeEntry) => {
+    if (entry.type === "directory") {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set("path", entry.path);
+      setSearchParams(newParams);
+    } else {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set("file", entry.path);
+      setSearchParams(newParams);
+    }
+  };
+
+  const navigateUp = () => {
+    if (!path) return;
+    const parentPath = path.split("/").slice(0, -1).join("/");
+    const newParams = new URLSearchParams(searchParams);
+    if (parentPath) {
+      newParams.set("path", parentPath);
+    } else {
+      newParams.delete("path");
+    }
+    setSearchParams(newParams);
+  };
+
+  const getFileStatus = (filePath: string): string | null => {
+    if (!gitStatus) return null;
+    if (gitStatus.modified.includes(filePath)) return "modified";
+    if (gitStatus.added.includes(filePath)) return "added";
+    if (gitStatus.deleted.includes(filePath)) return "deleted";
+    if (gitStatus.untracked.includes(filePath)) return "untracked";
+    return null;
+  };
+
+  if (loading) return <p className="muted">Loading files...</p>;
+  if (error) return <p className="error-text">{error}</p>;
+
+  return (
+    <div className="file-tree">
+      {path && (
+        <button className="tree-entry tree-up" onClick={navigateUp} type="button">
+          <Icon name="folder" size="sm" /> ..
+        </button>
+      )}
+      {entries.length === 0 && (
+        <EmptyState message="No files in this repository yet." />
+      )}
+      {entries.map((entry) => {
+        const fileStatus = entry.type === "file" ? getFileStatus(entry.path) : null;
+        return (
+          <button
+            key={entry.path}
+            className={`tree-entry ${entry.type === "directory" ? "tree-directory" : "tree-file"} ${fileStatus || ""}`}
+            onClick={() => handleEntryClick(entry)}
+            type="button"
+          >
+            <Icon name={entry.type === "directory" ? "folder" : "file"} size="sm" /> {entry.name}
+            {fileStatus && (
+              <span className={`file-status-indicator ${fileStatus}`}>
+                {fileStatus === "modified" && "M"}
+                {fileStatus === "added" && "A"}
+                {fileStatus === "deleted" && "D"}
+                {fileStatus === "untracked" && "?"}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+};

apps/web/src/pages/sessions.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+	getUserSessions,
+	type Session,
+	checkInstanceHealth,
+} from "../api/sessions";
+import { getUserConfig } from "../api/settings";
+import { ErrorState, LoadingState } from "../components/data-states";
+import { SessionList } from "../components/session-list";
+import { SessionCard } from "../components/session-card";
+import { useInstanceActions } from "../hooks/use-instance-actions";
+import type { InstanceHealth } from "../api/sessions";
+
+type SessionsStatus = "loading" | "ready" | "error";
+
+export const SessionsPage = () => {
+	const [status, setStatus] = useState<SessionsStatus>("loading");
+	const [sessions, setSessions] = useState<Session[]>([]);
+	const [lastSessionId, setLastSessionId] = useState<string | null>(null);
+
+	const [tunnelHealth, setTunnelHealth] = useState<
+		Record<string, InstanceHealth>
+	>({});
+
+	const loadSessions = useCallback(async () => {
+		setStatus("loading");
+		try {
+			const [sessionsData, config] = await Promise.all([
+				getUserSessions(),
+				getUserConfig(),
+			]);
+			setSessions(sessionsData);
+			setLastSessionId(config.last_session_id ?? null);
+			setStatus("ready");
+		} catch {
+			setStatus("error");
+		}
+	}, []);
+
+	useEffect(() => {
+		void loadSessions();
+	}, [loadSessions]);
+
+	const {
+		loadingSessionId,
+		dirtyDeleteSession,
+		dirtyDeleteFiles,
+		handleOpen,
+		handleStart,
+		handleStop,
+		handleDelete,
+		handleForceDelete,
+		handleRecreateTunnel,
+		clearDirtyDelete,
+	} = useInstanceActions({ onRefresh: loadSessions });
+
+	// Poll health every 30 seconds for active web-enabled instances
+	useEffect(() => {
+		const checkHealth = async () => {
+			const activeSessions = sessions.filter(
+				(s) =>
+					["running", "starting", "unhealthy", "probing"].includes(s.status) &&
+					s.tool_type_interfaces?.includes("web"),
+			);
+			for (const session of activeSessions) {
+				try {
+					const health = await checkInstanceHealth(
+						session.project_id,
+						session.repository_id,
+						session.id,
+					);
+					setTunnelHealth((prev) => ({
+						...prev,
+						[session.id]: health,
+					}));
+				} catch {
+					setTunnelHealth((prev) => ({
+						...prev,
+						[session.id]: {
+							healthy: false,
+							container_status: "unknown",
+							container_health: null,
+							tunnel_status: "unreachable",
+							tunnel_status_code: null,
+							probe_status: "unknown",
+							last_probe_output: null,
+							error: "check failed",
+						} as InstanceHealth,
+					}));
+				}
+			}
+		};
+
+		void checkHealth();
+		const interval = setInterval(() => void checkHealth(), 30000);
+		return () => clearInterval(interval);
+	}, [sessions]);
+
+	const lastSession = sessions.find((s) => s.id === lastSessionId) ?? null;
+
+	return (
+		<section className="stack sessions-page">
+			<div className="page-header">
+				<h1>Sessions</h1>
+			</div>
+
+			{status === "loading" && <LoadingState message="Loading sessions..." />}
+
+			{status === "error" && (
+				<ErrorState
+					message="Failed to load sessions"
+					onRetry={() => void loadSessions()}
+				/>
+			)}
+
+			{status === "ready" && (
+				<>
+					{/* Last Session */}
+					{lastSession && (
+						<div className="last-session-section">
+							<h2>Last Session</h2>
+							<SessionCard
+								session={lastSession}
+								onOpen={handleOpen}
+								onDelete={handleDelete}
+								isBusy={loadingSessionId === lastSession.id}
+								tunnelHealth={tunnelHealth[lastSession.id] || null}
+							/>
+						</div>
+					)}
+
+					{/* Session List */}
+					<div className="sessions-list-wrapper">
+						<SessionList
+							sessions={sessions}
+							onOpen={handleOpen}
+							onStart={handleStart}
+							onStop={handleStop}
+							onDelete={handleDelete}
+							onRecreateTunnel={handleRecreateTunnel}
+							actionBusyId={loadingSessionId}
+							tunnelHealth={tunnelHealth}
+						/>
+					</div>
+
+					{/* Create Session — use floating button */}
+					<div className="create-session-section">
+						<h2>Start New Tool</h2>
+						<p className="muted">
+							Use the floating button (bottom-right) to start a tool in any
+							workspace.
+						</p>
+					</div>
+
+					{/* Dirty Delete Confirmation Modal */}
+					{dirtyDeleteSession && (
+						<div className="modal-overlay" onClick={clearDirtyDelete}>
+							<div
+								className="modal-content"
+								onClick={(e) => e.stopPropagation()}
+							>
+								<h3>Uncommitted Changes</h3>
+								<p>
+									The repository{" "}
+									<strong>{dirtyDeleteSession.repository_name}</strong> has
+									uncommitted changes. Deleting this session will permanently
+									lose these changes.
+								</p>
+								<div className="changed-files-list">
+									<h4>Changed files:</h4>
+									<ul>
+										{dirtyDeleteFiles.map((file, idx) => (
+											<li key={idx}>{file}</li>
+										))}
+									</ul>
+								</div>
+								<div className="modal-actions">
+									<button
+										className="secondary-button"
+										onClick={clearDirtyDelete}
+										type="button"
+									>
+										Cancel
+									</button>
+									<button
+										className="danger-button"
+										onClick={() => void handleForceDelete(dirtyDeleteSession)}
+										type="button"
+									>
+										Force Delete
+									</button>
+								</div>
+							</div>
+						</div>
+					)}
+				</>
+			)}
+		</section>
+	);
+};

apps/web/src/pages/settings.tsx

@@ -0,0 +1,284 @@
+import { useEffect, useState } from "react";
+import { Link, Outlet, useLocation, useOutletContext } from "react-router-dom";
+
+import {
+	getUserConfig,
+	updateUserConfig,
+	type UserConfig,
+	type UserConfigUpdate,
+} from "../api/settings";
+import { ErrorState, LoadingState } from "../components/data-states";
+import { Icon } from "../components/icon";
+import { useAsyncData } from "../hooks/use-async-data";
+
+const TABS = [
+	{ label: "General", path: "general" },
+	{ label: "SSH Keys", path: "ssh-keys" },
+] as const;
+
+const THEME_OPTIONS = [
+	{ value: "system", label: "System" },
+	{ value: "light", label: "Light" },
+	{ value: "dark", label: "Dark" },
+];
+
+const TOAST_LEVEL_OPTIONS = [
+	{ value: "all", label: "All" },
+	{ value: "errors", label: "Errors only" },
+	{ value: "none", label: "None" },
+];
+
+const MUTE_CATEGORIES = ["instance", "system", "health", "security"];
+
+type SettingsOutletContext = {
+	config: UserConfig;
+	handleChange: (
+		key: keyof UserConfigUpdate,
+		value: string | string[] | null,
+	) => void;
+	handleSave: () => Promise<void>;
+	saveStatus: "idle" | "saving" | "saved" | "error";
+};
+
+export const SettingsPage = () => {
+	const location = useLocation();
+	const {
+		data: loadedConfig,
+		status,
+		reload,
+	} = useAsyncData<UserConfig>(getUserConfig, []);
+	const [config, setConfig] = useState<UserConfig>({
+		theme: "system",
+		default_editor: null,
+		git_user_name: null,
+		git_user_email: null,
+		last_session_id: null,
+		notification_toast_level: "all",
+		notification_mute_categories: [],
+	});
+	const [saveStatus, setSaveStatus] = useState<
+		"idle" | "saving" | "saved" | "error"
+	>("idle");
+
+	// Sync loaded config into local editable state
+	useEffect(() => {
+		if (loadedConfig) {
+			setConfig({
+				...loadedConfig,
+				notification_toast_level:
+					loadedConfig.notification_toast_level ?? "all",
+				notification_mute_categories:
+					loadedConfig.notification_mute_categories ?? [],
+			});
+		}
+	}, [loadedConfig]);
+
+	const handleChange = (
+		key: keyof UserConfigUpdate,
+		value: string | string[] | null,
+	) => {
+		setConfig((prev) => ({ ...prev, [key]: value }) as UserConfig);
+		setSaveStatus("idle");
+	};
+
+	const handleSave = async () => {
+		setSaveStatus("saving");
+		try {
+			const update: UserConfigUpdate = {
+				theme: config.theme,
+				default_editor: config.default_editor,
+				git_user_name: config.git_user_name,
+				git_user_email: config.git_user_email,
+				notification_toast_level: config.notification_toast_level,
+				notification_mute_categories: config.notification_mute_categories,
+			};
+			const updated = await updateUserConfig(update);
+			setConfig(updated);
+			window.dispatchEvent(
+				new CustomEvent("userconfig:updated", { detail: updated }),
+			);
+			setSaveStatus("saved");
+			if (updated.theme === "system") {
+				document.documentElement.removeAttribute("data-theme");
+			} else {
+				document.documentElement.setAttribute("data-theme", updated.theme);
+			}
+			window.setTimeout(() => setSaveStatus("idle"), 2000);
+		} catch {
+			setSaveStatus("error");
+		}
+	};
+
+	if (status === "loading") {
+		return (
+			<section className="stack">
+				<LoadingState message="Loading settings..." />
+			</section>
+		);
+	}
+
+	if (status === "error") {
+		return (
+			<section className="stack">
+				<ErrorState message="Failed to load settings" onRetry={reload} />
+			</section>
+		);
+	}
+
+	const parts = location.pathname.split("/").filter(Boolean);
+	const activePath = location.pathname.endsWith("/settings")
+		? "general"
+		: (parts[parts.length - 1] ?? "general");
+
+	return (
+		<section className="stack settings-page">
+			<header className="settings-header card stack-sm">
+				<div>
+					<p className="eyebrow">Configuration</p>
+					<h1>Settings</h1>
+				</div>
+				<p className="muted">
+					General preferences, SSH keys, and config profiles.
+				</p>
+			</header>
+
+			<nav className="settings-tabs" aria-label="Settings sections">
+				{TABS.map((tab) => (
+					<Link
+						key={tab.path}
+						className={`settings-tab ${activePath === tab.path ? "active" : ""}`}
+						to={tab.path === "general" ? "/settings" : `/settings/${tab.path}`}
+					>
+						{tab.label}
+					</Link>
+				))}
+			</nav>
+
+			<div className="settings-panel card">
+				<Outlet context={{ config, handleChange, handleSave, saveStatus }} />
+			</div>
+		</section>
+	);
+};
+
+export const GeneralSettingsTab = () => {
+	const { config, handleChange, handleSave, saveStatus } =
+		useOutletContext<SettingsOutletContext>();
+
+	return (
+		<div className="stack">
+			<h2>General</h2>
+			<label className="form-field">
+				Theme
+				<select
+					value={config.theme}
+					onChange={(e) => handleChange("theme", e.target.value)}
+				>
+					{THEME_OPTIONS.map((opt) => (
+						<option key={opt.value} value={opt.value}>
+							{opt.label}
+						</option>
+					))}
+				</select>
+			</label>
+			<label className="form-field">
+				Git user name
+				<input
+					type="text"
+					value={config.git_user_name ?? ""}
+					onChange={(e) =>
+						handleChange("git_user_name", e.target.value || null)
+					}
+					placeholder="Your git commit name"
+				/>
+			</label>
+			<label className="form-field">
+				Git user email
+				<input
+					type="email"
+					value={config.git_user_email ?? ""}
+					onChange={(e) =>
+						handleChange("git_user_email", e.target.value || null)
+					}
+					placeholder="your.email@example.com"
+				/>
+			</label>
+			<label className="form-field">
+				Default editor
+				<input
+					type="text"
+					value={config.default_editor ?? ""}
+					onChange={(e) =>
+						handleChange("default_editor", e.target.value || null)
+					}
+					placeholder="e.g., vscode, vim, cursor"
+				/>
+			</label>
+			<h3>Notifications</h3>
+			<label className="form-field">
+				Toast level
+				<select
+					value={config.notification_toast_level ?? "all"}
+					onChange={(e) =>
+						handleChange("notification_toast_level", e.target.value)
+					}
+				>
+					{TOAST_LEVEL_OPTIONS.map((opt) => (
+						<option key={opt.value} value={opt.value}>
+							{opt.label}
+						</option>
+					))}
+				</select>
+			</label>
+			<fieldset className="form-field">
+				<legend>Mute categories</legend>
+				<div className="stack-sm">
+					{MUTE_CATEGORIES.map((cat) => (
+						<label
+							key={cat}
+							style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
+						>
+							<input
+								type="checkbox"
+								checked={(config.notification_mute_categories ?? []).includes(
+									cat,
+								)}
+								onChange={(e) => {
+									const current = config.notification_mute_categories ?? [];
+									const next = e.target.checked
+										? [...current, cat]
+										: current.filter((c) => c !== cat);
+									handleChange("notification_mute_categories", next);
+								}}
+							/>
+							{cat}
+						</label>
+					))}
+				</div>
+			</fieldset>
+			<div className="settings-actions">
+				<button
+					className="primary-button"
+					onClick={() => void handleSave()}
+					type="button"
+				>
+					{saveStatus === "saving" ? (
+						<>
+							<Icon name="loading" size="sm" /> Saving...
+						</>
+					) : (
+						<>
+							<Icon name="save" size="sm" /> Save Settings
+						</>
+					)}
+				</button>
+				{saveStatus === "saved" && (
+					<span className="success-text">Settings saved!</span>
+				)}
+				{saveStatus === "error" && (
+					<span className="error-text">Failed to save</span>
+				)}
+			</div>
+		</div>
+	);
+};

apps/web/src/pages/ssh-keys.tsx

@@ -0,0 +1,277 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { createSSHKey, deleteSSHKey, listSSHKeys, signPayload, verifySignature, type SSHKey } from "../api/ssh_keys";
+import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
+import { Icon } from "../components/icon";
+import { useAsyncData } from "../hooks/use-async-data";
+
+export const SSHKeysPage = () => {
+  const navigate = useNavigate();
+  const { data: keys, status, reload: loadKeys } = useAsyncData<SSHKey[]>(listSSHKeys, []);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [signPayloads, setSignPayloads] = useState<Record<string, string>>({});
+  const [signatures, setSignatures] = useState<Record<string, string>>({});
+  const [signing, setSigning] = useState<Record<string, boolean>>({});
+  const [verifyPayloads, setVerifyPayloads] = useState<Record<string, string>>({});
+  const [verifySignatures, setVerifySignatures] = useState<Record<string, string>>({});
+  const [verifyResults, setVerifyResults] = useState<Record<string, boolean | null>>({});
+  const [verifying, setVerifying] = useState<Record<string, boolean>>({});
+  const [mutationError, setMutationError] = useState<string | null>(null);
+
+  const safeKeys = keys ?? [];
+
+  async function handleGenerate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!newKeyName.trim()) return;
+
+    try {
+      setGenerating(true);
+      await createSSHKey({ name: newKeyName.trim() });
+      setNewKeyName("");
+      await loadKeys();
+    } catch {
+      setMutationError("Failed to generate SSH key");
+    } finally {
+      setGenerating(false);
+    }
+  }
+
+  async function handleDelete(keyId: string) {
+    if (!confirm("Are you sure you want to delete this SSH key?")) return;
+
+    try {
+      await deleteSSHKey(keyId);
+      await loadKeys();
+    } catch {
+      setMutationError("Failed to delete SSH key");
+    }
+  }
+
+  function copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text);
+  }
+
+  async function handleSign(keyId: string) {
+    const payload = signPayloads[keyId];
+    if (!payload?.trim()) return;
+
+    try {
+      setSigning((prev) => ({ ...prev, [keyId]: true }));
+      const result = await signPayload(keyId, { payload: payload.trim() });
+      setSignatures((prev) => ({ ...prev, [keyId]: result.signature }));
+      setMutationError(null);
+    } catch {
+      setMutationError("Failed to sign payload");
+    } finally {
+      setSigning((prev) => ({ ...prev, [keyId]: false }));
+    }
+  }
+
+  async function handleVerify(keyId: string) {
+    const payload = verifyPayloads[keyId];
+    const signature = verifySignatures[keyId];
+    if (!payload?.trim() || !signature?.trim()) return;
+
+    try {
+      setVerifying((prev) => ({ ...prev, [keyId]: true }));
+      const result = await verifySignature(keyId, {
+        payload: payload.trim(),
+        signature: signature.trim(),
+      });
+      setVerifyResults((prev) => ({ ...prev, [keyId]: result.valid }));
+      setMutationError(null);
+    } catch {
+      setMutationError("Failed to verify signature");
+    } finally {
+      setVerifying((prev) => ({ ...prev, [keyId]: false }));
+    }
+  }
+
+  if (status === "loading") return <LoadingState message="Loading SSH keys..." />;
+
+  return (
+    <section className="stack">
+      <div className="page-header">
+        <div>
+          <p className="eyebrow">Settings</p>
+          <h1>SSH Keys</h1>
+        </div>
+        <button className="secondary-button" type="button" onClick={() => navigate("/settings")}>
+          Back to settings
+        </button>
+      </div>
+
+      {mutationError && <div className="error">{mutationError}</div>}
+
+      <form onSubmit={handleGenerate} className="stack">
+        <div className="form-group">
+          <label htmlFor="key-name">Key Name</label>
+          <input
+            id="key-name"
+            type="text"
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            placeholder="e.g., GitHub Work"
+            required
+          />
+        </div>
+        <button type="submit" className="primary-button" disabled={generating}>
+          {generating ? (
+            <>
+              <Icon name="loading" size="sm" />
+              Generating...
+            </>
+          ) : (
+            <>
+              <Icon name="add" size="sm" />
+              Generate SSH Key
+            </>
+          )}
+        </button>
+      </form>
+
+      {status === "error" && <ErrorState message="Failed to load SSH keys" onRetry={loadKeys} />}
+
+      <div className="keys-list">
+        {safeKeys.length === 0 ? (
+          <EmptyState message="No SSH keys yet. Generate one above." />
+        ) : (
+          safeKeys.map((key) => (
+            <div key={key.id} className="key-card">
+              <div className="key-header">
+                <h3>{key.name}</h3>
+                <button
+                  onClick={() => handleDelete(key.id)}
+                  className="danger-button"
+                >
+                  <Icon name="delete" size="sm" />
+                  Delete
+                </button>
+              </div>
+              <div className="key-meta">
+                <span className="muted">
+                  Created: {new Date(key.created_at).toLocaleDateString()}
+                </span>
+              </div>
+              <div className="key-public">
+                <code>{key.public_key.substring(0, 50)}...</code>
+                <button
+                  onClick={() => copyToClipboard(key.public_key)}
+                  className="secondary-button"
+                >
+                  <Icon name="copy" size="sm" />
+                  Copy Full Key
+                </button>
+              </div>
+
+              <div className="key-signing">
+                <h4>Sign Payload</h4>
+                <div className="form-group">
+                  <textarea
+                    value={signPayloads[key.id] || ""}
+                    onChange={(e) =>
+                      setSignPayloads((prev) => ({ ...prev, [key.id]: e.target.value }))
+                    }
+                    placeholder="Enter payload to sign..."
+                    rows={3}
+                  />
+                </div>
+                <button
+                  onClick={() => handleSign(key.id)}
+                  disabled={signing[key.id] || !signPayloads[key.id]?.trim()}
+                  className="primary-button"
+                >
+                  {signing[key.id] ? (
+                    <>
+                      <Icon name="loading" size="sm" />
+                      Signing...
+                    </>
+                  ) : (
+                    <>
+                      <Icon name="edit" size="sm" />
+                      Sign
+                    </>
+                  )}
+                </button>
+                {signatures[key.id] && (
+                  <div className="signature-result">
+                    <label>Signature (base64):</label>
+                    <code>{signatures[key.id]}</code>
+                    <button
+                      onClick={() => copyToClipboard(signatures[key.id])}
+                      className="secondary-button"
+                    >
+                      <Icon name="copy" size="sm" />
+                      Copy Signature
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              <div className="key-verification">
+                <h4>Verify Signature</h4>
+                <div className="form-group">
+                  <textarea
+                    value={verifyPayloads[key.id] || ""}
+                    onChange={(e) =>
+                      setVerifyPayloads((prev) => ({ ...prev, [key.id]: e.target.value }))
+                    }
+                    placeholder="Enter payload..."
+                    rows={2}
+                  />
+                </div>
+                <div className="form-group">
+                  <textarea
+                    value={verifySignatures[key.id] || ""}
+                    onChange={(e) =>
+                      setVerifySignatures((prev) => ({ ...prev, [key.id]: e.target.value }))
+                    }
+                    placeholder="Enter base64 signature..."
+                    rows={2}
+                  />
+                </div>
+                <button
+                  onClick={() => handleVerify(key.id)}
+                  disabled={
+                    verifying[key.id] ||
+                    !verifyPayloads[key.id]?.trim() ||
+                    !verifySignatures[key.id]?.trim()
+                  }
+                  className="primary-button"
+                >
+                  {verifying[key.id] ? (
+                    <>
+                      <Icon name="loading" size="sm" />
+                      Verifying...
+                    </>
+                  ) : (
+                    <>
+                      <Icon name="success" size="sm" />
+                      Verify
+                    </>
+                  )}
+                </button>
+                {verifyResults[key.id] !== undefined && verifyResults[key.id] !== null && (
+                  <div className={`verify-result ${verifyResults[key.id] ? "valid" : "invalid"}`}>
+                    {verifyResults[key.id] ? (
+                      <>
+                        <Icon name="success" size="sm" />
+                        Signature is valid
+                      </>
+                    ) : (
+                      <>
+                        <Icon name="error" size="sm" />
+                        Signature is invalid
+                      </>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </section>
+  );
+};

apps/web/src/pages/terminal.tsx

@@ -0,0 +1,571 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { TerminalComponent, type TerminalRef } from "../components/terminal";
+import {
+	TerminalSessionTabs,
+	type TerminalSessionInfo,
+} from "../components/terminal-session-tabs";
+import { Icon } from "../components/icon";
+import { SpecialKeysStrip } from "../components/special-keys-strip";
+import { SpecialKeysPanel } from "../components/special-keys-panel";
+import { useMobileViewport } from "../hooks/use-mobile-viewport";
+import { useAutoHide } from "../hooks/use-auto-hide";
+import { useVirtualKeyboard } from "../hooks/use-virtual-keyboard";
+import { useTerminalSessions } from "../hooks/use-terminal-sessions";
+import type { TerminalSession } from "../api/terminal";
+import type { ModifierKey } from "../hooks/use-special-keys";
+
+const SESSIONS_TO_INFO = (sessions: TerminalSession[]): TerminalSessionInfo[] =>
+	sessions.map((s) => ({
+		id: s.id,
+		name: s.name,
+		status: s.status as TerminalSessionInfo["status"],
+	}));
+
+type TerminalStatus =
+	| "connecting"
+	| "connected"
+	| "disconnected"
+	| "error"
+	| "resetting";
+
+export const TerminalPage: React.FC = () => {
+	const { instanceId } = useParams<{
+		instanceId: string;
+	}>();
+	const navigate = useNavigate();
+	const isMobile = useMobileViewport();
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	const terminalRefs = useRef<Record<string, React.RefObject<TerminalRef>>>({});
+	const headerAutoHide = useAutoHide({ timeout: 3000, enabled: isMobile });
+
+	// Track terminal status and callbacks for unified fullscreen header
+	const [terminalStatuses, setTerminalStatuses] = useState<
+		Record<string, TerminalStatus>
+	>({});
+	const changeFontSizeRef = useRef<((delta: number) => void) | null>(null);
+	const sendDataRef = useRef<((data: string) => void) | null>(null);
+	const focusInputRef = useRef<(() => void) | null>(null);
+	const [showResetConfirm, setShowResetConfirm] = useState(false);
+	const [showSpecialKeysPanel, setShowSpecialKeysPanel] = useState(false);
+	const [activeModifier, setActiveModifier] = useState<ModifierKey | null>(
+		null,
+	);
+	const { isOpen: isKeyboardOpen, height: keyboardHeight } =
+		useVirtualKeyboard();
+
+	const {
+		sessions,
+		activeSessionId,
+		setActiveSessionId,
+		createSession,
+		closeSession,
+		renameSession,
+		resetSession,
+		loading,
+		error,
+	} = useTerminalSessions(instanceId ?? "");
+
+	// Auto-create default session if none exist after loading completes
+	useEffect(() => {
+		if (!loading && sessions.length === 0 && !error && instanceId) {
+			void createSession("Session 1");
+		}
+	}, [loading, sessions.length, error, instanceId, createSession]);
+
+	// Ensure refs map is kept in sync with sessions
+	useEffect(() => {
+		for (const session of sessions) {
+			if (!terminalRefs.current[session.id]) {
+				terminalRefs.current[session.id] = React.createRef<TerminalRef>();
+			}
+		}
+		// Clean up refs for closed sessions
+		const currentIds = new Set(sessions.map((s) => s.id));
+		for (const id of Object.keys(terminalRefs.current)) {
+			if (!currentIds.has(id)) {
+				delete terminalRefs.current[id];
+			}
+		}
+	}, [sessions]);
+
+	// Fit and focus active terminal when switching tabs
+	useEffect(() => {
+		if (activeSessionId && terminalRefs.current[activeSessionId]) {
+			const ref = terminalRefs.current[activeSessionId];
+			// Double rAF ensures layout has settled after the display:block switch
+			let raf1 = 0;
+			let raf2 = 0;
+			raf1 = requestAnimationFrame(() => {
+				raf2 = requestAnimationFrame(() => {
+					ref.current?.fit();
+					ref.current?.focus();
+				});
+			});
+			return () => {
+				cancelAnimationFrame(raf1);
+				cancelAnimationFrame(raf2);
+			};
+		}
+	}, [activeSessionId]);
+
+	// Keyboard shortcuts
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			const isAltShift = e.altKey && e.shiftKey && !e.ctrlKey && !e.metaKey;
+			if (!isAltShift) return;
+
+			switch (e.key.toLowerCase()) {
+				case "n":
+					e.preventDefault();
+					if (sessions.length < 5) {
+						void createSession(`Session ${sessions.length + 1}`);
+					}
+					break;
+				case "w":
+					e.preventDefault();
+					if (
+						activeSessionId &&
+						window.confirm("Close this terminal session?")
+					) {
+						void closeSession(activeSessionId);
+					}
+					break;
+				case "arrowleft":
+					e.preventDefault();
+					if (activeSessionId) {
+						const idx = sessions.findIndex((s) => s.id === activeSessionId);
+						if (idx > 0) {
+							setActiveSessionId(sessions[idx - 1].id);
+						}
+					}
+					break;
+				case "arrowright":
+					e.preventDefault();
+					if (activeSessionId) {
+						const idx = sessions.findIndex((s) => s.id === activeSessionId);
+						if (idx < sessions.length - 1) {
+							setActiveSessionId(sessions[idx + 1].id);
+						}
+					}
+					break;
+				case "r":
+					e.preventDefault();
+					if (activeSessionId) {
+						void resetSession(activeSessionId);
+					}
+					break;
+				case "f":
+					e.preventDefault();
+					setIsFullscreen((prev) => !prev);
+					break;
+				default:
+					break;
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		sessions,
+		activeSessionId,
+		createSession,
+		closeSession,
+		resetSession,
+		setActiveSessionId,
+	]);
+
+	// Keep screen awake while terminal is open
+	useEffect(() => {
+		let wakeLock: WakeLockSentinel | null = null;
+
+		const requestWakeLock = async () => {
+			try {
+				if ("wakeLock" in navigator) {
+					wakeLock = await navigator.wakeLock.request("screen");
+				}
+			} catch {
+				// Wake lock may be denied; silently ignore
+			}
+		};
+
+		void requestWakeLock();
+
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "visible") {
+				void requestWakeLock();
+			}
+		};
+
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+			wakeLock?.release().catch(() => {});
+		};
+	}, []);
+
+	// Lock page scroll on mobile terminal so swipes scroll the terminal buffer,
+	// not the page.
+	useEffect(() => {
+		if (!isMobile) return;
+		document.documentElement.classList.add("terminal-page-open");
+		document.body.classList.add("terminal-page-open");
+		return () => {
+			document.documentElement.classList.remove("terminal-page-open");
+			document.body.classList.remove("terminal-page-open");
+		};
+	}, [isMobile]);
+
+	// Click outside terminal content/header to exit fullscreen
+	const handleFullscreenClick = useCallback(
+		(e: React.MouseEvent<HTMLElement>) => {
+			if (!isFullscreen) return;
+			const target = e.target as Node;
+			const current = e.currentTarget as HTMLElement;
+			const content = current.querySelector(".terminal-page-content");
+			const header = current.querySelector(".terminal-fullscreen-header");
+			if (content?.contains(target) || header?.contains(target)) {
+				return;
+			}
+			setIsFullscreen(false);
+		},
+		[isFullscreen],
+	);
+
+	const handleSelect = useCallback(
+		(sessionId: string) => {
+			setActiveSessionId(sessionId);
+		},
+		[setActiveSessionId],
+	);
+
+	const handleClose = useCallback(
+		async (sessionId: string) => {
+			await closeSession(sessionId);
+		},
+		[closeSession],
+	);
+
+	const handleCreate = useCallback(() => {
+		void createSession(`Session ${sessions.length + 1}`);
+	}, [createSession, sessions.length]);
+
+	const handleRename = useCallback(
+		(sessionId: string, newName: string) => {
+			void renameSession(sessionId, newName);
+		},
+		[renameSession],
+	);
+
+	const handleTerminalReady = useCallback(
+		(
+			sendData: (data: string) => void,
+			status: TerminalStatus,
+			focusInput: () => void,
+			changeFontSize: (delta: number) => void,
+		) => {
+			setTerminalStatuses((prev) => ({
+				...prev,
+				[activeSessionId ?? "default"]: status,
+			}));
+			sendDataRef.current = sendData;
+			focusInputRef.current = focusInput;
+			changeFontSizeRef.current = changeFontSize;
+		},
+		[activeSessionId],
+	);
+
+	const handleFontSizeChange = useCallback((delta: number) => {
+		changeFontSizeRef.current?.(delta);
+	}, []);
+
+	const handleSendKey = useCallback((data: string) => {
+		sendDataRef.current?.(data);
+	}, []);
+
+	const handleReset = useCallback(() => {
+		if (activeSessionId && terminalRefs.current[activeSessionId]) {
+			terminalRefs.current[activeSessionId].current?.reset();
+		}
+	}, [activeSessionId]);
+
+	if (!instanceId) {
+		return (
+			<section className="stack">
+				<h1>Terminal</h1>
+				<p className="muted">No instance ID provided.</p>
+			</section>
+		);
+	}
+
+	const sessionInfos = SESSIONS_TO_INFO(sessions);
+
+	if (isMobile) {
+		const activeSession = sessions.find((s) => s.id === activeSessionId);
+		const status =
+			terminalStatuses[activeSessionId ?? "default"] ?? "connecting";
+
+		return (
+			<section
+				className={`terminal-page mobile ${isFullscreen ? "fullscreen" : ""}`}
+			>
+				{/* Overlay status bar — floats over terminal, never resizes it */}
+				<div
+					className={`mobile-terminal-overlay ${headerAutoHide.isVisible ? "visible" : "hidden"}`}
+					onClick={(e) => e.stopPropagation()}
+				>
+					<div className="mobile-terminal-toolbar">
+						<div className="mobile-terminal-toolbar-left">
+							<button
+								className="mobile-terminal-toolbtn"
+								onClick={() => navigate(-1)}
+								type="button"
+								aria-label="Back"
+							>
+								<Icon name="arrow-left" size="sm" />
+							</button>
+						</div>
+						<div className="mobile-terminal-toolbar-center">
+							<span className="mobile-terminal-title">
+								{activeSession?.name || "Terminal"}
+							</span>
+							<span
+								className={`mobile-terminal-status status-dot ${status}`}
+								aria-label={`Connection status: ${status}`}
+							/>
+						</div>
+						<div className="mobile-terminal-toolbar-right">
+							<button
+								className="mobile-terminal-toolbtn"
+								onClick={() => handleFontSizeChange(-1)}
+								type="button"
+								aria-label="Decrease font size"
+							>
+								<span style={{ fontSize: "0.75rem" }}>A-</span>
+							</button>
+							<button
+								className="mobile-terminal-toolbtn"
+								onClick={() => handleFontSizeChange(1)}
+								type="button"
+								aria-label="Increase font size"
+							>
+								<span style={{ fontSize: "1rem" }}>A+</span>
+							</button>
+							<button
+								className="mobile-terminal-toolbtn"
+								onClick={() => navigate(-1)}
+								type="button"
+								aria-label="Exit terminal"
+							>
+								<Icon name="close" size="sm" />
+							</button>
+						</div>
+					</div>
+					<div className="mobile-terminal-overlay-tabs">
+						<TerminalSessionTabs
+							sessions={sessionInfos}
+							activeSessionId={activeSessionId ?? ""}
+							onSelect={handleSelect}
+							onClose={handleClose}
+							onCreate={handleCreate}
+							onRename={handleRename}
+							isMobile={true}
+						/>
+					</div>
+				</div>
+
+				{/* Terminal content — always fills full viewport */}
+				<div
+					className="terminal-page-content mobile-full"
+					style={{ paddingBottom: isKeyboardOpen ? keyboardHeight : 0 }}
+					onClick={() => headerAutoHide.toggle()}
+				>
+					{error && <div className="terminal-error-banner">{error}</div>}
+					{sessions
+						.filter((session) => session.id === activeSessionId)
+						.map((session) => (
+							<div key={session.id} className="terminal-instance active">
+								<TerminalComponent
+									ref={terminalRefs.current[session.id]}
+									instanceId={instanceId}
+									sessionId={session.id}
+									onClose={() => handleClose(session.id)}
+									isMobile={true}
+									showControls={false}
+									activeModifier={activeModifier}
+									onModifierChange={setActiveModifier}
+									onTerminalReady={handleTerminalReady}
+								/>
+							</div>
+						))}
+					{sessions.length === 0 && !loading && (
+						<div className="terminal-empty-state">
+							<p>No terminal sessions. Press Alt+Shift+N to create one.</p>
+						</div>
+					)}
+				</div>
+
+				<SpecialKeysStrip
+					onSend={handleSendKey}
+					isVisible={!showSpecialKeysPanel}
+					onMoreClick={() => setShowSpecialKeysPanel(true)}
+					onKeepFocus={() => focusInputRef.current?.()}
+					activeModifier={activeModifier}
+					onModifierChange={setActiveModifier}
+				/>
+
+				<SpecialKeysPanel
+					onSend={handleSendKey}
+					isOpen={showSpecialKeysPanel}
+					onClose={() => setShowSpecialKeysPanel(false)}
+					onKeepFocus={() => focusInputRef.current?.()}
+					activeModifier={activeModifier}
+					onModifierChange={setActiveModifier}
+				/>
+			</section>
+		);
+	}
+
+	return (
+		<section
+			className={`terminal-page ${isFullscreen ? "fullscreen" : ""}`}
+			onClick={handleFullscreenClick}
+		>
+			{!isFullscreen && (
+				<div className="terminal-page-header">
+					<button
+						className="secondary-button"
+						onClick={() => navigate(-1)}
+						type="button"
+					>
+						Back
+					</button>
+					<h1>Terminal</h1>
+					<button
+						className="secondary-button"
+						onClick={() => setIsFullscreen((p) => !p)}
+						type="button"
+						title="Toggle fullscreen (Alt+Shift+F)"
+					>
+						{isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
+					</button>
+				</div>
+			)}
+			{isFullscreen ? (
+				<div className="terminal-fullscreen-header">
+					<div className="terminal-fullscreen-header-tabs">
+						<TerminalSessionTabs
+							sessions={sessionInfos}
+							activeSessionId={activeSessionId ?? ""}
+							onSelect={handleSelect}
+							onClose={handleClose}
+							onCreate={handleCreate}
+							onRename={handleRename}
+							isMobile={false}
+						/>
+					</div>
+					<div className="terminal-fullscreen-header-controls">
+						<span
+							className={`terminal-fullscreen-status status-dot ${terminalStatuses[activeSessionId ?? "default"] ?? "connecting"}`}
+							aria-label={`Terminal status: ${terminalStatuses[activeSessionId ?? "default"] ?? "connecting"}`}
+						/>
+						<button
+							className="terminal-header-button"
+							onClick={() => handleFontSizeChange(-1)}
+							type="button"
+							aria-label="Decrease font size"
+						>
+							A-
+						</button>
+						<button
+							className="terminal-header-button"
+							onClick={() => handleFontSizeChange(1)}
+							type="button"
+							aria-label="Increase font size"
+						>
+							A+
+						</button>
+						<button
+							className="terminal-header-button"
+							onClick={() => setShowResetConfirm(true)}
+							type="button"
+							aria-label="Reset terminal"
+						>
+							Reset
+						</button>
+						<button
+							className="terminal-close"
+							onClick={() => setIsFullscreen(false)}
+							type="button"
+							title="Exit fullscreen (Esc)"
+						>
+							Exit
+						</button>
+					</div>
+					{showResetConfirm && (
+						<div className="terminal-reset-confirm">
+							<div className="terminal-reset-confirm-content">
+								<p>
+									Reset terminal? This will kill the current shell session and
+									start fresh.
+								</p>
+								<div className="terminal-reset-confirm-buttons">
+									<button
+										className="terminal-reset-confirm-button cancel"
+										onClick={() => setShowResetConfirm(false)}
+										type="button"
+									>
+										Cancel
+									</button>
+									<button
+										className="terminal-reset-confirm-button confirm"
+										onClick={() => {
+											setShowResetConfirm(false);
+											handleReset();
+										}}
+										type="button"
+									>
+										Reset
+									</button>
+								</div>
+							</div>
+						</div>
+					)}
+				</div>
+			) : (
+				<TerminalSessionTabs
+					sessions={sessionInfos}
+					activeSessionId={activeSessionId ?? ""}
+					onSelect={handleSelect}
+					onClose={handleClose}
+					onCreate={handleCreate}
+					onRename={handleRename}
+					isMobile={false}
+				/>
+			)}
+			<div className="terminal-page-content">
+				{error && <div className="terminal-error-banner">{error}</div>}
+				{sessions
+					.filter((session) => session.id === activeSessionId)
+					.map((session) => (
+						<div key={session.id} className="terminal-instance active">
+							<TerminalComponent
+								ref={terminalRefs.current[session.id]}
+								instanceId={instanceId}
+								sessionId={session.id}
+								onClose={() => handleClose(session.id)}
+								isMobile={false}
+								showControls={!isFullscreen}
+								onTerminalReady={handleTerminalReady}
+							/>
+						</div>
+					))}
+				{sessions.length === 0 && !loading && (
+					<div className="terminal-empty-state">
+						<p>No terminal sessions. Press Alt+Shift+N to create one.</p>
+					</div>
+				)}
+			</div>
+		</section>
+	);
+};

apps/web/src/pages/workspace-detail.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "../components/icon";
 import { useWorkspaces } from "../hooks/use-workspaces";
 import { useWorkspaceFiles } from "../hooks/use-workspace-files";
 import { useWorkspaceGit } from "../hooks/use-workspace-git";

apps/web/src/pages/workspaces.tsx

@@ -1,7 +1,7 @@
 /** Workspaces list page. */
 
 import { useState } from "react";
-import { Icon } from "@/components/ui/Icon";
+import { Icon } from "../components/icon";
 import { useWorkspaces } from "../hooks/use-workspaces";
 import { useWorkspaceActions } from "../hooks/use-workspace-actions";
 import { WorkspaceCard } from "../components/workspace-card";

apps/web/src/types.ts

@@ -1,5 +1,5 @@
 // Legacy types file — being migrated to types/ directory.
 // This file will be removed once all consumers are updated.
 
-export type { Project, ProjectWithRepos } from "./types/project";
+export type { Project } from "./types/project";
 export type { SessionPayload, SessionUser } from "./types/user";

apps/web/src/types/git-repository.ts

@@ -8,7 +8,6 @@ export interface GitRepository {
 	remote_url: string | null;
 	last_push: string | null;
 	created_at: string | null;
-	ssh_key_id?: string | null;
 }
 
 export interface GitRepositoryCreate {