Мудборд · подготовка платформы

Референсы визуала: агенты, функции, дашборды

Что уже построили другие для трёх ваших разделов — и что конкретно из этого стоит забрать. Отобрано по одному критерию: паттерн должен был выдержать продакшн, а не только скриншот в портфолио.

живое демо скриншоты в доках код фронта открыт только описание

С чего начать — это можно открыть прямо сейчас

  1. Публичное демо Langfuse — реальные трейсы агентов без регистрации. Ближе всего к вашим «бизнес-логам». langfuse.com/docs/demo
  2. Temporal Web UI, три режима истории — Compact / Timeline / Full History. Лучший разбор визуализации шагов из существующих. temporal.io/blog
  3. Скриншоты Azure AI Foundry — редкий случай, когда картинки трейс-вью лежат прямо в документации. thread-trace.png
  4. Backstage demo — каталог сущностей с ролями. Структурно ближе к вашей платформе, чем любой AI-продукт: три раздела с одинаковой анатомией. demo.backstage.io
1

Агенты (оркестраторы)

Все продукты сошлись к одной анатомии: таблица запусков → карточка запуска с деревом или таймлайном шагов слева и input/output справа → кнопка запуска, предзаполненная параметрами прошлого рана. Расходятся только в том, чем рисуют шаги.

Temporal Web UI

скриншоты

Три режима одной истории: Compact (последовательность, время игнорируется), Timeline (длина линии = реальная длительность, живо обновляется), Full History (git-дерево). Плюс цветовой код, читаемый без легенды: пунктирный красный — retry, пунктирный фиолетовый — pending.

Кнопка «Start Workflow Like This One» — запуск с параметрами прошлого рана. Для ручного старта оркестратора это почти всегда то, чего человек хочет.

Dify — Run History

код фронта

Вкладки Result / Detail / Tracing — буквально ваша формулировка «статус, шаги, итоги», разложенная по уровням аудитории: Result бизнесу, Tracing инженеру. Одна страница обслуживает обе роли без развилки в навигации.

На канвасе у каждой ноды свой «Last run» — drill-down не только в запуск, но и в отдельный шаг.

Langfuse

живое демокод

Иерархия Sessions → Traces → Observations — уровень сессий есть далеко не у всех, а он нужен, когда один бизнес-процесс это несколько запусков агента. Трейс показан и деревом, и графом переходов.

Azure AI Foundry

скриншоты

Thread logs: упорядоченные run steps и tool calls, input/output между пользователем и агентом, привязанные метрики оценки. Единственный источник с настоящими картинками трейс-вью в открытой документации.

LangSmith

описание

Дерево ранов: слева список шагов, справа input/output выбранного, сверху — вход и выход всего трейса. Полезная мелочь: Share публикует трейс по read-only ссылке — удобный способ отдать лог заказчику без доступа в систему.

Prefect · Dagster · Airflow

скриншоты

Инженерная сторона спектра. Prefect — живой граф, ноды перекрашиваются по ходу выполнения. Dagster — Gantt вверху, лог событий снизу. Airflow Grid — матрица «таск × запуск», эталон для сравнения множества прогонов между собой.

n8n — Executions

код

Клик по запуску открывает не отдельный вид, а тот же канвас с наложенным статусом на ноды — реплей выполнения на графе. Ретрай прямо из списка, с выбором: на текущей версии воркфлоу или на исходной.

AutoGen Studio · CrewAI

код

Мультиагентная специфика: стриминг сообщений агентов в реальном времени, граф передачи управления, кнопка Cancel на живом ране. У CrewAI — три уровня детализации одного шага во вкладках Messages / Details / Raw Data.

2

Функции и тонкий конфигуратор

Раздел распадается надвое: реестр функций с логами вызовов и UI над config-service. Первая половина решена в serverless-платформах, вторая — в feature-flag системах и prompt-менеджерах.

Inngest

живой дашбордкод

Сильнейший референс под этот раздел. Двухпанельный вид: слева waterfall-таймлайн спанов, справа детали выбранного шага. Два приёма стоит забрать дословно:

Составной бар — серый сегмент (queue delay) плюс цветной (execution): сразу видно, тормозит выполнение или очередь. Ретраи отдельными спанами с бейджем «Attempt N», красный/зелёный — история попыток читается без раскрытия логов.

AWS Lambda · Cloudflare Workers · Modal

скриншоты

Верхний уровень раздела «Функции»: список с метриками (invocations, duration, error rate) — Lambda. Группировка логов по одному вызову, а не сплошным потоком — Workers. Разделение уровней логирования (деплой отдельно, вызовы отдельно) — Modal.

Langfuse Prompt Management

живое демо

Ключевая находка не про визуал, а про модель. Версии — иммутабельные снапшоты, а «деплой» это перемещаемый лейбл: production, staging, tenant-1. От того, есть ли у вас иммутабельные версии, зависит, существует ли вообще экран «история и откат».

LaunchDarkly

описание

Эталон приоритета правил: individual targeting → segment/custom rules (drag-n-drop реордер) → default. Порядок вычисления виден в самой вёрстке — сверху вниз. Плюс approval-флоу как код-ревью, если конфиг правят несколько ролей.

Vault KV v2 · AWS AppConfig

скриншоты

Vault: различие «Create new version» и «Patch latest» — две разные операции над конфигом, и это честно вынесено в UI. AppConfig: раскатка конфига стратегией с bake time и откатом — если у вас есть прод-агенты, конфиг стоит катить, а не переключать.

