wiki/tasks/snowbike-rag/DEV-TASK-UI.md

DEV-TASK: Веб-интерфейс для Snowbike RAG

Контекст

API для семантического поиска работает (Flask :5557). Нужен красивый веб-интерфейс.

Документация:

• Бизнес-требования: tasks/snowbike-rag/docs/BRD-UI.md
• Техническое задание: tasks/snowbike-rag/docs/TZ-UI.md
• Существующий API: tasks/snowbike-rag/server.py

---

Задача

Реализовать одностраничное веб-приложение для поиска по базе знаний сноубайков.

Шаг 1: Создать index.html

1. Создать templates/index.html — единственная страница
2. Подключить CDN: Tailwind CSS, Marked.js, Google Fonts (Inter)
3. Реализовать UI:
   • Заголовок: «🏔️ Snowbike Поиск»
   • Поле ввода (textarea) по центру
   • Кнопка отправки (🔍)
   • Блок результатов: ответ (Markdown → HTML) + источники (карточки)
   • Спиннер при загрузке
   • Тёмная тема (#0F172A фон)
4. Адаптивность: мобилка, планшет, десктоп

Шаг 2: Обновить server.py

5. Добавить роут / → render_template('index.html')
6. Оставить /search для обратной совместимости
7. Добавить /api/search — алиас к /search

Шаг 3: Проверить

8. Открыть http://localhost:5557/ — должна быть страница поиска
9. Ввести запрос → ответ с источниками
10. Проверить на мобильном (responsive)

---

Критерии приёмки

• http://localhost:5557/ — страница поиска (не JSON, не 404)
• Ввод «масло для Polaris» → ответ + источники
• Тёмная тема, красивый шрифт Inter
• Адаптивно на мобильном
• Markdown рендерится в HTML
• Источники — карточки с датой и топиком
• Спиннер при загрузке
• Существующие API-роуты работают

---

Важно

• Всё в tasks/snowbike-rag/ • HTML — один файл (inline CSS + JS) • Не ломать существующий API • Tailwind через CDN (без npm/сборки)