# Задание 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`.