ATM-AgentHub: AI Cockpit Dashboard

ATM-AgentHub is a Fullstack Cockpit Dashboard designed for the supervision, management, and deployment of AI Agents.

The interface provides dynamic real-time management using TanStack Query (React Query) and communicates with a secure Spring Boot API connected to a PostgreSQL database.

✨ Key Features

• Real-Time Analytics Dashboard: Displays global statistics and provides health monitoring for the entire agent fleet.
• Agent Studio (CRUD): Complete interface for deploying (POST), configuring (PUT), and revoking (DELETE) agents.
• Audit Trail (Log Monitor): Reverse-scrolling system console that captures and displays all operations performed on the database.
• Native Dark/Light Mode: Smooth theme management supported directly at the DOM level.

Project Architecture

The repository follows a monorepo structure containing both the frontend application and the backend API:

📁 agenthub-project/
├── 📁 src/                  # Frontend source code (React / Vite)
├── 📁 public/               # Frontend static assets
├── 📁 backend/              # Backend API source code (Spring Boot / Java)
│   ├── 📁 src/main/java/    # Models, Controllers, Services, Repositories
│   └── 📄 pom.xml           # Maven dependencies
├── 📄 package.json          # NPM dependencies
└── 📄 README.md             # This file

Running the Project Locally

The application is designed to be launched easily regardless of your IDE or operating system.

1. Start the Backend (Spring Boot)

This project uses the Maven Wrapper (mvnw), which automatically downloads everything it requires.

The backend is already configured to connect to a remote PostgreSQL database hosted on Neon.tech.

Open a terminal and navigate to the backend directory:

cd backend

Run the application using the wrapper:

./mvnw spring-boot:run

The API is now available at:

http://localhost:8080

2. Start the Frontend (React / Vite)

Open a new terminal at the root of the project (the main folder).

Install dependencies:

npm install

Start the development server:

npm run dev

The frontend application will be available at:

http://localhost:5173

📡 API Reference & Backend Structure

Agent Entity (Data Model)

The agent structure expected and returned by the API is as follows:

{
  "id": Long, // generated automatically, so it can be omitted.
  "name": String,
  "role": String,
  "status": "good" | "warning" | "error" | "offline",
  "successRate": String
}

Logs Entity (Data Model)

The logs structure returned by the API is as follows:

{
  "id": Long,
  "action": String,
  "targetAgent": String,
  "message": String,
  "timestamp": String
}

Main Endpoints

Method	Endpoint	Description	Expected JSON Body
GET	/api/agents	Retrieves all active agents	-
POST	/api/agents	Deploys a new agent	{ "name": "...", "role": "...", "status": "...", "successRate": "..." }
PUT	/api/agents/{id}	Updates an agent configuration	{ "status": "warning" } (Partial updates supported)
DELETE	/api/agents/{id}	Permanently removes an agent	-
POST	/api/agents/batch	Bulk creation of agents	[ { "name": "Agent1"... }, { "name": "Agent2"... } ]
GET	/api/logs	Retrieves audit history (Logs)	-

Note

Every POST, PUT, or DELETE request automatically generates an entry in the operation_logs table, which can be viewed through the Log Monitor interface.