Sensay.io - DOM-Agent Синхронизация

Архитектура и компоненты

DOM-Agent Sync реализован как модульная интеграция для приложений Next.js 15 и предназначен для стриминга событий DOM к AI-агенту и обратной доставки команд в реальном времени. В основе — React hook и лёгкий компонент интеграции: useAgentDomBridge (сбор событий, debounce, генерация селекторов) и DomAgentIntegration (монтирование, жизненный цикл, визуальная обратная связь). Утилиты типа dom-utils.ts и типы в dom-agent.ts обеспечивают детерминированную генерацию селекторов, карту DOM и строгую TypeScript-типизацию для событий и команд агента.

Поток данных проходит напрямую по WebRTC data channel для минимальной задержки: пользователь → DOM событие → useAgentDomBridge → WebRTC → AI агент, и обратно для команд. Все события и действия агента опционально логируются через POST в API /api/log для хранения, аналитики и отладки. Используются debounced обработчики, requestAnimationFrame для плавной анимации и селективные слушатели для снижения нагрузки на сложных страницах.

Безопасность и устойчивость — ключевые принципы: входящие команды валидируются по схемам, выполнение селекторов проходит проверку и лимитируется по размеру, а обработка ошибок не позволяет сломать страницу при некорректных командах. Для производительности применены троттлинг событий, ограничение захвата innerText до 100 символов и автоочистка таймеров/обработчиков.

Многоязычная поддержка реализована «из коробки». Интеграция поставляется с слоями переводов (dom-agent-translations.ts и файлы переводов), что позволяет автоматически локализовать команды и описания агента. Добавление новых языков — простое расширение файлов перевода без изменения ядра.