aep/sdlc-hub
1
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

Редизайн веб-приложения по дизайн-системе AURA (#65) #66

Merged
aep merged 23 commits from feat/65-redesign into main 2026-10-22 07:32:53 +03:00
Conversation 0 Commits 23 Files Changed 96 +3831 -984
aep commented 2026-10-22 01:04:53 +03:00
Owner
Copy Link

Issue: #65

Редизайн веб-приложения хаба по дизайн-системе AURA (handoff AURA-xlsx-tool + Figma «Универсалки») и правка UX. Спека — openspec/changes/redesign/, план — docs/superpowers/plans/2026-10-21-redesign.md.

Что изменилось

  • Дизайн-система: токены AURA для светлой и тёмной темы лежат в web/src/styles/tokens.css, цветовые литералы есть только там (это проверяет тест). Шрифт Mulish вместо платной Proxima Nova, IBM Plex Mono остался. Компоненты собраны в web/src/ui/ без antd. controls.css и временные псевдонимы токенов удалены.
  • Верхняя панель на всех страницах: проект, разделы «Доска связей / Задачи», состояние агента, время данных, «Обновить из Jira» с ходом пакета, тема, меню со «Сменить токен».
  • Обновление из Jira работает на уровне приложения (shell/refresh.ts, RefreshProvider). Когда пакет завершается, перечитываются доска, список и открытая карточка. Правила опроса из #20 сохранены.
  • Доска: редкие действия ушли из шапки в меню «⋯». Панель режимов разбита на группы «Показать» и «Режим». Легенда сворачивается. Логика, раскладки и golden-эталоны не менялись.
  • Задачи: на виду поиск, «Открытые / Все», «Только соседи» и «Фильтры (N)». Шесть списков спрятаны в панель, выбранные значения показаны плашками с ✕. Щелчок по строке открывает карточку.
  • Карточка, вход, «Новый проект», служебные экраны переведены на новые компоненты, поведение у них прежнее.
  • Тема: переключатель на два положения. Пока пользователь его не трогал, тема следует системной.

Проверки (HEAD 45ff5fa)

  • make check: pytest 571 passed, vitest 391 passed.
  • npm run e2e: 31 passed. Ещё 36 пропущены: это screens.spec, он запускается только с SCREENS=1.
  • SCREENS=1 npx playwright test e2e/screens.spec.ts: 36 passed, снимки ниже.

Rulings I made

Все записаны в openspec/changes/redesign/design.md, раздел «Decisions made without discussion». Решения #1–12 приняты на этапе спеки, #13–19 — во время исполнения.

  • R-1 (design #13). Отклонения задачи 1 приняты:

    • тёмные --color-action-danger и его hover взяты из tokens.json AURA (#ffaea5 / #ffcbc5), --color-status-error оставлен #e26c67;
    • overlay окон везде 45%;
    • --k-test малиновый (#a63d78 / #e07fb0), палитра --k-* и --p-* подобрана на глаз.

    Цена ошибки низкая: правятся значения в tokens.css.

  • R-2 (design #14). Регресс T4.1 (skipPickup не уменьшался при ошибке перечитывания) исправлен в задаче 5, без отдельного раунда. Пропуск подхвата сделан счётчиком, подхват коалесцируется. Тон refreshText: error для lost, failed, hub-down и error; warning для cancelled. Цена ошибки: один пропущенный подхват чужого пакета до следующей загрузки снимка.

  • R-3 (design #16). При ширине меньше 1100 px таблица списка прокручивается внутри панели, и шапка таблицы там не прилипает. Цена ошибки: на узком экране шапку не видно при прокрутке.

  • R-4 (design #17). Решения задачи 9 приняты:

    • Notice в карточке переопределён локально (14/20);
    • в ui/Dialog добавлены onNativeClose и проброс атрибутов;
    • .who переименован в c-head, .confirm в note-confirm, потому что глобальные правила протекали.

    Цена ошибки низкая.

  • R-5 (design #18). Мелкие решения по виду, цена ошибки низкая:

    • --lane-alt светлый #f5f5f2, тёмный #252525;
    • заголовки NotFound и ErrorBoundary сделаны как h2 внутри Notice;
    • текст Notice основным цветом, 12/16;
    • на 390 px проект, тема и меню в одной строке, разделы ниже.

  • R-6 (design #19). Задача 11 принята без отдельного ревью, её диф покрыт финальным ревью. Цена ошибки низкая.

  • R-7 (design #19). Фикс-волна по финальному ревью, цена ошибки низкая (CSS панели, Button и Notice):

    • loading-кнопка сохраняет вид своего варианта;
    • текст предупреждений на светлой теме — color-mix(warning 55%, text-primary);
    • статус пакета в панели (от 1100 px) у нижней границы, обрезается многоточием, полный текст в title;
    • «агент офлайн» показан как warning.

  • Решение #15 (.appbar { min-height: 64px }, панель не sticky) приняло ревью задачи 5.

Находки

  • Финальное ревью (opus): Critical 0, Important 4. I-1…I-4 исправлены в 0a5ca2e.
  • Minor исправлены: M-1, M-5, M-7, M-9, M-15, M-16. Остальные отложены, список ниже.
  • Полная таблица находок — в ledger SDD.

Deferred (уйдут в follow-up issue при закрытии)

Доступность

  • T2.2 / M-4: у Segmented нет переключения стрелками и roving tabindex.
  • M-3: у Menu есть aria-haspopup, но нет role=menu; фокус не уходит в меню и не возвращается после Esc.
  • T2.4: кнопка снятия в Chip 20×20 слишком мала; у IconButton нет стиля для aria-pressed.
  • T3.3: после «Очистить» в SearchInput фокус не возвращается.
  • T3.1: Field перезаписывает id и aria-describedby дочернего элемента.
  • T2.3: ThemeSwitch не реагирует на смену системной темы.
  • T6.3 / M-6: BoardNotes с role=alert срабатывает на каждой загрузке.

Вид

  • M-8: отметка пункта меню — символ «✓», а не SVG.
  • M-10: .menu button перебивает .ui-btn.
  • M-11: активный сегмент с зелёной рамкой и серый переключатель темы расходятся с Figma.
  • M-12: на 390 px верхняя панель занимает 4–5 строк, а в спеке их две.
  • M-13: разделители панели доски скрываются только при ширине ≤640 px.
  • M-17: подсказка у номера доски — только placeholder.
  • M-18: заголовки разделов 16 px против 24 px.
  • T3.5: border-radius на нативном чекбоксе не действует.
  • T1.5: в тёмной теме selected, hover, track, subtle и success-bg совпадают (#272727).
  • N-1: пробельный узел в BoardHeader.tsx:71 оставляет пустой flex-блок.
  • N-2: пропсы label и title в BoardHeader и правило .board-src__label нигде не используются.

Логика

  • M-14: track() молча пропускает пакет «Нового проекта», если в это время идёт пакет обновления.
  • T5.3: skipPickup — один счётчик на всё приложение.
  • M-2: на доске две кнопки «Ещё»; App.test.tsx:46 проходит только за счёт гонки.

Тесты и инструменты

  • T1.4: паритет тем проверяется только для --color-*.
  • T1.6: регэксп не ловит цвета в шорткатах и oklch.
  • T2.5: нет тестов Badge, Panel, PageHeader и вида Chip.
  • T3.4: тестам Dialog, ширин и aria-invalid у Select не хватает покрытия.
  • T4.3: тест перехода берёт заглушку вместо страницы «Задачи».
  • T7.5: e2e M-3 хрупок к метрикам ключа карточки.

После merge

На Mac mini нужно выполнить make web и перезапустить хаб (launchctl kickstart). Это делает владелец.

Скриншоты

Снимки на тестовом хабе (фикстура e2e). Все 36 снимков: SCREENS=1 npx playwright test e2e/screens.spec.ts → web/e2e-screens/. У fullPage-снимков на 390 px под окном видна страница — это артефакт снимка.

Доска, светлая

light-1920-board

Доска, тёмная

dark-1920-board

Доска с панелью «Проблемы»

dark-1920-board-problems

Доска «По датам»

light-1920-board-bydate

Задачи: панель фильтров и плашки

light-1920-issues-filters

Задачи, тёмная

dark-1920-issues

Карточка задачи

dark-1920-card

«Новый проект»

light-1920-new-project

Обновление из Jira, светлая

light-1920-refresh

Обновление из Jira, тёмная

dark-1920-refresh

390 px: доска

light-390-board

390 px: фильтры

light-390-issues-filters

390 px: карточка

light-390-card

🤖 Generated with Claude Code

Issue: #65 Редизайн веб-приложения хаба по дизайн-системе AURA (handoff AURA-xlsx-tool + Figma «Универсалки») и правка UX. Спека — `openspec/changes/redesign/`, план — `docs/superpowers/plans/2026-10-21-redesign.md`. ## Что изменилось - **Дизайн-система:** токены AURA для светлой и тёмной темы лежат в `web/src/styles/tokens.css`, цветовые литералы есть только там (это проверяет тест). Шрифт Mulish вместо платной Proxima Nova, IBM Plex Mono остался. Компоненты собраны в `web/src/ui/` без antd. `controls.css` и временные псевдонимы токенов удалены. - **Верхняя панель на всех страницах:** проект, разделы «Доска связей / Задачи», состояние агента, время данных, «Обновить из Jira» с ходом пакета, тема, меню со «Сменить токен». - **Обновление из Jira работает на уровне приложения** (`shell/refresh.ts`, `RefreshProvider`). Когда пакет завершается, перечитываются доска, список и открытая карточка. Правила опроса из #20 сохранены. - **Доска:** редкие действия ушли из шапки в меню «⋯». Панель режимов разбита на группы «Показать» и «Режим». Легенда сворачивается. Логика, раскладки и golden-эталоны не менялись. - **Задачи:** на виду поиск, «Открытые / Все», «Только соседи» и «Фильтры (N)». Шесть списков спрятаны в панель, выбранные значения показаны плашками с ✕. Щелчок по строке открывает карточку. - **Карточка, вход, «Новый проект», служебные экраны** переведены на новые компоненты, поведение у них прежнее. - **Тема:** переключатель на два положения. Пока пользователь его не трогал, тема следует системной. ## Проверки (HEAD 45ff5fa) - `make check`: pytest 571 passed, vitest 391 passed. - `npm run e2e`: 31 passed. Ещё 36 пропущены: это `screens.spec`, он запускается только с `SCREENS=1`. - `SCREENS=1 npx playwright test e2e/screens.spec.ts`: 36 passed, снимки ниже. ## Rulings I made Все записаны в `openspec/changes/redesign/design.md`, раздел «Decisions made without discussion». Решения #1–12 приняты на этапе спеки, #13–19 — во время исполнения. - **R-1 (design #13).** Отклонения задачи 1 приняты: - тёмные `--color-action-danger` и его hover взяты из tokens.json AURA (`#ffaea5` / `#ffcbc5`), `--color-status-error` оставлен `#e26c67`; - overlay окон везде 45%; - `--k-test` малиновый (`#a63d78` / `#e07fb0`), палитра `--k-*` и `--p-*` подобрана на глаз. Цена ошибки низкая: правятся значения в tokens.css. - **R-2 (design #14).** Регресс T4.1 (`skipPickup` не уменьшался при ошибке перечитывания) исправлен в задаче 5, без отдельного раунда. Пропуск подхвата сделан счётчиком, подхват коалесцируется. Тон `refreshText`: error для lost, failed, hub-down и error; warning для cancelled. Цена ошибки: один пропущенный подхват чужого пакета до следующей загрузки снимка. - **R-3 (design #16).** При ширине меньше 1100 px таблица списка прокручивается внутри панели, и шапка таблицы там не прилипает. Цена ошибки: на узком экране шапку не видно при прокрутке. - **R-4 (design #17).** Решения задачи 9 приняты: - Notice в карточке переопределён локально (14/20); - в `ui/Dialog` добавлены `onNativeClose` и проброс атрибутов; - `.who` переименован в `c-head`, `.confirm` в `note-confirm`, потому что глобальные правила протекали. Цена ошибки низкая. - **R-5 (design #18).** Мелкие решения по виду, цена ошибки низкая: - `--lane-alt` светлый `#f5f5f2`, тёмный `#252525`; - заголовки NotFound и ErrorBoundary сделаны как `h2` внутри Notice; - текст Notice основным цветом, 12/16; - на 390 px проект, тема и меню в одной строке, разделы ниже. - **R-6 (design #19).** Задача 11 принята без отдельного ревью, её диф покрыт финальным ревью. Цена ошибки низкая. - **R-7 (design #19).** Фикс-волна по финальному ревью, цена ошибки низкая (CSS панели, Button и Notice): - loading-кнопка сохраняет вид своего варианта; - текст предупреждений на светлой теме — `color-mix(warning 55%, text-primary)`; - статус пакета в панели (от 1100 px) у нижней границы, обрезается многоточием, полный текст в `title`; - «агент офлайн» показан как warning. - Решение #15 (`.appbar { min-height: 64px }`, панель не sticky) приняло ревью задачи 5. ## Находки - Финальное ревью (opus): Critical 0, Important 4. I-1…I-4 исправлены в 0a5ca2e. - Minor исправлены: M-1, M-5, M-7, M-9, M-15, M-16. Остальные отложены, список ниже. - Полная таблица находок — в ledger SDD. ### Deferred (уйдут в follow-up issue при закрытии) **Доступность** - **T2.2 / M-4:** у Segmented нет переключения стрелками и roving tabindex. - **M-3:** у Menu есть `aria-haspopup`, но нет `role=menu`; фокус не уходит в меню и не возвращается после Esc. - **T2.4:** кнопка снятия в Chip 20×20 слишком мала; у IconButton нет стиля для `aria-pressed`. - **T3.3:** после «Очистить» в SearchInput фокус не возвращается. - **T3.1:** Field перезаписывает `id` и `aria-describedby` дочернего элемента. - **T2.3:** ThemeSwitch не реагирует на смену системной темы. - **T6.3 / M-6:** BoardNotes с `role=alert` срабатывает на каждой загрузке. **Вид** - **M-8:** отметка пункта меню — символ «✓», а не SVG. - **M-10:** `.menu button` перебивает `.ui-btn`. - **M-11:** активный сегмент с зелёной рамкой и серый переключатель темы расходятся с Figma. - **M-12:** на 390 px верхняя панель занимает 4–5 строк, а в спеке их две. - **M-13:** разделители панели доски скрываются только при ширине ≤640 px. - **M-17:** подсказка у номера доски — только placeholder. - **M-18:** заголовки разделов 16 px против 24 px. - **T3.5:** border-radius на нативном чекбоксе не действует. - **T1.5:** в тёмной теме selected, hover, track, subtle и success-bg совпадают (`#272727`). - **N-1:** пробельный узел в `BoardHeader.tsx:71` оставляет пустой flex-блок. - **N-2:** пропсы `label` и `title` в BoardHeader и правило `.board-src__label` нигде не используются. **Логика** - **M-14:** `track()` молча пропускает пакет «Нового проекта», если в это время идёт пакет обновления. - **T5.3:** `skipPickup` — один счётчик на всё приложение. - **M-2:** на доске две кнопки «Ещё»; `App.test.tsx:46` проходит только за счёт гонки. **Тесты и инструменты** - **T1.4:** паритет тем проверяется только для `--color-*`. - **T1.6:** регэксп не ловит цвета в шорткатах и oklch. - **T2.5:** нет тестов Badge, Panel, PageHeader и вида Chip. - **T3.4:** тестам Dialog, ширин и `aria-invalid` у Select не хватает покрытия. - **T4.3:** тест перехода берёт заглушку вместо страницы «Задачи». - **T7.5:** e2e M-3 хрупок к метрикам ключа карточки. ## После merge На Mac mini нужно выполнить `make web` и перезапустить хаб (`launchctl kickstart`). Это делает владелец. ## Скриншоты Снимки на тестовом хабе (фикстура e2e). Все 36 снимков: `SCREENS=1 npx playwright test e2e/screens.spec.ts` → `web/e2e-screens/`. У fullPage-снимков на 390 px под окном видна страница — это артефакт снимка. **Доска, светлая** ![light-1920-board](https://git.aepif.ru/attachments/00956c06-28b4-4f1a-9b44-28fc8cc577c1) **Доска, тёмная** ![dark-1920-board](https://git.aepif.ru/attachments/294d4f4e-75c7-43b5-bf67-fc30614a07b0) **Доска с панелью «Проблемы»** ![dark-1920-board-problems](https://git.aepif.ru/attachments/a4fc70a9-02e8-4aab-b122-8b672a4ca980) **Доска «По датам»** ![light-1920-board-bydate](https://git.aepif.ru/attachments/32bd2694-6a14-4580-8313-9963e941528a) **Задачи: панель фильтров и плашки** ![light-1920-issues-filters](https://git.aepif.ru/attachments/220b8df7-ea3d-4fee-af51-af9dff8dbabf) **Задачи, тёмная** ![dark-1920-issues](https://git.aepif.ru/attachments/3733586e-c933-4397-85d1-4c0f3233eaf0) **Карточка задачи** ![dark-1920-card](https://git.aepif.ru/attachments/5916b424-df15-431e-8a6c-f6aa8bd56a57) **«Новый проект»** ![light-1920-new-project](https://git.aepif.ru/attachments/4b84b2ef-fff1-4148-8db7-9540b6a7c8ec) **Обновление из Jira, светлая** ![light-1920-refresh](https://git.aepif.ru/attachments/02fab7f4-5959-4cfb-904a-854c8c80b6f6) **Обновление из Jira, тёмная** ![dark-1920-refresh](https://git.aepif.ru/attachments/a4d25186-0ffd-4786-8cf5-633f08f57317) **390 px: доска** ![light-390-board](https://git.aepif.ru/attachments/cc70f05e-53e1-4e7a-bc98-1ffaf3e221e3) **390 px: фильтры** ![light-390-issues-filters](https://git.aepif.ru/attachments/341ccb61-b108-4ffe-aaa6-899376bb9e86) **390 px: карточка** ![light-390-card](https://git.aepif.ru/attachments/d7771f3b-bb89-40ec-b99e-4f56c0142f75) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
light-1920-board.png
122 KiB
dark-1920-board.png
118 KiB
dark-1920-board-problems.png
166 KiB
light-1920-board-bydate.png
132 KiB
light-1920-issues-filters.png
79 KiB
dark-1920-issues.png
132 KiB
dark-1920-card.png
169 KiB
light-1920-new-project.png
137 KiB
light-1920-refresh.png
128 KiB
dark-1920-refresh.png
121 KiB
light-390-board.png
88 KiB
light-390-issues-filters.png
54 KiB
light-390-card.png
58 KiB
aep added 23 commits 2026-10-22 01:04:54 +03:00 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
BoardHeader вместо Toolbar, панель управления в Panel, легенда сворачивается
(jira-hub-legend), ящик проблем, экспорт и таблица связей в Panel.
Dropdown: явный проп menu; тест фонового обновления проектов мокает GET /batches/7.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Экраны входа, «Новый проект», ProjectGate, «не найдено» и ошибка отрисовки
переведены на компоненты системы. controls.css удалён, псевдонимы токенов
убраны, глобальные .row/.spacer/.hint/.warn/.login разобраны. Разделы в
верхней панели не активны вне доски и задач. Тонкая настройка дорожек доски,
тест на ошибку списка, стабилизирован тест проектов.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Тема и меню «…» остаются в первой строке панели, статус данных — второй;
на 390 px выбор проекта сжимается. Текст Notice — основным цветом.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
I-1 пометка «Хаб · данные на» убрана с доски; I-2 кнопка в loading сохраняет вид варианта;
I-3 статус пакета — постоянный live-регион, не сдвигает кнопку и высоту панели; I-4 текст
предупреждений затемнён через color-mix; M-1 точка «агент офлайн» и событие — предупреждение;
M-7 ошибка настроек в Notice; M-9 убраны IconGrid и IconReset; M-15 IBM Plex Mono 600;
M-16 aria-controls только при раскрытой сетке фильтров.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
aep merged commit db36cc6d19 into main 2026-10-22 07:32:53 +03:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
aep
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: aep/sdlc-hub#66
No description provided.
Delete Branch "feat/65-redesign"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?