chatballs/design/baseline/Chatballs Baseline v2

Chatbolls — design baseline (SPEC-HUB-0031)

Два макета: чат сотрудника (роль EMPLOYEE) и оболочка владельца/админа (OWNER = ADMIN). Основания: SPEC-HUB-0031 (§3–6, §8.1, §9), ADR-HUB-0002/0003 (режимы диалога, перехват), ADR-HUB-0041/0043 (контакт-центр, группы, ответственный, видимость).

Как открыть

Любой *.dc.html открывается в браузере напрямую (нужен support.js рядом). Тема и акцент задаются через Tweaks (theme, accent) или правкой default в data-props.

Состав

Чат сотрудника Baseline.dc.html   — EMPLOYEE: кадры H, A–G, S1–S2, M1–M2
Админ Baseline.dc.html            — OWNER/ADMIN: кадры A1–A2
Настройки Baseline.dc.html        — OWNER/ADMIN: кадры N1–N7, M
Профиль Baseline.dc.html          — все роли: кадры P1–P2, M
Контакты Baseline.dc.html         — OWNER/ADMIN: кадры K1–K5, S1
Агенты Baseline.dc.html           — OWNER/ADMIN: кадры G1–G5, S1
Сотрудники Baseline.dc.html       — OWNER/ADMIN: кадры E1–E10
Порталы Baseline.dc.html          — OWNER/ADMIN: кадры PT1–PT8
_ds/                              — токены дизайн-системы
assets/logo-mark.svg              — знак
assets/av-1..4.png                — аватары (Дмитрий Орлов · Анна Ким · Сергей Крылов · Елена Кузнецова)
support.js                        — рантайм макетов

Админ Baseline — карта кадров

• A1 Владелец · Чат — стартовый экран. Сайдбар: логотип + переключатель организации; навигация ровно 6 пунктов плоским списком (Чат с бейджем очереди · Контакты · Агенты · Сотрудники · Доска · Настройки); блок «Запуск» (3 шага, автоотметка, прогресс, primary на текущий шаг, «Скрыть»); профиль с ролью внизу. В списке диалогов заголовок — переключатель охвата (поповер: Все диалоги · Группы · Агенты · Ответственный) — дерево из сайдбара сотрудника у админа переезжает сюда, чтобы навигация осталась плоской (§4.1). Inline-Hint первого визита под вкладками.
• A2 Админ · рабочий режим — «Запуск» завершён и скрыт, подсказка закрыта, охват «Операторы». От владельца отличается только подписью роли (§3).

Настройки Baseline — карта кадров

Оболочка та же (сайдбар 220, «Настройки» активен). Вместо сплошной ленты из девяти секций — субменю разделов 240px и один раздел на экране; ниже субменю — переходы на отдельные экраны «База знаний» и «Аудит действий». Контент 820px, табличные разделы — 1000px.

• N1 Организация — логотип (загрузить/убрать), название, часовой пояс, валюта; «Сохранить» с датой последнего сохранения.
• N2 Группы — строки: цветная точка · имя · состав · диалоги · изменить/удалить; создание — одно поле внизу списка. Состав группы — на карточке сотрудника.
• N3 AI-провайдер — таблица: название · секрет (маска) · конфиг (endpoint + модель) · статус · «Проверить» · ⋯. Primary «Добавить провайдера» в шапке раздела.
• N4 Интеграции — таблица: название (фирменная плитка) · агент · статус · действия. Ошибка почты — красный бейдж и точка-маркер у пункта субменю.
• N5 Голосовые и звонки — матрица точка входа × (Голосовые · Аудиозвонки · Видеозвонки), переключатели сохраняются сразу; почта — «недоступно», выключенная точка входа приглушена.
• N6 Хранилище файлов — сегмент «На диске установки / Внешнее S3», поля S3 (секреты маской), статус проверки/переноса, «Перенести · Проверить доступ · Сохранить».
• N7 Демо-данные — статус, счётчик записей, учётки демо-сотрудников (email/пароль моноширинно), «Удалить демо-данные» danger-outline.
• M — мобильный: список разделов ↔ раздел; поля 44px, primary в липком футере.

Решения по настройкам

