Add web frontend infrastructure for HF Agent

- Backend: FastAPI server with WebSocket support
- Session manager for multi-session handling
- Agent API routes (create, submit, approve, interrupt, undo, compact)
- HF OAuth authentication routes
- WebSocket connection manager for real-time events

- Frontend: React + Vite + MUI + TypeScript
- Zustand stores for agent state and session management
- Chat UI with markdown rendering
- Tool approval modal for batch approvals
- Session sidebar for multi-session support
- WebSocket hook with auto-reconnection

- Docker: Multi-stage build with uv for Python deps
- Updated pyproject.toml with web backend dependencies
- Added HF Space metadata to README.md

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

Dockerfile

@@ -0,0 +1,53 @@
+# Stage 1: Build frontend
+FROM node:20-alpine AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Production
+FROM python:3.12-slim
+
+# Create user with UID 1000 (required for HF Spaces)
+RUN useradd -m -u 1000 user
+
+WORKDIR /app
+
+# Install system dependencies and uv
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    curl \
+    && curl -LsSf https://astral.sh/uv/install.sh | sh \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV PATH="/root/.local/bin:$PATH"
+
+# Copy pyproject.toml and install dependencies with uv
+COPY pyproject.toml .
+RUN uv sync --extra agent --no-dev
+
+# Copy application code with proper ownership
+COPY --chown=user agent/ ./agent/
+COPY --chown=user backend/ ./backend/
+COPY --chown=user configs/ ./configs/
+
+# Copy built frontend
+COPY --from=frontend-builder --chown=user /app/frontend/dist ./static/
+
+# Create directories for session logs
+RUN mkdir -p /app/session_logs && chown user:user /app/session_logs
+
+# Switch to non-root user
+USER user
+
+# Set environment
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    PYTHONUNBUFFERED=1
+
+# Expose port
+EXPOSE 7860
+
+# Run the application
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,3 +1,17 @@
+---
+title: HF Agent
+emoji: 🤖
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 7860
+hf_oauth: true
+hf_oauth_scopes:
+  - read-repos
+  - write-repos
+  - inference-api
+---
+
 # HF Agent
 
 An MLE agent CLI with MCP (Model Context Protocol) integration and built-in tool support.

backend/__init__.py

@@ -0,0 +1 @@
+# Backend package for HF Agent web interface

backend/main.py

