agentik-desktop/approved/README.md

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

**Здесь только принятое.** Это не «вариант для сравнения» и не черновик — это
решение, на которое опираемся в реализации. Правило простое: одобренный макет
**живёт здесь**, а не остаётся «выбранным» среди вариантов в `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` — четыре файла, открывать по одному, по состоянию.