Одобренные макеты

Здесь только принятое. Это не «вариант для сравнения» и не черновик — это решение, на которое опираемся в реализации. Правило простое: одобренный макет живёт здесь, а не остаётся «выбранным» среди вариантов в sketches/.

Файл	Что это	Одобрено
`001-sidebar-utility.html`	Основа дизайна: привычный мессенджер	2026-09-18
`004-settings-agents.html`	Настройки агентов: список, форма, проверка связи	2026-09-19
`005-new-chat-picker.html`	Модалка «Новый диалог»: выбор ассистента	2026-09-19
`006-groups-manage/`	Управление группами — 4 файла по состояниям	2026-09-19

sketches/ — предложения: 002-rail-voice-first, 003-three-pane-command, 004-settings-agents, 005-new-chat-picker (черновики, из них выросли одобренные).

001-sidebar-utility.html — основа дизайна

Это база всего клиента. Привычный мессенджер: список диалогов слева (320 px), чат справа. Узкое окно — как в Телеграме: на экране что-то одно, у открытого диалога сверху кнопка «Назад».

Что в нём есть:

лента папок — «Все чаты / Работа / Дом / ＋», со счётчиком непрочитанных;
поиск диалога;
список диалогов: значок, название, последняя строка, время, кружок непрочитанных;
шапка чата со значком, именем и состоянием связи;
сообщения: пользователь справа, ассистент слева;
поле ввода с кнопкой отправки и круглой кнопкой записи голоса.

Из него убрано при одобрении:

подсказка под полем ввода;
кольцо токенов — в библиотеке client таких данных нет, а «нет данных — нет цифры».

Стиль: фон #121218, панели #17212B, акцент #6AB2F2, текст #EBEBEB.

005-new-chat-picker.html — Новый диалог

Модалка появляется по «＋» (новый диалог), когда ассистентов больше одного. Состоит из одного окна 480 px и больше ничего: заголовок «Новый диалог», подсказка-вопрос, список ассистентов, две кнопки внизу.

Что в карточке ассистента:

значок — цвет или картинка (как настроено в настройках агентов);
имя;
адрес сервера;
состояние связи: «на связи» зелёным, «не отвечает» красным;
кружок отметки справа.

Поведение:

первый отмечен сразу — создать диалог можно одним нажатием;
выбран ассистент без связи → под списком появляется предупреждение, но выбор не запрещается (связь может пропасть на секунду);
окно маленькое и без вкладок: одно действие — один выбор.

Когда этой модалки не должно быть:

ассистент один — диалог создаётся сразу в нём, спрашивать не о чем;
ассистентов ноль — кнопки «＋» нет вообще (создавать диалог не в ком), вместо списка диалогов подсказка «добавьте ассистента в настройках».

Отвергнуто при одобрении: пояснительная панель над окном клиента — она попала в макет случайно, это была заметка для проверки, а не часть интерфейса. В одобренном файле её нет и быть не должно.

004-settings-agents.html — Настройки агентов

Два окна друг над другом. Первое — настройки (620 px): список агентов и форма нового. Второе, поверх — проверка связи (480 px).

Окно 1, список агентов. У каждого: знак (цвет или картинка), имя, адрес, состояние — «на связи» зелёным, «не отвечает» красным, «не проверялся» серым. Кнопки в строке: проверить связь (⇄), изменить (✎), удалить (🗑). Внизу пунктирная «＋ Добавить агента».

Окно 1, форма нового — три поля:

Название. Пояснение: имя придумывает пользователь, сервер своего имени не сообщает (это из исходников, не догадка).
Адрес сервера — целиком, вместе с путём /agentik. Прямо в строке адреса кнопка «Проверить связь».
Как отличать в списке — вкладки Цвет / Картинка, выбирается что-то одно. Цвет — из пяти. Картинка — файл с диска, круглый превью, «Выбрать файл…» и «Убрать». ⚠️ Картинка копируется внутрь клиента, не берётся по исходному адресу.

Окно 2, проверка связи — отдельное окно поверх настроек, три состояния в одном окне: идёт (крутится кольцо) → отвечает (зелёная галочка, подробности: ответ, адрес, число диалогов, отклик) → не отвечает (красный крестик, подсказка что проверить). Внизу всегда «Проверить снова». Кнопка «Добавить агента» доступна только при успехе. Работает и для добавленных агентов — кнопкой «⇄».

Почему проверка отдельным окном: места больше, основную форму не дёргает, одно окно годится и для новой формы, и для уже добавленного агента.

Честно о непроверенном: живого агента на момент макета не поднято — на порту 8080 отвечал чужой сервер. Адреса запросов взяты из исходников (GET /agentik/health и список диалогов, оба ничего не меняют), но замеры времени и число диалогов в макете условные. На настоящем агенте проверка ещё не гонялась.

006-groups-manage/ — Управление группами

Четыре файла, по одному состоянию в каждом. Интерактивности нет намеренно: вместо неё отдельный файл на каждое состояние.

Файл	Что показывает
`1-list.html`	список групп: «изменить» и «удалить» у каждой, внизу «＋ Добавить группу»
`2-add.html`	новая группа: только название
`3-edit.html`	изменение: переименование, удаление отдельным блоком «ОПАСНОЕ»
`4-delete.html`	подтверждение: диалоги не удаляются, вернутся в «Все чаты»

Как открывается: кнопкой-карандашом (✎) в ленте групп над списком диалогов — справа, отдельно от чипов. Прежний «＋» на этом месте убран: рядом стоят чипы самих групп, и всё похожее на «＋» читается как «добавить группу», хотя диалог создаётся кнопкой в шапке списка.

Решения внутри:

«Все чаты» — встроенная группа, не удаляется и не переименовывается (пунктирная рамка, пометка «встроенная»). Нужна как надёжное место, где виден весь список.
Удаление группы диалоги не удаляет — в подтверждении это сказано первым делом. Диалоги останутся и будут видны в «Все чаты», «корзины» у них нет.
У группы только название. Цвет, значок, порядок — не делаем, пока не попросили.
Пустая группа допустима — можно создать заранее, диалоги разложить потом.
Подсказка при создании: диалоги в группу попадают позже, из самого диалога.

Про цвета в макетах

Цвета в макетах стоят числами — так и надо, иначе макет не будет выглядеть задуманным. В коде так нельзя: цвет берётся из цветовой схемы по смыслу, потому что тем будет несколько. Разбор — THEMES.md.

Как смотреть

Открыть файл в браузере — самодостаточный, без сборки и без зависимостей.

в 001 переключается узкий/широкий вид и видны состояния сообщений;
в 004 переключаются список/форма, вкладки Цвет/Картинка; кнопкой «⇄» или «Проверить связь» открывается окно проверки (оба состояния — успех и отказ);
в 005 кликом по карточке меняется выбор и появляется предупреждение;
006 — четыре файла, открывать по одному, по состоянию.

11 KiB Raw Blame History Unescape Escape