10 — Agent UI System (MicroDAO)¶

Повна специфікація агентського інтерфейсу

Цей документ описує, як агент стає першим інтерфейсом взаємодії в MicroDAO.
Уся взаємодія — чатова.
Агент — навігатор, помічник, аналітик та еволюційна сутність.

1. Мета¶

Зробити агента центральною точкою взаємодії користувача зі спільнотою.

У результаті:

новачок спілкується з агентом для створення microDAO;
учасник команди — взаємодіє з агентом через командний чат;
агент сам ініціює корисні дії;
агент має власний чат, власну панель еволюції і власну пам'ять;
агент виконує функції внутрішнього інтелекту команди.

2. Типи агентів у UI¶

2.1. Guide Agent (провідник)¶

Працює в онбордингу.

Показує:

підказки,
кроки,
питання,
підтверджує створення команд/каналів.

2.2. Team Assistant (внутрішній агент)¶

Доступний всередині кожної microDAO.

Основні функції:

відповіді у спільних чатах,
автоматичні підсумки,
створення follow-ups,
пропозиції задач,
аналіз документації,
self-improvement.

2.3. Personal Agent (опція 2025+)¶

Асистент конкретного користувача.

3. Компоненти Agent UI¶

3.1. Agent Bubble¶

Маленький фіксований аватар агента у нижньому правому куті (як у Copilot / ChatGPT):

натискаєш → відкривається Agent Chat;
агент може блиматиме (notifying) при певних подіях.

3.2. Agent Chat Window¶

Окремий чат у форматі інтерфейсу:

---
| Team Assistant (ім'я агента)      |
|   Chat messages                    |
|   Input field                      |

Функції:

ставити питання агенту;
отримувати аналіз;
генерувати документи (MVP — текст);
зворотній зв'язок 👍/👎;
self-review автозапуск.

3.3. Inline Agent Messages у каналах¶

Агент може писати в каналі:

Способи:

коли його тегнули: @assistant
коли користувач попросив: "Підсумуй останнє"
коли канал просить допомогу (опційно)
коли тригери (як у Slack bots)

Повідомлення агента виглядають так:

інший фон,
аватар агента,
дрібний значок "AI".

У лівому меню зʼявляється новий розділ:

Агенти
• Team Assistant
• (у майбутньому: Personal Agent)

При натисканні → сторінка агента.

5. Сторінка агента¶

Розташування:¶

/t/:teamId/agent/:agentId

Складається з 4 вкладок:

5.1. "Чат"¶

Центральне місце взаємодії з агентом.

Вигляд: стандартний чат + тред з агентом.

5.2. "Памʼять"¶

Показує:

довгострокові факти,
короткострокові факти,
терміни,
ключові меседжі.

Кнопки:

«Очистити коротку»
«Очистити довгострокову»
«Експорт памʼяті»

5.3. "Самонавчання"¶

(інтегровано з документом 09)

Поля:

toggle: self-improvement ON/OFF
рівень: basic / extended
джерела: канал / вся microDAO / DAGI
статус останнього review:
дата
кількість знайдених помилок
кількість пропозицій

Кнопка:

«Запустити self-review зараз»

5.4. "Еволюція"¶

Показує:

список пропозицій,
версії агента,
детальні diffs,
кнопки accept/reject/edit.

UI приклад:

Версія: v4.2
Запропоновано 2 покращення:

[1] Нове правило: "Відповідати українською, якщо канал український."  [Прийняти] [Відхилити]

[2] FAQ: "Як додати учасника до команди?"  [Прийняти] [Редагувати]

6. Взаємодія агента з подіями¶

6.1. У каналі¶

Тригери для агента:

@assistant — пряме звернення.
Фрази:
"Підсумуй будь ласка"
"Що сталося?"
"Створи таску з цього"
"Які наступні кроки?"
Коли новий учасник приєднався:
агент робить welcome-репліку.

7. Взаємодія агента з Follow-Ups & Projects¶

7.1. Follow-ups¶

Агент може:

створювати follow-up автоматично,
пропонувати: "Хочеш я створю задачу з цього?",
групувати follow-ups.

7.2. Projects¶

Агент може:

пропонувати задачі,
заповнювати опис задач,
будувати мінімальні roadmaps,
робити автоматичні щоденні підсумки по проєкту (summary).

8. Notification Logic¶

Агент sparingly надсилає нотифікації:

Типи:

завершений self-review,
знайдені проблеми,
нові пропозиції змін,
нагадування про follow-ups,
важливі зміни у спільноті.

UI:

Badge на іконці агента,
"пульсація" Agent Bubble,
push (на майбутнє).

9. Анімації та UX-поведінка¶

Аватар агента реагує на події (мʼяка анімована "пульсація").
У чаті агент не відповідає миттєво (0.3–0.7s delay).
Пише «…друкую» (typing indicator).
Помилки агента обробляються як звичайні системні помилки.

10. Інтеграція з Agent-First Onboarding¶

Після онбордингу:

той самий агент-провідник стає Team Assistant
або передає користувача "головному" агенту команди

Після завершення онбордингу агент каже:

"Якщо хочеш, я можу показати тобі, як працює ваша молоденька microDAO."

11. Завдання для Cursor¶

You are a senior React/TS engineer.

Implement Agent UI System using:

* 10_agent_ui_system.md
* 08_agent_first_onboarding.md
* 03_api_core_snapshot.md
* 05_coding_standards.md

Deliverables:

1. AgentBubble component
2. AgentChatWindow component
3. Agent page with tabs: Chat / Memory / Learning / Evolution
4. Inline agent messages in channels
5. Hook: useAgentActions()

Output:

* list of modified files
* diff
* summary

12. Компоненти та структура файлів¶

12.1. Компоненти UI¶

src/components/agent/
  AgentBubble.tsx           # Фіксований аватар у правому нижньому куті
  AgentChatWindow.tsx       # Окно чату з агентом
  AgentMessage.tsx          # Повідомлення агента в каналах
  AgentAvatar.tsx           # Аватар агента з анімаціями
  AgentTypingIndicator.tsx  # Індикатор набору тексту

12.2. Сторінки¶

src/pages/
  AgentPage.tsx             # Головна сторінка агента з вкладками
  AgentChatTab.tsx          # Вкладка чату
  AgentMemoryTab.tsx        # Вкладка пам'яті
  AgentLearningTab.tsx      # Вкладка самонавчання
  AgentEvolutionTab.tsx     # Вкладка еволюції

12.3. Hooks¶

src/hooks/
  useAgentActions.ts        # Дії агента (відповіді, аналіз)
  useAgentNotifications.ts # Нотифікації від агента
  useAgentMemory.ts         # Робота з пам'яттю агента
  useAgentEvolution.ts     # Еволюція агента (з 09_evolutionary_agent.md)

12.4. Типи¶

src/types/
  agent.ts                  # Типи для агентів
    - Agent
    - AgentMessage
    - AgentSuggestion
    - AgentVersion
    - AgentMemory

13. Інтеграція з каналами¶

13.1. Відображення повідомлень агента¶

Повідомлення агента в каналі мають:

Спеціальний фон (наприклад, світло-синій)
Аватар агента з іконкою AI
Індикатор "AI" біля імені
Кнопки фідбеку 👍/👎 (опціонально)

13.2. Тригери для агента¶

Система розпізнає наступні тригери:

@assistant або @agent — пряме звернення
Фрази-команди:
"Підсумуй"
"Створи задачу"
"Що сталося?"
"Які наступні кроки?"
"Допоможи з..."

13.3. Автоматичні дії¶

Агент може автоматично:

Привітати нового учасника
Підсумувати довгі обговорення
Запропонувати створити задачу з важливого повідомлення
Нагадати про дедлайни

14. API інтеграція¶

14.1. Отримання відповіді від агента¶

POST /agents/{agentId}/chat
{
  "message": "Підсумуй останні повідомлення",
  "context": {
    "channelId": "channel-123",
    "threadId": "thread-456"
  }
}

14.2. Отримання пам'яті агента¶

GET /agents/{agentId}/memory

14.3. Оновлення налаштувань самонавчання¶

PATCH /agents/{agentId}/learning
{
  "enabled": true,
  "level": "extended",
  "sources": ["channel", "team"]
}

15. UX деталі¶

15.1. Agent Bubble¶

Розмір: 56x56px
Позиція: fixed, bottom-right, 24px від країв
Z-index: 1000
Анімація: м'яка пульсація при нових нотифікаціях
Badge: червоний кружечок з кількістю нових подій

15.2. Agent Chat Window¶

Розмір: 400x600px (desktop), fullscreen (mobile)
Позиція: fixed, bottom-right, над Agent Bubble
Анімація відкриття: slide-up з fade
Закриття: кнопка X або клік поза вікном

15.3. Typing Indicator¶

Показується під час генерації відповіді
Анімація: три точки, що пульсують
Текст: "Агент друкує..."

16. Обробка помилок¶

16.1. Помилки API¶

Якщо агент не може відповісти:

Показати дружнє повідомлення: "Вибач, зараз не можу відповісти. Спробуй пізніше."
Запропонувати альтернативу
Логувати помилку для аналізу

16.2. Таймаути¶

Якщо відповідь занадто довга:

Показати індикатор завантаження
Запропонувати скасувати
Після 30 секунд — показати попередження

17. Тестування¶

17.1. Unit Tests¶

Тести для AgentBubble
Тести для AgentChatWindow
Тести для useAgentActions
Тести для розпізнавання тригерів

17.2. Integration Tests¶

Тестування повного flow: питання → відповідь → фідбек
Тестування інтеграції з каналами
Тестування нотифікацій

17.3. E2E Tests¶

Користувач відкриває Agent Chat → ставить питання → отримує відповідь
Користувач тегує агента в каналі → агент відповідає
Користувач приймає пропозицію еволюції → агент оновлюється

18. Результат¶

MicroDAO стає не месенджером з агентами, а агентською операційною системою спільнот, де ШІ — активний навігатор, який еволюціонує та живе поруч з людьми.

Агент:

є першим інтерфейсом для нових користувачів,
допомагає у щоденній роботі команди,
еволюціонує разом зі спільнотою,
залишається під повним контролем користувачів,
інтегрується з усіма функціями MicroDAO.

Готово.
Це повна специфікація агентського UI системи, готова до використання в Cursor.

10 — Agent UI System (MicroDAO)¶

1. Мета¶

2. Типи агентів у UI¶

2.1. Guide Agent (провідник)¶

2.2. Team Assistant (внутрішній агент)¶

2.3. Personal Agent (опція 2025+)¶

3. Компоненти Agent UI¶

3.1. Agent Bubble¶

3.2. Agent Chat Window¶

3.3. Inline Agent Messages у каналах¶

4. Sidebar інтеграція¶

5. Сторінка агента¶

Розташування:¶

5.1. "Чат"¶

5.2. "Памʼять"¶

5.3. "Самонавчання"¶

5.4. "Еволюція"¶

6. Взаємодія агента з подіями¶

6.1. У каналі¶

7. Взаємодія агента з Follow-Ups & Projects¶

7.1. Follow-ups¶

7.2. Projects¶

8. Notification Logic¶

9. Анімації та UX-поведінка¶

10. Інтеграція з Agent-First Onboarding¶

11. Завдання для Cursor¶

12. Компоненти та структура файлів¶

12.1. Компоненти UI¶

12.2. Сторінки¶

12.3. Hooks¶

12.4. Типи¶

13. Інтеграція з каналами¶

13.1. Відображення повідомлень агента¶

13.2. Тригери для агента¶

13.3. Автоматичні дії¶

14. API інтеграція¶

14.1. Отримання відповіді від агента¶

14.2. Отримання пам'яті агента¶

14.3. Оновлення налаштувань самонавчання¶

15. UX деталі¶

15.1. Agent Bubble¶

15.2. Agent Chat Window¶

15.3. Typing Indicator¶

16. Обробка помилок¶

16.1. Помилки API¶

16.2. Таймаути¶

17. Тестування¶

17.1. Unit Tests¶

17.2. Integration Tests¶

17.3. E2E Tests¶

18. Результат¶