# AI Agent Service Web Dashboard

A React-based analytics dashboard for monitoring AI worker performance and metrics.

## Features

- Real-time analytics dashboard
- Success rate tracking with interactive charts
- Performance metrics visualization
- Responsive design with Tailwind CSS
- TypeScript support

## Development

### Prerequisites

- Node.js 18+
- npm or yarn

### Setup

1. Install dependencies:
```bash
npm install
```

2. Start the development server:
```bash
npm run dev
```

The dashboard will be available at `http://localhost:5173`

### Building

To build for production:
```bash
npm run build
```

## Project Structure

```
web/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── analytics/    # Analytics-specific components
│   │   └── ui/          # Basic UI components
│   ├── hooks/           # Custom React hooks
│   ├── pages/           # Main page components
│   ├── types/           # TypeScript type definitions
│   ├── lib/             # Utility functions
│   └── main.tsx         # Application entry point
├── package.json
└── vite.config.ts
```

## Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
- `npm run type-check` - Run TypeScript type checking

## API Integration

The dashboard connects to the AI Agent Service API running on port 3001. Mock data is used in development mode for testing purposes.