1. Профиль — не настройки. Тема, акцент, аватар, пароль, 2FA, сессии — отдельная страница «Профиль» из меню пользователя (SidebarUserMenu). Из «Настроек» убран; SPEC-HUB-0031 §8.6 в части «Профиль» требует уточнения.
2. Субменю вместо ленты — отклонение от §8.6 («один экран с вертикальными секциями») по решению владельца: девять секций не помещаются на экран.
3. OWNER == ADMIN (§3): макет один для обеих ролей, никаких canManage-разветвлений в UI.
4. Порядок разделов и их состав — как в features/settings/SettingsPage.tsx; таблицы — table-card/baseline-table, матрица — communication-matrix.

Профиль Baseline — карта кадров

Отдельная страница из меню пользователя (SidebarUserMenu → «Профиль»). Шапка: аватар 72 · имя + бейдж роли · email, дата вступления, группы · «Выйти». Две колонки: слева «кто я и как выглядит интерфейс» (Личные данные + Фото · Внешний вид · Уведомления в мессенджер), справа «безопасность» (Смена пароля · 2FA · Активные сессии).

• P1 Владелец — меню пользователя открыто (Уведомления · Профиль · Выйти), навигация видна; Telegram привязан с типами событий (ADR-0015), MAX — «Привязать бота»; TOTP включена; три сессии, текущая отмечена.
• P2 Сотрудник — сайдбар без навигации (§3): логотип, организация, профиль. Та же страница; TOTP выключена — жёлтое предупреждение.
• M — мобильный: личные данные и внешний вид сразу; уведомления, пароль, 2FA, сессии — список подэкранов.

Решения: тема — сегмент Светлая / Тёмная / Как в системе (§7.2); акцент — 4 пресета из shared/appearance.ts + HEX (§7.3); всё на странице принадлежит учётной записи, а не организации (ADR-0029) — владелец не меняет это у других. Поле «Роль» из формы убрано — роль показана бейджем в шапке.

Контакты Baseline — карта кадров

Источник — features/sales/clients и client-detail (раздел в коде всё ещё называется salesClients). Из текущей таблицы убраны колонка «Продукты» и фильтр по продуктам (ADR-0041, §8.2 «без коммерции»), добавлен фильтр по агенту. Из карточки убраны вкладка «Согласия» (заглушка в коде) и блок «Связанные продукты»; добавлены «Ответственный» и «Заметка» — те же поля, что в контекст-панели чата.

• K1 Список — колонки: Контакт (аватар · имя · CID) · Как связаться (телефон/email + логин) · Каналы (плитки-глифы) · Последний диалог (точка режима · кто ведёт · когда, сортируемая) · Открытые · ⋯. Фильтры: поиск, Каналы, Агенты, чип «С открытым диалогом»; «Экспорт CSV»; пагинация в футере карточки.
• K2 Список · фильтр — чип активен, счётчик «6 из 128», «Сбросить».
• K3 Карточка · Обзор — шапка (аватар 64 · имя · CID · карандаш · описание · телефон/email/компания/город с «копировать» · бейджи каналов · primary «Открыть диалог»); UnderlineTabs Обзор · Диалоги · Идентификаторы · Аудит; сводка 4 числа · лента активности; справа — текущий диалог, ответственный, заметка.
• K4 Карточка · Диалоги — тема + превью · агент · канал · группа · статус · дата; клик — в чат.
• K5 Карточка · Идентификаторы — идентичности по подключениям со статусом подтверждения; справа — «Возможный дубликат» с «Сравнить и объединить» (ручное объединение с причиной и аудитом, ADR-0006).
• S1 Пустой список — «Контакты появятся, когда клиенты напишут вашему агенту» + «Настроить подключения».

Мобильной версии нет — §9: админ-разделы с телефона в первой итерации не адаптируются. Вкладка «Аудит» — таблица Время · Действие · Объект · Актор · Результат как в коде, отдельно не перерисована.

Агенты Baseline — карта кадров

Источник — features/agents (AgentsPage, AgentDetailPage). Агент = канал + AI-конфигурация (ADR-0041 §4); изменения применяются сразу, без релизов (ADR-0023). Вертикальная лента секций из кода пересобрана в две колонки: слева «что он знает и как говорит» (Инструкции · Знания), справа «как работает» (Назначение · Модель · Подключения).

