approved/: одобренная модалка нового диалога; из sketches/005 убрана пояснительная панель

2026-09-19 13:40:34 +03:00
parent 48b7cd1b4b
commit b2f77d2ed9
5 changed files with 202 additions and 27 deletions
@@ -8,6 +8,10 @@

 ## Что где лежит

+```
+approved/005-new-chat-picker.html            # ОДОБРЕНО: модалка «Новый диалог»
+```
+
 ```
 sketches/001-sidebar-utility/index.html      # привычный мессенджер — ВЫБРАН
 sketches/002-rail-voice-first/index.html     # голос — главное действие
@@ -26,6 +30,15 @@ sketches/005-new-chat-picker/index.html      # новый диалог: выбо
 `REQUIREMENTS.md` — требования. Статус: накидываем, ни один пункт не обязателен
 к исполнению в том виде, как записан.

+## Одобренное
+
+`approved/` — макеты, которые пользователь **принял**. Это решение, на него
+опираемся в реализации. Отличие от `sketches/`: там предложения, здесь принятое.
+
+- **`005-new-chat-picker.html`** — модалка «Новый диалог» при нескольких
+  ассистентах. Одобрена 2026-09-19. Пояснительной панели над окном в ней нет
+  (в `sketches/005` была — это была заметка для проверки, не часть интерфейса).
+
 ## Что решено

 - **Сначала десктоп, затем Android — по тем же лекалам.** Десктопный клиент
@@ -117,7 +117,9 @@
  его диалоги в списке (полоска у строки, точка у группы).
 - **R23.6.** Список агентов сохраняется между запусками. Где именно — не решено.
 - **R23.7.** Доступа по паролю/ключу у библиотеки нет — поля для него не делать.
- **R23.8.** **Новый диалог: выбор ассистента** (`sketches/005-new-chat-picker`).
+- **R23.8.** **Новый диалог: выбор ассистента** — **МАКЕТ ОДОБРЕН**,
+  лежит в `approved/005-new-chat-picker.html`. Черновик со всеми состояниями —
+  `sketches/005-new-chat-picker`.
  По «＋» спрашиваем, **в каком ассистенте** создать диалог — потому что диалог
  живёт внутри агента, отдельно его не создать.
 - **R23.9.** **Окно показывается только если ассистентов больше одного.**
@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<title>Одобрено: Новый диалог — выбор ассистента</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --bg: #121218; --panel: #17212B; --panel2: #1C2733; --line: #232B36;
+    --fg: #EBEBEB; --dim: #768C9E; --accent: #6AB2F2; --err: #EC3942; --ok: #63C88A;
+  }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    background: #0A0A0F; color: var(--fg); line-height: 1.45;
+    display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
+  }
+
+  .dialog {
+    width: 480px; min-width: 480px; flex: 0 0 auto; max-height: 600px; background: var(--panel);
+    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);
+  }
+  .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;
+    color: var(--dim); cursor: pointer; font-size: 17px; }
+  .x-btn:hover { background: var(--panel2); color: var(--fg); }
+  .d-body { flex: 1; overflow-y: auto; padding: 14px 18px 8px; }
+  .d-foot { padding: 13px 18px 16px; border-top: 1px solid var(--line); display: flex; gap: 9px; }
+
+  .d-lead { font-size: 12.5px; color: var(--dim); margin-bottom: 12px; }
+
+  .agent-opt {
+    display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px;
+    background: var(--panel2); margin-bottom: 9px; cursor: pointer; border: 1.5px solid transparent;
+  }
+  .agent-opt:hover { border-color: #33414F; }
+  .agent-opt.on { border-color: var(--accent); background: rgba(106,178,242,.10); }
+  .avatar {
+    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center;
+    font-size: 13px; font-weight: 600; color: #0F1922; background: var(--accent);
+  }
+  .avatar.g2 { background: #86C99A; }
+  /* аватар-картинка: клиент показывает свою копию файла */
+  .avatar.pic {
+    background: url("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") center/cover;
+  }
+  .ag-mid { flex: 1; min-width: 0; }
+  .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; }
+  .ag-state { font-size: 11px; display: flex; align-items: center; gap: 5px; margin-top: 4px; }
+  .ag-state .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
+  .ag-state.ok { color: var(--ok); }
+  .ag-state.off { color: var(--dim); } .ag-state.off .d { background: var(--dim); }
+  .ag-state.err { color: var(--err); } .ag-state.err .d { background: var(--err); }
+
+  .pick { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 2px solid #3D4A58; }
+  .agent-opt.on .pick { border-color: var(--accent); background: var(--accent); position: relative; }
+  .agent-opt.on .pick::after {
+    content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
+    border: solid #0F1922; border-width: 0 2px 2px 0; transform: rotate(42deg);
+  }
+
+  .warn {
+    display: none; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 10px 12px;
+    border-radius: 10px; background: rgba(236,57,66,.09); border: 1px solid rgba(236,57,66,.32);
+    font-size: 12px; color: #F0A6AA;
+  }
+  .warn.on { display: flex; }
+
+  .btn {
+    padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2);
+    color: var(--fg); font-size: 13.5px; cursor: pointer; font-family: inherit;
+  }
+  .btn:hover { border-color: #3D4A58; }
+  .btn.prim { background: var(--accent); border-color: var(--accent); color: #0F1922; font-weight: 600; }
+</style>
+</head>
+<body>
+
+<div class="dialog">
+  <div class="d-head">
+    <h2>Новый диалог</h2>
+    <button class="x-btn">✕</button>
+  </div>
+
+  <div class="d-body">
+    <div class="d-lead">В каком ассистенте создать диалог?</div>
+
+    <div class="agent-opt on" data-ok="1">
+      <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" data-ok="1">
+      <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" data-ok="0">
+      <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" id="warn">
+      <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>
+
+<script>
+  // Выбор ассистента. Первый отмечен сразу — создать диалог можно одним нажатием.
+  document.querySelectorAll('.agent-opt').forEach(o => o.onclick = () => {
+    document.querySelectorAll('.agent-opt').forEach(x => x.classList.remove('on'));
+    o.classList.add('on');
+    document.getElementById('warn').classList.toggle('on', o.dataset.ok === '0');
+  });
+</script>
+</body>
+</html>
@@ -0,0 +1,42 @@
+# Одобренные макеты
+
+Сюда кладутся варианты, которые **пользователь одобрил**. Это не «ещё один
+вариант для сравнения» — это решение, на которое можно опираться при реализации.
+Отличать по папке: `sketches/` — предложения, `approved/` — принято.
+
+| Файл | Что это | Одобрено |
+|---|---|---|
+| `005-new-chat-picker.html` | Модалка «Новый диалог»: выбор ассистента | 2026-09-19 |
+
+## 005-new-chat-picker.html — Новый диалог
+
+**Модалка появляется по «＋» (новый диалог), когда ассистентов больше одного.**
+Состоит из одного окна 480 px и больше ничего: заголовок «Новый диалог»,
+подсказка-вопрос, список ассистентов, две кнопки внизу.
+
+**Что в карточке ассистента:**
+- значок — цвет или картинка (как настроено в настройках агентов);
+- имя;
+- адрес сервера;
+- состояние связи: «на связи» зелёным, «не отвечает» красным;
+- кружок отметки справа.
+
+**Поведение:**
+- **первый отмечен сразу** — создать диалог можно одним нажатием;
+- выбран ассистент без связи → под списком появляется предупреждение,
+  но выбор не запрещается (связь может пропасть на секунду);
+- окно маленькое и без вкладок: одно действие — один выбор.
+
+**Когда этой модалки не должно быть:**
+- **ассистент один** — диалог создаётся сразу в нём, спрашивать не о чем;
+- **ассистентов ноль** — кнопки «＋» нет вообще (создавать диалог не в ком),
+  вместо списка диалогов подсказка «добавьте ассистента в настройках».
+
+**Отвергнуто при одобрении:** пояснительная панель над окном клиента — она
+попала в макет случайно, это была заметка для проверки, а не часть интерфейса.
+В одобренном файле её нет и быть не должно.
+
+## Как смотреть
+
+Открыть файл в браузере — самодостаточный, без сборки. Кликом по карточке
+переключается выбор и появляется предупреждение.
@@ -27,18 +27,6 @@
  .switcher button:hover { color: var(--fg); }
  .switcher button.on { background: var(--accent); border-color: var(--accent); color: #0F1922; font-weight: 600; }

-  /* пояснение к состоянию — это НЕ часть интерфейса */
-  .annot {
-    max-width: 1180px; width: 100%; border: 1px dashed #3A4756; border-radius: 10px;
-    padding: 10px 14px; font-size: 12.5px; color: var(--dim); background: rgba(28,39,51,.5);
-  }
-  .annot b { color: var(--fg); font-weight: 600; }
-  .annot .tag {
-    display: inline-block; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
-    color: #0F1922; background: var(--dim); border-radius: 5px; padding: 1px 6px; margin-right: 8px;
-    font-weight: 700; vertical-align: 1px;
-  }
-
  /* ============ окно клиента ============ */
  .window {
    width: 1180px; height: 740px; background: var(--bg); border-radius: 12px;
@@ -189,8 +177,6 @@
  <button data-view="made">Диалог создан</button>
 </div>

-<div class="annot" id="annot"></div>
-
 <div class="window">
  <!-- ================= СПИСОК ДИАЛОГОВ ================= -->
  <aside class="sidebar">
@@ -397,8 +383,6 @@
    el('warn').classList.remove('on');

    if (v === 'pick') {
-      el('annot').innerHTML = `<span class="tag">выбор</span><b>Ассистентов больше одного</b> — по «＋» открывается это окно.
-        Сверху подсказка, ниже список. Выбран первый по умолчанию — чтобы создать диалог, хватает одного нажатия.`;
      el('chatList').innerHTML = CHATS_TWO;
      el('folders').style.display = ''; el('searchBox').style.display = '';
      el('cnt').textContent = '2';
@@ -409,9 +393,6 @@
    }

    if (v === 'offline') {
-      el('annot').innerHTML = `<span class="tag">не отвечает</span><b>Выбран ассистент, который не отвечает.</b>
-        Выбрать его можно, но окно сразу предупреждает: сообщение не уйдёт, пока он не поднимется.
-        Отключённых из списка не выкидываем — ассистент мог просто перезапускаться.`;
      el('chatList').innerHTML = CHATS_TWO;
      el('folders').style.display = ''; el('searchBox').style.display = '';
      el('cnt').textContent = '2';
@@ -426,8 +407,6 @@
    }

    if (v === 'one') {
-      el('annot').innerHTML = `<span class="tag">один</span><b>Ассистент один — окно не показывается.</b>
-        По «＋» диалог создаётся сразу в нём: выбирать не из чего. Это видно по отсутствию затемнения.`;
      el('chatList').innerHTML = CHATS_TWO;
      el('folders').style.display = ''; el('searchBox').style.display = '';
      el('cnt').textContent = '2';
@@ -435,17 +414,12 @@
    }

    if (v === 'zero') {
-      el('annot').innerHTML = `<span class="tag">ноль</span><b>Ассистентов нет — кнопки «＋» нет вообще.</b>
-        Создавать диалог не в ком. Пустой список объясняет, что делать, и ведёт в настройки.`;
      el('chatList').innerHTML = CHATS_EMPTY;
      el('folders').style.display = 'none'; el('searchBox').style.display = 'none';
      el('newChatBtn').classList.add('hidden');
    }

    if (v === 'made') {
-      el('annot').innerHTML = `<span class="tag">после выбора</span><b>Диалог создан в выбранном ассистенте.</b>
-        Новый диалог встал первым в списке, шапка чата показывает его ассистента (цвет и имя),
-        полей ввода нет — диалог пуст, писать можно сразу.`;
      el('chatList').innerHTML = CHATS_NEW;
      el('folders').style.display = ''; el('searchBox').style.display = '';
      el('cnt').textContent = '2';