@@ -0,0 +1,79 @@
+"""FastAPI application for HF Agent web interface."""
+
+import logging
+import os
+from contextlib import asynccontextmanager
+from pathlib import Path
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+
+from backend.routes.agent import router as agent_router
+from backend.routes.auth import router as auth_router
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s - %(name)s - %(levelname)s - %(message)s",
+)
+logger = logging.getLogger(__name__)
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Application lifespan handler."""
+    logger.info("Starting HF Agent backend...")
+    yield
+    logger.info("Shutting down HF Agent backend...")
+
+
+app = FastAPI(
+    title="HF Agent",
+    description="ML Engineering Assistant API",
+    version="1.0.0",
+    lifespan=lifespan,
+)
+
+# CORS middleware for development
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=[
+        "http://localhost:5173",  # Vite dev server
+        "http://localhost:3000",
+        "http://127.0.0.1:5173",
+        "http://127.0.0.1:3000",
+    ],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include routers
+app.include_router(agent_router)
+app.include_router(auth_router)
+
+# Serve static files (frontend build) in production
+static_path = Path(__file__).parent.parent / "static"
+if static_path.exists():
+    app.mount("/", StaticFiles(directory=str(static_path), html=True), name="static")
+    logger.info(f"Serving static files from {static_path}")
+else:
+    logger.info("No static directory found, running in API-only mode")
+
+
+@app.get("/api")
+async def api_root():
+    """API root endpoint."""
+    return {
+        "name": "HF Agent API",
+        "version": "1.0.0",
+        "docs": "/docs",
+    }
+
+
+if __name__ == "__main__":
+    import uvicorn
+
+    port = int(os.environ.get("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port)

backend/models.py

@@ -0,0 +1,76 @@
+"""Pydantic models for API requests and responses."""
+
+from enum import Enum
+from typing import Any
+
+from pydantic import BaseModel
+
+
+class OpType(str, Enum):
+    """Operation types matching agent/core/agent_loop.py."""
+
+    USER_INPUT = "user_input"
+    EXEC_APPROVAL = "exec_approval"
+    INTERRUPT = "interrupt"
+    UNDO = "undo"
+    COMPACT = "compact"
+    SHUTDOWN = "shutdown"
+
+
+class Operation(BaseModel):
+    """Operation to be submitted to the agent."""
+
+    op_type: OpType
+    data: dict[str, Any] | None = None
+
+
+class Submission(BaseModel):
+    """Submission wrapper with ID and operation."""
+
+    id: str
+    operation: Operation
+
+
+class ToolApproval(BaseModel):
+    """Approval decision for a single tool call."""
+
+    tool_call_id: str
+    approved: bool
+    feedback: str | None = None
+
+
+class ApprovalRequest(BaseModel):
+    """Request to approve/reject tool calls."""
+
+    session_id: str
+    approvals: list[ToolApproval]
+
+
+class SubmitRequest(BaseModel):
+    """Request to submit user input."""
+
+    session_id: str
+    text: str
+
+
+class SessionResponse(BaseModel):
+    """Response when creating a new session."""
+
+    session_id: str
+    ready: bool = True
+
+
+class SessionInfo(BaseModel):
+    """Session metadata."""
+
+    session_id: str
+    created_at: str
+    is_active: bool
+    message_count: int
+
+
+class HealthResponse(BaseModel):
+    """Health check response."""
+
+    status: str = "ok"
+    active_sessions: int = 0

backend/routes/__init__.py

@@ -0,0 +1 @@
+# Routes package

backend/routes/agent.py

@@ -0,0 +1,149 @@
+"""Agent API routes - WebSocket and REST endpoints."""
+
+import logging
+
+from fastapi import APIRouter, HTTPException, WebSocket, WebSocketDisconnect
+
+from backend.models import (
+    ApprovalRequest,
+    HealthResponse,
+    SessionInfo,
+    SessionResponse,
+    SubmitRequest,
+)
+from backend.session_manager import session_manager
+from backend.websocket import manager as ws_manager
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api", tags=["agent"])
+
+
+@router.get("/health", response_model=HealthResponse)
+async def health_check() -> HealthResponse:
+    """Health check endpoint."""
+    return HealthResponse(
+        status="ok", active_sessions=session_manager.active_session_count
+    )
+
+
+@router.post("/session", response_model=SessionResponse)
+async def create_session() -> SessionResponse:
+    """Create a new agent session."""
+    session_id = await session_manager.create_session()
+    return SessionResponse(session_id=session_id, ready=True)
+
+
+@router.get("/session/{session_id}", response_model=SessionInfo)
+async def get_session(session_id: str) -> SessionInfo:
+    """Get session information."""
+    info = session_manager.get_session_info(session_id)
+    if not info:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return SessionInfo(**info)
+
+
+@router.get("/sessions", response_model=list[SessionInfo])
+async def list_sessions() -> list[SessionInfo]:
+    """List all sessions."""
+    sessions = session_manager.list_sessions()
+    return [SessionInfo(**s) for s in sessions]
+
+
+@router.delete("/session/{session_id}")
+async def delete_session(session_id: str) -> dict:
+    """Delete a session."""
+    success = await session_manager.delete_session(session_id)
+    if not success:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return {"status": "deleted", "session_id": session_id}
+
+
+@router.post("/submit")
+async def submit_input(request: SubmitRequest) -> dict:
+    """Submit user input to a session."""
+    success = await session_manager.submit_user_input(request.session_id, request.text)
+    if not success:
+        raise HTTPException(status_code=404, detail="Session not found or inactive")
+    return {"status": "submitted", "session_id": request.session_id}
+
+
+@router.post("/approve")
+async def submit_approval(request: ApprovalRequest) -> dict:
+    """Submit tool approvals to a session."""
+    approvals = [
+        {
+            "tool_call_id": a.tool_call_id,
+            "approved": a.approved,
+            "feedback": a.feedback,
+        }
+        for a in request.approvals
+    ]
+    success = await session_manager.submit_approval(request.session_id, approvals)
+    if not success:
+        raise HTTPException(status_code=404, detail="Session not found or inactive")
+    return {"status": "submitted", "session_id": request.session_id}
+
+
+@router.post("/interrupt/{session_id}")
+async def interrupt_session(session_id: str) -> dict:
+    """Interrupt the current operation in a session."""
+    success = await session_manager.interrupt(session_id)
+    if not success:
+        raise HTTPException(status_code=404, detail="Session not found or inactive")
+    return {"status": "interrupted", "session_id": session_id}
+
+
+@router.post("/undo/{session_id}")
+async def undo_session(session_id: str) -> dict:
+    """Undo the last turn in a session."""
+    success = await session_manager.undo(session_id)
+    if not success:
+        raise HTTPException(status_code=404, detail="Session not found or inactive")
+    return {"status": "undo_requested", "session_id": session_id}
+
+
+@router.post("/compact/{session_id}")
+async def compact_session(session_id: str) -> dict:
+    """Compact the context in a session."""
+    success = await session_manager.compact(session_id)
+    if not success:
+        raise HTTPException(status_code=404, detail="Session not found or inactive")
+    return {"status": "compact_requested", "session_id": session_id}
+
+
+@router.post("/shutdown/{session_id}")
+async def shutdown_session(session_id: str) -> dict:
+    """Shutdown a session."""
+    success = await session_manager.shutdown_session(session_id)
+    if not success:
+        raise HTTPException(status_code=404, detail="Session not found or inactive")
+    return {"status": "shutdown_requested", "session_id": session_id}
+
+
+@router.websocket("/ws/{session_id}")
+async def websocket_endpoint(websocket: WebSocket, session_id: str) -> None:
+    """WebSocket endpoint for real-time events."""
+    # Verify session exists
+    info = session_manager.get_session_info(session_id)
+    if not info:
+        await websocket.close(code=4004, reason="Session not found")
+        return
+
+    await ws_manager.connect(websocket, session_id)
+
+    try:
+        while True:
+            # Keep connection alive, handle ping/pong
+            data = await websocket.receive_json()
+
+            # Handle client messages (e.g., ping)
+            if data.get("type") == "ping":
+                await websocket.send_json({"type": "pong"})
+
+    except WebSocketDisconnect:
+        logger.info(f"WebSocket disconnected for session {session_id}")
+    except Exception as e:
+        logger.error(f"WebSocket error for session {session_id}: {e}")
+    finally:
+        ws_manager.disconnect(session_id)

backend/routes/auth.py

@@ -0,0 +1,146 @@
+"""Authentication routes for HF OAuth."""
+
+import os
+import secrets
+from urllib.parse import urlencode
+
+import httpx
+from fastapi import APIRouter, HTTPException, Request
+from fastapi.responses import RedirectResponse
+
+router = APIRouter(prefix="/auth", tags=["auth"])
+
+# OAuth configuration from environment
+OAUTH_CLIENT_ID = os.environ.get("OAUTH_CLIENT_ID", "")
+OAUTH_CLIENT_SECRET = os.environ.get("OAUTH_CLIENT_SECRET", "")
+OPENID_PROVIDER_URL = os.environ.get("OPENID_PROVIDER_URL", "https://huggingface.co")
+
+# In-memory session store (replace with proper session management in production)
+oauth_states: dict[str, dict] = {}
+
+
+def get_redirect_uri(request: Request) -> str:
+    """Get the OAuth callback redirect URI."""
+    # In HF Spaces, use the SPACE_HOST if available
+    space_host = os.environ.get("SPACE_HOST")
+    if space_host:
+        return f"https://{space_host}/auth/callback"
+    # Otherwise construct from request
+    return str(request.url_for("oauth_callback"))
+
+
+@router.get("/login")
+async def oauth_login(request: Request) -> RedirectResponse:
+    """Initiate OAuth login flow."""
+    if not OAUTH_CLIENT_ID:
+        raise HTTPException(
+            status_code=500,
+            detail="OAuth not configured. Set OAUTH_CLIENT_ID environment variable.",
+        )
+
+    # Generate state for CSRF protection
+    state = secrets.token_urlsafe(32)
+    oauth_states[state] = {"redirect_uri": get_redirect_uri(request)}
+
+    # Build authorization URL
+    params = {
+        "client_id": OAUTH_CLIENT_ID,
+        "redirect_uri": get_redirect_uri(request),
+        "scope": "openid profile",
+        "response_type": "code",
+        "state": state,
+    }
+    auth_url = f"{OPENID_PROVIDER_URL}/oauth/authorize?{urlencode(params)}"
+
+    return RedirectResponse(url=auth_url)
+
+
+@router.get("/callback")
+async def oauth_callback(request: Request, code: str = "", state: str = "") -> RedirectResponse:
+    """Handle OAuth callback."""
+    # Verify state
+    if state not in oauth_states:
+        raise HTTPException(status_code=400, detail="Invalid state parameter")
+
+    stored_state = oauth_states.pop(state)
+    redirect_uri = stored_state["redirect_uri"]
+
+    if not code:
+        raise HTTPException(status_code=400, detail="No authorization code provided")
+
+    # Exchange code for token
+    token_url = f"{OPENID_PROVIDER_URL}/oauth/token"
+    async with httpx.AsyncClient() as client:
+        try:
+            response = await client.post(
+                token_url,
+                data={
+                    "grant_type": "authorization_code",
+                    "code": code,
+                    "redirect_uri": redirect_uri,
+                    "client_id": OAUTH_CLIENT_ID,
+                    "client_secret": OAUTH_CLIENT_SECRET,
+                },
+            )
+            response.raise_for_status()
+            token_data = response.json()
+        except httpx.HTTPError as e:
+            raise HTTPException(status_code=500, detail=f"Token exchange failed: {e}")
+
+    # Get user info
+    access_token = token_data.get("access_token")
+    if access_token:
+        async with httpx.AsyncClient() as client:
+            try:
+                userinfo_response = await client.get(
+                    f"{OPENID_PROVIDER_URL}/oauth/userinfo",
+                    headers={"Authorization": f"Bearer {access_token}"},
+                )
+                userinfo_response.raise_for_status()
+                user_info = userinfo_response.json()
+            except httpx.HTTPError:
+                user_info = {}
+    else:
+        user_info = {}
+
+    # For now, redirect to home with token in query params
+    # In production, use secure cookies or session storage
+    redirect_params = {
+        "access_token": access_token,
+        "username": user_info.get("preferred_username", ""),
+    }
+
+    return RedirectResponse(url=f"/?{urlencode(redirect_params)}")
+
+
+@router.get("/logout")
+async def logout() -> RedirectResponse:
+    """Log out the user."""
+    return RedirectResponse(url="/")
+
+
+@router.get("/me")
+async def get_current_user(request: Request) -> dict:
+    """Get current user info from Authorization header."""
+    auth_header = request.headers.get("Authorization", "")
+    if not auth_header.startswith("Bearer "):
+        return {"authenticated": False}
+
+    token = auth_header.split(" ")[1]
+
+    async with httpx.AsyncClient() as client:
+        try:
+            response = await client.get(
+                f"{OPENID_PROVIDER_URL}/oauth/userinfo",
+                headers={"Authorization": f"Bearer {token}"},
+            )
+            response.raise_for_status()
+            user_info = response.json()
+            return {
+                "authenticated": True,
+                "username": user_info.get("preferred_username"),
+                "name": user_info.get("name"),
+                "picture": user_info.get("picture"),
+            }
+        except httpx.HTTPError:
+            return {"authenticated": False}

backend/session_manager.py

@@ -0,0 +1,255 @@
+"""Session manager for handling multiple concurrent agent sessions."""
+
+import asyncio
+import logging
+import uuid
+from dataclasses import dataclass, field
+from datetime import datetime
+from typing import Any
+
+from agent.config import Config, load_config
+from agent.core.agent_loop import process_submission
+from agent.core.session import Event, OpType, Operation, Session, Submission
+from agent.core.tools import ToolRouter
+
+from backend.websocket import manager as ws_manager
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class AgentSession:
+    """Wrapper for an agent session with its associated resources."""
+
+    session_id: str
+    session: Session
+    tool_router: ToolRouter
+    submission_queue: asyncio.Queue
+    task: asyncio.Task | None = None
+    created_at: datetime = field(default_factory=datetime.utcnow)
+    is_active: bool = True
+
+
+class SessionManager:
+    """Manages multiple concurrent agent sessions."""
+
+    def __init__(self, config_path: str = "configs/main_agent_config.json") -> None:
+        self.config = load_config(config_path)
+        self.sessions: dict[str, AgentSession] = {}
+        self._lock = asyncio.Lock()
+
+    async def create_session(self) -> str:
+        """Create a new agent session and return its ID."""
+        session_id = str(uuid.uuid4())
+
+        # Create queues for this session
+        submission_queue: asyncio.Queue = asyncio.Queue()
+        event_queue: asyncio.Queue = asyncio.Queue()
+
+        # Create tool router
+        tool_router = ToolRouter(config=self.config)
+
+        # Create the agent session
+        session = Session(event_queue, config=self.config, tool_router=tool_router)
+
+        # Create wrapper
+        agent_session = AgentSession(
+            session_id=session_id,
+            session=session,
+            tool_router=tool_router,
+            submission_queue=submission_queue,
+        )
+
+        async with self._lock:
+            self.sessions[session_id] = agent_session
+
+        # Start the agent loop task
+        task = asyncio.create_task(
+            self._run_session(session_id, submission_queue, event_queue, tool_router)
+        )
+        agent_session.task = task
+
+        logger.info(f"Created session {session_id}")
+        return session_id
+
+    async def _run_session(
+        self,
+        session_id: str,
+        submission_queue: asyncio.Queue,
+        event_queue: asyncio.Queue,
+        tool_router: ToolRouter,
+    ) -> None:
+        """Run the agent loop for a session and forward events to WebSocket."""
+        agent_session = self.sessions.get(session_id)
+        if not agent_session:
+            logger.error(f"Session {session_id} not found")
+            return
+
+        session = agent_session.session
+
+        # Start event forwarder task
+        event_forwarder = asyncio.create_task(
+            self._forward_events(session_id, event_queue)
+        )
+
+        try:
+            async with tool_router:
+                # Send ready event
+                await session.send_event(
+                    Event(event_type="ready", data={"message": "Agent initialized"})
+                )
+
+                while session.is_running:
+                    try:
+                        # Wait for submission with timeout to allow checking is_running
+                        submission = await asyncio.wait_for(
+                            submission_queue.get(), timeout=1.0
+                        )
+                        should_continue = await process_submission(session, submission)
+                        if not should_continue:
+                            break
+                    except asyncio.TimeoutError:
+                        continue
+                    except asyncio.CancelledError:
+                        logger.info(f"Session {session_id} cancelled")
+                        break
+                    except Exception as e:
+                        logger.error(f"Error in session {session_id}: {e}")
+                        await session.send_event(
+                            Event(event_type="error", data={"error": str(e)})
+                        )
+
+        finally:
+            event_forwarder.cancel()
+            try:
+                await event_forwarder
+            except asyncio.CancelledError:
+                pass
+
+            async with self._lock:
+                if session_id in self.sessions:
+                    self.sessions[session_id].is_active = False
+
+            logger.info(f"Session {session_id} ended")
+
+    async def _forward_events(
+        self, session_id: str, event_queue: asyncio.Queue
+    ) -> None:
+        """Forward events from the agent to the WebSocket."""
+        while True:
+            try:
+                event: Event = await event_queue.get()
+                await ws_manager.send_event(
+                    session_id, event.event_type, event.data
+                )
+            except asyncio.CancelledError:
+                break
+            except Exception as e:
+                logger.error(f"Error forwarding event for {session_id}: {e}")
+
+    async def submit(self, session_id: str, operation: Operation) -> bool:
+        """Submit an operation to a session."""
+        async with self._lock:
+            agent_session = self.sessions.get(session_id)
+
+        if not agent_session or not agent_session.is_active:
+            logger.warning(f"Session {session_id} not found or inactive")
+            return False
+
+        submission = Submission(
+            id=f"sub_{uuid.uuid4().hex[:8]}", operation=operation
+        )
+        await agent_session.submission_queue.put(submission)
+        return True
+
+    async def submit_user_input(self, session_id: str, text: str) -> bool:
+        """Submit user input to a session."""
+        operation = Operation(op_type=OpType.USER_INPUT, data={"text": text})
+        return await self.submit(session_id, operation)
+
+    async def submit_approval(
+        self, session_id: str, approvals: list[dict[str, Any]]
+    ) -> bool:
+        """Submit tool approvals to a session."""
+        operation = Operation(op_type=OpType.EXEC_APPROVAL, data={"approvals": approvals})
+        return await self.submit(session_id, operation)
+
+    async def interrupt(self, session_id: str) -> bool:
+        """Interrupt a session."""
+        operation = Operation(op_type=OpType.INTERRUPT)
+        return await self.submit(session_id, operation)
+
+    async def undo(self, session_id: str) -> bool:
+        """Undo last turn in a session."""
+        operation = Operation(op_type=OpType.UNDO)
+        return await self.submit(session_id, operation)
+
+    async def compact(self, session_id: str) -> bool:
+        """Compact context in a session."""
+        operation = Operation(op_type=OpType.COMPACT)
+        return await self.submit(session_id, operation)
+
+    async def shutdown_session(self, session_id: str) -> bool:
+        """Shutdown a specific session."""
+        operation = Operation(op_type=OpType.SHUTDOWN)
+        success = await self.submit(session_id, operation)
+
+        if success:
+            async with self._lock:
+                agent_session = self.sessions.get(session_id)
+                if agent_session and agent_session.task:
+                    # Wait for task to complete
+                    try:
+                        await asyncio.wait_for(agent_session.task, timeout=5.0)
+                    except asyncio.TimeoutError:
+                        agent_session.task.cancel()
+
+        return success
+
+    async def delete_session(self, session_id: str) -> bool:
+        """Delete a session entirely."""
+        async with self._lock:
+            agent_session = self.sessions.pop(session_id, None)
+
+        if not agent_session:
+            return False
+
+        # Cancel the task if running
+        if agent_session.task and not agent_session.task.done():
+            agent_session.task.cancel()
+            try:
+                await agent_session.task
+            except asyncio.CancelledError:
+                pass
+
+        return True
+
+    def get_session_info(self, session_id: str) -> dict[str, Any] | None:
+        """Get information about a session."""
+        agent_session = self.sessions.get(session_id)
+        if not agent_session:
+            return None
+
+        return {
+            "session_id": session_id,
+            "created_at": agent_session.created_at.isoformat(),
+            "is_active": agent_session.is_active,
+            "message_count": len(agent_session.session.context_manager.messages),
+        }
+
+    def list_sessions(self) -> list[dict[str, Any]]:
+        """List all sessions."""
+        return [
+            self.get_session_info(sid)
+            for sid in self.sessions
+            if self.get_session_info(sid)
+        ]
+
+    @property
+    def active_session_count(self) -> int:
+        """Get count of active sessions."""
+        return sum(1 for s in self.sessions.values() if s.is_active)
+
+
+# Global session manager instance
+session_manager = SessionManager()

backend/websocket.py

@@ -0,0 +1,67 @@
+"""WebSocket connection manager for real-time communication."""
+
+import asyncio
+import logging
+from typing import Any
+
+from fastapi import WebSocket
+
+logger = logging.getLogger(__name__)
+
+
+class ConnectionManager:
+    """Manages WebSocket connections for multiple sessions."""
+
+    def __init__(self) -> None:
+        # session_id -> WebSocket
+        self.active_connections: dict[str, WebSocket] = {}
+        # session_id -> asyncio.Queue for outgoing messages
+        self.message_queues: dict[str, asyncio.Queue] = {}
+
+    async def connect(self, websocket: WebSocket, session_id: str) -> None:
+        """Accept a WebSocket connection and register it."""
+        await websocket.accept()
+        self.active_connections[session_id] = websocket
+        self.message_queues[session_id] = asyncio.Queue()
+        logger.info(f"WebSocket connected for session {session_id}")
+
+    def disconnect(self, session_id: str) -> None:
+        """Remove a WebSocket connection."""
+        if session_id in self.active_connections:
+            del self.active_connections[session_id]
+        if session_id in self.message_queues:
+            del self.message_queues[session_id]
+        logger.info(f"WebSocket disconnected for session {session_id}")
+
+    async def send_event(self, session_id: str, event_type: str, data: dict[str, Any] | None = None) -> None:
+        """Send an event to a specific session's WebSocket."""
+        if session_id not in self.active_connections:
+            logger.warning(f"No active connection for session {session_id}")
+            return
+
+        message = {"event_type": event_type}
+        if data is not None:
+            message["data"] = data
+
+        try:
+            await self.active_connections[session_id].send_json(message)
+        except Exception as e:
+            logger.error(f"Error sending to session {session_id}: {e}")
+            self.disconnect(session_id)
+
+    async def broadcast(self, event_type: str, data: dict[str, Any] | None = None) -> None:
+        """Broadcast an event to all connected sessions."""
+        for session_id in list(self.active_connections.keys()):
+            await self.send_event(session_id, event_type, data)
+
+    def is_connected(self, session_id: str) -> bool:
+        """Check if a session has an active WebSocket connection."""
+        return session_id in self.active_connections
+
+    def get_queue(self, session_id: str) -> asyncio.Queue | None:
+        """Get the message queue for a session."""
+        return self.message_queues.get(session_id)
+
+
+# Global connection manager instance
+manager = ConnectionManager()

frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HF Agent</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "hf-agent-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.0",
+    "@mui/material": "^6.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.10.0",
+    "vite": "^5.4.10"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@mui/material';
+import AppLayout from '@/components/Layout/AppLayout';
+
+function App() {
+  return (
+    <Box sx={{ height: '100vh', display: 'flex' }}>
+      <AppLayout />
+    </Box>
+  );
+}
+
+export default App;

frontend/src/components/ApprovalModal/ApprovalModal.tsx

@@ -0,0 +1,208 @@
+import { useState, useCallback } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  Typography,
+  Checkbox,
+  FormControlLabel,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  TextField,
+  Chip,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import WarningIcon from '@mui/icons-material/Warning';
+import { useAgentStore } from '@/store/agentStore';
+
+interface ApprovalModalProps {
+  sessionId: string | null;
+}
+
+interface ApprovalState {
+  [toolCallId: string]: {
+    approved: boolean;
+    feedback: string;
+  };
+}
+
+export default function ApprovalModal({ sessionId }: ApprovalModalProps) {
+  const { pendingApprovals, setPendingApprovals } = useAgentStore();
+  const [approvalState, setApprovalState] = useState<ApprovalState>({});
+
+  const isOpen = pendingApprovals !== null && pendingApprovals.tools.length > 0;
+
+  const handleApprovalChange = useCallback(
+    (toolCallId: string, approved: boolean) => {
+      setApprovalState((prev) => ({
+        ...prev,
+        [toolCallId]: {
+          ...prev[toolCallId],
+          approved,
+          feedback: prev[toolCallId]?.feedback || '',
+        },
+      }));
+    },
+    []
+  );
+
+  const handleFeedbackChange = useCallback(
+    (toolCallId: string, feedback: string) => {
+      setApprovalState((prev) => ({
+        ...prev,
+        [toolCallId]: {
+          ...prev[toolCallId],
+          feedback,
+        },
+      }));
+    },
+    []
+  );
+
+  const handleSubmit = useCallback(async () => {
+    if (!sessionId || !pendingApprovals) return;
+
+    const approvals = pendingApprovals.tools.map((tool) => ({
+      tool_call_id: tool.tool_call_id,
+      approved: approvalState[tool.tool_call_id]?.approved ?? false,
+      feedback: approvalState[tool.tool_call_id]?.feedback || null,
+    }));
+
+    try {
+      await fetch('/api/approve', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          session_id: sessionId,
+          approvals,
+        }),
+      });
+      setPendingApprovals(null);
+      setApprovalState({});
+    } catch (e) {
+      console.error('Approval submission failed:', e);
+    }
+  }, [sessionId, pendingApprovals, approvalState, setPendingApprovals]);
+
+  const handleApproveAll = useCallback(() => {
+    if (!pendingApprovals) return;
+    const newState: ApprovalState = {};
+    pendingApprovals.tools.forEach((tool) => {
+      newState[tool.tool_call_id] = { approved: true, feedback: '' };
+    });
+    setApprovalState(newState);
+  }, [pendingApprovals]);
+
+  const handleRejectAll = useCallback(() => {
+    if (!pendingApprovals) return;
+    const newState: ApprovalState = {};
+    pendingApprovals.tools.forEach((tool) => {
+      newState[tool.tool_call_id] = { approved: false, feedback: '' };
+    });
+    setApprovalState(newState);
+  }, [pendingApprovals]);
+
+  if (!isOpen || !pendingApprovals) return null;
+
+  const approvedCount = Object.values(approvalState).filter((s) => s.approved).length;
+
+  return (
+    <Dialog
+      open={isOpen}
+      maxWidth="md"
+      fullWidth
+      PaperProps={{
+        sx: { bgcolor: 'background.paper' },
+      }}
+    >
+      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <WarningIcon color="warning" />
+        Approval Required
+        <Chip
+          label={`${pendingApprovals.count} tool${pendingApprovals.count > 1 ? 's' : ''}`}
+          size="small"
+          sx={{ ml: 1 }}
+        />
+      </DialogTitle>
+      <DialogContent dividers>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          The following tool calls require your approval before execution:
+        </Typography>
+        {pendingApprovals.tools.map((tool, index) => (
+          <Accordion key={tool.tool_call_id} defaultExpanded={index === 0}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, width: '100%' }}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={approvalState[tool.tool_call_id]?.approved ?? false}
+                      onChange={(e) => {
+                        e.stopPropagation();
+                        handleApprovalChange(tool.tool_call_id, e.target.checked);
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  }
+                  label=""
+                  sx={{ m: 0 }}
+                />
+                <Chip label={tool.tool} size="small" color="primary" variant="outlined" />
+                <Typography variant="body2" color="text.secondary" sx={{ ml: 'auto' }}>
+                  {approvalState[tool.tool_call_id]?.approved ? 'Approved' : 'Pending'}
+                </Typography>
+              </Box>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Typography variant="subtitle2" gutterBottom>
+                Arguments:
+              </Typography>
+              <Box
+                component="pre"
+                sx={{
+                  bgcolor: 'background.default',
+                  p: 1.5,
+                  borderRadius: 1,
+                  overflow: 'auto',
+                  fontSize: '0.8rem',
+                  maxHeight: 200,
+                }}
+              >
+                {JSON.stringify(tool.arguments, null, 2)}
+              </Box>
+              {!approvalState[tool.tool_call_id]?.approved && (
+                <TextField
+                  fullWidth
+                  size="small"
+                  label="Feedback (optional)"
+                  placeholder="Explain why you're rejecting this..."
+                  value={approvalState[tool.tool_call_id]?.feedback || ''}
+                  onChange={(e) => handleFeedbackChange(tool.tool_call_id, e.target.value)}
+                  sx={{ mt: 2 }}
+                />
+              )}
+            </AccordionDetails>
+          </Accordion>
+        ))}
+      </DialogContent>
+      <DialogActions sx={{ px: 3, py: 2 }}>
+        <Button onClick={handleRejectAll} color="error" variant="outlined">
+          Reject All
+        </Button>
+        <Button onClick={handleApproveAll} color="success" variant="outlined">
+          Approve All
+        </Button>
+        <Box sx={{ flex: 1 }} />
+        <Typography variant="body2" color="text.secondary" sx={{ mr: 2 }}>
+          {approvedCount} of {pendingApprovals.count} approved
+        </Typography>
+        <Button onClick={handleSubmit} variant="contained" color="primary">
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

