code-review-agent/frontend

AI Review Frontend

React + TypeScript + Vite frontend для AI Code Review Agent.

Установка

# Установите зависимости
npm install

Настройка

Создайте .env файл (опционально):

VITE_API_URL=http://localhost:8000
VITE_WS_URL=ws://localhost:8000

По умолчанию используется proxy в vite.config.ts, так что можно не создавать .env.

Запуск

# Dev сервер
npm run dev

# Откроется на http://localhost:5173

Сборка

# Production сборка
npm run build

# Предпросмотр
npm run preview

Структура

src/
├── api/                # API клиент
│   ├── client.ts       # REST API
│   └── websocket.ts    # WebSocket
├── components/         # React компоненты
│   ├── WebSocketStatus.tsx
│   ├── RepositoryForm.tsx
│   ├── RepositoryList.tsx
│   ├── ReviewProgress.tsx
│   ├── ReviewList.tsx
│   └── CommentsList.tsx
├── pages/              # Страницы
│   ├── Dashboard.tsx
│   ├── Repositories.tsx
│   ├── Reviews.tsx
│   └── ReviewDetail.tsx
├── types/              # TypeScript типы
│   └── index.ts
├── App.tsx             # Главный компонент
├── main.tsx            # Entry point
└── index.css           # Стили

Технологии

• React 18 - UI библиотека
• TypeScript - типизация
• Vite - сборщик
• React Router - роутинг
• TanStack Query - управление состоянием сервера
• Tailwind CSS - стилизация
• date-fns - работа с датами

Страницы

Dashboard /

• Статистика ревью
• Последние ревью
• Real-time обновления

Repositories /repositories

• Список репозиториев
• Добавление нового
• Webhook URL для настройки

Reviews /reviews

• История всех ревью
• Фильтры по статусу
• Детали по клику

Review Detail /reviews/:id

• Информация о PR
• Прогресс ревью
• Список комментариев
• Повтор при ошибке

Real-time обновления

WebSocket подключается автоматически при запуске приложения.

События:

• review_started - начало ревью
• review_progress - прогресс
• review_completed - завершение

Разработка

# Линтинг
npm run lint

# Проверка типов
npx tsc --noEmit

Proxy настройка

В vite.config.ts настроен proxy для API и WebSocket:

proxy: {
  '/api': 'http://localhost:8000',
  '/ws': {
    target: 'ws://localhost:8000',
    ws: true,
  },
}

Это позволяет делать запросы к /api/... без указания полного URL.