Сбор правок от клиентов на localhost: визуальный фидбек, голосовые заметки и авто-фикс через ИИ

Традиционный процесс демонстрации промежуточных результатов заказчику полон трения: разработчик поднимает туннель, отправляет ссылку в рабочий чат, а в ответ получает скриншоты со стрелочками в Paint, пятиминутные аудиосообщения или неясные описания вроде «кнопка на третьем экране чуть съехала».

Чтобы устранить этот разрыв между демонстрацией на localhost и сбором правок, в TunnelHunt появился встроенный Review Mode — система контекстных аннотаций, кликабельных пинов и голосовых заметок, не требующая установки стороннего ПО ни разработчиком, ни клиентом.

Как это устроено

Когда для туннеля активирован режим ревью, сервер туннелирования автоматически внедряет изолированный виджет обратной связи (через Shadow DOM) перед закрывающим тегом </body>.

Заказчик или тестировщик видит аккуратный плавающий тулбар внизу экрана:

[ 🚀 Review ]  [ 📌 Добавить правку ]  |  [ 3 открыто ]

1. Клик по элементу: при наведении курсора блоки подсвечиваются рамкой, а движок автоматически определяет CSS-селектор и имя компонента (React Fiber или Vue VNode).
2. Ввод комментария: текстовое поле для быстрых замечаний.
3. Голосовые заметки (Voice Notes): кнопка микрофона пишет звук через нативный MediaRecorder с автоматической поддержкой MP4/AAC на iOS Safari и WebM/Opus на Chromium-браузерах.
4. Скриншот и метаданные: в момент отправки фиксируются видимая область, ширина экрана, текущий роут SPA и координаты клика.

Данные отправляются на служебный эндпоинт /__tunnelhunt/reviews того же домена, что исключает блокировку сторонними расширениями, AdBlock или политиками CSP (Content Security Policy).

1. Запуск туннеля в режиме Review

Включить сбор правок можно тремя способами:

Способ А: Флаг при подключении через SSH

Добавьте ключ --review (или сокращённо -r) к стандартной команде запуска:

ssh -R 80:localhost:3000 tunnelhunt.ru --review

В терминале отобразится статус:

  ▲ Tunnelhunt Online
  --------------------------------------------------
  Your tunnel has been successfully established:
  https://sleepy-owl.tunnelhunt.ru
  --------------------------------------------------
  Security & Features:
    Basic Auth:   Disabled
    IP Whitelist: Disabled (Public access)
    Review Mode:  Enabled (Visual & Voice Feedback active)
    Feedback URL: https://sleepy-owl.tunnelhunt.ru?__review=1
  --------------------------------------------------
  Live HTTP Traffic Logs:

Способ Б: Через URL-параметр без перезапуска

Если туннель уже запущен в обычном режиме, просто передайте клиенту ссылку с суффиксом ?__review=1:

https://sleepy-owl.tunnelhunt.ru?__review=1

Сервер автоматически установит cookie th_review=1, благодаря чему виджет останется активным при переходах по внутренним страницам сайта.

Способ В: Тумблер в веб-панели управления

Для постоянных зарезервированных субдоменов (Pro/Business) включить Review Mode можно в разделе «Туннели» -> «Настроить» прямо из браузера. Изменения применятся к активной сессии через Redis без разрыва соединения.

2. Мгновенные уведомления в SSH-терминале

Вам не нужно постоянно обновлять вкладку в браузере. Как только клиент кликнет по блоку и нажмет «Отправить», прямо в ваш открытый терминал поступит структурированный лог:

[15:14:02] [REVIEW #f8a2c1] /pricing (<PlanCard>) "Сделайте кнопку оформления ярче" by Алексей

Вы сразу видите:

• Относительный путь (/pricing);
• Найденный компонент исходного кода (<PlanCard>);
• Суть задачи и имя автора.

3. Просмотр правок в Панели Управления

В веб-дашборде TunnelHunt доступен раздел «Правки и фидбек» (/reviews):

• Интерактивные карточки: фильтрация по статусам («Все», «В работе», «Решенные») и поддоменам.
• Встроенный аудиоплеер: прослушивание голосовых правок клиента без скачивания файлов.
• Скриншоты с маркером: клик по миниатюре открывает полноразмерный скриншот с подсветкой целевого элемента.
• Управление статусом: перевод в решённые или возврат на доработку в один клик.

4. Автоматическое исправление через AI-агентов (MCP)

Главная сила связки TunnelHunt с современными редакторами кода (Cursor, Claude Code, Windsurf) — официальный MCP-сервер (@tunnelhunt/mcp).

В версии 1.0.1+ доступны специализированные инструменты:

Пример промпта для Cursor или Claude Code:

“Проверь через TunnelHunt MCP новые замечания от клиента по поддомену sleepy-owl и исправь найденные проблемы в верстке.”

Агент выполнит следующий цикл:

1. Вызовет list_reviews(subdomain: "sleepy-owl", status: "open").
2. Получит точный компонент (например, src/components/Header.tsx вокруг селектора header > nav > button.cta).
3. Прочитает текстовый комментарий клиента и отредактирует файл.
4. Вызовет resolve_review(subdomain: "sleepy-owl", reviewId: "...") для закрытия тикета.

Сравнение способов сбора правок

Итог

Режим Review превращает обычный SSH-туннель в полноценное рабочее пространство для взаимодействия с клиентом. Разработчик избавлен от рутины расшифровки правок, клиент может оставлять понятные замечания прямо с телефона, а ИИ-ассистенты получают готовый контекст для автономной работы.

Попробуйте запустить свой следующий проект с флагом --review:

ssh -R 80:localhost:3000 tunnelhunt.ru --review