• G1 Список — агент (плитка-бот в цвете агента · имя · код) · группа · статус (AI отвечает / Без AI / Выключен) · модель · подключения (плитки с красным маркером ошибки) · открытые · ⋯. Колонка «Модель» добавлена к §8.3.
• G2 Создание — модалка одного шага: название + группа (§4.3).
• G3 Карточка · Консультант — рабочий агент. Шапка: плитка · имя · статус · группа · код · открытые · «Остановить AI». Инструкции — три поля (кто он · как говорит · правила). Знания — список с чипами «Выключено» / «Портал» и кнопкой «Выбрать». Подключения: привязанные со статусом и «Отвязать», свободные с «Привязать».
• G4 Карточка · Поддержка сайта — виджет привязан: блок «Код вставки виджета» с «Копировать» и подсказкой «вставьте перед » (§8.3); почта в ошибке.
• G5 Карточка · новый агент — blocker «провайдер не выбран» с переходом в настройки (ADR-0017), плейсхолдеры инструкций, строка «несохранённые изменения — применятся сразу», «Запустить AI».
• S1 Пустой список — «Агент отвечает клиентам первым. Создайте первого» + «Создать агента» (§5.2).

Решения: лимит дневной стоимости (dailyCostUsd, ADR-0023) вынесен в блок «Модель» — в коде поля нет, требует реализации. «Выключить агента» / «Удалить» — вторичные кнопки внизу карточки, как в коде.

Порталы Baseline — карта кадров

Источник — features/support-portals + SPEC-HUB-0028 (§1.1–1.3, §3, §6). Переделаны три больные точки: модалка настроек, публичная ссылка и редактор статьи с файлами.

• PT1 Список — таблица: портал (плитка-глобус · имя · язык/дата) · публичный адрес (моношрифт + «копировать» + бейдж «свой домен») · статус · материалы (разделы · статьи) · обновлён · ⋯. Меню строки открыто: Открыть материалы · Настройки портала · Копировать ссылку · Открыть портал · Перенести в архив. Архивный портал приглушён и уходит в конец. Поиск и фильтр статуса в шапке карточки, счётчик и пагинация в футере.
• PT2 Пусто — «Создайте первый портал поддержки» + «Создать портал» и «Как это выглядит у клиента»; создание доступно всегда (§1.1).
• PT3 Карточка · материалы — шапка: хлебные крошки, имя, статус, «6 разделов · 48 статей»; блок публичного адреса — глобус в цвете статуса, домен, бейдж «свой домен · подтверждён», кнопки «копировать» и «открыть», рядом резервный hosted-адрес. Действия: «Настройки» (переход на PT4, не модалка), primary «Новая статья», ⋯ (публикация/архив). Ниже — библиотека без вкладок: дерево разделов 260px с вложенностью и счётчиками + тулбар (поиск, язык, статус, «Импорт статей») + таблица Статья · Раздел · Язык · Редакция · Статус · Обновлено · ⋯ (скрепка = файлы в статье).
• PT4 Настройки · Основные — субменю 250px (Основные · Адрес и домен · Оформление · Веб-виджет · Публикация и архив), контент 820px: название, адрес на этой установке (поле {portalKey} + суффикс базового домена инсталляции), основной язык, карточка «Итоговая ссылка» с «Копировать/Открыть».
• PT5 Настройки · Адрес и домен — поле домена + статус «Домен ведёт сюда · проверено», одна A-запись на IP установки с копированием, «Сохранить домен · Проверить DNS», «Отключить домен» danger-outline.
• PT6 Настройки · Оформление — две темы из каталога установки (features/help-center/themes/: classic «Классическая», ocean «Ocean») карточками с мини-превью на цветах их manifest.preview; сегмент схемы Светлая / Тёмная / Как в системе (manifest.schemes), «Предпросмотр портала», дата сохранения. Названия и описания тем в UI не придумываются — только из манифеста; отсутствующая в сборке тема показывается как недоступная.
• PT7 Редактор статьи — полноэкранный, без модалок. Шапка: «Материалы» назад, крошки, бейдж «черновая редакция 8 · не опубликована», сегмент Текст / Вместе / Просмотр, «Сохранить черновик», primary «Опубликовать». Тело: слева заголовок-инпут + адрес + панель Markdown (H1/H2 · B/I/ссылка/код · списки/цитата/таблица · изображение/файл) + монополе текста + статусная строка (знаки, позиция курсора, автосохранение); в центре живой предпросмотр в теме портала («Как у посетителя»); справа рейка 300px: раздел, язык, краткое описание, файлы статьи (drop-зона + список с «вставить в текст» и «копировать Markdown»), версии (неизменяемые, опубликованная отмечена).
• PT8 Редактор · перетаскивание файла — drop-оверлей поверх текста: «Отпустите, чтобы вставить в текст», подпись про типы и лимит 25 МБ; в рейке новый файл с прогрессом загрузки.