rjsf — формы из JSON Schema

playgroundкод

Формы редактирования параметров можно генерить из схемы, а не рисовать руками — для разных типов агентов это снимает основной объём фронтенда. Темы под MUI, AntD, Chakra.

Оговорка: автогенерённые формы выглядят одинаково-безлико. Если конфигуратор — один из трёх главных экранов, разумнее гибрид: схема для длинного хвоста параметров, ручной UI для 5–10 ключевых.

3

Дашборды и LLM-чат

Здесь индустрия сошлась к десятку узнаваемых способов связать чат с канвасом. Ниже — типология: она полезнее списка продуктов, потому что выбор паттерна определяет всю навигацию раздела.

ПаттернГде живёт чатКак рождается панельКто так делает
Персистентный сайдбарУзкая панель, хоткей, видит текущую страницуГенерирует объект → явное «сохранить»Grafana Assistant, Metabot
Три колонки: навигация / чат / канвасОтдельная полноэкранная страницаРендерится live по ходу диалога, сохраняется кнопкойGrafana Workspace, Omni
Компаньон конкретного дашбордаКнопка «Ask» на самом дашбордеНе создаёт, а объясняет — read-only слойDatabricks Genie, ThoughtSpot
Пейн внутри редактораДокнут в Edit-режиме рядом с канвасомПромпт рисует визуал прямо на канвасеPower BI Copilot
Чат первичен, дашборд — артефактЧат и есть главный экранЧарт в сообщении, клик открывает side drawerZenlytic, Julius
Дашборд целиком по одному промптуПустой дашборд с полем вводаПлан запросов → авто-раскладка → publishBasedash, Omni Builder
Правка панели через её менюКонтекстное меню тайлаМеню передаёт панель в чат как контекстGrafana, Omni, Genie
Review перед применениемМодалка с диффом поверх канвасаПринять/отклонить по каждой панелиHex «Pending changes»
Чат снаружи, через MCPClaude или ChatGPT как клиентLLM зовёт API платформыSuperset, Metabase MCP
Проактивный pushДайджест в Slack, чат вториченМетрика приходит сама, диалог — drill-downTableau Pulse

Grafana Assistant

скриншоты

Наиболее проработанная связка. Два режима одного ассистента: узкий сайдбар для быстрых правок по ходу просмотра и полноэкранный Workspace — беседы, чат, живой канвас. Дашборд рисуется на глазах, но в систему попадает только по «Save to Grafana».

Панель попадает в чат через своё контекстное меню — «Explain», «Troubleshoot», «Suggest improvements». Не чат ищет панель, а панель приносит себя в чат.

Hex — Pending changes

скриншоты

Единственный найденный продукт с честным диффом правок агента: модалка проводит по каждому изменению, принять или отклонить можно поячеечно. Ничего не применяется само.

Databricks AI/BI Genie

GIF в доках

Чат генерируется под конкретный опубликованный дашборд автоматически при публикации. Клик по чарту сужает контекст до него. Правый клик — «объясни изменение», агент возвращает факторы, повлиявшие на метрику.

Omni · Metabase · Basedash

скриншоты

Omni — split-view плюс «Ask a follow up» в меню тайла. Metabase — три готовых layout-режима чата в SDK (sidebar, stacked, auto). Basedash — сборка дашборда одним промптом с явным draft-режимом.

Инвариант всех зрелых продуктов: сгенерированная агентом панель — это обычный нативный объект, а не «AI-чарт» отдельного класса. Её всегда можно доредактировать мышью так же, как собранную руками. И ничего не публикуется без явного подтверждения — либо кнопка, либо дифф.

×

Визуальная база

Не раздел платформы, а материал для сборки: на чём строить и у кого списывать эстетику.

shadcn/ui + Tremor

демокод

Рабочая связка под React: shadcn даёт скелет — таблицы, дропдауны, командную палитру; Tremor закрывает метрики и чарты. Поверх — типографика и плотность в духе Linear и Vercel.

Grafana Saga

Figma UI Kitкод

Настоящая observability-дизайн-система с готовым Figma-китом. Учитывая, что трейсы у вас и так в Grafana, визуальная преемственность идёт бонусом.

Backstage

живое демокод

Каталог сущностей, карточка, права доступа. Модель ближе к вашей платформе, чем любой AI-продукт из списка: у вас три раздела с одинаковой анатомией, и это ровно то, что Backstage параметризует типом сущности.

Ролевая модель

скриншоты

Паттерны прав и команд лучше всего разобраны у Ant Design Pro (enterprise-формы и роли из коробки), Atlassian и Clerk — у последних есть готовый Figma-кит ролевого UI.

Архивы реальных экранов

скриншоты

Быстрее, чем регистрироваться в каждом продукте: nicelydone.club хранит полные наборы экранов Vercel, Clerk, Railway, Retool. saasui.design ищет по паттернам — dashboard, settings, onboarding.

Открытый фронт под форк

код

Если нужен старт не с нуля: Dify (Next.js в /web), Langfuse, Open WebUI, LibreChat. Смотреть стоит даже без форка — там видно, как решены пустые состояния и длинные списки.

Про Dribbble и подобное: там красивые макеты, которые не выдерживают реальных данных — двухсот запусков, длинных идентификаторов, ошибки на пол-экрана. Брать оттуда цвет и настроение, но не раскладку. Раскладку — из Temporal, Inngest, Langfuse, где интерфейс бился о продакшн.