Files
Apple ef3473db21 snapshot: NODE1 production state 2026-02-09
Complete snapshot of /opt/microdao-daarion/ from NODE1 (144.76.224.179).
This represents the actual running production code that has diverged
significantly from the previous main branch.

Key changes from old main:
- Gateway (http_api.py): expanded from ~40KB to 164KB with full agent support
- Router: new /v1/agents/{id}/infer endpoint with vision + DeepSeek routing
- Behavior Policy: SOWA v2.2 (3-level: FULL/ACK/SILENT)
- Agent Registry: config/agent_registry.yml as single source of truth
- 13 agents configured (was 3)
- Memory service integration
- CrewAI teams and roles

Excluded from snapshot: venv/, .env, data/, backups, .tgz archives

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 08:46:46 -08:00

1169 lines
40 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="https://IvanTytar.github.io/microdao-daarion/cursor/10_agent_ui_system/">
<link rel="icon" href="../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.5.18">
<title>10 — Agent UI System (MicroDAO) - DAARION Documentation</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.66ac8b77.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#10-agent-ui-system-microdao" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="DAARION Documentation" class="md-header__button md-logo" aria-label="DAARION Documentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
DAARION Documentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
10 — Agent UI System (MicroDAO)
</span>
</div>
</div>
</div>
<script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="DAARION Documentation" class="md-nav__button md-logo" aria-label="DAARION Documentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
DAARION Documentation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../public/" class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../public/getting-started/" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../public/architecture-overview/" class="md-nav__link">
<span class="md-ellipsis">
Architecture
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../public/daiS_daos_overview/" class="md-nav__link">
<span class="md-ellipsis">
DAIS & DAOS
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
<span class="md-ellipsis">
Internal
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Internal
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_1" >
<label class="md-nav__link" for="__nav_5_1" id="__nav_5_1_label" tabindex="0">
<span class="md-ellipsis">
Infra
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_1">
<span class="md-nav__icon md-icon"></span>
Infra
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../internal/infra/INFRA_AUTOMATION_PACK_V1/" class="md-nav__link">
<span class="md-ellipsis">
Infra Automation Pack v1
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../internal/infra/monitoring_overview/" class="md-nav__link">
<span class="md-ellipsis">
Monitoring Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../internal/infra/nodes_registry_v0/" class="md-nav__link">
<span class="md-ellipsis">
Nodes Registry v0
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" >
<label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
<span class="md-ellipsis">
Specs
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_2">
<span class="md-nav__icon md-icon"></span>
Specs
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../internal/specs/matrix_presence_aggregator/" class="md-nav__link">
<span class="md-ellipsis">
Matrix Presence Aggregator
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../internal/specs/city_map_spec/" class="md-nav__link">
<span class="md-ellipsis">
City Map Spec
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../internal/specs/node_join_protocol_draft/" class="md-nav__link">
<span class="md-ellipsis">
Node Join Protocol (Draft)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="10-agent-ui-system-microdao">10 — Agent UI System (MicroDAO)<a class="headerlink" href="#10-agent-ui-system-microdao" title="Permanent link">&para;</a></h1>
<p>Повна специфікація агентського інтерфейсу</p>
<p>Цей документ описує, як агент стає першим інтерфейсом взаємодії в MicroDAO.<br />
Уся взаємодія — чатова.<br />
Агент — навігатор, помічник, аналітик та еволюційна сутність.</p>
<hr />
<h1 id="1">1. Мета<a class="headerlink" href="#1" title="Permanent link">&para;</a></h1>
<p>Зробити агента центральною точкою взаємодії користувача зі спільнотою.</p>
<p>У результаті:</p>
<ul>
<li>
<p>новачок спілкується з агентом для створення microDAO;</p>
</li>
<li>
<p>учасник команди — взаємодіє з агентом через командний чат;</p>
</li>
<li>
<p>агент сам ініціює корисні дії;</p>
</li>
<li>
<p>агент має власний чат, власну панель еволюції і власну пам'ять;</p>
</li>
<li>
<p>агент виконує функції внутрішнього інтелекту команди.</p>
</li>
</ul>
<hr />
<h1 id="2-ui">2. Типи агентів у UI<a class="headerlink" href="#2-ui" title="Permanent link">&para;</a></h1>
<h2 id="21-guide-agent">2.1. Guide Agent (провідник)<a class="headerlink" href="#21-guide-agent" title="Permanent link">&para;</a></h2>
<p>Працює в онбордингу.</p>
<p>Показує:</p>
<ul>
<li>
<p>підказки,</p>
</li>
<li>
<p>кроки,</p>
</li>
<li>
<p>питання,</p>
</li>
<li>
<p>підтверджує створення команд/каналів.</p>
</li>
</ul>
<h2 id="22-team-assistant">2.2. Team Assistant (внутрішній агент)<a class="headerlink" href="#22-team-assistant" title="Permanent link">&para;</a></h2>
<p>Доступний всередині кожної microDAO.</p>
<p>Основні функції:</p>
<ul>
<li>
<p>відповіді у спільних чатах,</p>
</li>
<li>
<p>автоматичні підсумки,</p>
</li>
<li>
<p>створення follow-ups,</p>
</li>
<li>
<p>пропозиції задач,</p>
</li>
<li>
<p>аналіз документації,</p>
</li>
<li>
<p>self-improvement.</p>
</li>
</ul>
<h2 id="23-personal-agent-2025">2.3. Personal Agent (опція 2025+)<a class="headerlink" href="#23-personal-agent-2025" title="Permanent link">&para;</a></h2>
<p>Асистент конкретного користувача.</p>
<hr />
<h1 id="3-agent-ui">3. Компоненти Agent UI<a class="headerlink" href="#3-agent-ui" title="Permanent link">&para;</a></h1>
<h2 id="31-agent-bubble">3.1. Agent Bubble<a class="headerlink" href="#31-agent-bubble" title="Permanent link">&para;</a></h2>
<p>Маленький фіксований аватар агента у нижньому правому куті (як у Copilot / ChatGPT):</p>
<ul>
<li>
<p>натискаєш → відкривається Agent Chat;</p>
</li>
<li>
<p>агент може блиматиме (notifying) при певних подіях.</p>
</li>
</ul>
<h2 id="32-agent-chat-window">3.2. Agent Chat Window<a class="headerlink" href="#32-agent-chat-window" title="Permanent link">&para;</a></h2>
<p>Окремий чат у форматі інтерфейсу:</p>
<div class="codehilite"><pre><span></span><code>---
| Team Assistant (ім&#39;я агента) |
| Chat messages |
| Input field |
</code></pre></div>
<p>Функції:</p>
<ul>
<li>
<p>ставити питання агенту;</p>
</li>
<li>
<p>отримувати аналіз;</p>
</li>
<li>
<p>генерувати документи (MVP — текст);</p>
</li>
<li>
<p>зворотній зв'язок 👍/👎;</p>
</li>
<li>
<p>self-review автозапуск.</p>
</li>
</ul>
<h2 id="33-inline-agent-messages">3.3. Inline Agent Messages у каналах<a class="headerlink" href="#33-inline-agent-messages" title="Permanent link">&para;</a></h2>
<p>Агент може писати в каналі:</p>
<p>Способи:</p>
<ul>
<li>
<p>коли його тегнули: @assistant</p>
</li>
<li>
<p>коли користувач попросив: "Підсумуй останнє"</p>
</li>
<li>
<p>коли канал просить допомогу (опційно)</p>
</li>
<li>
<p>коли тригери (як у Slack bots)</p>
</li>
</ul>
<p>Повідомлення агента виглядають так:</p>
<ul>
<li>
<p>інший фон,</p>
</li>
<li>
<p>аватар агента,</p>
</li>
<li>
<p>дрібний значок "AI".</p>
</li>
</ul>
<hr />
<h1 id="4-sidebar">4. Sidebar інтеграція<a class="headerlink" href="#4-sidebar" title="Permanent link">&para;</a></h1>
<p>У лівому меню зʼявляється новий розділ:</p>
<div class="codehilite"><pre><span></span><code>Агенти
• Team Assistant
• (у майбутньому: Personal Agent)
</code></pre></div>
<p>При натисканні → сторінка агента.</p>
<hr />
<h1 id="5">5. Сторінка агента<a class="headerlink" href="#5" title="Permanent link">&para;</a></h1>
<h3 id="_1">Розташування:<a class="headerlink" href="#_1" title="Permanent link">&para;</a></h3>
<p><code>/t/:teamId/agent/:agentId</code></p>
<p>Складається з 4 вкладок:</p>
<h2 id="51">5.1. "Чат"<a class="headerlink" href="#51" title="Permanent link">&para;</a></h2>
<p>Центральне місце взаємодії з агентом.</p>
<p>Вигляд: стандартний чат + тред з агентом.</p>
<h2 id="52">5.2. "Памʼять"<a class="headerlink" href="#52" title="Permanent link">&para;</a></h2>
<p>Показує:</p>
<ul>
<li>
<p>довгострокові факти,</p>
</li>
<li>
<p>короткострокові факти,</p>
</li>
<li>
<p>терміни,</p>
</li>
<li>
<p>ключові меседжі.</p>
</li>
</ul>
<p>Кнопки:</p>
<ul>
<li>
<p>«Очистити коротку»</p>
</li>
<li>
<p>«Очистити довгострокову»</p>
</li>
<li>
<p>«Експорт памʼяті»</p>
</li>
</ul>
<h2 id="53">5.3. "Самонавчання"<a class="headerlink" href="#53" title="Permanent link">&para;</a></h2>
<p>(інтегровано з документом 09)</p>
<p>Поля:</p>
<ul>
<li>
<p>toggle: self-improvement ON/OFF</p>
</li>
<li>
<p>рівень: basic / extended</p>
</li>
<li>
<p>джерела: канал / вся microDAO / DAGI</p>
</li>
<li>
<p>статус останнього review:</p>
</li>
<li>
<p>дата</p>
</li>
<li>
<p>кількість знайдених помилок</p>
</li>
<li>
<p>кількість пропозицій</p>
</li>
</ul>
<p>Кнопка:</p>
<ul>
<li>«Запустити self-review зараз»</li>
</ul>
<h2 id="54">5.4. "Еволюція"<a class="headerlink" href="#54" title="Permanent link">&para;</a></h2>
<p>Показує:</p>
<ul>
<li>
<p>список пропозицій,</p>
</li>
<li>
<p>версії агента,</p>
</li>
<li>
<p>детальні diffs,</p>
</li>
<li>
<p>кнопки accept/reject/edit.</p>
</li>
</ul>
<p>UI приклад:</p>
<div class="codehilite"><pre><span></span><code><span class="err">Версія</span><span class="o">:</span><span class="w"> </span><span class="n">v4</span><span class="o">.</span><span class="mi">2</span>
<span class="err">Запропоновано</span><span class="w"> </span><span class="mi">2</span><span class="w"> </span><span class="err">покращення</span><span class="o">:</span>
<span class="o">[</span><span class="mi">1</span><span class="o">]</span><span class="w"> </span><span class="err">Нове</span><span class="w"> </span><span class="err">правило</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Відповідати українською, якщо канал український.&quot;</span><span class="w"> </span><span class="o">[</span><span class="err">Прийняти</span><span class="o">]</span><span class="w"> </span><span class="o">[</span><span class="err">Відхилити</span><span class="o">]</span>
<span class="o">[</span><span class="mi">2</span><span class="o">]</span><span class="w"> </span><span class="n">FAQ</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Як додати учасника до команди?&quot;</span><span class="w"> </span><span class="o">[</span><span class="err">Прийняти</span><span class="o">]</span><span class="w"> </span><span class="o">[</span><span class="err">Редагувати</span><span class="o">]</span>
</code></pre></div>
<hr />
<h1 id="6">6. Взаємодія агента з подіями<a class="headerlink" href="#6" title="Permanent link">&para;</a></h1>
<h2 id="61">6.1. У каналі<a class="headerlink" href="#61" title="Permanent link">&para;</a></h2>
<p>Тригери для агента:</p>
<ul>
<li>
<p><code>@assistant</code> — пряме звернення. </p>
</li>
<li>
<p>Фрази: </p>
</li>
<li>
<p>"Підсумуй будь ласка" </p>
</li>
<li>
<p>"Що сталося?" </p>
</li>
<li>
<p>"Створи таску з цього" </p>
</li>
<li>
<p>"Які наступні кроки?" </p>
</li>
<li>
<p>Коли новий учасник приєднався:</p>
</li>
<li>
<p>агент робить welcome-репліку.</p>
</li>
</ul>
<hr />
<h1 id="7-follow-ups-projects">7. Взаємодія агента з Follow-Ups &amp; Projects<a class="headerlink" href="#7-follow-ups-projects" title="Permanent link">&para;</a></h1>
<h3 id="71-follow-ups">7.1. Follow-ups<a class="headerlink" href="#71-follow-ups" title="Permanent link">&para;</a></h3>
<p>Агент може:</p>
<ul>
<li>
<p>створювати follow-up автоматично,</p>
</li>
<li>
<p>пропонувати: "Хочеш я створю задачу з цього?",</p>
</li>
<li>
<p>групувати follow-ups.</p>
</li>
</ul>
<h3 id="72-projects">7.2. Projects<a class="headerlink" href="#72-projects" title="Permanent link">&para;</a></h3>
<p>Агент може:</p>
<ul>
<li>
<p>пропонувати задачі,</p>
</li>
<li>
<p>заповнювати опис задач,</p>
</li>
<li>
<p>будувати мінімальні roadmaps,</p>
</li>
<li>
<p>робити автоматичні щоденні підсумки по проєкту (summary).</p>
</li>
</ul>
<hr />
<h1 id="8-notification-logic">8. Notification Logic<a class="headerlink" href="#8-notification-logic" title="Permanent link">&para;</a></h1>
<p>Агент sparingly надсилає нотифікації:</p>
<p>Типи:</p>
<ul>
<li>
<p>завершений self-review,</p>
</li>
<li>
<p>знайдені проблеми,</p>
</li>
<li>
<p>нові пропозиції змін,</p>
</li>
<li>
<p>нагадування про follow-ups,</p>
</li>
<li>
<p>важливі зміни у спільноті.</p>
</li>
</ul>
<p>UI:</p>
<ul>
<li>
<p>Badge на іконці агента,</p>
</li>
<li>
<p>"пульсація" Agent Bubble,</p>
</li>
<li>
<p>push (на майбутнє).</p>
</li>
</ul>
<hr />
<h1 id="9-ux-">9. Анімації та UX-поведінка<a class="headerlink" href="#9-ux-" title="Permanent link">&para;</a></h1>
<ul>
<li>
<p>Аватар агента реагує на події (мʼяка анімована "пульсація").</p>
</li>
<li>
<p>У чаті агент не відповідає миттєво (0.30.7s delay).</p>
</li>
<li>
<p>Пише «…друкую» (typing indicator).</p>
</li>
<li>
<p>Помилки агента обробляються як звичайні системні помилки.</p>
</li>
</ul>
<hr />
<h1 id="10-agent-first-onboarding">10. Інтеграція з Agent-First Onboarding<a class="headerlink" href="#10-agent-first-onboarding" title="Permanent link">&para;</a></h1>
<p>Після онбордингу:</p>
<ul>
<li>
<p>той самий агент-провідник стає Team Assistant</p>
</li>
<li>
<p>або передає користувача "головному" агенту команди</p>
</li>
</ul>
<p>Після завершення онбордингу агент каже:</p>
<blockquote>
<p>"Якщо хочеш, я можу показати тобі, як працює ваша молоденька microDAO."</p>
</blockquote>
<hr />
<h1 id="11-cursor">11. Завдання для Cursor<a class="headerlink" href="#11-cursor" title="Permanent link">&para;</a></h1>
<div class="codehilite"><pre><span></span><code>You are a senior React/TS engineer.
Implement Agent UI System using:
<span class="k">*</span> 10_agent_ui_system.md
<span class="k">*</span> 08_agent_first_onboarding.md
<span class="k">*</span> 03_api_core_snapshot.md
<span class="k">*</span> 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:
<span class="k">*</span> list of modified files
<span class="k">*</span> diff
<span class="k">*</span> summary
</code></pre></div>
<hr />
<h1 id="12">12. Компоненти та структура файлів<a class="headerlink" href="#12" title="Permanent link">&para;</a></h1>
<h2 id="121-ui">12.1. Компоненти UI<a class="headerlink" href="#121-ui" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span><code>src/components/agent/
AgentBubble.tsx # Фіксований аватар у правому нижньому куті
AgentChatWindow.tsx # Окно чату з агентом
AgentMessage.tsx # Повідомлення агента в каналах
AgentAvatar.tsx # Аватар агента з анімаціями
AgentTypingIndicator.tsx # Індикатор набору тексту
</code></pre></div>
<h2 id="122">12.2. Сторінки<a class="headerlink" href="#122" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span><code>src/pages/
AgentPage.tsx # Головна сторінка агента з вкладками
AgentChatTab.tsx # Вкладка чату
AgentMemoryTab.tsx # Вкладка пам&#39;яті
AgentLearningTab.tsx # Вкладка самонавчання
AgentEvolutionTab.tsx # Вкладка еволюції
</code></pre></div>
<h2 id="123-hooks">12.3. Hooks<a class="headerlink" href="#123-hooks" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span><code>src/hooks/
useAgentActions.ts # Дії агента (відповіді, аналіз)
useAgentNotifications.ts # Нотифікації від агента
useAgentMemory.ts # Робота з пам&#39;яттю агента
useAgentEvolution.ts # Еволюція агента (з 09_evolutionary_agent.md)
</code></pre></div>
<h2 id="124">12.4. Типи<a class="headerlink" href="#124" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span><code><span class="nx">src</span><span class="o">/</span><span class="nx">types</span><span class="o">/</span>
<span class="w"> </span><span class="nx">agent</span><span class="p">.</span><span class="nx">ts</span><span class="w"> </span><span class="err">#</span><span class="w"> </span><span class="nx">Типи</span><span class="w"> </span><span class="nx">для</span><span class="w"> </span><span class="nx">агентів</span>
<span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">Agent</span>
<span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">AgentMessage</span>
<span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">AgentSuggestion</span>
<span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">AgentVersion</span>
<span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">AgentMemory</span>
</code></pre></div>
<hr />
<h1 id="13">13. Інтеграція з каналами<a class="headerlink" href="#13" title="Permanent link">&para;</a></h1>
<h2 id="131">13.1. Відображення повідомлень агента<a class="headerlink" href="#131" title="Permanent link">&para;</a></h2>
<p>Повідомлення агента в каналі мають:</p>
<ul>
<li>Спеціальний фон (наприклад, світло-синій)</li>
<li>Аватар агента з іконкою AI</li>
<li>Індикатор "AI" біля імені</li>
<li>Кнопки фідбеку 👍/👎 (опціонально)</li>
</ul>
<h2 id="132">13.2. Тригери для агента<a class="headerlink" href="#132" title="Permanent link">&para;</a></h2>
<p>Система розпізнає наступні тригери:</p>
<ul>
<li><code>@assistant</code> або <code>@agent</code> — пряме звернення</li>
<li>Фрази-команди:</li>
<li>"Підсумуй"</li>
<li>"Створи задачу"</li>
<li>"Що сталося?"</li>
<li>"Які наступні кроки?"</li>
<li>"Допоможи з..."</li>
</ul>
<h2 id="133">13.3. Автоматичні дії<a class="headerlink" href="#133" title="Permanent link">&para;</a></h2>
<p>Агент може автоматично:</p>
<ul>
<li>Привітати нового учасника</li>
<li>Підсумувати довгі обговорення</li>
<li>Запропонувати створити задачу з важливого повідомлення</li>
<li>Нагадати про дедлайни</li>
</ul>
<hr />
<h1 id="14-api">14. API інтеграція<a class="headerlink" href="#14-api" title="Permanent link">&para;</a></h1>
<h2 id="141">14.1. Отримання відповіді від агента<a class="headerlink" href="#141" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span><code><span class="nx">POST</span><span class="w"> </span><span class="o">/</span><span class="nx">agents</span><span class="o">/</span><span class="p">{</span><span class="nx">agentId</span><span class="p">}</span><span class="o">/</span><span class="nx">chat</span>
<span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;message&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Підсумуй останні повідомлення&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;context&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;channelId&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;channel-123&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;threadId&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;thread-456&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="142">14.2. Отримання пам'яті агента<a class="headerlink" href="#142" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span><code><span class="nx">GET</span><span class="w"> </span><span class="o">/</span><span class="nx">agents</span><span class="o">/</span><span class="p">{</span><span class="nx">agentId</span><span class="p">}</span><span class="o">/</span><span class="nx">memory</span>
</code></pre></div>
<h2 id="143">14.3. Оновлення налаштувань самонавчання<a class="headerlink" href="#143" title="Permanent link">&para;</a></h2>
<div class="codehilite"><pre><span></span><code><span class="nx">PATCH</span><span class="w"> </span><span class="o">/</span><span class="nx">agents</span><span class="o">/</span><span class="p">{</span><span class="nx">agentId</span><span class="p">}</span><span class="o">/</span><span class="nx">learning</span>
<span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;enabled&quot;</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;level&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;extended&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;sources&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;channel&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;team&quot;</span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<hr />
<h1 id="15-ux">15. UX деталі<a class="headerlink" href="#15-ux" title="Permanent link">&para;</a></h1>
<h2 id="151-agent-bubble">15.1. Agent Bubble<a class="headerlink" href="#151-agent-bubble" title="Permanent link">&para;</a></h2>
<ul>
<li>Розмір: 56x56px</li>
<li>Позиція: fixed, bottom-right, 24px від країв</li>
<li>Z-index: 1000</li>
<li>Анімація: м'яка пульсація при нових нотифікаціях</li>
<li>Badge: червоний кружечок з кількістю нових подій</li>
</ul>
<h2 id="152-agent-chat-window">15.2. Agent Chat Window<a class="headerlink" href="#152-agent-chat-window" title="Permanent link">&para;</a></h2>
<ul>
<li>Розмір: 400x600px (desktop), fullscreen (mobile)</li>
<li>Позиція: fixed, bottom-right, над Agent Bubble</li>
<li>Анімація відкриття: slide-up з fade</li>
<li>Закриття: кнопка X або клік поза вікном</li>
</ul>
<h2 id="153-typing-indicator">15.3. Typing Indicator<a class="headerlink" href="#153-typing-indicator" title="Permanent link">&para;</a></h2>
<ul>
<li>Показується під час генерації відповіді</li>
<li>Анімація: три точки, що пульсують</li>
<li>Текст: "Агент друкує..."</li>
</ul>
<hr />
<h1 id="16">16. Обробка помилок<a class="headerlink" href="#16" title="Permanent link">&para;</a></h1>
<h2 id="161-api">16.1. Помилки API<a class="headerlink" href="#161-api" title="Permanent link">&para;</a></h2>
<p>Якщо агент не може відповісти:</p>
<ul>
<li>Показати дружнє повідомлення: "Вибач, зараз не можу відповісти. Спробуй пізніше."</li>
<li>Запропонувати альтернативу</li>
<li>Логувати помилку для аналізу</li>
</ul>
<h2 id="162">16.2. Таймаути<a class="headerlink" href="#162" title="Permanent link">&para;</a></h2>
<p>Якщо відповідь занадто довга:</p>
<ul>
<li>Показати індикатор завантаження</li>
<li>Запропонувати скасувати</li>
<li>Після 30 секунд — показати попередження</li>
</ul>
<hr />
<h1 id="17">17. Тестування<a class="headerlink" href="#17" title="Permanent link">&para;</a></h1>
<h2 id="171-unit-tests">17.1. Unit Tests<a class="headerlink" href="#171-unit-tests" title="Permanent link">&para;</a></h2>
<ul>
<li>Тести для <code>AgentBubble</code></li>
<li>Тести для <code>AgentChatWindow</code></li>
<li>Тести для <code>useAgentActions</code></li>
<li>Тести для розпізнавання тригерів</li>
</ul>
<h2 id="172-integration-tests">17.2. Integration Tests<a class="headerlink" href="#172-integration-tests" title="Permanent link">&para;</a></h2>
<ul>
<li>Тестування повного flow: питання → відповідь → фідбек</li>
<li>Тестування інтеграції з каналами</li>
<li>Тестування нотифікацій</li>
</ul>
<h2 id="173-e2e-tests">17.3. E2E Tests<a class="headerlink" href="#173-e2e-tests" title="Permanent link">&para;</a></h2>
<ul>
<li>Користувач відкриває Agent Chat → ставить питання → отримує відповідь</li>
<li>Користувач тегує агента в каналі → агент відповідає</li>
<li>Користувач приймає пропозицію еволюції → агент оновлюється</li>
</ul>
<hr />
<h1 id="18">18. Результат<a class="headerlink" href="#18" title="Permanent link">&para;</a></h1>
<p>MicroDAO стає не месенджером з агентами, а <strong>агентською операційною системою спільнот</strong>, де ШІ — активний навігатор, який еволюціонує та живе поруч з людьми.</p>
<p>Агент:</p>
<ul>
<li>є першим інтерфейсом для нових користувачів,</li>
<li>допомагає у щоденній роботі команди,</li>
<li>еволюціонує разом зі спільнотою,</li>
<li>залишається під повним контролем користувачів,</li>
<li>інтегрується з усіма функціями MicroDAO.</li>
</ul>
<hr />
<p><strong>Готово.</strong><br />
Це <strong>повна специфікація агентського UI системи</strong>, готова до використання в Cursor.</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.sections", "navigation.instant", "content.code.copy"], "search": "../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.3220b9d7.min.js"></script>
</body>
</html>