Merge pull request #21 from huggingface/feature/web-frontend

.gitignore

@@ -68,3 +68,4 @@ models/
 checkpoint-*/
 runs/
 wandb/
+frontend/tsconfig.tsbuildinfo

Dockerfile

@@ -0,0 +1,59 @@
+# Stage 1: Build frontend
+FROM node:20-alpine AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Production
+FROM python:3.12-slim
+
+# Install uv directly from official image
+COPY --from=ghcr.io/astral-sh/uv:latest /uv /uvx /bin/
+
+# Create user with UID 1000 (required for HF Spaces)
+RUN useradd -m -u 1000 user
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy dependency files
+COPY pyproject.toml uv.lock ./
+
+# Install dependencies into /app/.venv
+# Use --frozen to ensure exact versions from uv.lock
+RUN uv sync --extra agent --no-dev --frozen
+
+# Copy application code
+COPY agent/ ./agent/
+COPY backend/ ./backend/
+COPY configs/ ./configs/
+
+# Copy built frontend
+COPY --from=frontend-builder /app/frontend/dist ./static/
+
+# Create directories and set ownership
+RUN mkdir -p /app/session_logs && \
+    chown -R user:user /app
+
+# Switch to non-root user
+USER user
+
+# Set environment
+ENV HOME=/home/user \
+    PYTHONUNBUFFERED=1 \
+    PYTHONPATH=/app \
+    PATH="/app/.venv/bin:$PATH"
+
+# Expose port
+EXPOSE 7860
+
+# Run the application from backend directory
+WORKDIR /app/backend
+CMD ["uvicorn", "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.

agent/core/agent_loop.py

@@ -203,7 +203,7 @@ class Handlers:
                         )
 
                         output, success = await session.tool_router.call_tool(
-                            tool_name, tool_args
+                            tool_name, tool_args, session=session
                         )
 
                     # Add tool result to history
@@ -376,7 +376,9 @@ class Handlers:
                 )
             )
 
-            output, success = await session.tool_router.call_tool(tool_name, tool_args)
+            output, success = await session.tool_router.call_tool(
+                tool_name, tool_args, session=session
+            )
 
             return (tc, tool_name, output, success)
 

agent/core/tools.py

@@ -219,7 +219,7 @@ class ToolRouter:
 
     @observe(name="call_tool")
     async def call_tool(
-        self, tool_name: str, arguments: dict[str, Any]
+        self, tool_name: str, arguments: dict[str, Any], session: Any = None
     ) -> tuple[str, bool]:
         """
         Call a tool and return (output_string, success_bool).
@@ -230,6 +230,12 @@ class ToolRouter:
         # Check if this is a built-in tool with a handler
         tool = self.tools.get(tool_name)
         if tool and tool.handler:
+            import inspect
+
+            # Check if handler accepts session argument
+            sig = inspect.signature(tool.handler)
+            if "session" in sig.parameters:
+                return await tool.handler(arguments, session=session)
             return await tool.handler(arguments)
 
         # Otherwise, use MCP client

agent/prompts/system_prompt.yaml

@@ -77,7 +77,7 @@ system_prompt: |
 
   - Be concise and direct.
   - Don't flatter the user.
-  - Don't use emojis nor exclamation points.
+  - Never use emojis nor exclamation points.
   - If you are limited in a task, offer alternatives.
   - Don't thank the user when he provides results.
   - Explain what you're doing for non-trivial operations.

agent/tools/jobs_tool.py

@@ -9,12 +9,13 @@ import base64
 import http.client
 import os
 import re
-from typing import Any, Dict, Literal, Optional
+from typing import Any, Dict, Literal, Optional, Callable, Awaitable
 
 import httpx
 from huggingface_hub import HfApi
 from huggingface_hub.utils import HfHubHTTPError
 
+from agent.core.session import Event
 from agent.tools.types import ToolResult
 from agent.tools.utilities import (
     format_job_details,
@@ -269,9 +270,15 @@ def _scheduled_job_info_to_dict(scheduled_job_info) -> Dict[str, Any]:
 class HfJobsTool:
     """Tool for managing Hugging Face compute jobs using huggingface-hub library"""
 
-    def __init__(self, hf_token: Optional[str] = None, namespace: Optional[str] = None):
+    def __init__(
+        self,
+        hf_token: Optional[str] = None,
+        namespace: Optional[str] = None,
+        log_callback: Optional[Callable[[str], Awaitable[None]]] = None,
+    ):
         self.api = HfApi(token=hf_token)
         self.namespace = namespace
+        self.log_callback = log_callback
 
     async def execute(self, params: Dict[str, Any]) -> ToolResult:
         """Execute the specified operation"""
@@ -360,15 +367,48 @@ class HfJobsTool:
 
         for _ in range(max_retries):
             try:
-                # Fetch logs - generator streams logs as they arrive
-                logs_gen = self.api.fetch_job_logs(job_id=job_id, namespace=namespace)
+                # Use a queue to bridge sync generator to async consumer
+                queue = asyncio.Queue()
+                loop = asyncio.get_running_loop()
+
+                def log_producer():
+                    try:
+                        # fetch_job_logs is a blocking sync generator
+                        logs_gen = self.api.fetch_job_logs(job_id=job_id, namespace=namespace)
+                        for line in logs_gen:
+                            # Push line to queue thread-safely
+                            loop.call_soon_threadsafe(queue.put_nowait, line)
+                        # Signal EOF
+                        loop.call_soon_threadsafe(queue.put_nowait, None)
+                    except Exception as e:
+                        # Signal error
+                        loop.call_soon_threadsafe(queue.put_nowait, e)
+
+                # Start producer in a background thread so it doesn't block the event loop
+                producer_future = loop.run_in_executor(None, log_producer)
+
+                # Consume logs from the queue as they arrive
+                while True:
+                    item = await queue.get()
+
+                    # EOF sentinel
+                    if item is None:
+                        break
+
+                    # Error occurred in producer
+                    if isinstance(item, Exception):
+                        raise item
 
-                # Stream logs in real-time
-                for log_line in logs_gen:
+                    # Process log line
+                    log_line = item
                     print("\t" + log_line)
+                    if self.log_callback:
+                        await self.log_callback(log_line)
                     all_logs.append(log_line)
 
-                # If we get here, streaming completed normally
+                # If we get here, streaming completed normally (EOF received)
+                # Wait for thread to cleanup (should be done)
+                await producer_future
                 break
 
             except (
@@ -963,10 +1003,22 @@ HF_JOBS_TOOL_SPEC = {
 }
 
 
-async def hf_jobs_handler(arguments: Dict[str, Any]) -> tuple[str, bool]:
+async def hf_jobs_handler(
+    arguments: Dict[str, Any], session: Any = None
+) -> tuple[str, bool]:
     """Handler for agent tool router"""
     try:
-        tool = HfJobsTool(namespace=os.environ.get("HF_NAMESPACE", ""))
+
+        async def log_callback(log: str):
+            if session:
+                await session.send_event(
+                    Event(event_type="tool_log", data={"tool": "hf_jobs", "log": log})
+                )
+
+        tool = HfJobsTool(
+            namespace=os.environ.get("HF_NAMESPACE", ""),
+            log_callback=log_callback if session else None,
+        )
         result = await tool.execute(arguments)
         return result["formatted"], not result.get("isError", False)
     except Exception as e:

agent/tools/plan_tool.py

@@ -1,5 +1,6 @@
 from typing import Any, Dict, List
 
+from agent.core.session import Event
 from agent.utils.terminal_display import format_plan_tool_output
 
 from .types import ToolResult
@@ -11,8 +12,8 @@ _current_plan: List[Dict[str, str]] = []
 class PlanTool:
     """Tool for managing a list of todos with status tracking."""
 
-    def __init__(self):
-        pass
+    def __init__(self, session: Any = None):
+        self.session = session
 
     async def execute(self, params: Dict[str, Any]) -> ToolResult:
         """
@@ -56,6 +57,15 @@ class PlanTool:
         # Store the raw todos structure in memory
         _current_plan = todos
 
+        # Emit plan update event if session is available
+        if self.session:
+            await self.session.send_event(
+                Event(
+                    event_type="plan_update",
+                    data={"plan": todos},
+                )
+            )
+
         # Format only for display using terminal_display utility
         formatted_output = format_plan_tool_output(todos)
 
@@ -120,7 +130,9 @@ PLAN_TOOL_SPEC = {
 }
 
 
