О проекте
Проблема: диспетчер работает с инфраструктурой, где сотни типов объектов и связей. Граф, алерты, диагностика и действия находятся в разных представлениях.
Задача: создать единое рабочее место, в котором оператор может найти объект, изучить его связи, получить объяснение и выполнить контролируемое действие.
Решение: спроектировал двухпанельный интерфейс. Слева — граф топологии и дерево алертов. Справа — потоковый чат с AI-диагностом, поддерживающий Generative UI и запуск проверенных скриптов автоматизации.
Результат: расследование инцидентов и запуск восстановительных сценариев происходят в едином окне с аудитом, согласованием и возможностью отката.
Интерфейс продукта
Слева оператор исследует топологию и переключается на дерево аварий. Справа — задаёт вопросы AI-агенту. Выбранный узел автоматически подтягивает в диалог контекст инцидента и телеметрию.
Что сделал
- Собрал UX/UI и клиентскую архитектуру двухпанельного рабочего места: интерактивный граф топологии и режим древо-таблицы.
- Спроектировал сценарии расследования аварий и работы с AI-ассистентом.
- Спроектировал предиктивную симуляцию (Snapshots) и оценку зоны поражения сбоя (Blast Radius).
- Создал дизайн-систему на 5 уровнях дизайн-токенов и конвейер Generative UI (WidgetDocument / WidgetHost), построив полноценный Agentic UX.
- Создал библиотеку готовых блоков интерфейса, которые система может проверить до использования. Агент собирает из них страницы под задачу, а система проверяет сборку перед показом.
- Интегрировал API топологии, потоковый чат и запуск инфраструктурных сценариев.
Проблемы и решения
Проблема #1
В интервью диспетчеры отмечали: при массовых авариях граф превращается в визуальный шум. В условиях стресса операторам тяжело держать в фокусе всё полотно — нужна строгая табличная плотность, чтобы за секунды ранжировать алерты.
Решение.
Добавил режим древо-таблицы: объединил топологическую иерархию с табличной плотностью, упаковав алерты, метрики и быстрые команды в одну строку.
Проблема #2
Диспетчеры вручную копировали алерты и логи в чат с AI, а текстовые ответы модели не позволяли сразу запустить операционное действие.
Решение.
Построил бесшовный контур: Drag-and-Drop микро-объектов прямо в чат передаёт полный слепок узла через типизированный . Ответы агента выводятся через Generative UI (WidgetDocument / WidgetHost) в виде интерактивных виджетов с состояниями loading, empty и error, позволяя применить действие в один клик.
Проблема #3
При 200–400 типах объектов граф превращался в нечитаемый «клубок», а плоские SVG-ноды не вмещали метрики и кнопки действий.
Решение.
Разделил рендеринг на два слоя: SVG рисует связи, а HTML-карточки показывают метрики и контекстное меню. Добавил группировку по доменам, фильтры и уровни детализации (LOD).
Проблема #4
В критической инфраструктуре диспетчеры опасались применять автоматические сценарии AI «вслепую»: не было видно скрытого каскадного эффекта на зависимые сервисы.
Решение.
Спроектировал визуализацию зоны поражения (Blast Radius) и симуляцию срезов (Baseline vs Predicted vs Post-state). До запуска скрипта оператор видит подсвеченный каскад рисков на графе и прогноз состояния, а само действие подтверждается через контролируемый Decision Gate с возможностью отката.
Итоги
Запустили платформу цифрового двойника, которая автоматизирует нижние слои управления IT-инфраструктурой: первичный сбор алертов, сопоставление топологических связей и выявление первопричин сбоя (Causal Path).
Перевели эксплуатацию на модель контролируемой автономности (Supervised Delegation): рутинную диагностику выполняет AI-агент, а оператор принимает решения на основе симуляции зоны поражения (Blast Radius) и безопасного запуска сценариев через Decision Gate.
Устранили разрыв между мониторингом и действием: операторы дежурной смены расследуют и купируют инциденты в едином окне без ручного сбора логов и переключения между десятками разрозненных консолей.