merge: integrate main restructuring into dev

- Resolve 57 merge conflicts from codebase restructure
- Port dev feature code to new directory structure:
  * Update import paths to use @/ aliases
  * Add backward-compatible API signatures (createInstance, startInstance, deleteInstance)
  * Add missing type exports (ProjectWithRepos, InstanceHealth, Branch, BranchesResponse)
  * Extend Session and GitRepository types for dev features
  * Extend TerminalComponent props for mobile terminal wrapper
  * Add missing icon names (bell, drag, undo)

Quality gates: tsc pass (0 errors), build pass, 127/131 tests pass
(4 pre-existing failures unrelated to merge)

AGENTS.md

@@ -4,6 +4,10 @@
 
 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
@@ -71,6 +75,7 @@ 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.
 
@@ -85,15 +90,33 @@ 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,6 +27,7 @@ WORKDIR /app
 RUN apt-get update && apt-get install -y --no-install-recommends \
     libpq5 \
     git \
+    openssh-client \
     netcat-openbsd \
     ca-certificates \
     curl \
@@ -49,8 +50,8 @@ ENV PATH=/root/.local/bin:$PATH
 # Copy application code
 COPY --chown=appuser:appgroup . .
 
-# Create directories for repo and instance storage
-RUN mkdir -p /data/repos /data/instances && chown -R appuser:appgroup /data
+# Create directories for repo, instance, and workspace storage
+RUN mkdir -p /data/repos /data/instances /data/working-copies && 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,4 +1,6 @@
 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", "users_router"]
