← Каталог примеров

Компактная шапка #shell-compact-topbar — 10 раскладок

Это не ui-variant-N. Отдельный прототип: на странице каталога /examples/ ищите блок «Voice / Shell» сверху или карточку shell-compact-topbar — макеты 01–10 (серый кружок — номер в каталоге, не ui-variant). Здесь варианты именно 01–10 (#v01…#v10). Макеты для side panel / embed (data-compact="1").

Что можно вывести на панели (каталог элементов)

01

Как сейчас (база)

рекомендуется для embed

Аватар слева, строка «агент + маршрут» и pill статуса, подпись «Ваш вопрос» и текст, выход справа.

Макет ~906×78px
[Agent CMS] Песочница и тесты Claude
Ожидаю

Ваш вопрос

huih

⤢
02

Одна строка

низкая высота ~48px

Вопрос важнее имени: аватар · короткое имя · «huih» · точка статуса · выход. Подписи скрыты.

Песочница… huih
⤢
03

Статус слева

заметная фаза

Сначала pill «Думает…», потом аватар и текст — удобно, когда важен процесс, а не бренд агента.

Думает…
Песочница и тесты Claude

huih

⤢
04

Вопрос по центру

чат-фокус

Верхняя строка — мелкая мета (аватар, агент, статус, выход). Крупно по центру — последний вопрос пользователя.

Песочница… Ожидаю ⤢
huih
05

Мини-тулбар

очередь + действия

Аватар, имя, бейдж очереди «Сейчас …», контекст %, иконка настроек/микрофона, выход. Вопрос уходит в диалог.

Песочница ● Сейчас huih 12% 🎤 ⤢
06

Две линии (карточка)

чёткое разделение

Строка 1: только идентичность (аватар, workspace, Claude, статус, выход). Строка 2: только «Ваш вопрос: huih».

agent-cms-test / Песочница
Claude Ожидаю
⤢
Вопрос huih
07

Минимализм

~44px

Без pill-текста статуса: цветная точка у аватара, вопрос занимает всё место. Имя агента — в tooltip по аватару.

huih

⤢
08

Контекст и workspace

для длинных сессий

Полоса контекста (1K/32K, %), workspace, агент, статус; вторая строка — вопрос. Полезно при лимитах токенов.

⤢
32K · 8% agent-cms-test Песочница Ожидаю

huih

09

Голос вперёд

side panel voice

Крупный аватар, подпись «Удерживайте — говорите», мини-волна при listening, статус справа.

Удерживайте — говорите
Слушаю… ⤢
10

Вопрос + ответ (превью)

мини-диалог в шапке

Слева аватар и статус под ним; справа агент, вопрос жирно, одна строка последнего ответа агента (серым).

Ожидаю
Песочница и тесты Claude

huih

Failed to authenticate: OAuth session expired…

⤢

Как выбрать

Embed / extension: 01 или 07 (мало места). Голос: 09. Очередь сообщений: 05. Длинные вопросы: 04 или 06. Отладка маршрута/OAuth: 10 (виден и вопрос, и сбой). Текущая реализация ближе к варианту 01.