-async def plan_tool_handler(arguments: Dict[str, Any]) -> tuple[str, bool]:
-    tool = PlanTool()
+async def plan_tool_handler(
+    arguments: Dict[str, Any], session: Any = None
+) -> tuple[str, bool]:
+    tool = PlanTool(session=session)
     result = await tool.execute(arguments)
     return result["formatted"], not result.get("isError", False)

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 routes.agent import router as agent_router
+from 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,151 @@
+"""Agent API routes - WebSocket and REST endpoints."""
+
+import logging
+
+from fastapi import APIRouter, HTTPException, WebSocket, WebSocketDisconnect
+
+from models import (
+    ApprovalRequest,
+    HealthResponse,
+    SessionInfo,
+    SessionResponse,
+    SubmitRequest,
+)
+from session_manager import session_manager
+from 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."""
+    logger.info(f"WebSocket connection request for session {session_id}")
+    # Verify session exists
+    info = session_manager.get_session_info(session_id)
+    if not info:
+        logger.warning(f"WebSocket connection rejected: Session {session_id} not found")
+        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,148 @@
+"""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,276 @@
+"""Session manager for handling multiple concurrent agent sessions."""
+
+import asyncio
+import logging
+import uuid
+from dataclasses import dataclass, field
+from datetime import datetime
+from pathlib import Path
+from typing import Any, Optional
+
+from websocket import manager as ws_manager
+
+from agent.config import load_config
+from agent.core.agent_loop import process_submission
+from agent.core.session import Event, OpType, Session
+from agent.core.tools import ToolRouter
+
+# Get project root (parent of backend directory)
+PROJECT_ROOT = Path(__file__).parent.parent
+DEFAULT_CONFIG_PATH = str(PROJECT_ROOT / "configs" / "main_agent_config.json")
+
+
+# These dataclasses match agent/main.py structure
+@dataclass
+class Operation:
+    """Operation to be executed by the agent."""
+
+    op_type: OpType
+    data: Optional[dict[str, Any]] = None
+
+
+@dataclass
+class Submission:
+    """Submission to the agent loop."""
+
+    id: str
+    operation: Operation
+
+
+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 | None = None) -> None:
+        self.config = load_config(config_path or DEFAULT_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(self.config.mcpServers)
+
+        # 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.items),
+        }
+
+    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,72 @@
+"""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."""
+        logger.info(f"Attempting to accept WebSocket for session {session_id}")
+        await websocket.accept()
+        self.active_connections[session_id] = websocket
+        self.message_queues[session_id] = asyncio.Queue()
+        logger.info(f"WebSocket connected and registered 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()

configs/main_agent_config.json

@@ -3,7 +3,7 @@
   "save_sessions": true,
   "session_dataset_repo": "akseljoonas/hf-agent-sessions",
   "yolo_mode": false,
-  "confirm_cpu_jobs": false,
+  "confirm_cpu_jobs": true,
   "auto_file_upload": false,
   "mcpServers": {
     "hf-mcp-server": {

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/png" href="/hf-log-only-white.png" />
+    <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 style="margin: 0; padding: 0; background-color: #0D1117; color: #E6EDF3;">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "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",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@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/ApprovalFlow.tsx

@@ -0,0 +1,490 @@
+import { useState, useCallback, useEffect } from 'react';
+import { Box, Typography, Button, TextField, IconButton, Link } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
+import LaunchIcon from '@mui/icons-material/Launch';
+import { useAgentStore } from '@/store/agentStore';
+import { useLayoutStore } from '@/store/layoutStore';
+import { useSessionStore } from '@/store/sessionStore';
+import type { Message, ToolApproval } from '@/types/agent';
+
+interface ApprovalFlowProps {
+  message: Message;
+}
+
+export default function ApprovalFlow({ message }: ApprovalFlowProps) {
+  const { setPanelContent, setPanelTab, setActivePanelTab, clearPanelTabs, updateMessage } = useAgentStore();
+  const { setRightPanelOpen, setLeftSidebarOpen } = useLayoutStore();
+  const { activeSessionId } = useSessionStore();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [feedback, setFeedback] = useState('');
+  const [decisions, setDecisions] = useState<ToolApproval[]>([]);
+
+  const approvalData = message.approval;
+  
+  if (!approvalData) return null;
+
+  const { batch, status } = approvalData;
+
+  // Parse toolOutput to extract job info (URL, status, logs)
+  let logsContent = '';
+  let showLogsButton = false;
+  let jobUrl = '';
+  let jobId = '';
+  let jobStatus = '';
+  let jobFailed = false;
+
+  if (message.toolOutput) {
+    // Extract job URL: **View at:** https://...
+    const urlMatch = message.toolOutput.match(/\*\*View at:\*\*\s*(https:\/\/[^\s\n]+)/);
+    if (urlMatch) {
+      jobUrl = urlMatch[1];
+    }
+
+    // Extract job ID: **Job ID:** ...
+    const idMatch = message.toolOutput.match(/\*\*Job ID:\*\*\s*([^\s\n]+)/);
+    if (idMatch) {
+      jobId = idMatch[1];
+    }
+
+    // Extract job status: **Final Status:** ...
+    const statusMatch = message.toolOutput.match(/\*\*Final Status:\*\*\s*([^\n]+)/);
+    if (statusMatch) {
+      jobStatus = statusMatch[1].trim();
+      jobFailed = jobStatus.toLowerCase().includes('error') || jobStatus.toLowerCase().includes('failed');
+    }
+
+    // Extract logs
+    if (message.toolOutput.includes('**Logs:**')) {
+      const parts = message.toolOutput.split('**Logs:**');
+      if (parts.length > 1) {
+        const logsPart = parts[1].trim();
+        const codeBlockMatch = logsPart.match(/```([\s\S]*?)```/);
+        if (codeBlockMatch) {
+          logsContent = codeBlockMatch[1].trim();
+          showLogsButton = true;
+        }
+      }
+    }
+  }
+
+  // Sync right panel with current tool
+  useEffect(() => {
+    if (!batch || currentIndex >= batch.tools.length) return;
+    
+    // Only auto-open panel if pending
+    if (status !== 'pending') return;
+    
+    const tool = batch.tools[currentIndex];
+    const args = tool.arguments as any;
+
+    if (tool.tool === 'hf_jobs' && (args.operation === 'run' || args.operation === 'scheduled run') && args.script) {
+      setPanelContent({
+        title: 'Compute Job Script',
+        content: args.script,
+        language: 'python',
+        parameters: args
+      });
+      // Don't auto-open if already resolved
+    } else if (tool.tool === 'hf_repo_files' && args.operation === 'upload' && args.content) {
+      setPanelContent({
+        title: `File Upload: ${args.path || 'unnamed'}`,
+        content: args.content,
+        parameters: args
+      });
+    }
+  }, [currentIndex, batch, status, setPanelContent]);
+
+  const handleResolve = useCallback(async (approved: boolean) => {
+    if (!batch || !activeSessionId) return;
+
+    const currentTool = batch.tools[currentIndex];
+    const newDecisions = [
+      ...decisions,
+      {
+        tool_call_id: currentTool.tool_call_id,
+        approved,
+        feedback: approved ? null : feedback || 'Rejected by user',
+      },
+    ];
+
+    if (currentIndex < batch.tools.length - 1) {
+      setDecisions(newDecisions);
+      setCurrentIndex(currentIndex + 1);
+      setFeedback('');
+    } else {
+      // All tools in batch resolved
+      try {
+        await fetch('/api/approve', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            session_id: activeSessionId,
+            approvals: newDecisions,
+          }),
+        });
+        
+        // Update message status
+        updateMessage(activeSessionId, message.id, {
+            approval: {
+                ...approvalData!,
+                status: approved ? 'approved' : 'rejected',
+                decisions: newDecisions
+            }
+        });
+        
+      } catch (e) {
+        console.error('Approval submission failed:', e);
+      }
+    }
+  }, [activeSessionId, message.id, batch, currentIndex, feedback, decisions, approvalData, updateMessage]);
+
+  if (!batch || currentIndex >= batch.tools.length) return null;
+
+  const currentTool = batch.tools[currentIndex];
+
+  // Check if script contains push_to_hub or upload_file
+  const args = currentTool.arguments as any;
+  const containsPushToHub = currentTool.tool === 'hf_jobs' && args.script && (args.script.includes('push_to_hub') || args.script.includes('upload_file'));
+
+  const getToolDescription = (toolName: string, args: any) => {
+    if (toolName === 'hf_jobs') {
+      return (
+        <Box sx={{ flex: 1 }}>
+          <Typography variant="body2" sx={{ color: 'var(--muted-text)' }}>
+            The agent wants to execute <Box component="span" sx={{ color: 'var(--accent-yellow)', fontWeight: 500 }}>hf_jobs</Box> on{' '}
+            <Box component="span" sx={{ fontWeight: 500, color: 'var(--text)' }}>{args.hardware_flavor || 'default'}</Box> with a timeout of{' '}
+            <Box component="span" sx={{ fontWeight: 500, color: 'var(--text)' }}>{args.timeout || '30m'}</Box>
+          </Typography>
+        </Box>
+      );
+    }
+    return (
+      <Typography variant="body2" sx={{ color: 'var(--muted-text)', flex: 1 }}>
+        The agent wants to execute <Box component="span" sx={{ color: 'var(--accent-yellow)', fontWeight: 500 }}>{toolName}</Box>
+      </Typography>
+    );
+  };
+
+  const showCode = () => {
+    const args = currentTool.arguments as any;
+    if (currentTool.tool === 'hf_jobs' && args.script) {
+      // Clear existing tabs and set up script tab (and logs if available)
+      clearPanelTabs();
+      setPanelTab({
+        id: 'script',
+        title: 'Script',
+        content: args.script,
+        language: 'python',
+        parameters: args
+      });
+      // If logs are available (job completed), also add logs tab
+      if (logsContent) {
+        setPanelTab({
+          id: 'logs',
+          title: 'Logs',
+          content: logsContent,
+          language: 'text'
+        });
+      }
+      setActivePanelTab('script');
+      setRightPanelOpen(true);
+      setLeftSidebarOpen(false);
+    } else {
+      setPanelContent({
+        title: `Tool: ${currentTool.tool}`,
+        content: JSON.stringify(args, null, 2),
+        language: 'json',
+        parameters: args
+      });
+      setRightPanelOpen(true);
+      setLeftSidebarOpen(false);
+    }
+  };
+
+  const handleViewLogs = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const args = currentTool.arguments as any;
+    // Set up both tabs so user can switch between script and logs
+    clearPanelTabs();
+    if (currentTool.tool === 'hf_jobs' && args.script) {
+      setPanelTab({
+        id: 'script',
+        title: 'Script',
+        content: args.script,
+        language: 'python',
+        parameters: args
+      });
+    }
+    setPanelTab({
+      id: 'logs',
+      title: 'Logs',
+      content: logsContent,
+      language: 'text'
+    });
+    setActivePanelTab('logs');
+    setRightPanelOpen(true);
+    setLeftSidebarOpen(false);
+  };
+
+  return (
+    <Box 
+      className="action-card"
+      sx={{ 
+        width: '100%',
+        padding: '18px',
+        borderRadius: 'var(--radius-md)',
+        background: 'linear-gradient(180deg, rgba(255,255,255,0.015), transparent)',
+        border: '1px solid rgba(255,255,255,0.03)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        opacity: status !== 'pending' && !showLogsButton ? 0.8 : 1
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+         <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'var(--text)' }}>
+            {status === 'pending' ? 'Approval Required' : status === 'approved' ? 'Approved' : 'Rejected'}
+         </Typography>
+         <Typography variant="caption" sx={{ color: 'var(--muted-text)' }}>
+            ({currentIndex + 1}/{batch.count})
+         </Typography>
+         {status === 'approved' && <CheckCircleIcon sx={{ fontSize: 18, color: 'var(--accent-green)' }} />}
+         {status === 'rejected' && <CancelIcon sx={{ fontSize: 18, color: 'var(--accent-red)' }} />}
+      </Box>
+
+      <Box 
+        onClick={showCode}
+        sx={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 1, 
+            cursor: 'pointer',
+            p: 1.5,
+            borderRadius: '8px',
+            bgcolor: 'rgba(0,0,0,0.2)',
+            border: '1px solid rgba(255,255,255,0.05)',
+            transition: 'all 0.2s',
+            '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.03)',
+                borderColor: 'var(--accent-primary)',
+            }
+        }}
+      >
+        {getToolDescription(currentTool.tool, currentTool.arguments)}
+        <OpenInNewIcon sx={{ fontSize: 16, color: 'var(--muted-text)', opacity: 0.7 }} />
+      </Box>
+
+      {currentTool.tool === 'hf_jobs' && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+          {/* Show specific job URL if available (after execution), otherwise generic link */}
+          {jobUrl ? (
+            <Link
+              href={jobUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                color: 'var(--accent-primary)',
+                fontSize: '0.8rem',
+                textDecoration: 'none',
+                opacity: 0.9,
+                '&:hover': {
+                  opacity: 1,
+                  textDecoration: 'underline',
+                }
+              }}
+            >
+              <LaunchIcon sx={{ fontSize: 14 }} />
+              View job{jobId ? ` (${jobId.substring(0, 8)}...)` : ''} on Hugging Face
+            </Link>
+          ) : (
+            <Link
+              href="https://huggingface.co/settings/jobs"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                color: 'var(--muted-text)',
+                fontSize: '0.8rem',
+                textDecoration: 'none',
+                opacity: 0.7,
+                '&:hover': {
+                  opacity: 1,
+                  textDecoration: 'underline',
+                }
+              }}
+            >
+              <LaunchIcon sx={{ fontSize: 14 }} />
+              View all jobs on Hugging Face
+            </Link>
+          )}
+
+          {/* Show job status if available */}
+          {jobStatus && (
+            <Typography
+              variant="caption"
+              sx={{
+                color: jobFailed ? 'var(--accent-red)' : 'var(--accent-green)',
+                fontSize: '0.75rem',
+                fontWeight: 500,
+              }}
+            >
+              Status: {jobStatus}
+            </Typography>
+          )}
+        </Box>
+      )}
+
+      {containsPushToHub && (
+        <Typography variant="caption" sx={{ color: 'var(--accent-green)', fontSize: '0.75rem', opacity: 0.8, px: 0.5 }}>
+          We've detected the result will be pushed to hub.
+        </Typography>
+      )}
+
+      {/* Show script/logs buttons for completed jobs */}
+      {status !== 'pending' && currentTool.tool === 'hf_jobs' && (args.script || showLogsButton) && (
+        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+          {args.script && (
+            <Button
+              variant="outlined"
+              size="small"
+              startIcon={<OpenInNewIcon />}
+              onClick={showCode}
+              sx={{
+                textTransform: 'none',
+                borderColor: 'rgba(255,255,255,0.1)',
+                color: 'var(--muted-text)',
+                fontSize: '0.75rem',
+                py: 0.5,
+                '&:hover': {
+                  borderColor: 'var(--accent-primary)',
+                  color: 'var(--accent-primary)',
+                  bgcolor: 'rgba(255,255,255,0.03)'
+                }
+              }}
+            >
+              View Script
+            </Button>
+          )}
+          {showLogsButton && (
+            <Button
+              variant="outlined"
+              size="small"
+              startIcon={<OpenInNewIcon />}
+              onClick={handleViewLogs}
+              sx={{
+                textTransform: 'none',
+                borderColor: 'rgba(255,255,255,0.1)',
+                color: 'var(--accent-primary)',
+                fontSize: '0.75rem',
+                py: 0.5,
+                '&:hover': {
+                  borderColor: 'var(--accent-primary)',
+                  bgcolor: 'rgba(255,255,255,0.03)'
+                }
+              }}
+            >
+              View Logs
+            </Button>
+          )}
+        </Box>
+      )}
+
+      {status === 'pending' && (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+            <TextField
+                fullWidth
+                size="small"
+                placeholder="Feedback (optional)"
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+                variant="outlined"
+                sx={{ 
+                    '& .MuiOutlinedInput-root': { 
+                        bgcolor: 'rgba(0,0,0,0.2)',
+                        fontFamily: 'inherit',
+                        fontSize: '0.9rem' 
+                    }
+                }}
+            />
+            <IconButton 
+                onClick={() => handleResolve(false)}
+                disabled={!feedback}
+                title="Reject with feedback"
+                sx={{ 
+                    color: 'var(--accent-red)',
+                    border: '1px solid rgba(255,255,255,0.05)',
+                    borderRadius: '8px',
+                    width: 40,
+                    height: 40,
+                    '&:hover': {
+                        bgcolor: 'rgba(224, 90, 79, 0.1)',
+                        borderColor: 'var(--accent-red)',
+                    },
+                    '&.Mui-disabled': {
+                        color: 'rgba(255,255,255,0.1)',
+                        borderColor: 'rgba(255,255,255,0.02)'
+                    }
+                }}
+            >
+                <SendIcon fontSize="small" />
+            </IconButton>
+        </Box>
+        
+        <Box className="action-buttons" sx={{ display: 'flex', gap: '10px' }}>
+            <Button 
+            className="btn-reject"
+            onClick={() => handleResolve(false)}
+            sx={{ 
+                flex: 1,
+                background: 'transparent',
+                border: '1px solid rgba(255,255,255,0.05)',
+                color: 'var(--accent-red)',
+                padding: '10px 14px',
+                borderRadius: '10px',
+                '&:hover': {
+                    bgcolor: 'rgba(224, 90, 79, 0.05)',
+                    borderColor: 'var(--accent-red)',
+                }
+            }}
+            >
+            Reject
+            </Button>
+            <Button 
+            className="btn-approve"
+            onClick={() => handleResolve(true)}
+            sx={{ 
+                flex: 1,
+                background: 'transparent',
+                border: '1px solid rgba(255,255,255,0.05)',
+                color: 'var(--accent-green)',
+                padding: '10px 14px',
+                borderRadius: '10px',
+                '&:hover': {
+                    bgcolor: 'rgba(47, 204, 113, 0.05)',
+                    borderColor: 'var(--accent-green)',
+                }
+            }}
+            >
+            Approve
+            </Button>
+        </Box>
+      </Box>
+      )}
+      
+      {status === 'rejected' && decisions.some(d => d.feedback) && (
+        <Typography variant="body2" sx={{ color: 'var(--accent-red)', mt: 1 }}>
+            Feedback: {decisions.find(d => d.feedback)?.feedback}
+        </Typography>
+      )}
+    </Box>
+  );
+}

frontend/src/components/Chat/ChatInput.tsx

@@ -0,0 +1,126 @@
+import { useState, useCallback, KeyboardEvent } from 'react';
+import { Box, TextField, IconButton, CircularProgress, Typography } from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+
+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={{
+        pb: 4,
+        pt: 2,
+        position: 'relative',
+        zIndex: 10,
+      }}
+    >
+      <Box sx={{ maxWidth: '880px', mx: 'auto', width: '100%', px: 2 }}>
+        <Box
+          className="composer"
+          sx={{
+            display: 'flex',
+            gap: '10px',
+            alignItems: 'flex-start',
+            bgcolor: 'rgba(255,255,255,0.01)',
+            borderRadius: 'var(--radius-md)',
+            p: '12px',
+            border: '1px solid rgba(255,255,255,0.03)',
+            transition: 'box-shadow 0.2s ease, border-color 0.2s ease',
+            '&:focus-within': {
+                borderColor: 'var(--accent-yellow)',
+                boxShadow: 'var(--focus)',
+            }
+          }}
+        >
+          <TextField
+            fullWidth
+            multiline
+            maxRows={6}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask anything..."
+            disabled={disabled}
+            variant="standard"
+            InputProps={{
+                disableUnderline: true,
+                sx: {
+                    color: 'var(--text)',
+                    fontSize: '15px',
+                    fontFamily: 'inherit',
+                    padding: 0,
+                    lineHeight: 1.5,
+                    minHeight: '56px',
+                    alignItems: 'flex-start',
+                }
+            }}
+            sx={{
+                flex: 1,
+                '& .MuiInputBase-root': {
+                    p: 0,
+                    backgroundColor: 'transparent',
+                },
+                '& textarea': {
+                    resize: 'none',
+                    padding: '0 !important',
+                }
+            }}
+          />
+          <IconButton
+            onClick={handleSend}
+            disabled={disabled || !input.trim()}
+            sx={{
+              mt: 1,
+              p: 1,
+              borderRadius: '10px',
+              color: 'var(--muted-text)',
+              transition: 'all 0.2s',
+              '&:hover': {
+                color: 'var(--accent-yellow)',
+                bgcolor: 'rgba(255,255,255,0.05)',
+              },
+              '&.Mui-disabled': {
+                opacity: 0.3,
+              },
+            }}
+          >
+            {disabled ? <CircularProgress size={20} color="inherit" /> : <ArrowUpwardIcon fontSize="small" />}
+          </IconButton>
+        </Box>
+        
+        {/* Powered By Badge */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1.5, gap: 0.8, opacity: 0.5 }}>
+          <Typography variant="caption" sx={{ fontSize: '10px', color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
+            powered by
+          </Typography>
+          <img src="/claude-logo.png" alt="Claude" style={{ height: '12px', objectFit: 'contain' }} />
+          <Typography variant="caption" sx={{ fontSize: '10px', color: 'var(--text)', fontWeight: 600, letterSpacing: '0.02em' }}>
+            claude-opus-4-5-20251101
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

frontend/src/components/Chat/MessageBubble.tsx

@@ -0,0 +1,178 @@
+import { Box, Paper, Typography, Chip } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import ApprovalFlow from './ApprovalFlow';
+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 isAssistant = message.role === 'assistant';
+
+  if (message.approval) {
+    return (
+        <Box sx={{ width: '100%', maxWidth: '880px', mx: 'auto', my: 2 }}>
+            <ApprovalFlow message={message} />
+        </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: isUser ? 'flex-end' : 'flex-start',
+        width: '100%',
+        maxWidth: '880px',
+        mx: 'auto',
+      }}
+    >
+      <Paper
+        elevation={0}
+        className={`message ${isUser ? 'user' : isAssistant ? 'assistant' : ''}`}
+        sx={{
+          p: '14px 18px',
+          margin: '10px 0',
+          width: isTool ? '100%' : 'auto',
+          maxWidth: '100%',
+          borderRadius: 'var(--radius-lg)',
+          borderTopLeftRadius: isAssistant ? '6px' : undefined,
+          lineHeight: 1.45,
+          boxShadow: 'var(--shadow-1)',
+          border: '1px solid rgba(255,255,255,0.03)',
+          background: 'linear-gradient(180deg, rgba(255,255,255,0.015), transparent)',
+        }}
+      >
+        {isTool && (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              Tool
+            </Typography>
+            {message.toolName && (
+              <Chip
+                label={message.toolName}
+                size="small"
+                variant="outlined"
+                sx={{ ml: 1, height: 20, fontSize: '0.7rem' }}
+              />
+            )}
+          </Box>
+        )}
+
+        <Box
+          sx={{
+            '& p': { m: 0, color: isUser ? 'var(--text)' : 'var(--text)' }, // User might want different text color? Defaults to --text
+            '& pre': {
+              bgcolor: 'rgba(0,0,0,0.5)',
+              p: 1.5,
+              borderRadius: 1,
+              overflow: 'auto',
+              fontSize: '0.85rem',
+              border: '1px solid rgba(255,255,255,0.05)',
+            },
+            '& code': {
+              bgcolor: 'rgba(255,255,255,0.05)',
+              px: 0.5,
+              py: 0.25,
+              borderRadius: 0.5,
+              fontSize: '0.85rem',
+              fontFamily: '"JetBrains Mono", monospace',
+            },
+            '& pre code': {
+              bgcolor: 'transparent',
+              p: 0,
+            },
+            '& a': {
+              color: 'var(--accent-yellow)',
+              textDecoration: 'none',
+              '&:hover': {
+                textDecoration: 'underline',
+              },
+            },
+            '& ul, & ol': {
+              pl: 2,
+              my: 1,
+            },
+            '& table': {
+              borderCollapse: 'collapse',
+              width: '100%',
+              my: 2,
+              fontSize: '0.875rem',
+            },
+            '& th': {
+              borderBottom: '1px solid',
+              borderColor: 'rgba(255,255,255,0.1)',
+              textAlign: 'left',
+              p: 1,
+              bgcolor: 'rgba(255,255,255,0.02)',
+            },
+            '& td': {
+              borderBottom: '1px solid',
+              borderColor: 'rgba(255,255,255,0.05)',
+              p: 1,
+            },
+          }}
+        >
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
+        </Box>
+
+        {/* Persisted Trace Logs - Now at the bottom */}
+        {message.trace && message.trace.length > 0 && (
+          <Box
+            sx={{
+              bgcolor: 'rgba(0,0,0,0.3)',
+              borderRadius: 1,
+              p: 1.5,
+              border: 1,
+              borderColor: 'rgba(255,255,255,0.05)',
+              width: '100%',
+              mt: 2,
+            }}
+          >
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+              {message.trace.map((log) => {
+                // Extract tool name from text "Agent is executing {toolName}..."
+                const match = log.text.match(/Agent is executing (.+)\.\.\./);
+                const toolName = match ? match[1] : log.tool;
+
+                return (
+                  <Typography
+                    key={log.id}
+                    variant="caption"
+                    component="div"
+                    sx={{
+                      color: 'var(--muted-text)',
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+                      fontSize: '0.75rem',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 0.5,
+                    }}
+                  >
+                    <span style={{ color: log.completed ? '#FDB022' : 'inherit' }}>*</span>
+                    <span>Agent is executing </span>
+                    <span style={{
+                      fontWeight: 600,
+                      color: 'rgba(255, 255, 255, 0.9)',
+                    }}>
+                      {toolName}
+                    </span>
+                    <span>...</span>
+                  </Typography>
+                );
+              })}
+            </Box>
+          </Box>
+        )}
+
+        <Typography className="meta" variant="caption" sx={{ display: 'block', textAlign: 'right', mt: 1, fontSize: '11px', opacity: 0.5 }}>
+            {new Date(message.timestamp).toLocaleTimeString()}
+        </Typography>
+      </Paper>
+    </Box>
+  );
+}