Решения по порталам

1. Настройки — страница, не модалка. Modal width={960} с пятью секциями подряд заменён маршрутом /portals/{id}/settings с субменю разделов; §1.2 в части «modal surface» требует уточнения.
2. Публичная ссылка — постоянный элемент шапки, а не текст <code> в подзаголовке: копирование, открытие, статус домена и резервный hosted-адрес видны всегда, в том числе у черновика.
3. Редактор статьи — split-режим с предпросмотром GFM и панелью Markdown вместо textarea rows={10} в карточке. Версии и файлы — в рейке, публикация редакции — из того же экрана.
4. Файлы статьи требуют API. В коде вложений у статей портала нет (есть только у ai/knowledge): нужны portals/{id}/articles/{articleId}/attachments/ с возвратом публичного URL для подстановки в Markdown. Импорт YAML остаётся отдельным действием «Импорт статей» в тулбаре.
5. Hosted-адрес — домен установки, не домен продукта. Продукт ставится на любой инфраструктуре, базовый домен берётся из CHATBALLS_HELP_BASE_DOMAIN (support_portals/addressing.py, portal_views.py → address.baseDomain). В макете он показан как «адрес на этой установке» с примером help.nord-crm.ru — в UI нельзя зашивать ни help.example.com, ни домен вендора; суффикс и итоговый URL всегда из ответа API.
6. Никакого подтверждения владения доменом. Продукт self-hosted: домен и установка у одного владельца — доказывать права самому себе нечего. Остаётся одна A-запись на IP установки и техническая проверка «ведёт ли домен сюда» (нужна для выписки TLS). TXT-запись _chatballs.…, customDomainVerification и customDomainVerifiedAt из UI убраны — их стоит выключить и в коде либо оставить только для мультитенантного SaaS-режима с общим ingress.
7. Мобильной версии нет — §9: админ-разделы с телефона в первой итерации не адаптируются.

База знаний Baseline — карта кадров

Источник — features/ai/knowledge + SPEC-HUB-0026 §9 (иерархия категорий) и SPEC-HUB-0029 §7 (прикрепление к агенту). Раздел сверстан как карточка портала: та же шапка с состоянием, то же дерево слева, тот же split-редактор. Отделы упразднены ADR-HUB-0041, поэтому вместо visibility (ORGANIZATION/DEPARTMENTS) — состояние «участвует в ответах» и явный список агентов.