frontend/src/components/Chat/ChatInput.tsx

@@ -0,0 +1,77 @@
+import { useState, useCallback, KeyboardEvent } from 'react';
+import { Box, TextField, IconButton, CircularProgress } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+
+interface ChatInputProps {
+  onSend: (text: string) => void;
+  disabled?: boolean;
+}
+
+export default function ChatInput({ onSend, disabled = false }: ChatInputProps) {
+  const [input, setInput] = useState('');
+
+  const handleSend = useCallback(() => {
+    if (input.trim() && !disabled) {
+      onSend(input);
+      setInput('');
+    }
+  }, [input, disabled, onSend]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  return (
+    <Box
+      sx={{
+        p: 2,
+        borderTop: 1,
+        borderColor: 'divider',
+        bgcolor: 'background.paper',
+      }}
+    >
+      <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-end' }}>
+        <TextField
+          fullWidth
+          multiline
+          maxRows={6}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Type a message..."
+          disabled={disabled}
+          variant="outlined"
+          size="small"
+          sx={{
+            '& .MuiOutlinedInput-root': {
+              bgcolor: 'background.default',
+            },
+          }}
+        />
+        <IconButton
+          onClick={handleSend}
+          disabled={disabled || !input.trim()}
+          color="primary"
+          sx={{
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            '&:hover': {
+              bgcolor: 'primary.dark',
+            },
+            '&.Mui-disabled': {
+              bgcolor: 'action.disabledBackground',
+            },
+          }}
+        >
+          {disabled ? <CircularProgress size={24} color="inherit" /> : <SendIcon />}
+        </IconButton>
+      </Box>
+    </Box>
+  );
+}

frontend/src/components/Chat/MessageBubble.tsx

@@ -0,0 +1,100 @@
+import { Box, Paper, Typography, Chip } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+import PersonIcon from '@mui/icons-material/Person';
+import SmartToyIcon from '@mui/icons-material/SmartToy';
+import BuildIcon from '@mui/icons-material/Build';
+import type { Message } from '@/types/agent';
+
+interface MessageBubbleProps {
+  message: Message;
+}
+
+export default function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.role === 'user';
+  const isTool = message.role === 'tool';
+
+  const getIcon = () => {
+    if (isUser) return <PersonIcon fontSize="small" />;
+    if (isTool) return <BuildIcon fontSize="small" />;
+    return <SmartToyIcon fontSize="small" />;
+  };
+
+  const getBgColor = () => {
+    if (isUser) return 'primary.dark';
+    if (isTool) return 'background.default';
+    return 'background.paper';
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: isUser ? 'flex-end' : 'flex-start',
+        width: '100%',
+      }}
+    >
+      <Paper
+        elevation={0}
+        sx={{
+          p: 2,
+          maxWidth: isTool ? '100%' : '80%',
+          width: isTool ? '100%' : 'auto',
+          bgcolor: getBgColor(),
+          border: 1,
+          borderColor: 'divider',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+          {getIcon()}
+          <Typography variant="caption" color="text.secondary">
+            {isUser ? 'You' : isTool ? 'Tool' : 'Assistant'}
+          </Typography>
+          {isTool && message.toolName && (
+            <Chip
+              label={message.toolName}
+              size="small"
+              variant="outlined"
+              sx={{ ml: 1, height: 20, fontSize: '0.7rem' }}
+            />
+          )}
+          <Typography variant="caption" color="text.secondary" sx={{ ml: 'auto' }}>
+            {new Date(message.timestamp).toLocaleTimeString()}
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            '& p': { m: 0 },
+            '& pre': {
+              bgcolor: 'background.default',
+              p: 1.5,
+              borderRadius: 1,
+              overflow: 'auto',
+              fontSize: '0.85rem',
+            },
+            '& code': {
+              bgcolor: 'background.default',
+              px: 0.5,
+              py: 0.25,
+              borderRadius: 0.5,
+              fontSize: '0.85rem',
+              fontFamily: '"JetBrains Mono", monospace',
+            },
+            '& pre code': {
+              bgcolor: 'transparent',
+              p: 0,
+            },
+            '& a': {
+              color: 'primary.main',
+            },
+            '& ul, & ol': {
+              pl: 2,
+              my: 1,
+            },
+          }}
+        >
+          <ReactMarkdown>{message.content}</ReactMarkdown>
+        </Box>
+      </Paper>
+    </Box>
+  );
+}

