1a21c8b1a8
Владелец передал готовый дизайн: брендбук с тремя темами, макеты главного экрана, маршрутизации и остальных разделов, логотипы. Плюс список из двенадцати субагентов с расписанными обязанностями. Объём не помещается в одно задание, поэтому разделено на три с явными границами по файлам: A28 реестр ролей и двенадцать субагентов Antigravity, основа A29 дизайн-система и экран «Маршрутизация» Antigravity A30 главный экран: граф workflow, LIVE, файлы Codex Каждое опирается на состояние, снятое исполнением, чтобы агенты не переписывали работающее и не выясняли заново: - новая роль уже добавляется через конфигурацию и доходит до снапшота, но подпись падает в сырой идентификатор, потому что таблицы имён зашиты в четырёх местах; - workflow, связей между агентами и файлов агентов в проекте нет вовсе — это разработка с нуля, а не доработка; - источники данных для дашборда существуют и настоящие, параллельный заводить не нужно; - веб-слой без сборки, и это обосновано в контракте. В каждом задании отдельно оговорено, что демонстрационные значения с макетов (12 задач, 3.42 с, 94.2%, account-01) — иллюстрация и в код попасть не должны. Поверхность для выдуманных данных здесь самая большая за проект. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
158 lines
12 KiB
Markdown
158 lines
12 KiB
Markdown
# Задание 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`.
|