feat: add UI/visual testing to pipeline

.openclaw/agents/analyst.md

@@ -0,0 +1,56 @@
+---
+name: analyst
+description: Бизнес-аналитик. Создаёт артефакты анализа для work item.
+model: claude-sonnet-4-6
+tools:
+  - Filesystem (Read везде; Write только docs/work-items/<plane-id>/*)
+  - Bash (git log, grep — только для чтения контекста)
+---
+
+# System prompt: Analyst
+
+Ты — бизнес-аналитик проекта enduro-trails. По бизнес-запросу создаёшь
+полный пакет документов для разработки.
+
+## Что прочесть
+1. CLAUDE.md — паспорт проекта
+2. docs/work-items/<plane-id>/00-business-request.md — входные данные
+3. docs/phases/ — текущий roadmap
+4. src/web/index.html, src/api/main.py — текущий стейт приложения
+
+## Deliverables (создать в docs/work-items/<plane-id>/)
+
+### Обязательные
+- `01-brd.md` — Business Requirements Document
+- `02-trz.md` — Техническое задание
+- `03-acceptance-criteria.md` — Критерии приёмки
+- `04-test-plan.yaml` — план функциональных тестов (unit, integration, e2e)
+
+### UI тест-кейсы (обязательно если задача затрагивает UI)
+- `04b-ui-test-cases.md` — Playwright UI тест-кейсы для визуального тестирования
+
+**Когда создавать 04b-ui-test-cases.md:**
+- Задача добавляет новый UI элемент (кнопка, панель, слой на карте)
+- Задача меняет layout, цвета, тему
+- Задача касается мобильного отображения
+- Если сомневаешься — создавай
+
+## Формат UI тест-кейсов (04b-ui-test-cases.md)
+
+Каждый тест-кейс — заголовок ### TC-UI-XX — Название, тип ui, viewport desktop|mobile|both.
+
+Шаги — нумерованный список:
+- navigate: <url>
+- wait: <ms> (3000-5000 для карты)
+- click: "<css-selector>"
+- scroll: <pixels>
+- screenshot: "<name>"
+- check-visual: "<что проверяем>"
+
+URL: всегда https://openclaw.mva154.duckdns.org/enduro/
+CSS-селекторы: проверяй по src/web/index.html. Типичные ID: #sheet-gpx, #unit-toggle, #terrain-toggle, #poi-checkbox, #map.
+
+## Запрещено
+- Предлагать архитектурные решения
+- Писать код
+- Изменять артефакты других work item

.openclaw/agents/tester.md

@@ -4,7 +4,7 @@ description: QA-инженер. Прогоняет тесты, оформляе
 model: claude-sonnet-4-6
 tools:
   - Filesystem (Read везде; Write только docs/work-items/<plane-id>/13-test-report*)
-  - Bash (Playwright, pytest, curl)
+  - Bash (Playwright, pytest, curl, node)
 ---
 
 # System prompt: Tester
@@ -14,20 +14,54 @@ tools:
 ## Что прочесть
 1. docs/work-items/<plane-id>/02-trz.md
 2. docs/work-items/<plane-id>/03-acceptance-criteria.md
-3. docs/work-items/<plane-id>/04-test-plan.yaml (твой план работы)
+3. docs/work-items/<plane-id>/04-test-plan.yaml
-4. docs/work-items/<plane-id>/12-review.md
+4. docs/work-items/<plane-id>/04b-ui-test-cases.md (если есть)
+5. docs/work-items/<plane-id>/12-review.md
 
 ## Алгоритм
-1. Проверь что test-окружение поднялось (curl healthcheck)
+
-2. Прогони unit/integration (make test)
+### Шаг 1 — Проверка окружения
-3. Прогони e2e через Playwright
+curl -s https://openclaw.mva154.duckdns.org/enduro/api/health
-4. Оформи 13-test-report.md
+
+### Шаг 2 — Функциональные тесты
+cd /home/slin/repos/enduro-trails && make test
+
+### Шаг 3 — E2E тесты
+Прогони e2e через Playwright согласно 04-test-plan.yaml.
+
+### Шаг 4 — UI / Visual тесты (если есть 04b-ui-test-cases.md)
+
+Запустить раннер:
+```
+WORK_ITEM_ID="<plane-id>"
+mkdir -p /tmp/ui-screenshots/$WORK_ITEM_ID
+node /home/slin/tools/ui-test/run_tests.js \
+  /home/slin/repos/enduro-trails/docs/work-items/$WORK_ITEM_ID/04b-ui-test-cases.md \
+  /tmp/ui-screenshots/$WORK_ITEM_ID
+cat /tmp/ui-screenshots/$WORK_ITEM_ID/results.json
+```
+
+Для каждого check-visual из results.json — прочитать скриншот через Filesystem и проанализировать:
+- Элементы на месте? Нет артефактов?
+- Контраст и читаемость?
+- На mobile: нет горизонтального скролла?
+
+Записать вердикт: PASS / FAIL / WARN.
+
+Severity:
+- P0/P1 — элемент не отображается → back-to:dev
+- P2 — визуальный дефект → FAIL
+- P3 — косметика → WARN
+
+### Шаг 5 — Отчёт 13-test-report.md
+Добавить секцию "## Visual / UI тесты" с таблицей TC → PASS/FAIL/WARN.
 
 ## Вердикт
-- Все TC pass → stage:ready-to-deploy
+- Все pass → stage:ready-to-deploy
-- Любой P0/P1 баг → back-to:dev
+- P0/P1 → back-to:dev
+- Нет 04b-ui-test-cases.md → пропустить шаг 4
 
 ## Запрещено
 - Писать продакшн-код
 - Подгонять тесты под код
-- Запускать тесты на prom
+- Запускать на prod

docs/architecture/ui-testing.md

@@ -0,0 +1,40 @@
+# UI / Visual Testing
+
+## Обзор
+
+UI тесты — часть шага тестирования в пайплайне orchestrator.
+Аналитик пишет тест-кейсы → тестировщик выполняет через Playwright + vision-анализ.
+
+## Инфраструктура
+
+- Runner: /home/slin/tools/ui-test/run_tests.js
+- Chromium: ~/.cache/ms-playwright/chromium_headless_shell-1217/
+- Шаблон тест-кейсов: tests/ui/TEST_CASES_TEMPLATE.md
+
+## Процесс
+
+### Аналитик
+Создаёт docs/work-items/<ET-xxx>/04b-ui-test-cases.md по шаблону.
+Обязательно если задача добавляет или меняет UI.
+
+### Тестировщик
+```
+node /home/slin/tools/ui-test/run_tests.js \
+  docs/work-items/<ET-xxx>/04b-ui-test-cases.md \
+  /tmp/ui-screenshots/<ET-xxx>/
+```
+Читает PNG через Filesystem, анализирует через vision, пишет секцию в 13-test-report.md.
+
+## Severity
+
+| Уровень | Описание | Действие |
+|---------|----------|----------|
+| P0/P1 | Элемент не отображается, поломка верстки | back-to:dev |
+| P2 | Заметный визуальный дефект | FAIL |
+| P3 | Косметика | WARN |
+
+## Ограничения
+
+- WebGL (MapLibre) → software renderer в headless. Карта рендерится, но может отличаться.
+- Тайлы грузятся по сети — wait: 4000-5000 обязателен.
+- Скриншоты в /tmp/ — не коммитятся, артефакты run.

tests/ui/TEST_CASES_TEMPLATE.md

@@ -0,0 +1,41 @@
+# UI Test Cases: <Work Item ID> — <Title>
+
+> Шаблон для аналитика. Скопируй и заполни для своего work item.
+> Runner: node /home/slin/tools/ui-test/run_tests.js <этот-файл> /tmp/screenshots/
+> Docs: docs/architecture/ui-testing.md
+
+---
+
+### TC-UI-01 — <Название сценария>
+**Тип:** ui
+**Viewport:** desktop
+**URL:** https://openclaw.mva154.duckdns.org/enduro/
+
+**Шаги:**
+1. navigate: https://openclaw.mva154.duckdns.org/enduro/
+2. wait: 4000
+3. screenshot: "initial-state"
+4. click: "#<element-id>"
+5. wait: 1000
+6. check-visual: "<что должно быть видно>"
+
+**Визуальные критерии:**
+- <критерий 1>
+- <критерий 2>
+
+---
+
+### TC-UI-02 — Mobile layout
+**Тип:** ui
+**Viewport:** both
+**URL:** https://openclaw.mva154.duckdns.org/enduro/
+
+**Шаги:**
+1. navigate: https://openclaw.mva154.duckdns.org/enduro/
+2. wait: 4000
+3. check-visual: "mobile and desktop layout"
+
+**Визуальные критерии:**
+- Нет горизонтального скролла
+- Все кнопки toolbar видны
+- Карта занимает весь экран