frontend/src/components/Chat/MessageList.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import { Box, Typography, CircularProgress } from '@mui/material';
+import MessageBubble from './MessageBubble';
+import type { Message } from '@/types/agent';
+
+interface MessageListProps {
+  messages: Message[];
+  isProcessing: boolean;
+}
+
+export default function MessageList({ messages, isProcessing }: MessageListProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        overflow: 'auto',
+        p: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      {messages.length === 0 ? (
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Typography color="text.secondary">
+            Start a conversation by typing a message below
+          </Typography>
+        </Box>
+      ) : (
+        messages.map((message) => (
+          <MessageBubble key={message.id} message={message} />
+        ))
+      )}
+      {isProcessing && (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 2 }}>
+          <CircularProgress size={16} />
+          <Typography variant="body2" color="text.secondary">
+            Processing...
+          </Typography>
+        </Box>
+      )}
+      <div ref={bottomRef} />
+    </Box>
+  );
+}

frontend/src/components/Layout/AppLayout.tsx

@@ -0,0 +1,227 @@
+import { useState, useCallback } from 'react';
+import {
+  Box,
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Drawer,
+  useMediaQuery,
+  useTheme,
+  Button,
+  Chip,
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import UndoIcon from '@mui/icons-material/Undo';
+import CompressIcon from '@mui/icons-material/Compress';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+
+import { useSessionStore } from '@/store/sessionStore';
+import { useAgentStore } from '@/store/agentStore';
+import { useAgentWebSocket } from '@/hooks/useAgentWebSocket';
+import SessionSidebar from '@/components/SessionSidebar/SessionSidebar';
+import ChatInput from '@/components/Chat/ChatInput';
+import MessageList from '@/components/Chat/MessageList';
+import ApprovalModal from '@/components/ApprovalModal/ApprovalModal';
+
+const DRAWER_WIDTH = 280;
+
+export default function AppLayout() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const { activeSessionId } = useSessionStore();
+  const { isConnected, isProcessing, getMessages } = useAgentStore();
+
+  const messages = activeSessionId ? getMessages(activeSessionId) : [];
+
+  useAgentWebSocket({
+    sessionId: activeSessionId,
+    onReady: () => console.log('Agent ready'),
+    onError: (error) => console.error('Agent error:', error),
+  });
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  const handleUndo = useCallback(async () => {
+    if (!activeSessionId) return;
+    try {
+      await fetch(`/api/undo/${activeSessionId}`, { method: 'POST' });
+    } catch (e) {
+      console.error('Undo failed:', e);
+    }
+  }, [activeSessionId]);
+
+  const handleCompact = useCallback(async () => {
+    if (!activeSessionId) return;
+    try {
+      await fetch(`/api/compact/${activeSessionId}`, { method: 'POST' });
+    } catch (e) {
+      console.error('Compact failed:', e);
+    }
+  }, [activeSessionId]);
+
+  const handleSendMessage = useCallback(
+    async (text: string) => {
+      if (!activeSessionId || !text.trim()) return;
+      try {
+        await fetch('/api/submit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            session_id: activeSessionId,
+            text: text.trim(),
+          }),
+        });
+      } catch (e) {
+        console.error('Send failed:', e);
+      }
+    },
+    [activeSessionId]
+  );
+
+  const drawer = <SessionSidebar onClose={() => setMobileOpen(false)} />;
+
+  return (
+    <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
+      {/* App Bar */}
+      <AppBar
+        position="fixed"
+        sx={{
+          width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
+          ml: { md: `${DRAWER_WIDTH}px` },
+          bgcolor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider',
+        }}
+        elevation={0}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2, display: { md: 'none' } }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+            HF Agent
+          </Typography>
+          <Chip
+            icon={
+              <FiberManualRecordIcon
+                sx={{
+                  fontSize: 12,
+                  color: isConnected ? 'success.main' : 'error.main',
+                }}
+              />
+            }
+            label={isConnected ? 'Connected' : 'Disconnected'}
+            size="small"
+            variant="outlined"
+            sx={{ mr: 2 }}
+          />
+          <IconButton
+            onClick={handleUndo}
+            disabled={!activeSessionId || isProcessing}
+            title="Undo last turn"
+          >
+            <UndoIcon />
+          </IconButton>
+          <IconButton
+            onClick={handleCompact}
+            disabled={!activeSessionId || isProcessing}
+            title="Compact context"
+          >
+            <CompressIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+
+      {/* Sidebar Drawer */}
+      <Box
+        component="nav"
+        sx={{ width: { md: DRAWER_WIDTH }, flexShrink: { md: 0 } }}
+      >
+        {/* Mobile drawer */}
+        <Drawer
+          variant="temporary"
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          ModalProps={{ keepMounted: true }}
+          sx={{
+            display: { xs: 'block', md: 'none' },
+            '& .MuiDrawer-paper': {
+              boxSizing: 'border-box',
+              width: DRAWER_WIDTH,
+            },
+          }}
+        >
+          {drawer}
+        </Drawer>
+        {/* Desktop drawer */}
+        <Drawer
+          variant="permanent"
+          sx={{
+            display: { xs: 'none', md: 'block' },
+            '& .MuiDrawer-paper': {
+              boxSizing: 'border-box',
+              width: DRAWER_WIDTH,
+            },
+          }}
+          open
+        >
+          {drawer}
+        </Drawer>
+      </Box>
+
+      {/* Main Content */}
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Toolbar /> {/* Spacer for fixed AppBar */}
+        {activeSessionId ? (
+          <>
+            <MessageList messages={messages} isProcessing={isProcessing} />
+            <ChatInput
+              onSend={handleSendMessage}
+              disabled={isProcessing || !isConnected}
+            />
+          </>
+        ) : (
+          <Box
+            sx={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexDirection: 'column',
+              gap: 2,
+            }}
+          >
+            <Typography variant="h5" color="text.secondary">
+              No session selected
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Create a new session from the sidebar to get started
+            </Typography>
+          </Box>
+        )}
+      </Box>
+
+      {/* Approval Modal */}
+      <ApprovalModal sessionId={activeSessionId} />
+    </Box>
+  );
+}