frontend/src/components/Chat/MessageList.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react';
+import { Box, Typography } from '@mui/material';
+import { useSessionStore } from '@/store/sessionStore';
+import MessageBubble from './MessageBubble';
+import type { Message } from '@/types/agent';
+
+interface MessageListProps {
+  messages: Message[];
+  isProcessing: boolean;
+}
+
+const TechnicalIndicator = () => (
+  <Box
+    component="span"
+    sx={{
+      color: 'primary.main',
+      fontFamily: 'monospace',
+      fontWeight: 'bold',
+      fontSize: '1.2rem',
+      lineHeight: 0,
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      width: '1em',
+      letterSpacing: '-3px',
+      transform: 'scale(0.6) translateY(-2px)',
+      '&::after': {
+        content: '""',
+        animation: 'dots 2s steps(4, end) infinite',
+      },
+      '@keyframes dots': {
+        '0%': { content: '""' },
+        '25%': { content: '"."' },
+        '50%': { content: '".."' },
+        '75%, 100%': { content: '"..."' },
+      },
+    }}
+  />
+);
+
+export default function MessageList({ messages, isProcessing }: MessageListProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const { activeSessionId } = useSessionStore();
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, isProcessing]);
+
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        overflow: 'auto',
+        p: 2,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Box sx={{ maxWidth: 'md', mx: 'auto', width: '100%', display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {messages.length === 0 && !isProcessing ? (
+          <Box
+            sx={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              py: 8,
+            }}
+          >
+            <Typography color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+              Awaiting input…
+            </Typography>
+          </Box>
+        ) : (
+          messages.map((message) => (
+            <MessageBubble key={message.id} message={message} />
+          ))
+        )}
+        
+        {isProcessing && (
+          <Box sx={{ width: '100%', mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1, px: 0.5 }}>
+              <Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace', fontWeight: 600 }}>
+                Thinking
+              </Typography>
+              <TechnicalIndicator />
+            </Box>
+          </Box>
+        )}
+
+        {activeSessionId && (
+          // ApprovalFlow is now handled within messages
+          null
+        )}
+        
+        <div ref={bottomRef} />
+      </Box>
+    </Box>
+  );
+}

frontend/src/components/CodePanel/CodePanel.tsx

