Fix project structure

Author: holtskinner

README.md

@@ -1,41 +1,88 @@
-## A2A Protocol Inspector
+# A2A Protocol Inspector
+
 The A2A Inspector is a web-based tool designed to help developers inspect, debug, and validate servers that implement the Google A2A (Agent-to-Agent) protocol. It provides a user-friendly interface to interact with an A2A agent, view communication, and ensure specification compliance.
 
-The application is built with FastAPI and uses Socket.IO for real-time communication.
+The application is built with a FastAPI backend and a TypeScript frontend.
+
+## Features
+
+- **Connect to a local A2A Agent:** Specify the base URL of any agent server to connect (e.g., `http://localhost:5555`).
+- **View Agent Card:** Automatically fetches and displays the agent's card.
+- **Spec Compliance Checks:** Performs basic validation on the agent card to ensure it adheres to the A2A specification.
+- **Live Chat:** A chat interface to send and receive messages with the connected agent.
+- **Debug Console:** A slide-out console shows the raw JSON-RPC 2.0 messages sent and received between the inspector and the agent server.
+
+## Prerequisites
+
+- Python 3.10+
+- [uv](https://github.com/astral-sh/uv)
+- Node.js and npm
 
-### Features
-* Connect to a local A2A Agent: Specify the base URL of any agent server to connect (e.g. http://localhost:5555).
-* View Agent Card: Automatically fetches and displays the agent's card.
-* Spec Compliance Checks: Performs basic validation on the agent card to ensure it adheres to the A2A specification.
-* Messages: A chat interface to send and receive text messages with the connected agent.
-* Debug  Console: A slide-out console at the bottom of the screen shows the raw JSON-RPC 2.0 messages sent and received between the inspector and the agent server.
+## Project Structure
 
+This repository is organized into two main parts:
 
-### Prerequisites
-Python 3.10+
-uv
-Node.js and npm
+- `./backend/`: Contains the Python FastAPI server that handles WebSocket connections and communication with the A2A agent.
+- `./frontend/`: Contains the TypeScript and CSS source files for the web interface.
 
-### Setup and Installation
-Follow these steps to get the A2A Inspector running on your local machine.
+## Setup and Running the Application
 
+Follow these steps to get the A2A Inspector running on your local machine. The setup is a three-step process: install Python dependencies, install Node.js dependencies, and then run the two processes.
+
+### 1. Clone the repository
+
+```sh
+git clone https://github.com/google-a2a/a2a-inspector.git
 cd a2a-inspector
+```
+
+### 2. Install Dependencies
+
+First, install the Python dependencies for the backend from the root directory. `uv sync` reads the `uv.lock` file and installs the exact versions of the packages into a virtual environment.
 
-#### Install Dependencies
-Install all required packages from the requirements.txt file using uv.
+```sh
+# Run from the root of the project
+uv sync
+```
 
-uv pip install -r requirements.txt
+Next, install the Node.js dependencies for the frontend.
 
-From the inspector folder, run:
+```sh
+# Navigate to the frontend directory
+cd frontend
+
+# Install npm packages
 npm install
 
-#### Running the Application
-##### Build the frontend.
-npm run build
+# Go back to the root directory
+cd ..
+```
+
+### 3. Run the Application
+
+The application requires two processes to run concurrently: the frontend build process (in watch mode) and the backend server.
+
+**In your first terminal**, run the frontend development server. This will build the assets and automatically rebuild them when you make changes.
+
+```sh
+# Navigate to the frontend directory
+cd frontend
+
+# Build the frontend and watch for changes
+npm run build -- --watch
+```
+
+**In a second terminal**, run the backend Python server.
+
+```sh
+# Navigate to the backend directory
+cd backend
 
+# Run the FastAPI server with live reload
 uv run app.py
+```
 
+### 4. Access the Inspector
 
-#### Access the Inspector
-Open your web browser and navigate to:
-http://127.0.0.1:5001
+Once both processes are running, open your web browser and navigate to:
+**[http://127.0.0.1:5001](http://127.0.0.1:5001)**

pyproject.toml

@@ -1,5 +1,5 @@
 [project]
-name = "a2a-inspector"
+name = "a2a-inspector-workspace"
 version = "0.1.0"
 readme = "README.md"
 requires-python = ">=3.12"
@@ -14,10 +14,17 @@ dependencies = [
     "starlette>=0.46.1",
     "typing-extensions>=4.12.2",
     "uvicorn>=0.34.0",
+    "python-socketio",
     "Flask",
+    "jinja2",
     "flask_cors",
 ]
 [tool.uv.workspace]
-members = [
-    "inspector",
+members = ["backend"]
+
+[dependency-groups]
+dev = [
+    "mypy>=1.15.0",
+    "ruff>=0.11.6",
+    "types-requests",
 ]