Synth Nova Manifest

ADR-0010: M1 UI Vision — Live Agent Visualization

3 min read

ADR-0010: M1 UI Vision — Live Agent Visualization

Status

accepted

Context

M1 (Investment Navigator) определён как продукт (ADR-0009) со структурой отчёта из 11 секций. Следующий шаг — определить UI layer. Founder vision: сделать процесс работы агентов частью пользовательского опыта (“transparent AI”). Пользователь должен видеть, как агенты работают в реальном времени, а не просто получать финальный результат.

Decision

M1 UI построен на принципе “transparent AI” — пользователь видит агентов, работающих в реальном времени.

Stack

React + WebSocket (real-time events от synth-brain API).

UX Flow

  1. Search bar input — пользователь вводит запрос (Perplexity-style)
  2. Live agent visualization — CEO thinking, Scout searching с появляющимися источниками, Researcher analyzing с progress bars, Director aggregating
  3. Progressive results — секции отчёта появляются по мере готовности: Lean Canvas first, затем Competitive Landscape, затем Financial Model и т.д.
  4. Visual Scorecards “growing” в реальном времени — Investment Attractiveness 0→8.5, Marketing Potential 0→7.2, Entry Complexity 0→6.1, Risk Score, Timeline
  5. Final dashboard с radar chart

Architecture Implications

  • Event bus: Pipeline должен эмитить события — agent_started, source_found, section_complete, score_calculated
  • Streaming aggregate: Aggregate должен поддерживать streaming (частичная выдача по мере готовности секций)
  • API layer: HTTP POST → WebSocket streaming → final JSON
  • Event format: каждое событие содержит timestamp, agent_id, event_type, payload

Design Principles

  • Transparency: пользователь видит источники данных, какой агент что нашёл
  • Progressive disclosure: информация раскрывается по мере готовности, от простого к сложному
  • No fake progress: анимации привязаны к реальным pipeline events, не к таймерам
  • Radar chart: 5-7 осей максимум для читаемости

Alternatives Considered

Option A: Static UI (статичный интерфейс)

  • Pros: Простая реализация, нет WebSocket
  • Cons: Ничем не отличается от ChatGPT — отправил запрос, подождал, получил ответ
  • Not chosen: не даёт конкурентного преимущества

Option B: Fake progress (имитация прогресса)

  • Pros: Визуально привлекательно, не требует event bus
  • Cons: Подрывает доверие. Пользователь увидит, что анимации не связаны с реальной работой
  • Not chosen: противоречит принципу transparency

Option C: Terminal-style log (лог в стиле терминала)

  • Pros: Максимальная прозрачность, простая реализация
  • Cons: Пугает нетехнических пользователей. Слишком много информации без структуры
  • Not chosen: целевая аудитория — инвесторы и фаундеры, не разработчики

Option D: Live agent visualization с progressive results ← chosen

  • Pros: Уникальный UX. Прозрачность без перегрузки. Пользователь видит ценность в реальном времени. Конкурентное преимущество vs ChatGPT/Perplexity
  • Cons: Сложная реализация (event bus, WebSocket, streaming aggregate). Больше frontend-работы
  • Why chosen: transparent AI — ключевой дифференциатор продукта. Сложность реализации оправдана уникальностью UX

Consequences

Positive:

  • Уникальный UX, отличающий M1 от ChatGPT/Perplexity
  • Пользователь понимает, за что платит — видит работу агентов
  • Progressive results снижают perceived latency (первые результаты через секунды)
  • Event bus полезен для observability и debugging

Negative / Trade-offs:

  • Нужен event bus в pipeline (Week 4.3)
  • Нужен WebSocket API layer (Week 4.3)
  • Streaming aggregate (Week 4.2-4.3)
  • Frontend разработка (Week 4.4 / Week 5)
  • Scoring coefficients в MVP реализуются как post-calculation анимация
  • Radar chart ограничен 5-7 осями

Mitigations:

  • Event bus реализуется инкрементально — сначала базовые события, потом детальные
  • WebSocket layer поверх существующего HTTP API
  • Radar chart: фиксированный набор осей в MVP, кастомизация позже

Follow-ups

  • Определить WebSocket event types (полный список событий и payload schema)
  • Определить оси radar chart (какие 5-7 метрик из Visual Scorecards)
  • UI prototype (Figma / code prototype)
  • User testing с целевой аудиторией (founders + investors)

References

Graph View

Backlinks