@@ -0,0 +1,204 @@
+import { useRef, useEffect, useMemo } from 'react';
+import { Box, Typography, IconButton, Tabs, Tab } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
+import CodeIcon from '@mui/icons-material/Code';
+import TerminalIcon from '@mui/icons-material/Terminal';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useAgentStore } from '@/store/agentStore';
+import { useLayoutStore } from '@/store/layoutStore';
+import { processLogs } from '@/utils/logProcessor';
+
+export default function CodePanel() {
+  const { panelContent, panelTabs, activePanelTab, setActivePanelTab, plan } = useAgentStore();
+  const { setRightPanelOpen } = useLayoutStore();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Get the active tab content, or fall back to panelContent for backwards compatibility
+  const activeTab = panelTabs.find(t => t.id === activePanelTab);
+  const currentContent = activeTab || panelContent;
+
+  const displayContent = useMemo(() => {
+    if (!currentContent?.content) return '';
+    // Apply log processing only for text/logs, not for code/json
+    if (!currentContent.language || currentContent.language === 'text') {
+      return processLogs(currentContent.content);
+    }
+    return currentContent.content;
+  }, [currentContent?.content, currentContent?.language]);
+
+  useEffect(() => {
+    // Auto-scroll only for logs tab
+    if (scrollRef.current && activePanelTab === 'logs') {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [displayContent, activePanelTab]);
+
+  const hasTabs = panelTabs.length > 0;
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'var(--panel)' }}>
+      {/* Header - Fixed 60px to align */}
+      <Box sx={{
+        height: '60px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        px: 2,
+        borderBottom: '1px solid rgba(255,255,255,0.03)'
+      }}>
+        {hasTabs ? (
+          <Tabs
+            value={activePanelTab || panelTabs[0]?.id}
+            onChange={(_, newValue) => setActivePanelTab(newValue)}
+            sx={{
+              minHeight: 36,
+              '& .MuiTabs-indicator': {
+                backgroundColor: 'var(--accent-primary)',
+              },
+              '& .MuiTab-root': {
+                minHeight: 36,
+                minWidth: 'auto',
+                px: 2,
+                py: 0.5,
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                color: 'var(--muted-text)',
+                '&.Mui-selected': {
+                  color: 'var(--text)',
+                },
+              },
+            }}
+          >
+            {panelTabs.map((tab) => (
+              <Tab
+                key={tab.id}
+                value={tab.id}
+                label={tab.title}
+                icon={tab.id === 'script' ? <CodeIcon sx={{ fontSize: 16 }} /> : <TerminalIcon sx={{ fontSize: 16 }} />}
+                iconPosition="start"
+              />
+            ))}
+          </Tabs>
+        ) : (
+          <Typography variant="caption" sx={{ fontWeight: 600, color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+            {currentContent?.title || 'Code Panel'}
+          </Typography>
+        )}
+        <IconButton size="small" onClick={() => setRightPanelOpen(false)} sx={{ color: 'var(--muted-text)' }}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Box>
+
+      {/* Main Content Area */}
+      <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+        {!currentContent ? (
+          <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4 }}>
+            <Typography variant="body2" color="text.secondary" sx={{ opacity: 0.5 }}>
+              NO DATA LOADED
+            </Typography>
+          </Box>
+        ) : (
+          <Box sx={{ flex: 1, overflow: 'hidden', p: 2 }}>
+            <Box
+              ref={scrollRef}
+              className="code-panel"
+              sx={{
+                background: '#0A0B0C',
+                borderRadius: 'var(--radius-md)',
+                padding: '18px',
+                border: '1px solid rgba(255,255,255,0.03)',
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace',
+                fontSize: '13px',
+                lineHeight: 1.55,
+                height: '100%',
+                overflow: 'auto',
+              }}
+            >
+              {currentContent.content ? (
+                currentContent.language === 'python' ? (
+                  <SyntaxHighlighter
+                    language="python"
+                    style={vscDarkPlus}
+                    customStyle={{
+                      margin: 0,
+                      padding: 0,
+                      background: 'transparent',
+                      fontSize: '13px',
+                      fontFamily: 'inherit',
+                    }}
+                    wrapLines={true}
+                    wrapLongLines={true}
+                  >
+                    {displayContent}
+                  </SyntaxHighlighter>
+                ) : (
+                  <Box component="pre" sx={{
+                    m: 0,
+                    fontFamily: 'inherit',
+                    color: 'var(--text)',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-all'
+                  }}>
+                    <code>{displayContent}</code>
+                  </Box>
+                )
+              ) : (
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', opacity: 0.5 }}>
+                  <Typography variant="caption">
+                    NO CONTENT TO DISPLAY
+                  </Typography>
+                </Box>
+              )}
+            </Box>
+          </Box>
+        )}
+      </Box>
+
+      {/* Plan Display at Bottom */}
+      {plan && plan.length > 0 && (
+        <Box sx={{ 
+            borderTop: '1px solid rgba(255,255,255,0.03)',
+            bgcolor: 'rgba(0,0,0,0.2)',
+            maxHeight: '30%',
+            display: 'flex',
+            flexDirection: 'column'
+        }}>
+            <Box sx={{ p: 1.5, borderBottom: '1px solid rgba(255,255,255,0.03)', display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Typography variant="caption" sx={{ fontWeight: 600, color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                    CURRENT PLAN
+                </Typography>
+            </Box>
+            <Box sx={{ p: 2, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 1 }}>
+                {plan.map((item) => (
+                    <Box key={item.id} sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
+                        <Box sx={{ mt: 0.2 }}>
+                            {item.status === 'completed' && <CheckCircleIcon sx={{ fontSize: 16, color: 'var(--accent-green)' }} />}
+                            {item.status === 'in_progress' && <PlayCircleOutlineIcon sx={{ fontSize: 16, color: 'var(--accent-yellow)' }} />}
+                            {item.status === 'pending' && <RadioButtonUncheckedIcon sx={{ fontSize: 16, color: 'var(--muted-text)', opacity: 0.5 }} />}
+                        </Box>
+                        <Typography 
+                            variant="body2" 
+                            sx={{ 
+                                fontSize: '13px', 
+                                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+                                color: item.status === 'completed' ? 'var(--muted-text)' : 'var(--text)',
+                                textDecoration: item.status === 'completed' ? 'line-through' : 'none',
+                                opacity: item.status === 'pending' ? 0.7 : 1
+                            }}
+                        >
+                            {item.content}
+                        </Typography>
+                    </Box>
+                ))}
+            </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

frontend/src/components/Layout/AppLayout.tsx

@@ -0,0 +1,284 @@
+import { useCallback, useRef, useEffect } from 'react';
+import {
+  Box,
+  Drawer,
+  Typography,
+  IconButton,
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import { useSessionStore } from '@/store/sessionStore';
+import { useAgentStore } from '@/store/agentStore';
+import { useLayoutStore } from '@/store/layoutStore';
+import { useAgentWebSocket } from '@/hooks/useAgentWebSocket';
+import SessionSidebar from '@/components/SessionSidebar/SessionSidebar';
+import CodePanel from '@/components/CodePanel/CodePanel';
+import ChatInput from '@/components/Chat/ChatInput';
+import MessageList from '@/components/Chat/MessageList';
+import type { Message } from '@/types/agent';
+
+const DRAWER_WIDTH = 260;
+
+export default function AppLayout() {
+  const { activeSessionId } = useSessionStore();
+  const { isConnected, isProcessing, getMessages, addMessage } = useAgentStore();
+  const { 
+    isLeftSidebarOpen, 
+    isRightPanelOpen, 
+    rightPanelWidth,
+    setRightPanelWidth,
+    toggleLeftSidebar, 
+    toggleRightPanel 
+  } = useLayoutStore();
+
+  const isResizing = useRef(false);
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isResizing.current = true;
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', stopResizing);
+    document.body.style.cursor = 'col-resize';
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    isResizing.current = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', stopResizing);
+    document.body.style.cursor = 'default';
+  }, []);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isResizing.current) return;
+    const newWidth = window.innerWidth - e.clientX;
+    const maxWidth = window.innerWidth * 0.8;
+    const minWidth = 300;
+    if (newWidth > minWidth && newWidth < maxWidth) {
+      setRightPanelWidth(newWidth);
+    }
+  }, [setRightPanelWidth]);
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', stopResizing);
+    };
+  }, [handleMouseMove, stopResizing]);
+
+  const messages = activeSessionId ? getMessages(activeSessionId) : [];
+
+  useAgentWebSocket({
+    sessionId: activeSessionId,
+    onReady: () => console.log('Agent ready'),
+    onError: (error) => console.error('Agent error:', error),
+  });
+
+  const handleSendMessage = useCallback(
+    async (text: string) => {
+      if (!activeSessionId || !text.trim()) return;
+      
+      const userMsg: Message = {
+        id: `user_${Date.now()}`,
+        role: 'user',
+        content: text.trim(),
+        timestamp: new Date().toISOString(),
+      };
+      addMessage(activeSessionId, userMsg);
+
+      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, addMessage]
+  );
+
+  return (
+    <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
+      {/* Left Sidebar Drawer */}
+      <Box
+        component="nav"
+        sx={{
+          width: { md: isLeftSidebarOpen ? DRAWER_WIDTH : 0 },
+          flexShrink: { md: 0 },
+          transition: isResizing.current ? 'none' : 'width 0.2s',
+          overflow: 'hidden',
+        }}
+      >
+        <Drawer
+          variant="persistent"
+          sx={{
+            display: { xs: 'none', md: 'block' },
+            '& .MuiDrawer-paper': {
+              boxSizing: 'border-box',
+              width: DRAWER_WIDTH,
+              borderRight: '1px solid',
+              borderColor: 'divider',
+              top: 0,
+              height: '100%',
+              bgcolor: 'var(--panel)', // Ensure correct background matches sidebar
+            },
+          }}
+          open={isLeftSidebarOpen}
+        >
+          <SessionSidebar />
+        </Drawer>
+      </Box>
+
+      {/* Main Content Area */}
+      <Box
+        sx={{
+          flexGrow: 1,
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          transition: isResizing.current ? 'none' : 'width 0.2s',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Top Header Bar (Fixed) */}
+        <Box sx={{ 
+          height: '60px',
+          px: 1, 
+          display: 'flex', 
+          alignItems: 'center', 
+          borderBottom: 1, 
+          borderColor: 'divider',
+          bgcolor: 'background.default',
+          zIndex: 1200,
+        }}>
+          <IconButton onClick={toggleLeftSidebar} size="small">
+            {isLeftSidebarOpen ? <ChevronLeftIcon /> : <MenuIcon />}
+          </IconButton>
+          
+          <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+            <img 
+              src="/hf-logo-white.png" 
+              alt="Hugging Face" 
+              style={{ height: '40px', objectFit: 'contain' }} 
+            />
+          </Box>
+
+          <IconButton 
+            onClick={toggleRightPanel} 
+            size="small" 
+            sx={{ visibility: isRightPanelOpen ? 'hidden' : 'visible' }}
+          >
+            <MenuIcon />
+          </IconButton>
+        </Box>
+
+        <Box
+          component="main"
+          className="chat-pane"
+          sx={{
+            flexGrow: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            background: 'linear-gradient(180deg, var(--bg), var(--panel))',
+            padding: '24px',
+          }}
+        >
+          {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" sx={{ fontFamily: 'monospace' }}>
+                NO SESSION SELECTED
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+                Initialize a session via the sidebar
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      {/* Resize Handle */}
+      {isRightPanelOpen && (
+        <Box
+          onMouseDown={startResizing}
+          sx={{
+            width: '4px',
+            cursor: 'col-resize',
+            bgcolor: 'divider',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'background-color 0.2s',
+            zIndex: 1300,
+            overflow: 'hidden',
+            '&:hover': {
+              bgcolor: 'primary.main',
+            },
+          }}
+        >
+          <DragIndicatorIcon 
+            sx={{ 
+              fontSize: '0.8rem', 
+              color: 'text.secondary',
+              pointerEvents: 'none',
+            }} 
+          />
+        </Box>
+      )}
+
+      {/* Right Panel Drawer */}
+      <Box
+        component="nav"
+        sx={{
+          width: { md: isRightPanelOpen ? rightPanelWidth : 0 },
+          flexShrink: { md: 0 },
+          transition: isResizing.current ? 'none' : 'width 0.2s',
+          overflow: 'hidden',
+        }}
+      >
+        <Drawer
+          anchor="right"
+          variant="persistent"
+          sx={{
+            display: { xs: 'none', md: 'block' },
+            '& .MuiDrawer-paper': {
+              boxSizing: 'border-box',
+              width: rightPanelWidth,
+              borderLeft: 'none',
+              top: 0,
+              height: '100%',
+              bgcolor: 'var(--panel)',
+            },
+          }}
+          open={isRightPanelOpen}
+        >
+          <CodePanel />
+        </Drawer>
+      </Box>
+    </Box>
+  );
+}

frontend/src/components/SessionSidebar/SessionSidebar.tsx

@@ -0,0 +1,248 @@
+import { useCallback } from 'react';
+import {
+  Box,
+  List,
+  ListItem,
+  IconButton,
+  Typography,
+  Button,
+  Tooltip,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import UndoIcon from '@mui/icons-material/Undo';
+import { useSessionStore } from '@/store/sessionStore';
+import { useAgentStore } from '@/store/agentStore';
+
+interface SessionSidebarProps {
+  onClose?: () => void;
+}
+
+const StatusDiode = ({ connected }: { connected: boolean }) => (
+  <Box
+    sx={{
+      width: 10,
+      height: 10,
+      borderRadius: '50%',
+      bgcolor: connected ? 'var(--accent-green)' : 'var(--accent-red)', // Use green/red for connection status
+      boxShadow: connected ? '0 0 6px rgba(47, 204, 113, 0.4)' : 'none',
+      transition: 'all 0.3s ease',
+    }}
+  />
+);
+
+const RunningIndicator = () => (
+    <Box
+      className="running-indicator"
+      sx={{
+        width: 10,
+        height: 10,
+        borderRadius: '50%',
+        bgcolor: 'var(--accent-yellow)',
+        boxShadow: '0 0 6px rgba(199,165,0,0.18)',
+      }}
+    />
+);
+
+export default function SessionSidebar({ onClose }: SessionSidebarProps) {
+  const { sessions, activeSessionId, createSession, deleteSession, switchSession } =
+    useSessionStore();
+  const { clearMessages, isConnected, isProcessing, setPlan, setPanelContent } = useAgentStore();
+
+  const handleNewSession = useCallback(async () => {
+    try {
+      const response = await fetch('/api/session', { method: 'POST' });
+      const data = await response.json();
+      createSession(data.session_id);
+      // Clear plan and code panel for new session
+      setPlan([]);
+      setPanelContent(null);
+      onClose?.();
+    } catch (e) {
+      console.error('Failed to create session:', e);
+    }
+  }, [createSession, setPlan, setPanelContent, 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);
+      // Clear plan and code panel when switching sessions
+      setPlan([]);
+      setPanelContent(null);
+      onClose?.();
+    },
+    [switchSession, setPlan, setPanelContent, onClose]
+  );
+
+  const handleUndo = useCallback(async () => {
+    if (!activeSessionId) return;
+    try {
+      await fetch(`/api/undo/${activeSessionId}`, { method: 'POST' });
+    } catch (e) {
+      console.error('Undo failed:', e);
+    }
+  }, [activeSessionId]);
+
+  const formatTime = (dateString: string) => {
+    return new Date(dateString).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  return (
+    <Box className="sidebar" sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'var(--panel)' }}>
+      {/* Header - Aligned with AppLayout 60px */}
+      <Box sx={{ 
+        height: '60px', 
+        display: 'flex', 
+        alignItems: 'center', 
+        px: 2,
+        borderBottom: '1px solid rgba(255,255,255,0.03)'
+      }}>
+        <Box className="brand-logo" sx={{ display: 'flex' }}>
+            <img 
+              src="/hf-log-only-white.png" 
+              alt="HF Agent" 
+              style={{ height: '24px', objectFit: 'contain' }} 
+            />
+        </Box>
+      </Box>
+
+      {/* Content */}
+      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', p: 2, overflow: 'hidden' }}>
+        {/* System Info / Status */}
+        <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
+          <StatusDiode connected={isConnected} />
+          <Typography variant="caption" sx={{ color: 'var(--muted-text)', fontFamily: 'inherit' }}>
+            {isConnected ? 'System Online' : 'Disconnected'}
+          </Typography>
+        </Box>
+
+        <Button
+          fullWidth
+          className="create-session"
+          onClick={handleNewSession}
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: '10px',
+            padding: '10px 14px',
+            borderRadius: 'var(--radius-md)',
+            border: '1px solid rgba(255,255,255,0.06)',
+            bgcolor: 'transparent',
+            color: 'var(--text)',
+            fontWeight: 600,
+            textTransform: 'none',
+            mb: 3,
+            '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.02)',
+                border: '1px solid rgba(255,255,255,0.1)',
+            },
+            '&::before': {
+                content: '""',
+                width: '4px',
+                height: '20px',
+                background: 'linear-gradient(180deg, var(--accent-yellow), rgba(199,165,0,0.9))',
+                borderRadius: '4px',
+            }
+          }}
+        >
+          New Session
+        </Button>
+
+        {/* Session List */}
+        <Box sx={{ flex: 1, overflow: 'auto', mx: -1, px: 1 }}>
+            <List disablePadding sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {[...sessions].reverse().map((session, index) => {
+                const sessionNumber = sessions.length - index;
+                const isSelected = session.id === activeSessionId;
+                return (
+                <ListItem 
+                    key={session.id} 
+                    disablePadding 
+                    className="session-item"
+                    onClick={() => handleSelectSession(session.id)}
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px',
+                        padding: '10px',
+                        borderRadius: 'var(--radius-md)',
+                        bgcolor: isSelected ? 'rgba(255,255,255,0.05)' : 'transparent',
+                        cursor: 'pointer',
+                        transition: 'background 0.18s ease, transform 0.08s ease',
+                        '&:hover': {
+                            bgcolor: 'rgba(255,255,255,0.02)',
+                            transform: 'translateY(-1px)',
+                        },
+                        '& .delete-btn': {
+                            opacity: 0,
+                            transition: 'opacity 0.2s',
+                        },
+                        '&:hover .delete-btn': {
+                            opacity: 1,
+                        }
+                    }}
+                >
+                    <Box sx={{ flex: 1, overflow: 'hidden' }}>
+                        <Typography variant="body2" sx={{ fontWeight: 500, color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                            Session {String(sessionNumber).padStart(2, '0')}
+                        </Typography>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+                            {session.isActive && <RunningIndicator />}
+                            <Typography className="time" variant="caption" sx={{ fontSize: '12px', color: 'var(--muted-text)' }}>
+                                {formatTime(session.createdAt)}
+                            </Typography>
+                        </Box>
+                    </Box>
+                    
+                    <IconButton
+                        className="delete-btn"
+                        size="small"
+                        onClick={(e) => handleDeleteSession(session.id, e)}
+                        sx={{ color: 'var(--muted-text)', '&:hover': { color: 'var(--accent-red)' } }}
+                    >
+                        <DeleteIcon fontSize="small" />
+                    </IconButton>
+                </ListItem>
+                );
+            })}
+            </List>
+        </Box>
+      </Box>
+
+      {/* Footer */}
+      <Box sx={{ p: 2, borderTop: '1px solid rgba(255,255,255,0.03)' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Typography variant="caption" className="small-note" sx={{ fontSize: '12px', color: 'var(--muted-text)' }}>
+            {sessions.length} active
+            </Typography>
+            <Tooltip title="Undo last turn">
+            <span>
+                <IconButton
+                onClick={handleUndo}
+                disabled={!activeSessionId || isProcessing}
+                size="small"
+                sx={{ color: 'var(--muted-text)', '&:hover': { color: 'var(--text)' } }}
+                >
+                <UndoIcon fontSize="small" />
+                </IconButton>
+            </span>
+            </Tooltip>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

frontend/src/hooks/useAgentWebSocket.ts

@@ -0,0 +1,405 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useAgentStore } from '@/store/agentStore';
+import { useSessionStore } from '@/store/sessionStore';
+import { useLayoutStore } from '@/store/layoutStore';
+import type { AgentEvent } from '@/types/events';
+import type { Message, TraceLog } 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,
+    updateMessage,
+    setProcessing,
+    setConnected,
+    setPendingApprovals,
+    setError,
+    addTraceLog,
+    updateTraceLog,
+    clearTraceLogs,
+    setPanelContent,
+    setPanelTab,
+    setActivePanelTab,
+    clearPanelTabs,
+    setPlan,
+    setCurrentTurnMessageId,
+    updateCurrentTurnTrace,
+  } = useAgentStore();
+
+  const { setRightPanelOpen, setLeftSidebarOpen } = useLayoutStore();
+
+  const { setSessionActive } = useSessionStore();
+
+  const handleEvent = useCallback(
+    (event: AgentEvent) => {
+      if (!sessionId) return;
+
+      switch (event.event_type) {
+        case 'ready':
+          setConnected(true);
+          setProcessing(false);
+          setSessionActive(sessionId, true);
+          onReady?.();
+          break;
+
+        case 'processing':
+          setProcessing(true);
+          clearTraceLogs();
+          // Don't clear panel tabs here - they should persist during approval flow
+          // Tabs will be cleared when a new tool_call sets up new content
+          setCurrentTurnMessageId(null); // Start a new turn
+          break;
+
+        case 'assistant_message': {
+          const content = (event.data?.content as string) || '';
+          const currentTrace = useAgentStore.getState().traceLogs;
+          const currentTurnMsgId = useAgentStore.getState().currentTurnMessageId;
+
+          if (currentTurnMsgId) {
+            // Update existing message - append content and update trace
+            const messages = useAgentStore.getState().getMessages(sessionId);
+            const existingMsg = messages.find(m => m.id === currentTurnMsgId);
+
+            if (existingMsg) {
+              const newContent = existingMsg.content ? existingMsg.content + '\n\n' + content : content;
+              updateMessage(sessionId, currentTurnMsgId, {
+                content: newContent,
+                trace: currentTrace.length > 0 ? [...currentTrace] : undefined,
+              });
+            }
+          } else {
+            // Create new message
+            const messageId = `msg_${Date.now()}`;
+            const message: Message = {
+              id: messageId,
+              role: 'assistant',
+              content,
+              timestamp: new Date().toISOString(),
+              trace: currentTrace.length > 0 ? [...currentTrace] : undefined,
+            };
+            addMessage(sessionId, message);
+            setCurrentTurnMessageId(messageId);
+          }
+          break;
+        }
+
+        case 'tool_call': {
+          const toolName = (event.data?.tool as string) || 'unknown';
+          const args = (event.data?.arguments as Record<string, any>) || {};
+
+          // Don't display plan_tool in trace logs (it shows up elsewhere in the UI)
+          if (toolName !== 'plan_tool') {
+            const log: TraceLog = {
+              id: `tool_${Date.now()}`,
+              type: 'call',
+              text: `Agent is executing ${toolName}...`,
+              tool: toolName,
+              timestamp: new Date().toISOString(),
+              completed: false,
+            };
+            addTraceLog(log);
+            // Update the current turn message's trace in real-time
+            updateCurrentTurnTrace(sessionId);
+          }
+
+          // Auto-expand Right Panel for specific tools
+          if (toolName === 'hf_jobs' && (args.operation === 'run' || args.operation === 'scheduled run') && args.script) {
+            // Clear any existing tabs from previous jobs before setting new script
+            clearPanelTabs();
+            // Use tab system for jobs - add script tab immediately
+            setPanelTab({
+              id: 'script',
+              title: 'Script',
+              content: args.script,
+              language: 'python',
+              parameters: args
+            });
+            setActivePanelTab('script');
+            setRightPanelOpen(true);
+            setLeftSidebarOpen(false);
+          } else if (toolName === 'hf_repo_files' && args.operation === 'upload' && args.content) {
+            setPanelContent({
+              title: `File Upload: ${args.path || 'unnamed'}`,
+              content: args.content,
+              parameters: args,
+              language: args.path?.endsWith('.py') ? 'python' : undefined
+            });
+            setRightPanelOpen(true);
+            setLeftSidebarOpen(false);
+          }
+
+          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;
+
+          // Mark the corresponding trace log as completed
+          updateTraceLog(toolName, { completed: true });
+          // Update the current turn message's trace in real-time
+          updateCurrentTurnTrace(sessionId);
+
+          // Special handling for hf_jobs - update the approval message with output
+          if (toolName === 'hf_jobs') {
+            const messages = useAgentStore.getState().getMessages(sessionId);
+            const lastApprovalMsg = [...messages].reverse().find(m => m.approval);
+
+            if (lastApprovalMsg) {
+                const currentOutput = lastApprovalMsg.toolOutput || '';
+                const newOutput = currentOutput ? currentOutput + '\n\n' + output : output;
+
+                useAgentStore.getState().updateMessage(sessionId, lastApprovalMsg.id, {
+                    toolOutput: newOutput
+                });
+                console.log('Updated approval message with tool output:', toolName);
+            } else {
+                console.warn('Received hf_jobs output but no approval message found to update.');
+            }
+          }
+
+          // Don't create message bubbles for tool outputs - they only show in trace logs
+          console.log('Tool output:', toolName, success);
+          break;
+        }
+
+        case 'tool_log': {
+          const toolName = (event.data?.tool as string) || 'unknown';
+          const log = (event.data?.log as string) || '';
+
+          if (toolName === 'hf_jobs') {
+            const currentTabs = useAgentStore.getState().panelTabs;
+            const logsTab = currentTabs.find(t => t.id === 'logs');
+
+            // Append to existing logs tab or create new one
+            const newContent = logsTab
+              ? logsTab.content + '\n' + log
+              : '--- Job execution started ---\n' + log;
+
+            setPanelTab({
+              id: 'logs',
+              title: 'Logs',
+              content: newContent,
+              language: 'text'
+            });
+
+            // Auto-switch to logs tab when logs start streaming
+            setActivePanelTab('logs');
+
+            if (!useLayoutStore.getState().isRightPanelOpen) {
+              setRightPanelOpen(true);
+            }
+          }
+          break;
+        }
+
+        case 'plan_update': {
+          const plan = (event.data?.plan as any[]) || [];
+          setPlan(plan);
+          if (!useLayoutStore.getState().isRightPanelOpen) {
+            setRightPanelOpen(true);
+          }
+          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;
+
+          // Create a persistent message for the approval request
+          const message: Message = {
+            id: `msg_approval_${Date.now()}`,
+            role: 'assistant',
+            content: '', // Content is handled by the approval UI
+            timestamp: new Date().toISOString(),
+            approval: {
+                status: 'pending',
+                batch: { tools, count }
+            }
+          };
+          addMessage(sessionId, message);
+
+          // Clear currentTurnMessageId so subsequent assistant_message events create a new message below the approval
+          setCurrentTurnMessageId(null);
+
+          // We don't set pendingApprovals in the global store anymore as the message handles the UI
+          setPendingApprovals(null);
+          setProcessing(false);
+          break;
+        }
+
+        case 'turn_complete':
+          setProcessing(false);
+          setCurrentTurnMessageId(null); // Clear the current turn
+          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);
+      }
+    },
+    // Zustand setters are stable, so we don't need them in deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sessionId, onReady, onError]
+  );
+
+  const connect = useCallback(() => {
+    if (!sessionId) return;
+    
+    // Don't connect if already connected or connecting
+    if (wsRef.current?.readyState === WebSocket.OPEN || 
+        wsRef.current?.readyState === WebSocket.CONNECTING) {
+      return;
+    }
+
+    // Connect directly to backend (Vite doesn't proxy WebSockets)
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    // In development, connect directly to backend port 7860
+    // In production, use the same host
+    const isDev = import.meta.env.DEV;
+    const host = isDev ? '127.0.0.1:7860' : window.location.host;
+    const wsUrl = `${protocol}//${host}/api/ws/${sessionId}`;
+
+    console.log('Connecting to WebSocket:', wsUrl);
+    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 = (event) => {
+      console.log('WebSocket closed', event.code, event.reason);
+      setConnected(false);
+
+      // Only reconnect if it wasn't a normal closure and session still exists
+      if (event.code !== 1000 && sessionId) {
+        // 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]);
+
+  const disconnect = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setConnected(false);
+  }, []);
+
+  const sendPing = useCallback(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'ping' }));
+    }
+  }, []);
+
+  // Connect when sessionId changes (with a small delay to ensure session is ready)
+  useEffect(() => {
+    if (!sessionId) {
+      disconnect();
+      return;
+    }
+
+    // Small delay to ensure session is fully created on backend
+    const timeoutId = setTimeout(() => {
+      connect();
+    }, 100);
+
+    return () => {
+      clearTimeout(timeoutId);
+      disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId]);
+
+  // 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,209 @@
+import { create } from 'zustand';
+import type { Message, ApprovalBatch, User, TraceLog } from '@/types/agent';
+
+export interface PlanItem {
+  id: string;
+  content: string;
+  status: 'pending' | 'in_progress' | 'completed';
+}
+
+interface PanelTab {
+  id: string;
+  title: string;
+  content: string;
+  language?: string;
+  parameters?: any;
+}
+
+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;
+  traceLogs: TraceLog[];
+  panelContent: { title: string; content: string; language?: string; parameters?: any } | null;
+  panelTabs: PanelTab[];
+  activePanelTab: string | null;
+  plan: PlanItem[];
+  currentTurnMessageId: string | null; // Track the current turn's assistant message
+
+  // Actions
+  addMessage: (sessionId: string, message: Message) => void;
+  updateMessage: (sessionId: string, messageId: string, updates: Partial<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[];
+  addTraceLog: (log: TraceLog) => void;
+  updateTraceLog: (toolName: string, updates: Partial<TraceLog>) => void;
+  clearTraceLogs: () => void;
+  setPanelContent: (content: { title: string; content: string; language?: string; parameters?: any } | null) => void;
+  setPanelTab: (tab: PanelTab) => void;
+  setActivePanelTab: (tabId: string) => void;
+  clearPanelTabs: () => void;
+  setPlan: (plan: PlanItem[]) => void;
+  setCurrentTurnMessageId: (id: string | null) => void;
+  updateCurrentTurnTrace: (sessionId: string) => void;
+}
+
+export const useAgentStore = create<AgentStore>((set, get) => ({
+  messagesBySession: {},
+  isProcessing: false,
+  isConnected: false,
+  pendingApprovals: null,
+  user: null,
+  error: null,
+  traceLogs: [],
+  panelContent: null,
+  panelTabs: [],
+  activePanelTab: null,
+  plan: [],
+  currentTurnMessageId: null,
+
+  addMessage: (sessionId: string, message: Message) => {
+    set((state) => {
+      const currentMessages = state.messagesBySession[sessionId] || [];
+      return {
+        messagesBySession: {
+          ...state.messagesBySession,
+          [sessionId]: [...currentMessages, message],
+        },
+      };
+    });
+  },
+
+  updateMessage: (sessionId: string, messageId: string, updates: Partial<Message>) => {
+    set((state) => {
+      const currentMessages = state.messagesBySession[sessionId] || [];
+      const updatedMessages = currentMessages.map((msg) =>
+        msg.id === messageId ? { ...msg, ...updates } : msg
+      );
+      return {
+        messagesBySession: {
+          ...state.messagesBySession,
+          [sessionId]: updatedMessages,
+        },
+      };
+    });
+  },
+
+  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] || [];
+  },
+
+  addTraceLog: (log: TraceLog) => {
+    set((state) => ({
+      traceLogs: [...state.traceLogs, log],
+    }));
+  },
+
+  updateTraceLog: (toolName: string, updates: Partial<TraceLog>) => {
+    set((state) => {
+      // Find the last trace log with this tool name and update it
+      const traceLogs = [...state.traceLogs];
+      for (let i = traceLogs.length - 1; i >= 0; i--) {
+        if (traceLogs[i].tool === toolName && traceLogs[i].type === 'call') {
+          traceLogs[i] = { ...traceLogs[i], ...updates };
+          break;
+        }
+      }
+      return { traceLogs };
+    });
+  },
+
+  clearTraceLogs: () => {
+    set({ traceLogs: [] });
+  },
+
+  setPanelContent: (content) => {
+    set({ panelContent: content });
+  },
+
+  setPanelTab: (tab: PanelTab) => {
+    set((state) => {
+      const existingIndex = state.panelTabs.findIndex(t => t.id === tab.id);
+      let newTabs: PanelTab[];
+      if (existingIndex >= 0) {
+        // Update existing tab
+        newTabs = [...state.panelTabs];
+        newTabs[existingIndex] = tab;
+      } else {
+        // Add new tab
+        newTabs = [...state.panelTabs, tab];
+      }
+      return {
+        panelTabs: newTabs,
+        activePanelTab: state.activePanelTab || tab.id, // Auto-select first tab
+      };
+    });
+  },
+
+  setActivePanelTab: (tabId: string) => {
+    set({ activePanelTab: tabId });
+  },
+
+  clearPanelTabs: () => {
+    set({ panelTabs: [], activePanelTab: null });
+  },
+
+  setPlan: (plan: PlanItem[]) => {
+    set({ plan });
+  },
+
+  setCurrentTurnMessageId: (id: string | null) => {
+    set({ currentTurnMessageId: id });
+  },
+
+  updateCurrentTurnTrace: (sessionId: string) => {
+    const state = get();
+    if (state.currentTurnMessageId) {
+      const currentMessages = state.messagesBySession[sessionId] || [];
+      const updatedMessages = currentMessages.map((msg) =>
+        msg.id === state.currentTurnMessageId
+          ? { ...msg, trace: state.traceLogs.length > 0 ? [...state.traceLogs] : undefined }
+          : msg
+      );
+      set({
+        messagesBySession: {
+          ...state.messagesBySession,
+          [sessionId]: updatedMessages,
+        },
+      });
+    }
+  },
+}));