• KB1 Библиотека — шапка: «База знаний», бейдж «Индекс актуален», «9 категорий · 84 знания · 1 240 фрагментов», действия «Импорт YAML» и primary «Добавить знание». Ниже — дерево категорий 260px со счётчиками и вложенностью + тулбар (поиск, «В ответах», «Агент») + таблица: чекбокс · знание (иконка типа · заголовок · описание · скрепка вложений) · категория (с родителем) · фрагменты · агенты · в ответах · обновлено (кто) · ⋯. Меню строки: Открыть · Редактировать · Прикрепить к агенту · Переместить · Выключить в ответах · Переиндексировать · Удалить.
• KB2 Массовый выбор — тёмная панель операций по центру снизу: «Выбрано 3» + Прикрепить к агенту (primary) · Переместить · Включить · Выключить · Удалить · снять выделение. Выбранные строки подсвечены акцентом.
• KB3 Прикрепить к агенту — диалог 560px: сегмент Прикрепить / Открепить, выбор одного агента (радио, у агента без AI — статус «без AI»), предупреждение «2 из 3 будут пропущены» с причиной по каждому, примечание про атомарность и ai.manage, primary «Прикрепить 1».
• KB4 Карточка знания — шапка как у портала: крошки «База знаний / Регламенты / Пошив», заголовок, бейдж «В ответах агента», чипы «12 фрагментов · переиндексировано» и «3 агента», автор правки; действия «Прикрепить к агенту», primary «Редактировать», ⋯. Тело: рендер содержимого (≤720px) + рейка 320px: категория, тумблер «Участвует в ответах», вложения с копированием публичной ссылки, агенты со статусами, блок «Индексация» с «Переиндексировать».
• KB5 Редактор знания — тот же полноэкранный split, что PT7: слева заголовок + панель Markdown + монополе + статусная строка (знаки, ≈фрагменты, автосохранение); в центре предпросмотр «внутренний материал» и «Как ответит агент»; справа рейка 300px: категория, краткое описание, тумблер ответов, вложения (drop-зона + список), агенты (только чтение). Primary — «Сохранить и переиндексировать».
• KB6 Редактор · перетаскивание файла — drop-оверлей «Отпустите, чтобы приложить к знанию» (файл = вложение + ссылка в тексте), в рейке загрузка с прогрессом, в шапке бейдж «Есть несохранённые правки».
• KB7 Категории — дерево строками с ручкой перетаскивания, счётчиками, инлайн-переименованием, «+ вложенная»; удаление недоступно у системной и непустой категории (тайтл объясняет причину), справа карточка правил и предупреждение о непустой категории.
• KB8 Импорт YAML — разбор до применения: файл, сводка «создать 5 / обновить 2», таблица документ · categoryPath · действие · замечание; недостающие уровни категорий создаются автоматически с пояснением в замечании; primary «Импортировать 7 документов».
• KB9 Пустая категория — «В категории «Обучение» пока нет знаний» + «Добавить знание» / «Импорт YAML»; счётчики не подменяются нулями из другой категории.

Решения по базе знаний

1. Раздел вынесен в сайдбар — пункт «База знаний» сразу после «Порталов»: внутренние материалы и публичные порталы — соседние сущности, а не вложенность в «Агентов».
2. visibility заменена состоянием «участвует в ответах» — после ADR-0041 отделов нет, скрывать знание от части организации нечем. Доступность = прикреплённые агенты + флаг участия; в UI это одна колонка и один тумблер вместо матрицы отделов.
3. Фрагменты показываются как цифра, а не абстракция — в строке и карточке видно число фрагментов и состояние пересборки: это единственный способ объяснить, почему агент отвечает старым текстом.
4. Прикрепление — только массовым действием (SPEC-0029 §6: операция атомарна и журналируется). В карточке и редакторе список агентов — только чтение, изменение уходит в диалог KB3, который честно показывает пропуски.
5. Импорт разбирается до применения. Спецификация запрещает неявное создание категорий, поэтому ошибка пути должна быть видна до записи — таблица предпросмотра с построчным действием.
6. Вложения знания уже есть в API (ai/knowledge attachments), в отличие от статей портала — поэтому drop-зона в редакторе знания реализуема без новых эндпоинтов.

Сайдбар — актуально по коду (layout/Sidebar.tsx)

Во всех макетах обновлено 2026-09-06:

• Знак Chatballs — инлайн-SVG из shared/icons.tsx (LogoIcon): два круга и перемычка с вырезами сверху и снизу, 26px, currentColor по --c-n1, без подложки. Файл assets/logo-mark.svg больше не используется.
• Пункты — Чат (badge очереди) · Контакты · Агенты · Сотрудники · Порталы · База знаний · Настройки. Пункт «Доска» из ранних макетов — ошибка: в коде это supportPortals с иконкой globe.
• Иконки — ровно из Icon: message · user · robot · team · globe · settings, stroke-width 1.8.
• Ширина тянется — pane-resizer на правом краю: невидимая полоса 6px, подсветка акцентом 2px при наведении и перетаскивании; 180–320px, по умолчанию 220, запоминается в браузере; двойной клик — сброс. На ≤1024px ручка скрыта.
• Шапка — 56px: знак + переключатель организации (32px, имя + шеврон).
• Рейка 60px — только ≤1024px: знак · чат · «развернуть» · аватар; полный сайдбар выезжает поверх контента (кадр E7).
• Блок «Запуск» — три шага с автоотметкой, прогресс, primary текущего шага, «×» — скрыть (localStorage).
• Меню пользователя — аватар · имя + email · точка непрочитанных + ⋯ (Уведомления · Профиль · Выйти).
• У сотрудника вместо навигации — дерево «Диалоги» (Все · Группы · Агенты); на странице «Профиль» сайдбар без навигации вообще (кадр P2).

