004: проверка связи отдельным окном поверх настроек; в фон вернуты папки

README.md

@@ -12,7 +12,7 @@
 sketches/001-sidebar-utility/index.html      # привычный мессенджер — ВЫБРАН
 sketches/002-rail-voice-first/index.html     # голос — главное действие
 sketches/003-three-pane-command/index.html   # три панели + состояние агента
-sketches/004-settings-agents/index.html      # настройки: добавление агентов
+sketches/004-settings-agents/index.html      # настройки агентов + проверка связи
 ```
 
 `REQUIREMENTS.md` — требования. Статус: накидываем, ни один пункт не обязателен
@@ -34,6 +34,11 @@ sketches/004-settings-agents/index.html      # настройки: добавл
   точка у группы, цвет аватара), возможно плюс метка.
 - **Markdown** — показывать разметкой, а не сырыми символами. Готовая
   библиотека уже используется в клиенте assistent, писать свою не надо.
+- **Папки над списком диалогов** («Все чаты», «Работа», «Дом») — часть выбранного
+  варианта 1, не терять их при доработках.
+- **Проверка связи с агентом** — в отдельном окне поверх настроек: идёт → отвечает
+  → не отвечает, с подробностями и подсказкой. Добавить агента можно только
+  после успешной проверки.
 
 ## Как смотреть
 

REQUIREMENTS.md

@@ -33,6 +33,9 @@
 - **R8.** В строке диалога: название, последнее сообщение, время, счётчик
   непрочитанных.
 - **R9.** Есть поиск по диалогам.
+- **R9.1.** Над списком — **папки** (круглые кнопки): «Все чаты», «Работа», «Дом»
+  и «＋» для новой. Это часть одобренного варианта 1, не забывать при доработках.
+- **R9.2.** В строке диалога — круглый значок непрочитанных, если есть.
 
 ## 4. Открытый диалог
 
@@ -79,8 +82,13 @@
   кнопки изменить и удалить.
 - **R23.3.** Форма нового агента: название, адрес сервера, цвет для различения.
   Под каждым полем — пояснение простым языком.
-- **R23.4.** **Проверка связи до сохранения.** Кнопка спрашивает агента и показывает
+- **R23.4.** **Проверка связи до сохранения** — в **отдельном окне поверх настроек**,
-  ответ, адрес и число диалогов. Три состояния: спрашиваю → отвечает → не отвечает.
+  не строкой внутри формы. Нажал «Проверить связь» — открылось второе окно, в нём
+  идёт проверка. Пока идёт: «спрашиваю агента…» с крутящимся значком. Результат —
+  зелёный значок «отвечает» или красный «не отвечает», и под ним подробности:
+  ответ на запрос, адрес, число диалогов, отклик в миллисекундах.
+  Кнопка «Добавить агента» становится доступной только при успехе.
+  Есть «Проверить снова». Закрытие окна возвращает к настройкам.
   Основа: агент отвечает на запрос состояния и отдаёт список диалогов; оба запроса
   ничего не меняют.
 - **R23.5.** Цвет агента работает не только в настройках: тем же цветом помечаются

sketches/004-settings-agents/README.md

@@ -1,40 +1,61 @@
 # Вариант 4 — Настройки: агенты
 
 ## Суть
-Модальное окно, где заводятся агенты: имя, адрес сервера, цвет. Список уже
+Два окна друг над другом. Первое — настройки: список агентов и форма нового.
-добавленных и форма нового — два состояния одного окна.
+Второе, поверх — **проверка связи**: нажал «Проверить связь» и она идёт
+в отдельном окне, а не строкой внутри формы.
 
-## Ключевые решения
+## Окно 1: список агентов
-- **Окно, а не отдельная страница.** Настройки агентов открываются поверх чата —
+- У каждого агента: имя, адрес, состояние — «на связи» зелёным, «не отвечает» серым,
-  не теряешь, где был.
+  ошибка красным. Видно сразу, а не спрятано в глубине.
-- **Состояние агента видно сразу:** «на связи» зелёным, «не отвечает» серым.
+- Кнопки в строке: **проверить связь** (⇄), **изменить** (✎), **удалить** (🗑).
-  В списке, а не спрятано в глубине.
+  Проверка доступна и для уже добавленного агента — из этого же списка.
-- **Проверка связи до сохранения.** Кнопка «Проверить связь» спрашивает агента
+- Внизу пунктирная «＋ Добавить агента».
-  и показывает, что ответил: ответ на запрос, адрес, сколько у него диалогов.
-  Три состояния: спрашиваю (крутится) → отвечает (зелёное) → не отвечает (красное).
-- **Цвет — для различения.** Пять вариантов. Тот же цвет потом работает в списке
-  диалогов: полоска у строки и точка у группы.
-- **Пояснения под полями** — простым языком, зачем это поле и что писать.
 
-## Проверка связи — на чём основана
+## Окно 1, вид 2: форма нового агента
-У сервера агента есть ответ на `GET /agentik/health` (отдаёт «ok») и список
+- **Название** — с пояснением, что имя придумывает пользователь: сервер своего
-диалогов. Оба запроса безопасные: ничего не меняют. Если агент лежит —
+  имени не сообщает (это из исходников, не догадка).
-«не отвечает», и это видно до добавления, а не после.
+- **Адрес сервера** — целиком, вместе с путём `/agentik`. Прямо в строке адреса
+  кнопка **«Проверить связь»**.
+- **Цвет** для различения, пять вариантов.
+
+## Окно 2: проверка связи (отдельное, поверх настроек)
+Три состояния, сменяются в одном окне:
+
+1. **Идёт** — крутящееся кольцо, «Спрашиваю агента…», под ним адрес.
+2. **Отвечает** — зелёная галочка, «Агент отвечает». Подробности: ответ на запрос,
+   адрес, число диалогов, отклик в миллисекундах. Подсказка «Адрес рабочий».
+   Кнопка внизу — «Добавить агента» (доступна).
+3. **Не отвечает** — красный крестик. Подробности: нет ответа, отклик истёк.
+   Подсказка: проверить адрес, что агент запущен, что порт открыт и путь `/agentik`
+   указан целиком. Кнопка внизу заблокирована — добавить нельзя.
+
+Внизу окна всегда есть **«Проверить снова»**. Закрытие окна возвращает к настройкам,
+а не выбрасывает из них.
+
+## Почему проверка отдельным окном — лучше
+- Места больше: видно и результат, и подробности, и объяснение, что делать дальше.
+- Основную форму не дёргает: пока проверяешь — поля на месте, ничего не сбилось.
+- Одно и то же окно годится и для формы, и для уже добавленного агента.
+
+## На чём основана проверка (не выдумка)
+У сервера агента есть ответ на `GET /agentik/health` (отдаёт «ok») и запрос
+списка диалогов. Оба безопасные — ничего не меняют. Адреса взяты из исходников.
 
 ⚠️ **Живого агента сейчас не поднято** — на порту 8080 отвечает чужой сервер (404).
-Поэтому в макете проверка показана в трёх состояниях, но на живом агенте она
+Поэтому на настоящем агенте проверка ещё не гонялась: в макете показаны все три
-ещё не проверялась. Это не выдумка: адреса запросов взяты из исходников.
+состояния, но замеры времени и число диалогов — условные.
 
-## Второе состояние: список диалогов с двумя агентами
+## Фон: папки вернулись
-Показано, как различать агентов, когда их несколько:
+В первом варианте над списком диалогов есть **папки** — «Все чаты», «Работа», «Дом»,
-- **Заголовок группы** с цветной точкой и числом диалогов;
+«＋». В прошлой версии этого макета я их потерял. Теперь на фоне видны и папки,
-- **Цветная полоска** слева у каждого диалога;
+и поиск, и значок непрочитанных — как в одобренном варианте 1.
-- **Цвет аватара** совпадает с цветом агента.
 
-Это позволяет не путать, кто из агентов что сказал, даже в длинном списке.
+## Плюс: список диалогов с двумя агентами
+Диалоги сгруппированы по агентам, у группы цветная точка, у каждой строки цветная
+полоска, цвет аватара совпадает с цветом агента из настроек.
 
 ## Что слабо / открытые вопросы
-- Одного цвета для различения может оказаться мало — возможно, понадобится
+- Одного цвета для различения может оказаться мало.
-  подпись агента прямо в строке диалога.
+- Где хранится список агентов — не решено.
-- Где хранится список агентов (в файле на диске или на сервере) — не решено.
+- Пароля/ключа доступа у библиотеки нет — поля для него нет.
-- Нужен ли пароль/ключ доступа к агенту — у библиотеки такого поля нет.

sketches/004-settings-agents/index.html

@@ -22,42 +22,76 @@
     box-shadow: 0 24px 80px rgba(0,0,0,.6);
   }
 
-  /* ============ фон: обычный клиент, чтобы видеть модалку в контексте ============ */
+  /* ============ фон: обычный клиент ============ */
   .sidebar { width: 320px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
   .sb-head { padding: 14px 16px 10px; }
   .sb-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
-  .chat-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
+  .search {
-  .chat-row { display: flex; gap: 11px; padding: 9px 10px; border-radius: 10px; align-items: flex-start; }
+    margin: 0 16px 10px; padding: 8px 11px; border-radius: 9px; border: 1px solid transparent;
+    background: var(--panel2); color: var(--fg); font-size: 13px; outline: none; font-family: inherit;
+  }
+  .search::placeholder { color: var(--dim); }
+
+  /* ── папки: как в выбранном варианте 1 ── */
+  .folders { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
+  .folder {
+    padding: 5px 11px; border-radius: 14px; font-size: 12px; color: var(--dim);
+    background: var(--panel2); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
+  }
+  .folder.active { color: var(--fg); border-color: var(--accent); background: rgba(106,178,242,.12); }
+  .folder .cnt { color: var(--badge); font-weight: 600; margin-left: 4px; }
+
+  .chat-list { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
+  .chat-row { display: flex; gap: 11px; padding: 9px 10px; border-radius: 10px; align-items: flex-start; cursor: pointer; }
+  .chat-row:hover { background: var(--panel2); }
+  .chat-row.active { background: #233040; }
   .avatar {
     width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; display: grid; place-items: center;
     font-size: 15px; font-weight: 600; color: #0F1922; background: var(--accent);
   }
   .avatar.g2 { background: #86C99A; }
+  .avatar.g3 { background: #C9A886; }
   .chat-mid { flex: 1; min-width: 0; }
   .chat-name { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
   .chat-time { font-size: 11px; color: var(--dim); font-weight: 400; }
   .chat-prev { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
+  .row-tail { flex: 0 0 auto; }
+  .badge { background: var(--badge); color: #0F1922; font-size: 11px; font-weight: 700;
+    border-radius: 10px; padding: 1px 7px; }
+
   .main { flex: 1; display: flex; flex-direction: column; }
   .chat-head { height: 58px; flex: 0 0 58px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 11px; padding: 0 16px; }
   .chat-head .avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 13px; }
   .head-name { font-size: 14.5px; font-weight: 600; }
   .head-sub { font-size: 11.5px; color: var(--dim); }
+  .head-sub .dot { color: var(--ok); }
+  .ic-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent;
+    color: var(--dim); cursor: pointer; font-size: 16px; margin-left: auto; }
+  .ic-btn:hover { background: var(--panel2); color: var(--fg); }
   .messages { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
   .msg { max-width: 74%; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; }
   .msg.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
   .msg.bot { align-self: flex-start; background: var(--bot-bubble); border-bottom-left-radius: 4px; }
 
-  /* ============ МОДАЛКА НАСТРОЕК ============ */
+  /* ============ ЗАТЕМНЕНИЕ (одно на оба окна) ============ */
-  .scrim {
+  .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); z-index: 100; display: none; }
-    position: absolute; inset: 0; background: rgba(0,0,0,.62);
+  .scrim.on { display: block; }
-    display: flex; align-items: center; justify-content: center; z-index: 100;
+  .scrim.top { background: rgba(0,0,0,.42); z-index: 200; }
-  }
+
-  .scrim.hide { display: none; }
+  /* ============ ОКНО НАСТРОЕК ============ */
+  .layer { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; }
+  .layer.on { display: flex; }
+  .layer > * { pointer-events: auto; }
+  /* порядок слоёв: настройки 150, проверка поверх 250 */
+  #layerSettings { z-index: 150; }
+  #layerCheck { z-index: 250; }
+
   .dialog {
     width: 620px; min-width: 620px; flex: 0 0 auto; max-height: 620px; background: #17212B;
     border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column;
     overflow: hidden; box-shadow: 0 26px 80px rgba(0,0,0,.7);
   }
+  .dialog.small { width: 480px; min-width: 480px; max-height: 420px; }
   .d-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
   .d-head h2 { font-size: 16px; font-weight: 600; flex: 1; }
   .x-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
@@ -74,7 +108,7 @@
   .agent-card:hover { border-color: var(--line); }
   .agent-card .avatar { width: 40px; height: 40px; flex: 0 0 40px; font-size: 13px; }
   .ag-mid { flex: 1; min-width: 0; }
-  .ag-name { font-size: 14px; font-weight: 550; display: flex; align-items: center; gap: 8px; }
+  .ag-name { font-size: 14px; font-weight: 550; }
   .ag-addr { font-size: 11.5px; color: var(--dim); font-family: ui-monospace, "SF Mono", Menlo, monospace;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
   .state { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ok); flex: 0 0 auto; }
@@ -97,48 +131,58 @@
   .field input:focus { border-color: var(--accent); }
   .field input.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
   .field .note { font-size: 11px; color: var(--dim); margin-top: 6px; }
-  .err-note { font-size: 11.5px; color: var(--err); margin-top: 6px; display: none; }
+  .note code { background: var(--panel2); padding: 1px 4px; border-radius: 4px; font-size: 10.5px; }
-  .err-note.on { display: block; }
+
+  /* адрес + кнопка проверки в одной строке */
+  .addr-row { display: flex; gap: 8px; }
+  .addr-row input { flex: 1; }
 
-  /* выбор цвета агента */
   .colors { display: flex; gap: 9px; }
-  .swatch {
+  .swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
-    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
-  }
   .swatch.on { border-color: var(--fg); }
 
-  /* проверка подключения */
-  .check-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
-    background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
-  .check-row .txt { flex: 1; font-size: 12.5px; }
-  .check-row .txt b { font-weight: 600; }
-  .check-row.ok { border-color: rgba(99,200,138,.5); }
-  .check-row.err { border-color: rgba(236,57,66,.5); }
-  .spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line);
-    border-top-color: var(--accent); animation: sp .7s linear infinite; flex: 0 0 15px; }
-  @keyframes sp { to { transform: rotate(360deg); } }
-
-  /* результаты проверки */
-  .probe { font-size: 11.5px; color: var(--dim); margin-top: 11px; }
-  .probe div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); }
-  .probe div:last-child { border-bottom: none; }
-  .probe b { color: var(--fg); font-weight: 550; }
-
   /* кнопки */
   .btn { border-radius: 10px; padding: 10px 17px; font-size: 13px; cursor: pointer; border: 1px solid var(--line);
-    background: transparent; color: var(--fg); font-family: inherit; }
+    background: transparent; color: var(--fg); font-family: inherit; white-space: nowrap; }
   .btn:hover { border-color: var(--dim); }
   .btn.prim { background: var(--accent); border-color: var(--accent); color: #0F1922; font-weight: 650; }
   .btn.prim:disabled { background: var(--panel2); border-color: var(--line); color: var(--dim); cursor: default; }
-  .btn.dang { color: var(--err); }
+  .btn.dang { color: var(--err); border-color: rgba(236,57,66,.4); }
+  .btn.dang:hover { border-color: var(--err); background: rgba(236,57,66,.09); }
+  .btn.sm { padding: 8px 13px; font-size: 12.5px; }
   .btn.wide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
     border-style: dashed; color: var(--dim); }
   .btn.wide:hover { color: var(--fg); border-color: var(--dim); }
 
+  /* ============ ОКНО ПРОВЕРКИ СВЯЗИ ============ */
+  .spin { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line);
+    border-top-color: var(--accent); animation: sp .7s linear infinite; flex: 0 0 17px; }
+  @keyframes sp { to { transform: rotate(360deg); } }
+
+  .probe-head { display: flex; align-items: center; gap: 13px; padding: 4px 0 14px; }
+  .probe-head .big { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
+    font-size: 19px; flex: 0 0 40px; }
+  .probe-head.ok .big { background: rgba(99,200,138,.15); color: var(--ok); }
+  .probe-head.err .big { background: rgba(236,57,66,.15); color: var(--err); }
+  .probe-head.busy .big { background: transparent; padding: 0; }
+  .probe-head .txt { flex: 1; }
+  .probe-head .ttl { font-size: 14px; font-weight: 600; }
+  .probe-head .sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
+
+  .probe-list { font-size: 12px; }
+  .probe-list div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0;
+    border-bottom: 1px solid var(--line); }
+  .probe-list div:last-child { border-bottom: none; }
+  .probe-list span { color: var(--dim); }
+  .probe-list b { font-weight: 550; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; }
+
+  .hint-line { font-size: 11.5px; color: var(--dim); margin-top: 12px; padding: 9px 11px;
+    background: var(--bg); border-radius: 9px; border: 1px solid var(--line); }
+
   /* переключатель состояний — только для показа */
   .switcher {
     position: fixed; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px;
-    background: rgba(23,33,43,.96); border: 1px solid var(--line); border-radius: 11px; padding: 7px 9px; z-index: 200;
+    background: rgba(23,33,43,.96); border: 1px solid var(--line); border-radius: 11px; padding: 7px 9px; z-index: 300;
   }
   .switcher button { background: transparent; border: none; color: var(--dim); font-size: 12px;
     padding: 5px 11px; border-radius: 7px; cursor: pointer; font-family: inherit; }
@@ -149,12 +193,6 @@
   .group-head .dot { width: 9px; height: 9px; border-radius: 50%; }
   .group-head .nm { font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--dim); font-weight: 700; }
   .group-head .cnt { font-size: 10.5px; color: var(--dim); margin-left: auto; }
-  .chat-row { cursor: pointer; }
-  .chat-row:hover { background: var(--panel2); }
-  .chat-row.active { background: #233040; }
-  .agent-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 5px;
-    background: rgba(106,178,242,.16); color: var(--accent); }
-  .agent-tag.g2 { background: rgba(134,201,154,.16); color: #86C99A; }
   .accent-bar { width: 3px; border-radius: 2px; flex: 0 0 3px; align-self: stretch; }
 
   @media (max-height: 820px) { body { padding: 8px; } .window { transform: scale(.8); } }
@@ -166,20 +204,29 @@
 <div class="switcher">
   <button data-view="list" class="on">Список агентов</button>
   <button data-view="add">Добавить агента</button>
-  <button data-view="check-ok">Проверка: успех</button>
+  <button data-view="check" data-mode="ok">Проверка: отвечает</button>
-  <button data-view="check-err">Проверка: ошибка</button>
+  <button data-view="check" data-mode="err">Проверка: не отвечает</button>
   <button data-view="multi">Список диалогов</button>
 </div>
 
 <div class="window">
-  <!-- ===== фон: клиент ===== -->
+  <!-- ===== фон: клиент с папками ===== -->
   <aside class="sidebar">
     <div class="sb-head">
       <div class="sb-title">
-        <span id="sbTitle">Диалоги</span>
+        <span>Диалоги</span>
-        <button class="x-btn" title="Новый диалог">＋</button>
+        <button class="ic-btn" style="margin:0" title="Новый диалог">＋</button>
       </div>
     </div>
+    <input class="search" placeholder="Поиск диалога…">
+
+    <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>
+
     <div class="chat-list" id="chatArea"></div>
   </aside>
 
@@ -188,8 +235,9 @@
       <div class="avatar">АГ</div>
       <div>
         <div class="head-name">agentik · рабочий</div>
-        <div class="head-sub">на связи</div>
+        <div class="head-sub"><span class="dot">●</span> на связи</div>
       </div>
+      <button class="ic-btn" title="Настройки">⚙</button>
     </header>
     <div class="messages">
       <div class="msg user">Проверь, почему падает CI</div>
@@ -197,12 +245,15 @@
     </div>
   </main>
 
-  <!-- ===== модалка настроек ===== -->
+  <!-- ===== затемнение под окном настроек ===== -->
-  <div class="scrim" id="scrim">
+  <div class="scrim on" id="scrim1"></div>
+
+  <!-- ===== ОКНО 1: настройки ===== -->
+  <div class="layer on" id="layerSettings">
     <div class="dialog">
       <div class="d-head">
         <h2 id="dTitle">Агенты</h2>
-        <button class="x-btn" onclick="document.getElementById('scrim').classList.add('hide')">✕</button>
+        <button class="x-btn" onclick="closeAll()">✕</button>
       </div>
 
       <!-- ── вид 1: список агентов ── -->
@@ -226,8 +277,9 @@
             <div class="ag-name">домашний</div>
             <div class="ag-addr">http://192.168.76.199:8080/agentik</div>
           </div>
-          <div class="state off"><span class="d"></span>не отвечает</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="Удалить">🗑</button>
           </div>
@@ -246,11 +298,13 @@
 
         <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">
-          <div class="note">Адрес целиком, вместе с путём <code>/agentik</code>. Если агент поднимается
+            <button class="btn sm" onclick="openCheck('form')">Проверить связь</button>
+          </div>
+          <div class="note">Адрес целиком, вместе с путём <code>/agentik</code>. Если агент
             на этой же машине — <code>http://localhost:8080/agentik</code>.</div>
-          <div class="err-note" id="addrErr">Адрес должен начинаться с http:// или https://</div>
         </div>
 
         <div class="field">
@@ -263,21 +317,10 @@
             <div class="swatch" style="background:#E28C8C"></div>
           </div>
         </div>
-
-        <div class="check-row" id="checkRow">
-          <button class="btn" onclick="runCheck()" style="padding:7px 13px;font-size:12.5px">Проверить связь</button>
-          <span class="txt" id="checkTxt">Нажмите, чтобы проверить, отвечает ли агент</span>
-        </div>
-
-        <div class="probe" id="probe" style="display:none">
-          <div><span>Ответ на запрос</span><b id="p1">—</b></div>
-          <div><span>Отвечает по адресу</span><b id="p2">—</b></div>
-          <div><span>Диалогов у агента</span><b id="p3">—</b></div>
-        </div>
       </div>
 
       <div class="d-foot" id="footList">
-        <button class="btn prim" style="flex:1" onclick="document.getElementById('scrim').classList.add('hide')">Готово</button>
+        <button class="btn prim" style="flex:1" onclick="closeAll()">Готово</button>
       </div>
       <div class="d-foot" id="footAdd" style="display:none">
         <button class="btn" style="flex:1" onclick="show('list')">Отмена</button>
@@ -285,10 +328,47 @@
       </div>
     </div>
   </div>
+
+  <!-- ===== затемнение под окном проверки ===== -->
+  <div class="scrim top" id="scrim2"></div>
+
+  <!-- ===== ОКНО 2: проверка связи (поверх настроек) ===== -->
+  <div class="layer" id="layerCheck">
+    <div class="dialog small">
+      <div class="d-head">
+        <h2>Проверка связи</h2>
+        <button class="x-btn" onclick="closeCheck()">✕</button>
+      </div>
+
+      <div class="d-body">
+        <div class="probe-head" id="probeHead">
+          <div class="big" id="probeIcon"></div>
+          <div class="txt">
+            <div class="ttl" id="probeTitle">Спрашиваю агента…</div>
+            <div class="sub" id="probeSub">http://192.168.88.135:8080/agentik</div>
+          </div>
+        </div>
+
+        <div class="probe-list" id="probeList" style="display:none">
+          <div><span>Ответ на запрос</span><b id="p1">—</b></div>
+          <div><span>Отвечает по адресу</span><b id="p2">—</b></div>
+          <div><span>Диалогов у агента</span><b id="p3">—</b></div>
+          <div><span>Отклик</span><b id="p4">—</b></div>
+        </div>
+
+        <div class="hint-line" id="probeHint" style="display:none"></div>
+      </div>
+
+      <div class="d-foot">
+        <button class="btn" style="flex:1" id="probeAgain" onclick="runCheck()">Проверить снова</button>
+        <button class="btn prim" style="flex:1" id="probeOk" onclick="closeCheck()" disabled>Добавить агента</button>
+      </div>
+    </div>
+  </div>
 </div>
 
 <script>
-  // ---------------- данные для показа ----------------
+  // ---------------- данные списка диалогов ----------------
   const CHATS_SINGLE = `
     <div class="chat-row active">
       <div class="avatar">АГ</div>
