ADD CUA backbone (#1)

* MOCK backend

* MOCK backend

* Fix pre-commit

* Fix pre-commit

* CHG Step models

* FIX pre-commit

* CHG README.md

* FIX pre-commit

* ADD backend route model

* CHG pre-commit

* FIX pre-commit

.github/actions/setup-uv/action.yml

@@ -0,0 +1,16 @@
+name: 'Setup UV'
+description: 'Install UV and set up the virtual environment'
+
+runs:
+  using: composite
+  steps:
+    - name: Install uv
+      shell: bash
+      run: |
+        curl -LsSf https://astral.sh/uv/install.sh | sh
+        echo "$HOME/.cargo/bin" >> $GITHUB_PATH
+
+    - name: Install dependencies
+      shell: bash
+      run: |
+        make sync

.github/workflows/pre-commit.yml

@@ -0,0 +1,34 @@
+name: Pre-commit
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  pre-commit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: |
+            cua2-front/package-lock.json
+
+      - uses: ./.github/actions/setup-uv
+
+      - name: Run pre-commit
+        run: |
+          uv run pre-commit run --all-files --show-diff-on-failure

.gitignore

@@ -224,3 +224,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+data/

.pre-commit-config.yaml

@@ -0,0 +1,55 @@
+repos:
+    - repo: https://github.com/pre-commit/pre-commit-hooks
+      rev: v4.5.0
+      hooks:
+          - id: trailing-whitespace
+          - id: end-of-file-fixer
+          - id: check-yaml
+          - id: check-added-large-files
+          - id: check-ast
+          - id: check-json
+            exclude: ^(frontend/.*\.json|cua2-front/tsconfig.*\.json)$
+          - id: check-merge-conflict
+          - id: detect-private-key
+
+    - repo: https://github.com/pycqa/isort
+      rev: 5.13.2
+      hooks:
+          - id: isort
+            args: ["--profile", "black"]
+
+    - repo: https://github.com/charliermarsh/ruff-pre-commit
+      rev: v0.9.0
+      hooks:
+          - id: ruff
+            args: [--fix]
+          - id: ruff-format
+
+    - repo: https://github.com/pre-commit/mirrors-mypy
+      rev: v1.14.1
+      hooks:
+          - id: mypy
+            additional_dependencies: [types-PyYAML, types-requests]
+            args: [--ignore-missing-imports]
+
+    - repo: https://github.com/codespell-project/codespell
+      rev: v2.3.0
+      hooks:
+          - id: codespell
+            args: ["--skip=*.json,*.jsonl,*.txt,*.md,*.ipynb"]
+
+    - repo: local
+      hooks:
+          - id: eslint-cua2-front
+            name: ESLint Frontend
+            entry: bash -c 'cd cua2-front && npx eslint src/ --config eslint.config.js'
+            language: system
+            files: ^cua2-front/.*\.(ts|tsx|js|jsx)$
+            pass_filenames: false
+
+          - id: typescript-check
+            name: TypeScript Type Check
+            entry: bash -c 'cd cua2-front && npx tsc --noEmit --project tsconfig.json'
+            language: system
+            files: ^cua2-front/.*\.(ts|tsx)$
+            pass_filenames: false

Makefile

@@ -0,0 +1,32 @@
+.PHONY: sync setup install dev-backend dev-frontend dev clean
+
+# Sync all dependencies (Python + Node.js)
+sync:
+	@echo "Syncing Python dependencies..."
+	uv sync --all-extras
+	@echo "Installing frontend dependencies..."
+	cd cua2-front && npm install
+	@echo "✓ All dependencies synced!"
+
+setup: sync
+
+install-frontend:
+	cd cua2-front && npm install
+
+# Start backend development server
+dev-backend:
+	cd cua2-core && uv run uvicorn cua2_core.main:app --reload --host 0.0.0.0 --port 8000
+
+# Start frontend development server
+dev-frontend:
+	cd cua2-front && npm run dev
+
+pre-commit:
+	uv run pre-commit run --all-files --show-diff-on-failure
+
+clean:
+	find . -type d -name "__pycache__" -exec rm -rf {} + 2>/dev/null || true
+	find . -type d -name "*.egg-info" -exec rm -rf {} + 2>/dev/null || true
+	find . -type d -name ".pytest_cache" -exec rm -rf {} + 2>/dev/null || true
+	cd cua2-front && rm -rf node_modules dist 2>/dev/null || true
+	@echo "✓ Cleaned!"

README.md

@@ -0,0 +1,224 @@
+# CUA2 - Computer Use Agent 2
+
+An AI-powered automation interface featuring real-time agent task processing, VNC streaming, and step-by-step execution visualization.
+
+## 🚀 Overview
+
+CUA2 is a full-stack application that provides a modern web interface for AI agents to perform automated computer tasks. The system features real-time WebSocket communication between a FastAPI backend and React frontend, allowing users to monitor agent execution, view screenshots, track token usage, and stream VNC sessions.
+
+## 🏗️ Architecture
+
+![CUA2 Architecture](assets/architecture.png)
+
+## 🛠️ Tech Stack
+
+### Backend (`cua2-core`)
+- **FastAPI**
+- **Uvicorn**
+- **smolagents** - AI agent framework with OpenAI/LiteLLM support
+
+### Frontend (`cua2-front`)
+- **React TS**
+- **Vite**
+
+## 📋 Prerequisites
+
+- **Python** 3.10 or higher
+- **Node.js** 18 or higher
+- **npm**
+- **uv** - Python package manager
+
+### Installing uv
+
+**macOS/Linux:**
+```bash
+curl -LsSf https://astral.sh/uv/install.sh | sh
+```
+
+For more installation options, visit: https://docs.astral.sh/uv/getting-started/installation/
+
+
+
+## 🚀 Getting Started
+
+### 1. Clone the Repository
+
+```bash
+git clone https://github.com/huggingface/CUA2.git
+cd CUA2
+```
+
+### 2. Install Dependencies
+
+Use the Makefile for quick setup:
+
+```bash
+make sync
+```
+
+This will:
+- Install Python dependencies using `uv`
+- Install Node.js dependencies for the frontend
+
+Or install manually:
+
+```bash
+# Backend dependencies
+cd cua2-core
+uv sync --all-extras
+
+# Frontend dependencies
+cd ../cua2-front
+npm install
+```
+
+### 3. Environment Configuration
+
+Copy the example environment file and configure your settings:
+
+```bash
+cd cua2-core
+cp env.example .env
+```
+
+Edit `.env` with your configuration:
+- API keys for OpenAI/LiteLLM
+- Database connections (if applicable)
+- Other service credentials
+
+### 4. Start Development Servers
+
+#### Option 1: Using Makefile (Recommended)
+
+Open two terminal windows:
+
+**Terminal 1 - Backend:**
+```bash
+make dev-backend
+```
+
+**Terminal 2 - Frontend:**
+```bash
+make dev-frontend
+```
+
+#### Option 2: Manual Start
+
+**Terminal 1 - Backend:**
+```bash
+cd cua2-core
+uv run uvicorn cua2_core.main:app --reload --host 0.0.0.0 --port 8000
+```
+
+**Terminal 2 - Frontend:**
+```bash
+cd cua2-front
+npm run dev
+```
+
+### 5. Access the Application
+
+- **Frontend**: http://localhost:5173
+- **Backend API**: http://localhost:8000
+- **API Documentation**: http://localhost:8000/docs
+- **ReDoc**: http://localhost:8000/redoc
+
+## 📁 Project Structure
+
+```
+CUA2/
+├── cua2-core/                      # Backend application
+│   ├── src/
+│   │   └── cua2_core/
+│   │       ├── app.py              # FastAPI application setup
+│   │       ├── main.py             # Application entry point
+│   │       ├── models/
+│   │       │   └── models.py       # Pydantic models
+│   │       ├── routes/
+│   │       │   ├── routes.py       # REST API endpoints
+│   │       │   └── websocket.py    # WebSocket endpoint
+│   │       ├── services/
+│   │       │   ├── agent_service.py # Agent task processing
+│   │       │   └── simulation_metadata/ # Demo data
+│   │       └── websocket/
+│   │           └── websocket_manager.py # WebSocket management
+│   ├── pyproject.toml              # Python dependencies
+│   └── env.example                 # Environment variables template
+│
+├── cua2-front/                     # Frontend application
+│   ├── src/
+│   │   ├── App.tsx                 # Main application component
+│   │   ├── pages/
+│   │   │   └── Index.tsx           # Main page
+│   │   ├── components/
+│   │   │   └── mock/               # UI components
+│   │   ├── hooks/
+│   │   │   └── useWebSocket.ts     # WebSocket hook
+│   │   └── types/
+│   │       └── agent.ts            # TypeScript type definitions
+│   ├── package.json                # Node dependencies
+│   └── vite.config.ts              # Vite configuration
+│
+├── Makefile                        # Development commands
+└── README.md                       # This file
+```
+
+## 🔌 API Endpoints
+
+### REST API
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/health` | Health check with WebSocket connection count |
+| GET | `/tasks` | Get all active tasks |
+| GET | `/tasks/{task_id}` | Get specific task status |
+| GET | `/docs` | Interactive API documentation (Swagger) |
+| GET | `/redoc` | Alternative API documentation (ReDoc) |
+
+### WebSocket
+
+
+#### Client → Server Events
+
+- `user_task` - New user task request
+
+#### Server → Client Events
+
+- `agent_start` - Agent begins processing
+- `agent_progress` - New step completed with image and metadata
+- `agent_complete` - Task finished successfully
+- `agent_error` - Error occurred during processing
+- `vnc_url_set` - VNC stream URL available
+- `vnc_url_unset` - VNC stream ended
+- `heartbeat` - Connection keep-alive
+
+## 🧪 Development
+
+### Available Make Commands
+
+```bash
+make sync              # Sync all dependencies (Python + Node.js)
+make dev-backend       # Start backend development server
+make dev-frontend      # Start frontend development server
+make pre-commit        # Run pre-commit hooks
+make clean             # Clean build artifacts and caches
+```
+
+### Code Quality
+
+```bash
+# Backend
+make pre-commit
+```
+
+### Build for Production
+
+```bash
+# Frontend
+cd cua2-front
+npm run build
+
+# The build output will be in cua2-front/dist/
+```
+
+**Happy Coding! 🚀**

cua2-core/src/cua2_core/app.py

@@ -1,12 +1,11 @@
 from contextlib import asynccontextmanager
 
+from cua2_core.services.agent_service import AgentService
+from cua2_core.websocket.websocket_manager import WebSocketManager
 from dotenv import load_dotenv
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 
-from cua2_core.services.agent_service import AgentService
-from cua2_core.websocket.websocket_manager import WebSocketManager
-
 # Load environment variables
 load_dotenv()
 
@@ -39,8 +38,8 @@ async def lifespan(app: FastAPI):
 
 # Create FastAPI app with lifespan
 app = FastAPI(
-    title="Computer Use Studio Backend",
-    description="Backend API for Computer Use Studio - AI-powered automation interface",
+    title="Computer Use Backend",
+    description="Backend API for Computer Use - AI-powered automation interface",
     version="1.0.0",
     docs_url="/docs",
     redoc_url="/redoc",

cua2-core/src/cua2_core/main.py

@@ -22,7 +22,7 @@ if __name__ == "__main__":
     port = int(os.getenv("PORT", 8000))
     debug = os.getenv("DEBUG", "false").lower() == "true"
 
-    print(f"Starting Computer Use Studio Backend on {host}:{port}")
+    print(f"Starting Computer Use Backend on {host}:{port}")
     print(f"Debug mode: {debug}")
     print(f"API Documentation: http://{host}:{port}/docs")
     print(f"WebSocket endpoint: ws://{host}:{port}/ws")

cua2-core/src/cua2_core/models/__init__.py

@@ -1,2 +1 @@
 """Models module for CUA2 Core"""
-

cua2-core/src/cua2_core/models/models.py

@@ -1,57 +1,68 @@
 import json
 import os
 from datetime import datetime
-from enum import Enum
-from typing import Annotated, Literal, TypeAlias
+from typing import Annotated, Literal, Optional
 
 from pydantic import BaseModel, Field, field_serializer, model_validator
+from typing_extensions import TypeAlias
 
 #################### Backend -> Frontend ########################
 
+
 class AgentAction(BaseModel):
     """Agent action structure"""
 
-    actionType: Literal["click", "write", "press", "scroll", "wait", "open", "launch_app", "refresh", "go_back"]
+    actionType: Literal[
+        "click",
+        "write",
+        "press",
+        "scroll",
+        "wait",
+        "open",
+        "launch_app",
+        "refresh",
+        "go_back",
+    ]
     actionArguments: dict
 
     def to_string(self) -> str:
         """Convert action to a human-readable string"""
         action_type = self.actionType
         args = self.actionArguments
-        
+
         if action_type == "click":
             x = args.get("x", "?")
             y = args.get("y", "?")
             return f"Click at coordinates ({x}, {y})"
-        
+
         elif action_type == "write":
             text = args.get("text", "")
             return f"Type text: '{text}'"
-        
+
         elif action_type == "press":
             key = args.get("key", "")
             return f"Press key: {key}"
-        
+
         elif action_type == "scroll":
             direction = args.get("direction", "down")
             amount = args.get("amount", 2)
             return f"Scroll {direction} by {amount}"
-        
+
         elif action_type == "wait":
             seconds = args.get("seconds", 0)
             return f"Wait for {seconds} seconds"
-        
+
         elif action_type == "open":
             file_or_url = args.get("file_or_url", "")
             return f"Open: {file_or_url}"
-        
+
         elif action_type == "launch_app":
             app_name = args.get("app_name", "")
             return f"Launch app: {app_name}"
-        
+
         elif action_type == "refresh":
             return "Refresh the current page"
-        
+
         elif action_type == "go_back":
             return "Go back one page"
 
@@ -62,19 +73,19 @@ class AgentStep(BaseModel):
     traceId: str
     stepId: str
     image: str
-    thought: str
-    actions: list[AgentAction]
-    timeTaken: float
+    duration: float
     inputTokensUsed: int
     outputTokensUsed: int
-    timestamp: datetime
-    step_evaluation: Literal['like', 'dislike', 'neutral']
-    
-    @field_serializer('actions')
+    step_evaluation: Literal["like", "dislike", "neutral"]
+    error: Optional[str] = None
+    thought: Optional[str] = None
+    actions: Optional[list[AgentAction]] = None
+
+    @field_serializer("actions")
     def serialize_actions(self, actions: list[AgentAction], _info):
         """Convert actions to list of strings when dumping (controlled by context)"""
 
-        if _info.context and _info.context.get('actions_as_json', False):
+        if _info.context and _info.context.get("actions_as_json", False):
             return [action.model_dump(mode="json") for action in actions]
 
         return [action.to_string() for action in actions]
@@ -86,8 +97,9 @@ class AgentTraceMetadata(BaseModel):
     traceId: str = ""
     inputTokensUsed: int = 0
     outputTokensUsed: int = 0
-    timeTaken: float = 0.0  # in seconds
+    duration: float = 0.0  # in seconds
     numberOfSteps: int = 0
+    maxSteps: int = 0
 
 
 class AgentTrace(BaseModel):
@@ -208,7 +220,11 @@ class ActiveTask(BaseModel):
         self.traceMetadata.traceId = self.message_id
         os.makedirs(self.trace_path, exist_ok=True)
         with open(f"{self.trace_path}/tasks.json", "w") as f:
-            json.dump(self.model_dump(mode="json", context={"actions_as_json": True}), f, indent=2)
+            json.dump(
+                self.model_dump(mode="json", context={"actions_as_json": True}),
+                f,
+                indent=2,
+            )
 
         return self
 
@@ -219,3 +235,17 @@ class HealthResponse(BaseModel):
     status: str
     timestamp: datetime
     websocket_connections: int
+
+
+class TaskStatusResponse(BaseModel):
+    """Response for a specific task status"""
+
+    task_id: str
+    status: ActiveTask
+
+
+class ActiveTasksResponse(BaseModel):
+    """Response for active tasks"""
+
+    active_tasks: dict[str, ActiveTask]
+    total_connections: int

cua2-core/src/cua2_core/routes/__init__.py

@@ -1,2 +1 @@
 """Routes module for CUA2 Core"""
-

cua2-core/src/cua2_core/routes/routes.py

@@ -1,11 +1,14 @@
 from datetime import datetime
 
-from fastapi import APIRouter, Depends, HTTPException, Request
-
 # Get services from app state
-from cua2_core.models.models import HealthResponse
+from cua2_core.models.models import (
+    ActiveTasksResponse,
+    HealthResponse,
+    TaskStatusResponse,
+)
 from cua2_core.services.agent_service import AgentService
 from cua2_core.websocket.websocket_manager import WebSocketManager
+from fastapi import APIRouter, Depends, HTTPException, Request
 
 # Create router
 router = APIRouter()
@@ -33,19 +36,19 @@ async def health_check(
     )
 
 
-@router.get("/tasks")
+@router.get("/tasks", response_model=ActiveTasksResponse)
 async def get_active_tasks(
     agent_service: AgentService = Depends(get_agent_service),
     websocket_manager: WebSocketManager = Depends(get_websocket_manager),
 ):
     """Get currently active tasks"""
-    return {
-        "active_tasks": agent_service.get_active_tasks(),
-        "total_connections": websocket_manager.get_connection_count(),
-    }
+    return ActiveTasksResponse(
+        active_tasks=agent_service.get_active_tasks(),
+        total_connections=websocket_manager.get_connection_count(),
+    )
 
 
-@router.get("/tasks/{task_id}")
+@router.get("/tasks/{task_id}", response_model=TaskStatusResponse)
 async def get_task_status(
     task_id: str, agent_service: AgentService = Depends(get_agent_service)
 ):
@@ -53,4 +56,4 @@ async def get_task_status(
     task_status = agent_service.get_task_status(task_id)
     if task_status is None:
         raise HTTPException(status_code=404, detail="Task not found")
-    return {"task_id": task_id, "status": task_status}
+    return TaskStatusResponse(task_id=task_id, status=task_status)

cua2-core/src/cua2_core/routes/websocket.py

@@ -1,10 +1,9 @@
 import json
 
-from fastapi import APIRouter, WebSocket, WebSocketDisconnect
-
 # Get services from app state
 from cua2_core.app import app
-from cua2_core.models.models import UserTaskMessage, AgentTrace, HeartbeatEvent
+from cua2_core.models.models import AgentTrace, HeartbeatEvent
+from fastapi import APIRouter, WebSocket, WebSocketDisconnect
 
 # Create router
 router = APIRouter()
@@ -34,7 +33,7 @@ async def websocket_endpoint(websocket: WebSocket):
                     # Parse the message
                     message_data = json.loads(data)
                     print(f"Received message: {message_data}")
-                    
+
                     # Check if it's a user task message
                     if message_data.get("type") == "user_task":
                         # Extract and parse the trace
@@ -43,10 +42,13 @@ async def websocket_endpoint(websocket: WebSocket):
                             # Convert timestamp string to datetime if needed
                             if isinstance(trace_data.get("timestamp"), str):
                                 from datetime import datetime
-                                trace_data["timestamp"] = datetime.fromisoformat(trace_data["timestamp"].replace("Z", "+00:00"))
-                            
+
+                                trace_data["timestamp"] = datetime.fromisoformat(
+                                    trace_data["timestamp"].replace("Z", "+00:00")
+                                )
+
                             trace = AgentTrace(**trace_data)
-                            
+
                             # Process the user task with the trace
                             trace_id = await agent_service.process_user_task(trace)
                             print(f"Started processing trace: {trace_id}")
@@ -56,9 +58,9 @@ async def websocket_endpoint(websocket: WebSocket):
                 except json.JSONDecodeError as e:
                     print(f"JSON decode error: {e}")
                     from cua2_core.models.models import AgentErrorEvent
+
                     error_response = AgentErrorEvent(
-                        type="agent_error", 
-                        error="Invalid JSON format"
+                        type="agent_error", error="Invalid JSON format"
                     )
                     await websocket_manager.send_personal_message(
                         error_response, websocket
@@ -67,11 +69,12 @@ async def websocket_endpoint(websocket: WebSocket):
                 except Exception as e:
                     print(f"Error processing message: {e}")
                     import traceback
+
                     traceback.print_exc()
                     from cua2_core.models.models import AgentErrorEvent
+
                     error_response = AgentErrorEvent(
-                        type="agent_error",
-                        error=f"Error processing message: {str(e)}"
+                        type="agent_error", error=f"Error processing message: {str(e)}"
                     )
                     await websocket_manager.send_personal_message(
                         error_response, websocket

cua2-core/src/cua2_core/services/__init__.py

@@ -1,2 +1 @@
 """Services module for CUA2 Core"""
-

cua2-core/src/cua2_core/services/agent_service.py

@@ -1,20 +1,19 @@
 import asyncio
-import json
 import base64
-from datetime import datetime
+import json
 from pathlib import Path
 from typing import Optional
 
 from cua2_core.models.models import (
     ActiveTask,
-    AgentTrace,
-    AgentStep,
     AgentAction,
-    AgentTraceMetadata,
-    AgentStartEvent,
-    AgentProgressEvent,
     AgentCompleteEvent,
     AgentErrorEvent,
+    AgentProgressEvent,
+    AgentStartEvent,
+    AgentStep,
+    AgentTrace,
+    AgentTraceMetadata,
     VncUrlSetEvent,
     VncUrlUnsetEvent,
 )
@@ -27,8 +26,12 @@ class AgentService:
     def __init__(self, websocket_manager):
         self.active_tasks: dict[str, ActiveTask] = {}
         self.websocket_manager: WebSocketManager = websocket_manager
-        self.simulation_data_path = Path(__file__).parent / "simulation_metadata" / "simulated_trace.json"
-        self.simulation_images_path = Path(__file__).parent / "simulation_metadata" / "images"
+        self.simulation_data_path = (
+            Path(__file__).parent / "simulation_metadata" / "simulated_trace.json"
+        )
+        self.simulation_images_path = (
+            Path(__file__).parent / "simulation_metadata" / "images"
+        )
 
     async def process_user_task(self, trace: AgentTrace) -> str:
         """Process a user task and return the trace ID"""
@@ -48,59 +51,52 @@ class AgentService:
         )
 
         # Start the agent processing in the background
-        asyncio.create_task(
-            self._simulate_agent_processing(trace)
-        )
+        asyncio.create_task(self._simulate_agent_processing(trace))
 
         return trace_id
 
-
     async def _simulate_agent_processing(self, trace: AgentTrace):
         """Simulate agent processing using simulated_trace.json data"""
         trace_id = trace.id
-        
+
         try:
             # Load simulation data
-            with open(self.simulation_data_path, 'r') as f:
+            with open(self.simulation_data_path, "r") as f:
                 simulation_data = json.load(f)
-            
+
             # Send agent start event with the initial trace
-            start_event = AgentStartEvent(
-                type="agent_start",
-                agentTrace=trace
-            )
+            start_event = AgentStartEvent(type="agent_start", agentTrace=trace)
             await self.websocket_manager.broadcast(start_event)
 
             # mock VNC URL
             vnc_url = "https://www.youtube.com/embed/VCutEsRSJ5A?si=PT0ETJ7zIJ9ywhGW"
-            vnc_set_event = VncUrlSetEvent(
-                type="vnc_url_set",
-                vncUrl=vnc_url
-            )
+            vnc_set_event = VncUrlSetEvent(type="vnc_url_set", vncUrl=vnc_url)
             await self.websocket_manager.broadcast(vnc_set_event)
 
-            trace_metadata = AgentTraceMetadata(traceId=trace_id)
-            
+            trace_metadata = AgentTraceMetadata(traceId=trace_id, maxSteps=20)
+
             # Process each step from the simulation data
             for step_data in simulation_data["steps"]:
                 # Wait before sending the next step to simulate processing time
-                await asyncio.sleep(step_data["timeTaken"])
-                
+                await asyncio.sleep(step_data["duration"])
+
                 # Load and encode the image
-                image_path = self.simulation_images_path / step_data["image"].split("/")[-1]
-                with open(image_path, 'rb') as img_file:
+                image_path = (
+                    self.simulation_images_path / step_data["image"].split("/")[-1]
+                )
+                with open(image_path, "rb") as img_file:
                     image_bytes = img_file.read()
                     image_base64 = f"data:image/png;base64,{base64.b64encode(image_bytes).decode('utf-8')}"
-                
+
                 # Convert actions to AgentAction objects
                 actions = [
                     AgentAction(
                         actionType=action["actionType"],
-                        actionArguments=action["actionArguments"]
+                        actionArguments=action["actionArguments"],
                     )
                     for action in step_data["actions"]
                 ]
-                
+
                 # Create agent step
                 agent_step = AgentStep(
                     traceId=trace_id,
@@ -108,57 +104,55 @@ class AgentService:
                     image=image_base64,
                     thought=step_data["thought"],
                     actions=actions,
-                    timeTaken=step_data["timeTaken"],
+                    error="",
+                    duration=step_data["duration"],
                     inputTokensUsed=step_data["inputTokensUsed"],
                     outputTokensUsed=step_data["outputTokensUsed"],
-                    timestamp=datetime.fromisoformat(step_data["timestamp"].replace("Z", "+00:00")),
-                    step_evaluation=step_data["step_evaluation"]
+                    step_evaluation=step_data["step_evaluation"],
                 )
 
                 trace_metadata.numberOfSteps += 1
-                trace_metadata.timeTaken += step_data["timeTaken"]
+                trace_metadata.duration += step_data["duration"]
                 trace_metadata.inputTokensUsed += step_data["inputTokensUsed"]
                 trace_metadata.outputTokensUsed += step_data["outputTokensUsed"]
-                
+
                 # Send progress event
                 progress_event = AgentProgressEvent(
                     type="agent_progress",
                     agentStep=agent_step,
-                    traceMetadata=trace_metadata
+                    traceMetadata=trace_metadata,
                 )
                 await self.websocket_manager.broadcast(progress_event)
-                
+
                 # Update active task
                 self.active_tasks[trace_id].steps.append(agent_step)
-            
+
             # Unset VNC URL before completion
             vnc_unset_event = VncUrlUnsetEvent(type="vnc_url_unset")
             await self.websocket_manager.broadcast(vnc_unset_event)
-            
+
             # Send completion event
             complete_event = AgentCompleteEvent(
-                type="agent_complete",
-                traceMetadata=trace_metadata
+                type="agent_complete", traceMetadata=trace_metadata
             )
             await self.websocket_manager.broadcast(complete_event)
-            
+
             # Update active task with final metadata
             self.active_tasks[trace_id].traceMetadata = trace_metadata
-            
+
             # Clean up after a delay
             await asyncio.sleep(1)
             if trace_id in self.active_tasks:
                 del self.active_tasks[trace_id]
-        
+
         except Exception as e:
             print(f"Error in agent simulation: {str(e)}")
             # Send error event
             error_event = AgentErrorEvent(
-                type="agent_error",
-                error=f"Error processing task: {str(e)}"
+                type="agent_error", error=f"Error processing task: {str(e)}"
             )
             await self.websocket_manager.broadcast(error_event)
-            
+
             # Clean up
             if trace_id in self.active_tasks:
                 del self.active_tasks[trace_id]

cua2-core/src/cua2_core/services/simulation_metadata/simulated_trace.json

@@ -13,7 +13,7 @@
           }
         }
       ],
-      "timeTaken": 2.3,
+      "duration": 2.3,
       "inputTokensUsed": 1250,
       "outputTokensUsed": 85,
       "timestamp": "2025-10-17T14:30:02.300Z",
@@ -32,7 +32,7 @@
           }
         }
       ],
-      "timeTaken": 1.8,
+      "duration": 1.8,
       "inputTokensUsed": 1180,
       "outputTokensUsed": 72,
       "timestamp": "2025-10-17T14:30:04.100Z",
@@ -51,7 +51,7 @@
           }
         }
       ],
-      "timeTaken": 1.5,
+      "duration": 1.5,
       "inputTokensUsed": 1100,
       "outputTokensUsed": 68,
       "timestamp": "2025-10-17T14:30:05.600Z",
@@ -59,4 +59,3 @@
     }
   ]
 }
-

cua2-core/src/cua2_core/websocket/__init__.py

@@ -1,2 +1 @@
 """WebSocket module for CUA2 Core"""
-

cua2-core/src/cua2_core/websocket/websocket_manager.py

@@ -2,9 +2,8 @@ import asyncio
 import json
 from typing import Dict, Optional, Set
 
-from fastapi import WebSocket
-
 from cua2_core.models.models import AgentTraceMetadata, WebSocketEvent
+from fastapi import WebSocket
 
 
 class WebSocketManager:
@@ -77,7 +76,10 @@ class WebSocketManager:
         await self.broadcast(event)
 
     async def send_agent_complete(
-        self, content: str, message_id: str, metadata: Optional[AgentTraceMetadata] = None
+        self,
+        content: str,
+        message_id: str,
+        metadata: Optional[AgentTraceMetadata] = None,
     ):
         """Send agent complete event"""
         event = WebSocketEvent(

cua2-front/eslint.config.js

@@ -0,0 +1,26 @@
+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 }],
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+);

cua2-front/index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CUA2</title>
   </head>
@@ -11,4 +10,3 @@
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-

cua2-front/package-lock.json

@@ -10,10 +10,11 @@
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.30.1"
+        "react-router-dom": "^6.30.1",
+        "ulid": "^3.0.1"
       },
       "devDependencies": {
-        "@eslint/js": "^9.32.0",
+        "@eslint/js": "^9.38.0",
         "@types/node": "^22.16.5",
         "@types/react": "^18.3.23",
         "@types/react-dom": "^18.3.7",
@@ -539,9 +540,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.37.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.37.0.tgz",
-      "integrity": "sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.38.0.tgz",
+      "integrity": "sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2020,6 +2021,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/@eslint/js": {
+      "version": "9.37.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.37.0.tgz",
+      "integrity": "sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
     "node_modules/espree": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
@@ -3027,6 +3041,15 @@
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
+    "node_modules/ulid": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ulid/-/ulid-3.0.1.tgz",
+      "integrity": "sha512-dPJyqPzx8preQhqq24bBG1YNkvigm87K8kVEHCD+ruZg24t6IFEFv00xMWfxcC4djmFtiTLdFuADn4+DOz6R7Q==",
+      "license": "MIT",
+      "bin": {
+        "ulid": "dist/cli.js"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",

cua2-front/package.json

@@ -7,17 +7,18 @@
     "dev": "vite",
     "build": "vite build",
     "build:dev": "vite build --mode development",
-    "lint": "eslint src/ --config src/eslint.config.js",
-    "type-check": "tsc --noEmit --project src/tsconfig.json",
+    "lint": "eslint src/ --config eslint.config.js",
+    "type-check": "tsc --noEmit --project tsconfig.json",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^18.3.1",
     "react-router-dom": "^6.30.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "ulid": "^3.0.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.32.0",
+    "@eslint/js": "^9.38.0",
     "@types/node": "^22.16.5",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",

cua2-front/src/App.tsx

@@ -9,7 +9,6 @@ const App = () => (
       {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
     </Routes>
   </BrowserRouter>
-
 );
 
 export default App;

cua2-front/src/component/poc/ConnectionStatus.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface ConnectionStatusProps {
+    isConnected: boolean;
+}
+
+export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ isConnected }) => {
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+            padding: '8px 16px',
+            borderRadius: '20px',
+            backdropFilter: 'blur(10px)',
+            border: '1px solid rgba(255, 255, 255, 0.3)'
+        }}>
+            <div style={{
+                width: '8px',
+                height: '8px',
+                borderRadius: '50%',
+                backgroundColor: isConnected ? '#10b981' : '#ef4444',
+                boxShadow: isConnected ? '0 0 8px #10b981' : '0 0 8px #ef4444',
+                animation: isConnected ? 'pulse 2s infinite' : 'none'
+            }}></div>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <span className="text-xs font-semibold text-white" style={{ lineHeight: '1.2' }}>
+                    {isConnected ? 'Connected' : 'Disconnected'}
+                </span>
+                <span className="text-xs text-white" style={{ opacity: 0.7, fontSize: '10px', lineHeight: '1.2' }}>
+                    WebSocket
+                </span>
+            </div>
+        </div>
+    );
+};

cua2-front/src/component/poc/Header.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ConnectionStatus } from './ConnectionStatus';
+import { ProcessingIndicator } from './ProcessingIndicator';
+import { TaskButton } from './TaskButton';
+
+interface HeaderProps {
+    isConnected: boolean;
+    isAgentProcessing: boolean;
+    onSendTask: (content: string, modelId: string) => void;
+}
+
+export const Header: React.FC<HeaderProps> = ({ isConnected, isAgentProcessing, onSendTask }) => {
+    return (
+        <>
+            <div style={{
+                flexShrink: 0,
+            }}>
+                <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '20px 32px' }}>
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-6">
+                            <ConnectionStatus isConnected={isConnected} />
+                            <h1 className="text-3xl font-bold text-white" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
+                                CUA2 Agent
+                            </h1>
+                        </div>
+                        <ProcessingIndicator isAgentProcessing={isAgentProcessing} />
+                    </div>
+                    <TaskButton
+                        isAgentProcessing={isAgentProcessing}
+                        isConnected={isConnected}
+                        onSendTask={onSendTask}
+                    />
+                </div>
+            </div>
+
+            <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      `}</style>
+        </>
+    );
+};