Сотрудники Baseline — карта кадров

Источник — features/employees. Роли: OWNER = ADMIN по правам, EMPLOYEE — только чат; группа задаёт только видимость диалогов (ADR-0043).

• E1 Список — таблица сотрудник · роль · должность · группы · доступ · статус · последний вход; фильтры поиск/роль/группа, «Добавить сотрудника»; в футере счётчик и напоминание про группы. Здесь же показан сайдбар целиком: блок «Запуск» и подсвеченная ручка ширины.
• E2 Список · меню строки — фильтр «Администратор»; действия: карточка · завершить сессии · сбросить пароль · заблокировать. Передачи владения в меню нет.
• E3 Карточка сотрудника — Основные данные · Должность и группы · Системная роль (три варианта, владелец замкнут) · Статус и безопасность · Опасная зона (блокировка); справа Учётная запись и Аудит.
• E4 Карточка владельца — «Только просмотр», баннер про правило роли, все роли замкнуты; единственное опасное действие — Передача владения в опасной зоне.
• E5 Новый сотрудник — выезжающая панель 520px, четыре шага: учётные данные · роль (Сотрудник / Администратор) · должность и группы · пароль первичного доступа: отправить на рабочую почту (по умолчанию) либо сгенерировать и показать.
• E6 Новый сотрудник · пароль показать — выбран второй вариант (на случай проблем с почтой); подпись футера меняется на «Пароль покажем сразу после создания».
• E7 Пароль показан — диалог после создания: пароль моноширинно, «Копировать», маскирование глазом, «Отправить на почту вместо этого», предупреждение о единственном показе, «Скопировал, закрыть». Действие в аудите.
• E8 Сброс пароля — тот же диалог для сброса владельцем или админом (из карточки сотрудника или меню строки): сессии завершены, при первом входе сотрудник задаёт свой пароль.
• E9 Передача владения — открывается только из опасной зоны карточки владельца. Кандидаты — только активные администраторы (чтобы передать сотруднику, его сначала делают админом): выбор, стрелка перехода, новая роль прежнего владельца, предупреждение, чекбокс подтверждения.
• E10 Сайдбар · рейка 1024 — состояние ≤1024px.

Решение по паролю: сервер отдаёт пароль в ответе один раз и в открытом виде не хранит; UI показывает его в диалоге с копированием. Требует поддержки в API (employees/{id}/reset-password/ и создание сотрудника должны возвращать сгенерированный пароль при выборе режима «показать»).

Чат сотрудника — карта кадров

• A — рабочий экран, диалог ведёт AI. Композер активен; подсказка над полем: отправка перехватит диалог. Primary «Взять диалог» в строке действий.
• B — диалог ждёт человека (AI передал). Фильтр «Ждут человека» активен, системное событие в ленте, подсказка над композером.
• C — ведёте вы. Строка действий: «Вернуть AI» · ⋯. Меню ⋯ открыто: Вернуть в очередь · Закрыть диалог · Пометить как спам · Удалить диалог.
• D — ведёт другой сотрудник. Композер заблокирован (замок, кто ведёт), вторичное действие «Взять диалог».
• E — закрытый диалог. Вкладка «Мои», звонки в карточке и ⋯ скрыты, композер заменён сообщением о закрытии.
• F — контекст-панель, вкладка «История»: диалоги контакта, текущий выделен.
• G — фильтр по группе: в сайдбаре выбрана «Поддержка», список отфильтрован. В контекст-панели открыто меню переноса в группу.
• H (первый кадр) — голосовые: в списке превью «Голосовое сообщение · 0:14» с микрофоном; в ленте плеер (play 30 · волна 2px · длительность) и три состояния расшифровки под волной: текст + «Расшифровка AI · Скрыть» · «Расшифровываем…» · кнопка «Расшифровать». Расшифровка доступна и для своих голосовых. Композер в режиме записи: корзина · красный таймер · живая волна · пауза · Отправить (Esc — отмена, Enter — отправить).
• S1 — пустой список: «Диалоги появятся, когда клиенты напишут вашему агенту», без кнопки (сотрудник).
• S2 — ширина 1024: сайдбар сворачивается в рейку 60px, контекст-панель — выезжающая, открывается кнопкой «Контакт» в шапке ленты.
• M1 / M2 — мобильный: список ↔ диалог. Контакт — по кнопке в шапке.

