# Бизнес-требования: Веб-интерфейс для Snowbike RAG

## 1. Проблема

API работает, но пользоваться им можно только через curl. Нужен красивый и удобный веб-интерфейс для поиска по базе знаний сноубайков.

---

## 2. Что хотим получить

Страницу в браузере, где можно задать вопрос и получить красивый ответ с источниками.

**URL:** `https://openclaw.mva154.duckdns.org/snowbike-rag/`

---

## 3. Функциональные требования

### 3.1 Страница поиска (главная)
• Поле ввода запроса (большое, по центру экрана)
• Кнопка «Найти» или отправка по Enter
• История последних запросов (локально, в браузере)

### 3.2 Результаты поиска
• Ответ LLM — красиво оформленный (Markdown → HTML)
• Источники — список карточек:
  - Дата сообщения
  - Название топика (цветовая метка)
  - Превью текста (2-3 строки, с выделением ключевых слов)
  - Ссылка на оригинальное сообщение в Telegram (если возможно: `https://t.me/snowbikerussia/{message_id}`)
• Количество найденных источников
• Время ответа (мс)

### 3.3 Фильтры (опционально, но желательно)
• Выбор топика (чекбоксы или мультиселект)
• Сортировка: по релевантности / по дате
• Лимит результатов: 5 / 10 / 20

### 3.4 Статистика
• Ссылка или панель «О базе данных»:
  - Всего сообщений
  - Количество топиков
  - Последнее обновление
  - Статус ChromaDB (заполняется / готов)

---

## 4. Технические требования

### 4.1 Стек
• Flask (уже есть, порт 5557)
• HTML + CSS + JavaScript (без сборщиков, без React/Vue)
• Tailwind CSS через CDN (для быстрой стилизации)
• Markdown-рендеринг ответов: marked.js через CDN
• Подсветка синтаксиса в коде (если есть в ответах): highlight.js через CDN

### 4.2 Адаптивность
• Мобильная версия (responsive)
• Хорошо выглядит на экране телефона (основной сценарий использования)

### 4.3 Скорость
• Страница загружается < 1 секунды
• Запрос показывает спиннер/анимацию загрузки
• Результаты появляются плавно (fade-in)

### 4.4 Цветовая схема
• Тёмная тема (по умолчанию)
• Акцентный цвет: синий (#3B82F6) или оранжевый (#F97316)
• Фон: #0F172A (тёмно-синий)
• Текст: #F1F5F9 (светло-серый)
• Карточки: #1E293B (чуть светлее фона)

---

## 5. UX-требования

### 5.1 Поле ввода
• Placeholder: «Спросите про сноубайки...»
• Автофокус при загрузке
• Многострочное поле (textarea, 2 строки)
• Кнопка отправки справа (иконка 🔍)

### 5.2 Ответ
• Заголовок: «Ответ»
• Текст ответа — основной контент (крупный шрифт)
• Источники — ниже ответа, в виде списка
• Каждый источник — мини-карточка с датой, топиком, превью

### 5.3 Анимации
• Спиннер при загрузке (dots или skeleton)
• Плавное появление результатов (fadeIn 0.3s)
• Hover-эффект на карточках источников

### 5.4 Ошибки
• Если API недоступен: «Сервис временно недоступен»
• Если нет результатов: «По вашему запросу ничего не найдено»
• Если запрос слишком короткий: «Введите более точный запрос»

---

## 6. Что НЕ входит

• Авторизация и пользовательские аккаунты
• История запросов на сервере (только localStorage)
• Экспорт результатов (PDF, Markdown)
• Голосовой ввод
• Переключение языка

---

## 7. Критерии приёмки

✅ Открывается `https://openclaw.mva154.duckdns.org/snowbike-rag/` — видно страницу поиска
✅ Ввод «какое масло для Polaris» → ответ с источниками за < 15 секунд
✅ Ответ красиво оформлен (заголовки, списки, выделение)
✅ Источники — карточки с датой, топиком, превью
✅ Хорошо выглядит на телефоне
✅ Тёмная тема
✅ Загрузка показывает спиннер

---

## 8. Приоритет

**Сейчас:** Страница поиска + результаты + адаптивность
**Позже:** Фильтры по топикам, статистика, ссылки в Telegram