cua2-front/src/component/poc/Metadata.tsx

@@ -0,0 +1,38 @@
+import { AgentTrace } from '@/types/agent';
+import React from 'react';
+
+interface MetadataProps {
+    trace?: AgentTrace;
+}
+
+export const Metadata: React.FC<MetadataProps> = ({ trace }) => {
+    return (
+        <div style={{ flexShrink: 0 }} className="bg-white rounded-lg shadow-md border border-gray-200 p-5">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">Metadata</h3>
+            {trace?.metadata ? (
+                <div style={{ display: 'flex', gap: '12px' }}>
+                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#eff6ff', borderRadius: '8px', padding: '12px', border: '1px solid #bfdbfe', boxShadow: '0 2px 4px rgba(59, 130, 246, 0.1)' }}>
+                        <span style={{ fontSize: '10px', fontWeight: 600, color: '#2563eb', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Total Time</span>
+                        <span style={{ fontSize: '24px', fontWeight: 700, color: '#1e40af' }}>{trace.metadata.duration.toFixed(2)}s</span>
+                    </div>
+                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0fdf4', borderRadius: '8px', padding: '12px', border: '1px solid #bbf7d0', boxShadow: '0 2px 4px rgba(16, 185, 129, 0.1)' }}>
+                        <span style={{ fontSize: '10px', fontWeight: 600, color: '#059669', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>In Tokens</span>
+                        <span style={{ fontSize: '24px', fontWeight: 700, color: '#166534' }}>{trace.metadata.inputTokensUsed.toLocaleString()}</span>
+                    </div>
+                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#faf5ff', borderRadius: '8px', padding: '12px', border: '1px solid #e9d5ff', boxShadow: '0 2px 4px rgba(139, 92, 246, 0.1)' }}>
+                        <span style={{ fontSize: '10px', fontWeight: 600, color: '#9333ea', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Out Tokens</span>
+                        <span style={{ fontSize: '24px', fontWeight: 700, color: '#6b21a8' }}>{trace.metadata.outputTokensUsed.toLocaleString()}</span>
+                    </div>
+                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff7ed', borderRadius: '8px', padding: '12px', border: '1px solid #fed7aa', boxShadow: '0 2px 4px rgba(249, 115, 22, 0.1)' }}>
+                        <span style={{ fontSize: '10px', fontWeight: 600, color: '#ea580c', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Total Steps</span>
+                        <span style={{ fontSize: '24px', fontWeight: 700, color: '#c2410c' }}>{trace.metadata.numberOfSteps}</span>
+                    </div>
+                </div>
+            ) : (
+                <div className="text-gray-400 text-sm py-2">
+                    {trace ? 'Waiting for completion...' : 'No task started yet'}
+                </div>
+            )}
+        </div>
+    );
+};

cua2-front/src/component/poc/ProcessingIndicator.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface ProcessingIndicatorProps {
+    isAgentProcessing: boolean;
+}
+
+export const ProcessingIndicator: React.FC<ProcessingIndicatorProps> = ({ isAgentProcessing }) => {
+    if (!isAgentProcessing) return null;
+
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            padding: '10px 20px',
+            backgroundColor: 'rgba(251, 191, 36, 0.2)',
+            borderRadius: '10px',
+            border: '1px solid rgba(251, 191, 36, 0.4)'
+        }}>
+            <span style={{
+                width: '16px',
+                height: '16px',
+                border: '2px solid #fbbf24',
+                borderTopColor: 'transparent',
+                borderRadius: '50%',
+                animation: 'spin 1s linear infinite',
+                display: 'inline-block'
+            }}></span>
+            <span style={{ fontSize: '14px', fontWeight: 600, color: '#fbbf24', letterSpacing: '0.5px' }}>
+                PROCESSING...
+            </span>
+        </div>
+    );
+};

cua2-front/src/component/poc/StackSteps.tsx

@@ -0,0 +1,29 @@
+import { AgentTrace } from '@/types/agent';
+import React from 'react';
+import { StepCard } from './StepCard';
+
+interface StackStepsProps {
+    trace?: AgentTrace;
+}
+
+export const StackSteps: React.FC<StackStepsProps> = ({ trace }) => {
+    return (
+        <div style={{ width: '360px', flexShrink: 0, display: 'flex', flexDirection: 'column', backgroundColor: 'white', borderRadius: '10px', marginLeft: '12px', marginTop: '20px', marginBottom: '20px', boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)', border: '1px solid #e5e7eb' }}>
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">Stack Steps</h3>
+            <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, padding: '16px' }}>
+                {trace?.steps && trace.steps.length > 0 ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                        {trace.steps.map((step, index) => (
+                            <StepCard key={step.stepId} step={step} index={index} />
+                        ))}
+                    </div>
+                ) : (
+                    <div className="flex flex-col items-center justify-center h-full text-gray-400 p-6 text-center">
+                        <p className="font-medium">No steps yet</p>
+                        <p className="text-xs mt-1">Steps will appear as agent progresses</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

cua2-front/src/component/poc/StepCard.tsx

@@ -0,0 +1,84 @@
+import { AgentStep } from '@/types/agent';
+import React from 'react';
+
+interface StepCardProps {
+    step: AgentStep;
+    index: number;
+}
+
+export const StepCard: React.FC<StepCardProps> = ({ step, index }) => {
+    return (
+        <div
+            key={step.stepId}
+            style={{ backgroundColor: '#f9fafb', borderRadius: '8px', border: '1px solid #d1d5db', padding: '12px', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)' }}
+            className="hover:border-blue-400 transition-all"
+        >
+            {/* Step Header */}
+            <div className="mb-6">
+                <span className="text-xs font-bold text-blue-600 uppercase tracking-wide">Step {index + 1}</span>
+                <hr style={{ margin: '12px 0', border: 'none', borderTop: '2px solid #d1d5db' }} />
+            </div>
+
+            {/* Step Image */}
+            {step.image && (
+                <div className="mb-6">
+                    <div className="rounded-md overflow-hidden border border-gray-300 bg-white" style={{ maxHeight: '140px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <img
+                            src={step.image}
+                            alt={`Step ${index + 1}`}
+                            style={{ width: '100%', height: 'auto', maxHeight: '140px', objectFit: 'contain' }}
+                        />
+                    </div>
+                    <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
+                </div>
+            )}
+
+            {/* Thought */}
+            <div className="mb-6">
+                <div className="bg-white rounded-md p-2.5 border border-gray-200">
+                    <h4 className="text-xs font-semibold text-gray-700 mb-1.5 flex items-center gap-1">
+                        <span>💭</span>
+                        <span>Thought</span>
+                    </h4>
+                    <p className="text-xs text-gray-600 leading-relaxed">{step.thought}</p>
+                </div>
+                <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
+            </div>
+
+            {/* Actions */}
+            <div className="mb-6">
+                <div className="bg-white rounded-md p-2.5 border border-gray-200">
+                    <h4 className="text-xs font-semibold text-gray-700 mb-1.5 flex items-center gap-1">
+                        <span>⚡</span>
+                        <span>Actions</span>
+                    </h4>
+                    <ul className="space-y-1" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+                        {step.actions.map((action, actionIndex) => (
+                            <li key={actionIndex} className="text-xs text-gray-600 flex items-start leading-snug">
+                                <span className="mr-1.5 text-blue-500 flex-shrink-0">→</span>
+                                <span className="break-words">{action}</span>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
+            </div>
+
+            {/* Step Metadata Footer */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#eff6ff', borderRadius: '6px', padding: '6px 8px', border: '1px solid #bfdbfe' }}>
+                    <span style={{ fontSize: '9px', fontWeight: 500, color: '#2563eb', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Time</span>
+                    <span style={{ fontSize: '12px', fontWeight: 700, color: '#1e40af' }}>{step.duration.toFixed(2)}s</span>
+                </div>
+                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0fdf4', borderRadius: '6px', padding: '6px 8px', border: '1px solid #bbf7d0' }}>
+                    <span style={{ fontSize: '9px', fontWeight: 500, color: '#059669', textTransform: 'uppercase', letterSpacing: '0.5px' }}>In Tokens</span>
+                    <span style={{ fontSize: '12px', fontWeight: 700, color: '#166534' }}>{step.inputTokensUsed}</span>
+                </div>
+                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#faf5ff', borderRadius: '6px', padding: '6px 8px', border: '1px solid #e9d5ff' }}>
+                    <span style={{ fontSize: '9px', fontWeight: 500, color: '#9333ea', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Out Tokens</span>
+                    <span style={{ fontSize: '12px', fontWeight: 700, color: '#6b21a8' }}>{step.outputTokensUsed}</span>
+                </div>
+            </div>
+        </div>
+    );
+};

cua2-front/src/component/poc/TaskButton.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+interface TaskButtonProps {
+    isAgentProcessing: boolean;
+    isConnected: boolean;
+    onSendTask: (content: string, modelId: string) => void;
+}
+
+export const TaskButton: React.FC<TaskButtonProps> = ({ isAgentProcessing, isConnected, onSendTask }) => {
+    return (
+        <div
+            onClick={() => {
+                if (!isAgentProcessing && isConnected) {
+                    onSendTask(
+                        "Complete the online form by clicking through the required fields",
+                        "anthropic/claude-sonnet-4-5-20250929"
+                    );
+                }
+            }}
+            style={{
+                marginTop: '16px',
+                padding: '14px 18px',
+                background: isAgentProcessing || !isConnected
+                    ? 'rgba(255, 255, 255, 0.1)'
+                    : 'rgba(255, 255, 255, 0.15)',
+                borderRadius: '10px',
+                backdropFilter: 'blur(10px)',
+                border: '2px solid rgba(0, 0, 0, 0.3)',
+                cursor: isAgentProcessing || !isConnected ? 'not-allowed' : 'pointer',
+                transition: 'all 0.3s ease',
+                opacity: isAgentProcessing || !isConnected ? 0.6 : 1,
+            }}
+            onMouseEnter={(e) => {
+                if (!isAgentProcessing && isConnected) {
+                    e.currentTarget.style.background = 'rgba(200, 200, 200, 0.3)';
+                    e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.5)';
+                    e.currentTarget.style.transform = 'translateY(-2px)';
+                    e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.2)';
+                }
+            }}
+            onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
+                e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.3)';
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = 'none';
+            }}
+        >
+            <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+                <div style={{ flex: 1 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+                        <span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(0, 0, 0, 0.7)', textTransform: 'uppercase', letterSpacing: '1px' }}>Task</span>
+                        {!isAgentProcessing && isConnected && (
+                            <span style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.5)', fontStyle: 'italic' }}>
+                                (click to run)
+                            </span>
+                        )}
+                    </div>
+                    <p style={{ fontSize: '15px', fontWeight: 500, color: '#1f2937' }}>
+                        Complete the online form by clicking through the required fields
+                    </p>
+                </div>
+                <div style={{
+                    padding: '8px 16px',
+                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                    borderRadius: '6px',
+                    border: '1px solid rgba(0, 0, 0, 0.2)'
+                }}>
+                    <span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(0, 0, 0, 0.6)', textTransform: 'uppercase', letterSpacing: '1px' }}>Model</span>
+                    <p style={{ fontSize: '12px', fontWeight: 600, color: '#1f2937', marginTop: '2px', whiteSpace: 'nowrap' }}>
+                        claude-sonnet-4-5-20250929
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};

cua2-front/src/component/poc/VNCStream.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface VNCStreamProps {
+    vncUrl: string;
+}
+
+export const VNCStream: React.FC<VNCStreamProps> = ({ vncUrl }) => {
+    return (
+        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', backgroundColor: 'white', borderRadius: '10px', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', border: '1px solid #e5e7eb', overflow: 'hidden', padding: '20px' }}>
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">VNC Stream</h3>
+            <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                {vncUrl ? (
+                    <iframe
+                        src={vncUrl}
+                        style={{ width: '100%', height: '100%', border: 'none' }}
+                        title="VNC Stream"
+                    />
+                ) : (
+                    <div className="text-gray-400 text-center p-8">
+                        <svg className="w-16 h-16 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                        </svg>
+                        <p className="font-medium">No VNC stream available</p>
+                        <p className="text-sm mt-1 text-gray-500">Stream will appear when agent starts</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

cua2-front/src/component/poc/index.ts

@@ -0,0 +1,8 @@
+export { ConnectionStatus } from './ConnectionStatus';
+export { Header } from './Header';
+export { Metadata } from './Metadata';
+export { ProcessingIndicator } from './ProcessingIndicator';
+export { StackSteps } from './StackSteps';
+export { StepCard } from './StepCard';
+export { TaskButton } from './TaskButton';
+export { VNCStream } from './VNCStream';

cua2-front/src/components/mock/ConnectionStatus.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface ConnectionStatusProps {
+  isConnected: boolean;
+}
+
+export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ isConnected }) => {
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      backgroundColor: 'rgba(255, 255, 255, 0.2)',
+      padding: '8px 16px',
+      borderRadius: '20px',
+      backdropFilter: 'blur(10px)',
+      border: '1px solid rgba(255, 255, 255, 0.3)'
+    }}>
+      <div style={{
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: isConnected ? '#10b981' : '#ef4444',
+        boxShadow: isConnected ? '0 0 8px #10b981' : '0 0 8px #ef4444',
+        animation: isConnected ? 'pulse 2s infinite' : 'none'
+      }}></div>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <span className="text-xs font-semibold text-white" style={{ lineHeight: '1.2' }}>
+          {isConnected ? 'Connected' : 'Disconnected'}
+        </span>
+        <span className="text-xs text-white" style={{ opacity: 0.7, fontSize: '10px', lineHeight: '1.2' }}>
+          WebSocket
+        </span>
+      </div>
+    </div>
+  );
+};

cua2-front/src/components/mock/Header.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ConnectionStatus } from './ConnectionStatus';
+import { ProcessingIndicator } from './ProcessingIndicator';
+import { TaskButton } from './TaskButton';
+
+interface HeaderProps {
+  isConnected: boolean;
+  isAgentProcessing: boolean;
+  onSendTask: (content: string, modelId: string) => void;
+}
+
+export const Header: React.FC<HeaderProps> = ({ isConnected, isAgentProcessing, onSendTask }) => {
+  return (
+    <>
+      <div style={{
+        flexShrink: 0,
+      }}>
+        <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '20px 32px' }}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-6">
+              <ConnectionStatus isConnected={isConnected} />
+              <h1 className="text-3xl font-bold text-white" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
+                CUA2 Agent
+              </h1>
+            </div>
+            <ProcessingIndicator isAgentProcessing={isAgentProcessing} />
+          </div>
+          <TaskButton
+            isAgentProcessing={isAgentProcessing}
+            isConnected={isConnected}
+            onSendTask={onSendTask}
+          />
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      `}</style>
+    </>
+  );
+};

cua2-front/src/components/mock/Metadata.tsx

@@ -0,0 +1,38 @@
+import { AgentTrace } from '@/types/agent';
+import React from 'react';
+
+interface MetadataProps {
+  trace?: AgentTrace;
+}
+
+export const Metadata: React.FC<MetadataProps> = ({ trace }) => {
+  return (
+    <div style={{ flexShrink: 0 }} className="bg-white rounded-lg shadow-md border border-gray-200 p-5">
+      <h3 className="text-lg font-semibold text-gray-800 mb-4">Metadata</h3>
+      {trace?.metadata ? (
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#eff6ff', borderRadius: '8px', padding: '12px', border: '1px solid #bfdbfe', boxShadow: '0 2px 4px rgba(59, 130, 246, 0.1)' }}>
+            <span style={{ fontSize: '10px', fontWeight: 600, color: '#2563eb', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Total Time</span>
+            <span style={{ fontSize: '24px', fontWeight: 700, color: '#1e40af' }}>{trace.metadata.duration.toFixed(2)}s</span>
+          </div>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0fdf4', borderRadius: '8px', padding: '12px', border: '1px solid #bbf7d0', boxShadow: '0 2px 4px rgba(16, 185, 129, 0.1)' }}>
+            <span style={{ fontSize: '10px', fontWeight: 600, color: '#059669', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>In Tokens</span>
+            <span style={{ fontSize: '24px', fontWeight: 700, color: '#166534' }}>{trace.metadata.inputTokensUsed.toLocaleString()}</span>
+          </div>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#faf5ff', borderRadius: '8px', padding: '12px', border: '1px solid #e9d5ff', boxShadow: '0 2px 4px rgba(139, 92, 246, 0.1)' }}>
+            <span style={{ fontSize: '10px', fontWeight: 600, color: '#9333ea', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Out Tokens</span>
+            <span style={{ fontSize: '24px', fontWeight: 700, color: '#6b21a8' }}>{trace.metadata.outputTokensUsed.toLocaleString()}</span>
+          </div>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff7ed', borderRadius: '8px', padding: '12px', border: '1px solid #fed7aa', boxShadow: '0 2px 4px rgba(249, 115, 22, 0.1)' }}>
+            <span style={{ fontSize: '10px', fontWeight: 600, color: '#ea580c', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Total Steps</span>
+            <span style={{ fontSize: '24px', fontWeight: 700, color: '#c2410c' }}>{trace.metadata.numberOfSteps}</span>
+          </div>
+        </div>
+      ) : (
+        <div className="text-gray-400 text-sm py-2">
+          {trace ? 'Waiting for completion...' : 'No task started yet'}
+        </div>
+      )}
+    </div>
+  );
+};

cua2-front/src/components/mock/ProcessingIndicator.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface ProcessingIndicatorProps {
+  isAgentProcessing: boolean;
+}
+
+export const ProcessingIndicator: React.FC<ProcessingIndicatorProps> = ({ isAgentProcessing }) => {
+  if (!isAgentProcessing) return null;
+
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: '10px',
+      padding: '10px 20px',
+      backgroundColor: 'rgba(251, 191, 36, 0.2)',
+      borderRadius: '10px',
+      border: '1px solid rgba(251, 191, 36, 0.4)'
+    }}>
+      <span style={{
+        width: '16px',
+        height: '16px',
+        border: '2px solid #fbbf24',
+        borderTopColor: 'transparent',
+        borderRadius: '50%',
+        animation: 'spin 1s linear infinite',
+        display: 'inline-block'
+      }}></span>
+      <span style={{ fontSize: '14px', fontWeight: 600, color: '#fbbf24', letterSpacing: '0.5px' }}>
+        PROCESSING...
+      </span>
+    </div>
+  );
+};

cua2-front/src/components/mock/StackSteps.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { AgentTrace } from '@/types/agent';
+import { StepCard } from './StepCard';
+
+interface StackStepsProps {
+  trace?: AgentTrace;
+}
+
+export const StackSteps: React.FC<StackStepsProps> = ({ trace }) => {
+  return (
+    <div style={{ width: '360px', flexShrink: 0, display: 'flex', flexDirection: 'column', backgroundColor: 'white', borderRadius: '10px', marginLeft: '12px', marginTop: '20px', marginBottom: '20px', boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)', border: '1px solid #e5e7eb' }}>
+      <h3 className="text-lg font-semibold text-gray-800 mb-4">Stack Steps</h3>
+      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, padding: '16px' }}>
+        {trace?.steps && trace.steps.length > 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            {trace.steps.map((step, index) => (
+              <StepCard key={step.stepId} step={step} index={index} />
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full text-gray-400 p-6 text-center">
+            <p className="font-medium">No steps yet</p>
+            <p className="text-xs mt-1">Steps will appear as agent progresses</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

cua2-front/src/components/mock/StepCard.tsx

@@ -0,0 +1,84 @@
+import { AgentStep } from '@/types/agent';
+import React from 'react';
+
+interface StepCardProps {
+  step: AgentStep;
+  index: number;
+}
+
+export const StepCard: React.FC<StepCardProps> = ({ step, index }) => {
+  return (
+    <div
+      key={step.stepId}
+      style={{ backgroundColor: '#f9fafb', borderRadius: '8px', border: '1px solid #d1d5db', padding: '12px', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)' }}
+      className="hover:border-blue-400 transition-all"
+    >
+      {/* Step Header */}
+      <div className="mb-6">
+        <span className="text-xs font-bold text-blue-600 uppercase tracking-wide">Step {index + 1}</span>
+        <hr style={{ margin: '12px 0', border: 'none', borderTop: '2px solid #d1d5db' }} />
+      </div>
+
+      {/* Step Image */}
+      {step.image && (
+        <div className="mb-6">
+          <div className="rounded-md overflow-hidden border border-gray-300 bg-white" style={{ maxHeight: '140px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <img
+              src={step.image}
+              alt={`Step ${index + 1}`}
+              style={{ width: '100%', height: 'auto', maxHeight: '140px', objectFit: 'contain' }}
+            />
+          </div>
+          <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
+        </div>
+      )}
+
+      {/* Thought */}
+      <div className="mb-6">
+        <div className="bg-white rounded-md p-2.5 border border-gray-200">
+          <h4 className="text-xs font-semibold text-gray-700 mb-1.5 flex items-center gap-1">
+            <span>💭</span>
+            <span>Thought</span>
+          </h4>
+          <p className="text-xs text-gray-600 leading-relaxed">{step.thought}</p>
+        </div>
+        <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
+      </div>
+
+      {/* Actions */}
+      <div className="mb-6">
+        <div className="bg-white rounded-md p-2.5 border border-gray-200">
+          <h4 className="text-xs font-semibold text-gray-700 mb-1.5 flex items-center gap-1">
+            <span>⚡</span>
+            <span>Actions</span>
+          </h4>
+          <ul className="space-y-1" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+            {step.actions.map((action, actionIndex) => (
+              <li key={actionIndex} className="text-xs text-gray-600 flex items-start leading-snug">
+                <span className="mr-1.5 text-blue-500 flex-shrink-0">→</span>
+                <span className="break-words">{action}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
+      </div>
+
+      {/* Step Metadata Footer */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#eff6ff', borderRadius: '6px', padding: '6px 8px', border: '1px solid #bfdbfe' }}>
+          <span style={{ fontSize: '9px', fontWeight: 500, color: '#2563eb', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Time</span>
+          <span style={{ fontSize: '12px', fontWeight: 700, color: '#1e40af' }}>{step.duration.toFixed(2)}s</span>
+        </div>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0fdf4', borderRadius: '6px', padding: '6px 8px', border: '1px solid #bbf7d0' }}>
+          <span style={{ fontSize: '9px', fontWeight: 500, color: '#059669', textTransform: 'uppercase', letterSpacing: '0.5px' }}>In Tokens</span>
+          <span style={{ fontSize: '12px', fontWeight: 700, color: '#166534' }}>{step.inputTokensUsed}</span>
+        </div>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#faf5ff', borderRadius: '6px', padding: '6px 8px', border: '1px solid #e9d5ff' }}>
+          <span style={{ fontSize: '9px', fontWeight: 500, color: '#9333ea', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Out Tokens</span>
+          <span style={{ fontSize: '12px', fontWeight: 700, color: '#6b21a8' }}>{step.outputTokensUsed}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

cua2-front/src/components/mock/TaskButton.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+interface TaskButtonProps {
+  isAgentProcessing: boolean;
+  isConnected: boolean;
+  onSendTask: (content: string, modelId: string) => void;
+}
+
+export const TaskButton: React.FC<TaskButtonProps> = ({ isAgentProcessing, isConnected, onSendTask }) => {
+  return (
+    <div
+      onClick={() => {
+        if (!isAgentProcessing && isConnected) {
+          onSendTask(
+            "Complete the online form by clicking through the required fields",
+            "anthropic/claude-sonnet-4-5-20250929"
+          );
+        }
+      }}
+      style={{
+        marginTop: '16px',
+        padding: '14px 18px',
+        background: isAgentProcessing || !isConnected
+          ? 'rgba(255, 255, 255, 0.1)'
+          : 'rgba(255, 255, 255, 0.15)',
+        borderRadius: '10px',
+        backdropFilter: 'blur(10px)',
+        border: '2px solid rgba(0, 0, 0, 0.3)',
+        cursor: isAgentProcessing || !isConnected ? 'not-allowed' : 'pointer',
+        transition: 'all 0.3s ease',
+        opacity: isAgentProcessing || !isConnected ? 0.6 : 1,
+      }}
+      onMouseEnter={(e) => {
+        if (!isAgentProcessing && isConnected) {
+          e.currentTarget.style.background = 'rgba(200, 200, 200, 0.3)';
+          e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.5)';
+          e.currentTarget.style.transform = 'translateY(-2px)';
+          e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.2)';
+        }
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
+        e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.3)';
+        e.currentTarget.style.transform = 'translateY(0)';
+        e.currentTarget.style.boxShadow = 'none';
+      }}
+    >
+      <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+        <div style={{ flex: 1 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+            <span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(0, 0, 0, 0.7)', textTransform: 'uppercase', letterSpacing: '1px' }}>Task</span>
+            {!isAgentProcessing && isConnected && (
+              <span style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.5)', fontStyle: 'italic' }}>
+                (click to run)
+              </span>
+            )}
+          </div>
+          <p style={{ fontSize: '15px', fontWeight: 500, color: '#1f2937' }}>
+            Complete the online form by clicking through the required fields
+          </p>
+        </div>
+        <div style={{
+          padding: '8px 16px',
+          backgroundColor: 'rgba(0, 0, 0, 0.1)',
+          borderRadius: '6px',
+          border: '1px solid rgba(0, 0, 0, 0.2)'
+        }}>
+          <span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(0, 0, 0, 0.6)', textTransform: 'uppercase', letterSpacing: '1px' }}>Model</span>
+          <p style={{ fontSize: '12px', fontWeight: 600, color: '#1f2937', marginTop: '2px', whiteSpace: 'nowrap' }}>
+            claude-sonnet-4-5-20250929
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

cua2-front/src/components/mock/VNCStream.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface VNCStreamProps {
+  vncUrl: string;
+}
+
+export const VNCStream: React.FC<VNCStreamProps> = ({ vncUrl }) => {
+  return (
+    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', backgroundColor: 'white', borderRadius: '10px', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', border: '1px solid #e5e7eb', overflow: 'hidden', padding: '20px' }}>
+      <h3 className="text-lg font-semibold text-gray-800 mb-4">VNC Stream</h3>
+      <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        {vncUrl ? (
+          <iframe
+            src={vncUrl}
+            style={{ width: '100%', height: '100%', border: 'none' }}
+            title="VNC Stream"
+          />
+        ) : (
+          <div className="text-gray-400 text-center p-8">
+            <svg className="w-16 h-16 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+            <p className="font-medium">No VNC stream available</p>
+            <p className="text-sm mt-1 text-gray-500">Stream will appear when agent starts</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

cua2-front/src/components/mock/index.ts

@@ -0,0 +1,8 @@
+export { ConnectionStatus } from './ConnectionStatus';
+export { ProcessingIndicator } from './ProcessingIndicator';
+export { TaskButton } from './TaskButton';
+export { Header } from './Header';
+export { VNCStream } from './VNCStream';
+export { Metadata } from './Metadata';
+export { StepCard } from './StepCard';
+export { StackSteps } from './StackSteps';

cua2-front/src/index.css

@@ -4,8 +4,12 @@
   box-sizing: border-box;
 }
 
-body {
+html, body {
   margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -15,6 +19,7 @@ body {
 
 #root {
   width: 100%;
-  height: 100vh;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
-

cua2-front/src/pages/Index.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
 import { useWebSocket } from '@/hooks/useWebSocket';
-import { AgentMessage, WebSocketEvent } from '@/types/agent';
-import { useEffect, useState } from 'react';
+import { WebSocketEvent } from '@/types/agent';
+import { useState } from 'react';
+import { AgentTrace, AgentStep } from '@/types/agent';
+import { ulid } from 'ulid';
+import { Header, VNCStream, Metadata, StackSteps } from '@/components/mock';
 
 const Index = () => {
-  const [messages, setMessages] = useState<AgentMessage[]>([]);
+  const [trace, setTrace] = useState<AgentTrace>();
   const [isAgentProcessing, setIsAgentProcessing] = useState(false);
   const [vncUrl, setVncUrl] = useState<string>('');
+  const [selectedModelId, setSelectedModelId] = useState<string>("claude-sonnet-4-5-20250929");
 
-  // WebSocket connection - Use environment variable for flexibility across environments
+  // #################### WebSocket Connection ########################
+
+  // WebSocket connection - Use environment variable
   // const WS_URL = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:8000/ws';
   const WS_URL = 'ws://localhost:8000/ws';
 
@@ -18,71 +24,59 @@ const Index = () => {
     switch (event.type) {
       case 'agent_start':
         setIsAgentProcessing(true);
-        if (event.content) {
-          const newMessage: AgentMessage = {
-            id: event.messageId,
-            type: 'agent',
-            instructions: event.instructions,
-            modelId: event.modelId,
-            timestamp: new Date(),
-            isLoading: true,
-          };
-          setMessages(prev => [...prev, newMessage]);
-        }
+        setTrace(event.agentTrace);
+        console.log('Agent start received:', event.agentTrace);
         break;
 
       case 'agent_progress':
-        if (event.messageId && event.agentStep) {
-          // Add new step from a agent trace run with image, generated text, actions, tokens and timestamp
-          setMessages(prev =>
-            prev.map(msg => {
-              if (msg.id === event.agentStep.messageId) {
-                const existingSteps = msg.steps || [];
-                const stepExists = existingSteps.some(step => step.stepId === event.agentStep.stepId);
-                
-                if (!stepExists) {
-                  return { ...msg, steps: [...existingSteps, event.agentStep], isLoading: true };
-                }
-                return msg;
-              }
-              return msg;
-            })
-          );
-        }
+        // Add new step from a agent trace run with image, generated text, actions, tokens and timestamp
+        setTrace(prev => {
+          const existingSteps = prev?.steps || [] as AgentStep[];
+          const stepExists = existingSteps.some(step => step.stepId === event.agentStep.stepId);
+
+          if (!stepExists) {
+            return {
+              ...prev,
+              steps: [...existingSteps, event.agentStep],
+              traceMetadata: event.traceMetadata,
+              isRunning: true
+            };
+          }
+          return prev;
+        });
+        console.log('Agent progress received:', event.agentStep);
         break;
 
       case 'agent_complete':
         setIsAgentProcessing(false);
-        if (event.messageId && event.metadata) {
-          setMessages(prev =>
-            prev.map(msg =>
-              msg.id === event.metadata.messageId
-                ? {
-                  ...msg,
-                  isLoading: false,
-                  metadata: event.metadata,
-                }
-                : msg
-            )
-          );
-        }
+        setTrace(trace => {
+          return trace.id === event.traceMetadata.traceId
+              ? {
+                ...trace,
+                isRunning: false,
+                metadata: event.traceMetadata,
+              }
+              : trace;
+        });
+        console.log('Agent complete received:', event.traceMetadata);
         break;
 
       case 'agent_error':
         setIsAgentProcessing(false);
         // TODO: Handle agent error
+        console.log('Agent error received:', event.error);
         break;
 
       case 'vnc_url_set':
-        if (event.vncUrl) {
-          setVncUrl(event.vncUrl);
-        }
+        setVncUrl(event.vncUrl);
         // TODO: Handle VNC URL set
+        console.log('VNC URL set received:', event.vncUrl);
         break;
 
       case 'vnc_url_unset':
         setVncUrl('');
         // TODO: Handle VNC URL unset
+        console.log('VNC URL unset received:');
         break;
 
       case 'heartbeat':
@@ -92,7 +86,7 @@ const Index = () => {
   };
 
   const handleWebSocketError = () => {
-    // Error handling is now throttled in the WebSocket hook
+    // WebSocket Frontend Error handling
 
   };
 
@@ -102,29 +96,52 @@ const Index = () => {
     onError: handleWebSocketError,
   });
 
-  const handleSendMessage = (content: string) => {
-    const userMessage: AgentMessage = {
-      id: Date.now().toString(),
-      type: 'user',
-      content,
+  // #################### Frontend Functionality ########################
+
+  const handleModelId = (modelId: string) => {
+    setSelectedModelId(modelId);
+  };
+
+  const handleSendNewTask = (content: string, modelId: string) => {
+    const trace: AgentTrace = {
+      id: ulid(),
+      instruction: content,
+      modelId: selectedModelId,
       timestamp: new Date(),
+      isRunning: true,
     };
 
-    setMessages(prev => [...prev, userMessage]);
+    setTrace(trace);
 
     // Send message to Python backend via WebSocket
     sendMessage({
       type: 'user_task',
-      content,
-      model_id: "anthropic/claude-sonnet-4-5-20250929",
-      timestamp: new Date().toISOString(),
+      trace: trace,
     });
   };
 
+  // #################### Mock Frontend Rendering ########################
 
   return (
-    <div>
-      <h1>Hello World</h1>
+    <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', backgroundColor: '#f3f4f6' }}>
+      <Header
+        isConnected={isConnected}
+        isAgentProcessing={isAgentProcessing}
+        onSendTask={handleSendNewTask}
+      />
+
+      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', overflow: 'hidden', minHeight: 0, padding: '32px' }}>
+        <div style={{ width: '100%', height: '100%', maxWidth: '1400px', maxHeight: '900px', display: 'flex', flexDirection: 'row', overflow: 'hidden' }}>
+          {/* Left Side: VNC Stream + Metadata */}
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '20px 12px', gap: '20px', minWidth: 0 }}>
+            <VNCStream vncUrl={vncUrl} />
+            <Metadata trace={trace} />
+          </div>
+
+          {/* Right Side: Stack Steps */}
+          <StackSteps trace={trace} />
+        </div>
+      </div>
     </div>
   );
 };

cua2-front/src/types/agent.ts

@@ -1,36 +1,84 @@
-export interface AgentMessage {
+
+export interface AgentTrace {
   id: string;
-  type: 'user' | 'agent';
   timestamp: Date;
-  instructions: string;
+  instruction: string;
   modelId: string;
+  isRunning: boolean;
   steps?: AgentStep[];
-  metadata?: AgentMetadata;
-  isLoading?: boolean;
+  metadata?: AgentTraceMetadata;
 }
 
 export interface AgentStep {
-  messageId: string;
+  traceId: string;
   stepId: string;
+  error: string;
   image: string;
-  generatedText: string;
+  thought: string;
   actions: string[];
+  duration: number;
   inputTokensUsed: number;
   outputTokensUsed: number;
-  timestamp: Date;
+  step_evaluation: 'like' | 'dislike' | 'neutral';
 }
 
-export interface AgentMetadata {
-  messageId: string;
+export interface AgentTraceMetadata {
+  traceId: string;
   inputTokensUsed: number;
   outputTokensUsed: number;
-  timeTaken: number;
+  duration: number;
   numberOfSteps: number;
 }
 
-export interface WebSocketEvent {
-  type: 'agent_start' | 'agent_progress' | 'agent_complete' | 'agent_error' | 'vnc_url_set' | 'vnc_url_unset' | 'heartbeat';
-  agentStep?: AgentStep;
-  metadata?: AgentMetadata;
-  vncUrl?: string;
+// #################### WebSocket Events Types - Server to Client ########################
+
+interface AgentStartEvent {
+  type: 'agent_start';
+  agentTrace: AgentTrace;
+}
+
+interface AgentProgressEvent {
+  type: 'agent_progress';
+  agentStep: AgentStep;
+  traceMetadata: AgentTraceMetadata;
+}
+
+interface AgentCompleteEvent {
+  type: 'agent_complete';
+  traceMetadata: AgentTraceMetadata;
+}
+
+interface AgentErrorEvent {
+  type: 'agent_error';
+  error: string;
+}
+
+interface VncUrlSetEvent {
+  type: 'vnc_url_set';
+  vncUrl: string;
+}
+
+interface VncUrlUnsetEvent {
+  type: 'vnc_url_unset';
+}
+
+interface HeartbeatEvent {
+  type: 'heartbeat';
+}
+
+export type WebSocketEvent =
+  | AgentStartEvent
+  | AgentProgressEvent
+  | AgentCompleteEvent
+  | AgentErrorEvent
+  | VncUrlSetEvent
+  | VncUrlUnsetEvent
+  | HeartbeatEvent;
+
+// #################### User Task Message Type (Through WebSocket) - Client to Server ########################
+
+
+export interface UserTaskMessage {
+  type: 'user_task';
+  trace: AgentTrace;
 }

cua2-front/tsconfig.app.json

@@ -30,6 +30,6 @@
     }
   },
   "include": [
-    "src",
+    "src"
   ]
-}
+}

pyproject.toml

@@ -0,0 +1,89 @@
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[project]
+name = "cua2-workspace"
+version = "0.0.0-dev.0"
+description = "CUA2 Workspace - A comprehensive platform for AI automation with desktop environments"
+# readme = "README.md"
+authors = [{ name = "Amir Mahla", email = "amir.mahla@icloud.com" }]
+keywords = ["docker", "automation", "gui", "sandbox", "desktop", "playwright", "ai", "workspace"]
+classifiers = [
+    "Development Status :: 4 - Beta",
+    "Intended Audience :: Developers",
+    "License :: OSI Approved :: MIT License",
+    "Operating System :: OS Independent",
+    "Programming Language :: Python :: 3",
+    "Programming Language :: Python :: 3.10",
+    "Programming Language :: Python :: 3.11",
+    "Programming Language :: Python :: 3.12",
+    "Topic :: Software Development :: Testing",
+    "Topic :: System :: Emulators",
+    "Topic :: Desktop Environment",
+]
+requires-python = ">=3.10"
+
+dependencies = [
+    "cua2-core"
+]
+
+
+[tool.uv.workspace]
+members = [
+    "cua2-core",
+]
+
+[tool.uv.sources]
+cua2-core = { workspace = true }
+
+
+[project.optional-dependencies]
+dev = [
+    "pytest>=7.0.0",
+    "pytest-asyncio>=0.21.0",
+    "pytest-cov>=4.0.0",
+    "black>=23.0.0",
+    "isort>=5.12.0",
+    "flake8>=6.0.0",
+    "mypy>=1.0.0",
+    "pre-commit>=3.0.0",
+]
+test = [
+    "pytest>=7.0.0",
+    "pytest-asyncio>=0.21.0",
+    "pytest-cov>=4.0.0",
+]
+
+[tool.hatch.build.targets.wheel]
+packages = ["cua2-core/src/cua2-core"]
+
+[tool.hatch.build.targets.sdist]
+include = [
+    "/cua2-core",
+    "/README.md",
+    "/LICENSE",
+]
+
+[tool.coverage.run]
+source = ["cua2-core"]
+omit = [
+    "*/tests/*",
+    "*/test_*",
+    "*/__pycache__/*",
+    "*/migrations/*",
+]
+
+[tool.coverage.report]
+exclude_lines = [
+    "pragma: no cover",
+    "def __repr__",
+    "if self.debug:",
+    "if settings.DEBUG",
+    "raise AssertionError",
+    "raise NotImplementedError",
+    "if 0:",
+    "if __name__ == .__main__.:",
+    "class .*\\bProtocol\\):",
+    "@(abc\\.)?abstractmethod",
+]