hermes-hub/agents/inbox/2026-08-25-A29-design-system-and-routing.md

Задание A29: дизайн-система «Крона» и новый экран «Маршрутизация»

Дата поступления

2026-08-25

База

Проверочный HEAD на момент выдачи: d5429da.

Ветка

antigravity/design-system-routing

Порядок исполнения

Два прохода: Flash реализует, Pro проводит аудит. Пункт P0-5 написан для аудитора.

Второе из трёх заданий по новому фронтенду. Идёт после A28 (реестр ролей) и параллельно A30 (главный экран) — границы по файлам ниже.

---

Порядок работы с git

cd <каталог репозитория>; git fetch origin --prune; git status
git checkout main; git pull --ff-only origin main
git checkout -b antigravity/design-system-routing
git commit -m "..."          <- сначала коммит
git push -u origin antigravity/design-system-routing

В main напрямую не пушить.

---

Исходные материалы

Владелец передал готовый дизайн. Он лежит у него на рабочем столе, в репозиторий не копировался (там растровые макеты и логотипы):

Брендбук.txt          дизайн-система: палитра, три темы, типографика
Брендбук Hermes Hub.png, Брендбук Hermes Hub 2.png
Hermes Hub.png        эталонный логотип
3.txt                 полное ТЗ по вкладке «Маршрутизация»
3.1.png               утверждённый макет «Маршрутизации» (светлая тема)
2.1.png … 7.1.png     остальные экраны
лого агентов.png      знаки агентов
claude.png, grok.jfif, antигравити.png, opencode.png,
llama.png, ollama.png, nvidia.png, чат гпт.png   логотипы провайдеров

Попросите файлы у владельца перед началом. Работать по пересказу нельзя: макет — источник истины, и расхождение с ним будет считаться дефектом.

---

P0-1. Дизайн-система: токены и три темы

Из Брендбук.txt. Базовая палитра задана явно:

Token	Цвет	Назначение
brand-primary	#101510	глубокий фирменный зелёный
brand-dark	#1A2A1F	панели и поверхности
brand-secondary	#2F4A36	активные и вторичные поверхности
brand-light	#F7F1E3	фирменный кремовый
brand-gold	#CDAA64	основной золотой акцент

Системные цвета: зелёный — успех и работа, янтарный — проверка и ожидание, красный — ошибка и возврат, синий — очередь, серо-бежевый — завершено и неактивно.

Три темы: Dark, Medium, Light. Ключевое из брендбука, что легко упустить:

• Medium — не осветлённый Dark, а отдельная тема: приглушённый тёмно-зелёный фон и светлые кремовые карточки агентов на зелёном холсте.
• Light не использует чистый #FFFFFF: база — тёплый кремовый около #F7F1E3.
• Золото не должно заливать интерфейс целиком — только бренд, акценты, активные элементы и связи.

Требования к реализации:

1. Все цвета — переменными CSS, ни одного literal-цвета в разметке и в JS. Тема переключается сменой набора переменных, а не подменой стилей.
2. Переключатель тем в «Настройках», выбор сохраняется.
3. Существующие семь разделов переводятся на токены целиком. Экран, оставшийся на старых цветах, — незавершённая работа.

Логотип: геометрию эталонного знака не перерисовывать. Для малых размеров допустима упрощённая версия на основе H + корни, производная от основного знака.

P0-2. Экран «Маршрутизация» по макету 3.1.png и ТЗ 3.txt

Это самая ценная часть задания: владелец жаловался на текущую маршрутизацию с первого дня.

Назначение вкладки, дословно из ТЗ: она отвечает за очерёдность аккаунтов внутри каждого агента. Связи между агентами живут на главном экране и здесь не настраиваются.

Структура экрана:

• слева и по центру — маршруты всех агентов;
• справа — постоянная панель «Доступные аккаунты» со всеми подключёнными аккаунтами системы.

Обязательное поведение:

