init

2025-10-12 23:15:09 +03:00
commit 09cdd06307
88 changed files with 15007 additions and 0 deletions
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
+
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,135 @@
+# AI Review Frontend
+
+React + TypeScript + Vite frontend для AI Code Review Agent.
+
+## Установка
+
+```bash
+# Установите зависимости
+npm install
+```
+
+## Настройка
+
+Создайте `.env` файл (опционально):
+
+```env
+VITE_API_URL=http://localhost:8000
+VITE_WS_URL=ws://localhost:8000
+```
+
+По умолчанию используется proxy в `vite.config.ts`, так что можно не создавать `.env`.
+
+## Запуск
+
+```bash
+# Dev сервер
+npm run dev
+
+# Откроется на http://localhost:5173
+```
+
+## Сборка
+
+```bash
+# 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` - завершение
+
+## Разработка
+
+```bash
+# Линтинг
+npm run lint
+
+# Проверка типов
+npx tsc --noEmit
+```
+
+## Proxy настройка
+
+В `vite.config.ts` настроен proxy для API и WebSocket:
+
+```ts
+proxy: {
+  '/api': 'http://localhost:8000',
+  '/ws': {
+    target: 'ws://localhost:8000',
+    ws: true,
+  },
+}
+```
+
+Это позволяет делать запросы к `/api/...` без указания полного URL.
+
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Code Review Agent</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "ai-review-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "@tanstack/react-query": "^5.17.9",
+    "axios": "^1.6.5",
+    "date-fns": "^3.0.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  }
+}
+
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,88 @@
+import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Dashboard from './pages/Dashboard';
+import Repositories from './pages/Repositories';
+import Reviews from './pages/Reviews';
+import ReviewDetail from './pages/ReviewDetail';
+import WebSocketStatus from './components/WebSocketStatus';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
+
+function Navigation() {
+  const location = useLocation();
+
+  const navLinks = [
+    { path: '/', label: 'Дашборд', icon: '📊' },
+    { path: '/repositories', label: 'Репозитории', icon: '📁' },
+    { path: '/reviews', label: 'Ревью', icon: '🔍' },
+  ];
+
+  return (
+    <nav className="bg-gray-900 border-b border-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center gap-8">
+            <Link to="/" className="flex items-center gap-2">
+              <span className="text-2xl">🤖</span>
+              <span className="text-xl font-bold text-white">AI Review Agent</span>
+            </Link>
+
+            <div className="flex gap-2">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.path}
+                  to={link.path}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
+                    location.pathname === link.path
+                      ? 'bg-gray-800 text-white'
+                      : 'text-gray-400 hover:text-white hover:bg-gray-800'
+                  }`}
+                >
+                  <span>{link.icon}</span>
+                  <span>{link.label}</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          <WebSocketStatus />
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+function AppContent() {
+  return (
+    <div className="min-h-screen bg-gray-900">
+      <Navigation />
+      
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/repositories" element={<Repositories />} />
+          <Route path="/reviews" element={<Reviews />} />
+          <Route path="/reviews/:id" element={<ReviewDetail />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router>
+        <AppContent />
+      </Router>
+    </QueryClientProvider>
+  );
+}
+
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,71 @@
+import axios from 'axios';
+import type { Repository, RepositoryCreate, Review, ReviewStats } from '../types';
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/api';
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Repositories
+export const getRepositories = async () => {
+  const response = await api.get<{ items: Repository[]; total: number }>('/repositories');
+  return response.data;
+};
+
+export const getRepository = async (id: number) => {
+  const response = await api.get<Repository>(`/repositories/${id}`);
+  return response.data;
+};
+
+export const createRepository = async (data: RepositoryCreate) => {
+  const response = await api.post<Repository>('/repositories', data);
+  return response.data;
+};
+
+export const updateRepository = async (id: number, data: Partial<RepositoryCreate>) => {
+  const response = await api.put<Repository>(`/repositories/${id}`, data);
+  return response.data;
+};
+
+export const deleteRepository = async (id: number) => {
+  const response = await api.delete(`/repositories/${id}`);
+  return response.data;
+};
+
+export const scanRepository = async (id: number) => {
+  const response = await api.post(`/repositories/${id}/scan`);
+  return response.data;
+};
+
+// Reviews
+export const getReviews = async (params?: {
+  skip?: number;
+  limit?: number;
+  repository_id?: number;
+  status?: string;
+}) => {
+  const response = await api.get<{ items: Review[]; total: number }>('/reviews', { params });
+  return response.data;
+};
+
+export const getReview = async (id: number) => {
+  const response = await api.get<Review>(`/reviews/${id}`);
+  return response.data;
+};
+
+export const retryReview = async (id: number) => {
+  const response = await api.post(`/reviews/${id}/retry`);
+  return response.data;
+};
+
+export const getReviewStats = async () => {
+  const response = await api.get<ReviewStats>('/reviews/stats/dashboard');
+  return response.data;
+};
+
+export default api;
+
--- a/frontend/src/api/websocket.ts
+++ b/frontend/src/api/websocket.ts
@@ -0,0 +1,99 @@
+import { WebSocketMessage } from '../types';
+
+const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:8000';
+
+export class WebSocketClient {
+  private ws: WebSocket | null = null;
+  private listeners: Map<string, Set<(data: any) => void>> = new Map();
+  private reconnectAttempts = 0;
+  private maxReconnectAttempts = 5;
+  private reconnectDelay = 3000;
+
+  connect() {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      return;
+    }
+
+    try {
+      this.ws = new WebSocket(`${WS_URL}/ws/reviews`);
+
+      this.ws.onopen = () => {
+        console.log('WebSocket connected');
+        this.reconnectAttempts = 0;
+        this.notifyListeners('connection', { status: 'connected' });
+      };
+
+      this.ws.onmessage = (event) => {
+        try {
+          const message: WebSocketMessage = JSON.parse(event.data);
+          this.notifyListeners(message.type, message);
+        } catch (error) {
+          console.error('Failed to parse WebSocket message:', error);
+        }
+      };
+
+      this.ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+        this.notifyListeners('connection', { status: 'error', error });
+      };
+
+      this.ws.onclose = () => {
+        console.log('WebSocket disconnected');
+        this.notifyListeners('connection', { status: 'disconnected' });
+        this.reconnect();
+      };
+    } catch (error) {
+      console.error('Failed to create WebSocket:', error);
+      this.reconnect();
+    }
+  }
+
+  disconnect() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  private reconnect() {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      console.log(`Reconnecting... Attempt ${this.reconnectAttempts}`);
+      setTimeout(() => this.connect(), this.reconnectDelay);
+    }
+  }
+
+  on(event: string, callback: (data: any) => void) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event)!.add(callback);
+
+    // Return unsubscribe function
+    return () => {
+      const callbacks = this.listeners.get(event);
+      if (callbacks) {
+        callbacks.delete(callback);
+      }
+    };
+  }
+
+  private notifyListeners(event: string, data: any) {
+    const callbacks = this.listeners.get(event);
+    if (callbacks) {
+      callbacks.forEach((callback) => callback(data));
+    }
+  }
+
+  send(message: any) {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(message));
+    } else {
+      console.warn('WebSocket is not connected');
+    }
+  }
+}
+
+// Create singleton instance
+export const wsClient = new WebSocketClient();
+
--- a/frontend/src/components/CommentsList.tsx
+++ b/frontend/src/components/CommentsList.tsx
@@ -0,0 +1,57 @@
+import type { Comment } from '../types';
+
+interface CommentsListProps {
+  comments: Comment[];
+}
+
+export default function CommentsList({ comments }: CommentsListProps) {
+  const severityConfig = {
+    info: { label: 'Инфо', color: 'bg-blue-900 text-blue-200', icon: 'ℹ️' },
+    warning: { label: 'Предупреждение', color: 'bg-yellow-900 text-yellow-200', icon: '⚠️' },
+    error: { label: 'Ошибка', color: 'bg-red-900 text-red-200', icon: '❌' },
+  };
+
+  return (
+    <div className="space-y-4">
+      {comments.map((comment) => {
+        const config = severityConfig[comment.severity];
+        
+        return (
+          <div
+            key={comment.id}
+            className="bg-gray-800 rounded-lg p-4 border border-gray-700"
+          >
+            <div className="flex items-start gap-3">
+              <span className="text-xl">{config.icon}</span>
+              
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className={`px-2 py-1 rounded text-xs ${config.color}`}>
+                    {config.label}
+                  </span>
+                  <code className="text-xs text-gray-400">
+                    {comment.file_path}:{comment.line_number}
+                  </code>
+                  {comment.posted && (
+                    <span className="px-2 py-1 rounded text-xs bg-green-900 text-green-200">
+                      Опубликован
+                    </span>
+                  )}
+                </div>
+                
+                <p className="text-gray-300 text-sm whitespace-pre-wrap">{comment.content}</p>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      {comments.length === 0 && (
+        <div className="text-center py-8 text-gray-500">
+          <p>Комментариев пока нет</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -0,0 +1,153 @@
+import React, { useEffect } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  type?: 'info' | 'success' | 'error' | 'warning';
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  type = 'info',
+}) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const getIconAndColor = () => {
+    switch (type) {
+      case 'success':
+        return { icon: '✅', color: 'text-green-600', bgColor: 'bg-green-50' };
+      case 'error':
+        return { icon: '❌', color: 'text-red-600', bgColor: 'bg-red-50' };
+      case 'warning':
+        return { icon: '⚠️', color: 'text-yellow-600', bgColor: 'bg-yellow-50' };
+      default:
+        return { icon: 'ℹ️', color: 'text-blue-600', bgColor: 'bg-blue-50' };
+    }
+  };
+
+  const { icon, color, bgColor } = getIconAndColor();
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 animate-scale-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className={`${bgColor} px-6 py-4 rounded-t-lg border-b`}>
+          <h3 className={`text-lg font-semibold ${color} flex items-center gap-2`}>
+            <span className="text-2xl">{icon}</span>
+            {title}
+          </h3>
+        </div>
+        <div className="px-6 py-4">
+          {children}
+        </div>
+        <div className="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
+          >
+            Закрыть
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  type?: 'warning' | 'error' | 'info';
+  isLoading?: boolean;
+}
+
+export const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = 'Подтвердить',
+  cancelText = 'Отмена',
+  type = 'warning',
+  isLoading = false,
+}) => {
+  if (!isOpen) return null;
+
+  const getIconAndColor = () => {
+    switch (type) {
+      case 'error':
+        return { icon: '❌', color: 'text-red-600', bgColor: 'bg-red-50', btnColor: 'bg-red-600 hover:bg-red-700' };
+      case 'info':
+        return { icon: 'ℹ️', color: 'text-blue-600', bgColor: 'bg-blue-50', btnColor: 'bg-blue-600 hover:bg-blue-700' };
+      default:
+        return { icon: '⚠️', color: 'text-yellow-600', bgColor: 'bg-yellow-50', btnColor: 'bg-yellow-600 hover:bg-yellow-700' };
+    }
+  };
+
+  const { icon, color, bgColor, btnColor } = getIconAndColor();
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={isLoading ? undefined : onClose}
+    >
+      <div
+        className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 animate-scale-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className={`${bgColor} px-6 py-4 rounded-t-lg border-b`}>
+          <h3 className={`text-lg font-semibold ${color} flex items-center gap-2`}>
+            <span className="text-2xl">{icon}</span>
+            {title}
+          </h3>
+        </div>
+        <div className="px-6 py-4">
+          <p className="text-gray-700">{message}</p>
+        </div>
+        <div className="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={`px-4 py-2 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${btnColor}`}
+          >
+            {isLoading ? '⏳ Загрузка...' : confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
--- a/frontend/src/components/RepositoryEditForm.tsx
+++ b/frontend/src/components/RepositoryEditForm.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import type { Repository } from '../types';
+
+interface RepositoryEditFormProps {
+  repository: Repository;
+  onSubmit: (data: Partial<Repository>) => void;
+  onCancel: () => void;
+}
+
+export default function RepositoryEditForm({ repository, onSubmit, onCancel }: RepositoryEditFormProps) {
+  const [formData, setFormData] = useState({
+    name: repository.name,
+    url: repository.url,
+    api_token: '', // Пустое поле - токен не будет обновлен если оставить пустым
+    is_active: repository.is_active,
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Не отправляем api_token если он пустой
+    const dataToSubmit: any = {
+      name: formData.name,
+      url: formData.url,
+      is_active: formData.is_active,
+    };
+    
+    if (formData.api_token.trim()) {
+      dataToSubmit.api_token = formData.api_token;
+    }
+    
+    onSubmit(dataToSubmit);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          Название репозитория
+        </label>
+        <input
+          type="text"
+          required
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          URL репозитория
+        </label>
+        <input
+          type="url"
+          required
+          value={formData.url}
+          onChange={(e) => setFormData({ ...formData, url: e.target.value })}
+          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          API токен (оставьте пустым чтобы не менять)
+        </label>
+        <input
+          type="password"
+          value={formData.api_token}
+          onChange={(e) => setFormData({ ...formData, api_token: e.target.value })}
+          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
+          placeholder="Введите новый токен или оставьте пустым"
+        />
+        <p className="text-xs text-gray-500 mt-1">
+          Если поле пустое, текущий токен останется без изменений
+        </p>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          id="is_active"
+          checked={formData.is_active}
+          onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+          className="w-4 h-4 bg-gray-700 border-gray-600 rounded"
+        />
+        <label htmlFor="is_active" className="text-sm text-gray-300">
+          Репозиторий активен
+        </label>
+      </div>
+
+      <div className="flex gap-3 pt-4">
+        <button
+          type="submit"
+          className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+        >
+          Сохранить
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors"
+        >
+          Отмена
+        </button>
+      </div>
+    </form>
+  );
+}
+
--- a/frontend/src/components/RepositoryForm.tsx
+++ b/frontend/src/components/RepositoryForm.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import type { Platform, RepositoryCreate } from '../types';
+
+interface RepositoryFormProps {
+  onSubmit: (data: RepositoryCreate) => void;
+  onCancel: () => void;
+}
+
+export default function RepositoryForm({ onSubmit, onCancel }: RepositoryFormProps) {
+  const [formData, setFormData] = useState<RepositoryCreate>({
+    name: '',
+    platform: 'gitea',
+    url: '',
+    api_token: '',
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          Название репозитория
+        </label>
+        <input
+          type="text"
+          required
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
+          placeholder="my-awesome-project"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          Платформа
+        </label>
+        <select
+          value={formData.platform}
+          onChange={(e) => setFormData({ ...formData, platform: e.target.value as Platform })}
+          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
+        >
+          <option value="gitea">Gitea</option>
+          <option value="github">GitHub</option>
+          <option value="bitbucket">Bitbucket</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          URL репозитория
+        </label>
+        <input
+          type="url"
+          required
+          value={formData.url}
+          onChange={(e) => setFormData({ ...formData, url: e.target.value })}
+          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
+          placeholder="https://git.example.com/owner/repo"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          API токен
+        </label>
+        <input
+          type="password"
+          value={formData.api_token}
+          onChange={(e) => setFormData({ ...formData, api_token: e.target.value })}
+          className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
+          placeholder="Оставьте пустым для использования мастер токена"
+        />
+        <p className="text-xs text-gray-400 mt-1">
+          Необязательно. Если не указан, будет использован мастер токен из .env
+        </p>
+      </div>
+
+      <div className="flex gap-3 pt-4">
+        <button
+          type="submit"
+          className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+        >
+          Добавить
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors"
+        >
+          Отмена
+        </button>
+      </div>
+    </form>
+  );
+}
+
--- a/frontend/src/components/RepositoryList.tsx
+++ b/frontend/src/components/RepositoryList.tsx
@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { formatDistance } from 'date-fns';
+import { ru } from 'date-fns/locale';
+import type { Repository } from '../types';
+import RepositoryEditForm from './RepositoryEditForm';
+
+interface RepositoryListProps {
+  repositories: Repository[];
+  onDelete: (id: number) => void;
+  onScan: (id: number) => void;
+  onUpdate: (id: number, data: Partial<Repository>) => void;
+}
+
+export default function RepositoryList({ repositories, onDelete, onScan, onUpdate }: RepositoryListProps) {
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [scanningId, setScanningId] = useState<number | null>(null);
+  const platformIcons = {
+    gitea: '🦊',
+    github: '🐙',
+    bitbucket: '🪣',
+  };
+
+  const handleScan = async (id: number) => {
+    setScanningId(id);
+    try {
+      await onScan(id);
+    } finally {
+      setScanningId(null);
+    }
+  };
+
+  const handleUpdate = async (id: number, data: Partial<Repository>) => {
+    await onUpdate(id, data);
+    setEditingId(null);
+  };
+
+  return (
+    <div className="space-y-4">
+      {repositories.map((repo) => (
+        <div
+          key={repo.id}
+          className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-gray-600 transition-colors"
+        >
+          {editingId === repo.id ? (
+            <RepositoryEditForm
+              repository={repo}
+              onSubmit={(data) => handleUpdate(repo.id, data)}
+              onCancel={() => setEditingId(null)}
+            />
+          ) : (
+            <>
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <span className="text-2xl">{platformIcons[repo.platform]}</span>
+                    <h3 className="text-xl font-semibold text-white">{repo.name}</h3>
+                    <span className={`px-2 py-1 rounded text-xs ${repo.is_active ? 'bg-green-900 text-green-200' : 'bg-gray-700 text-gray-400'}`}>
+                      {repo.is_active ? 'Активен' : 'Неактивен'}
+                    </span>
+                  </div>
+                  
+                  <p className="text-gray-400 text-sm mb-3">{repo.url}</p>
+                  
+                  <div className="bg-gray-900 rounded p-3 mb-3">
+                    <p className="text-xs text-gray-500 mb-1">Webhook URL:</p>
+                    <code className="text-xs text-blue-400 break-all">{repo.webhook_url}</code>
+                  </div>
+                  
+                  <p className="text-xs text-gray-500">
+                    Создан {formatDistance(new Date(repo.created_at), new Date(), { addSuffix: true, locale: ru })}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <button
+                  onClick={() => handleScan(repo.id)}
+                  disabled={scanningId === repo.id || !repo.is_active}
+                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white rounded text-sm transition-colors flex items-center gap-2"
+                >
+                  {scanningId === repo.id ? (
+                    <>
+                      <span className="animate-spin">⏳</span>
+                      Проверяю...
+                    </>
+                  ) : (
+                    <>
+                      🔍 Проверить сейчас
+                    </>
+                  )}
+                </button>
+                
+                <button
+                  onClick={() => setEditingId(repo.id)}
+                  className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded text-sm transition-colors"
+                >
+                  ✏️ Редактировать
+                </button>
+                
+                <button
+                  onClick={() => onDelete(repo.id)}
+                  className="px-4 py-2 bg-red-900 hover:bg-red-800 text-red-200 rounded text-sm transition-colors"
+                >
+                  🗑️ Удалить
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      ))}
+
+      {repositories.length === 0 && (
+        <div className="text-center py-12 text-gray-500">
+          <p className="text-lg">Нет добавленных репозиториев</p>
+          <p className="text-sm mt-2">Добавьте первый репозиторий для начала работы</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
--- a/frontend/src/components/ReviewList.tsx
+++ b/frontend/src/components/ReviewList.tsx
@@ -0,0 +1,96 @@
+import { formatDistance } from 'date-fns';
+import { ru } from 'date-fns/locale';
+import { useNavigate } from 'react-router-dom';
+import type { Review } from '../types';
+import ReviewProgress from './ReviewProgress';
+
+interface ReviewListProps {
+  reviews: Review[];
+  onRetry?: (id: number) => void;
+}
+
+export default function ReviewList({ reviews, onRetry }: ReviewListProps) {
+  const navigate = useNavigate();
+
+  return (
+    <div className="space-y-4">
+      {reviews.map((review) => (
+        <div
+          key={review.id}
+          className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-gray-600 transition-colors cursor-pointer"
+          onClick={() => navigate(`/reviews/${review.id}`)}
+        >
+          <div className="mb-4">
+            <h3 className="text-lg font-semibold text-white mb-1">
+              PR #{review.pull_request.pr_number}: {review.pull_request.title}
+            </h3>
+            <p className="text-sm text-gray-400">
+              Автор: {review.pull_request.author} • {' '}
+              {review.pull_request.source_branch} → {review.pull_request.target_branch}
+            </p>
+          </div>
+
+          <ReviewProgress
+            status={review.status}
+            filesAnalyzed={review.files_analyzed}
+            commentsGenerated={review.comments_generated}
+          />
+
+          <div className="mt-4 flex items-center justify-between text-xs text-gray-500">
+            <span>
+              Начато {formatDistance(new Date(review.started_at), new Date(), { addSuffix: true, locale: ru })}
+            </span>
+            {review.completed_at && (
+              <span>
+                Завершено {formatDistance(new Date(review.completed_at), new Date(), { addSuffix: true, locale: ru })}
+              </span>
+            )}
+          </div>
+
+          {review.error_message && (
+            <div className="mt-3 p-3 bg-red-900/20 border border-red-800 rounded text-sm text-red-300">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1">
+                  <span className="font-semibold">Ошибка:</span> {review.error_message}
+                </div>
+                {onRetry && (review.status === 'failed' || review.status === 'completed') && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onRetry(review.id);
+                    }}
+                    className="flex-shrink-0 px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded transition-colors"
+                  >
+                    🔄 Повторить
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+          
+          {!review.error_message && onRetry && review.status === 'completed' && (
+            <div className="mt-3 flex justify-end">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRetry(review.id);
+                }}
+                className="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white text-xs rounded transition-colors"
+              >
+                🔄 Повторить ревью
+              </button>
+            </div>
+          )}
+        </div>
+      ))}
+
+      {reviews.length === 0 && (
+        <div className="text-center py-12 text-gray-500">
+          <p className="text-lg">Ревью пока нет</p>
+          <p className="text-sm mt-2">Создайте Pull Request в отслеживаемом репозитории</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
--- a/frontend/src/components/ReviewProgress.tsx
+++ b/frontend/src/components/ReviewProgress.tsx
@@ -0,0 +1,42 @@
+import type { ReviewStatus } from '../types';
+
+interface ReviewProgressProps {
+  status: ReviewStatus;
+  filesAnalyzed: number;
+  commentsGenerated: number;
+}
+
+export default function ReviewProgress({ status, filesAnalyzed, commentsGenerated }: ReviewProgressProps) {
+  const statusConfig = {
+    pending: { label: 'Ожидание', color: 'bg-gray-600', progress: 0 },
+    fetching: { label: 'Получение файлов', color: 'bg-blue-600', progress: 25 },
+    analyzing: { label: 'Анализ кода', color: 'bg-blue-600', progress: 50 },
+    commenting: { label: 'Создание комментариев', color: 'bg-blue-600', progress: 75 },
+    completed: { label: 'Завершено', color: 'bg-green-600', progress: 100 },
+    failed: { label: 'Ошибка', color: 'bg-red-600', progress: 100 },
+  };
+
+  const config = statusConfig[status];
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between text-sm">
+        <span className="text-gray-300">{config.label}</span>
+        <span className="text-gray-400">{config.progress}%</span>
+      </div>
+
+      <div className="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
+        <div
+          className={`h-full ${config.color} transition-all duration-500`}
+          style={{ width: `${config.progress}%` }}
+        />
+      </div>
+
+      <div className="flex items-center justify-between text-xs text-gray-500">
+        <span>Файлов: {filesAnalyzed}</span>
+        <span>Комментариев: {commentsGenerated}</span>
+      </div>
+    </div>
+  );
+}
+
--- a/frontend/src/components/WebSocketStatus.tsx
+++ b/frontend/src/components/WebSocketStatus.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { wsClient } from '../api/websocket';
+
+export default function WebSocketStatus() {
+  const [status, setStatus] = useState<'connected' | 'disconnected' | 'error'>('disconnected');
+
+  useEffect(() => {
+    const unsubscribe = wsClient.on('connection', (data: any) => {
+      setStatus(data.status);
+    });
+
+    wsClient.connect();
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  const statusColors = {
+    connected: 'bg-green-500',
+    disconnected: 'bg-gray-500',
+    error: 'bg-red-500',
+  };
+
+  const statusLabels = {
+    connected: 'Подключено',
+    disconnected: 'Отключено',
+    error: 'Ошибка',
+  };
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-gray-800">
+      <div className={`w-2 h-2 rounded-full ${statusColors[status]}`} />
+      <span className="text-sm text-gray-300">{statusLabels[status]}</span>
+    </div>
+  );
+}
+
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes scale-in {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animate-scale-in {
+  animation: scale-in 0.2s ease-out;
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+}
+
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,92 @@
+import { useQuery } from '@tanstack/react-query';
+import { getReviewStats, getReviews } from '../api/client';
+import ReviewList from '../components/ReviewList';
+
+export default function Dashboard() {
+  const { data: stats, isLoading: statsLoading } = useQuery({
+    queryKey: ['reviewStats'],
+    queryFn: getReviewStats,
+    refetchInterval: 10000,
+  });
+
+  const { data: recentReviews, isLoading: reviewsLoading } = useQuery({
+    queryKey: ['recentReviews'],
+    queryFn: () => getReviews({ limit: 5 }),
+    refetchInterval: 10000,
+  });
+
+  if (statsLoading || reviewsLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-96">
+        <div className="text-gray-400">Загрузка...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold text-white mb-2">Дашборд</h1>
+        <p className="text-gray-400">Обзор активности AI ревьювера</p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-400 text-sm font-medium">Всего ревью</h3>
+            <span className="text-2xl">📊</span>
+          </div>
+          <p className="text-3xl font-bold text-white">{stats?.total_reviews || 0}</p>
+        </div>
+
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-400 text-sm font-medium">Активных ревью</h3>
+            <span className="text-2xl">⏳</span>
+          </div>
+          <p className="text-3xl font-bold text-blue-400">{stats?.active_reviews || 0}</p>
+        </div>
+
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-400 text-sm font-medium">Завершено</h3>
+            <span className="text-2xl">✅</span>
+          </div>
+          <p className="text-3xl font-bold text-green-400">{stats?.completed_reviews || 0}</p>
+        </div>
+
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-400 text-sm font-medium">Ошибок</h3>
+            <span className="text-2xl">❌</span>
+          </div>
+          <p className="text-3xl font-bold text-red-400">{stats?.failed_reviews || 0}</p>
+        </div>
+
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-400 text-sm font-medium">Всего комментариев</h3>
+            <span className="text-2xl">💬</span>
+          </div>
+          <p className="text-3xl font-bold text-white">{stats?.total_comments || 0}</p>
+        </div>
+
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-gray-400 text-sm font-medium">Среднее на ревью</h3>
+            <span className="text-2xl">📈</span>
+          </div>
+          <p className="text-3xl font-bold text-white">{stats?.avg_comments_per_review || 0}</p>
+        </div>
+      </div>
+
+      {/* Recent Reviews */}
+      <div>
+        <h2 className="text-2xl font-bold text-white mb-4">Последние ревью</h2>
+        <ReviewList reviews={recentReviews?.items || []} />
+      </div>
+    </div>
+  );
+}
+
--- a/frontend/src/pages/Repositories.tsx
+++ b/frontend/src/pages/Repositories.tsx
@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getRepositories, createRepository, deleteRepository, scanRepository, updateRepository } from '../api/client';
+import RepositoryForm from '../components/RepositoryForm';
+import RepositoryList from '../components/RepositoryList';
+import { Modal, ConfirmModal } from '../components/Modal';
+import type { RepositoryCreate, Repository } from '../types';
+
+export default function Repositories() {
+  const [showForm, setShowForm] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; id: number | null }>({ isOpen: false, id: null });
+  const [scanConfirm, setScanConfirm] = useState<{ isOpen: boolean; id: number | null }>({ isOpen: false, id: null });
+  const [resultModal, setResultModal] = useState<{ isOpen: boolean; type: 'success' | 'error'; message: string }>({ 
+    isOpen: false, 
+    type: 'success', 
+    message: '' 
+  });
+  
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['repositories'],
+    queryFn: getRepositories,
+  });
+
+  const createMutation = useMutation({
+    mutationFn: createRepository,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['repositories'] });
+      setShowForm(false);
+      setResultModal({
+        isOpen: true,
+        type: 'success',
+        message: 'Репозиторий успешно добавлен!'
+      });
+    },
+    onError: (error: any) => {
+      setResultModal({
+        isOpen: true,
+        type: 'error',
+        message: error.response?.data?.detail || error.message || 'Ошибка при добавлении репозитория'
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: number; data: Partial<Repository> }) => updateRepository(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['repositories'] });
+      setResultModal({
+        isOpen: true,
+        type: 'success',
+        message: 'Репозиторий успешно обновлен!'
+      });
+    },
+    onError: (error: any) => {
+      setResultModal({
+        isOpen: true,
+        type: 'error',
+        message: error.response?.data?.detail || error.message || 'Ошибка при обновлении репозитория'
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteRepository,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['repositories'] });
+      setDeleteConfirm({ isOpen: false, id: null });
+      setResultModal({
+        isOpen: true,
+        type: 'success',
+        message: 'Репозиторий успешно удален!'
+      });
+    },
+    onError: (error: any) => {
+      setDeleteConfirm({ isOpen: false, id: null });
+      setResultModal({
+        isOpen: true,
+        type: 'error',
+        message: error.response?.data?.detail || error.message || 'Ошибка при удалении репозитория'
+      });
+    },
+  });
+
+  const scanMutation = useMutation({
+    mutationFn: scanRepository,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['repositories'] });
+      queryClient.invalidateQueries({ queryKey: ['reviews'] });
+      setScanConfirm({ isOpen: false, id: null });
+      setResultModal({
+        isOpen: true,
+        type: 'success',
+        message: data.message || 'Сканирование запущено!'
+      });
+    },
+    onError: (error: any) => {
+      setScanConfirm({ isOpen: false, id: null });
+      setResultModal({
+        isOpen: true,
+        type: 'error',
+        message: error.response?.data?.detail || error.message || 'Ошибка при сканировании'
+      });
+    },
+  });
+
+  const handleCreate = (formData: RepositoryCreate) => {
+    createMutation.mutate(formData);
+  };
+
+  const handleUpdate = (id: number, data: Partial<Repository>) => {
+    updateMutation.mutate({ id, data });
+  };
+
+  const handleDelete = (id: number) => {
+    setDeleteConfirm({ isOpen: true, id });
+  };
+
+  const confirmDelete = () => {
+    if (deleteConfirm.id !== null) {
+      deleteMutation.mutate(deleteConfirm.id);
+    }
+  };
+
+  const handleScan = (id: number) => {
+    setScanConfirm({ isOpen: true, id });
+  };
+
+  const confirmScan = () => {
+    if (scanConfirm.id !== null) {
+      scanMutation.mutate(scanConfirm.id);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-96">
+        <div className="text-gray-400">Загрузка...</div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="space-y-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-white mb-2">Репозитории</h1>
+            <p className="text-gray-400">Управление отслеживаемыми репозиториями</p>
+          </div>
+          
+          {!showForm && (
+            <button
+              onClick={() => setShowForm(true)}
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+            >
+              + Добавить репозиторий
+            </button>
+          )}
+        </div>
+
+        {showForm && (
+          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+            <h2 className="text-xl font-semibold text-white mb-4">Новый репозиторий</h2>
+            <RepositoryForm
+              onSubmit={handleCreate}
+              onCancel={() => setShowForm(false)}
+            />
+          </div>
+        )}
+
+        <RepositoryList
+          repositories={data?.items || []}
+          onDelete={handleDelete}
+          onScan={handleScan}
+          onUpdate={handleUpdate}
+        />
+      </div>
+
+      {/* Модалки */}
+      <ConfirmModal
+        isOpen={deleteConfirm.isOpen}
+        onClose={() => setDeleteConfirm({ isOpen: false, id: null })}
+        onConfirm={confirmDelete}
+        title="Удаление репозитория"
+        message="Вы уверены, что хотите удалить этот репозиторий? Все связанные ревью и комментарии также будут удалены."
+        confirmText="Удалить"
+        cancelText="Отмена"
+        type="error"
+        isLoading={deleteMutation.isPending}
+      />
+
+      <ConfirmModal
+        isOpen={scanConfirm.isOpen}
+        onClose={() => setScanConfirm({ isOpen: false, id: null })}
+        onConfirm={confirmScan}
+        title="Сканирование репозитория"
+        message="Найти все открытые Pull Request и начать ревью?"
+        confirmText="Начать"
+        cancelText="Отмена"
+        type="info"
+        isLoading={scanMutation.isPending}
+      />
+
+      <Modal
+        isOpen={resultModal.isOpen}
+        onClose={() => setResultModal({ ...resultModal, isOpen: false })}
+        title={resultModal.type === 'success' ? 'Успешно' : 'Ошибка'}
+        type={resultModal.type}
+      >
+        <p className="text-gray-700">{resultModal.message}</p>
+      </Modal>
+    </>
+  );
+}
+
--- a/frontend/src/pages/ReviewDetail.tsx
+++ b/frontend/src/pages/ReviewDetail.tsx
@@ -0,0 +1,164 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { getReview, retryReview } from '../api/client';
+import { wsClient } from '../api/websocket';
+import ReviewProgress from '../components/ReviewProgress';
+import CommentsList from '../components/CommentsList';
+import { formatDistance } from 'date-fns';
+import { ru } from 'date-fns/locale';
+
+export default function ReviewDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const { data: review, isLoading } = useQuery({
+    queryKey: ['review', id],
+    queryFn: () => getReview(Number(id)),
+    refetchInterval: (data) => {
+      // Refetch if review is in progress
+      return data?.status && ['pending', 'fetching', 'analyzing', 'commenting'].includes(data.status) 
+        ? 5000 
+        : false;
+    },
+  });
+
+  const retryMutation = useMutation({
+    mutationFn: () => retryReview(Number(id)),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['review', id] });
+    },
+  });
+
+  // Listen to WebSocket updates
+  useEffect(() => {
+    const unsubscribe = wsClient.on('review_progress', (data: any) => {
+      if (data.review_id === Number(id)) {
+        queryClient.invalidateQueries({ queryKey: ['review', id] });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [id, queryClient]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-96">
+        <div className="text-gray-400">Загрузка...</div>
+      </div>
+    );
+  }
+
+  if (!review) {
+    return (
+      <div className="flex items-center justify-center min-h-96">
+        <div className="text-gray-400">Ревью не найдено</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center gap-4">
+        <button
+          onClick={() => navigate('/reviews')}
+          className="text-gray-400 hover:text-white transition-colors"
+        >
+          ← Назад
+        </button>
+        <div className="flex-1">
+          <h1 className="text-3xl font-bold text-white mb-2">
+            Ревью #{review.id}
+          </h1>
+          <p className="text-gray-400">
+            PR #{review.pull_request.pr_number}: {review.pull_request.title}
+          </p>
+        </div>
+      </div>
+
+      {/* PR Info */}
+      <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <h2 className="text-xl font-semibold text-white mb-4">Информация о Pull Request</h2>
+        
+        <div className="space-y-3">
+          <div className="flex items-center gap-3">
+            <span className="text-gray-400 w-32">Автор:</span>
+            <span className="text-white">{review.pull_request.author}</span>
+          </div>
+          
+          <div className="flex items-center gap-3">
+            <span className="text-gray-400 w-32">Ветки:</span>
+            <span className="text-white">
+              {review.pull_request.source_branch} → {review.pull_request.target_branch}
+            </span>
+          </div>
+          
+          <div className="flex items-center gap-3">
+            <span className="text-gray-400 w-32">URL:</span>
+            <a 
+              href={review.pull_request.url} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300"
+            >
+              {review.pull_request.url}
+            </a>
+          </div>
+          
+          <div className="flex items-center gap-3">
+            <span className="text-gray-400 w-32">Начато:</span>
+            <span className="text-white">
+              {formatDistance(new Date(review.started_at), new Date(), { addSuffix: true, locale: ru })}
+            </span>
+          </div>
+          
+          {review.completed_at && (
+            <div className="flex items-center gap-3">
+              <span className="text-gray-400 w-32">Завершено:</span>
+              <span className="text-white">
+                {formatDistance(new Date(review.completed_at), new Date(), { addSuffix: true, locale: ru })}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Progress */}
+      <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <h2 className="text-xl font-semibold text-white mb-4">Прогресс</h2>
+        <ReviewProgress
+          status={review.status}
+          filesAnalyzed={review.files_analyzed}
+          commentsGenerated={review.comments_generated}
+        />
+        
+        {review.status === 'failed' && (
+          <div className="mt-6">
+            <div className="p-4 bg-red-900/20 border border-red-800 rounded text-sm text-red-300 mb-4">
+              Ошибка: {review.error_message}
+            </div>
+            <button
+              onClick={() => retryMutation.mutate()}
+              disabled={retryMutation.isPending}
+              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50"
+            >
+              {retryMutation.isPending ? 'Перезапуск...' : 'Повторить ревью'}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Comments */}
+      <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <h2 className="text-xl font-semibold text-white mb-4">
+          Комментарии ({review.comments?.length || 0})
+        </h2>
+        <CommentsList comments={review.comments || []} />
+      </div>
+    </div>
+  );
+}
+
--- a/frontend/src/pages/Reviews.tsx
+++ b/frontend/src/pages/Reviews.tsx
@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getReviews, retryReview } from '../api/client';
+import ReviewList from '../components/ReviewList';
+import { Modal, ConfirmModal } from '../components/Modal';
+import type { ReviewStatus } from '../types';
+
+export default function Reviews() {
+  const [statusFilter, setStatusFilter] = useState<ReviewStatus | 'all'>('all');
+  const [retryConfirm, setRetryConfirm] = useState<{ isOpen: boolean; id: number | null }>({ isOpen: false, id: null });
+  const [resultModal, setResultModal] = useState<{ isOpen: boolean; type: 'success' | 'error'; message: string }>({ 
+    isOpen: false, 
+    type: 'success', 
+    message: '' 
+  });
+  
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['reviews', statusFilter],
+    queryFn: () => getReviews({ 
+      status: statusFilter === 'all' ? undefined : statusFilter,
+      limit: 50 
+    }),
+    refetchInterval: 10000,
+  });
+
+  const retryMutation = useMutation({
+    mutationFn: retryReview,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['reviews'] });
+      setRetryConfirm({ isOpen: false, id: null });
+      setResultModal({
+        isOpen: true,
+        type: 'success',
+        message: data.message || 'Ревью запущено заново!'
+      });
+    },
+    onError: (error: any) => {
+      setRetryConfirm({ isOpen: false, id: null });
+      setResultModal({
+        isOpen: true,
+        type: 'error',
+        message: error.response?.data?.detail || error.message || 'Ошибка при запуске ревью'
+      });
+    },
+  });
+
+  const handleRetry = (id: number) => {
+    setRetryConfirm({ isOpen: true, id });
+  };
+
+  const confirmRetry = () => {
+    if (retryConfirm.id !== null) {
+      retryMutation.mutate(retryConfirm.id);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-96">
+        <div className="text-gray-400">Загрузка...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold text-white mb-2">Ревью</h1>
+        <p className="text-gray-400">История всех code review</p>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-2">
+        <button
+          onClick={() => setStatusFilter('all')}
+          className={`px-4 py-2 rounded-lg transition-colors ${
+            statusFilter === 'all'
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
+          }`}
+        >
+          Все
+        </button>
+        <button
+          onClick={() => setStatusFilter('pending')}
+          className={`px-4 py-2 rounded-lg transition-colors ${
+            statusFilter === 'pending'
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
+          }`}
+        >
+          Ожидают
+        </button>
+        <button
+          onClick={() => setStatusFilter('analyzing')}
+          className={`px-4 py-2 rounded-lg transition-colors ${
+            statusFilter === 'analyzing'
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
+          }`}
+        >
+          Анализируются
+        </button>
+        <button
+          onClick={() => setStatusFilter('completed')}
+          className={`px-4 py-2 rounded-lg transition-colors ${
+            statusFilter === 'completed'
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
+          }`}
+        >
+          Завершены
+        </button>
+        <button
+          onClick={() => setStatusFilter('failed')}
+          className={`px-4 py-2 rounded-lg transition-colors ${
+            statusFilter === 'failed'
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
+          }`}
+        >
+          Ошибки
+        </button>
+      </div>
+
+      <div className="text-sm text-gray-500">
+        Найдено: {data?.total || 0} ревью
+      </div>
+
+      <ReviewList reviews={data?.items || []} onRetry={handleRetry} />
+
+      {/* Модалки */}
+      <ConfirmModal
+        isOpen={retryConfirm.isOpen}
+        onClose={() => setRetryConfirm({ isOpen: false, id: null })}
+        onConfirm={confirmRetry}
+        title="Повторить ревью"
+        message="Запустить ревью этого Pull Request заново?"
+        confirmText="Повторить"
+        cancelText="Отмена"
+        type="info"
+        isLoading={retryMutation.isPending}
+      />
+
+      <Modal
+        isOpen={resultModal.isOpen}
+        onClose={() => setResultModal({ ...resultModal, isOpen: false })}
+        title={resultModal.type === 'success' ? 'Успешно' : 'Ошибка'}
+        type={resultModal.type}
+      >
+        <p className="text-gray-700">{resultModal.message}</p>
+      </Modal>
+    </div>
+  );
+}
+
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,78 @@
+export type Platform = 'gitea' | 'github' | 'bitbucket';
+
+export type ReviewStatus = 'pending' | 'fetching' | 'analyzing' | 'commenting' | 'completed' | 'failed';
+
+export type PRStatus = 'open' | 'reviewing' | 'reviewed' | 'closed';
+
+export type CommentSeverity = 'info' | 'warning' | 'error';
+
+export interface Repository {
+  id: number;
+  name: string;
+  platform: Platform;
+  url: string;
+  config: Record<string, any>;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  webhook_url: string;
+}
+
+export interface RepositoryCreate {
+  name: string;
+  platform: Platform;
+  url: string;
+  api_token?: string;  // Optional, uses master token if not set
+  webhook_secret?: string;
+  config?: Record<string, any>;
+}
+
+export interface PullRequest {
+  id: number;
+  pr_number: number;
+  title: string;
+  author: string;
+  source_branch: string;
+  target_branch: string;
+  url: string;
+}
+
+export interface Comment {
+  id: number;
+  file_path: string;
+  line_number: number;
+  content: string;
+  severity: CommentSeverity;
+  posted: boolean;
+  posted_at: string | null;
+  created_at: string;
+}
+
+export interface Review {
+  id: number;
+  pull_request_id: number;
+  pull_request: PullRequest;
+  status: ReviewStatus;
+  started_at: string;
+  completed_at: string | null;
+  files_analyzed: number;
+  comments_generated: number;
+  error_message: string | null;
+  comments?: Comment[];
+}
+
+export interface ReviewStats {
+  total_reviews: number;
+  active_reviews: number;
+  completed_reviews: number;
+  failed_reviews: number;
+  total_comments: number;
+  avg_comments_per_review: number;
+}
+
+export interface WebSocketMessage {
+  type: string;
+  review_id: number;
+  data?: any;
+}
+
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string
+  readonly VITE_WS_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
--- a/frontend/start.bat
+++ b/frontend/start.bat
@@ -0,0 +1,16 @@
+@echo off
+REM AI Review Frontend Start Script for Windows
+
+echo 🚀 Starting AI Review Frontend...
+
+REM Check if node_modules exists
+if not exist "node_modules" (
+    echo 📦 Installing dependencies...
+    call npm ci
+)
+
+REM Start dev server
+echo ✅ Starting frontend on http://localhost:5173
+echo.
+npm run dev
+
--- a/frontend/start.sh
+++ b/frontend/start.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+
+# AI Review Frontend Start Script
+
+echo "🚀 Starting AI Review Frontend..."
+
+# Check if node_modules exists
+if [ ! -d "node_modules" ]; then
+    echo "📦 Installing dependencies..."
+    npm install
+fi
+
+# Start dev server
+echo "✅ Starting frontend on http://localhost:5173"
+echo ""
+npm run dev
+
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
+
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/ws': {
+        target: 'ws://localhost:8000',
+        ws: true,
+      },
+    },
+  },
+})
+