frontend/src/store/layoutStore.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+interface LayoutStore {
+  isLeftSidebarOpen: boolean;
+  isRightPanelOpen: boolean;
+  rightPanelWidth: number;
+  setLeftSidebarOpen: (open: boolean) => void;
+  setRightPanelOpen: (open: boolean) => void;
+  setRightPanelWidth: (width: number) => void;
+  toggleLeftSidebar: () => void;
+  toggleRightPanel: () => void;
+}
+
+export const useLayoutStore = create<LayoutStore>((set) => ({
+  isLeftSidebarOpen: true,
+  isRightPanelOpen: false,
+  rightPanelWidth: 450,
+  setLeftSidebarOpen: (open) => set({ isLeftSidebarOpen: open }),
+  setRightPanelOpen: (open) => set({ isRightPanelOpen: open }),
+  setRightPanelWidth: (width) => set({ rightPanelWidth: width }),
+  toggleLeftSidebar: () => set((state) => ({ isLeftSidebarOpen: !state.isLeftSidebarOpen })),
+  toggleRightPanel: () => set((state) => ({ isRightPanelOpen: !state.isRightPanelOpen })),
+}));

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,158 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#C7A500', // --accent-yellow
+    },
+    secondary: {
+      main: '#FF9D00',
+    },
+    background: {
+      default: '#0B0D10', // --bg
+      paper: '#0F1316',   // --panel
+    },
+    text: {
+      primary: '#E6EEF8', // --text
+      secondary: '#98A0AA', // --muted-text
+    },
+    divider: 'rgba(255,255,255,0.03)',
+    success: {
+      main: '#2FCC71', // --accent-green
+    },
+    error: {
+      main: '#E05A4F', // --accent-red
+    },
+    warning: {
+      main: '#C7A500',
+    },
+    info: {
+      main: '#58A6FF',
+    },
+  },
+  typography: {
+    fontFamily: 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
+    fontSize: 15,
+    h1: { fontWeight: 600, color: '#E6EEF8' },
+    h2: { fontWeight: 600, color: '#E6EEF8' },
+    h3: { fontWeight: 600, color: '#E6EEF8' },
+    h4: { fontWeight: 600, color: '#E6EEF8' },
+    h5: { fontWeight: 600, color: '#E6EEF8' },
+    h6: { fontWeight: 600, color: '#E6EEF8' },
+    body1: { fontSize: '15px', color: '#E6EEF8' },
+    body2: { fontSize: '0.875rem', color: '#98A0AA' },
+    button: {
+      fontFamily: 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
+      textTransform: 'none',
+      fontWeight: 600,
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        ':root': {
+          '--bg': '#0B0D10',
+          '--panel': '#0F1316',
+          '--surface': '#121416',
+          '--text': '#E6EEF8',
+          '--muted-text': '#98A0AA',
+          '--accent-yellow': '#C7A500',
+          '--accent-yellow-weak': 'rgba(199,165,0,0.08)',
+          '--accent-green': '#2FCC71',
+          '--accent-red': '#E05A4F',
+          '--shadow-1': '0 6px 18px rgba(2,6,12,0.55)',
+          '--radius-lg': '20px',
+          '--radius-md': '12px',
+          '--focus': '0 0 0 3px rgba(199,165,0,0.12)',
+        },
+        body: {
+          background: 'linear-gradient(180deg, var(--bg), #090B0D)',
+          color: 'var(--text)',
+          scrollbarWidth: 'thin',
+          '&::-webkit-scrollbar': {
+            width: '8px',
+            height: '8px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: '#30363D',
+            borderRadius: '2px',
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: 'transparent',
+          },
+        },
+        'code, pre': {
+          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace',
+        },
+        '.brand-logo': {
+          position: 'relative',
+          padding: '6px',
+          borderRadius: '8px',
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            inset: '-6px',
+            borderRadius: '10px',
+            background: 'var(--accent-yellow-weak)',
+            zIndex: -1,
+            pointerEvents: 'none',
+          },
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: '10px',
+          fontWeight: 600,
+          transition: 'transform 0.06s ease, background 0.12s ease, box-shadow 0.12s ease',
+          '&:hover': {
+            transform: 'translateY(-1px)',
+          },
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+          backgroundColor: 'transparent', // Default to transparent for gradients
+        },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: 'var(--panel)',
+          borderRight: '1px solid rgba(255,255,255,0.03)',
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: 'var(--radius-md)',
+            '& fieldset': {
+              borderColor: 'rgba(255,255,255,0.03)',
+            },
+            '&:hover fieldset': {
+              borderColor: 'rgba(255,255,255,0.1)',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: 'var(--accent-yellow)',
+              borderWidth: '1px',
+              boxShadow: 'var(--focus)',
+            },
+          },
+        },
+      },
+    },
+  },
+  shape: {
+    borderRadius: 12,
+  },
+});
+
+export default theme;

frontend/src/types/agent.ts

@@ -0,0 +1,65 @@
+/**
+ * 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;
+  tool_call_id?: string;
+  trace?: TraceLog[];
+  approval?: {
+    status: 'pending' | 'approved' | 'rejected';
+    batch: ApprovalBatch;
+    decisions?: ToolApproval[];
+  };
+  toolOutput?: string;
+}
+
+export interface ToolCall {
+  id: string;
+  tool: string;
+  arguments: Record<string, unknown>;
+  status: 'pending' | 'running' | 'completed' | 'failed';
+  output?: string;
+}
+
+export interface ToolApproval {
+  tool_call_id: string;
+  approved: boolean;
+  feedback?: string | null;
+}
+
+export interface ApprovalBatch {
+  tools: Array<{
+    tool: string;
+    arguments: Record<string, unknown>;
+    tool_call_id: string;
+  }>;
+  count: number;
+}
+
+export interface TraceLog {
+  id: string;
+  type: 'call' | 'output';
+  text: string;
+  tool: string;
+  timestamp: string;
+  completed?: boolean;
+}
+
+export interface User {
+  authenticated: boolean;
+  username?: string;
+  name?: string;
+  picture?: string;
+}

frontend/src/types/events.ts

@@ -0,0 +1,80 @@
+/**
+ * Event types from the agent backend
+ */
+
+export type EventType =
+  | 'ready'
+  | 'processing'
+  | 'assistant_message'
+  | 'tool_call'
+  | 'tool_output'
+  | 'tool_log'
+  | 'approval_required'
+  | 'turn_complete'
+  | 'compacted'
+  | 'error'
+  | 'shutdown'
+  | 'interrupted'
+  | 'undo_complete'
+  | 'plan_update';
+
+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 ToolLogEventData {
+  tool: string;
+  log: string;
+}
+
+export interface PlanUpdateEventData {
+  plan: Array<{ id: string; content: string; status: 'pending' | 'in_progress' | 'completed' }>;
+}
+
+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/utils/logProcessor.ts

@@ -0,0 +1,81 @@
+export function processLogs(logs: string): string {
+  if (!logs) return '';
+
+  // 1. Handle \r (Carriage Return) for progress bars
+  const rawLines = logs.split('\n');
+  const processedLines: string[] = [];
+  
+  for (const rawLine of rawLines) {
+    // Remove potential trailing \r from \r\n split
+    let line = rawLine;
+    if (line.endsWith('\r')) {
+        line = line.slice(0, -1);
+    }
+
+    if (line.includes('\r')) {
+      const segments = line.split('\r');
+      // Find the last non-empty segment
+      // Iterate backwards
+      let found = false;
+      for (let i = segments.length - 1; i >= 0; i--) {
+        if (segments[i].length > 0) {
+            processedLines.push(segments[i]);
+            found = true;
+            break;
+        }
+      }
+      if (!found) {
+        // If all segments were empty, push empty string (or skip?)
+        processedLines.push("");
+      }
+    } else {
+      processedLines.push(line);
+    }
+  }
+
+  // 2. Compaction (Downloading & TQDM)
+  const finalLines: string[] = [];
+  
+  // Regex for "Downloading <package>" or "Downloaded <package>"
+  const downloadPattern = /^(Downloading|Downloaded)\s+/;
+  
+  // Regex for TQDM-like progress bars
+  // Examples:
+  // "100%|██████████| 10/10 [00:01<00:00,  8.00it/s]"
+  // " 20%|##        | ..."
+  // "Downloading:  10%"
+  const tqdmPattern = /^\s*\d+%\|.*\||^\s*\d+%\s+/;
+
+  for (let i = 0; i < processedLines.length; i++) {
+    const line = processedLines[i];
+    
+    // Check for Download pattern
+    if (downloadPattern.test(line)) {
+      // Look ahead for consecutive download lines
+      let nextIsDownload = false;
+      if (i + 1 < processedLines.length) {
+        nextIsDownload = downloadPattern.test(processedLines[i + 1]);
+      }
+      
+      if (nextIsDownload) {
+        continue; // Skip this line
+      }
+    } 
+    // Check for TQDM pattern
+    else if (tqdmPattern.test(line)) {
+        // Look ahead for consecutive TQDM lines
+        let nextIsTqdm = false;
+        if (i + 1 < processedLines.length) {
+            nextIsTqdm = tqdmPattern.test(processedLines[i + 1]);
+        }
+        
+        if (nextIsTqdm) {
+            continue; // Skip this line
+        }
+    }
+    
+    finalLines.push(line);
+  }
+
+  return finalLines.join('\n');
+}

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:7860',
+        changeOrigin: true,
+      },
+      '/auth': {
+        target: 'http://localhost:7860',
+        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

uv.lock

@@ -169,6 +169,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/fb/76/641ae371508676492379f16e2fa48f4e2c11741bd63c48be4b12a6b09cba/aiosignal-1.4.0-py3-none-any.whl", hash = "sha256:053243f8b92b990551949e63930a839ff0cf0b0ebbe0597b0f3fb19e1a0fe82e", size = 7490, upload-time = "2025-07-03T22:54:42.156Z" },
 ]
 
+[[package]]
+name = "annotated-doc"
+version = "0.0.4"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/57/ba/046ceea27344560984e26a590f90bc7f4a75b06701f653222458922b558c/annotated_doc-0.0.4.tar.gz", hash = "sha256:fbcda96e87e9c92ad167c2e53839e57503ecfda18804ea28102353485033faa4", size = 7288, upload-time = "2025-11-10T22:07:42.062Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/1e/d3/26bf1008eb3d2daa8ef4cacc7f3bfdc11818d111f7e2d0201bc6e3b49d45/annotated_doc-0.0.4-py3-none-any.whl", hash = "sha256:571ac1dc6991c450b25a9c2d84a3705e2ae7a53467b5d111c24fa8baabbed320", size = 5303, upload-time = "2025-11-10T22:07:40.673Z" },
+]
+
 [[package]]
 name = "annotated-types"
 version = "0.7.0"
@@ -638,6 +647,21 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/36/f4/c6e662dade71f56cd2f3735141b265c3c79293c109549c1e6933b0651ffc/exceptiongroup-1.3.0-py3-none-any.whl", hash = "sha256:4d111e6e0c13d0644cad6ddaa7ed0261a0b36971f6d23e7ec9b4b9097da78a10", size = 16674, upload-time = "2025-05-10T17:42:49.33Z" },
 ]
 