Зафиксированные решения

1. Сайдбар 220px с деревом «Диалоги». У сотрудника нет разделов (§3), поэтому сайдбар — это фильтр списка: Все диалоги · Группы (с цветной точкой и счётчиком) · Агенты. Внизу — профиль. Верхней панели нет. На 1024 сворачивается в рейку.
2. Одно действие взятия. «Взять диалог» одинаково для очереди и AI — атомарный перехват (ADR-0003). Композер активен всегда: первое отправленное сообщение выполняет тот же перехват; над полем — одна строка-предупреждение.
3. Фильтры. Статусы — UnderlineTabs над списком (Все · Мои · Ждут оператора; закрытые попадают в Все/Мои); Группа и Агент — пункты дерева в сайдбаре (v1 чипы под поиском убраны). Заголовок списка = выбранный пункт дерева.
4. Строка диалога (ориентир — Chatwoot): иконка канала (Telegram/MAX — фирменные глифы из shared/icons.tsx, Email/Web — линейные) + имя агента в одну строку серым (--c-n4) · индикатор приоритета справа → имя · время → превью (↩ если последнее сообщение наше) · непрочитанные → бейджи: таймер ожидания (иконка + время, без слова «ждёт»), группа, метки. Активная строка — фон --c-n9, без акцентной полосы. 4a. Сообщения: у клиента (слева) аватара нет — он в шапке; фон входящих --c-msg-in (светлее/темнее подложки по теме), без обводки. Исходящие справа: аватар AI/сотрудника (в диалоге по очереди могут отвечать AI и разные люди), фон — акцент 22% на подложке ленты, AI — --c-ai 16%.
5. Карточка контакта: аватар 64 · канал · имя + карандаш · описание · поля с иконками и «копировать» (мессенджер/почта, телефон, компания, город). Кнопки «Позвонить» · «Видеозвонок» — в карточке контакта под полями (не в шапке ленты). Блок «Диалог»: Ответственный, Группа, Приоритет (Высокий/Средний/Низкий/Не задан, индикатор-столбики) — полноширинные селекты, Агент и Режим — read-only в две колонки, Метки — чипы с «+ Добавить», Начат. Заметка — жёлтая карточка.
6. Метки и Приоритет диалога — по образцу конкурентов; в SPEC-HUB-0031 этих полей нет. Требует решения: добавить в модель или убрать из макета. 6a. Агент везде подписан иконкой бота в цвете агента (Консультант — фиолетовый, Поддержка сайта — бирюзовый). Скроллбары скрыты.
7. Ссылка «Открыть профиль контакта» сотруднику не показывается — раздела «Контакты» у него нет.
8. Подсказки Hint сотруднику не показываются (§6).
9. Композер: поле сверху, строка инструментов снизу (эмодзи · вложение · голосовое · Шаблоны «/») и кнопка отправки с ⏎.

Технические примечания

• Инлайн-стили поверх переменных темы --c-*, задаваемых на корне из Tweaks: Тема (light/dark) и Акцент (синий · индиго · бирюзовый · оранжевый). Полутона (фон акцента, предупреждений, AI) считаются через color-mix, поэтому одинаково работают в обеих темах. Данные — нейтральные примеры («Ателье Норд»).
• Статусные цвета режимов: AI --ai, ждёт --warning, человек --primary, закрыт --n-5 — как в текущем conversations/data.ts.