+__all__ = ["auth_router", "events_router", "notifications_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.info("Auth login initiated: redirect_uri=%s, next=%s", redirect_uri, next)
+    logger.debug("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.info("Auth callback received: code=%s... state=%s", code[:10] if code else "None", state[:10] if state else "None")
+    logger.debug("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.info("Exchanging code for tokens (redirect_uri=%s)", redirect_uri)
+    logger.debug("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.info("User info fetched successfully")
+            logger.debug("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.info("User info: authentik_id=%s, email=%s, name=%s", authentik_id, email, name)
+    logger.debug("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.info("Creating new user: authentik_id=%s", authentik_id)
+            logger.debug("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.info("Existing user found: id=%s, updating info", user.id)
+            logger.debug("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.info("Auth /me called, cookie present: %s", bool(session_cookie))
+    logger.debug("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.info("Auth /me: cookie_domain=%s, cookie_secure=%s, cookie_samesite=%s", 
+    logger.debug("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.info("Auth /me: decoded session for user_id=%s", user_id)
+        logger.debug("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,7 +2,6 @@
 
 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,15 +1,52 @@
+"""Structured JSON logging configuration."""
+
+import json
 import logging
 import sys
 import time
 import traceback
-from typing import Callable
+from collections.abc 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."""
 
@@ -17,7 +54,6 @@ 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,
@@ -29,7 +65,6 @@ 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,
@@ -69,15 +104,13 @@ class ExceptionLoggingMiddleware(BaseHTTPMiddleware):
 
 
 def configure_logging(level: int = logging.INFO) -> None:
-    """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",
-    )
+    """Configure structured JSON logging for the application."""
+    formatter = JSONFormatter()
 
     # 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,6 +10,7 @@ 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
 
 
@@ -18,11 +19,15 @@ class GitRepository(UUIDPrimaryKeyMixin, TimestampMixin, Base):
 
     name: Mapped[str] = mapped_column(String(255))
     path: Mapped[str] = mapped_column(String(1024))
-    project_id: Mapped[uuid.UUID] = mapped_column(UUID(), ForeignKey("projects.id"), nullable=False)
+    project_id: Mapped[uuid.UUID | None] = mapped_column(UUID(), ForeignKey("projects.id"), nullable=True)
     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

@@ -1,48 +0,0 @@
-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,6 +8,7 @@ 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
 
 
@@ -18,23 +19,36 @@ 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")
-    interfaces: Mapped[list[str]] = mapped_column(JSON, default=list, nullable=False)
+    interface_type: Mapped[str] = mapped_column(
+        String(20), nullable=False, default="web"
+    )
+    requires_port: Mapped[bool] = mapped_column(Boolean, default=True, nullable=False)
     default_port: Mapped[int] = mapped_column(nullable=False)
     definition_type: Mapped[str] = mapped_column(
-        String(20), nullable=False, default="compose"
-    )  # "compose" or "dockerfile"
+        String(16), nullable=False, default="legacy"
+    )  # "legacy" | "manifest"
+    manifest_id: Mapped[uuid.UUID | None] = mapped_column(
+        UUID(),
+        ForeignKey("tool_definition_manifests.id"),
+        nullable=True,
+    )
     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)
-    required_variables: Mapped[list[str]] = mapped_column(JSON, default=list, nullable=False)
-    is_builtin: Mapped[bool] = mapped_column(Boolean, default=False, nullable=False)
+    startup_command: Mapped[str | None] = mapped_column(Text, nullable=True)
+    required_variables: Mapped[list[str]] = mapped_column(
+        JSON, default=list, 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

@@ -1,484 +0,0 @@
-"""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,7 +6,9 @@ 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:
@@ -18,13 +20,18 @@ def build_image(instance_dir: str, dockerfile: str, tag: str, build_context: dic
     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)
-    logger.info("Wrote Dockerfile to %s", dockerfile_path)
+    dockerfile_path.write_text(dockerfile, newline="\n")
+    logger.debug("Wrote Dockerfile to %s (%d bytes)", dockerfile_path, len(dockerfile))
 
     # Write build context files
     if build_context:
@@ -34,19 +41,27 @@ def build_image(instance_dir: str, dockerfile: str, tag: str, build_context: dic
             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)
-            full_path.write_text(content)
-            logger.info("Wrote build context file: %s", full_path)
+            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)
 
     # Build image
-    logger.info("Building Docker image with tag: %s", tag)
+    logger.debug("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,
     ]
 
@@ -57,7 +72,7 @@ def build_image(instance_dir: str, dockerfile: str, tag: str, build_context: dic
             text=True,
             timeout=300,  # 5 minute timeout for builds
         )
-        logger.info("Docker build completed: returncode=%d", result.returncode)
+        logger.debug("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,7 +2,6 @@
 
 import subprocess
 from dataclasses import dataclass, field
-from typing import Any
 
 
 def _run_git_command(repo_path: str, *args: str) -> str:
@@ -124,7 +123,15 @@ 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:
-        _run_git_command(repo_path, "checkout", "--orphan", name)
+        # 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
         return
 
     _run_git_command(repo_path, "branch", name, base_branch)
@@ -155,7 +162,14 @@ def checkout_branch(repo_path: str, name: str) -> None:
     Raises:
         RuntimeError: If checkout fails
     """
-    _run_git_command(repo_path, "checkout", name)
+    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
 
 
 def commit_changes(
@@ -290,6 +304,10 @@ def get_current_branch(repo_path: str) -> str:
         Current branch name
     """
     try:
-        return _run_git_command(repo_path, "rev-parse", "--abbrev-ref", "HEAD").strip()
+        branch = _run_git_command(repo_path, "rev-parse", "--abbrev-ref", "HEAD").strip()
+        if branch != "HEAD":
+            return branch
     except RuntimeError:
-        return _run_git_command(repo_path, "symbolic-ref", "--short", "HEAD").strip()
+        pass
+
+    return _run_git_command(repo_path, "symbolic-ref", "--short", "HEAD").strip()

apps/api/src/utils/git_files.py

@@ -289,19 +289,37 @@ 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 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 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 duplicates
         if any(b.name == branch_name for b in branches):

apps/api/tests/conftest.py

@@ -8,16 +8,14 @@ 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, build_database_url
+from src.config import Settings
 from src.models.base import Base
 from src.main import app
 from src.auth.dependencies import get_db_session
@@ -47,10 +45,8 @@ 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, \
-         patch("src.main.seed_builtin_tool_types") as mock_seed:
+    with patch("src.main.init_database") as mock_init:
         mock_init.return_value = True
-        mock_seed.return_value = None
         
         try:
             with TestClient(app) as client:
@@ -61,6 +57,31 @@ 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."""
@@ -110,6 +131,65 @@ 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

@@ -1,255 +0,0 @@
-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,6 +70,20 @@ 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,7 +16,6 @@ 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__
@@ -24,20 +23,26 @@ def test_shared_mixins_define_expected_columns() -> None:
 
 
 @pytest.mark.integration
-
 def test_expected_tables_are_registered() -> None:
     assert set(Base.metadata.tables) == {
-        "refresh_tokens",
+        "config_profile_includes",
+        "config_profiles",
         "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
 
@@ -56,7 +61,6 @@ 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))
@@ -68,7 +72,6 @@ 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))
@@ -82,33 +85,15 @@ 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,6 +3,7 @@ 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

@@ -1,256 +0,0 @@
-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,7 +98,6 @@ 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:
@@ -120,7 +119,6 @@ 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)
@@ -234,7 +232,6 @@ 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
 
@@ -376,28 +373,7 @@ 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
@@ -442,53 +418,4 @@ 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,4 +1,3 @@
-import uuid
 import pytest
 from fastapi.testclient import TestClient
 
@@ -7,7 +6,9 @@ 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",
@@ -28,7 +29,9 @@ 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",
@@ -39,7 +42,7 @@ class TestToolTypesAPIExtended:
                 "interfaces": ["web"],
                 "default_port": 8080,
                 "definition_type": "compose",
-                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx\n    ports:\n      - '8080:8080'",
                 "readiness_probe": {
                     "command": "curl -f http://localhost:8080",
                     "timeout": 30,
@@ -53,7 +56,9 @@ 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",
@@ -68,7 +73,9 @@ 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",
@@ -82,7 +89,9 @@ 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(
@@ -92,7 +101,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",
+                "compose_template": "version: '3.8'\nservices:\n  app:\n    image: nginx\n    ports:\n      - '8080:8080'",
                 "required_variables": [],
             },
         )
@@ -113,7 +122,9 @@ 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."""
@@ -128,7 +139,9 @@ 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",
@@ -142,7 +155,9 @@ 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",
@@ -155,7 +170,9 @@ 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(
@@ -167,7 +184,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    volumes:\n      - \"{{REPO_PATH}}:/workspace\"",
+                "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\"",
                 "readiness_probe": {
                     "command": "curl -f http://localhost:8443",
                     "timeout": 30,
@@ -186,3 +203,124 @@ 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,6 +1,5 @@
 """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,9 +1,7 @@
 """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,6 +15,12 @@ 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 from "axios";
+import axios, { type AxiosRequestConfig } from "axios";
 
 const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
 
@@ -14,13 +14,38 @@ 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,
-  (error) => {
+  async (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,6 +22,17 @@ 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,
@@ -36,6 +47,16 @@ 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

@@ -1,299 +0,0 @@
-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,51 +1,54 @@
 import { apiClient } from "./client";
-import type { Project } from "../types";
+import type { Project, ProjectWithRepos } 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<Project[]> => {
-  const response = await apiClient.get<Project[]>("/projects");
-  return response.data;
+export const listProjects = async (): Promise<ProjectWithRepos[]> => {
+	const response = await apiClient.get<ProjectWithRepos[]>("/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,6 +5,18 @@ 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,
@@ -20,12 +32,20 @@ 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;
@@ -35,9 +55,15 @@ 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;
 }
@@ -68,10 +94,12 @@ export async function deleteInstance(
 	projectId: string,
 	repoId: string,
 	instanceId: string,
+	force?: boolean,
 ): Promise<void> {
-	await apiClient.delete(
-		`/projects/${projectId}/repositories/${repoId}/instances/${instanceId}`,
-	);
+	const url = force
+		? `/projects/${projectId}/repositories/${repoId}/instances/${instanceId}?force=true`
+		: `/projects/${projectId}/repositories/${repoId}/instances/${instanceId}`;
+	await apiClient.delete(url);
 }
 
 export async function getUserSessions(): Promise<Session[]> {

apps/web/src/api/settings.ts

@@ -1,27 +1,33 @@
 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;
+	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[];
 }
 
 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;
+	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[];
 }
 
 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,3 +24,30 @@ 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

@@ -1,53 +0,0 @@
-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

@@ -1,227 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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 "./icon";
+import { Icon } from "@/components/ui/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 "./icon";
+import { Icon } from "@/components/ui/Icon";
 
 interface LoadingStateProps {
   message?: string;

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

@@ -10,299 +10,296 @@ 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,6 +15,15 @@ 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> = {
@@ -44,7 +53,17 @@ 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

@@ -1,241 +0,0 @@
-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 "./icon";
+import { Icon } from "@/components/ui/Icon";
 import { validateGitUrl } from "../api/config_profiles";
 import type { GitMount, GitMountMapping } from "../api/config_profiles";
 

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

@@ -1,276 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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

@@ -1,608 +0,0 @@
-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 "./icon";
+import { Icon } from "@/components/ui/Icon";
 import { extractErrorMessage } from "../utils/errors";
 import {
 	compileToolDefinition,

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

@@ -1,144 +0,0 @@
-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 "./icon";
-import type { IconName } from "./icon";
+import { Icon } from "@/components/ui/Icon";
+import type { IconName } from "@/components/ui/Icon";
 
 export interface MobileActionSheetItem {
   id: string;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Icon } from "./icon";
+import { Icon } from "@/components/ui/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 "./icon";
+import { Icon } from "@/components/ui/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 "./icon";
+import { Icon } from "@/components/ui/Icon";
 
 interface MobilePageHeaderProps {
   title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "./icon";
+import { Icon } from "@/components/ui/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 "./terminal";
+import { TerminalComponent } from "@/components/features/terminal/TerminalComponent";
 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 "./icon";
+import { Icon } from "@/components/ui/Icon";
 
 interface NotificationCenterProps {
 	isMobileTerminal?: boolean;

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

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

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

@@ -1,49 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,343 +0,0 @@
-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 "./icon";
+import { Icon } from "@/components/ui/Icon";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
 import { MobileActionSheet } from "./mobile-action-sheet";
-import type { IconName } from "./icon";
+import type { IconName } from "@/components/ui/Icon";
 
 export interface SessionCardProps {
 	session: Session;

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

@@ -1,43 +0,0 @@
-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 "./icon";
+import { Icon } from "@/components/ui/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 "./icon";
-import { listToolTypes, type ToolType } from "../api/tool_types";
+import { Icon } from "@/components/ui/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

@@ -1,77 +0,0 @@
-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

@@ -1,866 +0,0 @@
-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 "./icon";
-import { listToolTypes, type ToolType } from "../api/tool_types";
+import { Icon } from "@/components/ui/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 "./icon";
+import { Icon } from "@/components/ui/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,
+  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,
 } 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";
+  | "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";
 
-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,
+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,
 };
 
 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 "./icon";
+import { Icon } from "@/components/ui/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 "./icon";
+import { Icon } from "@/components/ui/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

@@ -1,48 +0,0 @@
-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,11 +198,7 @@ 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/icon";
+import { Icon } from "@/components/ui/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

@@ -1,81 +0,0 @@
-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

@@ -1,254 +0,0 @@
-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

@@ -1,226 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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

@@ -1,196 +0,0 @@
-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

@@ -1,433 +0,0 @@
-/** 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

@@ -1,505 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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

@@ -1,284 +0,0 @@
-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

@@ -1,277 +0,0 @@
-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

@@ -1,571 +0,0 @@
-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/icon";
+import { Icon } from "@/components/ui/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/icon";
+import { Icon } from "@/components/ui/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 } from "./types/project";
+export type { Project, ProjectWithRepos } from "./types/project";
 export type { SessionPayload, SessionUser } from "./types/user";

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

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