frontend/src/components/SessionSidebar/SessionSidebar.tsx

@@ -0,0 +1,161 @@
+import { useCallback } from 'react';
+import {
+  Box,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
+  Typography,
+  Button,
+  Divider,
+  Chip,
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ChatIcon from '@mui/icons-material/Chat';
+import { useSessionStore } from '@/store/sessionStore';
+import { useAgentStore } from '@/store/agentStore';
+
+interface SessionSidebarProps {
+  onClose?: () => void;
+}
+
+export default function SessionSidebar({ onClose }: SessionSidebarProps) {
+  const { sessions, activeSessionId, createSession, deleteSession, switchSession } =
+    useSessionStore();
+  const { clearMessages } = useAgentStore();
+
+  const handleNewSession = useCallback(async () => {
+    try {
+      const response = await fetch('/api/session', { method: 'POST' });
+      const data = await response.json();
+      createSession(data.session_id);
+      onClose?.();
+    } catch (e) {
+      console.error('Failed to create session:', e);
+    }
+  }, [createSession, onClose]);
+
+  const handleDeleteSession = useCallback(
+    async (sessionId: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      try {
+        await fetch(`/api/session/${sessionId}`, { method: 'DELETE' });
+        deleteSession(sessionId);
+        clearMessages(sessionId);
+      } catch (e) {
+        console.error('Failed to delete session:', e);
+      }
+    },
+    [deleteSession, clearMessages]
+  );
+
+  const handleSelectSession = useCallback(
+    (sessionId: string) => {
+      switchSession(sessionId);
+      onClose?.();
+    },
+    [switchSession, onClose]
+  );
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    if (isToday) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+  };
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      {/* Header */}
+      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
+        <Typography variant="h6" sx={{ mb: 2 }}>
+          Sessions
+        </Typography>
+        <Button
+          fullWidth
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={handleNewSession}
+        >
+          New Session
+        </Button>
+      </Box>
+
+      {/* Session List */}
+      <Box sx={{ flex: 1, overflow: 'auto' }}>
+        {sessions.length === 0 ? (
+          <Box sx={{ p: 3, textAlign: 'center' }}>
+            <ChatIcon sx={{ fontSize: 48, color: 'text.secondary', mb: 1 }} />
+            <Typography variant="body2" color="text.secondary">
+              No sessions yet
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              Create a new session to get started
+            </Typography>
+          </Box>
+        ) : (
+          <List disablePadding>
+            {[...sessions].reverse().map((session) => (
+              <ListItem key={session.id} disablePadding divider>
+                <ListItemButton
+                  selected={session.id === activeSessionId}
+                  onClick={() => handleSelectSession(session.id)}
+                  sx={{
+                    '&.Mui-selected': {
+                      bgcolor: 'action.selected',
+                      '&:hover': {
+                        bgcolor: 'action.selected',
+                      },
+                    },
+                  }}
+                >
+                  <ListItemText
+                    primary={
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <Typography variant="body2" noWrap>
+                          {session.title}
+                        </Typography>
+                        {session.isActive && (
+                          <Chip
+                            label="active"
+                            size="small"
+                            color="success"
+                            sx={{ height: 18, fontSize: '0.65rem' }}
+                          />
+                        )}
+                      </Box>
+                    }
+                    secondary={formatDate(session.createdAt)}
+                  />
+                  <ListItemSecondaryAction>
+                    <IconButton
+                      edge="end"
+                      size="small"
+                      onClick={(e) => handleDeleteSession(session.id, e)}
+                    >
+                      <DeleteIcon fontSize="small" />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        )}
+      </Box>
+
+      {/* Footer */}
+      <Divider />
+      <Box sx={{ p: 2 }}>
+        <Typography variant="caption" color="text.secondary">
+          {sessions.length} session{sessions.length !== 1 ? 's' : ''}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

frontend/src/hooks/useAgentWebSocket.ts

@@ -0,0 +1,238 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useAgentStore } from '@/store/agentStore';
+import type { AgentEvent } from '@/types/events';
+import type { Message } from '@/types/agent';
+
+const WS_RECONNECT_DELAY = 1000;
+const WS_MAX_RECONNECT_DELAY = 30000;
+
+interface UseAgentWebSocketOptions {
+  sessionId: string | null;
+  onReady?: () => void;
+  onError?: (error: string) => void;
+}
+
+export function useAgentWebSocket({
+  sessionId,
+  onReady,
+  onError,
+}: UseAgentWebSocketOptions) {
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<number | null>(null);
+  const reconnectDelayRef = useRef(WS_RECONNECT_DELAY);
+
+  const {
+    addMessage,
+    setProcessing,
+    setConnected,
+    setPendingApprovals,
+    setError,
+  } = useAgentStore();
+
+  const handleEvent = useCallback(
+    (event: AgentEvent) => {
+      if (!sessionId) return;
+
+      switch (event.event_type) {
+        case 'ready':
+          setConnected(true);
+          setProcessing(false);
+          onReady?.();
+          break;
+
+        case 'processing':
+          setProcessing(true);
+          break;
+
+        case 'assistant_message': {
+          const content = (event.data?.content as string) || '';
+          const message: Message = {
+            id: `msg_${Date.now()}`,
+            role: 'assistant',
+            content,
+            timestamp: new Date().toISOString(),
+          };
+          addMessage(sessionId, message);
+          break;
+        }
+
+        case 'tool_call': {
+          const toolName = (event.data?.tool as string) || 'unknown';
+          const args = event.data?.arguments || {};
+          const message: Message = {
+            id: `tool_${Date.now()}`,
+            role: 'tool',
+            content: `Calling ${toolName}...`,
+            timestamp: new Date().toISOString(),
+            toolName,
+          };
+          addMessage(sessionId, message);
+          // Store tool call args for display
+          console.log('Tool call:', toolName, args);
+          break;
+        }
+
+        case 'tool_output': {
+          const toolName = (event.data?.tool as string) || 'unknown';
+          const output = (event.data?.output as string) || '';
+          const success = event.data?.success as boolean;
+          const message: Message = {
+            id: `tool_out_${Date.now()}`,
+            role: 'tool',
+            content: output,
+            timestamp: new Date().toISOString(),
+            toolName,
+          };
+          addMessage(sessionId, message);
+          console.log('Tool output:', toolName, success);
+          break;
+        }
+
+        case 'approval_required': {
+          const tools = event.data?.tools as Array<{
+            tool: string;
+            arguments: Record<string, unknown>;
+            tool_call_id: string;
+          }>;
+          const count = (event.data?.count as number) || 0;
+          setPendingApprovals({ tools, count });
+          setProcessing(false);
+          break;
+        }
+
+        case 'turn_complete':
+          setProcessing(false);
+          break;
+
+        case 'compacted': {
+          const oldTokens = event.data?.old_tokens as number;
+          const newTokens = event.data?.new_tokens as number;
+          console.log(`Context compacted: ${oldTokens} -> ${newTokens} tokens`);
+          break;
+        }
+
+        case 'error': {
+          const errorMsg = (event.data?.error as string) || 'Unknown error';
+          setError(errorMsg);
+          setProcessing(false);
+          onError?.(errorMsg);
+          break;
+        }
+
+        case 'shutdown':
+          setConnected(false);
+          setProcessing(false);
+          break;
+
+        case 'interrupted':
+          setProcessing(false);
+          break;
+
+        case 'undo_complete':
+          // Could remove last messages from store
+          break;
+
+        default:
+          console.log('Unknown event:', event);
+      }
+    },
+    [
+      sessionId,
+      addMessage,
+      setProcessing,
+      setConnected,
+      setPendingApprovals,
+      setError,
+      onReady,
+      onError,
+    ]
+  );
+
+  const connect = useCallback(() => {
+    if (!sessionId || wsRef.current?.readyState === WebSocket.OPEN) return;
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.host;
+    const wsUrl = `${protocol}//${host}/api/ws/${sessionId}`;
+
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      console.log('WebSocket connected');
+      setConnected(true);
+      reconnectDelayRef.current = WS_RECONNECT_DELAY;
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as AgentEvent;
+        handleEvent(data);
+      } catch (e) {
+        console.error('Failed to parse WebSocket message:', e);
+      }
+    };
+
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+
+    ws.onclose = () => {
+      console.log('WebSocket closed');
+      setConnected(false);
+
+      // Attempt to reconnect with exponential backoff
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      reconnectTimeoutRef.current = window.setTimeout(() => {
+        reconnectDelayRef.current = Math.min(
+          reconnectDelayRef.current * 2,
+          WS_MAX_RECONNECT_DELAY
+        );
+        connect();
+      }, reconnectDelayRef.current);
+    };
+
+    wsRef.current = ws;
+  }, [sessionId, handleEvent, setConnected]);
+
+  const disconnect = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setConnected(false);
+  }, [setConnected]);
+
+  const sendPing = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'ping' }));
+    }
+  }, []);
+
+  // Connect when sessionId changes
+  useEffect(() => {
+    if (sessionId) {
+      connect();
+    }
+    return () => {
+      disconnect();
+    };
+  }, [sessionId, connect, disconnect]);
+
+  // Heartbeat
+  useEffect(() => {
+    const interval = setInterval(sendPing, 30000);
+    return () => clearInterval(interval);
+  }, [sendPing]);
+
+  return {
+    isConnected: wsRef.current?.readyState === WebSocket.OPEN,
+    connect,
+    disconnect,
+  };
+}

