Files
agentik-desktop/sketches/index.html
T
subochev 27f349550c Макеты — один sketches/index.html; approved/ удалён
- sketches/index.html: все экраны одним документом в порядке 1·… (14–19 — бывшие approved)
- approved/ (4 файла групп + 3 макета + README) удалён как дубль
- стили вынесены в sketches/style.css
- README, THEMES, BORROW-FROM-ASSISTENT, MARKDOWN-SOURCE, MIC-ASR-SEARCH
  приведены к фактическому состоянию
2026-09-28 10:07:57 +03:00

1426 lines
83 KiB
HTML
Raw 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="ru">
<head>
<meta charset="utf-8">
<title>Agentik desktop — все экраны</title>
<link rel="stylesheet" href="style.css">
<style>
body { display: block; padding: 28px 24px 80px; background: #0A0A0F; }
.screen {
width: 1240px; margin: 0 auto 56px; position: relative;
overflow: hidden; border-radius: 14px;
}
.screen .lbl {
text-align: center; font-size: 12px; color: var(--dim);
margin-bottom: 12px; letter-spacing: .03em; position: relative;
background: transparent;
}
.screen .lbl b { color: var(--fg); font-weight: 650; margin-right: 4px; }
/* затемнение окна под поповером проверки в макете агентов */
.screen .dim { opacity: .4; }
.screen .layer { position: relative; inset: auto; margin-top: 18px; }
</style>
</head>
<body>
<!-- ============ 1 · список диалогов (диалог не выбран) ============ -->
<section class="screen">
<div class="lbl"><b>1 · список диалогов</b> рейка / voice-first, диалог не выбран</div>
<div class="win">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты<b>3</b></div>
<div class="chip">Работа</div>
<div class="chip">Дом</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows">
<div class="row on">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">С</div>
<div class="mid">
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
<div class="l2"><span class="p">Собрал отчёт, жду правок</span><span class="bd">2</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a2)"></span>
<div class="ava" style="background:var(--a2)">К</div>
<div class="mid">
<div class="l1"><span class="n">Книги</span><span class="t">пн</span></div>
<div class="l2"><span class="p">Разложил по полкам</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">О</div>
<div class="mid">
<div class="l1"><span class="n">Отчёт за квартал</span><span class="t">12:05</span></div>
<div class="l2"><span class="p">Файл лежит на диске</span><span class="bd">1</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a3)"></span>
<div class="ava" style="background:var(--a3)">Р</div>
<div class="mid">
<div class="l1"><span class="n">Разбор логов</span><span class="t">вчера</span></div>
<div class="l2"><span class="p">Нашёл 3 ошибки 502</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a2)"></span>
<div class="ava" style="background:var(--a2)">S</div>
<div class="mid">
<div class="l1"><span class="n">Solana-бэкенд</span><span class="t">вчера</span></div>
<div class="l2"><span class="p">Девайс-нет стартовал</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">Д</div>
<div class="mid">
<div class="l1"><span class="n">Деплой в прод</span><span class="t">пн</span></div>
<div class="l2"><span class="p">Готово, релиз 3 опубликован</span></div>
</div>
</div>
</div>
</section>
<main class="main">
<div class="empty">
<div class="big">💬</div>
<h3>Выберите диалог слева</h3>
<p>Или нажмите <b>+</b> в шапке списка, чтобы создать новый. Пока ни один диалог не открыт.</p>
</div>
</main>
</div>
</section>
<!-- ============ 2 · открытый чат ============ -->
<section class="screen">
<div class="lbl"><b>2 · открытый чат</b> диалог с агентом, последний ход агента завершён</div>
<div class="win">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты<b>3</b></div>
<div class="chip">Работа</div>
<div class="chip">Дом</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows">
<div class="row on">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">С</div>
<div class="mid">
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
<div class="l2"><span class="p">Собрал отчёт, жду правок</span><span class="bd">2</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a2)"></span>
<div class="ava" style="background:var(--a2)">К</div>
<div class="mid">
<div class="l1"><span class="n">Книги</span><span class="t">пн</span></div>
<div class="l2"><span class="p">Разложил по полкам</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">О</div>
<div class="mid">
<div class="l1"><span class="n">Отчёт за квартал</span><span class="t">12:05</span></div>
<div class="l2"><span class="p">Файл лежит на диске</span><span class="bd">1</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a3)"></span>
<div class="ava" style="background:var(--a3)">Р</div>
<div class="mid">
<div class="l1"><span class="n">Разбор логов</span><span class="t">вчера</span></div>
<div class="l2"><span class="p">Нашёл 3 ошибки 502</span></div>
</div>
</div>
</div>
</section>
<main class="main">
<header class="m-head">
<div class="ava" style="background:var(--a1)">С</div>
<div class="hd">
<div class="t1">agentik · рабочий</div>
<div class="t2 ok">на связи</div>
</div>
<div class="ghost">
<button>Стоп</button>
</div>
</header>
<div class="thread">
<div class="b u">Посмотри логи за вчера<span class="tm">14:10</span></div>
<div class="b a">Проверил: 3 ошибки <code>502</code> около 04:20, все — обрыв соединения с upstream. Виновник — таймаут прокси. Поправить?<span class="tm">14:12</span></div>
<div class="b u">Да, увеличь таймаут до 60 и перезапусти прокси<span class="tm">14:14</span></div>
<div class="act-line">
<span class="g">⚙</span>
<span>вызов инструмента: <span class="nm">shell</span></span>
<span class="ch">▾</span>
</div>
<div class="b a">Готово: таймаут поднят, прокси стартанул, за последний час ошибок нет.<span class="tm">14:22</span></div>
</div>
<div class="composer">
<div class="composer-row">
<div class="field">Сообщение агенту…</div>
<button class="mic" title="Голос">🎤</button>
<button class="send off" title="Отправить">➤</button>
</div>
</div>
</main>
</div>
</section>
<!-- ============ 3 · идёт запись голоса ============ -->
<section class="screen">
<div class="lbl"><b>3 · запись голоса</b> композер в режиме recording — панель с волной и таймером</div>
<div class="win">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты<b>3</b></div>
<div class="chip">Работа</div>
<div class="chip">Дом</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows">
<div class="row on">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">С</div>
<div class="mid">
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
<div class="l2"><span class="p">Собрал отчёт, жду правок</span><span class="bd">2</span></div>
</div>
</div>
</div>
</section>
<main class="main">
<header class="m-head">
<div class="ava" style="background:var(--a1)">С</div>
<div class="hd">
<div class="t1">agentik · рабочий</div>
<div class="t2 ok">на связи</div>
</div>
</header>
<div class="thread">
<div class="b a">Тогда профиль лучше не ставить — массив «дышит». Возьмите герметик для дерева: он остаётся эластичным.<span class="tm">14:33</span></div>
<div class="b u">Скинь, что брать по смесителю<span class="tm">14:34</span></div>
<div class="b a">Смеситель с выдвижным изливом, <code>GROHE</code> или <code>Hansgrohe</code>.<span class="tm">14:35</span></div>
</div>
<div class="composer">
<div class="rec-panel">
<div class="wave"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="rec-time">0:07</div>
<button class="rec-btn" title="Пауза">⏸</button>
<button class="rec-btn" title="Отменить запись">✕</button>
<button class="rec-btn rec-send" title="Отправить">➤</button>
</div>
</div>
</main>
</div>
</section>
<!-- ============ 4 · нет ассистентов ============ -->
<section class="screen">
<div class="lbl"><b>4 · нет ассистентов</b> пустое состояние рейки и основной зоны</div>
<div class="win">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты</div>
<div class="chip">Работа</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows"></div>
</section>
<main class="main">
<div class="empty">
<div class="big">💬</div>
<h3>Диалогов пока нет</h3>
<p>Добавьте первого ассистента — он появится в списке, и можно будет начать.</p>
<button class="btn prim">+ Добавить ассистента</button>
</div>
</main>
</div>
</section>
<!-- ============ 5 · модалка нового диалога ============ -->
<section class="screen">
<div class="lbl"><b>5 · модалка нового диалога</b> выбор агента для нового диалога</div>
<div class="win" style="position:relative">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты<b>3</b></div>
<div class="chip">Работа</div>
<div class="chip">Дом</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows">
<div class="row">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">С</div>
<div class="mid">
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
<div class="l2"><span class="p">Собрал отчёт, жду правок</span></div>
</div>
</div>
</div>
</section>
<main class="main">
<div class="empty">
<div class="big">💬</div>
<h3>Выберите диалог слева</h3>
<p>Или нажмите <b>+</b> в шапке списка, чтобы создать новый.</p>
</div>
</main>
<div class="scrim">
<div class="modal">
<h2>Новый диалог</h2>
<div class="sub">Выберите ассистента — он отвечает на «/agentik» на своём адресе</div>
<div class="body">
<div class="agent on">
<div class="sign" style="background:var(--a1)">С</div>
<div class="mid">
<div class="nm">Строитель</div>
<div class="ad">http://192.168.88.135:8080/agentik</div>
</div>
<div class="radio"></div>
</div>
<div class="agent">
<div class="sign" style="background:var(--a2)">К</div>
<div class="mid">
<div class="nm">Книги</div>
<div class="ad">http://192.168.76.199:8080/agentik</div>
</div>
<div class="radio"></div>
</div>
<div class="agent">
<div class="sign" style="background:var(--a3)">Р</div>
<div class="mid">
<div class="nm">Разбор логов <span class="bad">· не отвечает</span></div>
<div class="ad">http://192.168.10.42:8080/agentik</div>
</div>
<div class="radio"></div>
</div>
<div class="agent">
<div class="sign" style="background:var(--a4)">S</div>
<div class="mid">
<div class="nm">Solana-бэкенд</div>
<div class="ad">http://192.168.88.24:8080/agentik</div>
</div>
<div class="radio"></div>
</div>
<div class="agent">
<div class="sign" style="background:var(--a5)">Д</div>
<div class="mid">
<div class="nm">DevOps · деплой</div>
<div class="ad">http://192.168.5.10:8080/agentik</div>
</div>
<div class="radio"></div>
</div>
</div>
<div class="foot">
<button class="btn">Отмена</button>
<button class="btn prim">Создать →</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 6 · управление группами ============ -->
<section class="screen">
<div class="lbl"><b>6 · управление группами</b> модалка со списком групп + добавить</div>
<div class="win" style="position:relative">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты<b>3</b></div>
<div class="chip">Работа</div>
<div class="chip">Дом</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows">
<div class="row on">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">С</div>
<div class="mid">
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
<div class="l2"><span class="p">Собрал отчёт, жду правок</span><span class="bd">2</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a2)"></span>
<div class="ava" style="background:var(--a2)">К</div>
<div class="mid">
<div class="l1"><span class="n">Книги</span><span class="t">пн</span></div>
<div class="l2"><span class="p">Разложил по полкам</span></div>
</div>
</div>
</div>
</section>
<main class="main">
<header class="m-head">
<div class="ava" style="background:var(--a1)">С</div>
<div class="hd">
<div class="t1">agentik · рабочий</div>
<div class="t2 ok">на связи</div>
</div>
</header>
<div class="thread">
<div class="b a">Тогда профиль лучше не ставить — массив «дышит». Возьмите герметик для дерева.<span class="tm">14:33</span></div>
</div>
</main>
<div class="scrim">
<div class="modal groups">
<h2>Группы<button class="x" title="Закрыть">✕</button></h2>
<div class="sub" style="font-size:12.5px;color:var(--dim);padding:0 20px 12px;">Папки для диалогов. «Все чаты» — встроенная, её нельзя удалить или переименовать.</div>
<div class="body">
<div class="grp sys">
<div class="mid">
<div class="nm">Все чаты</div>
<div class="sub">Показывает все диалоги, из любой группы</div>
</div>
<span class="lock">встроенная</span>
</div>
<div class="grp">
<div class="mid">
<div class="nm">Работа</div>
<div class="sub">12 диалогов</div>
</div>
<div class="acts">
<button class="mini-ic" title="Настройки группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<div class="grp">
<div class="mid">
<div class="nm">Дом</div>
<div class="sub">4 диалога</div>
</div>
<div class="acts">
<button class="mini-ic" title="Настройки группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<div class="grp">
<div class="mid">
<div class="nm">Учёба</div>
<div class="sub">2 диалога</div>
</div>
<div class="acts">
<button class="mini-ic" title="Настройки группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<div class="grp">
<div class="mid">
<div class="nm">Личное</div>
<div class="sub">пустая</div>
</div>
<div class="acts">
<button class="mini-ic" title="Настройки группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<button class="btn wide" style="margin:8px 0 4px">+ Добавить группу</button>
</div>
<div class="foot">
<button class="btn prim" style="flex:1">Готово</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 7 · создание группы ============ -->
<section class="screen">
<div class="lbl"><b>7 · создание группы</b> форма новой группы + выбор диалогов</div>
<div class="win" style="position:relative">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты<b>3</b></div>
<div class="chip">Работа</div>
<div class="chip">Дом</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows">
<div class="row on">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">С</div>
<div class="mid">
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
<div class="l2"><span class="p">Собрал отчёт, жду правок</span><span class="bd">2</span></div>
</div>
</div>
<div class="row">
<span class="strip" style="background:var(--a2)"></span>
<div class="ava" style="background:var(--a2)">К</div>
<div class="mid">
<div class="l1"><span class="n">Книги</span><span class="t">пн</span></div>
<div class="l2"><span class="p">Разложил по полкам</span></div>
</div>
</div>
</div>
</section>
<main class="main">
<header class="m-head">
<div class="ava" style="background:var(--a1)">С</div>
<div class="hd">
<div class="t1">agentik · рабочий</div>
<div class="t2 ok">на связи</div>
</div>
</header>
<div class="thread">
<div class="b a">Тогда профиль лучше не ставить — массив «дышит». Возьмите герметик для дерева.<span class="tm">14:33</span></div>
</div>
</main>
<div class="scrim">
<div class="modal groups">
<h2>Новая группа<button class="x" title="Закрыть">✕</button></h2>
<div class="sub" style="font-size:12.5px;color:var(--dim);padding:0 20px 12px;">Придумайте имя и добавьте в группу нужные диалоги.</div>
<div class="body">
<div class="form-field">
<label>Название</label>
<input type="text" value="Учёба" placeholder="как назвать группу">
<div class="note">Так группа будет называться в ленте над списком диалогов.</div>
</div>
<div class="tags">
<div class="lbl">Диалоги в группе <span style="color:var(--dim);font-weight:500;text-transform:none;letter-spacing:0;">(0)</span></div>
<div class="empty">В этой группе пока нет диалогов. Нажмите «Добавить диалог», чтобы выбрать.</div>
<button class="add-chat-btn" style="margin-top:9px;">+ Добавить диалог</button>
</div>
</div>
<div class="foot">
<button class="btn">Отмена</button>
<button class="btn prim">Создать группу</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 8 · изменение группы ============ -->
<section class="screen">
<div class="lbl"><b>8 · изменение группы</b> переименование, диалоги, опасная зона</div>
<div class="win" style="position:relative">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты<b>3</b></div>
<div class="chip">Работа</div>
<div class="chip">Дом</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows">
<div class="row on">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">С</div>
<div class="mid">
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
<div class="l2"><span class="p">Собрал отчёт, жду правок</span><span class="bd">2</span></div>
</div>
</div>
</div>
</section>
<main class="main">
<header class="m-head">
<div class="ava" style="background:var(--a1)">С</div>
<div class="hd">
<div class="t1">agentik · рабочий</div>
<div class="t2 ok">на связи</div>
</div>
</header>
<div class="thread">
<div class="b a">Тогда профиль лучше не ставить — массив «дышит». Возьмите герметик для дерева.<span class="tm">14:33</span></div>
</div>
</main>
<div class="scrim">
<div class="modal groups">
<h2>Изменить группу<button class="x" title="Закрыть">✕</button></h2>
<div class="sub" style="font-size:12.5px;color:var(--dim);padding:0 20px 12px;">Переименование и состав диалогов. Удаление самой группы — внизу.</div>
<div class="body">
<div class="form-field">
<label>Название</label>
<input type="text" value="Дом">
<div class="note">Новое имя сразу появится в ленте над списком диалогов.</div>
</div>
<div class="tags">
<div class="lbl">Диалоги в группе <span style="color:var(--dim);font-weight:500;text-transform:none;letter-spacing:0;">(3)</span></div>
<div class="tags-list">
<div class="chat-tag">
<div class="ava-sm" style="background:var(--a2)">К</div>
<span class="nm">Книги</span>
<button class="x" title="Убрать из группы">✕</button>
</div>
<div class="chat-tag">
<div class="ava-sm" style="background:var(--a3)">П</div>
<span class="nm">Плов по-узбекски</span>
<button class="x" title="Убрать из группы">✕</button>
</div>
<div class="chat-tag">
<div class="ava-sm" style="background:var(--a4)">С</div>
<span class="nm">Смета на ремонт</span>
<button class="x" title="Убрать из группы">✕</button>
</div>
</div>
<button class="add-chat-btn">+ Добавить диалог</button>
</div>
<div class="danger-zone">
<div class="lbl">Опасное</div>
<button class="btn dang" style="width:100%;text-align:center;">Удалить группу</button>
<div class="note" style="font-size:11px;color:var(--dim);margin-top:8px;line-height:1.5;">Удаление группы не трогает диалоги — они останутся и будут видны в «Все чаты».</div>
</div>
</div>
<div class="foot">
<button class="btn">Отмена</button>
<button class="btn prim">Сохранить</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 9 · выбор диалога для группы ============ -->
<section class="screen">
<div class="lbl"><b>9 · выбор диалога для группы</b> список диалогов с галочками</div>
<div class="win" style="position:relative">
<section class="list">
<div class="l-head"><h1>Диалоги</h1></div>
<div class="chips">
<div class="chip on">Все чаты<b>3</b></div>
<div class="chip">Работа</div>
<div class="chip">Дом</div>
<button class="chip-act" title="Группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
<div class="q">🔍 Поиск…</div>
<div class="rows">
<div class="row on">
<span class="strip" style="background:var(--a1)"></span>
<div class="ava" style="background:var(--a1)">С</div>
<div class="mid">
<div class="l1"><span class="n">agentik · рабочий</span><span class="t">14:22</span></div>
<div class="l2"><span class="p">Собрал отчёт, жду правок</span><span class="bd">2</span></div>
</div>
</div>
</div>
</section>
<main class="main">
<header class="m-head">
<div class="ava" style="background:var(--a1)">С</div>
<div class="hd">
<div class="t1">agentik · рабочий</div>
<div class="t2 ok">на связи</div>
</div>
</header>
<div class="thread">
<div class="b a">Тогда профиль лучше не ставить — массив «дышит». Возьмите герметик для дерева.<span class="tm">14:33</span></div>
</div>
</main>
<div class="scrim">
<div class="modal pick">
<h2>Добавить диалог в «Дом»<button class="x" title="Закрыть">✕</button></h2>
<div class="q" placeholder="Поиск по диалогам…">🔍 Поиск по диалогам…</div>
<div class="body">
<div class="pick-row">
<div class="ava-sm" style="background:var(--a2)">К</div>
<div class="mid">
<div class="nm">Книги</div>
<div class="ad">Разложил по полкам</div>
</div>
<div class="check">✓</div>
</div>
<div class="pick-row">
<div class="ava-sm" style="background:var(--a3)">П</div>
<div class="mid">
<div class="nm">Плов по-узбекски</div>
<div class="ad">На 6 порций, в казане</div>
</div>
<div class="check">✓</div>
</div>
<div class="pick-row">
<div class="ava-sm" style="background:var(--a4)">С</div>
<div class="mid">
<div class="nm">Смета на ремонт</div>
<div class="ad">Кухня + ванная, материалы</div>
</div>
<div class="check">✓</div>
</div>
<div class="pick-row">
<div class="ava-sm" style="background:var(--a1)">А</div>
<div class="mid">
<div class="nm">agentik · рабочий</div>
<div class="ad">Собрал отчёт, жду правок</div>
</div>
<div class="check">✓</div>
</div>
<div class="pick-row">
<div class="ava-sm" style="background:var(--a5)">О</div>
<div class="mid">
<div class="nm">Отчёт за квартал</div>
<div class="ad">Файл лежит на диске</div>
</div>
<div class="check">✓</div>
</div>
<div class="pick-row">
<div class="ava-sm" style="background:var(--a3)">Р</div>
<div class="mid">
<div class="nm">Разбор логов nginx</div>
<div class="ad">Нашёл 3 ошибки 502</div>
</div>
<div class="check">✓</div>
</div>
</div>
<div class="foot">
<button class="btn">Отмена</button>
<button class="btn prim">Добавить (3)</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 10 · агенты · список ============ -->
<section class="screen">
<div class="lbl"><b>10 · агенты · список</b> окно «Агенты»: карточки + действия</div>
<div class="dialog">
<div class="d-head">
<h2>Агенты</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="agent-card">
<div class="avatar" style="background:var(--accent);color:var(--on-accent)">АГ</div>
<div class="ag-mid">
<div class="ag-name">agentik</div>
<div class="ag-desc">Корпоративный помощник: код, документы, отчёты</div>
<div class="ag-addr">http://192.168.88.135:8080/agentik</div>
</div>
<div class="state"><span class="d"></span>на связи</div>
<div class="card-acts">
<button class="mini-ic" title="Проверить связь">⇄</button>
<button class="mini-ic" title="Изменить">✎</button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<div class="agent-card">
<div class="avatar" style="background:#86C99A;color:var(--on-accent)">ДМ</div>
<div class="ag-mid">
<div class="ag-name">home-assistant</div>
<div class="ag-desc">Рецепты, расписания, бытовые мелочи</div>
<div class="ag-addr">http://192.168.76.199:8080/agentik</div>
</div>
<div class="state err"><span class="d"></span>не отвечает</div>
<div class="card-acts">
<button class="mini-ic" title="Проверить связь">⇄</button>
<button class="mini-ic" title="Изменить">✎</button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<div class="agent-card">
<div class="avatar pic" style="background:transparent;padding:0"><img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%232F4A63'/%3E%3Ccircle cx='20' cy='15' r='6.5' fill='%23DCE6F0'/%3E%3Cpath d='M7 40c0-7.5 5.8-12 13-12s13 4.5 13 12z' fill='%23DCE6F0'/%3E%3C/svg%3E" alt=""></div>
<div class="ag-mid">
<div class="ag-name">Кот-ассистент</div>
<div class="ag-desc">Поддержка и шутки в трудную минуту</div>
<div class="ag-addr">http://192.168.88.24:8080/agentik</div>
</div>
<div class="state off"><span class="d"></span>не проверялся</div>
<div class="card-acts">
<button class="mini-ic" title="Проверить связь">⇄</button>
<button class="mini-ic" title="Изменить">✎</button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<button class="btn wide">+ Добавить агента</button>
</div>
<div class="d-foot">
<button class="btn prim" style="flex:1">Готово</button>
</div>
</div>
</section>
<!-- ============ 11 · агенты · новый ============ -->
<section class="screen">
<div class="lbl"><b>11 · агенты · новый</b> форма добавления: hint про <code>AgentInfo</code>, адрес, цвет/картинка</div>
<div class="dialog">
<div class="d-head">
<h2>Новый агент</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="hint-line">
Имя и описание берутся с сервера агента автоматически
(<code>AgentInfo.name</code>, <code>description</code>, <code>usefulness</code>).
Здесь нужно только настроить, как отличать агента визуально.
</div>
<div class="field">
<label>Адрес сервера агента</label>
<div class="addr-row">
<input type="text" class="mono" value="http://192.168.88.135:8080/agentik"
placeholder="http://хост:порт/agentik">
<button class="btn sm">Проверить связь</button>
</div>
<div class="note">Адрес целиком, вместе с путём <code>/agentik</code>. Если агент
на этой же машине — <code>http://localhost:8080/agentik</code>.</div>
</div>
<div class="field">
<label>Как отличать в списке</label>
<div class="appearance-tabs">
<div class="tab on">Цвет</div>
<div class="tab">Картинка</div>
</div>
<div class="pane on">
<div class="colors">
<div class="swatch on" style="background:#6AB2F2"></div>
<div class="swatch" style="background:#86C99A"></div>
<div class="swatch" style="background:#C9A886"></div>
<div class="swatch" style="background:#B79AE0"></div>
<div class="swatch" style="background:#E28C8C"></div>
</div>
<div class="note">Цветом помечаются диалоги агента в списке — полоска у строки
и точка у группы.</div>
</div>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn prim" style="flex:1">Добавить агента</button>
</div>
</div>
</section>
<!-- ============ 12 · агенты · изменить ============ -->
<section class="screen">
<div class="lbl"><b>12 · агенты · изменить</b> форма правки: адрес предзаполнен, имя/описание недоступны</div>
<div class="dialog">
<div class="d-head">
<h2>Изменить агента</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="hint-line">
Имя и описание задаются сервером и здесь недоступны для правки.
Здесь можно изменить адрес и визуальную метку.
</div>
<div class="field">
<label>Адрес сервера агента</label>
<div class="addr-row">
<input type="text" class="mono" value="http://192.168.88.135:8080/agentik">
<button class="btn sm">Проверить связь</button>
</div>
<div class="note">Адрес целиком, вместе с путём <code>/agentik</code>.</div>
</div>
<div class="field">
<label>Как отличать в списке</label>
<div class="appearance-tabs">
<div class="tab on">Цвет</div>
<div class="tab">Картинка</div>
</div>
<div class="pane on">
<div class="colors">
<div class="swatch on" style="background:#6AB2F2"></div>
<div class="swatch" style="background:#86C99A"></div>
<div class="swatch" style="background:#C9A886"></div>
<div class="swatch" style="background:#B79AE0"></div>
<div class="swatch" style="background:#E28C8C"></div>
</div>
<div class="note">Цветом помечаются диалоги агента в списке.</div>
</div>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn prim" style="flex:1">Сохранить</button>
</div>
</div>
</section>
<!-- ============ 13 · агенты · проверка связи ============ -->
<section class="screen">
<div class="lbl"><b>13 · агенты · проверка связи</b> поповер поверх затемнённого списка</div>
<div class="dialog dim">
<div class="d-head">
<h2>Агенты</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="agent-card">
<div class="avatar" style="background:var(--accent);color:var(--on-accent)">АГ</div>
<div class="ag-mid">
<div class="ag-name">agentik</div>
<div class="ag-desc">Корпоративный помощник: код, документы, отчёты</div>
<div class="ag-addr">http://192.168.88.135:8080/agentik</div>
</div>
<div class="state"><span class="d"></span>на связи</div>
<div class="card-acts">
<button class="mini-ic">⇄</button>
<button class="mini-ic">✎</button>
<button class="mini-ic del"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
</div>
<div class="d-foot"><button class="btn prim" style="flex:1">Готово</button></div>
</div>
<div class="layer">
<div class="dialog small">
<div class="d-head">
<h2>Проверка связи</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body">
<div class="probe-head ok">
<div class="big">✓</div>
<div class="txt">
<div class="ttl">Агент отвечает</div>
<div class="sub">http://192.168.88.135:8080/agentik</div>
</div>
</div>
<div class="probe-list">
<div><span>Ответ на запрос</span><b>ok</b></div>
<div><span>Отвечает по адресу</span><b>http://192.168.88.135:8080/agentik</b></div>
<div><span>Диалогов у агента</span><b>4</b></div>
<div><span>Отклик</span><b>38 мс</b></div>
</div>
<div class="hint-line">Адрес рабочий. Можно добавлять этого агента.</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Проверить снова</button>
<button class="btn prim" style="flex:1">Готово</button>
</div>
</div>
</div>
</section>
<!-- ============ 14 · sidebar-utility · главное окно ============ -->
<section class="screen">
<div class="lbl"><b>14 · sidebar-utility</b> одобренный канон — сайдбар + папки + полноценный композер с ASR</div>
<div class="window">
<aside class="sidebar">
<div class="sb-head">
<div class="sb-title">
<span>Диалоги</span>
<button class="icon-btn" title="Новый диалог">+</button>
</div>
</div>
<input class="search" placeholder="Поиск диалога…" style="margin:0 16px 8px;width:calc(100% - 32px);">
<div class="folders">
<div class="folder active">Все чаты <span class="cnt">3</span></div>
<div class="folder">Работа</div>
<div class="folder">Дом</div>
<div class="folder act" title="Группы: добавить, изменить, удалить"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайс-нет стартовал</div>
</div>
</div>
</div>
</aside>
<main class="main">
<header class="chat-head">
<button class="back-btn">←</button>
<div class="avatar">АГ</div>
<div class="head-meta">
<div class="head-name">agentik · рабочий</div>
<div class="head-sub"><span class="dot">●</span> на связи</div>
</div>
<button class="icon-btn" title="Параметры диалога">⋯</button>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI в agentik<span class="meta">14:18</span></div>
<div class="think"><b>Думает:</b> 42 прогона, красных 40. Смотрю имена тестов…
<span class="rest">похоже на проблему кодировки при создании файлов классов.</span></div>
<div class="tool"><span class="gear">⚙</span> <code>grep -rnP 'fun `[^`]*[^\x00-\x7F]' --include='*.kt'</code></div>
<div class="msg bot">Нашёл причину: в именах тестов стоит длинное тире «—», а сборка работает в ASCII-кодировке. Отсюда падение компилятора. Починил, CI зелёный.<span class="meta">14:22</span></div>
<div class="msg user">Отлично. Сделай релиз «3»<span class="meta">14:23</span></div>
<div class="think"><b>Думает:</b> создаю тег, запускаю публикацию…
<span class="rest">проверю, что в Nexus появилась версия 3.</span></div>
</div>
<div class="composer">
<div class="attach-strip"></div>
<div class="asr-note"><span class="live"></span> распознаю:
<span style="color:var(--fg)">проверь логи сборки за вчерашний день и сделай вывод …</span></div>
<div class="rec-panel">
<button class="mini cancel">✕</button>
<div class="wave"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<span class="rec-time">0:12</span>
<div class="rec-actions"><button class="mini ok">Остановить и отправить</button></div>
</div>
<div class="input-row">
<div class="input-wrap"><textarea rows="1" placeholder="Написать агенту…"></textarea></div>
<button class="rec-btn">🎙</button>
<button class="send-btn">Отправить</button>
</div>
<div class="hint"><span>готов · голос <kbd>Ctrl</kbd>+<kbd>R</kbd> · отправка <kbd>Enter</kbd></span></div>
</div>
</main>
</div>
</section>
<!-- ============ 15 · новый диалог · одобренный agent-picker ============ -->
<section class="screen">
<div class="lbl"><b>15 · agent-picker · одобренный</b> модалка выбора ассистента с warn про недоступного</div>
<div class="dialog" style="width:480px;min-width:480px;max-height:600px;">
<div class="d-head">
<h2>Новый диалог</h2>
<button class="x-btn">✕</button>
</div>
<div class="d-body" style="padding:14px 18px 8px;">
<div class="d-lead">В каком ассистенте создать диалог?</div>
<div class="agent-opt on">
<div class="avatar">АГ</div>
<div class="ag-mid">
<div class="ag-name">agentik · рабочий</div>
<div class="ag-addr">http://192.168.88.135:8080/agentik</div>
<div class="ag-state ok"><span class="d"></span>на связи</div>
</div>
<div class="pick"></div>
</div>
<div class="agent-opt">
<div class="avatar g2">ДМ</div>
<div class="ag-mid">
<div class="ag-name">домашний</div>
<div class="ag-addr">http://192.168.76.199:8080/agentik</div>
<div class="ag-state ok"><span class="d"></span>на связи</div>
</div>
<div class="pick"></div>
</div>
<div class="agent-opt">
<div class="avatar pic"></div>
<div class="ag-mid">
<div class="ag-name">Кот-ассистент</div>
<div class="ag-addr">http://192.168.88.24:8080/agentik</div>
<div class="ag-state err"><span class="d"></span>не отвечает</div>
</div>
<div class="pick"></div>
</div>
<div class="warn on" style="display:flex">
<span class="i">⚠</span>
<span>Ассистент сейчас не отвечает. Диалог создать можно, но
сообщение не уйдёт, пока он не поднимется.</span>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn prim" style="flex:1">Создать диалог</button>
</div>
</div>
</section>
<!-- ============ 16 · группы · список (sidebar-вариант) ============ -->
<section class="screen">
<div class="lbl"><b>16 · группы · список</b> одобренный — модалка поверх окна, sidebar-сайдбар</div>
<div class="window">
<aside class="sidebar">
<div class="sb-head"><div class="sb-title"><span>Диалоги</span><button class="icon-btn" title="Новый диалог">+</button></div></div>
<input class="search" placeholder="Поиск диалога…" style="margin:0 16px 10px;width:calc(100% - 32px);">
<div class="folders">
<div class="folder active">Все чаты <span class="cnt">3</span></div>
<div class="folder">Работа</div>
<div class="folder">Дом</div>
<div class="folder">Учёба</div>
<div class="folder">Личное</div>
<div class="folder act" title="Группы: добавить, изменить, удалить"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайс-нет стартовал</div>
</div>
</div>
</div>
</aside>
<main class="main">
<header class="chat-head">
<div class="avatar">АГ</div>
<div><div class="head-name">agentik · рабочий</div><div class="head-sub"><span class="dot">●</span> на связи</div></div>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI</div>
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
</div>
</main>
<div class="scrim"></div>
<div class="layer">
<div class="dialog">
<div class="d-head"><h2>Группы</h2><button class="x-btn">✕</button></div>
<div class="d-body">
<div class="grp sys">
<div class="mid"><div class="nm">Все чаты</div><div class="sub">Показывает все диалоги, из любой группы</div></div>
<div class="lock">встроенная</div>
</div>
<div class="grp">
<div class="mid"><div class="nm">Работа</div><div class="sub">12 диалогов</div></div>
<div class="acts">
<button class="mini-ic" title="Настройки группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<div class="grp">
<div class="mid"><div class="nm">Дом</div><div class="sub">4 диалога</div></div>
<div class="acts">
<button class="mini-ic" title="Настройки группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<div class="grp">
<div class="mid"><div class="nm">Учёба</div><div class="sub">2 диалога</div></div>
<div class="acts">
<button class="mini-ic" title="Настройки группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<div class="grp">
<div class="mid"><div class="nm">Личное</div><div class="sub">пустая</div></div>
<div class="acts">
<button class="mini-ic" title="Настройки группы"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></button>
<button class="mini-ic del" title="Удалить"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 3h14l-1.4 11.2a2 2 0 0 1-2 1.8H8.4a2 2 0 0 1-2-1.8L5 9zm3-6h8l1 2H7l1-2z"/></svg></button>
</div>
</div>
<button class="btn wide">+ Добавить группу</button>
</div>
<div class="d-foot"><button class="btn prim" style="flex:1">Готово</button></div>
</div>
</div>
</div>
</section>
<!-- ============ 17 · группы · новая ============ -->
<section class="screen">
<div class="lbl"><b>17 · группы · новая</b> одобренный — форма без выбора диалогов (диалоги — потом)</div>
<div class="window">
<aside class="sidebar">
<div class="sb-head"><div class="sb-title"><span>Диалоги</span><button class="icon-btn" title="Новый диалог">+</button></div></div>
<input class="search" placeholder="Поиск диалога…" style="margin:0 16px 10px;width:calc(100% - 32px);">
<div class="folders">
<div class="folder active">Все чаты <span class="cnt">3</span></div>
<div class="folder">Работа</div>
<div class="folder">Дом</div>
<div class="folder">Учёба</div>
<div class="folder">Личное</div>
<div class="folder act" title="Группы: добавить, изменить, удалить"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайс-нет стартовал</div>
</div>
</div>
</div>
</aside>
<main class="main">
<header class="chat-head">
<div class="avatar">АГ</div>
<div><div class="head-name">agentik · рабочий</div><div class="head-sub"><span class="dot">●</span> на связи</div></div>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI</div>
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
</div>
</main>
<div class="scrim"></div>
<div class="layer">
<div class="dialog">
<div class="d-head"><h2>Новая группа</h2><button class="x-btn">✕</button></div>
<div class="d-body">
<div class="field">
<label>Название</label>
<input type="text" value="Учёба" placeholder="как назвать группу">
<div class="note">Так группа будет называться в ленте над списком диалогов.</div>
</div>
<div class="info">
<span>ℹ</span>
<span>Диалоги в группу попадают потом — из самого диалога. Здесь группа
только создаётся, диалог в неё не переносится.</span>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn prim" style="flex:1">Создать группу</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 18 · группы · изменение ============ -->
<section class="screen">
<div class="lbl"><b>18 · группы · изменение</b> одобренный — переименование + danger-zone в той же форме</div>
<div class="window">
<aside class="sidebar">
<div class="sb-head"><div class="sb-title"><span>Диалоги</span><button class="icon-btn" title="Новый диалог">+</button></div></div>
<input class="search" placeholder="Поиск диалога…" style="margin:0 16px 10px;width:calc(100% - 32px);">
<div class="folders">
<div class="folder">Все чаты <span class="cnt">3</span></div>
<div class="folder active">Работа</div>
<div class="folder">Дом</div>
<div class="folder">Учёба</div>
<div class="folder">Личное</div>
<div class="folder act" title="Группы: добавить, изменить, удалить"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайс-нет стартовал</div>
</div>
</div>
</div>
</aside>
<main class="main">
<header class="chat-head">
<div class="avatar">АГ</div>
<div><div class="head-name">agentik · рабочий</div><div class="head-sub"><span class="dot">●</span> на связи</div></div>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI</div>
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
</div>
</main>
<div class="scrim"></div>
<div class="layer">
<div class="dialog">
<div class="d-head"><h2>Группа «Работа»</h2><button class="x-btn">✕</button></div>
<div class="d-body">
<div class="field">
<label>Название</label>
<input type="text" value="Работа" placeholder="как назвать группу">
<div class="note">Так группа будет называться в ленте над списком диалогов.</div>
</div>
<div class="info">
<span>ℹ</span>
<span>В группе сейчас 12 диалогов. Переименование их не затрагивает —
это только название группы.</span>
</div>
<div class="danger-zone">
<div class="lbl">Опасное</div>
<button class="btn dang" style="width:100%">Удалить группу</button>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn prim" style="flex:1">Сохранить</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 19 · группы · удаление ============ -->
<section class="screen">
<div class="lbl"><b>19 · группы · удаление</b> одобренный — отдельная модалка подтверждения с warn + красный CTA</div>
<div class="window">
<aside class="sidebar">
<div class="sb-head"><div class="sb-title"><span>Диалоги</span><button class="icon-btn" title="Новый диалог">+</button></div></div>
<input class="search" placeholder="Поиск диалога…" style="margin:0 16px 10px;width:calc(100% - 32px);">
<div class="folders">
<div class="folder">Все чаты <span class="cnt">3</span></div>
<div class="folder active">Работа</div>
<div class="folder">Дом</div>
<div class="folder">Учёба</div>
<div class="folder">Личное</div>
<div class="folder act" title="Группы: добавить, изменить, удалить"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
</div>
<div class="chat-list">
<div class="chat-row active">
<div class="avatar">АГ</div>
<div class="chat-mid">
<div class="chat-name"><span>agentik · рабочий</span><span class="chat-time">14:22</span></div>
<div class="chat-prev">Собрал отчёт, жду правок</div>
</div>
<div class="row-tail"><span class="badge">2</span></div>
</div>
<div class="chat-row">
<div class="avatar g2">ОЧ</div>
<div class="chat-mid">
<div class="chat-name"><span>Отчёт за квартал</span><span class="chat-time">12:05</span></div>
<div class="chat-prev">Файл лежит на диске</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g3">РЗ</div>
<div class="chat-mid">
<div class="chat-name"><span>Разбор логов nginx</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Нашёл 3 ошибки 502</div>
</div>
</div>
<div class="chat-row">
<div class="avatar g4">ПО</div>
<div class="chat-mid">
<div class="chat-name"><span>Помощь по Solana</span><span class="chat-time">вчера</span></div>
<div class="chat-prev">Девайс-нет стартовал</div>
</div>
</div>
</div>
</aside>
<main class="main">
<header class="chat-head">
<div class="avatar">АГ</div>
<div><div class="head-name">agentik · рабочий</div><div class="head-sub"><span class="dot">●</span> на связи</div></div>
</header>
<div class="messages">
<div class="msg user">Проверь, почему падает CI</div>
<div class="msg bot">Нашёл: длинное тире в именах тестов ломает сборку. Починил, CI зелёный.</div>
</div>
</main>
<div class="scrim"></div>
<div class="layer">
<div class="dialog">
<div class="d-head"><h2>Удалить группу?</h2><button class="x-btn">✕</button></div>
<div class="d-body">
<div class="warn">
<span class="i">⚠</span>
<span>Группа <b>«Работа»</b> исчезнет из ленты. <b>Диалоги не удалятся</b> —
они останутся и будут видны в «Все чаты». Вернуть группу можно, создав её
заново, но диалоги придётся разложить руками.</span>
</div>
<div class="field">
<label>Что сделать с диалогами группы</label>
<div class="grp" style="margin-bottom:9px">
<div class="mid">
<div class="nm">Оставить без группы</div>
<div class="sub">12 диалогов вернутся в «Все чаты»</div>
</div>
<div class="lock">✓</div>
</div>
</div>
<div class="info">
<span>ℹ</span>
<span>Другого пути нет: диалог обязан быть где-то виден. Отдельной
«корзины» у диалогов нет — удаляются только диалоги, и не отсюда.</span>
</div>
</div>
<div class="d-foot">
<button class="btn" style="flex:1">Отмена</button>
<button class="btn dang solid" style="flex:1">Удалить группу</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>