1. Перетаскивание аккаунта из правой панели прямо в маршрут нужного агента. Плюс кнопка «+» как альтернатива — на макете она есть.
2. Перестановка внутри маршрута мышью: порядок — это приоритет отказоустойчивости, а не косметика.
3. В строке маршрута видно: номер по порядку, логотип провайдера, имя и почта аккаунта, выбор модели, квота (использовано и предел, полоса и процент), время сброса квоты, статус, кнопка удаления из роли.
4. Заголовок роли: имя, пометка важности, описание обязанностей (берётся из реестра A28), число аккаунтов, кнопка «Добавить».
5. Кнопка «Сбросить к рекомендуемому» в шапке — это авто-распределение из A26, второй реализации не заводить.
6. Поиск и фильтр по провайдеру в правой панели.

Действия только существующие: save_chain, reorder_chain, assign_role, set_model. Появится новое — впишите в docs/web-api/CONTRACT.md.

P0-3. Честность данных на этом экране

Экран целиком построен на числах, поэтому риск выдумки здесь наивысший.

• Квоты, проценты и время сброса берутся из quota_collector. Ни одного значения, которого не дал провайдер.
• Квота неизвестна — «Н/Д» и причина, а не ноль и не пустая полоса, которую можно принять за исчерпание.
• Логотип провайдера, для которого файла не дали, — нейтральная заглушка, а не чужой знак.
• На макете стоят демонстрационные почты и числа (coder-backup@mail.com, 812K / 1.5M). Это иллюстрация, а не данные. Ни одно из них не должно попасть в код.

Последнее — не теория: в прошлых раундах в мастере подключения уже находили выдуманные коды устройства GRK-7842 и CDX-9104, а тест требовал их наличия.

P0-4. Что не входит

• Главный экран, граф workflow, файлы агентов, LIVE-мониторинг — это A30, туда не заходить.
• Реестр ролей и двенадцать агентов — это A28. Здесь роли только читаются.
• Нижняя панель экосистемы (Planner, Journal, Finance, …) на макетах — соседние продукты. В этом задании она не реализуется; если рисуете, то как неактивную заготовку, и это оговаривается в отчёте.

P0-5. Аудит вторым проходом

1. Literal-цвета. Поиском убедиться, что в разметке и в JS не осталось #RRGGBB мимо токенов. Иначе третья тема будет вечно «почти готова».
2. Демонстрационные данные из макета в коде — искать отдельно и целенаправленно.
3. Все три темы открыть и посмотреть, а не только Dark. Medium — отдельная тема, не осветлённый Dark; проверить именно это.
4. Перетаскивание при отпускании вне зоны не должно терять блок.
5. Запустить изменённое.
6. Побочные изменения объяснить.
7. Пропущенный пункт назвать пропущенным.

---

Ограничения

• Десктоп (router/ui/**) не трогать.
• Ваша зона: router/web/static/**, ассеты. Серверная часть — только если действию не хватает данных, и это оговаривается.
• A30 работает в тех же файлах. Разделение: A29 — style.css, темы, экран маршрутизации; A30 — главный экран и граф. Согласуйте границы до начала, конфликты решайте через владельца, а не молча переписывая чужое.
• Правило честности без исключений.
• Тег v0.1.1 не создавать.

Критерии приёмки

1. Ветка в origin, git status чист.
2. Три темы работают, переключаются, выбор сохраняется; скриншоты всех трёх.
3. Literal-цветов вне токенов нет; проверено поиском.
4. Маршрутизация соответствует 3.1.png: две области, правая панель аккаунтов, перетаскивание, выбор модели, квоты, время сброса, удаление из роли.
5. Перетаскивание из панели в роль и перестановка внутри роли сохраняются и переживают перезапуск.
6. Ни одного значения из макета в коде; проверено отдельно.
7. Неизвестная квота показана как «Н/Д» с причиной, а не нулём.
8. ruff check . чисто; релизный гейт не ухудшен.
9. Отчёт: START_HEAD, FINAL_HEAD, origin/main, git status, X passed / Y skipped / Z failed.

Главное

Владелец получает интерфейс, который выглядит как управляющая система его экосистемы, и экран маршрутизации, где аккаунты раскладываются по агентам мышью. Это то, чего он просил дольше всего.

Порядок сдачи

Передать точный FINAL_COMMIT_SHA.