+[[package]]
+name = "fastapi"
+version = "0.128.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "annotated-doc" },
+    { name = "pydantic" },
+    { name = "starlette" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/52/08/8c8508db6c7b9aae8f7175046af41baad690771c9bcde676419965e338c7/fastapi-0.128.0.tar.gz", hash = "sha256:1cc179e1cef10a6be60ffe429f79b829dce99d8de32d7acb7e6c8dfdf7f2645a", size = 365682, upload-time = "2025-12-27T15:21:13.714Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/5c/05/5cbb59154b093548acd0f4c7c474a118eda06da25aa75c616b72d8fcd92a/fastapi-0.128.0-py3-none-any.whl", hash = "sha256:aebd93f9716ee3b4f4fcfe13ffb7cf308d99c9f3ab5622d8877441072561582d", size = 103094, upload-time = "2025-12-27T15:21:12.154Z" },
+]
+
 [[package]]
 name = "fastjsonschema"
 version = "2.21.2"
@@ -910,7 +934,9 @@ dependencies = [
 [package.optional-dependencies]
 agent = [
     { name = "datasets" },
+    { name = "fastapi" },
     { name = "fastmcp" },
+    { name = "httpx" },
     { name = "huggingface-hub" },
     { name = "litellm" },
     { name = "lmnr" },
@@ -919,10 +945,15 @@ agent = [
     { name = "prompt-toolkit" },
     { name = "requests" },
     { name = "thefuzz" },
+    { name = "uvicorn", extra = ["standard"] },
+    { name = "websockets" },
+    { name = "whoosh" },
 ]
 all = [
     { name = "datasets" },
+    { name = "fastapi" },
     { name = "fastmcp" },
+    { name = "httpx" },
     { name = "huggingface-hub" },
     { name = "inspect-ai" },
     { name = "litellm" },
@@ -935,6 +966,9 @@ all = [
     { name = "requests" },
     { name = "tenacity" },
     { name = "thefuzz" },
+    { name = "uvicorn", extra = ["standard"] },
+    { name = "websockets" },
+    { name = "whoosh" },
 ]
 dev = [
     { name = "pytest" },
@@ -951,8 +985,10 @@ requires-dist = [
     { name = "datasets", specifier = ">=4.4.1" },
     { name = "datasets", marker = "extra == 'agent'", specifier = ">=4.3.0" },
     { name = "datasets", marker = "extra == 'eval'", specifier = ">=4.3.0" },
+    { name = "fastapi", marker = "extra == 'agent'", specifier = ">=0.115.0" },
     { name = "fastmcp", marker = "extra == 'agent'", specifier = ">=2.4.0" },
     { name = "hf-agent", extras = ["agent", "eval", "dev"], marker = "extra == 'all'" },
+    { name = "httpx", marker = "extra == 'agent'", specifier = ">=0.27.0" },
     { name = "huggingface-hub", marker = "extra == 'agent'", specifier = ">=1.0.1" },
     { name = "inspect-ai", marker = "extra == 'eval'", specifier = ">=0.3.149" },
     { name = "litellm", marker = "extra == 'agent'", specifier = ">=1.0.0" },
@@ -967,6 +1003,9 @@ requires-dist = [
     { name = "requests", marker = "extra == 'agent'", specifier = ">=2.32.5" },
     { name = "tenacity", marker = "extra == 'eval'", specifier = ">=8.0.0" },
     { name = "thefuzz", marker = "extra == 'agent'", specifier = ">=0.22.1" },
+    { name = "uvicorn", extras = ["standard"], marker = "extra == 'agent'", specifier = ">=0.32.0" },
+    { name = "websockets", marker = "extra == 'agent'", specifier = ">=13.0" },
+    { name = "whoosh", marker = "extra == 'agent'", specifier = ">=2.7.4" },
 ]
 provides-extras = ["agent", "eval", "dev", "all"]
 
@@ -1012,6 +1051,35 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/7e/f5/f66802a942d491edb555dd61e3a9961140fd64c90bce1eafd741609d334d/httpcore-1.0.9-py3-none-any.whl", hash = "sha256:2d400746a40668fc9dec9810239072b40b4484b640a8c38fd654a024c7a1bf55", size = 78784, upload-time = "2025-04-24T22:06:20.566Z" },
 ]
 
+[[package]]
+name = "httptools"
+version = "0.7.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/b5/46/120a669232c7bdedb9d52d4aeae7e6c7dfe151e99dc70802e2fc7a5e1993/httptools-0.7.1.tar.gz", hash = "sha256:abd72556974f8e7c74a259655924a717a2365b236c882c3f6f8a45fe94703ac9", size = 258961, upload-time = "2025-10-10T03:55:08.559Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/53/7f/403e5d787dc4942316e515e949b0c8a013d84078a915910e9f391ba9b3ed/httptools-0.7.1-cp312-cp312-macosx_10_13_universal2.whl", hash = "sha256:38e0c83a2ea9746ebbd643bdfb521b9aa4a91703e2cd705c20443405d2fd16a5", size = 206280, upload-time = "2025-10-10T03:54:39.274Z" },
+    { url = "https://files.pythonhosted.org/packages/2a/0d/7f3fd28e2ce311ccc998c388dd1c53b18120fda3b70ebb022b135dc9839b/httptools-0.7.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:f25bbaf1235e27704f1a7b86cd3304eabc04f569c828101d94a0e605ef7205a5", size = 110004, upload-time = "2025-10-10T03:54:40.403Z" },
+    { url = "https://files.pythonhosted.org/packages/84/a6/b3965e1e146ef5762870bbe76117876ceba51a201e18cc31f5703e454596/httptools-0.7.1-cp312-cp312-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:2c15f37ef679ab9ecc06bfc4e6e8628c32a8e4b305459de7cf6785acd57e4d03", size = 517655, upload-time = "2025-10-10T03:54:41.347Z" },
+    { url = "https://files.pythonhosted.org/packages/11/7d/71fee6f1844e6fa378f2eddde6c3e41ce3a1fb4b2d81118dd544e3441ec0/httptools-0.7.1-cp312-cp312-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:7fe6e96090df46b36ccfaf746f03034e5ab723162bc51b0a4cf58305324036f2", size = 511440, upload-time = "2025-10-10T03:54:42.452Z" },
+    { url = "https://files.pythonhosted.org/packages/22/a5/079d216712a4f3ffa24af4a0381b108aa9c45b7a5cc6eb141f81726b1823/httptools-0.7.1-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:f72fdbae2dbc6e68b8239defb48e6a5937b12218e6ffc2c7846cc37befa84362", size = 495186, upload-time = "2025-10-10T03:54:43.937Z" },
+    { url = "https://files.pythonhosted.org/packages/e9/9e/025ad7b65278745dee3bd0ebf9314934c4592560878308a6121f7f812084/httptools-0.7.1-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:e99c7b90a29fd82fea9ef57943d501a16f3404d7b9ee81799d41639bdaae412c", size = 499192, upload-time = "2025-10-10T03:54:45.003Z" },
+    { url = "https://files.pythonhosted.org/packages/6d/de/40a8f202b987d43afc4d54689600ff03ce65680ede2f31df348d7f368b8f/httptools-0.7.1-cp312-cp312-win_amd64.whl", hash = "sha256:3e14f530fefa7499334a79b0cf7e7cd2992870eb893526fb097d51b4f2d0f321", size = 86694, upload-time = "2025-10-10T03:54:45.923Z" },
+    { url = "https://files.pythonhosted.org/packages/09/8f/c77b1fcbfd262d422f12da02feb0d218fa228d52485b77b953832105bb90/httptools-0.7.1-cp313-cp313-macosx_10_13_universal2.whl", hash = "sha256:6babce6cfa2a99545c60bfef8bee0cc0545413cb0018f617c8059a30ad985de3", size = 202889, upload-time = "2025-10-10T03:54:47.089Z" },
+    { url = "https://files.pythonhosted.org/packages/0a/1a/22887f53602feaa066354867bc49a68fc295c2293433177ee90870a7d517/httptools-0.7.1-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:601b7628de7504077dd3dcb3791c6b8694bbd967148a6d1f01806509254fb1ca", size = 108180, upload-time = "2025-10-10T03:54:48.052Z" },
+    { url = "https://files.pythonhosted.org/packages/32/6a/6aaa91937f0010d288d3d124ca2946d48d60c3a5ee7ca62afe870e3ea011/httptools-0.7.1-cp313-cp313-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:04c6c0e6c5fb0739c5b8a9eb046d298650a0ff38cf42537fc372b28dc7e4472c", size = 478596, upload-time = "2025-10-10T03:54:48.919Z" },
+    { url = "https://files.pythonhosted.org/packages/6d/70/023d7ce117993107be88d2cbca566a7c1323ccbaf0af7eabf2064fe356f6/httptools-0.7.1-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:69d4f9705c405ae3ee83d6a12283dc9feba8cc6aaec671b412917e644ab4fa66", size = 473268, upload-time = "2025-10-10T03:54:49.993Z" },
+    { url = "https://files.pythonhosted.org/packages/32/4d/9dd616c38da088e3f436e9a616e1d0cc66544b8cdac405cc4e81c8679fc7/httptools-0.7.1-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:44c8f4347d4b31269c8a9205d8a5ee2df5322b09bbbd30f8f862185bb6b05346", size = 455517, upload-time = "2025-10-10T03:54:51.066Z" },
+    { url = "https://files.pythonhosted.org/packages/1d/3a/a6c595c310b7df958e739aae88724e24f9246a514d909547778d776799be/httptools-0.7.1-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:465275d76db4d554918aba40bf1cbebe324670f3dfc979eaffaa5d108e2ed650", size = 458337, upload-time = "2025-10-10T03:54:52.196Z" },
+    { url = "https://files.pythonhosted.org/packages/fd/82/88e8d6d2c51edc1cc391b6e044c6c435b6aebe97b1abc33db1b0b24cd582/httptools-0.7.1-cp313-cp313-win_amd64.whl", hash = "sha256:322d00c2068d125bd570f7bf78b2d367dad02b919d8581d7476d8b75b294e3e6", size = 85743, upload-time = "2025-10-10T03:54:53.448Z" },
+    { url = "https://files.pythonhosted.org/packages/34/50/9d095fcbb6de2d523e027a2f304d4551855c2f46e0b82befd718b8b20056/httptools-0.7.1-cp314-cp314-macosx_10_13_universal2.whl", hash = "sha256:c08fe65728b8d70b6923ce31e3956f859d5e1e8548e6f22ec520a962c6757270", size = 203619, upload-time = "2025-10-10T03:54:54.321Z" },
+    { url = "https://files.pythonhosted.org/packages/07/f0/89720dc5139ae54b03f861b5e2c55a37dba9a5da7d51e1e824a1f343627f/httptools-0.7.1-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:7aea2e3c3953521c3c51106ee11487a910d45586e351202474d45472db7d72d3", size = 108714, upload-time = "2025-10-10T03:54:55.163Z" },
+    { url = "https://files.pythonhosted.org/packages/b3/cb/eea88506f191fb552c11787c23f9a405f4c7b0c5799bf73f2249cd4f5228/httptools-0.7.1-cp314-cp314-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:0e68b8582f4ea9166be62926077a3334064d422cf08ab87d8b74664f8e9058e1", size = 472909, upload-time = "2025-10-10T03:54:56.056Z" },
+    { url = "https://files.pythonhosted.org/packages/e0/4a/a548bdfae6369c0d078bab5769f7b66f17f1bfaa6fa28f81d6be6959066b/httptools-0.7.1-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:df091cf961a3be783d6aebae963cc9b71e00d57fa6f149025075217bc6a55a7b", size = 470831, upload-time = "2025-10-10T03:54:57.219Z" },
+    { url = "https://files.pythonhosted.org/packages/4d/31/14df99e1c43bd132eec921c2e7e11cda7852f65619bc0fc5bdc2d0cb126c/httptools-0.7.1-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:f084813239e1eb403ddacd06a30de3d3e09a9b76e7894dcda2b22f8a726e9c60", size = 452631, upload-time = "2025-10-10T03:54:58.219Z" },
+    { url = "https://files.pythonhosted.org/packages/22/d2/b7e131f7be8d854d48cb6d048113c30f9a46dca0c9a8b08fcb3fcd588cdc/httptools-0.7.1-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:7347714368fb2b335e9063bc2b96f2f87a9ceffcd9758ac295f8bbcd3ffbc0ca", size = 452910, upload-time = "2025-10-10T03:54:59.366Z" },
+    { url = "https://files.pythonhosted.org/packages/53/cf/878f3b91e4e6e011eff6d1fa9ca39f7eb17d19c9d7971b04873734112f30/httptools-0.7.1-cp314-cp314-win_amd64.whl", hash = "sha256:cfabda2a5bb85aa2a904ce06d974a3f30fb36cc63d7feaddec05d2050acede96", size = 88205, upload-time = "2025-10-10T03:55:00.389Z" },
+]
+
 [[package]]
 name = "httpx"
 version = "0.28.1"
@@ -3525,6 +3593,119 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/ee/d9/d88e73ca598f4f6ff671fb5fde8a32925c2e08a637303a1d12883c7305fa/uvicorn-0.38.0-py3-none-any.whl", hash = "sha256:48c0afd214ceb59340075b4a052ea1ee91c16fbc2a9b1469cca0e54566977b02", size = 68109, upload-time = "2025-10-18T13:46:42.958Z" },
 ]
 
+[package.optional-dependencies]
+standard = [
+    { name = "colorama", marker = "sys_platform == 'win32'" },
+    { name = "httptools" },
+    { name = "python-dotenv" },
+    { name = "pyyaml" },
+    { name = "uvloop", marker = "platform_python_implementation != 'PyPy' and sys_platform != 'cygwin' and sys_platform != 'win32'" },
+    { name = "watchfiles" },
+    { name = "websockets" },
+]
+
+[[package]]
+name = "uvloop"
+version = "0.22.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/06/f0/18d39dbd1971d6d62c4629cc7fa67f74821b0dc1f5a77af43719de7936a7/uvloop-0.22.1.tar.gz", hash = "sha256:6c84bae345b9147082b17371e3dd5d42775bddce91f885499017f4607fdaf39f", size = 2443250, upload-time = "2025-10-16T22:17:19.342Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/3d/ff/7f72e8170be527b4977b033239a83a68d5c881cc4775fca255c677f7ac5d/uvloop-0.22.1-cp312-cp312-macosx_10_13_universal2.whl", hash = "sha256:fe94b4564e865d968414598eea1a6de60adba0c040ba4ed05ac1300de402cd42", size = 1359936, upload-time = "2025-10-16T22:16:29.436Z" },
+    { url = "https://files.pythonhosted.org/packages/c3/c6/e5d433f88fd54d81ef4be58b2b7b0cea13c442454a1db703a1eea0db1a59/uvloop-0.22.1-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:51eb9bd88391483410daad430813d982010f9c9c89512321f5b60e2cddbdddd6", size = 752769, upload-time = "2025-10-16T22:16:30.493Z" },
+    { url = "https://files.pythonhosted.org/packages/24/68/a6ac446820273e71aa762fa21cdcc09861edd3536ff47c5cd3b7afb10eeb/uvloop-0.22.1-cp312-cp312-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:700e674a166ca5778255e0e1dc4e9d79ab2acc57b9171b79e65feba7184b3370", size = 4317413, upload-time = "2025-10-16T22:16:31.644Z" },
+    { url = "https://files.pythonhosted.org/packages/5f/6f/e62b4dfc7ad6518e7eff2516f680d02a0f6eb62c0c212e152ca708a0085e/uvloop-0.22.1-cp312-cp312-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:7b5b1ac819a3f946d3b2ee07f09149578ae76066d70b44df3fa990add49a82e4", size = 4426307, upload-time = "2025-10-16T22:16:32.917Z" },
+    { url = "https://files.pythonhosted.org/packages/90/60/97362554ac21e20e81bcef1150cb2a7e4ffdaf8ea1e5b2e8bf7a053caa18/uvloop-0.22.1-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:e047cc068570bac9866237739607d1313b9253c3051ad84738cbb095be0537b2", size = 4131970, upload-time = "2025-10-16T22:16:34.015Z" },
+    { url = "https://files.pythonhosted.org/packages/99/39/6b3f7d234ba3964c428a6e40006340f53ba37993f46ed6e111c6e9141d18/uvloop-0.22.1-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:512fec6815e2dd45161054592441ef76c830eddaad55c8aa30952e6fe1ed07c0", size = 4296343, upload-time = "2025-10-16T22:16:35.149Z" },
+    { url = "https://files.pythonhosted.org/packages/89/8c/182a2a593195bfd39842ea68ebc084e20c850806117213f5a299dfc513d9/uvloop-0.22.1-cp313-cp313-macosx_10_13_universal2.whl", hash = "sha256:561577354eb94200d75aca23fbde86ee11be36b00e52a4eaf8f50fb0c86b7705", size = 1358611, upload-time = "2025-10-16T22:16:36.833Z" },
+    { url = "https://files.pythonhosted.org/packages/d2/14/e301ee96a6dc95224b6f1162cd3312f6d1217be3907b79173b06785f2fe7/uvloop-0.22.1-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:1cdf5192ab3e674ca26da2eada35b288d2fa49fdd0f357a19f0e7c4e7d5077c8", size = 751811, upload-time = "2025-10-16T22:16:38.275Z" },
+    { url = "https://files.pythonhosted.org/packages/b7/02/654426ce265ac19e2980bfd9ea6590ca96a56f10c76e63801a2df01c0486/uvloop-0.22.1-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:6e2ea3d6190a2968f4a14a23019d3b16870dd2190cd69c8180f7c632d21de68d", size = 4288562, upload-time = "2025-10-16T22:16:39.375Z" },
+    { url = "https://files.pythonhosted.org/packages/15/c0/0be24758891ef825f2065cd5db8741aaddabe3e248ee6acc5e8a80f04005/uvloop-0.22.1-cp313-cp313-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:0530a5fbad9c9e4ee3f2b33b148c6a64d47bbad8000ea63704fa8260f4cf728e", size = 4366890, upload-time = "2025-10-16T22:16:40.547Z" },
+    { url = "https://files.pythonhosted.org/packages/d2/53/8369e5219a5855869bcee5f4d317f6da0e2c669aecf0ef7d371e3d084449/uvloop-0.22.1-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:bc5ef13bbc10b5335792360623cc378d52d7e62c2de64660616478c32cd0598e", size = 4119472, upload-time = "2025-10-16T22:16:41.694Z" },
+    { url = "https://files.pythonhosted.org/packages/f8/ba/d69adbe699b768f6b29a5eec7b47dd610bd17a69de51b251126a801369ea/uvloop-0.22.1-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:1f38ec5e3f18c8a10ded09742f7fb8de0108796eb673f30ce7762ce1b8550cad", size = 4239051, upload-time = "2025-10-16T22:16:43.224Z" },
+    { url = "https://files.pythonhosted.org/packages/90/cd/b62bdeaa429758aee8de8b00ac0dd26593a9de93d302bff3d21439e9791d/uvloop-0.22.1-cp314-cp314-macosx_10_13_universal2.whl", hash = "sha256:3879b88423ec7e97cd4eba2a443aa26ed4e59b45e6b76aabf13fe2f27023a142", size = 1362067, upload-time = "2025-10-16T22:16:44.503Z" },
+    { url = "https://files.pythonhosted.org/packages/0d/f8/a132124dfda0777e489ca86732e85e69afcd1ff7686647000050ba670689/uvloop-0.22.1-cp314-cp314-macosx_10_13_x86_64.whl", hash = "sha256:4baa86acedf1d62115c1dc6ad1e17134476688f08c6efd8a2ab076e815665c74", size = 752423, upload-time = "2025-10-16T22:16:45.968Z" },
+    { url = "https://files.pythonhosted.org/packages/a3/94/94af78c156f88da4b3a733773ad5ba0b164393e357cc4bd0ab2e2677a7d6/uvloop-0.22.1-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:297c27d8003520596236bdb2335e6b3f649480bd09e00d1e3a99144b691d2a35", size = 4272437, upload-time = "2025-10-16T22:16:47.451Z" },
+    { url = "https://files.pythonhosted.org/packages/b5/35/60249e9fd07b32c665192cec7af29e06c7cd96fa1d08b84f012a56a0b38e/uvloop-0.22.1-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:c1955d5a1dd43198244d47664a5858082a3239766a839b2102a269aaff7a4e25", size = 4292101, upload-time = "2025-10-16T22:16:49.318Z" },
+    { url = "https://files.pythonhosted.org/packages/02/62/67d382dfcb25d0a98ce73c11ed1a6fba5037a1a1d533dcbb7cab033a2636/uvloop-0.22.1-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:b31dc2fccbd42adc73bc4e7cdbae4fc5086cf378979e53ca5d0301838c5682c6", size = 4114158, upload-time = "2025-10-16T22:16:50.517Z" },
+    { url = "https://files.pythonhosted.org/packages/f0/7a/f1171b4a882a5d13c8b7576f348acfe6074d72eaf52cccef752f748d4a9f/uvloop-0.22.1-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:93f617675b2d03af4e72a5333ef89450dfaa5321303ede6e67ba9c9d26878079", size = 4177360, upload-time = "2025-10-16T22:16:52.646Z" },
+    { url = "https://files.pythonhosted.org/packages/79/7b/b01414f31546caf0919da80ad57cbfe24c56b151d12af68cee1b04922ca8/uvloop-0.22.1-cp314-cp314t-macosx_10_13_universal2.whl", hash = "sha256:37554f70528f60cad66945b885eb01f1bb514f132d92b6eeed1c90fd54ed6289", size = 1454790, upload-time = "2025-10-16T22:16:54.355Z" },
+    { url = "https://files.pythonhosted.org/packages/d4/31/0bb232318dd838cad3fa8fb0c68c8b40e1145b32025581975e18b11fab40/uvloop-0.22.1-cp314-cp314t-macosx_10_13_x86_64.whl", hash = "sha256:b76324e2dc033a0b2f435f33eb88ff9913c156ef78e153fb210e03c13da746b3", size = 796783, upload-time = "2025-10-16T22:16:55.906Z" },
+    { url = "https://files.pythonhosted.org/packages/42/38/c9b09f3271a7a723a5de69f8e237ab8e7803183131bc57c890db0b6bb872/uvloop-0.22.1-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:badb4d8e58ee08dad957002027830d5c3b06aea446a6a3744483c2b3b745345c", size = 4647548, upload-time = "2025-10-16T22:16:57.008Z" },
+    { url = "https://files.pythonhosted.org/packages/c1/37/945b4ca0ac27e3dc4952642d4c900edd030b3da6c9634875af6e13ae80e5/uvloop-0.22.1-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:b91328c72635f6f9e0282e4a57da7470c7350ab1c9f48546c0f2866205349d21", size = 4467065, upload-time = "2025-10-16T22:16:58.206Z" },
+    { url = "https://files.pythonhosted.org/packages/97/cc/48d232f33d60e2e2e0b42f4e73455b146b76ebe216487e862700457fbf3c/uvloop-0.22.1-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:daf620c2995d193449393d6c62131b3fbd40a63bf7b307a1527856ace637fe88", size = 4328384, upload-time = "2025-10-16T22:16:59.36Z" },
+    { url = "https://files.pythonhosted.org/packages/e4/16/c1fd27e9549f3c4baf1dc9c20c456cd2f822dbf8de9f463824b0c0357e06/uvloop-0.22.1-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:6cde23eeda1a25c75b2e07d39970f3374105d5eafbaab2a4482be82f272d5a5e", size = 4296730, upload-time = "2025-10-16T22:17:00.744Z" },
+]
+
+[[package]]
+name = "watchfiles"
+version = "1.1.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "anyio" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c2/c9/8869df9b2a2d6c59d79220a4db37679e74f807c559ffe5265e08b227a210/watchfiles-1.1.1.tar.gz", hash = "sha256:a173cb5c16c4f40ab19cecf48a534c409f7ea983ab8fed0741304a1c0a31b3f2", size = 94440, upload-time = "2025-10-14T15:06:21.08Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/74/d5/f039e7e3c639d9b1d09b07ea412a6806d38123f0508e5f9b48a87b0a76cc/watchfiles-1.1.1-cp312-cp312-macosx_10_12_x86_64.whl", hash = "sha256:8c89f9f2f740a6b7dcc753140dd5e1ab9215966f7a3530d0c0705c83b401bd7d", size = 404745, upload-time = "2025-10-14T15:04:46.731Z" },
+    { url = "https://files.pythonhosted.org/packages/a5/96/a881a13aa1349827490dab2d363c8039527060cfcc2c92cc6d13d1b1049e/watchfiles-1.1.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:bd404be08018c37350f0d6e34676bd1e2889990117a2b90070b3007f172d0610", size = 391769, upload-time = "2025-10-14T15:04:48.003Z" },
+    { url = "https://files.pythonhosted.org/packages/4b/5b/d3b460364aeb8da471c1989238ea0e56bec24b6042a68046adf3d9ddb01c/watchfiles-1.1.1-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8526e8f916bb5b9a0a777c8317c23ce65de259422bba5b31325a6fa6029d33af", size = 449374, upload-time = "2025-10-14T15:04:49.179Z" },
+    { url = "https://files.pythonhosted.org/packages/b9/44/5769cb62d4ed055cb17417c0a109a92f007114a4e07f30812a73a4efdb11/watchfiles-1.1.1-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2edc3553362b1c38d9f06242416a5d8e9fe235c204a4072e988ce2e5bb1f69f6", size = 459485, upload-time = "2025-10-14T15:04:50.155Z" },
+    { url = "https://files.pythonhosted.org/packages/19/0c/286b6301ded2eccd4ffd0041a1b726afda999926cf720aab63adb68a1e36/watchfiles-1.1.1-cp312-cp312-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:30f7da3fb3f2844259cba4720c3fc7138eb0f7b659c38f3bfa65084c7fc7abce", size = 488813, upload-time = "2025-10-14T15:04:51.059Z" },
+    { url = "https://files.pythonhosted.org/packages/c7/2b/8530ed41112dd4a22f4dcfdb5ccf6a1baad1ff6eed8dc5a5f09e7e8c41c7/watchfiles-1.1.1-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:f8979280bdafff686ba5e4d8f97840f929a87ed9cdf133cbbd42f7766774d2aa", size = 594816, upload-time = "2025-10-14T15:04:52.031Z" },
+    { url = "https://files.pythonhosted.org/packages/ce/d2/f5f9fb49489f184f18470d4f99f4e862a4b3e9ac2865688eb2099e3d837a/watchfiles-1.1.1-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:dcc5c24523771db3a294c77d94771abcfcb82a0e0ee8efd910c37c59ec1b31bb", size = 475186, upload-time = "2025-10-14T15:04:53.064Z" },
+    { url = "https://files.pythonhosted.org/packages/cf/68/5707da262a119fb06fbe214d82dd1fe4a6f4af32d2d14de368d0349eb52a/watchfiles-1.1.1-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1db5d7ae38ff20153d542460752ff397fcf5c96090c1230803713cf3147a6803", size = 456812, upload-time = "2025-10-14T15:04:55.174Z" },
+    { url = "https://files.pythonhosted.org/packages/66/ab/3cbb8756323e8f9b6f9acb9ef4ec26d42b2109bce830cc1f3468df20511d/watchfiles-1.1.1-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:28475ddbde92df1874b6c5c8aaeb24ad5be47a11f87cde5a28ef3835932e3e94", size = 630196, upload-time = "2025-10-14T15:04:56.22Z" },
+    { url = "https://files.pythonhosted.org/packages/78/46/7152ec29b8335f80167928944a94955015a345440f524d2dfe63fc2f437b/watchfiles-1.1.1-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:36193ed342f5b9842edd3532729a2ad55c4160ffcfa3700e0d54be496b70dd43", size = 622657, upload-time = "2025-10-14T15:04:57.521Z" },
+    { url = "https://files.pythonhosted.org/packages/0a/bf/95895e78dd75efe9a7f31733607f384b42eb5feb54bd2eb6ed57cc2e94f4/watchfiles-1.1.1-cp312-cp312-win32.whl", hash = "sha256:859e43a1951717cc8de7f4c77674a6d389b106361585951d9e69572823f311d9", size = 272042, upload-time = "2025-10-14T15:04:59.046Z" },
+    { url = "https://files.pythonhosted.org/packages/87/0a/90eb755f568de2688cb220171c4191df932232c20946966c27a59c400850/watchfiles-1.1.1-cp312-cp312-win_amd64.whl", hash = "sha256:91d4c9a823a8c987cce8fa2690923b069966dabb196dd8d137ea2cede885fde9", size = 288410, upload-time = "2025-10-14T15:05:00.081Z" },
+    { url = "https://files.pythonhosted.org/packages/36/76/f322701530586922fbd6723c4f91ace21364924822a8772c549483abed13/watchfiles-1.1.1-cp312-cp312-win_arm64.whl", hash = "sha256:a625815d4a2bdca61953dbba5a39d60164451ef34c88d751f6c368c3ea73d404", size = 278209, upload-time = "2025-10-14T15:05:01.168Z" },
+    { url = "https://files.pythonhosted.org/packages/bb/f4/f750b29225fe77139f7ae5de89d4949f5a99f934c65a1f1c0b248f26f747/watchfiles-1.1.1-cp313-cp313-macosx_10_12_x86_64.whl", hash = "sha256:130e4876309e8686a5e37dba7d5e9bc77e6ed908266996ca26572437a5271e18", size = 404321, upload-time = "2025-10-14T15:05:02.063Z" },
+    { url = "https://files.pythonhosted.org/packages/2b/f9/f07a295cde762644aa4c4bb0f88921d2d141af45e735b965fb2e87858328/watchfiles-1.1.1-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:5f3bde70f157f84ece3765b42b4a52c6ac1a50334903c6eaf765362f6ccca88a", size = 391783, upload-time = "2025-10-14T15:05:03.052Z" },
+    { url = "https://files.pythonhosted.org/packages/bc/11/fc2502457e0bea39a5c958d86d2cb69e407a4d00b85735ca724bfa6e0d1a/watchfiles-1.1.1-cp313-cp313-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:14e0b1fe858430fc0251737ef3824c54027bedb8c37c38114488b8e131cf8219", size = 449279, upload-time = "2025-10-14T15:05:04.004Z" },
+    { url = "https://files.pythonhosted.org/packages/e3/1f/d66bc15ea0b728df3ed96a539c777acfcad0eb78555ad9efcaa1274688f0/watchfiles-1.1.1-cp313-cp313-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:f27db948078f3823a6bb3b465180db8ebecf26dd5dae6f6180bd87383b6b4428", size = 459405, upload-time = "2025-10-14T15:05:04.942Z" },
+    { url = "https://files.pythonhosted.org/packages/be/90/9f4a65c0aec3ccf032703e6db02d89a157462fbb2cf20dd415128251cac0/watchfiles-1.1.1-cp313-cp313-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:059098c3a429f62fc98e8ec62b982230ef2c8df68c79e826e37b895bc359a9c0", size = 488976, upload-time = "2025-10-14T15:05:05.905Z" },
+    { url = "https://files.pythonhosted.org/packages/37/57/ee347af605d867f712be7029bb94c8c071732a4b44792e3176fa3c612d39/watchfiles-1.1.1-cp313-cp313-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:bfb5862016acc9b869bb57284e6cb35fdf8e22fe59f7548858e2f971d045f150", size = 595506, upload-time = "2025-10-14T15:05:06.906Z" },
+    { url = "https://files.pythonhosted.org/packages/a8/78/cc5ab0b86c122047f75e8fc471c67a04dee395daf847d3e59381996c8707/watchfiles-1.1.1-cp313-cp313-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:319b27255aacd9923b8a276bb14d21a5f7ff82564c744235fc5eae58d95422ae", size = 474936, upload-time = "2025-10-14T15:05:07.906Z" },
+    { url = "https://files.pythonhosted.org/packages/62/da/def65b170a3815af7bd40a3e7010bf6ab53089ef1b75d05dd5385b87cf08/watchfiles-1.1.1-cp313-cp313-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c755367e51db90e75b19454b680903631d41f9e3607fbd941d296a020c2d752d", size = 456147, upload-time = "2025-10-14T15:05:09.138Z" },
+    { url = "https://files.pythonhosted.org/packages/57/99/da6573ba71166e82d288d4df0839128004c67d2778d3b566c138695f5c0b/watchfiles-1.1.1-cp313-cp313-musllinux_1_1_aarch64.whl", hash = "sha256:c22c776292a23bfc7237a98f791b9ad3144b02116ff10d820829ce62dff46d0b", size = 630007, upload-time = "2025-10-14T15:05:10.117Z" },
+    { url = "https://files.pythonhosted.org/packages/a8/51/7439c4dd39511368849eb1e53279cd3454b4a4dbace80bab88feeb83c6b5/watchfiles-1.1.1-cp313-cp313-musllinux_1_1_x86_64.whl", hash = "sha256:3a476189be23c3686bc2f4321dd501cb329c0a0469e77b7b534ee10129ae6374", size = 622280, upload-time = "2025-10-14T15:05:11.146Z" },
+    { url = "https://files.pythonhosted.org/packages/95/9c/8ed97d4bba5db6fdcdb2b298d3898f2dd5c20f6b73aee04eabe56c59677e/watchfiles-1.1.1-cp313-cp313-win32.whl", hash = "sha256:bf0a91bfb5574a2f7fc223cf95eeea79abfefa404bf1ea5e339c0c1560ae99a0", size = 272056, upload-time = "2025-10-14T15:05:12.156Z" },
+    { url = "https://files.pythonhosted.org/packages/1f/f3/c14e28429f744a260d8ceae18bf58c1d5fa56b50d006a7a9f80e1882cb0d/watchfiles-1.1.1-cp313-cp313-win_amd64.whl", hash = "sha256:52e06553899e11e8074503c8e716d574adeeb7e68913115c4b3653c53f9bae42", size = 288162, upload-time = "2025-10-14T15:05:13.208Z" },
+    { url = "https://files.pythonhosted.org/packages/dc/61/fe0e56c40d5cd29523e398d31153218718c5786b5e636d9ae8ae79453d27/watchfiles-1.1.1-cp313-cp313-win_arm64.whl", hash = "sha256:ac3cc5759570cd02662b15fbcd9d917f7ecd47efe0d6b40474eafd246f91ea18", size = 277909, upload-time = "2025-10-14T15:05:14.49Z" },
+    { url = "https://files.pythonhosted.org/packages/79/42/e0a7d749626f1e28c7108a99fb9bf524b501bbbeb9b261ceecde644d5a07/watchfiles-1.1.1-cp313-cp313t-macosx_10_12_x86_64.whl", hash = "sha256:563b116874a9a7ce6f96f87cd0b94f7faf92d08d0021e837796f0a14318ef8da", size = 403389, upload-time = "2025-10-14T15:05:15.777Z" },
+    { url = "https://files.pythonhosted.org/packages/15/49/08732f90ce0fbbc13913f9f215c689cfc9ced345fb1bcd8829a50007cc8d/watchfiles-1.1.1-cp313-cp313t-macosx_11_0_arm64.whl", hash = "sha256:3ad9fe1dae4ab4212d8c91e80b832425e24f421703b5a42ef2e4a1e215aff051", size = 389964, upload-time = "2025-10-14T15:05:16.85Z" },
+    { url = "https://files.pythonhosted.org/packages/27/0d/7c315d4bd5f2538910491a0393c56bf70d333d51bc5b34bee8e68e8cea19/watchfiles-1.1.1-cp313-cp313t-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ce70f96a46b894b36eba678f153f052967a0d06d5b5a19b336ab0dbbd029f73e", size = 448114, upload-time = "2025-10-14T15:05:17.876Z" },
+    { url = "https://files.pythonhosted.org/packages/c3/24/9e096de47a4d11bc4df41e9d1e61776393eac4cb6eb11b3e23315b78b2cc/watchfiles-1.1.1-cp313-cp313t-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:cb467c999c2eff23a6417e58d75e5828716f42ed8289fe6b77a7e5a91036ca70", size = 460264, upload-time = "2025-10-14T15:05:18.962Z" },
+    { url = "https://files.pythonhosted.org/packages/cc/0f/e8dea6375f1d3ba5fcb0b3583e2b493e77379834c74fd5a22d66d85d6540/watchfiles-1.1.1-cp313-cp313t-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:836398932192dae4146c8f6f737d74baeac8b70ce14831a239bdb1ca882fc261", size = 487877, upload-time = "2025-10-14T15:05:20.094Z" },
+    { url = "https://files.pythonhosted.org/packages/ac/5b/df24cfc6424a12deb41503b64d42fbea6b8cb357ec62ca84a5a3476f654a/watchfiles-1.1.1-cp313-cp313t-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:743185e7372b7bc7c389e1badcc606931a827112fbbd37f14c537320fca08620", size = 595176, upload-time = "2025-10-14T15:05:21.134Z" },
+    { url = "https://files.pythonhosted.org/packages/8f/b5/853b6757f7347de4e9b37e8cc3289283fb983cba1ab4d2d7144694871d9c/watchfiles-1.1.1-cp313-cp313t-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:afaeff7696e0ad9f02cbb8f56365ff4686ab205fcf9c4c5b6fdfaaa16549dd04", size = 473577, upload-time = "2025-10-14T15:05:22.306Z" },
+    { url = "https://files.pythonhosted.org/packages/e1/f7/0a4467be0a56e80447c8529c9fce5b38eab4f513cb3d9bf82e7392a5696b/watchfiles-1.1.1-cp313-cp313t-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3f7eb7da0eb23aa2ba036d4f616d46906013a68caf61b7fdbe42fc8b25132e77", size = 455425, upload-time = "2025-10-14T15:05:23.348Z" },
+    { url = "https://files.pythonhosted.org/packages/8e/e0/82583485ea00137ddf69bc84a2db88bd92ab4a6e3c405e5fb878ead8d0e7/watchfiles-1.1.1-cp313-cp313t-musllinux_1_1_aarch64.whl", hash = "sha256:831a62658609f0e5c64178211c942ace999517f5770fe9436be4c2faeba0c0ef", size = 628826, upload-time = "2025-10-14T15:05:24.398Z" },
+    { url = "https://files.pythonhosted.org/packages/28/9a/a785356fccf9fae84c0cc90570f11702ae9571036fb25932f1242c82191c/watchfiles-1.1.1-cp313-cp313t-musllinux_1_1_x86_64.whl", hash = "sha256:f9a2ae5c91cecc9edd47e041a930490c31c3afb1f5e6d71de3dc671bfaca02bf", size = 622208, upload-time = "2025-10-14T15:05:25.45Z" },
+    { url = "https://files.pythonhosted.org/packages/c3/f4/0872229324ef69b2c3edec35e84bd57a1289e7d3fe74588048ed8947a323/watchfiles-1.1.1-cp314-cp314-macosx_10_12_x86_64.whl", hash = "sha256:d1715143123baeeaeadec0528bb7441103979a1d5f6fd0e1f915383fea7ea6d5", size = 404315, upload-time = "2025-10-14T15:05:26.501Z" },
+    { url = "https://files.pythonhosted.org/packages/7b/22/16d5331eaed1cb107b873f6ae1b69e9ced582fcf0c59a50cd84f403b1c32/watchfiles-1.1.1-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:39574d6370c4579d7f5d0ad940ce5b20db0e4117444e39b6d8f99db5676c52fd", size = 390869, upload-time = "2025-10-14T15:05:27.649Z" },
+    { url = "https://files.pythonhosted.org/packages/b2/7e/5643bfff5acb6539b18483128fdc0ef2cccc94a5b8fbda130c823e8ed636/watchfiles-1.1.1-cp314-cp314-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7365b92c2e69ee952902e8f70f3ba6360d0d596d9299d55d7d386df84b6941fb", size = 449919, upload-time = "2025-10-14T15:05:28.701Z" },
+    { url = "https://files.pythonhosted.org/packages/51/2e/c410993ba5025a9f9357c376f48976ef0e1b1aefb73b97a5ae01a5972755/watchfiles-1.1.1-cp314-cp314-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:bfff9740c69c0e4ed32416f013f3c45e2ae42ccedd1167ef2d805c000b6c71a5", size = 460845, upload-time = "2025-10-14T15:05:30.064Z" },
+    { url = "https://files.pythonhosted.org/packages/8e/a4/2df3b404469122e8680f0fcd06079317e48db58a2da2950fb45020947734/watchfiles-1.1.1-cp314-cp314-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b27cf2eb1dda37b2089e3907d8ea92922b673c0c427886d4edc6b94d8dfe5db3", size = 489027, upload-time = "2025-10-14T15:05:31.064Z" },
+    { url = "https://files.pythonhosted.org/packages/ea/84/4587ba5b1f267167ee715b7f66e6382cca6938e0a4b870adad93e44747e6/watchfiles-1.1.1-cp314-cp314-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:526e86aced14a65a5b0ec50827c745597c782ff46b571dbfe46192ab9e0b3c33", size = 595615, upload-time = "2025-10-14T15:05:32.074Z" },
+    { url = "https://files.pythonhosted.org/packages/6a/0f/c6988c91d06e93cd0bb3d4a808bcf32375ca1904609835c3031799e3ecae/watchfiles-1.1.1-cp314-cp314-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:04e78dd0b6352db95507fd8cb46f39d185cf8c74e4cf1e4fbad1d3df96faf510", size = 474836, upload-time = "2025-10-14T15:05:33.209Z" },
+    { url = "https://files.pythonhosted.org/packages/b4/36/ded8aebea91919485b7bbabbd14f5f359326cb5ec218cd67074d1e426d74/watchfiles-1.1.1-cp314-cp314-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5c85794a4cfa094714fb9c08d4a218375b2b95b8ed1666e8677c349906246c05", size = 455099, upload-time = "2025-10-14T15:05:34.189Z" },
+    { url = "https://files.pythonhosted.org/packages/98/e0/8c9bdba88af756a2fce230dd365fab2baf927ba42cd47521ee7498fd5211/watchfiles-1.1.1-cp314-cp314-musllinux_1_1_aarch64.whl", hash = "sha256:74d5012b7630714b66be7b7b7a78855ef7ad58e8650c73afc4c076a1f480a8d6", size = 630626, upload-time = "2025-10-14T15:05:35.216Z" },
+    { url = "https://files.pythonhosted.org/packages/2a/84/a95db05354bf2d19e438520d92a8ca475e578c647f78f53197f5a2f17aaf/watchfiles-1.1.1-cp314-cp314-musllinux_1_1_x86_64.whl", hash = "sha256:8fbe85cb3201c7d380d3d0b90e63d520f15d6afe217165d7f98c9c649654db81", size = 622519, upload-time = "2025-10-14T15:05:36.259Z" },
+    { url = "https://files.pythonhosted.org/packages/1d/ce/d8acdc8de545de995c339be67711e474c77d643555a9bb74a9334252bd55/watchfiles-1.1.1-cp314-cp314-win32.whl", hash = "sha256:3fa0b59c92278b5a7800d3ee7733da9d096d4aabcfabb9a928918bd276ef9b9b", size = 272078, upload-time = "2025-10-14T15:05:37.63Z" },
+    { url = "https://files.pythonhosted.org/packages/c4/c9/a74487f72d0451524be827e8edec251da0cc1fcf111646a511ae752e1a3d/watchfiles-1.1.1-cp314-cp314-win_amd64.whl", hash = "sha256:c2047d0b6cea13b3316bdbafbfa0c4228ae593d995030fda39089d36e64fc03a", size = 287664, upload-time = "2025-10-14T15:05:38.95Z" },
+    { url = "https://files.pythonhosted.org/packages/df/b8/8ac000702cdd496cdce998c6f4ee0ca1f15977bba51bdf07d872ebdfc34c/watchfiles-1.1.1-cp314-cp314-win_arm64.whl", hash = "sha256:842178b126593addc05acf6fce960d28bc5fae7afbaa2c6c1b3a7b9460e5be02", size = 277154, upload-time = "2025-10-14T15:05:39.954Z" },
+    { url = "https://files.pythonhosted.org/packages/47/a8/e3af2184707c29f0f14b1963c0aace6529f9d1b8582d5b99f31bbf42f59e/watchfiles-1.1.1-cp314-cp314t-macosx_10_12_x86_64.whl", hash = "sha256:88863fbbc1a7312972f1c511f202eb30866370ebb8493aef2812b9ff28156a21", size = 403820, upload-time = "2025-10-14T15:05:40.932Z" },
+    { url = "https://files.pythonhosted.org/packages/c0/ec/e47e307c2f4bd75f9f9e8afbe3876679b18e1bcec449beca132a1c5ffb2d/watchfiles-1.1.1-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:55c7475190662e202c08c6c0f4d9e345a29367438cf8e8037f3155e10a88d5a5", size = 390510, upload-time = "2025-10-14T15:05:41.945Z" },
+    { url = "https://files.pythonhosted.org/packages/d5/a0/ad235642118090f66e7b2f18fd5c42082418404a79205cdfca50b6309c13/watchfiles-1.1.1-cp314-cp314t-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:3f53fa183d53a1d7a8852277c92b967ae99c2d4dcee2bfacff8868e6e30b15f7", size = 448408, upload-time = "2025-10-14T15:05:43.385Z" },
+    { url = "https://files.pythonhosted.org/packages/df/85/97fa10fd5ff3332ae17e7e40e20784e419e28521549780869f1413742e9d/watchfiles-1.1.1-cp314-cp314t-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:6aae418a8b323732fa89721d86f39ec8f092fc2af67f4217a2b07fd3e93c6101", size = 458968, upload-time = "2025-10-14T15:05:44.404Z" },
+    { url = "https://files.pythonhosted.org/packages/47/c2/9059c2e8966ea5ce678166617a7f75ecba6164375f3b288e50a40dc6d489/watchfiles-1.1.1-cp314-cp314t-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:f096076119da54a6080e8920cbdaac3dbee667eb91dcc5e5b78840b87415bd44", size = 488096, upload-time = "2025-10-14T15:05:45.398Z" },
+    { url = "https://files.pythonhosted.org/packages/94/44/d90a9ec8ac309bc26db808a13e7bfc0e4e78b6fc051078a554e132e80160/watchfiles-1.1.1-cp314-cp314t-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:00485f441d183717038ed2e887a7c868154f216877653121068107b227a2f64c", size = 596040, upload-time = "2025-10-14T15:05:46.502Z" },
+    { url = "https://files.pythonhosted.org/packages/95/68/4e3479b20ca305cfc561db3ed207a8a1c745ee32bf24f2026a129d0ddb6e/watchfiles-1.1.1-cp314-cp314t-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:a55f3e9e493158d7bfdb60a1165035f1cf7d320914e7b7ea83fe22c6023b58fc", size = 473847, upload-time = "2025-10-14T15:05:47.484Z" },
+    { url = "https://files.pythonhosted.org/packages/4f/55/2af26693fd15165c4ff7857e38330e1b61ab8c37d15dc79118cdba115b7a/watchfiles-1.1.1-cp314-cp314t-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8c91ed27800188c2ae96d16e3149f199d62f86c7af5f5f4d2c61a3ed8cd3666c", size = 455072, upload-time = "2025-10-14T15:05:48.928Z" },
+    { url = "https://files.pythonhosted.org/packages/66/1d/d0d200b10c9311ec25d2273f8aad8c3ef7cc7ea11808022501811208a750/watchfiles-1.1.1-cp314-cp314t-musllinux_1_1_aarch64.whl", hash = "sha256:311ff15a0bae3714ffb603e6ba6dbfba4065ab60865d15a6ec544133bdb21099", size = 629104, upload-time = "2025-10-14T15:05:49.908Z" },
+    { url = "https://files.pythonhosted.org/packages/e3/bd/fa9bb053192491b3867ba07d2343d9f2252e00811567d30ae8d0f78136fe/watchfiles-1.1.1-cp314-cp314t-musllinux_1_1_x86_64.whl", hash = "sha256:a916a2932da8f8ab582f242c065f5c81bed3462849ca79ee357dd9551b0e9b01", size = 622112, upload-time = "2025-10-14T15:05:50.941Z" },
+]
+
 [[package]]
 name = "wcwidth"
 version = "0.2.14"