frontend/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import App from './App';
+import theme from './theme';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </StrictMode>
+);

frontend/src/store/agentStore.ts

@@ -0,0 +1,76 @@
+import { create } from 'zustand';
+import type { Message, ApprovalBatch, User } from '@/types/agent';
+
+interface AgentStore {
+  // State per session (keyed by session ID)
+  messagesBySession: Record<string, Message[]>;
+  isProcessing: boolean;
+  isConnected: boolean;
+  pendingApprovals: ApprovalBatch | null;
+  user: User | null;
+  error: string | null;
+
+  // Actions
+  addMessage: (sessionId: string, message: Message) => void;
+  clearMessages: (sessionId: string) => void;
+  setProcessing: (isProcessing: boolean) => void;
+  setConnected: (isConnected: boolean) => void;
+  setPendingApprovals: (approvals: ApprovalBatch | null) => void;
+  setUser: (user: User | null) => void;
+  setError: (error: string | null) => void;
+  getMessages: (sessionId: string) => Message[];
+}
+
+export const useAgentStore = create<AgentStore>((set, get) => ({
+  messagesBySession: {},
+  isProcessing: false,
+  isConnected: false,
+  pendingApprovals: null,
+  user: null,
+  error: null,
+
+  addMessage: (sessionId: string, message: Message) => {
+    set((state) => {
+      const currentMessages = state.messagesBySession[sessionId] || [];
+      return {
+        messagesBySession: {
+          ...state.messagesBySession,
+          [sessionId]: [...currentMessages, message],
+        },
+      };
+    });
+  },
+
+  clearMessages: (sessionId: string) => {
+    set((state) => ({
+      messagesBySession: {
+        ...state.messagesBySession,
+        [sessionId]: [],
+      },
+    }));
+  },
+
+  setProcessing: (isProcessing: boolean) => {
+    set({ isProcessing });
+  },
+
+  setConnected: (isConnected: boolean) => {
+    set({ isConnected });
+  },
+
+  setPendingApprovals: (approvals: ApprovalBatch | null) => {
+    set({ pendingApprovals: approvals });
+  },
+
+  setUser: (user: User | null) => {
+    set({ user });
+  },
+
+  setError: (error: string | null) => {
+    set({ error });
+  },
+
+  getMessages: (sessionId: string) => {
+    return get().messagesBySession[sessionId] || [];
+  },
+}));