@@ -296,19 +376,26 @@
         <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">ОЧ</div>
+      <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>`;
 
   const CHATS_MULTI = `
     <div class="group-head"><span class="dot" style="background:#6AB2F2"></span>
       <span class="nm">рабочий</span><span class="cnt">2 диалога</span></div>
-
     <div class="chat-row active">
       <div class="accent-bar" style="background:#6AB2F2"></div>
       <div class="avatar">АГ</div>
@@ -325,10 +412,8 @@
         <div class="chat-prev">Файл лежит на диске</div>
       </div>
     </div>
-
     <div class="group-head"><span class="dot" style="background:#86C99A"></span>
       <span class="nm">домашний</span><span class="cnt">1 диалог</span></div>
-
     <div class="chat-row">
       <div class="accent-bar" style="background:#86C99A"></div>
       <div class="avatar g2">КН</div>
@@ -341,80 +426,114 @@
   const chatArea = document.getElementById('chatArea');
   chatArea.innerHTML = CHATS_SINGLE;
 
-  // ---------------- переключение видов ----------------
+  // ---------------- окна ----------------
-  const views = { list:'viewList', add:'viewAdd' };
+  function el(id){ return document.getElementById(id); }
+
   function show(v) {
-    document.getElementById('viewList').style.display = (v === 'list') ? 'block' : 'none';
+    const isList = (v === 'list');
-    document.getElementById('viewAdd').style.display  = (v === 'add')  ? 'block' : 'none';
+    el('viewList').style.display = isList ? 'block' : 'none';
-    document.getElementById('footList').style.display = (v === 'list') ? 'flex' : 'none';
+    el('viewAdd').style.display  = isList ? 'none'  : 'block';
-    document.getElementById('footAdd').style.display  = (v === 'add')  ? 'flex' : 'none';
+    el('footList').style.display = isList ? 'flex'  : 'none';
-    document.getElementById('dTitle').textContent = (v === 'list') ? 'Агенты' : 'Новый агент';
+    el('footAdd').style.display  = isList ? 'none'  : 'flex';
-    document.getElementById('scrim').classList.remove('hide');
+    el('dTitle').textContent = isList ? 'Агенты' : 'Новый агент';
-    if (v === 'add') resetCheck();
+    openSettings();
   }
 