@@ -3574,6 +3755,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/fa/a8/5b41e0da817d64113292ab1f8247140aac61cbf6cfd085d6a0fa77f4984f/websockets-15.0.1-py3-none-any.whl", hash = "sha256:f7a866fbc1e97b5c617ee4116daaa09b722101d4a3c170c787450ba409f9736f", size = 169743, upload-time = "2025-03-05T20:03:39.41Z" },
 ]
 
+[[package]]
+name = "whoosh"
+version = "2.7.4"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/25/2b/6beed2107b148edc1321da0d489afc4617b9ed317ef7b72d4993cad9b684/Whoosh-2.7.4.tar.gz", hash = "sha256:7ca5633dbfa9e0e0fa400d3151a8a0c4bec53bd2ecedc0a67705b17565c31a83", size = 968741, upload-time = "2016-04-04T01:19:32.327Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/ba/19/24d0f1f454a2c1eb689ca28d2f178db81e5024f42d82729a4ff6771155cf/Whoosh-2.7.4-py2.py3-none-any.whl", hash = "sha256:aa39c3c3426e3fd107dcb4bde64ca1e276a65a889d9085a6e4b54ba82420a852", size = 468790, upload-time = "2016-04-04T01:19:40.379Z" },
+]
+
 [[package]]
 name = "wrapt"
 version = "1.17.3"