frontend/src/store/sessionStore.ts

@@ -0,0 +1,78 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { SessionMeta } from '@/types/agent';
+
+interface SessionStore {
+  sessions: SessionMeta[];
+  activeSessionId: string | null;
+
+  // Actions
+  createSession: (id: string) => void;
+  deleteSession: (id: string) => void;
+  switchSession: (id: string) => void;
+  updateSessionTitle: (id: string, title: string) => void;
+  setSessionActive: (id: string, isActive: boolean) => void;
+}
+
+export const useSessionStore = create<SessionStore>()(
+  persist(
+    (set, get) => ({
+      sessions: [],
+      activeSessionId: null,
+
+      createSession: (id: string) => {
+        const newSession: SessionMeta = {
+          id,
+          title: `Chat ${get().sessions.length + 1}`,
+          createdAt: new Date().toISOString(),
+          isActive: true,
+        };
+        set((state) => ({
+          sessions: [...state.sessions, newSession],
+          activeSessionId: id,
+        }));
+      },
+
+      deleteSession: (id: string) => {
+        set((state) => {
+          const newSessions = state.sessions.filter((s) => s.id !== id);
+          const newActiveId =
+            state.activeSessionId === id
+              ? newSessions[newSessions.length - 1]?.id || null
+              : state.activeSessionId;
+          return {
+            sessions: newSessions,
+            activeSessionId: newActiveId,
+          };
+        });
+      },
+
+      switchSession: (id: string) => {
+        set({ activeSessionId: id });
+      },
+
+      updateSessionTitle: (id: string, title: string) => {
+        set((state) => ({
+          sessions: state.sessions.map((s) =>
+            s.id === id ? { ...s, title } : s
+          ),
+        }));
+      },
+
+      setSessionActive: (id: string, isActive: boolean) => {
+        set((state) => ({
+          sessions: state.sessions.map((s) =>
+            s.id === id ? { ...s, isActive } : s
+          ),
+        }));
+      },
+    }),
+    {
+      name: 'hf-agent-sessions',
+      partialize: (state) => ({
+        sessions: state.sessions,
+        activeSessionId: state.activeSessionId,
+      }),
+    }
+  )
+);

frontend/src/theme.ts

@@ -0,0 +1,113 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#FFD21E',
+      light: '#FFE066',
+      dark: '#E6BD1B',
+    },
+    secondary: {
+      main: '#FF9D00',
+    },
+    background: {
+      default: '#0D1117',
+      paper: '#161B22',
+    },
+    text: {
+      primary: '#E6EDF3',
+      secondary: '#8B949E',
+    },
+    divider: '#30363D',
+    success: {
+      main: '#3FB950',
+    },
+    error: {
+      main: '#F85149',
+    },
+    warning: {
+      main: '#D29922',
+    },
+    info: {
+      main: '#58A6FF',
+    },
+  },
+  typography: {
+    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    h1: {
+      fontWeight: 600,
+    },
+    h2: {
+      fontWeight: 600,
+    },
+    h3: {
+      fontWeight: 600,
+    },
+    h4: {
+      fontWeight: 600,
+    },
+    h5: {
+      fontWeight: 600,
+    },
+    h6: {
+      fontWeight: 600,
+    },
+    body1: {
+      fontSize: '0.9375rem',
+    },
+    body2: {
+      fontSize: '0.875rem',
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          scrollbarWidth: 'thin',
+          '&::-webkit-scrollbar': {
+            width: '8px',
+            height: '8px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#30363D',
+            borderRadius: '4px',
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: 'transparent',
+          },
+        },
+        'code, pre': {
+          fontFamily: '"JetBrains Mono", "Fira Code", monospace',
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          fontWeight: 500,
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+        },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          borderRight: '1px solid #30363D',
+        },
+      },
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+});
+
+export default theme;

frontend/src/types/agent.ts

@@ -0,0 +1,49 @@
+/**
+ * Agent-related types
+ */
+
+export interface SessionMeta {
+  id: string;
+  title: string;
+  createdAt: string;
+  isActive: boolean;
+}
+
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'tool';
+  content: string;
+  timestamp: string;
+  toolName?: string;
+  toolCallId?: string;
+}
+
+export interface ToolCall {
+  id: string;
+  tool: string;
+  arguments: Record<string, unknown>;
+  status: 'pending' | 'running' | 'completed' | 'failed';
+  output?: string;
+}
+
+export interface ToolApproval {
+  toolCallId: string;
+  approved: boolean;
+  feedback?: string;
+}
+
+export interface ApprovalBatch {
+  tools: Array<{
+    tool: string;
+    arguments: Record<string, unknown>;
+    tool_call_id: string;
+  }>;
+  count: number;
+}
+
+export interface User {
+  authenticated: boolean;
+  username?: string;
+  name?: string;
+  picture?: string;
+}

frontend/src/types/events.ts

@@ -0,0 +1,69 @@
+/**
+ * Event types from the agent backend
+ */
+
+export type EventType =
+  | 'ready'
+  | 'processing'
+  | 'assistant_message'
+  | 'tool_call'
+  | 'tool_output'
+  | 'approval_required'
+  | 'turn_complete'
+  | 'compacted'
+  | 'error'
+  | 'shutdown'
+  | 'interrupted'
+  | 'undo_complete';
+
+export interface AgentEvent {
+  event_type: EventType;
+  data?: Record<string, unknown>;
+}
+
+export interface ReadyEventData {
+  message: string;
+}
+
+export interface ProcessingEventData {
+  message: string;
+}
+
+export interface AssistantMessageEventData {
+  content: string;
+}
+
+export interface ToolCallEventData {
+  tool: string;
+  arguments: Record<string, unknown>;
+}
+
+export interface ToolOutputEventData {
+  tool: string;
+  output: string;
+  success: boolean;
+}
+
+export interface ApprovalRequiredEventData {
+  tools: ApprovalToolItem[];
+  count: number;
+}
+
+export interface ApprovalToolItem {
+  tool: string;
+  arguments: Record<string, unknown>;
+  tool_call_id: string;
+}
+
+export interface TurnCompleteEventData {
+  history_size: number;
+}
+
+export interface CompactedEventData {
+  old_tokens: number;
+  new_tokens: number;
+}
+
+export interface ErrorEventData {
+  error: string;
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

frontend/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/auth': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: false,
+  },
+})

pyproject.toml

@@ -25,6 +25,11 @@ agent = [
     "nbformat>=5.10.4",
     "datasets>=4.3.0",  # For session logging to HF datasets
     "whoosh>=2.7.4",
+    # Web backend dependencies
+    "fastapi>=0.115.0",
+    "uvicorn[standard]>=0.32.0",
+    "httpx>=0.27.0",
+    "websockets>=13.0",
 ]
 
 # Evaluation/benchmarking dependencies