-  function resetCheck() {
+  function openSettings(){
-    const row = document.getElementById('checkRow');
+    el('scrim1').classList.add('on');
-    row.className = 'check-row';
+    el('layerSettings').classList.add('on');
-    document.getElementById('checkTxt').textContent = 'Нажмите, чтобы проверить, отвечает ли агент';
+  }
-    document.getElementById('probe').style.display = 'none';
+  // закрыть окно настроек (вместе с окном проверки, если оно открыто)
+  function closeAll(){
+    el('layerCheck').classList.remove('on');
+    el('scrim2').classList.remove('on');
+    el('layerSettings').classList.remove('on');
+    el('scrim1').classList.remove('on');
+  }
+  function closeCheck(){
+    el('layerCheck').classList.remove('on');
+    el('scrim2').classList.remove('on');
   }
 
-  // проверка связи: три состояния — идёт / успех / ошибка
+  // ---------------- ОКНО ПРОВЕРКИ СВЯЗИ ----------------
-  function runCheck(mode) {
+  // отдельное окно поверх настроек: из формы нового агента или из списка
-    const row = document.getElementById('checkRow');
+  function openCheck(from, addr) {
-    const txt = document.getElementById('checkTxt');
+    el('scrim2').classList.add('on');
-    const probe = document.getElementById('probe');
+    el('layerCheck').classList.add('on');
+    el('probeOk').textContent = (from === 'form') ? 'Добавить агента' : 'Готово';
+    window.__checkAddr = addr || 'http://192.168.88.135:8080/agentik';
+    runCheck();
+  }
 
-    row.className = 'check-row';
+  function runCheck() {
-    row.firstElementChild.outerHTML =
+    const head = el('probeHead');
-      '<span class="spin"></span>';
+    const list = el('probeList');
-    txt.textContent = 'Спрашиваю агента…';
+    const hint = el('probeHint');
-    probe.style.display = 'none';
+    const icon = el('probeIcon');
+    const addr = window.__checkAddr || 'http://192.168.88.135:8080/agentik';
+
+    head.className = 'probe-head busy';
+    icon.outerHTML = '<span class="spin" id="probeIcon"></span>';
+    el('probeTitle').textContent = 'Спрашиваю агента…';
+    el('probeSub').textContent = addr;
+    list.style.display = 'none';
+    hint.style.display = 'none';
+    el('probeOk').disabled = true;
 
     setTimeout(() => {
-      const fail = (mode === 'err');
+      const sp = document.getElementById('probeIcon');
-      // вернуть кнопку на место
+      sp.outerHTML = '<div class="big" id="probeIcon"></div>';
-      row.firstElementChild.outerHTML =
+      const fail = (window.__checkMode === 'err');
-        '<button class="btn" onclick="runCheck()" style="padding:7px 13px;font-size:12.5px">Проверить связь</button>';
 
       if (fail) {
-        row.className = 'check-row err';
+        el('probeHead').className = 'probe-head err';
-        txt.innerHTML = '<b>Не отвечает.</b> Проверьте адрес и что агент запущен.';
+        el('probeIcon').textContent = '✕';
-        probe.style.display = 'block';
+        el('probeTitle').textContent = 'Агент не отвечает';
-        document.getElementById('p1').textContent = 'нет ответа';
+        el('probeSub').textContent = addr;
-        document.getElementById('p2').textContent = '—';
+        el('p1').textContent = 'нет ответа'; el('p2').textContent = '—';
-        document.getElementById('p3').textContent = '—';
+        el('p3').textContent = '—'; el('p4').textContent = '5000 мс (истекло)';
+        list.style.display = 'block';
+        hint.style.display = 'block';
+        hint.textContent = 'Проверьте адрес и что агент запущен. Убедитесь, что порт открыт и путь /agentik указан целиком.';
+        el('probeOk').disabled = true;
       } else {
-        row.className = 'check-row ok';
+        el('probeHead').className = 'probe-head ok';
-        txt.innerHTML = '<b>Отвечает.</b> Можно добавлять.';
+        el('probeIcon').textContent = '✓';
-        probe.style.display = 'block';
+        el('probeTitle').textContent = 'Агент отвечает';
-        document.getElementById('p1').textContent = 'ok';
+        el('probeSub').textContent = addr;
-        document.getElementById('p2').textContent = 'http://192.168.88.135:8080/agentik';
+        el('p1').textContent = 'ok'; el('p2').textContent = addr;
-        document.getElementById('p3').textContent = '4';
+        el('p3').textContent = '4'; el('p4').textContent = '38 мс';
+        list.style.display = 'block';
+        hint.style.display = 'block';
+        hint.textContent = 'Адрес рабочий. Можно добавлять этого агента.';
+        el('probeOk').disabled = false;
       }
     }, 1400);
   }
 
+  // ---------------- переключатель для показа ----------------
   document.querySelectorAll('.switcher button').forEach(b => b.onclick = () => {
     document.querySelectorAll('.switcher button').forEach(x => x.classList.remove('on'));
     b.classList.add('on');
     const v = b.dataset.view;
 
-    if (v === 'list')        { chatArea.innerHTML = CHATS_SINGLE; document.getElementById('sbTitle').textContent = 'Диалоги'; show('list'); }
+    if (v === 'multi') {
-    if (v === 'add')         { chatArea.innerHTML = CHATS_SINGLE; show('add'); }
+      chatArea.innerHTML = CHATS_MULTI;
-    if (v === 'check-ok')    { chatArea.innerHTML = CHATS_SINGLE; show('add'); setTimeout(() => runCheck('ok'), 60); }
+      closeAll();
-    if (v === 'check-err')   { chatArea.innerHTML = CHATS_SINGLE; show('add'); setTimeout(() => runCheck('err'), 60); }
+      return;
-    if (v === 'multi')       { chatArea.innerHTML = CHATS_MULTI; document.getElementById('sbTitle').textContent = 'Диалоги';
+    }
-                               document.getElementById('scrim').classList.add('hide'); }
+    chatArea.innerHTML = CHATS_SINGLE;
+    if (v === 'list')  { show('list'); closeCheck(); }
+    if (v === 'add')   { show('add');  closeCheck(); }
+    if (v === 'check') {
+      window.__checkMode = b.dataset.mode || 'ok';
+      const okAddr = 'http://192.168.88.135:8080/agentik';
+      const badAddr = 'http://192.168.76.199:8080/agentik';
+      show(window.__checkMode === 'ok' ? 'add' : 'list');
+      openCheck('form', window.__checkMode === 'ok' ? okAddr : badAddr);
+    }
   });
 
-  // на «Список диалогов» модалку закрываем
-  document.querySelector('[data-view="multi"]').addEventListener('click', () => {
-    document.getElementById('scrim').classList.add('hide');
-  });
-
-  // выбор цвета
   document.querySelectorAll('.swatch').forEach(s => s.onclick = () => {
     document.querySelectorAll('.swatch').forEach(x => x.classList.remove('on'));
     s.classList.add('on');