From fa20059ecd896d1cbffdc430649401c18892e664 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Wed, 21 Oct 2026 23:54:22 +0400
Subject: [PATCH 01/23] =?UTF-8?q?=D0=A1=D0=BF=D0=B5=D0=BA=D0=B0:=20=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=20=D0=B2=D0=B5=D0=B1?=
 =?UTF-8?q?-=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D0=BF=D0=BE=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD-=D1=81?=
 =?UTF-8?q?=D0=B8=D1=81=D1=82=D0=B5=D0=BC=D0=B5=20AURA=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 openspec/changes/redesign/.openspec.yaml      |   2 +
 openspec/changes/redesign/design.md           | 189 +++++++++++
 openspec/changes/redesign/proposal.md         |  40 +++
 .../changes/redesign/specs/web-app/spec.md    | 320 ++++++++++++++++++
 4 files changed, 551 insertions(+)
 create mode 100644 openspec/changes/redesign/.openspec.yaml
 create mode 100644 openspec/changes/redesign/design.md
 create mode 100644 openspec/changes/redesign/proposal.md
 create mode 100644 openspec/changes/redesign/specs/web-app/spec.md

diff --git a/openspec/changes/redesign/.openspec.yaml b/openspec/changes/redesign/.openspec.yaml
new file mode 100644
index 0000000..dc36fb1
--- /dev/null
+++ b/openspec/changes/redesign/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-10-21
diff --git a/openspec/changes/redesign/design.md b/openspec/changes/redesign/design.md
new file mode 100644
index 0000000..51cdd32
--- /dev/null
+++ b/openspec/changes/redesign/design.md
@@ -0,0 +1,189 @@
+## Context
+
+`main` 57bf1fa. Материалы дизайн-системы (вне репозитория, `~/projects/jira-bridge/design/`):
+- `DESIGN-SYSTEM-RULES.md`, `STYLE-INVENTORY.md`, `REACT-COMPONENT-CATALOG.md` — правила и инвентарь AURA;
+- `AURA-xlsx-tool-handoff-2026-09-29.zip` — исходники AURA: `design-system/tokens.json` (канон токенов),
+  `src/styles/tokens.css` (сгенерированные CSS-переменные), `src/styles.css`, `design-system/foundations.md`;
+- `Overview.svg`, `Универсалки-2…7.svg` — экспорт Figma «Универсалки»: основы (цветовые роли, типографика, геометрия),
+  загрузка файлов, составные компоненты (плитки выбора, сообщения, панель действия), макеты, контейнер контента,
+  базовые компоненты (кнопки, табы, шаги, тема, навигация приложений).
+
+Что важно из системы:
+- **Цвета (светлая):** канва `#f8f8f6`, поверхность `#fdfdfc`, приглушённый фон `#fafaf8`, текст `#17171a`, вторичный
+  `#818190`, плейсхолдер `#5c6260`, граница `#e5e5e0`, сильная граница `#cfcfc8`, действие `#568d32` (hover/active
+  `#477729`), выбранное — фон `#f4faf5` и граница `#568d32`, ошибка `#b42318` / фон `#fff1f0`, предупреждение `#d89614`
+  / фон `#fffbe6` / граница `#ffe58f`, фокус `rgb(42 122 70 / 35%)`. **Тёмная:** канва `#181818`, поверхность `#1f1f1f`,
+  приглушённый `#272727`, текст `#f2f4f2`, вторичный `#d6dcd7`, плейсхолдер `#aab2ac`, границы `rgb(232 238 233 / 10%)` и
+  `/ 17%`, действие `#69a93d` (hover `#83c657`), текст на действии `#112016`, ошибка `#e26c67` / фон `#402725`,
+  предупреждение `#e8c17a` / фон `#382f20` / граница `#8a6d1d`, фокус `rgb(116 184 255 / 55%)`.
+- **Типографика:** заголовок раздела Bold 20/28, текст Regular 14/20, подпись Semibold 14/20, мелкий текст 12/16,
+  крупный 16/24.
+- **Геометрия:** шаг 4 px; контрол 32 px (крупный 40), радиус контрола 10; кнопки — «таблетки» (радиус 999);
+  панели — радиус 16, отступ 16–24; окно/канва — радиус 20–24; флажок 16×16 радиус 4; контейнер контента 1440 px;
+  переходы 180 ms ease, нажатие 100 ms.
+- **Компоненты из Figma:** кнопки (основная зелёная, вторичная контурная, опасная, с загрузкой), сегментный
+  переключатель на сером треке с белой активной «таблеткой» и зелёным текстом («Навигация приложений»), переключатель
+  темы (солнце / луна), сообщения успеха и ошибки (иконка в круге, заголовок, пояснение), плитки выбора, плашки
+  файлов, шаги процесса.
+
+Приложение сейчас (`web/src`): глобальные стили `styles/{theme,base,controls}.css` (переменные `--bg`, `--fg`,
+`--muted`, `--line`, `--card`, `--panel`, `--soft`, `--accent` синий `#1f6f8b`, палитра видов работ `--k-*`, приоритетов
+`--p-*`, стрелок `--edge*`, `--guide`), стили страниц `board/board.css` (165 строк, в нём же вход, список, карточка),
+`issues/issues.css`, `projects/projects.css`, `shell/shell.css`. Шрифт IBM Plex Sans/Mono из `@fontsource`. Иконки —
+символы текста (⋯ ⇄ ⚑ ▥ ✕ ▼). Обновление из Jira, ход пакета и тема живут в `board/useBoardSource.ts` и
+`board/components/Toolbar.tsx`; тема — `shell/theme.ts` (ключ `graph-theme`: `""` системная, `light`, `dark`).
+
+## Goals / Non-Goals
+
+**Goals:** приложение выглядит как AURA в обеих темах; каждый экран собран из одних компонентов и токенов; общие
+действия (обновление из Jira, тема, токен) — в оболочке; фильтры доски и списка сгруппированы и не перегружают экран;
+поведение, адреса, ключи `localStorage` и логика доски — прежние.
+
+**Non-Goals:** см. proposal.md.
+
+## Decisions
+
+1. **Без Ant Design.** Приложение на своих компонентах; тянуть antd ради внешнего вида — тяжёлая зависимость и
+   переписывание всех контролов. Токены AURA переносятся в `web/src/styles/tokens.css` вручную с пометкой источника
+   (`tokens.json` 29.09.2026); скрипта синхронизации нет.
+2. **Токены — два слоя.** Семантические имена AURA (`--color-bg-canvas`, `--color-text-secondary`,
+   `--color-action-primary`, `--space-*`, `--radius-*`, `--font-size-*`, `--component-control-height` …) для светлой и
+   тёмной темы плюс токены приложения, которых в AURA нет: палитра видов работ `--k-*`, приоритеты `--p-*`, стрелки
+   `--edge`, `--edge-strong`, `--guide`, дорожки доски. Старые имена (`--bg`, `--fg`, `--muted`, `--line`, `--card`,
+   `--panel`, `--soft`, `--accent`, `--accent-fg`) на время перехода — псевдонимы семантических; после переноса всех
+   страниц псевдонимы удаляются. `--edge-strong` и `--accent` становятся зелёными; `--guide` (передачи, критический
+   путь) остаётся оранжевым — его роль — выделение поверх зелёного. Палитра `--k-*` подбирается заново под тёплую
+   канву, оттенки остаются различимыми между собой и с зелёным действием.
+3. **Цвета только из токенов.** Вне `tokens.css` в CSS нет литералов цвета (`#…`, `rgb(…)`, `hsl(…)`, именованных,
+   кроме `transparent`, `currentColor`, `inherit`); проверка — тест Vitest, который читает все `*.css` в `web/src`.
+   Так новая страница не может «забыть» тему.
+4. **Шрифт — Mulish** (`@fontsource/mulish` 5.3.0, начертания 400/600/700, подмножества с кириллицей): ближайшая
+   свободная гарнитура к Proxima Nova по пропорциям; Montserrat шире и съедает место в плотных таблицах. Моноширинный —
+   IBM Plex Mono (ключи задач, код, исходник разметки), как сейчас. IBM Plex Sans удаляется из зависимостей.
+5. **Иконки — свои SVG** в `web/src/ui/icons.tsx` (линейные 16/20 px, обводка 1.5, `currentColor`), набор под
+   нужды приложения: обновить, загрузка/файл, меню (⋯), закрыть, шеврон, поиск, фильтр, солнце, луна, внешняя ссылка,
+   предупреждение, галочка, ошибка, передачи, критический путь, по датам, соседи, связи, сетка, сброс, легенда. Без
+   новой зависимости; текстовые символы в интерфейсе заменяются иконками.
+6. **Компоненты `web/src/ui/`:** `Button` (варианты `primary`, `secondary`, `danger`, `ghost`; размеры 32 и 40;
+   «таблетка»; состояние загрузки — крутилка вместо иконки, кнопка недоступна), `IconButton` (32×32, радиус 10, имя —
+   `aria-label`), `Segmented` (трек `--color-bg-subtle`/серый, активный сегмент — поверхность и зелёный текст; ссылки
+   или кнопки), `ThemeSwitch` (солнце/луна), `Field` (подпись Semibold 14/20 над контролом), `TextInput`, `SearchInput`
+   (иконка поиска, очистка), `Select` (родной `<select>`, 32 px, радиус 10, своя стрелка), `Checkbox` (16×16, радиус 4,
+   зелёный при отметке), `Badge` (статус, сосед, счётчик), `Chip` (снимаемая плашка фильтра: «Спринт: X ✕»), `Notice`
+   (успех / ошибка / предупреждение / сведения: иконка, текст, необязательное действие), `Panel` (поверхность, граница,
+   радиус 16), `PageHeader` (заголовок 20/28, подзаголовок 14/20 вторичным, место для действий справа), `Dialog`
+   (родной `<dialog>`, радиус 20, тень канвы), `Menu` (выпадающее меню на основе нынешнего `Dropdown`), `Popover`.
+   Компоненты держат только вид и доступность; логика страниц остаётся в страницах.
+7. **Состояние «предупреждение» разрешено.** В AURA его нет в контролах, но токены `warning` в системе есть, а хабу
+   нужно отличать «агент офлайн», «хаб не отвечает — прежние данные» от ошибок. Используется только в `Notice`, `Badge`
+   и тексте состояния; у полей ввода состояния `warning` нет.
+8. **Контейнер.** Страницы «Задачи», «не найдено», вход — контейнер до 1440 px по центру с боковым отступом 24 px
+   (16 px уже 640 px). Доска — во всю ширину окна с отступом 24 px: графу нужна ширина. Верхняя панель — во всю ширину,
+   её содержимое выровнено по тем же отступам.
+9. **Верхняя панель (оболочка)**, высота 64 px, поверхность, нижняя граница; слева направо: название «Хаб Jira»
+   (Bold 16/24), выбор проекта (`Select`), разделы — `Segmented` из ссылок «Доска связей» / «Задачи» (активный —
+   `aria-current="page"`), растяжка, блок данных Jira, `ThemeSwitch`, меню `IconButton ⋯` с пунктом «Сменить токен».
+   Уже 1100 px блок данных переносится второй строкой панели; уже 640 px — название скрыто, разделы на всю ширину.
+10. **Блок данных Jira:** точка и подпись агента («агент на связи» зелёной точкой / «агент офлайн» — предупреждение;
+    `GET /agent` при старте и раз в 60 с, подсказка — время последнего выхода на связь), текст «данные на ДД.ММ ЧЧ:ММ»
+    (`last_sync.finished_at` из снимка доски текущего проекта; «полного обновления не было»), кнопка `primary`
+    «Обновить из Jira» с иконкой; во время пакета — состояние загрузки и текст хода «пакет #N в очереди / выполняется,
+    ~N с»; итог (выполнен / не выполнен: текст / отменён / потерян) — текстом с цветом статуса до следующего события
+    или 10 с для «выполнен». Тексты событий — нынешние `statusText` для пакетных событий.
+11. **Обновление из Jira переезжает в оболочку** (`web/src/shell/refresh.ts` — хук и контекст): постановка
+    `POST /refresh {full: true, author: "viewer"}` с проверкой `GET /agent`, один опрос `GET /batches/{id}` раз в 3 с,
+    остановка на терминальном статусе, 4xx, 404 и после 5 ошибок «хаб не отвечает» подряд — правила прежние (M-2…M-4
+    #20). Подхват незавершённого пакета `viewer` с первой командой `refresh` — при входе в приложение и после каждой
+    успешной загрузки снимка доски (подписка на кэш запросов), кроме перечитывания после своего пакета. По завершении
+    пакета инвалидируются снимки всех досок (`["board"]`), списки задач (`["issues"]`), карточки (`["issue"]`) и
+    проекты (`["projects"]`, счётчики задач). Доска, показывающая файл, файл не заменяет (M-1). «Новый проект» отдаёт
+    `batch_id` созданного пакета прямо в оболочку — опрос начинается сразу, без подхвата.
+12. **Доска после переезда** (`useBoardSource`): источник (хаб / файл), `reload`, `loadFile`, события снимка
+    (загрузка, хаб не отвечает, файл не разобран, JSON применён, ошибка) — как были; пакетных событий нет. Строка
+    состояния доски показывает только свои события, пакетные — в оболочке.
+13. **Шапка доски** (липкая, как сейчас): `PageHeader` «Доска связей», подзаголовок — счётчики («42 задачи из 120 ·
+    +5 соседей · 60 связей из 80 · скрыто без связей: 3»), источник — `Badge` («хаб» не показывается; «из файла:
+    имя» с кнопкой ✕ = «Перечитать»), событие доски — текстом под заголовком; справа — `Button secondary` «Проблемы»
+    со счётчиком (`Badge` ошибки, если > 0) и меню ⋯: «Перечитать», «Загрузить файл…», «Экспорт JSON», «Таблица
+    связей» (переключатель), «Привязка к сетке» (переключатель), разделитель, «Сбросить раскладку» (с прежним
+    подтверждением). Темы в меню доски нет.
+14. **Панель управления доски** — `Panel` в одну строку (перенос по ширине): «Спринты» и «Исполнители» —
+    мультиселекты (нынешний `MultiSelect`, кнопка в виде `Select` с подписью внутри), разделитель, группа «Показать»:
+    переключатели «Соседи по связям», «Только передачи», «Скрыть без связей»; группа «Режим»: «Критический путь», «По
+    датам». Переключатель — кнопка-«таблетка» с иконкой, включённый — стиль «выбрано» (фон `--color-bg-selected-green`,
+    зелёная граница и текст), `aria-pressed`. Подсказки (`title`) — нынешние.
+15. **Легенда** — под панелью, сворачивается кнопкой «Легенда» (`aria-expanded`); свёрнута — видно число скрытых
+    видов работ и типов связей («скрыто: 2»), если они есть. Состояние свёртки — `localStorage` ключ
+    `jira-hub-legend` (`"0"` свёрнута; по умолчанию развёрнута). Поведение пунктов (щелчок скрывает вид / тип) —
+    прежнее.
+16. **Карточки на доске:** радиус 12, граница `--color-border-default`, поверхность; ключ — моно, цвет действия;
+    статус — `Badge`; размеры, ручки перетаскивания, растяжка и измерение высоты — прежние (меняются только цвета,
+    радиусы и шрифт; высота по содержимому считается тем же слоем измерения, поэтому смена шрифта не ломает раскладку,
+    а сохранённые размеры карточек остаются). Дорожки — чередование через `--color-bg-subtle`.
+17. **Список задач.** `PageHeader` «Задачи», подзаголовок «показано N» (и «есть ещё», если следующая порция есть).
+    Под ним `Panel` фильтров: строка 1 — `SearchInput` «Ключ или тема» (широкий), `Segmented` «Открытые | Все»
+    (замена флажка «скрыть закрытые», адрес тот же: «Все» — `closed=1`), переключатель-«таблетка» «Только соседи»
+    (`neighbor=1`), кнопка «Фильтры» со счётчиком выбранных из шести списков; строка 2 (при выбранных) — `Chip`
+    «Спринт: X ✕» на каждый выбранный список и «Сбросить» (снимает шесть списков, поиск и переключатели не трогает);
+    панель «Фильтры» раскрывается под строкой сеткой `Field`+`Select` по 3 в ряд (спринт, исполнитель, вид работы,
+    статус Jira, метка, эпик). Раскрыта ли панель — в `sessionStorage` (`jira-hub-issue-filters`). Подписи и варианты
+    списков, «(нет на доске)» — как сейчас.
+18. **Таблица задач** — в `Panel` без внутреннего отступа, шапка липкая; колонки: Ключ (моно, ссылка; рядом `Badge`
+    «сосед»), Тема, Статус Jira (`Badge`), Исполнитель, Срок (просрочено — цветом ошибки, по правилу карточки), Спринт,
+    Эпик, Вид работы, Тип. Строка 44 px, при наведении — приглушённый фон; щелчок по строке (кроме ссылок и выделения
+    текста) открывает карточку тем же переходом, что ключ. «Показать ещё» — `Button secondary` по центру под таблицей.
+    Пусто — `Notice` сведений «По этим фильтрам задач нет».
+19. **Карточка задачи** — `Dialog` 1000 px, радиус 20; шапка: ключ (моно), `Badge` статуса, справа `Button secondary`
+    «Открыть в Jira» с иконкой внешней ссылки и `IconButton` «Закрыть»; тема — 20/28 Bold; строка фактов — 14/20
+    вторичным, «просрочено» — `Badge` ошибки. Разделы — заголовки 16/24 Semibold (без верхнего регистра); правая
+    колонка — `Panel` приглушённого фона: заметки, прочие поля, команды. Форма заметок — `Field`/`Select`/`textarea`
+    системы, «Сохранить» `primary`, «Отмена» `secondary`. Содержание, порядок и поведение разделов — прежние.
+20. **Вход** — `Panel` 480 px по центру канвы: заголовок 20/28, пояснение, поле 40 px, `Button primary` «Войти»
+    (40 px); ошибка — `Notice` ошибки. **«Новый проект»** — `Dialog` 480 px с `Field`-полями, «Создать» `primary`,
+    «Отмена» `secondary`, ошибка хаба — `Notice` у кнопок. **«Не найдено»**, **ошибка отрисовки**, **проект не
+    найден**, **нет проектов** — `Notice` в контейнере с действием.
+21. **Тема** — `ThemeSwitch` в оболочке, два положения. Ключ `graph-theme` прежний: без сохранённого выбора (или `""`)
+    — тема системы, переключатель показывает её; щелчок сохраняет `light` или `dark`. Пункта «Тема: системная» больше
+    нет: вернуть «как в системе» — убрать выбор нельзя, это осознанное упрощение (вторичный сценарий).
+22. **Фокус и доступность:** видимое кольцо фокуса 2 px `--color-focus-ring` со смещением 2 px у всех интерактивных
+    элементов; цвет не единственный признак состояния (включённые переключатели — `aria-pressed` и иконка-галочка или
+    заливка; ошибки — иконка); `prefers-reduced-motion` отключает переходы.
+23. **Проверка вида.** Скриншоты Playwright на тестовом хабе (`web/scripts/test-hub.sh`) 1920×1080 и 390×844 в
+    светлой и тёмной темах: доска, задачи с раскрытыми фильтрами, карточка, вход, «Новый проект» — прикладываются к PR
+    (в репозиторий не попадают, снимаются скриптом `web/e2e/screens.spec.ts` по флагу `SCREENS=1`). Пиксельных
+    эталонов в наборе тестов нет: вид будет меняться по замечаниям владельца.
+24. **Тесты.** Логика доски и golden-эталоны не меняются. Тесты, привязанные к разметке (`Toolbar`, `BoardPage`,
+    `IssuesPage`, `LoginScreen`, `projects`, e2e), переписываются под новые роли и подписи; тесты опроса пакета
+    переезжают из `useBoardSource.test.tsx` в тест хука оболочки. Новые: компоненты `ui/` (роли, `aria-*`, состояния),
+    тест «цвета только из токенов», тест переключателя темы.
+
+## Risks / Trade-offs
+
+- **Шрифт меняет ширину текста** → сохранённые высоты карточек на доске могут обрезать текст. Смягчение: высота «по
+  содержимому» пересчитывается двойным щелчком по уголку, как сейчас; «Сбросить раскладку» доступна.
+- **Переезд обновления в оболочку** затрагивает отработанные правила опроса (M-1…M-5 #20). Смягчение: перенос кода и
+  тестов почти без изменений, меняется только владелец состояния и набор инвалидируемых запросов.
+- **Большой дифф стилей** → регрессии вида на редких состояниях (ящик «Проблемы», режим «по датам», экспорт).
+  Смягчение: скриншоты всех экранов в PR, владелец смотрит живое приложение.
+
+## Decisions made without discussion
+
+Владелец 21.10.2026 отдал редизайн и UX на усмотрение агента («сделай редизайн и проработай UX сам, потом будем
+отталкиваться»); его входные данные — только: «и то и то» (родство с AURA и исправление неудобств), примеры
+неудобств (обновление из Jira только с доски, перегрузка фильтрами, «падинги не те»), сценарий (раз в спринт граф,
+затем поиск и перепроверка задач), «фильтры все нужны». Всё ниже — решения агента.
+
+| # | Дата | Решение | Обоснование | Цена ошибки |
+|---|---|---|---|---|
+| 1 | 21.10.2026 | Без Ant Design, токены вручную (решение 1) | antd — замена всех контролов и тяжёлая зависимость ради вида | низкая: вид тот же, antd можно добавить позже |
+| 2 | 21.10.2026 | Mulish вместо Proxima Nova (решение 4) | Proxima Nova платная; Mulish ближе по пропорциям, с кириллицей | низкая: замена шрифта — одна строка токена и пакет |
+| 3 | 21.10.2026 | Свои SVG-иконки без библиотеки (решение 5) | ~20 иконок, зависимость не нужна | низкая |
+| 4 | 21.10.2026 | Предупреждение разрешено вне контролов (решение 7) | хабу нужно отличать «офлайн» и «прежние данные» от ошибок | низкая |
+| 5 | 21.10.2026 | Доска во всю ширину, прочее — контейнер 1440 (решение 8) | графу нужна ширина, таблице и карточке — ограничение строки | низкая |
+| 6 | 21.10.2026 | Обновление из Jira и ход пакета — в оболочке, инвалидация всех данных (решения 10–12) | пример неудобства владельца; после обновления устаревают и список, и карточка | средняя: правила опроса переносятся, регрессии ловят перенесённые тесты |
+| 7 | 21.10.2026 | Редкие действия доски — в меню ⋯, режимы — группами «Показать» / «Режим» (решения 13–14) | «перегрузка фильтрами»; доска нужна раз в спринт, режимы — основное, файл/экспорт — редко | низкая: перестановка кнопок |
+| 8 | 21.10.2026 | Легенда сворачивается, состояние в `localStorage` (решение 15) | легенда занимает строку, нужна для чтения цветов — свёрнута по выбору | низкая |
+| 9 | 21.10.2026 | Список: поиск и «Открытые / Все» на виду, шесть списков — в панели «Фильтры» с плашками (решение 17) | частые действия на виду, редкие — по запросу; выбранное видно плашками | низкая |
+| 10 | 21.10.2026 | Щелчок по строке таблицы открывает карточку (решение 18) | основной сценарий списка — открыть и перепроверить задачу | низкая |
+| 11 | 21.10.2026 | Тема — два положения, системная только без сохранённого выбора (решение 21) | переключатель AURA двухпозиционный | низкая: вернуть третье положение — пункт меню |
+| 12 | 21.10.2026 | Проверка вида скриншотами в PR, без пиксельных эталонов (решение 23) | вид будет меняться по замечаниям, эталоны мешали бы | низкая |
diff --git a/openspec/changes/redesign/proposal.md b/openspec/changes/redesign/proposal.md
new file mode 100644
index 0000000..d4357e2
--- /dev/null
+++ b/openspec/changes/redesign/proposal.md
@@ -0,0 +1,40 @@
+## Why
+
+Веб-приложение хаба выросло из перенесённой доски `links.html` и выглядит и ведёт себя как набор страниц, собранных в
+разное время: свои цвета и отступы у каждой страницы, «Обновить из Jira» и тема — только в шапке доски, фильтры списка
+задач — сплошная строка из шести выпадающих списков, двух флажков и поиска. Владелец (21.10.2026, jira-hub#65) хочет,
+чтобы хаб выглядел как родственное приложение AURA (дизайн-система из handoff AURA-xlsx-tool 29.09.2026 и Figma
+«Универсалки», материалы — `~/projects/jira-bridge/design/`), и чтобы интерфейс стал логичнее.
+
+Сценарий владельца: раз в спринт — обзор графа связей на доске; в остальное время — поиск и перепроверка задач в
+списке и карточке. Все фильтры нужны, но упакованы должны быть удобнее. Редизайн и UX владелец отдал на усмотрение
+агента; дальше — доработки от результата.
+
+## What Changes
+
+- **Дизайн-система в приложении:** токены AURA (цвета светлой и тёмной темы, типографика, шаг 4 px, радиусы, высоты
+  контролов, фокус) — `web/src/styles/tokens.css`; набор базовых компонентов `web/src/ui/` (кнопки-«таблетки»,
+  иконки, сегментный переключатель, переключатель темы, поле, выпадающий список, флажок, бейдж, сообщение, панель,
+  окно, меню); все страницы собраны из них. Шрифт — Mulish (свободная замена Proxima Nova, с кириллицей), моноширинный
+  — IBM Plex Mono, как был.
+- **Верхняя панель приложения:** название, проект, разделы сегментным переключателем, блок данных Jira (время
+  последнего полного обновления, агент на связи / офлайн, «Обновить из Jira» и ход пакета), переключатель темы, меню
+  с «Сменить токен». Обновление из Jira и тема доступны с любой страницы.
+- **Обновление из Jira — уровень приложения:** пакет `refresh` ставит и опрашивает оболочка; по завершении
+  перечитываются снимки доски, список задач и открытая карточка. Доска сохраняет только своё: источник (хаб / файл),
+  «Перечитать», загрузку файла и события снимка.
+- **Доска:** шапка страницы (название, счётчики, источник, «Проблемы», меню), панель управления (спринты, исполнители,
+  режимы показа группами), сворачиваемая легенда; редкие действия — в меню. Поведение доски (модель, выборка,
+  критический путь, раскладка, ключи `localStorage`) не меняется.
+- **Список задач:** поиск и «Открытые / Все» на виду, остальные фильтры — в раскрывающейся панели «Фильтры (N)»,
+  выбранные — снимаемыми плашками; таблица в панели, строка открывает карточку, «сосед» — плашкой у ключа. Адрес и
+  запросы к хабу — как были.
+- **Карточка задачи, вход, «Новый проект», «не найдено», ошибки** — в стиле системы, содержание и поведение прежние.
+
+## Non-Goals
+
+- Ant Design и генерация токенов из `tokens.json` скриптом (`design-system:sync`): токены переносятся вручную.
+- Proxima Nova (платный шрифт) и любые ресурсы вне сборки.
+- Новые функции: правки в Jira из интерфейса (`viewer-edit`), страницы очереди, агента и настроек.
+- Изменения API хаба, MCP, агента; изменения логики доски (golden-тесты не трогаются).
+- Мобильная вёрстка доски сверх нынешней (узкий экран — только без поломок).
diff --git a/openspec/changes/redesign/specs/web-app/spec.md b/openspec/changes/redesign/specs/web-app/spec.md
new file mode 100644
index 0000000..3c24228
--- /dev/null
+++ b/openspec/changes/redesign/specs/web-app/spec.md
@@ -0,0 +1,320 @@
+## ADDED Requirements
+
+### Requirement: Дизайн-система
+Приложение SHALL следовать дизайн-системе AURA (handoff AURA-xlsx-tool 29.09.2026, Figma «Универсалки») в светлой и
+тёмной темах. Токены — цвета по семантическим ролям для обеих тем, типографика, отступы с шагом 4 px, радиусы, высоты
+контролов, фокус, движение — SHALL быть определены в `web/src/styles/tokens.css` (вместе с токенами приложения: палитра
+видов работ, приоритеты, стрелки и дорожки доски); прочие файлы стилей MUST NOT содержать литералов цвета и SHALL
+брать цвета из токенов. Экраны SHALL собираться из компонентов `web/src/ui/` (кнопки, кнопка-иконка, сегментный
+переключатель, переключатель темы, поле с подписью, поле ввода и поиска, выпадающий список, флажок, бейдж, снимаемая
+плашка, сообщение, панель, шапка страницы, окно, меню). Геометрия: контролы 32 px (крупные 40 px) с радиусом 10 px,
+кнопки — «таблетки», панели — радиус 16 px, окна — радиус 20 px, флажок 16×16 px; текст Regular 14/20, подписи
+Semibold 14/20, заголовок страницы Bold 20/28. Страницы, кроме доски, SHALL занимать контейнер до 1440 px по центру с
+боковым отступом 24 px (16 px на экранах уже 640 px); доска — всю ширину окна с отступом 24 px. Иконки — SVG из
+сборки, не символы текста. Каждый интерактивный элемент SHALL иметь видимое кольцо фокуса; цвет MUST NOT быть
+единственным признаком состояния.
+
+#### Scenario: Цвет вне токенов
+- **WHEN** в любом `*.css` в `web/src`, кроме `styles/tokens.css`, появился литерал цвета
+- **THEN** тесты фронта падают с именем файла и литералом
+
+#### Scenario: Тёмная тема
+- **WHEN** выбрана тёмная тема
+- **THEN** канва `#181818`, поверхности `#1f1f1f`, основной текст `#f2f4f2`, основное действие `#69a93d` на всех
+  страницах, в окнах и меню
+
+### Requirement: Обновление из Jira
+Действие «Обновить из Jira» SHALL быть в верхней панели приложения и доступно с любой страницы. Оно SHALL проверять
+агента (`GET /agent`; офлайн — предупреждение, пакет всё равно ставится), ставить `POST /refresh {full: true, author:
+"viewer"}` и опрашивать `GET /batches/{id}` каждые 3 с одним опросом до терминального статуса пакета. Кнопка SHALL быть
+недоступна (с признаком загрузки), пока запрос `/refresh` в пути или пакет выполняется. Незавершённый пакет автора
+`viewer`, первая команда которого — `refresh`, SHALL подхватываться при входе в приложение и после каждой успешной
+загрузки снимка доски, кроме перечитывания снимка после завершения собственного пакета; пакеты `viewer` с другими
+командами не подхватываются. Опрос SHALL прекращаться при ответе 4xx (404 — «пакета нет в хабе») и после 5 ошибок
+«хаб не отвечает» подряд, с сообщением и снова доступной кнопкой. По завершении пакета приложение SHALL перечитывать
+снимки досок, списки задач, открытую карточку и список проектов; доска, показывающая снимок из файла, его не заменяет.
+Пакет, поставленный формой «Новый проект», SHALL опрашиваться так же сразу после создания.
+
+Верхняя панель SHALL показывать блок данных Jira: состояние агента («агент на связи» / «агент офлайн», по `GET /agent`
+при входе и раз в 60 с), время последнего полного обновления («данные на ДД.ММ ЧЧ:ММ» по `last_sync` снимка доски
+текущего проекта, «полного обновления не было», если его нет) и одно текущее событие пакета: в очереди / выполняется (с
+оставшимся временем, с пометкой «агент офлайн» и «хаб не отвечает, повтор»), выполнен, не выполнен с текстом ошибки,
+отменён, опрос остановлен с причиной, хаб не ответил на постановку; новое событие заменяет предыдущее, «выполнен»
+исчезает через 10 с.
+
+#### Scenario: Обновление со списка задач
+- **WHEN** открыт `/app/issues`, нажато «Обновить из Jira», пакет выполнен
+- **THEN** в хабе один пакет `refresh` автора `viewer`; список задач перезапрошен; верхняя панель показывала «пакет #N
+  выполняется», затем «пакет #N выполнен»
+
+#### Scenario: Один прогон на всё приложение
+- **WHEN** нажата «Обновить из Jira» и, пока пакет выполняется, выполнен переход между разделами и «Перечитать» на доске
+- **THEN** кнопка остаётся недоступной, в хабе один пакет, его опрашивает один опрос
+
+#### Scenario: Опрос получил 404
+- **WHEN** опрос пакета получил 404
+- **THEN** опрос остановлен, верхняя панель показывает «пакета нет в хабе», кнопка «Обновить из Jira» снова доступна
+
+#### Scenario: Пакет с другой вкладки
+- **WHEN** пакет `viewer` с командой `refresh` поставлен с другой вкладки и не завершён, приложение открыто
+- **THEN** верхняя панель показывает «пакет #N выполняется» и по завершении данные перечитываются
+
+#### Scenario: Пакет с другими командами
+- **WHEN** незавершённый пакет автора `viewer` состоит из команд `ensure_fields`
+- **THEN** приложение его не опрашивает, кнопка «Обновить из Jira» доступна
+
+#### Scenario: Агент офлайн
+- **WHEN** `GET /agent` отвечает `online: false` и нажато «Обновить из Jira»
+- **THEN** пакет поставлен, событие — «агент офлайн — пакет выполнится, когда он выйдет на связь; пакет #N в очереди…»
+
+### Requirement: Тема
+Переключатель темы SHALL быть в верхней панели приложения: два положения — светлая и тёмная. Выбор SHALL храниться в
+`localStorage` под ключом `graph-theme` (`light` / `dark`), как у прежней доски; без сохранённого выбора или со
+значением `""` тема SHALL следовать настройке системы, и переключатель показывает её. Тема применяется до первой
+отрисовки, без мигания.
+
+#### Scenario: Выбор темы сохраняется
+- **WHEN** в системе светлая тема, переключатель переведён в «тёмная», страница перезагружена
+- **THEN** приложение в тёмной теме, в `localStorage` `graph-theme` = `dark`
+
+## MODIFIED Requirements
+
+### Requirement: Оболочка и адреса
+Приложение SHALL открываться под префиксом `/app/` и иметь страницы `/app/board` (доска связей), `/app/issues` (список
+задач) и `/app/issues/{key}` (карточка задачи — окно поверх страницы, требование «Карточка задачи»); `/app` и `/app/` SHALL вести на `/app/board`, неизвестный путь —
+на страницу «не найдено» со ссылками на разделы. Верхняя панель SHALL содержать название, выпадающий список проектов
+(«<метка> — <название>», текущий отмечен, в конце «＋ Новый проект…»; требование «Проект в приложении»), разделы
+«Доска связей» и «Задачи» сегментным переключателем (текущий отмечен `aria-current="page"`), блок данных Jira с
+действием «Обновить из Jira» (требование «Обновление из Jira»), переключатель темы (требование «Тема») и меню с
+действием «Сменить токен». На узких экранах панель SHALL переноситься на две строки без горизонтальной прокрутки.
+Неожиданная ошибка отрисовки страницы SHALL показываться сообщением с кнопкой «Перезагрузить», не пустым экраном.
+
+#### Scenario: Переход между разделами
+- **WHEN** на доске выбран раздел «Задачи»
+- **THEN** адрес — `/app/issues` с текущим проектом, показан список задач; «назад» возвращает на доску
+
+#### Scenario: Сменить токен
+- **WHEN** в меню верхней панели выбрано «Сменить токен»
+- **THEN** токен очищен, показан экран входа
+
+### Requirement: Доска связей
+Страница `/app/board` SHALL воспроизводить поведение доски связей хаба (`links.html` ревизии 3931a88) без изменений,
+кроме перечисленных в этом требовании и в требовании «Источник данных доски»: построение модели из `GET /board`, CSV
+фильтра Jira и JSON доски (`arm-ka-links/1`); дорожки по эпикам со свёрткой и перестановкой, служебные дорожки внизу;
+карточки с перетаскиванием, растяжкой, размером по содержимому и привязкой к сетке; стрелки связей с выравниванием;
+фильтры по спринтам и исполнителям; легенда со скрытием видов работ и типов связей; «соседи по связям», «только
+передачи», «скрыть без связей», «критический путь», «по датам» с колонками дат и их растяжкой; ящик «Проблемы»; таблица
+связей; экспорт и импорт JSON; «Сбросить раскладку». Раскладка, дорожки и фильтры SHALL храниться в
+`localStorage` под теми же ключами `graph-<имя>…`, что у `links.html`, с той же миграцией старых ключей.
+Результат построения модели, видимой выборки, критического пути и проблем SHALL совпадать с результатом `links.html`
+на одних и тех же данных и фильтрах.
+
+Шапка доски (закреплена при прокрутке) SHALL содержать заголовок «Доска связей», счётчики (задачи из всех, соседи по
+связям, связи из всех, скрытые без связей), пометку источника, если на доске снимок из файла (с действием вернуться к
+данным хаба), событие доски, кнопку «Проблемы» со счётчиком и меню с действиями «Перечитать», «Загрузить файл…»,
+«Экспорт JSON», «Таблица связей», «Привязка к сетке» и «Сбросить раскладку» (с подтверждением). Под шапкой — панель
+управления: мультиселекты «Спринты» и «Исполнители», переключатели группы «Показать» («Соседи по связям», «Только
+передачи», «Скрыть без связей») и группы «Режим» («Критический путь», «По датам»), каждый с `aria-pressed` и прежней
+подсказкой. Под панелью — легенда, которая сворачивается кнопкой «Легенда»; свёрнутая показывает число скрытых видов
+работ и типов связей; состояние свёртки хранится в `localStorage` под ключом `jira-hub-legend`. «Обновить из Jira»,
+тема и «Сменить токен» — в верхней панели приложения, на доске их нет.
+
+У карточки задачи (не у заглушки) SHALL быть значок «Открыть карточку»,
+открывающий `/app/issues/{key}` окном поверх доски; ключ карточки по-прежнему открывает задачу в Jira. Пока окно открыто
+и после его закрытия доска SHALL сохранять прокрутку, раскладку, фильтры и строку состояния. Ещё два отличия от `links.html` (R-10, R-18): двойной щелчок по уголку
+карточки меряет высоту по содержимому при новой ширине, а не при прежней; указатель при перетаскивании и растяжке
+захватывается на нажатом элементе, а не на карточке, поэтому двойной щелчок по уголку сбрасывает размер. Загрузка файла CSV/JSON доступна только после входа, с экрана входа её нет.
+Карточка задачи, статус Jira которой входит в `closed_statuses`, SHALL быть приглушена (полупрозрачна), под
+указателем и с фокусом клавиатуры внутри карточки — в полную яркость; стрелка связи, у которой хотя бы один конец — такая задача, SHALL быть приглушена так же.
+Приглушение — только вид: модель, видимая выборка, критический путь, проблемы, раскладка и экспорт JSON от него не
+зависят; переключателя нет; правило одно для данных хаба, CSV и JSON.
+При возврате на `/app/board` с другой страницы приложения в той же вкладке доска SHALL восстанавливать прежнюю
+прокрутку; после перезагрузки страницы доска открывается сверху.
+
+#### Scenario: Раскладка переживает переход
+- **WHEN** раскладка карточек сохранена страницей `links.html`, открыта `/app/board` с теми же данными
+- **THEN** карточки стоят на тех же местах, дорожки в том же порядке и свёртке, фильтры те же
+
+#### Scenario: Совпадение со старой доской
+- **WHEN** на одной фикстуре `GET /board` и одном наборе фильтров построены модель, видимая выборка, критический путь
+  и проблемы старой страницей и приложением
+- **THEN** результаты совпадают
+
+#### Scenario: Открыть карточку
+- **WHEN** на карточке AURORA-1620 нажат значок «Открыть карточку»
+- **THEN** адрес `/app/issues/AURORA-1620`, карточка задачи открыта окном, под ним доска
+
+#### Scenario: Возврат с карточки
+- **WHEN** доска прокручена вниз, нажат значок «Открыть карточку», затем окно закрыто
+- **THEN** адрес `/app/board`, доска показана с той же прокруткой и раскладкой, без повторной загрузки `GET /board`
+
+#### Scenario: Возврат из другого раздела
+- **WHEN** доска прокручена вниз, выбран раздел «Задачи», затем раздел «Доска связей»
+- **THEN** доска показана с той же прокруткой
+
+#### Scenario: Закрытые на доске приглушены
+- **WHEN** на доске AURORA-1620 «В работе», AURORA-1621 «Готово», AURORA-1622 «Снято», связь AURORA-1620 → AURORA-1621
+- **THEN** карточки AURORA-1621 и AURORA-1622 и стрелка AURORA-1620 → AURORA-1621 приглушены, AURORA-1620 — нет;
+  под указателем AURORA-1621 — в полную яркость; критический путь и ящик «Проблемы» те же, что без приглушения
+
+#### Scenario: Свёрнутая легенда
+- **WHEN** в легенде скрыт вид работы «тестирование», легенда свёрнута, страница перезагружена
+- **THEN** легенда свёрнута, рядом с кнопкой «Легенда» — «скрыто: 1»; карточек вида «тестирование» на доске нет
+
+### Requirement: Источник данных доски
+Доска SHALL хранить явный источник данных — хаб или файл. Пока показан снимок из файла (CSV или JSON-снимок), ответы
+хаба SHALL его не заменять; «Перечитать» SHALL возвращать источник «хаб» и загружать `GET /board` заново без обращения к
+Jira. Импорт JSON в режиме хаба SHALL применять раскладку, дорожки и фильтры и перечитывать хаб. Шапка доски SHALL
+показывать источник данных (пометка «из файла» с именем файла; данные хаба пометки не имеют) и одно текущее событие
+доски (загрузка; хаб не отвечает — прежние данные, а при снимке из файла — «на доске снимок из файла»; ошибка разбора
+файла — «файл не разобран: <причина>»; раскладка и фильтры из JSON применены; ошибка); новое событие заменяет
+предыдущее целиком. События пакета обновления из Jira показывает верхняя панель приложения (требование «Обновление из
+Jira»), не шапка доски.
+
+#### Scenario: Поздний ответ хаба не затирает файл
+- **WHEN** запрос `GET /board` в пути, и в это время загружен CSV
+- **THEN** после ответа хаба на доске по-прежнему данные CSV с пометкой «из файла»
+
+#### Scenario: Пакет завершился при снимке из файла
+- **WHEN** на доске снимок из CSV и завершился пакет обновления из Jira
+- **THEN** на доске по-прежнему данные CSV с пометкой «из файла»; после «Перечитать» — данные хаба
+
+#### Scenario: Хаб недоступен при снимке из файла
+- **WHEN** хаб не отвечает и загружен JSON-снимок доски
+- **THEN** шапка показывает «хаб не отвечает — на доске снимок из файла», а не «показаны прежние данные»
+
+
+#### Scenario: Нет второго полного прогона
+- **WHEN** нажата «Обновить из Jira» и, пока пакет выполняется, доска перерисована (фильтр, «Перечитать»)
+- **THEN** кнопка «Обновить из Jira» в верхней панели остаётся недоступной, в хабе один пакет, его опрашивает один опрос
+
+#### Scenario: Пакет пропал
+- **WHEN** опрос пакета получил 404, на доске данные хаба
+- **THEN** доска показывает прежние данные без своего события об ошибке; сообщение о пропавшем пакете — в верхней панели
+
+#### Scenario: Пакет после «Перечитать»
+- **WHEN** пакет `viewer` поставлен с другой вкладки и не завершён, на доске нажато «Перечитать»
+- **THEN** верхняя панель показывает «пакет #N выполняется», по завершении доска перечитывает данные
+
+#### Scenario: «Перечитать» во время пакета
+- **WHEN** пакет `viewer` выполняется и на доске нажато «Перечитать»
+- **THEN** верхняя панель по-прежнему показывает «пакет #N выполняется», шапка доски — без события пакета
+
+#### Scenario: Чужой пакет не подхватывается
+- **WHEN** незавершённый пакет автора `viewer` состоит из команд `ensure_fields`, открыта доска
+- **THEN** доска и верхняя панель его не опрашивают, кнопка «Обновить из Jira» доступна
+
+### Requirement: Список задач
+Страница `/app/issues` SHALL показывать задачи текущего проекта из `GET /issues?project=<текущий>` таблицей: ключ
+(открывает карточку задачи окном поверх списка) с пометкой «сосед» (относительно проекта), тема, статус Jira,
+исполнитель, срок (`planned_end`, иначе `duedate`; просроченный срок незакрытой задачи выделен), спринт, эпик (имя
+эпика, иначе ключ), вид работы, тип; статуса по факту в списке нет. Щелчок по строке (кроме ссылок и выделения текста)
+SHALL открывать карточку задачи так же, как ключ. Шапка страницы SHALL показывать число показанных задач.
+
+Фильтры SHALL соответствовать параметрам `GET /issues` (спринт, исполнитель, вид работы, статус Jira, метка, эпик,
+только соседи, поиск по ключу или теме, скрыть закрытые), храниться в query-строке адреса вместе с `project` и
+применяться сервером. На виду SHALL быть поиск, переключатель «Открытые | Все», переключатель «Только соседи» и
+кнопка «Фильтры» с числом выбранных выпадающих списков; шесть выпадающих списков (спринт, исполнитель, вид работы,
+статус Jira, метка, эпик) — в панели, которая раскрывается этой кнопкой; каждый выбранный список SHALL показываться
+снимаемой плашкой «<подпись>: <значение>» и под строкой фильтров должно быть действие «Сбросить», снимающее все шесть
+списков. Варианты выпадающих списков SHALL браться из снимка `GET /board?project=<текущий>`; значение фильтра из
+адреса, которого нет среди вариантов, SHALL показываться в списке с пометкой «(нет на доске)». Положение «Открытые»
+SHALL быть по умолчанию (в адресе ничего), «Все» — `closed=1` в адресе; «Открытые» — запрос с `hide_closed=1`,
+кроме случая, когда в фильтре «Статус Jira» выбран статус из `closed_statuses`. Параметр `fact_status` в адресе
+игнорируется. Задачи SHALL загружаться порциями по 50 строк; «Показать ещё» SHALL быть доступна, пока последняя
+порция полная.
+
+#### Scenario: Фильтр в адресе
+- **WHEN** выбран спринт «AWPCA_Спринт 2» и исполнитель
+- **THEN** адрес содержит `project=`, `sprint=` и `assignee=`, таблица — результат `GET /issues` с этими параметрами; открытие этого
+  адреса в новой вкладке показывает ту же выборку, кнопка «Фильтры» показывает 2, видны плашки спринта и исполнителя
+
+#### Scenario: Снять фильтр плашкой
+- **WHEN** выбраны спринт и исполнитель, нажат ✕ на плашке спринта
+- **THEN** в адресе нет `sprint=`, `assignee=` остался, таблица перезапрошена
+
+#### Scenario: Конец списка
+- **WHEN** вторая порция вернула 17 задач
+- **THEN** в таблице 67 задач, «Показать ещё» не показана
+
+#### Scenario: Фильтр по закрытому спринту
+- **WHEN** открыт адрес `/app/issues?project=AWPCA&sprint=AWPCA_Спринт 0`, а в снимке доски такого спринта нет
+- **THEN** выпадающий список «Спринт» показывает «AWPCA_Спринт 0 (нет на доске)» выбранным, таблица — по этому фильтру
+
+#### Scenario: Карточка поверх списка
+- **WHEN** список отфильтрован по спринту, прокручен и догружен «Показать ещё», открыта карточка задачи и окно закрыто
+- **THEN** адрес списка с тем же фильтром, в таблице те же строки, прокрутка та же
+
+#### Scenario: Щелчок по строке
+- **WHEN** в таблице щёлкнута ячейка темы строки AURORA-1620
+- **THEN** адрес `/app/issues/AURORA-1620`, карточка открыта окном поверх списка
+
+#### Scenario: Закрытые скрыты по умолчанию
+- **WHEN** открыт `/app/issues`, в зеркале задачи в статусах «В работе», «Готово», «Снято»
+- **THEN** выбрано «Открытые», запрос `GET /issues` с `hide_closed=1`, в таблице только «В работе»; после выбора «Все»
+  адрес содержит `closed=1`, в таблице все три
+
+#### Scenario: Выбран закрытый статус
+- **WHEN** выбрано «Открытые» и в «Статус Jira» выбрано «Готово»
+- **THEN** запрос `GET /issues?status=Готово` без `hide_closed`, в таблице задачи в статусе «Готово»
+
+### Requirement: Проект в приложении
+Доска и список задач SHALL показывать один проект — текущий. Текущий проект SHALL задаваться параметром `project` в
+адресе `/app/board` и `/app/issues`; без параметра — последний выбранный в этом браузере (`localStorage`), если он есть
+в `GET /projects`, иначе первый из `GET /projects`; выбранный проект записывается в адрес без новой записи истории.
+Проекта из адреса нет в `GET /projects` — страница SHALL показывать «проект <метка> не найден» и выпадающий список
+проектов вместо данных. Проектов нет — доска и список SHALL показывать приглашение создать проект («＋ Новый проект…»).
+Переходы «Доска связей» / «Задачи» SHALL сохранять текущий проект. Карточка задачи (`/app/issues/{key}`) от проекта не зависит.
+
+Доска SHALL загружать `GET /board?project=<текущий>`; «Обновить из Jira» — `POST /refresh {full: true}`, обновляет все
+проекты. Раскладка, дорожки и фильтры доски в `localStorage` SHALL храниться отдельно для каждого проекта;
+у проекта `AWPCA` — на прежних ключах (раскладка, сделанная до проектов, сохраняется). Фильтр спринтов SHALL
+показываться, только если хотя бы у одной своей задачи снимка (`neighbor = false`) есть спринт; иначе — «колонки
+«Спринт» нет — показаны все задачи».
+
+Форма «Новый проект» (пункт «＋ Новый проект…» выпадающего списка) SHALL открываться окном поверх страницы: метка,
+название, номер доски Jira (необязательно; подсказка «scrum или kanban определится сам»). «Создать» — `POST /projects`
+с автором `viewer`; ошибка хаба 409/422 — текст `detail` рядом с кнопкой, окно остаётся открытым; успех — окно
+закрывается, текущим становится новый проект, верхняя панель показывает ход пакета обновления из ответа (`batch_id`).
+
+#### Scenario: Первый вход после выкатки
+- **WHEN** открыт `/app/board` без `project`, в `localStorage` выбора нет, проекты `AWPCA` и `STOCKS_DRRK`
+- **THEN** адрес — `/app/board?project=AWPCA`, доска — `GET /board?project=AWPCA` с прежней раскладкой карточек
+
+#### Scenario: Переключение проекта
+- **WHEN** на доске `AWPCA` в выпадающем списке выбран `STOCKS_DRRK`, затем открыт раздел «Задачи»
+- **THEN** доска — `GET /board?project=STOCKS_DRRK` со своей раскладкой; адрес «Задач» — `/app/issues?project=STOCKS_DRRK`
+
+#### Scenario: Неизвестный проект в адресе
+- **WHEN** открыт `/app/issues?project=NOPE`
+- **THEN** «проект NOPE не найден» и список проектов; запроса `GET /issues` нет
+
+#### Scenario: Создание проекта из формы
+- **WHEN** в форме введены `STOCKS_DRRK`, «Запасы ДРРК», доска пусто; нажато «Создать»
+- **THEN** `POST /projects {label: "STOCKS_DRRK", name: "Запасы ДРРК", author: "viewer"}`; текущий проект — `STOCKS_DRRK`;
+  верхняя панель показывает «пакет #N выполняется»
+
+#### Scenario: Метка занята
+- **WHEN** в форме введена метка `awpca`, хаб ответил 409
+- **THEN** окно открыто, рядом с «Создать» — текст ошибки хаба
+
+#### Scenario: Канбан-проект
+- **WHEN** текущий проект — `STOCKS_DRRK`, ни у одной своей задачи снимка нет спринта (у соседа из `AWPCA` спринт есть)
+- **THEN** вместо фильтра спринтов — «колонки «Спринт» нет — показаны все задачи»
+
+### Requirement: Сборка и разработка
+Приложение SHALL быть npm-проектом в `web/` (React, TypeScript, Vite) с точными версиями зависимостей и
+`package-lock.json`. `make web` SHALL устанавливать зависимости (`npm ci`) и собирать приложение в
+`src/jira_hub/web/app/`; каталог сборки не хранится в git. Шрифты (Mulish — текст интерфейса, IBM Plex Mono — ключи
+задач и исходники), иконки и прочие ресурсы страницы SHALL входить в сборку: приложение не обращается к внешним
+адресам. `make check` SHALL запускать `uv run pytest`, проверку типов и линтер фронта и тесты фронта; зелёным считается
+только весь набор. `npm run dev` SHALL поднимать сервер разработки с прокси маршрутов API на хаб из `JIRA_HUB_URL` (по
+умолчанию тестовый `http://127.0.0.1:8791`).
+
+#### Scenario: Сборка с нуля
+- **WHEN** в чистом checkout выполнен `make web`
+- **THEN** в `src/jira_hub/web/app/` есть `index.html` и `assets/`; `git status` не показывает файлов сборки
+
+#### Scenario: Без интернета
+- **WHEN** приложение открыто на машине без доступа в интернет
+- **THEN** страница не запрашивает ресурсов вне хаба, текст набран Mulish, ключи задач — IBM Plex Mono
-- 
2.47.2


From aad35177bf06e517ef0367c91631f55ec7696b22 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Wed, 21 Oct 2026 23:57:47 +0400
Subject: [PATCH 02/23] =?UTF-8?q?=D0=9F=D0=BB=D0=B0=D0=BD:=20=D1=80=D0=B5?=
 =?UTF-8?q?=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=20=D0=B2=D0=B5=D0=B1-?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20?=
 =?UTF-8?q?(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/superpowers/plans/2026-10-21-redesign.md | 467 ++++++++++++++++++
 1 file changed, 467 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-10-21-redesign.md

diff --git a/docs/superpowers/plans/2026-10-21-redesign.md b/docs/superpowers/plans/2026-10-21-redesign.md
new file mode 100644
index 0000000..8699506
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-21-redesign.md
@@ -0,0 +1,467 @@
+# Редизайн веб-приложения по дизайн-системе AURA — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** веб-приложение хаба выглядит как AURA (светлая и тёмная темы), собрано из общих компонентов и токенов;
+«Обновить из Jira», тема и «Сменить токен» — в верхней панели на всех страницах; фильтры доски и списка сгруппированы.
+
+**Architecture:** слой токенов `web/src/styles/tokens.css` (AURA + токены доски) и набор компонентов `web/src/ui/`
+(вид и доступность, без логики страниц). Обновление из Jira переезжает из `board/useBoardSource.ts` в оболочку
+(`shell/refresh.ts`: хук, контекст, провайдер), доска оставляет себе источник и события снимка. Страницы
+перекладываются на компоненты по одной; логика доски (`board/{model,analysis,layout}`, `storage.ts`) и golden-эталоны
+не меняются.
+
+**Tech Stack:** React 19 + TypeScript + Vite, TanStack Query, Vitest + Testing Library, Playwright; `@fontsource/mulish`
+5.3.0, `@fontsource/ibm-plex-mono` 5.3.0.
+
+**Spec:** `openspec/changes/redesign/` (proposal.md, design.md — решения 1–24 и значения токенов в «Context»,
+specs/web-app/spec.md). Материалы системы (вне репозитория): `~/projects/jira-bridge/design/` — экспорт Figma `*.svg`
+(смотреть как картинки), `AURA-xlsx-tool-handoff-2026-09-29.zip` (`src/styles/tokens.css`, `src/styles.css`,
+`design-system/tokens.json` — значения для сверки).
+
+## Global Constraints
+
+- Цвета светлой и тёмной темы — ровно значения из design.md «Context» (канва `#f8f8f6` / `#181818`, поверхность
+  `#fdfdfc` / `#1f1f1f`, текст `#17171a` / `#f2f4f2`, вторичный `#818190` / `#d6dcd7`, граница `#e5e5e0` /
+  `rgb(232 238 233 / 10%)`, действие `#568d32` / `#69a93d`, hover `#477729` / `#83c657`, ошибка `#b42318` / `#e26c67`,
+  предупреждение `#d89614` / `#e8c17a`, фокус `rgb(42 122 70 / 35%)` / `rgb(116 184 255 / 55%)`).
+- Вне `web/src/styles/tokens.css` в `*.css` нет литералов цвета (`#hex`, `rgb(`, `rgba(`, `hsl(`, именованных цветов);
+  разрешены `transparent`, `currentColor`, `inherit`, `color-mix(...)` от переменных.
+- Типографика: Mulish; текст 14/20 Regular, подпись 14/20 Semibold (600), мелкий 12/16, крупный 16/24, заголовок
+  страницы 20/28 Bold (700). Моно — IBM Plex Mono (ключи, код, исходник).
+- Геометрия: шаг 4 px; контрол 32 px (крупный 40), радиус контрола 10; кнопка — радиус 999; панель — радиус 16;
+  окно — радиус 20; флажок 16×16 радиус 4; переходы 180 ms ease; фокус — кольцо 2 px `--color-focus-ring` со смещением
+  2 px.
+- Контейнер страниц, кроме доски: `max-width: 1440px`, по центру, боковой отступ 24 px (16 px уже 640 px). Доска — вся
+  ширина, отступ 24 px.
+- Адреса, query-параметры, ключи `localStorage` (`graph-*`, `jira-hub-token`, `jira-hub-project`…), запросы к API,
+  тексты сообщений `statusText` — прежние; новые ключи только `jira-hub-legend` (`localStorage`) и
+  `jira-hub-issue-filters` (`sessionStorage`).
+- Golden-эталоны `web/src/board/__fixtures__/*.expected.json` и модули `board/{model,analysis,layout}` не менять.
+- Новых зависимостей, кроме `@fontsource/mulish@5.3.0` (точная версия); `@fontsource/ibm-plex-sans` удалить.
+- `dangerouslySetInnerHTML`/`innerHTML` не появляются; иконки — React-SVG.
+- Подписи и комментарии — русские; коммиты заканчиваются строкой `Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>`.
+- Зелёным считается только весь набор: `make check` и `cd web && npm run e2e`.
+
+## Review Focus
+
+1. Пакет обновления, начатый на доске, при уходе на «Задачи» и обратно: один опрос, кнопка остаётся недоступной, по
+   завершении список и доска перечитаны (тест в Task 4 «переход между страницами во время пакета»).
+2. Доска в режиме «из файла» в момент завершения пакета: файл остаётся (тест в Task 4, перенос M-1).
+3. Тёмная тема в окне карточки, меню и выпадающих списках: родной `<dialog>` и `<select>` без `color-scheme` рисуются
+   светлыми (тест в Task 1: `color-scheme: dark` в тёмных блоках `tokens.css`; скриншоты Task 11).
+4. Смена шрифта и сохранённые размеры карточек: текст не вылезает за карточку, высота по содержимому считается тем же
+   слоем `.measure` (e2e «растяжка за уголок и возврат размера» в Task 7 остаётся зелёным).
+5. Список с выбранными фильтрами, открытый по адресу в новой вкладке: панель «Фильтры» свёрнута, но плашки и счётчик
+   видны (тест в Task 8 «Фильтр в адресе»).
+
+---
+
+### Task 1: Токены, шрифт, проверка цветов
+
+**Files:**
+- Create: `web/src/styles/tokens.css`, `web/src/styles/tokens.test.ts`
+- Modify: `web/src/styles/theme.css` (удалить файл; импорт заменить на `tokens.css` в `web/src/App.tsx`),
+  `web/src/styles/base.css`, `web/src/styles/controls.css`, `web/src/board/board.css`, `web/src/main.tsx`,
+  `web/package.json`, `web/package-lock.json`
+
+**Interfaces:**
+- Produces: CSS-переменные для всех задач. Семантические (обе темы): `--color-bg-canvas`, `--color-bg-surface`,
+  `--color-bg-subtle`, `--color-bg-selected` (`#f4faf5` / `#272727` — фон выбранного), `--color-bg-hover`
+  (`#f2f2f0` / `#272727`), `--color-bg-track` (трек сегмента, `#eeeeeb` / `#272727`), `--color-text-primary`,
+  `--color-text-secondary`, `--color-text-placeholder`, `--color-text-disabled`, `--color-text-on-primary`,
+  `--color-border-default`, `--color-border-strong`, `--color-border-selected`, `--color-action-primary`,
+  `--color-action-primary-hover`, `--color-action-danger`, `--color-action-danger-hover`, `--color-status-success`,
+  `--color-status-success-bg`, `--color-status-error`, `--color-status-error-bg`, `--color-status-warning`,
+  `--color-status-warning-bg`, `--color-status-warning-border`, `--color-focus-ring`, `--color-overlay`
+  (`rgb(0 0 0 / 45%)`), `--shadow-popover`, `--shadow-dialog`. Шкалы: `--space-1…8` (4…32), `--radius-xs/sm/md/lg/xl/2xl/round`
+  (4/8/10/12/16/20/999), `--font-ui` (`"Mulish", system-ui, -apple-system, "Segoe UI", sans-serif`), `--font-mono`,
+  `--fs-caption` 12, `--fs-body` 14, `--fs-lg` 16, `--fs-section` 20, `--lh-caption` 16, `--lh-body` 20, `--lh-lg` 24,
+  `--lh-section` 28, `--control-h` 32, `--control-h-lg` 40, `--control-radius` 10, `--motion` `180ms ease`.
+  Токены доски: `--k-decision`, `--k-analytics`, `--k-dev`, `--k-ui`, `--k-test`, `--k-org`, `--p-crit`, `--p-high`,
+  `--p-mid`, `--p-low`, `--edge`, `--edge-strong` (= действие), `--guide` (оранжевый, прежний), `--lane-alt`.
+  Псевдонимы на переход (удаляются в Task 10): `--bg`→canvas, `--fg`→text-primary, `--muted`→text-secondary,
+  `--line`→border-default, `--card`→surface, `--panel`→surface, `--soft`→bg-hover, `--accent`→action-primary,
+  `--accent-fg`→text-on-primary.
+- Тёмная тема — те же три блока, что сейчас в `theme.css`: `@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){…} }`
+  и `:root[data-theme="dark"]{…}`; в обоих `color-scheme: dark`, в светлом `:root` — `color-scheme: light`.
+
+- [ ] **Step 1: Тест `tokens.test.ts`** (Vitest, node `fs`): (а) «вне tokens.css нет литералов цвета» — обходит все
+  `web/src/**/*.css`, кроме `styles/tokens.css`, ищет `/#[0-9a-fA-F]{3,8}\b|\b(rgb|rgba|hsl|hsla)\(|:\s*(white|black|red|…)\b/`
+  (именованные — список CSS-цветов из 10–15 самых частых достаточно: white, black, red, green, blue, gray, grey,
+  orange, yellow, purple) вне комментариев; падение перечисляет `файл: литерал`. (б) «обе темы задают одни имена» —
+  множество `--color-*` в светлом `:root` равно множеству в `:root[data-theme="dark"]` и в медиа-блоке. (в) тёмные
+  блоки содержат `color-scheme: dark`.
+- [ ] **Step 2:** `cd web && npx vitest run src/styles/tokens.test.ts` — FAIL (нет файла, литералы в `controls.css`,
+  `board.css`).
+- [ ] **Step 3:** написать `tokens.css` по Interfaces и design.md «Context»; палитру `--k-*` подобрать под тёплую канву
+  (светлая — насыщенность и светлота как у нынешних, различимы с `#568d32`; тёмная — светлее); перенести литералы
+  `controls.css` (`#fff`, `rgba(0,0,0,.18)`) и `board.css` (`rgba(0,0,0,.18)`) в токены (`--color-text-on-primary`,
+  `--shadow-popover`); удалить `theme.css`, импорт `./styles/tokens.css` в `App.tsx` первым.
+- [ ] **Step 4:** шрифт: `npm install --save-exact @fontsource/mulish@5.3.0`, `npm uninstall @fontsource/ibm-plex-sans`;
+  в `main.tsx` — `@fontsource/mulish/400.css`, `600.css`, `700.css`, `@fontsource/ibm-plex-mono/500.css`; `base.css`:
+  `body{font:var(--fs-body)/var(--lh-body) var(--font-ui);background:var(--color-bg-canvas);color:var(--color-text-primary)}`,
+  `h1{font-size:var(--fs-section);line-height:var(--lh-section);font-weight:700}`, `:focus-visible` — кольцо по
+  Global Constraints, `@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}`.
+- [ ] **Step 5:** `npx vitest run` — весь набор зелёный (старые тесты не трогали разметку); `npm run lint` — чисто.
+- [ ] **Step 6: Commit** `feat(web): токены AURA, шрифт Mulish, проверка цветов (#65)`
+
+### Task 2: Иконки и базовые компоненты
+
+**Files:**
+- Create: `web/src/ui/icons.tsx`, `web/src/ui/Button.tsx`, `web/src/ui/Segmented.tsx`, `web/src/ui/ThemeSwitch.tsx`,
+  `web/src/ui/Badge.tsx`, `web/src/ui/Notice.tsx`, `web/src/ui/Panel.tsx`, `web/src/ui/PageHeader.tsx`,
+  `web/src/ui/ui.css`, `web/src/ui/index.ts`, `web/src/ui/ui.test.tsx`
+- Modify: `web/src/shell/theme.ts`, `web/src/shell/theme.test.ts`
+
+**Interfaces:**
+- Consumes: токены Task 1.
+- Produces (все из `web/src/ui/index.ts`):
+  - `Icon` — компоненты `IconRefresh, IconUpload, IconMore, IconClose, IconChevronDown, IconSearch, IconFilter,
+    IconSun, IconMoon, IconExternal, IconWarning, IconCheck, IconError, IconInfo, IconHandoff, IconCritical,
+    IconCalendar, IconNeighbors, IconLink, IconGrid, IconReset, IconLegend, IconOpen` — `(p: {size?: 16|20}) => JSX`,
+    `<svg aria-hidden="true" width height viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">`.
+  - `Button(p: {variant?: "primary"|"secondary"|"danger"|"ghost"; size?: "md"|"lg"; icon?: ReactNode; loading?: boolean} & ButtonHTMLAttributes)`
+    — класс `ui-btn ui-btn--<variant> ui-btn--<size>`, `type="button"` по умолчанию; `loading` — крутилка вместо
+    `icon`, `disabled`, `aria-busy="true"`. `aria-pressed` пробрасывается: при `true` у `secondary` — вид «выбрано»
+    (фон `--color-bg-selected`, граница и текст `--color-action-primary`).
+  - `IconButton(p: {label: string; icon: ReactNode} & ButtonHTMLAttributes)` — 32×32, радиус 10, `aria-label={label}`, `title={label}`.
+  - `Segmented<T extends string>(p: {label: string; value: T; options: {value: T; label: string; href?: string}[]; onChange?(v: T): void})`
+    — `role="radiogroup"` + `role="radio"`/`aria-checked` для кнопок; если у вариантов есть `href` — `<nav aria-label>`
+    со ссылками `react-router` `Link` и `aria-current="page"` у активной. Трек `--color-bg-track`, радиус 999, отступ 4;
+    активный — поверхность, текст `--color-action-primary`, Semibold.
+  - `ThemeSwitch()` — `role="switch"`, `aria-checked` = тёмная, `aria-label="Тёмная тема"`; читает/пишет через `theme.ts`.
+  - `Badge(p: {tone?: "neutral"|"success"|"error"|"warning"|"info"; children})` — 20 px высота, радиус 999, 12/16 Semibold.
+  - `Chip(p: {children; onRemove(): void; removeLabel: string})` — плашка с кнопкой ✕ (`aria-label={removeLabel}`), вид «выбрано».
+  - `Notice(p: {tone: "success"|"error"|"warning"|"info"; title?: ReactNode; children?; action?: ReactNode})` —
+    `role="alert"` для error/warning, `role="status"` для прочих; иконка в круге 20 px, заголовок 14/20 Semibold,
+    текст 12/16, радиус 12, граница/фон тона.
+  - `Panel(p: {as?: "div"|"section"; padding?: "none"|"md"|"lg"} & HTMLAttributes)` — поверхность, граница, радиус 16, отступ 16/24.
+  - `PageHeader(p: {title: ReactNode; subtitle?: ReactNode; actions?: ReactNode; children?: ReactNode})` — `<h1>`,
+    подзаголовок 14/20 вторичным, действия справа (перенос на узких).
+- `theme.ts`: `THEMES`, `readTheme`, `saveTheme`, `applyTheme` прежние; новые `systemDark(): boolean`
+  (`matchMedia("(prefers-color-scheme: dark)")`, без `matchMedia` — `false`) и
+  `effectiveDark(t: Theme): boolean` (`t === "dark" || (t === "" && systemDark())`). `THEME_NAMES` удалить, если не
+  используется.
+
+- [ ] **Step 1: Тесты `ui.test.tsx`:** `Button loading` — `aria-busy="true"`, недоступна, иконка не показана;
+  `Button aria-pressed` пробрасывается; `IconButton` — доступное имя из `label`; `Segmented` кнопками — `radiogroup`,
+  щелчок вызывает `onChange("b")`, у выбранного `aria-checked="true"`; `Segmented` ссылками — внутри `MemoryRouter`,
+  активная ссылка `aria-current="page"`; `ThemeSwitch` — без `graph-theme` и с `matchMedia` → dark показывает
+  `aria-checked="true"`, щелчок → `graph-theme` = `light`, `data-theme="light"`; второй щелчок → `dark`; `Chip` —
+  кнопка «Снять фильтр Спринт» вызывает `onRemove`; `Notice tone="error"` — `role="alert"`.
+  `theme.test.ts`: `effectiveDark("")` следует `matchMedia`, `effectiveDark("light") === false`.
+- [ ] **Step 2:** `npx vitest run src/ui src/shell/theme.test.ts` — FAIL.
+- [ ] **Step 3:** реализовать компоненты и `ui.css` (только переменные из Task 1; размеры — Global Constraints;
+  `Button primary` — фон действия, текст `--color-text-on-primary`, hover — `--color-action-primary-hover`;
+  `secondary` — прозрачный фон, граница `--color-border-strong`, текст основной, hover — граница действия;
+  `danger` — фон `--color-action-danger`; `ghost` — без рамки, текст действия; `lg` — 40 px, отступ 20).
+- [ ] **Step 4:** `npx vitest run` и `npm run lint` — зелёные.
+- [ ] **Step 5: Commit** `feat(web): иконки и базовые компоненты дизайн-системы (#65)`
+
+### Task 3: Компоненты форм, окно, меню
+
+**Files:**
+- Create: `web/src/ui/Field.tsx`, `web/src/ui/inputs.tsx` (`TextInput`, `SearchInput`, `Select`, `Checkbox`,
+  `Textarea`), `web/src/ui/Dialog.tsx`, `web/src/ui/Menu.tsx`, `web/src/ui/forms.test.tsx`
+- Modify: `web/src/ui/index.ts`, `web/src/ui/ui.css`, `web/src/board/components/Dropdown.tsx` (переносится в
+  `ui/Menu.tsx` как `Dropdown`; старый файл — реэкспорт или удаление с правкой импортов `MultiSelect`, `Toolbar`)
+
+**Interfaces:**
+- Produces:
+  - `Field(p: {label: string; hint?: ReactNode; error?: ReactNode; children: ReactElement})` — `<label>` с подписью
+    14/20 Semibold над контролом, подсказка 12/16 вторичным, ошибка — цветом ошибки с `role="alert"`.
+  - `TextInput`, `Textarea` — обёртки над `<input>`/`<textarea>` с классом `ui-input` (32 px, радиус 10, отступ 12,
+    граница `--color-border-default`, hover — `--color-border-strong`, фокус — граница действия + кольцо,
+    `aria-invalid="true"` — граница ошибки); `size?: "md"|"lg"`.
+  - `SearchInput(p: {value: string; onChange(v: string): void; label: string; placeholder?: string})` — `type="search"`,
+    `aria-label={label}`, иконка поиска слева, кнопка «Очистить» (`IconClose`, видна при непустом значении).
+  - `Select(p: SelectHTMLAttributes & {size?: "md"|"lg"})` — родной `<select>` с `appearance:none` и `IconChevronDown`
+    поверх справа (`pointer-events:none`).
+  - `Checkbox(p: {label: ReactNode} & InputHTMLAttributes)` — `<label>` + `<input type="checkbox">` 16×16, радиус 4,
+    `accent-color` действия.
+  - `Dialog(p: {label: string; onClose(): void; size?: "sm"|"md"|"lg"; className?: string; children})` — родной
+    `<dialog>`, `showModal()` при монтировании, `aria-label`, `onCancel` → `preventDefault` + `onClose`; ширина
+    sm 480 / md 640 / lg 1000 px (`min(…, 100vw - 32px)`), радиус 20, фон поверхности, `::backdrop` — `--color-overlay`;
+    уже 700 px — во весь экран, как сейчас у `.issue-modal`. Закрытие по фону — ответственность использующего
+    (`IssueModal` уже это умеет).
+  - `Dropdown` — прежняя сигнатура `({button, className, children, onOpen})`, классы `dd`, `dd-menu`, `menu` сохраняются;
+    вид — поверхность, граница, радиус 12, `--shadow-popover`, пункты 32 px радиус 8.
+  - `Menu(p: {label: string; children: (close: () => void) => ReactNode; align?: "start"|"end"})` — `Dropdown` с
+    `IconButton label={label} icon={<IconMore/>}`; пункты — `MenuItem(p: {onSelect(): void; pressed?: boolean; danger?: boolean; icon?; children})`
+    (`role` не меняем: кнопки, `aria-pressed` для переключателей), `MenuSeparator()`.
+
+- [ ] **Step 1: Тесты `forms.test.tsx`:** `Field` связывает подпись с полем (`getByLabelText("Метка")`); `SearchInput`
+  — ввод вызывает `onChange`, «Очистить» → `onChange("")` и видна только при значении; `Select` — `getByRole("combobox",
+  {name})` и выбор значения; `Dialog` — открыт (`open`), Esc вызывает `onClose`; `Menu` — кнопка «Ещё» открывает
+  пункты, `MenuItem pressed` → `aria-pressed="true"`, выбор пункта вызывает `onSelect` и закрывает меню; Escape и
+  щелчок вне закрывают (как в нынешнем `Dropdown.test.tsx` — перенести его в `ui/`).
+- [ ] **Step 2:** `npx vitest run src/ui` — FAIL.
+- [ ] **Step 3:** реализовать; импорты `Dropdown` в `board/components` перевести на `../../ui`.
+- [ ] **Step 4:** `npx vitest run` и `npm run lint` — зелёные.
+- [ ] **Step 5: Commit** `feat(web): поля, выпадающие списки, окно и меню дизайн-системы (#65)`
+
+### Task 4: Обновление из Jira — в оболочку
+
+**Files:**
+- Create: `web/src/shell/refresh.ts` (хук и контекст), `web/src/shell/RefreshProvider.tsx`,
+  `web/src/shell/refreshStatus.ts`, `web/src/shell/refresh.test.tsx`
+- Modify: `web/src/board/useBoardSource.ts`, `web/src/board/status.ts`, `web/src/board/useBoardSource.test.tsx`,
+  `web/src/App.tsx` (провайдер внутри `QueryClientProvider` и `AuthGate`)
+
+**Interfaces:**
+- Produces:
+  - `refreshStatus.ts`: тип `RefreshEvent` = прежние пакетные виды `BoardStatus` (`batch`, `batch-done`,
+    `batch-failed`, `batch-cancelled`, `batch-lost`) + `{kind: "hub-down"}` + `{kind: "error"; message: string}`;
+    `refreshText(e: RefreshEvent): {text: string; tone: "info"|"success"|"error"|"warning"}` — тексты пакетных видов
+    дословно из нынешнего `statusText`; `hub-down` — «хаб не отвечает — пакет не поставлен».
+  - `refresh.ts`: `interface JiraRefresh { event: RefreshEvent | null; busy: boolean; agent: AgentView | null; start(): Promise<void>; track(batchId: number): void }`,
+    `RefreshContext`, `useJiraRefresh(): JiraRefresh` (вне провайдера — ошибка с понятным текстом).
+  - `RefreshProvider({children, pollMs = POLL_MS})` — владелец состояния: постановка (`GET /agent` → `POST /refresh
+    {full: true, author: "viewer"}`), один опрос `["batch", id]` (правила остановки — как сейчас в `useBoardSource`:
+    терминальный статус, `AuthError`/`ApiError`, `MAX_POLL_ERRORS` подряд), подхват незавершённого пакета `viewer` с
+    первой командой `refresh` при монтировании и после каждой успешной загрузки запроса с ключом `["board", …]`
+    (подписка `queryClient.getQueryCache().subscribe`, событие `updated` с `action.type === "success"`), кроме
+    перечитывания после своего пакета; `GET /agent` — `useQuery(["agent"], refetchInterval 60_000)`. Завершение:
+    `invalidateQueries` для `["board"]`, `["issues"]`, `["issue"]`, `["projects"]`; событие `batch-done` сбрасывается
+    в `null` через 10 с. `track(id)` — начать опрос известного пакета (форма «Новый проект»).
+  - `useBoardSource` после правки: `BoardSource` без `refreshing` и `refreshFromJira`; `status` — только события доски
+    (`loading`, `hub-down`, `file-error`, `json-applied`, `error`); `BoardStatus` в `board/status.ts` — без пакетных
+    видов, `statusText` — без них.
+
+- [ ] **Step 1: `refresh.test.tsx`** — перенести из `useBoardSource.test.tsx` тесты M-2 (двойное нажатие — один пакет,
+  один опрос), M-3 (подхват после загрузки снимка), M-4 (404, 5 ошибок подряд), T10.2 (4xx — `batch-lost` с detail,
+  `busy` сброшен), «пакет с ошибкой команды; агент офлайн», «уход и возврат во время пакета», T10.6 (пакет без
+  `refresh` не подхватывается), 401 на запуске (токен сброшен), запоздавший 401 — на `RefreshProvider` через
+  `renderHook(useJiraRefresh, {wrapper})`. Новые: «по завершении инвалидируются board, issues, issue, projects»
+  (шпион на `invalidateQueries` или счётчики запросов `GET /issues` и `GET /board`); «`track(9)` опрашивает пакет 9
+  без `POST /refresh`»; «`batch-done` исчезает через 10 с» (фальшивые таймеры); «переход между страницами во время
+  пакета» — провайдер смонтирован один раз, хук доски размонтирован и смонтирован снова: `POST /refresh` один раз,
+  `maxInFlight("GET /batches/7") === 1`, `busy === true` до завершения.
+- [ ] **Step 2:** в `useBoardSource.test.tsx` убрать перенесённые тесты; оставить M-1 (поздний ответ, «Перечитать»),
+  hub-down при «Перечитать», file-error, импорт JSON, T10.4 (JSON-снимок без хаба); «M-1: пакет, завершившийся при
+  показанном файле, не заменяет файл» переписать: провайдер + доска, пакет завершился — `source === "file"`.
+  «T10.4: пакет завершился при показанном CSV, хаб не ответил» остаётся тестом доски (провайдер + доска): событие
+  доски `hub-down` с `fromFile`. ««Обновить из Jira» при показанном CSV: хаб недоступен» переезжает в
+  `refresh.test.tsx`: событие оболочки `hub-down`, доска по-прежнему из файла.
+- [ ] **Step 3:** `npx vitest run src/shell/refresh.test.tsx src/board/useBoardSource.test.tsx` — FAIL.
+- [ ] **Step 4:** реализовать `refresh.ts`, `RefreshProvider.tsx`, `refreshStatus.ts`; вычистить пакетную часть из
+  `useBoardSource.ts` и `status.ts`. `Toolbar.tsx` и `BoardPage.tsx` временно берут кнопку из `useJiraRefresh()`
+  (кнопка «Обновить из Jira» пока на прежнем месте — уйдёт в Task 5), строка состояния доски — `statusText` доски или,
+  если его нет, `refreshText` пакета.
+- [ ] **Step 5:** `npx vitest run` и `npm run lint` — зелёные (тесты `BoardPage.test.tsx` про «Обновить из Jira»
+  оборачиваются в провайдер через общий `wrapper`).
+- [ ] **Step 6: Commit** `refactor(web): обновление из Jira — состояние оболочки, доска хранит только источник (#65)`
+
+### Task 5: Верхняя панель приложения
+
+**Files:**
+- Create: `web/src/shell/AppBar.tsx`, `web/src/shell/DataStatus.tsx`, `web/src/shell/AppBar.test.tsx`
+- Modify: `web/src/shell/Layout.tsx`, `web/src/shell/shell.css`, `web/src/projects/ProjectPicker.tsx`,
+  `web/src/projects/NewProjectDialog.tsx` (`onCreated(p: Project, batchId: number)`), `web/src/board/components/Toolbar.tsx`
+  (убрать «Обновить из Jira» и пункт темы), `web/src/App.test.tsx`, `web/src/projects/projects.test.tsx`,
+  `web/src/board/BoardPage.test.tsx`, `web/e2e/hub.ts` (`login` ждёт ссылку «Доска связей»), `web/e2e/*.spec.ts`
+  (подписи разделов)
+
+**Interfaces:**
+- Consumes: `useJiraRefresh` (Task 4), `Segmented`, `ThemeSwitch`, `Button`, `Menu`/`MenuItem`, `Select`, `Badge`,
+  иконки (Tasks 2–3); `useBoard(project)` для `last_sync`.
+- Produces: `AppBar({section, project}: {section: "/board"|"/issues"; project: string | null})`;
+  `DataStatus({project}: {project: string | null})` — точка агента + подпись («агент на связи» / «агент офлайн»,
+  `title` — «последний выход на связь: ДД.ММ ЧЧ:ММ»), «данные на ДД.ММ ЧЧ:ММ» (`fmtStamp(last_sync.finished_at)`) /
+  «полного обновления не было», `Button primary icon={<IconRefresh/>} loading={busy}` «Обновить из Jira», текст
+  события `refreshText` цветом тона (`role="status"`).
+- Разметка панели (design.md, решение 9): `<header class="appbar">` высота 64, поверхность, нижняя граница, отступы
+  24; «Хаб Jira» Bold 16/24; `ProjectPicker` на `Select` (метка `aria-label="Проект"`, варианты и «＋ Новый
+  проект…» — прежние); `Segmented` ссылками «Доска связей» / «Задачи» (сохраняет `?project=`); растяжка;
+  `DataStatus`; `ThemeSwitch`; `Menu label="Ещё"` с `MenuItem` «Сменить токен». Уже 1100 px — `DataStatus` второй
+  строкой (`flex-wrap`, `order`); уже 640 px — название скрыто, `Segmented` на всю ширину.
+
+- [ ] **Step 1: Тесты `AppBar.test.tsx`:** «Обновить из Jira» на `/issues` ставит `POST /refresh` и становится
+  недоступной (`aria-busy`), после `done` — «пакет #7 выполнен» и `GET /issues` запрошен повторно; агент офлайн —
+  «агент офлайн»; «данные на 14.10 12:00» из `last_sync` снимка; меню «Ещё» → «Сменить токен» показывает экран входа;
+  разделы — ссылки «Доска связей» и «Задачи», активная с `aria-current="page"`. `projects.test.tsx`: «Создание проекта
+  из формы» — верхняя панель показывает «пакет #N в очереди» без `GET /batches` списка (через `track`).
+  `App.test.tsx`/`BoardPage.test.tsx`: подписи «Доска» → «Доска связей», тест темы доски удалить (тема — в
+  `ui.test.tsx`), тест «Обновить из Jira» доски переносится сюда.
+- [ ] **Step 2:** `npx vitest run src/shell src/App.test.tsx src/projects` — FAIL.
+- [ ] **Step 3:** реализовать `AppBar`, `DataStatus`; `Layout` рисует `<AppBar>` и `<main className="page">`;
+  `NewProjectDialog` отдаёт `batch_id` из ответа, `Layout` вызывает `refresh.track(batchId)`; убрать кнопку и тему из
+  `Toolbar`.
+- [ ] **Step 4:** `npx vitest run`, `npm run lint` — зелёные; `npm run e2e` — зелёный.
+- [ ] **Step 5: Commit** `feat(web): верхняя панель — разделы, данные Jira, обновление, тема (#65)`
+
+### Task 6: Шапка и панель управления доски, легенда
+
+**Files:**
+- Create: `web/src/board/components/BoardHeader.tsx` (вместо `Toolbar.tsx`, файл удалить), `web/src/board/legendPref.ts`
+- Modify: `web/src/board/BoardPage.tsx`, `web/src/board/components/FilterBar.tsx`, `web/src/board/components/Legend.tsx`,
+  `web/src/board/components/MultiSelect.tsx`, `web/src/board/components/ProblemsDrawer.tsx`,
+  `web/src/board/components/ExportBox.tsx`, `web/src/board/components/LinkTable.tsx`, `web/src/board/board.css`,
+  `web/src/board/BoardPage.test.tsx`, `web/e2e/board.spec.ts`
+
+**Interfaces:**
+- Consumes: `PageHeader`, `Panel`, `Button`, `Badge`, `Menu`/`MenuItem`/`MenuSeparator`, `Notice`, иконки.
+- Produces: `BoardHeader(p)` — пропсы нынешнего `Toolbar` без `refreshing`/`onRefresh`; `readLegendOpen(): boolean`,
+  `saveLegendOpen(open: boolean): void` (`localStorage["jira-hub-legend"]`, `"0"` — свёрнута, ошибки хранилища
+  глотаются); `Legend({prefs, open, onToggle})`.
+- Разметка (design.md, решения 13–15): липкая шапка `.sticky` (сохранить `headRef` и `--head-h`) → `PageHeader
+  title="Доска связей"` с подзаголовком-счётчиками (тексты счётчиков — нынешние `.stats`), источник — `Badge`
+  «из файла: <имя>» + `IconButton label="Вернуться к данным хаба"` (= `onReload`), событие доски — `statusText` с тоном
+  (`role="status"`); `actions`: `Button secondary icon={<IconWarning/>} aria-pressed={problemsOpen}` «Проблемы» +
+  `Badge tone={n ? "error" : "neutral"}` со счётчиком, `Menu label="Ещё"`: «Перечитать», «Загрузить файл…» (скрытый
+  `<input type=file>` с прежним `accept`, пункт вызывает `click()`), «Экспорт JSON», «Таблица связей» (`pressed`),
+  «Привязка к сетке» (`pressed`), `MenuSeparator`, «Сбросить раскладку» (`danger`, прежнее подтверждение внутри меню).
+  Под шапкой — `Panel` `.board-controls`: `MultiSelect` спринтов и исполнителей (кнопка — вид `Select`, подпись
+  прежняя), разделитель, группа «Показать» (подпись 12/16 вторичным + кнопки `Button secondary aria-pressed`
+  «Соседи по связям» `IconNeighbors`, «Только передачи» `IconHandoff`, «Скрыть без связей» `IconLink`), группа «Режим»
+  («Критический путь» `IconCritical`, «По датам» `IconCalendar`); `title` — нынешние. Легенда: `Button ghost
+  icon={<IconLegend/>} aria-expanded` «Легенда» + `Badge` «скрыто: N» (N = `hideKind.size + hideEdge.size`, только при
+  N > 0) и под ней пункты (прежняя логика). Ящик «Проблемы», экспорт, таблица связей — в `Panel`, заголовки 16/24
+  Semibold, ключи моно цветом действия.
+
+- [ ] **Step 1: Тесты `BoardPage.test.tsx`:** обновить подписи (кнопки режимов — «Соседи по связям», «Только
+  передачи», «Скрыть без связей», «Критический путь», «По датам»; ключи `graph-*` в хранилище — прежние); меню «Ещё» →
+  «Сбросить раскладку» с подтверждением; «Загрузить файл…» загружает CSV — `Badge` «из файла: jira-export.csv», кнопка
+  «Вернуться к данным хаба» возвращает хаб; «Проблемы» — `aria-pressed` и счётчик; новый «Свёрнутая легенда» (спека):
+  скрыт «тестирование», «Легенда» свёрнута → после перемонтирования свёрнута, «скрыто: 1», `jira-hub-legend` = `"0"`;
+  на доске нет «Обновить из Jira» и пункта темы.
+- [ ] **Step 2:** `npx vitest run src/board/BoardPage.test.tsx` — FAIL.
+- [ ] **Step 3:** реализовать; `e2e/board.spec.ts` — `"▥ по датам"` → `"По датам"` и прочие подписи.
+- [ ] **Step 4:** `npx vitest run`, `npm run lint`, `npm run e2e` — зелёные.
+- [ ] **Step 5: Commit** `feat(web): шапка доски, панель управления по группам, сворачиваемая легенда (#65)`
+
+### Task 7: Полотно доски в стиле системы
+
+**Files:**
+- Modify: `web/src/board/board.css` (разделы 6–9: полотно, дорожки, полоса дат, прокрутка, карточки, ящик),
+  `web/src/board/components/Card.tsx` (значок «Открыть карточку» → `IconOpen` 16, `aria-label` прежний),
+  `web/src/board/components/Lane.tsx` (кнопки дорожки — иконки, подписи прежние)
+
+**Interfaces:**
+- Consumes: токены доски Task 1, иконки Task 2.
+- Вид (design.md, решение 16): `.wrap` — поверхность, граница, радиус 16; дорожки — чередование `--lane-alt`, подпись
+  дорожки 12/16 Semibold вторичным (без `text-transform`); карточка — радиус 12, отступ 12, граница
+  `--color-border-default`, hover — `--color-border-strong`; ключ — моно 13 px Semibold цветом действия; статус —
+  вид `Badge`; `.card.crit` — кольцо `--guide`; ручки и уголок — цвет действия; полоса дат — поверхность, подписи
+  12/16 Semibold; `.hscroll` — бегунок `--color-border-strong`, hover — действие. Размеры карточек (`CW`, высоты,
+  `.measure`) и классы, на которые опираются тесты (`card`, `grip`, `rsz`, `dcol`, `dlabel`, `closed`, `out`) — прежние.
+
+- [ ] **Step 1:** `npx vitest run src/board` — зелёный до правок (точка отсчёта).
+- [ ] **Step 2:** переписать стили и иконки.
+- [ ] **Step 3:** `npx vitest run`, `npm run lint`, `npm run e2e` (перетаскивание, растяжка, «по датам», приглушение
+  закрытых) — зелёные; `src/styles/tokens.test.ts` — зелёный.
+- [ ] **Step 4: Commit** `style(web): полотно доски — карточки, дорожки, даты в стиле системы (#65)`
+
+### Task 8: Список задач
+
+**Files:**
+- Create: `web/src/issues/IssueFilters.tsx`, `web/src/issues/IssueTable.tsx`
+- Modify: `web/src/issues/IssuesPage.tsx`, `web/src/issues/issues.css`, `web/src/issues/IssuesPage.test.tsx`,
+  `web/e2e/issues.spec.ts`
+
+**Interfaces:**
+- Consumes: `PageHeader`, `Panel`, `SearchInput`, `Segmented`, `Button`, `Badge`, `Chip`, `Field`, `Select`,
+  `Notice`, `IssueLink`, `isClosed`, `dueOf`, `withCurrent`, `filterOptions`, `epicNames`, `isOverdue`/`todayISO`
+  (`issues/card.ts`).
+- Produces: `IssueFilters({filters, set, q, setQ, showClosed, opts, hasBoard})` — вся панель фильтров;
+  `IssueTable({rows, epicNames, closed, onOpen})`, где `onOpen(key)` — тот же переход, что `IssueLink`
+  (вынести из `IssueLink.tsx` хук `useOpenIssue(): (key: string) => void`, `IssueLink` пользуется им же).
+- Разметка (design.md, решения 17–18): `PageHeader title="Задачи" subtitle="показано N"` (+ « · есть ещё» при
+  `hasNextPage`); `Panel` фильтров: `SearchInput label="Поиск по ключу или теме" placeholder="Ключ или тема"`,
+  `Segmented label="Закрытые задачи"` «Открытые» / «Все» (`closed=1`), `Button secondary aria-pressed` «Только
+  соседи» (`neighbor=1`), `Button secondary icon={<IconFilter/>} aria-expanded` «Фильтры» + `Badge` с числом выбранных
+  из шести; строка плашек: `Chip` «<подпись>: <значение>» (`removeLabel="Снять фильтр <подпись>"`) для каждого
+  выбранного, `Button ghost` «Сбросить»; раскрытая панель — сетка 3 колонки (2 уже 900 px, 1 уже 640 px) из `Field` +
+  `Select` (`aria-label` прежний — подпись, варианты и «(нет на доске)» прежние). Раскрыта ли —
+  `sessionStorage["jira-hub-issue-filters"]` (`"1"`), по умолчанию свёрнута. Таблица — `Panel padding="none"`, шапка
+  липкая, колонки в порядке спеки; ключ + `Badge` «сосед»; статус — `Badge`; срок просроченной незакрытой задачи —
+  класс `overdue` (цвет ошибки) по `isOverdue(due, status, closed, todayISO())`; строка — `onClick`: если
+  `window.getSelection()?.toString()` пусто и цель не внутри `a, button` → `onOpen(key)`; `cursor:pointer`, hover —
+  `--color-bg-hover`. «Показать ещё» — `Button secondary` по центру; пусто — `Notice tone="info"` «По этим фильтрам
+  задач нет»; ошибка — `Notice tone="error"` с `action` «Повторить».
+
+- [ ] **Step 1: Тесты `IssuesPage.test.tsx`:** прежние сценарии на новых ролях («Открытые»/«Все» — `radio`, адрес
+  `closed=1`, запрос с/без `hide_closed=1`; выбранный закрытый статус); «Фильтр в адресе» (спека): адрес со
+  `sprint=` и `assignee=` → кнопка «Фильтры» со счётчиком 2, плашки «Спринт: AWPCA_Спринт 2» и «Исполнитель: …»,
+  панель свёрнута; «Снять фильтр плашкой» (спека); «Сбросить» снимает шесть списков, `q` и `neighbor` остаются;
+  «Щелчок по строке» (спека) — щелчок по ячейке темы → адрес `/issues/AURORA-…`; выделенный текст в строке — без
+  перехода; «просрочено» — класс `overdue` у срока незакрытой задачи с прошедшим сроком, у закрытой нет.
+- [ ] **Step 2:** `npx vitest run src/issues/IssuesPage.test.tsx` — FAIL.
+- [ ] **Step 3:** реализовать; `e2e/issues.spec.ts` — новые подписи.
+- [ ] **Step 4:** `npx vitest run`, `npm run lint`, `npm run e2e` — зелёные.
+- [ ] **Step 5: Commit** `feat(web): список задач — поиск на виду, фильтры панелью с плашками, строка открывает карточку (#65)`
+
+### Task 9: Карточка задачи и заметки
+
+**Files:**
+- Modify: `web/src/issues/IssueModal.tsx` (на `Dialog size="lg"`, поведение закрытия — прежнее),
+  `web/src/issues/IssueCard.tsx`, `web/src/issues/Notes.tsx`, `web/src/issues/NoteForm.tsx`,
+  `web/src/issues/issues.css`, `web/src/issues/IssueCard.test.tsx`, `web/src/issues/IssueModal.test.tsx`
+
+**Interfaces:**
+- Consumes: `Dialog`, `Button`, `IconButton`, `Badge`, `Panel`, `Field`, `Select`, `Textarea`, `Notice`, иконки.
+- Вид (design.md, решение 19): шапка — ключ моно 13 px вторичным, `Badge` статуса, справа `Button secondary
+  icon={<IconExternal/>}` «Открыть в Jira» (ссылка `<a>` с видом кнопки — класс `ui-btn ui-btn--secondary`) и
+  `IconButton label="Закрыть"`; тема `<h2>` 20/28 Bold; факты 14/20 вторичным, «просрочено» — `Badge tone="error"`;
+  заголовки разделов `<h3>` 16/24 Semibold без верхнего регистра; кнопки «исходник»/«текст», «развернуть», «Скрыть»/
+  «Показать» — `Button ghost` 32 px; правая колонка — `Panel` с фоном `--color-bg-subtle`; форма заметок — `Field` +
+  `Select`/`Textarea`, «Сохранить» `primary`, «Отмена» `secondary`, «Править» `secondary`, ошибка — `Notice error`.
+  Содержание, порядок, роли и тексты, на которые опираются тесты (`data-testid`, «исходник», «Скрыть», «Править»,
+  «Сохранить»), — прежние; «Открыть в Jira ↗» → «Открыть в Jira» (иконка вместо стрелки).
+
+- [ ] **Step 1:** обновить в тестах только изменившиеся подписи («Открыть в Jira»); `npx vitest run src/issues` — FAIL
+  там, где подпись изменилась.
+- [ ] **Step 2:** переписать разметку и стили.
+- [ ] **Step 3:** `npx vitest run`, `npm run lint`, `npm run e2e` — зелёные.
+- [ ] **Step 4: Commit** `style(web): карточка задачи и служебные заметки в стиле системы (#65)`
+
+### Task 10: Вход, «Новый проект», служебные экраны, уборка старых стилей
+
+**Files:**
+- Modify: `web/src/auth/LoginScreen.tsx`, `web/src/projects/NewProjectDialog.tsx`, `web/src/projects/ProjectGate.tsx`,
+  `web/src/projects/projects.css`, `web/src/shell/NotFound.tsx`, `web/src/shell/ErrorBoundary.tsx`,
+  `web/src/styles/base.css`, `web/src/styles/controls.css` (удалить, если всё перенесено в `ui/ui.css`),
+  `web/src/styles/tokens.css` (удалить псевдонимы `--bg`, `--fg`, `--muted`, `--line`, `--card`, `--panel`, `--soft`,
+  `--accent`, `--accent-fg`), все `*.css`, где они остались, `web/src/auth/LoginScreen.test.tsx`,
+  `web/src/projects/projects.test.tsx`, `web/src/App.test.tsx`, `ARCHITECTURE.md`
+
+**Interfaces:**
+- Вид (design.md, решение 20): вход — `Panel` 480 px по центру, `<h2>` «Вход в хаб» 20/28, пояснение, `Field
+  label="Клиентский токен хаба"` + `TextInput size="lg"`, `Button primary size="lg"` «Войти», ошибка — `Notice
+  error`; «Новый проект» — `Dialog size="sm" label="Новый проект"`, поля через `Field`, «Создать» `primary`, «Отмена»
+  `secondary`, ошибка хаба — `Notice error` у кнопок; `ProjectGate` — `Notice` («проект X не найден» — warning с
+  подсказкой; «Проектов нет» — info с `Button primary` «＋ Новый проект…»; ошибка — error); «не найдено» и ошибка
+  отрисовки — `Notice` в контейнере, ссылки «Доска связей», «Задачи» / `Button` «Перезагрузить». Классы `.btn`,
+  `.link`, `.dd-*` из `controls.css` больше нигде не используются (поиск `className="btn` и `"link"` пуст).
+- `ARCHITECTURE.md`, абзац `web/`: токены `web/src/styles/tokens.css`, компоненты `web/src/ui/`, обновление из Jira —
+  `web/src/shell/refresh.ts` (провайдер в `App.tsx`), доска — только источник и события снимка.
+
+- [ ] **Step 1:** обновить подписи в тестах (роли и тексты входа, «Новый проект», «не найдено» — прежние, кроме
+  ссылок разделов); `npx vitest run` — FAIL там, где изменилось.
+- [ ] **Step 2:** переписать экраны; удалить псевдонимы и `controls.css`; заменить оставшиеся `var(--bg)` и прочие
+  на семантические имена.
+- [ ] **Step 3:** `grep -rn "var(--\(bg\|fg\|muted\|line\|card\|panel\|soft\|accent\|accent-fg\))" web/src` — пусто;
+  `npx vitest run`, `npm run lint`, `npm run e2e`, `make check` — зелёные.
+- [ ] **Step 4: Commit** `style(web): вход, новый проект, служебные экраны; старые стили убраны (#65)`
+
+### Task 11: Скриншоты и итоговая проверка
+
+**Files:**
+- Create: `web/e2e/screens.spec.ts`
+- Modify: `.gitignore` (каталог `web/e2e-screens/`), `web/playwright.config.ts` (если нужен проект для `SCREENS=1`)
+
+**Interfaces:**
+- `screens.spec.ts`: весь файл — `test.skip(!process.env.SCREENS)`; для тем `light` и `dark` (через
+  `localStorage["graph-theme"]` до загрузки) и вьюпортов 1920×1080 и 390×844 снимает `fullPage` в
+  `web/e2e-screens/<тема>-<ширина>-<экран>.png`: `login`, `board`, `board-bydate` (режим «По датам»),
+  `board-problems` (ящик открыт), `issues`, `issues-filters` (панель раскрыта, один фильтр выбран), `card`
+  (`/app/issues/AURORA-9001` поверх списка), `new-project` (окно открыто), `refresh` (пакет в очереди — без агента).
+
+- [ ] **Step 1:** написать спецификацию; `cd web && SCREENS=1 npx playwright test e2e/screens.spec.ts` — 36 файлов
+  в `web/e2e-screens/`.
+- [ ] **Step 2:** просмотреть снимки (Read по файлам): нет наложений, обрезанных рамок и текста у границ, тёмная тема
+  без светлых пятен (окно, меню, `<select>`), узкий экран без горизонтальной прокрутки страницы (кроме полотна
+  доски); найденное — исправить в стилях соответствующей задачи и переснять.
+- [ ] **Step 3:** `make check` и `cd web && npm run e2e` — зелёные; `git status` — снимков в индексе нет.
+- [ ] **Step 4: Commit** `test(web): скрипт скриншотов экранов для проверки вида (#65)`
-- 
2.47.2


From b5a015b827d608b6c7b54337f9af8c86d30b77f9 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:01:03 +0400
Subject: [PATCH 03/23] =?UTF-8?q?feat(web):=20=D1=82=D0=BE=D0=BA=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20AURA,=20=D1=88=D1=80=D0=B8=D1=84=D1=82=20Mulish,?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BA=D0=B0=20=D1=86?=
 =?UTF-8?q?=D0=B2=D0=B5=D1=82=D0=BE=D0=B2=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/package-lock.json         |   8 +-
 web/package.json              |   2 +-
 web/src/App.tsx               |   2 +-
 web/src/board/board.css       |   2 +-
 web/src/issues/issues.css     |   2 +-
 web/src/main.tsx              |   6 +-
 web/src/projects/projects.css |   2 +-
 web/src/styles/base.css       |   6 +-
 web/src/styles/controls.css   |   4 +-
 web/src/styles/theme.css      |  19 -----
 web/src/styles/tokens.css     | 156 ++++++++++++++++++++++++++++++++++
 web/src/styles/tokens.test.ts |  65 ++++++++++++++
 12 files changed, 239 insertions(+), 35 deletions(-)
 delete mode 100644 web/src/styles/theme.css
 create mode 100644 web/src/styles/tokens.css
 create mode 100644 web/src/styles/tokens.test.ts

diff --git a/web/package-lock.json b/web/package-lock.json
index 30ac58f..ca9ca9d 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -7,7 +7,7 @@
       "name": "jira-hub-web",
       "dependencies": {
         "@fontsource/ibm-plex-mono": "5.3.0",
-        "@fontsource/ibm-plex-sans": "5.3.0",
+        "@fontsource/mulish": "5.3.0",
         "@tanstack/react-query": "5.104.0",
         "react": "19.3.0",
         "react-dom": "19.3.0",
@@ -674,10 +674,10 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/ibm-plex-sans": {
+    "node_modules/@fontsource/mulish": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans/-/ibm-plex-sans-5.3.0.tgz",
-      "integrity": "sha512-CbE4CbbEEZJX860XyUiRpsksXIQR8Rp2XDva2VO53NJox9tVNtusrysd2x5YkUEY3ErQ66W1IiiQL8/wihhw5w==",
+      "resolved": "https://registry.npmjs.org/@fontsource/mulish/-/mulish-5.3.0.tgz",
+      "integrity": "sha512-Fru/fmJwg4ZlKUU4jELz6/guZhba6Lz1vraAROqooYnUbtj1iMi7BXFkQU7AkB6QP5swpvwRnO5chUp6mNh5mA==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
diff --git a/web/package.json b/web/package.json
index 5927f5e..6239a5d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@fontsource/ibm-plex-mono": "5.3.0",
-    "@fontsource/ibm-plex-sans": "5.3.0",
+    "@fontsource/mulish": "5.3.0",
     "@tanstack/react-query": "5.104.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 02634e5..c5c022c 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -4,7 +4,7 @@ import { createBrowserRouter, RouterProvider } from "react-router";
 import { makeQueryClient } from "./api/queryClient.ts";
 import { AuthGate } from "./auth/AuthGate.tsx";
 import { routes } from "./routes.tsx";
-import "./styles/theme.css";
+import "./styles/tokens.css";
 import "./styles/base.css";
 import "./styles/controls.css";
 
diff --git a/web/src/board/board.css b/web/src/board/board.css
index d67ec3a..e8fa494 100644
--- a/web/src/board/board.css
+++ b/web/src/board/board.css
@@ -95,7 +95,7 @@ svg.guides line{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
 .edges path.closed{opacity:.4}
 .card.crit{box-shadow:0 0 0 2px var(--guide)}
 .card.focus{box-shadow:0 0 0 2px var(--accent)}
-.card.drag{cursor:grabbing;border-color:var(--accent);box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:2}
+.card.drag{cursor:grabbing;border-color:var(--accent);box-shadow:var(--shadow-popover);z-index:2}
 .card .title,.card .state,.card .who,.card .meta,.card .key,.card .sprint-tag{user-select:text;-webkit-user-select:text;cursor:text;touch-action:auto}
 .card .key{cursor:pointer}
 .card .meta{cursor:default}
diff --git a/web/src/issues/issues.css b/web/src/issues/issues.css
index b2ed1d2..d334333 100644
--- a/web/src/issues/issues.css
+++ b/web/src/issues/issues.css
@@ -63,6 +63,6 @@
 
 /* окно карточки задачи (design 13) */
 .issue-modal{width:min(1000px,calc(100vw - 32px));max-width:none;max-height:90vh;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);overflow:auto}
-.issue-modal::backdrop{background:rgb(0 0 0 / .45)}
+.issue-modal::backdrop{background:var(--color-overlay)}
 .issue-modal > .issue{padding:0 20px 20px}
 @media (max-width:700px){.issue-modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;border-radius:0}}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 16cb33f..8a7a891 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -1,9 +1,9 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 // шрифты входят в сборку: приложение не ходит в интернет (T2.2)
-import "@fontsource/ibm-plex-sans/400.css";
-import "@fontsource/ibm-plex-sans/500.css";
-import "@fontsource/ibm-plex-sans/600.css";
+import "@fontsource/mulish/400.css";
+import "@fontsource/mulish/600.css";
+import "@fontsource/mulish/700.css";
 import "@fontsource/ibm-plex-mono/500.css";
 import { App } from "./App.tsx";
 import { applyTheme, readTheme } from "./shell/theme.ts";
diff --git a/web/src/projects/projects.css b/web/src/projects/projects.css
index 54c61a5..579aa30 100644
--- a/web/src/projects/projects.css
+++ b/web/src/projects/projects.css
@@ -2,7 +2,7 @@
 .appbar .project-picker{font:inherit;font-size:14px;height:30px;max-width:280px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);padding:0 8px}
 .project-gate{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin:24px 0}
 .project-dialog{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);padding:16px 20px;min-width:340px}
-.project-dialog::backdrop{background:rgba(0,0,0,.4)}
+.project-dialog::backdrop{background:var(--color-overlay)}
 .project-dialog form{display:flex;flex-direction:column;gap:10px}
 .project-dialog h2{margin:0 0 4px;font-size:18px}
 .project-dialog label{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
diff --git a/web/src/styles/base.css b/web/src/styles/base.css
index c9878e9..9b5edde 100644
--- a/web/src/styles/base.css
+++ b/web/src/styles/base.css
@@ -1,7 +1,7 @@
 /* 2. Основа */
 html,body{min-height:100%}
-body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.45;margin:0}
-h1{font-size:20px;font-weight:600;margin:0}
+body{font:var(--fs-body)/var(--lh-body) var(--font-ui);background:var(--color-bg-canvas);color:var(--color-text-primary);margin:0}
+h1{font-size:var(--fs-section);line-height:var(--lh-section);font-weight:700;margin:0}
 [hidden]{display:none!important}
 .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .spacer{flex:1 1 auto}
@@ -9,3 +9,5 @@ h1{font-size:20px;font-weight:600;margin:0}
 .warn{color:var(--p-high)}
 .page{padding-inline:16px;padding-block:0 32px}
 .login{max-width:560px;margin:48px auto}.login form{display:flex;gap:8px}.login input{flex:1;font:inherit;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}.login .err{color:var(--p-crit)}
+:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
+@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
diff --git a/web/src/styles/controls.css b/web/src/styles/controls.css
index fe53af7..9240509 100644
--- a/web/src/styles/controls.css
+++ b/web/src/styles/controls.css
@@ -14,7 +14,7 @@
 .dd-btn{max-width:360px;gap:8px;justify-content:space-between}
 .dd-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .dd-btn .car{font-size:10px;opacity:.7}
-.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:280px;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:8px;display:flex;flex-direction:column;gap:6px}
+.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:280px;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-popover);padding:8px;display:flex;flex-direction:column;gap:6px}
 .dd-menu input[type=search]{font:inherit;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 8px;width:100%;box-sizing:border-box}
 .dd-menu input[type=search]:focus-visible{border-color:var(--accent);outline:none}
 .dd-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}
@@ -38,5 +38,5 @@
 .confirm{display:flex;flex-direction:column;gap:6px;padding:6px 10px;font-size:14px}
 .confirm .row{flex-wrap:nowrap}
 .confirm .btn{height:28px;padding:0 10px;width:auto;flex:1 1 0}
-.confirm .btn.yes{background:var(--p-crit);color:#fff;border-color:var(--p-crit)}
+.confirm .btn.yes{background:var(--p-crit);color:var(--color-text-on-primary);border-color:var(--p-crit)}
 
diff --git a/web/src/styles/theme.css b/web/src/styles/theme.css
deleted file mode 100644
index a2044ca..0000000
--- a/web/src/styles/theme.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/* 1. Цвета и темы: светлая по умолчанию, тёмная по системе или по выбору в меню */
-:root{
-  --bg:#f3f4f1; --fg:#1f2321; --muted:#6b7069; --line:#d6d8d0; --card:#ffffff; --panel:#ffffff; --soft:#eaece6;
-  --accent:#1f6f8b; --accent-fg:#ffffff; --edge:#9a9f97; --edge-strong:#1f6f8b; --guide:#c2410c;
-  --k-decision:#b4542a; --k-analytics:#8a6d1f; --k-dev:#1f6f8b; --k-ui:#5b4b9a; --k-test:#2f7d4f; --k-org:#6b7069;
-  --p-crit:#b23a3a; --p-high:#c7772a; --p-mid:#6b7069; --p-low:#9a9f97;
-  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
-  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
-}
-@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
-  --bg:#151817; --fg:#e8e6df; --muted:#9a9f97; --line:#303532; --card:#1f2422; --panel:#1b201e; --soft:#252a28;
-  --accent:#6fb3cc; --accent-fg:#101413; --edge:#6c726b; --edge-strong:#6fb3cc; --guide:#f08a5a;
-  --k-decision:#e08a5a; --k-analytics:#d4b35a; --k-dev:#6fb3cc; --k-ui:#a493d8; --k-test:#6cc08f; --k-org:#9a9f97;
-  --p-crit:#e36b6b; --p-high:#e3a059; --p-mid:#9a9f97; --p-low:#6c726b; color-scheme:dark }}
-:root[data-theme="dark"]{
-  --bg:#151817; --fg:#e8e6df; --muted:#9a9f97; --line:#303532; --card:#1f2422; --panel:#1b201e; --soft:#252a28;
-  --accent:#6fb3cc; --accent-fg:#101413; --edge:#6c726b; --edge-strong:#6fb3cc; --guide:#f08a5a;
-  --k-decision:#e08a5a; --k-analytics:#d4b35a; --k-dev:#6fb3cc; --k-ui:#a493d8; --k-test:#6cc08f; --k-org:#9a9f97;
-  --p-crit:#e36b6b; --p-high:#e3a059; --p-mid:#9a9f97; --p-low:#6c726b; color-scheme:dark }
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
new file mode 100644
index 0000000..dc10dcd
--- /dev/null
+++ b/web/src/styles/tokens.css
@@ -0,0 +1,156 @@
+/* Токены AURA: единственное место с литералами цвета (проверяет tokens.test.ts).
+   Светлая тема по умолчанию, тёмная — по системе или по выбору в меню. */
+:root {
+  color-scheme: light;
+  --color-bg-canvas: #f8f8f6;
+  --color-bg-surface: #fdfdfc;
+  --color-bg-subtle: #fafaf8;
+  --color-bg-selected: #f4faf5;
+  --color-bg-hover: #f2f2f0;
+  --color-bg-track: #eeeeeb;
+  --color-text-primary: #17171a;
+  --color-text-secondary: #818190;
+  --color-text-placeholder: #5c6260;
+  --color-text-disabled: #737d76;
+  --color-text-on-primary: #ffffff;
+  --color-border-default: #e5e5e0;
+  --color-border-strong: #cfcfc8;
+  --color-border-selected: #568d32;
+  --color-action-primary: #568d32;
+  --color-action-primary-hover: #477729;
+  --color-action-danger: #b42318;
+  --color-action-danger-hover: #8e1b13;
+  --color-status-success: #568d32;
+  --color-status-success-bg: #f4faf5;
+  --color-status-error: #b42318;
+  --color-status-error-bg: #fff1f0;
+  --color-status-warning: #d89614;
+  --color-status-warning-bg: #fffbe6;
+  --color-status-warning-border: #ffe58f;
+  --color-focus-ring: rgb(42 122 70 / 35%);
+  --color-overlay: rgb(0 0 0 / 45%);
+  --shadow-popover: 0 10px 28px rgb(0 0 0 / 18%);
+  --shadow-dialog: 0 24px 72px rgb(28 47 36 / 12%);
+  --k-decision: #b4542a;
+  --k-analytics: #8a6d1f;
+  --k-dev: #1f6f8b;
+  --k-ui: #5b4b9a;
+  --k-test: #a63d78;
+  --k-org: #7a766e;
+  --p-crit: #b42318;
+  --p-high: #c7772a;
+  --p-mid: #7a766e;
+  --p-low: #a3a39b;
+  --edge: #a3a39b;
+  --guide: #c2410c;
+  --lane-alt: #f1f1ee;
+  --edge-strong: var(--color-action-primary);
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
+  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
+  --radius-xl: 16px; --radius-2xl: 20px; --radius-round: 999px;
+  --font-ui: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --fs-caption: 12px; --fs-body: 14px; --fs-lg: 16px; --fs-section: 20px;
+  --lh-caption: 16px; --lh-body: 20px; --lh-lg: 24px; --lh-section: 28px;
+  --control-h: 32px; --control-h-lg: 40px; --control-radius: 10px;
+  --motion: 180ms ease;
+  /* Псевдонимы на переход: удаляются в Task 10 */
+  --bg: var(--color-bg-canvas); --fg: var(--color-text-primary); --muted: var(--color-text-secondary);
+  --line: var(--color-border-default); --card: var(--color-bg-surface); --panel: var(--color-bg-surface);
+  --soft: var(--color-bg-hover); --accent: var(--color-action-primary); --accent-fg: var(--color-text-on-primary);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --color-bg-canvas: #181818;
+    --color-bg-surface: #1f1f1f;
+    --color-bg-subtle: #272727;
+    --color-bg-selected: #272727;
+    --color-bg-hover: #272727;
+    --color-bg-track: #272727;
+    --color-text-primary: #f2f4f2;
+    --color-text-secondary: #d6dcd7;
+    --color-text-placeholder: #aab2ac;
+    --color-text-disabled: #aab2ac;
+    --color-text-on-primary: #112016;
+    --color-border-default: rgb(232 238 233 / 10%);
+    --color-border-strong: rgb(232 238 233 / 17%);
+    --color-border-selected: #69a93d;
+    --color-action-primary: #69a93d;
+    --color-action-primary-hover: #83c657;
+    --color-action-danger: #ffaea5;
+    --color-action-danger-hover: #ffcbc5;
+    --color-status-success: #69a93d;
+    --color-status-success-bg: #272727;
+    --color-status-error: #e26c67;
+    --color-status-error-bg: #402725;
+    --color-status-warning: #e8c17a;
+    --color-status-warning-bg: #382f20;
+    --color-status-warning-border: #8a6d1d;
+    --color-focus-ring: rgb(116 184 255 / 55%);
+    --color-overlay: rgb(0 0 0 / 45%);
+    --shadow-popover: 0 10px 28px rgb(0 0 0 / 55%);
+    --shadow-dialog: 0 24px 72px rgb(0 0 0 / 60%);
+    --k-decision: #e08a5a;
+    --k-analytics: #d4b35a;
+    --k-dev: #6fb3cc;
+    --k-ui: #a493d8;
+    --k-test: #e07fb0;
+    --k-org: #aab2ac;
+    --p-crit: #e26c67;
+    --p-high: #e3a059;
+    --p-mid: #aab2ac;
+    --p-low: #6c726b;
+    --edge: #6c726b;
+    --guide: #f08a5a;
+    --lane-alt: #212121;
+    --edge-strong: var(--color-action-primary);
+  }
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --color-bg-canvas: #181818;
+  --color-bg-surface: #1f1f1f;
+  --color-bg-subtle: #272727;
+  --color-bg-selected: #272727;
+  --color-bg-hover: #272727;
+  --color-bg-track: #272727;
+  --color-text-primary: #f2f4f2;
+  --color-text-secondary: #d6dcd7;
+  --color-text-placeholder: #aab2ac;
+  --color-text-disabled: #aab2ac;
+  --color-text-on-primary: #112016;
+  --color-border-default: rgb(232 238 233 / 10%);
+  --color-border-strong: rgb(232 238 233 / 17%);
+  --color-border-selected: #69a93d;
+  --color-action-primary: #69a93d;
+  --color-action-primary-hover: #83c657;
+  --color-action-danger: #ffaea5;
+  --color-action-danger-hover: #ffcbc5;
+  --color-status-success: #69a93d;
+  --color-status-success-bg: #272727;
+  --color-status-error: #e26c67;
+  --color-status-error-bg: #402725;
+  --color-status-warning: #e8c17a;
+  --color-status-warning-bg: #382f20;
+  --color-status-warning-border: #8a6d1d;
+  --color-focus-ring: rgb(116 184 255 / 55%);
+  --color-overlay: rgb(0 0 0 / 45%);
+  --shadow-popover: 0 10px 28px rgb(0 0 0 / 55%);
+  --shadow-dialog: 0 24px 72px rgb(0 0 0 / 60%);
+  --k-decision: #e08a5a;
+  --k-analytics: #d4b35a;
+  --k-dev: #6fb3cc;
+  --k-ui: #a493d8;
+  --k-test: #e07fb0;
+  --k-org: #aab2ac;
+  --p-crit: #e26c67;
+  --p-high: #e3a059;
+  --p-mid: #aab2ac;
+  --p-low: #6c726b;
+  --edge: #6c726b;
+  --guide: #f08a5a;
+  --lane-alt: #212121;
+  --edge-strong: var(--color-action-primary);
+}
diff --git a/web/src/styles/tokens.test.ts b/web/src/styles/tokens.test.ts
new file mode 100644
index 0000000..ab0e13b
--- /dev/null
+++ b/web/src/styles/tokens.test.ts
@@ -0,0 +1,65 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative, resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const SRC = resolve(__dirname, "..");
+const TOKENS = resolve(__dirname, "tokens.css");
+
+function cssFiles(dir: string): string[] {
+  return readdirSync(dir).flatMap((name) => {
+    const p = join(dir, name);
+    if (statSync(p).isDirectory()) return cssFiles(p);
+    return p.endsWith(".css") ? [p] : [];
+  });
+}
+
+const stripComments = (s: string) => s.replace(/\/\*[\s\S]*?\*\//g, "");
+const LITERAL =
+  /#[0-9a-fA-F]{3,8}\b|\b(?:rgb|rgba|hsl|hsla)\(|:\s*(?:white|black|red|green|blue|gray|grey|orange|yellow|purple)\b/g;
+
+/** Тело блока, начинающегося с селектора `head` (по балансу скобок). */
+function block(css: string, head: string): string {
+  const at = css.indexOf(head);
+  if (at < 0) throw new Error(`нет блока ${head}`);
+  let i = css.indexOf("{", at);
+  const start = i + 1;
+  let depth = 0;
+  for (; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    if (css[i] === "}" && --depth === 0) return css.slice(start, i);
+  }
+  throw new Error(`блок ${head} не закрыт`);
+}
+
+const names = (body: string) =>
+  [...body.matchAll(/(--color-[\w-]+)\s*:/g)].map((m) => m[1]).sort();
+
+describe("токены AURA", () => {
+  it("вне tokens.css нет литералов цвета", () => {
+    const found: string[] = [];
+    for (const f of cssFiles(SRC)) {
+      if (f === TOKENS) continue;
+      for (const m of stripComments(readFileSync(f, "utf8")).matchAll(LITERAL)) {
+        found.push(`${relative(SRC, f)}: ${m[0]}`);
+      }
+    }
+    expect(found).toEqual([]);
+  });
+
+  const css = stripComments(readFileSync(TOKENS, "utf8"));
+
+  it("обе темы задают одни имена", () => {
+    const l = names(block(css, ":root {"));
+    const media = names(block(css, ':root:not([data-theme="light"])'));
+    const dark = names(block(css, ':root[data-theme="dark"]'));
+    expect(l.length).toBeGreaterThan(20);
+    expect(media).toEqual(l);
+    expect(dark).toEqual(l);
+  });
+
+  it("тёмные блоки и светлый :root задают color-scheme", () => {
+    expect(block(css, ":root {")).toContain("color-scheme: light");
+    expect(block(css, ':root:not([data-theme="light"])')).toContain("color-scheme: dark");
+    expect(block(css, ':root[data-theme="dark"]')).toContain("color-scheme: dark");
+  });
+});
-- 
2.47.2


From 6b158599bf13f06760a968a2f0f40969e80ad22c Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:02:36 +0400
Subject: [PATCH 04/23] =?UTF-8?q?=D0=A1=D0=BF=D0=B5=D0=BA=D0=B0:=20=D1=80?=
 =?UTF-8?q?=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=2013=20=E2=80=94=20=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=BB=D0=BE=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=82?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=B5=D0=BD=D0=BE=D0=B2=20=D0=B7=D0=B0=D0=B4=D0=B0?=
 =?UTF-8?q?=D1=87=D0=B8=201=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 openspec/changes/redesign/design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/openspec/changes/redesign/design.md b/openspec/changes/redesign/design.md
index 51cdd32..c870c9b 100644
--- a/openspec/changes/redesign/design.md
+++ b/openspec/changes/redesign/design.md
@@ -187,3 +187,4 @@
 | 10 | 21.10.2026 | Щелчок по строке таблицы открывает карточку (решение 18) | основной сценарий списка — открыть и перепроверить задачу | низкая |
 | 11 | 21.10.2026 | Тема — два положения, системная только без сохранённого выбора (решение 21) | переключатель AURA двухпозиционный | низкая: вернуть третье положение — пункт меню |
 | 12 | 21.10.2026 | Проверка вида скриншотами в PR, без пиксельных эталонов (решение 23) | вид будет меняться по замечаниям, эталоны мешали бы | низкая |
+| 13 | 22.10.2026 | Задача 1: тёмные `--color-action-danger` `#ffaea5` и hover `#ffcbc5` взяты из tokens.json AURA; `--color-status-error` остаётся `#e26c67`; затемнение фона окон везде `--color-overlay` 45% (у проектов было 40%); палитра `--k-*`/`--p-*` подобрана на глаз, `--k-test` малиновый (`#a63d78` / `#e07fb0`), чтобы не сливаться с зелёным действием | токены AURA — канон; один overlay вместо двух значений; различимость видов задач на доске | низкая: правка значений в tokens.css |
-- 
2.47.2


From 13e7ae35bc3757b7fb5ff69c7c754102a1897a68 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:04:23 +0400
Subject: [PATCH 05/23] =?UTF-8?q?feat(web):=20=D0=B8=D0=BA=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=B8=20=D0=B1=D0=B0=D0=B7=D0=BE=D0=B2=D1=8B?=
 =?UTF-8?q?=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD-=D1=81=D0=B8?=
 =?UTF-8?q?=D1=81=D1=82=D0=B5=D0=BC=D1=8B=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/shell/theme.test.ts |  12 +++-
 web/src/shell/theme.ts      |   8 +++
 web/src/ui/Badge.tsx        |  17 +++++
 web/src/ui/Button.tsx       |  26 ++++++++
 web/src/ui/Notice.tsx       |  20 ++++++
 web/src/ui/PageHeader.tsx   |  16 +++++
 web/src/ui/Panel.tsx        |   5 ++
 web/src/ui/Segmented.tsx    |  29 +++++++++
 web/src/ui/ThemeSwitch.tsx  |  19 ++++++
 web/src/ui/icons.tsx        |  35 +++++++++++
 web/src/ui/index.ts         |  10 +++
 web/src/ui/ui.css           | 120 ++++++++++++++++++++++++++++++++++++
 web/src/ui/ui.test.tsx      |  87 ++++++++++++++++++++++++++
 13 files changed, 402 insertions(+), 2 deletions(-)
 create mode 100644 web/src/ui/Badge.tsx
 create mode 100644 web/src/ui/Button.tsx
 create mode 100644 web/src/ui/Notice.tsx
 create mode 100644 web/src/ui/PageHeader.tsx
 create mode 100644 web/src/ui/Panel.tsx
 create mode 100644 web/src/ui/Segmented.tsx
 create mode 100644 web/src/ui/ThemeSwitch.tsx
 create mode 100644 web/src/ui/icons.tsx
 create mode 100644 web/src/ui/index.ts
 create mode 100644 web/src/ui/ui.css
 create mode 100644 web/src/ui/ui.test.tsx

diff --git a/web/src/shell/theme.test.ts b/web/src/shell/theme.test.ts
index ed437f6..d02e485 100644
--- a/web/src/shell/theme.test.ts
+++ b/web/src/shell/theme.test.ts
@@ -1,5 +1,5 @@
-import { afterEach, describe, expect, it } from "vitest";
-import { applyTheme, readTheme, saveTheme } from "./theme.ts";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { applyTheme, effectiveDark, readTheme, saveTheme } from "./theme.ts";
 
 describe("тема", () => {
   afterEach(() => document.documentElement.removeAttribute("data-theme"));
@@ -20,4 +20,12 @@ describe("тема", () => {
     saveTheme("dark");
     expect(localStorage.getItem("graph-theme")).toBe("dark");
   });
+  it("effectiveDark: системная следует matchMedia, light — всегда светлая, dark — тёмная", () => {
+    vi.stubGlobal("matchMedia", (q: string) => ({ matches: q.includes("dark"), media: q }));
+    expect(effectiveDark("")).toBe(true);
+    expect(effectiveDark("light")).toBe(false);
+    expect(effectiveDark("dark")).toBe(true);
+    vi.stubGlobal("matchMedia", undefined);
+    expect(effectiveDark("")).toBe(false);
+  });
 });
diff --git a/web/src/shell/theme.ts b/web/src/shell/theme.ts
index 9e986e1..82389a4 100644
--- a/web/src/shell/theme.ts
+++ b/web/src/shell/theme.ts
@@ -18,3 +18,11 @@ export function applyTheme(t: Theme): void {
   if (t) document.documentElement.setAttribute("data-theme", t);
   else document.documentElement.removeAttribute("data-theme");
 }
+
+export function systemDark(): boolean {
+  return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+export function effectiveDark(t: Theme): boolean {
+  return t === "dark" || (t === "" && systemDark());
+}
diff --git a/web/src/ui/Badge.tsx b/web/src/ui/Badge.tsx
new file mode 100644
index 0000000..f302c37
--- /dev/null
+++ b/web/src/ui/Badge.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { IconClose } from "./icons.tsx";
+
+export function Badge({ tone = "neutral", children }: { tone?: "neutral" | "success" | "error" | "warning" | "info"; children: ReactNode }) {
+  return <span className={`ui-badge ui-badge--${tone}`}>{children}</span>;
+}
+
+export function Chip({ children, onRemove, removeLabel }: { children: ReactNode; onRemove(): void; removeLabel: string }) {
+  return (
+    <span className="ui-chip">
+      {children}
+      <button type="button" className="ui-chip__x" aria-label={removeLabel} title={removeLabel} onClick={onRemove}>
+        <IconClose size={16} />
+      </button>
+    </span>
+  );
+}
diff --git a/web/src/ui/Button.tsx b/web/src/ui/Button.tsx
new file mode 100644
index 0000000..db23e20
--- /dev/null
+++ b/web/src/ui/Button.tsx
@@ -0,0 +1,26 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export type ButtonProps = {
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "md" | "lg";
+  icon?: ReactNode;
+  loading?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function Button({ variant = "secondary", size = "md", icon, loading, className, children, disabled, type = "button", ...rest }: ButtonProps) {
+  const cls = ["ui-btn", `ui-btn--${variant}`, `ui-btn--${size}`, className].filter(Boolean).join(" ");
+  return (
+    <button {...rest} type={type} className={cls} disabled={disabled || loading} aria-busy={loading ? "true" : undefined}>
+      {loading ? <span className="ui-spinner" aria-hidden="true" /> : icon}
+      {children}
+    </button>
+  );
+}
+
+export function IconButton({ label, icon, className, type = "button", ...rest }: { label: string; icon: ReactNode } & ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button {...rest} type={type} className={["ui-icon-btn", className].filter(Boolean).join(" ")} aria-label={label} title={label}>
+      {icon}
+    </button>
+  );
+}
diff --git a/web/src/ui/Notice.tsx b/web/src/ui/Notice.tsx
new file mode 100644
index 0000000..621d36d
--- /dev/null
+++ b/web/src/ui/Notice.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { IconCheck, IconError, IconInfo, IconWarning } from "./icons.tsx";
+
+const ICON = { success: IconCheck, error: IconError, warning: IconWarning, info: IconInfo };
+
+export function Notice({ tone, title, children, action }: {
+  tone: "success" | "error" | "warning" | "info"; title?: ReactNode; children?: ReactNode; action?: ReactNode;
+}) {
+  const I = ICON[tone];
+  return (
+    <div className={`ui-notice ui-notice--${tone}`} role={tone === "error" || tone === "warning" ? "alert" : "status"}>
+      <span className="ui-notice__icon"><I size={16} /></span>
+      <div className="ui-notice__body">
+        {title && <div className="ui-notice__title">{title}</div>}
+        {children && <div className="ui-notice__text">{children}</div>}
+      </div>
+      {action && <div className="ui-notice__action">{action}</div>}
+    </div>
+  );
+}
diff --git a/web/src/ui/PageHeader.tsx b/web/src/ui/PageHeader.tsx
new file mode 100644
index 0000000..2b84263
--- /dev/null
+++ b/web/src/ui/PageHeader.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+export function PageHeader({ title, subtitle, actions, children }: { title: ReactNode; subtitle?: ReactNode; actions?: ReactNode; children?: ReactNode }) {
+  return (
+    <header className="ui-page-header">
+      <div className="ui-page-header__row">
+        <div className="ui-page-header__text">
+          <h1 className="ui-page-header__title">{title}</h1>
+          {subtitle && <p className="ui-page-header__subtitle">{subtitle}</p>}
+        </div>
+        {actions && <div className="ui-page-header__actions">{actions}</div>}
+      </div>
+      {children}
+    </header>
+  );
+}
diff --git a/web/src/ui/Panel.tsx b/web/src/ui/Panel.tsx
new file mode 100644
index 0000000..7f5faa4
--- /dev/null
+++ b/web/src/ui/Panel.tsx
@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "react";
+
+export function Panel({ as: Tag = "div", padding = "md", className, ...rest }: { as?: "div" | "section"; padding?: "none" | "md" | "lg" } & HTMLAttributes<HTMLElement>) {
+  return <Tag {...rest} className={["ui-panel", `ui-panel--${padding}`, className].filter(Boolean).join(" ")} />;
+}
diff --git a/web/src/ui/Segmented.tsx b/web/src/ui/Segmented.tsx
new file mode 100644
index 0000000..149afe4
--- /dev/null
+++ b/web/src/ui/Segmented.tsx
@@ -0,0 +1,29 @@
+import { Link } from "react-router";
+
+type Option<T extends string> = { value: T; label: string; href?: string };
+
+export function Segmented<T extends string>({ label, value, options, onChange }: {
+  label: string; value: T; options: Option<T>[]; onChange?(v: T): void;
+}) {
+  if (options.some((o) => o.href)) {
+    return (
+      <nav className="ui-seg" aria-label={label}>
+        {options.map((o) => (
+          <Link key={o.value} to={o.href ?? "#"} className="ui-seg__item" aria-current={o.value === value ? "page" : undefined}>
+            {o.label}
+          </Link>
+        ))}
+      </nav>
+    );
+  }
+  return (
+    <div className="ui-seg" role="radiogroup" aria-label={label}>
+      {options.map((o) => (
+        <button key={o.value} type="button" role="radio" aria-checked={o.value === value} className="ui-seg__item"
+                onClick={() => onChange?.(o.value)}>
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/web/src/ui/ThemeSwitch.tsx b/web/src/ui/ThemeSwitch.tsx
new file mode 100644
index 0000000..2a94ad5
--- /dev/null
+++ b/web/src/ui/ThemeSwitch.tsx
@@ -0,0 +1,19 @@
+import { useState } from "react";
+import { applyTheme, effectiveDark, readTheme, saveTheme, type Theme } from "../shell/theme.ts";
+import { IconMoon, IconSun } from "./icons.tsx";
+
+export function ThemeSwitch() {
+  const [theme, setTheme] = useState<Theme>(readTheme);
+  const dark = effectiveDark(theme);
+  const toggle = () => {
+    const next: Theme = dark ? "light" : "dark";
+    saveTheme(next);
+    applyTheme(next);
+    setTheme(next);
+  };
+  return (
+    <button type="button" role="switch" aria-checked={dark} aria-label="Тёмная тема" className="ui-theme" onClick={toggle}>
+      <span className="ui-theme__knob">{dark ? <IconMoon size={16} /> : <IconSun size={16} />}</span>
+    </button>
+  );
+}
diff --git a/web/src/ui/icons.tsx b/web/src/ui/icons.tsx
new file mode 100644
index 0000000..fc1d3a3
--- /dev/null
+++ b/web/src/ui/icons.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+// иконки дизайн-системы: React-SVG 24x24, штрих currentColor 1.5; без dangerouslySetInnerHTML
+export type IconProps = { size?: 16 | 20 };
+
+function make(children: ReactNode) {
+  return ({ size = 20 }: IconProps) => (
+    <svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+         strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">{children}</svg>
+  );
+}
+
+export const IconRefresh = make(<><path d="M20 11a8 8 0 1 0-2.3 5.7"/><path d="M20 4v7h-7"/></>);
+export const IconUpload = make(<><path d="M12 16V4"/><path d="M7 9l5-5 5 5"/><path d="M4 20h16"/></>);
+export const IconMore = make(<><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></>);
+export const IconClose = make(<><path d="M6 6l12 12M18 6L6 18"/></>);
+export const IconChevronDown = make(<><path d="M6 9l6 6 6-6"/></>);
+export const IconSearch = make(<><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></>);
+export const IconFilter = make(<><path d="M4 5h16l-6 8v6l-4-2v-4z"/></>);
+export const IconSun = make(<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></>);
+export const IconMoon = make(<><path d="M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z"/></>);
+export const IconExternal = make(<><path d="M14 4h6v6"/><path d="M20 4l-9 9"/><path d="M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></>);
+export const IconWarning = make(<><path d="M12 3.5l9.5 16.5h-19z"/><path d="M12 10v5M12 17.5v.5"/></>);
+export const IconCheck = make(<><path d="M5 12.5l4.5 4.5L19 7.5"/></>);
+export const IconError = make(<><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></>);
+export const IconInfo = make(<><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 7.5v.5"/></>);
+export const IconHandoff = make(<><path d="M4 8h13"/><path d="M13 4l4 4-4 4"/><path d="M20 16H7"/><path d="M11 12l-4 4 4 4"/></>);
+export const IconCritical = make(<><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></>);
+export const IconCalendar = make(<><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v4M16 3v4"/></>);
+export const IconNeighbors = make(<><circle cx="12" cy="12" r="2.5"/><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="20" r="1.5"/><path d="M10 10.5L6.5 7.5M14 10.5l3.5-3M12 14.5v4"/></>);
+export const IconLink = make(<><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></>);
+export const IconGrid = make(<><rect x="4" y="4" width="6.5" height="6.5" rx="1"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1"/></>);
+export const IconReset = make(<><path d="M4 12a8 8 0 1 1 2.3 5.7"/><path d="M4 19v-7h7"/></>);
+export const IconLegend = make(<><path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.5" cy="6" r=".8"/><circle cx="4.5" cy="12" r=".8"/><circle cx="4.5" cy="18" r=".8"/></>);
+export const IconOpen = make(<><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>);
diff --git a/web/src/ui/index.ts b/web/src/ui/index.ts
new file mode 100644
index 0000000..f4b616f
--- /dev/null
+++ b/web/src/ui/index.ts
@@ -0,0 +1,10 @@
+import "./ui.css";
+
+export * from "./icons.tsx";
+export { Button, IconButton, type ButtonProps } from "./Button.tsx";
+export { Segmented } from "./Segmented.tsx";
+export { ThemeSwitch } from "./ThemeSwitch.tsx";
+export { Badge, Chip } from "./Badge.tsx";
+export { Notice } from "./Notice.tsx";
+export { Panel } from "./Panel.tsx";
+export { PageHeader } from "./PageHeader.tsx";
diff --git a/web/src/ui/ui.css b/web/src/ui/ui.css
new file mode 100644
index 0000000..d7a9340
--- /dev/null
+++ b/web/src/ui/ui.css
@@ -0,0 +1,120 @@
+/* базовые компоненты дизайн-системы AURA: только переменные из styles/tokens.css, веса 400/600/700 */
+.ui-btn, .ui-icon-btn, .ui-seg__item, .ui-theme, .ui-chip__x {
+  font-family: var(--font-ui); cursor: pointer;
+  transition: background var(--motion), border-color var(--motion), color var(--motion);
+}
+.ui-btn:focus-visible, .ui-icon-btn:focus-visible, .ui-seg__item:focus-visible, .ui-theme:focus-visible, .ui-chip__x:focus-visible {
+  outline: 2px solid var(--color-focus-ring); outline-offset: 2px;
+}
+.ui-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
+  height: var(--control-h); padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-round);
+  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; white-space: nowrap;
+}
+.ui-btn--lg { height: var(--control-h-lg); padding: 0 var(--space-5); }
+.ui-btn--primary { background: var(--color-action-primary); color: var(--color-text-on-primary); }
+.ui-btn--primary:hover:not(:disabled) { background: var(--color-action-primary-hover); }
+.ui-btn--secondary { background: transparent; border-color: var(--color-border-strong); color: var(--color-text-primary); }
+.ui-btn--secondary:hover:not(:disabled) { border-color: var(--color-action-primary); }
+.ui-btn--secondary[aria-pressed="true"] {
+  background: var(--color-bg-selected); border-color: var(--color-action-primary); color: var(--color-action-primary);
+}
+.ui-btn--danger { background: var(--color-action-danger); color: var(--color-text-on-primary); }
+.ui-btn--danger:hover:not(:disabled) { background: var(--color-action-danger-hover); }
+.ui-btn--ghost { background: transparent; color: var(--color-action-primary); }
+.ui-btn--ghost:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-action-primary-hover); }
+.ui-btn:disabled { cursor: not-allowed; color: var(--color-text-disabled); }
+.ui-btn--primary:disabled, .ui-btn--danger:disabled { background: var(--color-bg-track); border-color: var(--color-border-default); }
+.ui-btn[aria-busy="true"] { cursor: progress; }
+.ui-spinner {
+  width: 16px; height: 16px; border-radius: var(--radius-round);
+  border: 2px solid var(--color-border-strong); border-top-color: var(--color-action-primary);
+  animation: ui-spin 800ms linear infinite;
+}
+@keyframes ui-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ui-spinner { animation-duration: 2400ms; } }
+
+.ui-icon-btn {
+  display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h);
+  padding: 0; border: 1px solid transparent; border-radius: var(--control-radius); background: transparent; color: var(--color-text-secondary);
+}
+.ui-icon-btn:hover:not(:disabled) { background: var(--color-bg-hover); border-color: var(--color-border-strong); color: var(--color-text-primary); }
+.ui-icon-btn:disabled { cursor: not-allowed; color: var(--color-text-disabled); }
+
+.ui-seg {
+  display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-round); background: var(--color-bg-track);
+}
+.ui-seg__item {
+  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-4); border: 1px solid transparent;
+  border-radius: var(--radius-round); background: transparent; color: var(--color-text-secondary);
+  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; text-decoration: none; white-space: nowrap;
+}
+.ui-seg__item:hover { color: var(--color-text-primary); }
+.ui-seg__item[aria-checked="true"], .ui-seg__item[aria-current="page"] {
+  background: var(--color-bg-surface); border-color: var(--color-border-selected); color: var(--color-action-primary); font-weight: 600;
+}
+
+.ui-theme {
+  display: inline-flex; align-items: center; width: 44px; height: 24px; padding: 2px; border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-round); background: var(--color-bg-track); color: var(--color-text-secondary);
+}
+.ui-theme__knob {
+  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-round);
+  background: var(--color-bg-surface); box-shadow: inset 0 0 0 1px var(--color-border-default); transition: transform var(--motion);
+}
+.ui-theme[aria-checked="true"] { border-color: var(--color-border-selected); color: var(--color-action-primary); }
+.ui-theme[aria-checked="true"] .ui-theme__knob { transform: translateX(20px); }
+
+.ui-badge {
+  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border: 1px solid transparent;
+  border-radius: var(--radius-round); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; white-space: nowrap;
+}
+.ui-badge--neutral { background: var(--color-bg-track); border-color: var(--color-border-default); color: var(--color-text-secondary); }
+.ui-badge--success { background: var(--color-status-success-bg); border-color: var(--color-status-success); color: var(--color-status-success); }
+.ui-badge--error { background: var(--color-status-error-bg); border-color: var(--color-status-error); color: var(--color-status-error); }
+.ui-badge--warning { background: var(--color-status-warning-bg); border-color: var(--color-status-warning-border); color: var(--color-status-warning); }
+.ui-badge--info { background: var(--color-bg-subtle); border-color: var(--color-border-strong); color: var(--color-text-primary); }
+
+.ui-chip {
+  display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-1) 0 var(--space-3);
+  border: 1px solid var(--color-border-selected); border-radius: var(--radius-round); background: var(--color-bg-selected);
+  color: var(--color-action-primary); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600;
+}
+.ui-chip__x {
+  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0;
+  border-radius: var(--radius-round); background: transparent; color: inherit;
+}
+.ui-chip__x:hover { background: var(--color-bg-hover); }
+
+.ui-notice {
+  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-subtle);
+}
+.ui-notice__icon {
+  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px;
+  border-radius: var(--radius-round); color: var(--color-text-on-primary); background: var(--color-text-secondary);
+}
+.ui-notice__body { flex: 1; min-width: 0; }
+.ui-notice__title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--color-text-primary); }
+.ui-notice__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
+.ui-notice__action { flex: none; }
+.ui-notice--success { background: var(--color-status-success-bg); border-color: var(--color-status-success); }
+.ui-notice--success .ui-notice__icon { background: var(--color-status-success); }
+.ui-notice--error { background: var(--color-status-error-bg); border-color: var(--color-status-error); }
+.ui-notice--error .ui-notice__icon { background: var(--color-status-error); }
+.ui-notice--warning { background: var(--color-status-warning-bg); border-color: var(--color-status-warning-border); }
+.ui-notice--warning .ui-notice__icon { background: var(--color-status-warning); }
+
+.ui-panel {
+  background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl);
+}
+.ui-panel--md { padding: var(--space-4); }
+.ui-panel--lg { padding: var(--space-6); }
+.ui-panel--none { padding: 0; }
+
+.ui-page-header { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); }
+.ui-page-header__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
+.ui-page-header__text { min-width: 0; }
+.ui-page-header__title { margin: 0; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; color: var(--color-text-primary); }
+.ui-page-header__subtitle { margin: var(--space-1) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-secondary); }
+.ui-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
diff --git a/web/src/ui/ui.test.tsx b/web/src/ui/ui.test.tsx
new file mode 100644
index 0000000..02ba47f
--- /dev/null
+++ b/web/src/ui/ui.test.tsx
@@ -0,0 +1,87 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button, Chip, IconButton, IconRefresh, Notice, Segmented, ThemeSwitch } from "./index.ts";
+
+function stubMatchMedia(dark: boolean) {
+  vi.stubGlobal("matchMedia", (q: string) => ({ matches: dark && q.includes("dark"), media: q, addEventListener() {}, removeEventListener() {} }));
+}
+
+describe("Button", () => {
+  it("loading: aria-busy, недоступна, иконка не показана", () => {
+    render(<Button loading icon={<IconRefresh />}>Обновить</Button>);
+    const b = screen.getByRole("button", { name: /Обновить/ });
+    expect(b.getAttribute("aria-busy")).toBe("true");
+    expect((b as HTMLButtonElement).disabled).toBe(true);
+    expect(b.querySelector("svg")).toBeNull();
+    expect(b.querySelector(".ui-spinner")).not.toBeNull();
+  });
+  it("по умолчанию type=button, aria-pressed пробрасывается", () => {
+    render(<Button aria-pressed={true}>Фильтр</Button>);
+    const b = screen.getByRole("button", { name: "Фильтр" });
+    expect(b.getAttribute("type")).toBe("button");
+    expect(b.getAttribute("aria-pressed")).toBe("true");
+    expect(b.className).toContain("ui-btn--secondary");
+  });
+});
+
+describe("IconButton", () => {
+  it("доступное имя из label", () => {
+    render(<IconButton label="Закрыть" icon={<IconRefresh />} />);
+    expect(screen.getByRole("button", { name: "Закрыть" }).getAttribute("title")).toBe("Закрыть");
+  });
+});
+
+describe("Segmented", () => {
+  const options = [{ value: "a", label: "А" }, { value: "b", label: "Б" }];
+  it("кнопками: radiogroup, onChange, aria-checked", () => {
+    const onChange = vi.fn();
+    render(<Segmented label="Режим" value="a" options={options} onChange={onChange} />);
+    expect(screen.getByRole("radiogroup", { name: "Режим" })).toBeTruthy();
+    expect(screen.getByRole("radio", { name: "А" }).getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByRole("radio", { name: "Б" }).getAttribute("aria-checked")).toBe("false");
+    fireEvent.click(screen.getByRole("radio", { name: "Б" }));
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+  it("ссылками: nav, aria-current у активной", () => {
+    render(
+      <MemoryRouter initialEntries={["/b"]}>
+        <Segmented label="Разделы" value="b" options={[{ value: "a", label: "А", href: "/a" }, { value: "b", label: "Б", href: "/b" }]} />
+      </MemoryRouter>,
+    );
+    expect(screen.getByRole("navigation", { name: "Разделы" })).toBeTruthy();
+    expect(screen.getByRole("link", { name: "Б" }).getAttribute("aria-current")).toBe("page");
+    expect(screen.getByRole("link", { name: "А" }).hasAttribute("aria-current")).toBe(false);
+  });
+});
+
+describe("ThemeSwitch", () => {
+  afterEach(() => document.documentElement.removeAttribute("data-theme"));
+  it("системная тёмная -> checked; щелчки переключают light и dark", () => {
+    stubMatchMedia(true);
+    render(<ThemeSwitch />);
+    const sw = screen.getByRole("switch", { name: "Тёмная тема" });
+    expect(sw.getAttribute("aria-checked")).toBe("true");
+    fireEvent.click(sw);
+    expect(localStorage.getItem("graph-theme")).toBe("light");
+    expect(document.documentElement.getAttribute("data-theme")).toBe("light");
+    expect(sw.getAttribute("aria-checked")).toBe("false");
+    fireEvent.click(sw);
+    expect(localStorage.getItem("graph-theme")).toBe("dark");
+    expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+  });
+});
+
+describe("Chip и Notice", () => {
+  it("Chip: кнопка снятия вызывает onRemove", () => {
+    const onRemove = vi.fn();
+    render(<Chip onRemove={onRemove} removeLabel="Снять фильтр Спринт">Спринт</Chip>);
+    fireEvent.click(screen.getByRole("button", { name: "Снять фильтр Спринт" }));
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
+  it("Notice: error — alert, info — status", () => {
+    render(<><Notice tone="error" title="Сбой">текст</Notice><Notice tone="info">инфо</Notice></>);
+    expect(screen.getByRole("alert").textContent).toContain("Сбой");
+    expect(screen.getByRole("status").textContent).toContain("инфо");
+  });
+});
-- 
2.47.2


From d6ddca07513901cd326b20d2a1d39d9201d23b5f Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:09:46 +0400
Subject: [PATCH 06/23] =?UTF-8?q?feat(web):=20=D0=BF=D0=BE=D0=BB=D1=8F,=20?=
 =?UTF-8?q?=D0=B2=D1=8B=D0=BF=D0=B0=D0=B4=D0=B0=D1=8E=D1=89=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B8,=20=D0=BE=D0=BA=D0=BD?=
 =?UTF-8?q?=D0=BE=20=D0=B8=20=D0=BC=D0=B5=D0=BD=D1=8E=20=D0=B4=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=B9=D0=BD-=D1=81=D0=B8=D1=81=D1=82=D0=B5=D0=BC=D1=8B?=
 =?UTF-8?q?=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/board/components/MultiSelect.tsx      |  2 +-
 web/src/board/components/Toolbar.tsx          |  2 +-
 web/src/styles/controls.css                   |  7 +-
 web/src/ui/Dialog.tsx                         | 15 ++++
 .../components => ui}/Dropdown.test.tsx       |  2 +-
 web/src/ui/Field.tsx                          | 15 ++++
 .../components/Dropdown.tsx => ui/Menu.tsx}   | 26 ++++++
 web/src/ui/forms.test.tsx                     | 83 +++++++++++++++++++
 web/src/ui/index.ts                           |  4 +
 web/src/ui/inputs.tsx                         | 43 ++++++++++
 web/src/ui/ui.css                             | 71 ++++++++++++++++
 11 files changed, 261 insertions(+), 9 deletions(-)
 create mode 100644 web/src/ui/Dialog.tsx
 rename web/src/{board/components => ui}/Dropdown.test.tsx (94%)
 create mode 100644 web/src/ui/Field.tsx
 rename web/src/{board/components/Dropdown.tsx => ui/Menu.tsx} (53%)
 create mode 100644 web/src/ui/forms.test.tsx
 create mode 100644 web/src/ui/inputs.tsx

diff --git a/web/src/board/components/MultiSelect.tsx b/web/src/board/components/MultiSelect.tsx
index 67d28ad..90e17b7 100644
--- a/web/src/board/components/MultiSelect.tsx
+++ b/web/src/board/components/MultiSelect.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { FacetItem } from "../analysis/facets.ts";
-import { Dropdown } from "./Dropdown.tsx";
+import { Dropdown } from "../../ui/index.ts";
 
 // мультиселект с поиском: пустой выбор = без фильтра (строки 913–938)
 export function MultiSelect({ items, selected, allLabel, onChange }: {
diff --git a/web/src/board/components/Toolbar.tsx b/web/src/board/components/Toolbar.tsx
index 8de675e..5609b66 100644
--- a/web/src/board/components/Toolbar.tsx
+++ b/web/src/board/components/Toolbar.tsx
@@ -3,7 +3,7 @@ import { applyTheme, readTheme, saveTheme, THEME_NAMES, THEMES, type Theme } fro
 import { statusText, type BoardStatus } from "../status.ts";
 import type { BoardModel, Visible } from "../types.ts";
 import { NOT_IN_HUB } from "../constants.ts";
-import { Dropdown } from "./Dropdown.tsx";
+import { Dropdown } from "../../ui/index.ts";
 
 interface ToolbarProps {
   label: string; title: string; status: BoardStatus | null; refreshing: boolean; byDate: boolean; snap: boolean;
diff --git a/web/src/styles/controls.css b/web/src/styles/controls.css
index 9240509..8b83067 100644
--- a/web/src/styles/controls.css
+++ b/web/src/styles/controls.css
@@ -14,7 +14,7 @@
 .dd-btn{max-width:360px;gap:8px;justify-content:space-between}
 .dd-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .dd-btn .car{font-size:10px;opacity:.7}
-.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:280px;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-popover);padding:8px;display:flex;flex-direction:column;gap:6px}
+.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:280px;max-width:420px;padding:8px;display:flex;flex-direction:column;gap:6px}
 .dd-menu input[type=search]{font:inherit;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 8px;width:100%;box-sizing:border-box}
 .dd-menu input[type=search]:focus-visible{border-color:var(--accent);outline:none}
 .dd-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}
@@ -30,11 +30,6 @@
 .dd-sep{border:0;border-top:1px solid var(--line);margin:4px 0}
 /* меню «⋯»: открывается к левому краю, пункты с галочкой — переключатели */
 .dd-menu.menu{right:0;left:auto;min-width:230px;padding:6px}
-.menu button{font:inherit;font-size:14px;text-align:left;background:none;border:0;border-radius:5px;padding:7px 10px;color:var(--fg);cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}
-.menu button:hover,.menu button:focus-visible{background:var(--soft);outline:none}
-.menu button[aria-pressed="true"]::after{content:"✓";color:var(--accent);font-weight:600}
-.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
-.menu .danger{color:var(--p-crit)}
 .confirm{display:flex;flex-direction:column;gap:6px;padding:6px 10px;font-size:14px}
 .confirm .row{flex-wrap:nowrap}
 .confirm .btn{height:28px;padding:0 10px;width:auto;flex:1 1 0}
diff --git a/web/src/ui/Dialog.tsx b/web/src/ui/Dialog.tsx
new file mode 100644
index 0000000..6c09e57
--- /dev/null
+++ b/web/src/ui/Dialog.tsx
@@ -0,0 +1,15 @@
+import { useEffect, useRef, type ReactNode } from "react";
+
+// окно: родной <dialog> держит фокус и закрывает фон; Esc — onClose, закрытие по фону — на стороне использующего
+export function Dialog({ label, onClose, size = "md", className, children }: {
+  label: string; onClose(): void; size?: "sm" | "md" | "lg"; className?: string; children: ReactNode;
+}) {
+  const ref = useRef<HTMLDialogElement>(null);
+  useEffect(() => { const d = ref.current; if (d && !d.open) d.showModal(); }, []);
+  return (
+    <dialog ref={ref} className={["ui-dialog", `ui-dialog--${size}`, className].filter(Boolean).join(" ")} aria-label={label}
+      onCancel={(e) => { e.preventDefault(); onClose(); }}>
+      {children}
+    </dialog>
+  );
+}
diff --git a/web/src/board/components/Dropdown.test.tsx b/web/src/ui/Dropdown.test.tsx
similarity index 94%
rename from web/src/board/components/Dropdown.test.tsx
rename to web/src/ui/Dropdown.test.tsx
index 8be5b6f..d2bf479 100644
--- a/web/src/board/components/Dropdown.test.tsx
+++ b/web/src/ui/Dropdown.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { StrictMode } from "react";
 import { describe, expect, it, vi } from "vitest";
-import { Dropdown } from "./Dropdown.tsx";
+import { Dropdown } from "./Menu.tsx";
 
 describe("Dropdown (T12.1)", () => {
   it("onOpen вызывается один раз на открытие, в том числе в StrictMode", () => {
diff --git a/web/src/ui/Field.tsx b/web/src/ui/Field.tsx
new file mode 100644
index 0000000..49dfc23
--- /dev/null
+++ b/web/src/ui/Field.tsx
@@ -0,0 +1,15 @@
+import { cloneElement, useId, type ReactElement, type ReactNode } from "react";
+
+// подпись над контролом; связь через htmlFor/id, подсказка и ошибка — через aria-describedby (имя поля — только подпись)
+export function Field({ label, hint, error, children }: { label: string; hint?: ReactNode; error?: ReactNode; children: ReactElement<Record<string, unknown>> }) {
+  const id = useId();
+  const described = [hint && `${id}-hint`, error && `${id}-err`].filter(Boolean).join(" ") || undefined;
+  return (
+    <div className="ui-field">
+      <label className="ui-field__label" htmlFor={id}>{label}</label>
+      {cloneElement(children, { id, "aria-describedby": described, ...(error ? { "aria-invalid": "true" } : {}) })}
+      {hint && <span className="ui-field__hint" id={`${id}-hint`}>{hint}</span>}
+      {error && <span className="ui-field__error" id={`${id}-err`} role="alert">{error}</span>}
+    </div>
+  );
+}
diff --git a/web/src/board/components/Dropdown.tsx b/web/src/ui/Menu.tsx
similarity index 53%
rename from web/src/board/components/Dropdown.tsx
rename to web/src/ui/Menu.tsx
index f7eca59..f3b3d19 100644
--- a/web/src/board/components/Dropdown.tsx
+++ b/web/src/ui/Menu.tsx
@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState, type ReactNode } from "react";
+import { IconButton } from "./Button.tsx";
+import { IconMore } from "./icons.tsx";
 
 // выпадающий список: кнопка открывает, щелчок вне или Escape закрывает (строки 897–904)
 export function Dropdown({ button, className = "", children, onOpen }: {
@@ -21,3 +23,27 @@ export function Dropdown({ button, className = "", children, onOpen }: {
     </div>
   );
 }
+
+// меню «Ещё»: Dropdown с кнопкой-иконкой; пункты — кнопки (aria-pressed для переключателей)
+export function Menu({ label, children, align = "end" }: {
+  label: string; children: (close: () => void) => ReactNode; align?: "start" | "end";
+}) {
+  return (
+    <Dropdown className={"more" + (align === "start" ? " dd--start" : "")}
+      button={({ open, toggle }) => <IconButton label={label} icon={<IconMore />} aria-haspopup="menu" aria-expanded={open} onClick={toggle} />}>
+      {children}
+    </Dropdown>
+  );
+}
+
+export function MenuItem({ onSelect, pressed, danger, icon, children }: {
+  onSelect(): void; pressed?: boolean; danger?: boolean; icon?: ReactNode; children: ReactNode;
+}) {
+  return (
+    <button type="button" className={danger ? "danger" : undefined} aria-pressed={pressed === undefined ? undefined : pressed} onClick={onSelect}>
+      {icon}{children}
+    </button>
+  );
+}
+
+export function MenuSeparator() { return <hr />; }
diff --git a/web/src/ui/forms.test.tsx b/web/src/ui/forms.test.tsx
new file mode 100644
index 0000000..8a48b7a
--- /dev/null
+++ b/web/src/ui/forms.test.tsx
@@ -0,0 +1,83 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { Checkbox, Dialog, Field, Menu, MenuItem, MenuSeparator, SearchInput, Select, TextInput, Textarea } from "./index.ts";
+
+describe("поля", () => {
+  it("Field связывает подпись с полем, показывает подсказку и ошибку", () => {
+    render(<Field label="Метка" hint="подсказка" error="плохо"><TextInput /></Field>);
+    expect(screen.getByLabelText("Метка")).toHaveClass("ui-input");
+    expect(screen.getByText("подсказка")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveTextContent("плохо");
+  });
+  it("Textarea и Checkbox", () => {
+    render(<><Field label="Текст"><Textarea /></Field><Checkbox label="Скрыть" /></>);
+    expect(screen.getByLabelText("Текст").tagName).toBe("TEXTAREA");
+    expect(screen.getByRole("checkbox", { name: "Скрыть" })).toBeInTheDocument();
+  });
+  it("SearchInput: ввод и «Очистить» только при значении", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(<SearchInput value="" onChange={onChange} label="Поиск" />);
+    expect(screen.queryByRole("button", { name: "Очистить" })).toBeNull();
+    await userEvent.type(screen.getByRole("searchbox", { name: "Поиск" }), "a");
+    expect(onChange).toHaveBeenCalledWith("a");
+    rerender(<SearchInput value="abc" onChange={onChange} label="Поиск" />);
+    await userEvent.click(screen.getByRole("button", { name: "Очистить" }));
+    expect(onChange).toHaveBeenLastCalledWith("");
+  });
+  it("Select: combobox по имени и выбор", async () => {
+    const onChange = vi.fn();
+    render(<Field label="Статус"><Select onChange={(e) => onChange(e.target.value)}><option value="a">A</option><option value="b">B</option></Select></Field>);
+    await userEvent.selectOptions(screen.getByRole("combobox", { name: "Статус" }), "b");
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+});
+
+describe("Dialog", () => {
+  it("открыт, Esc вызывает onClose", () => {
+    const onClose = vi.fn();
+    render(<Dialog label="Окно" onClose={onClose}><p>тело</p></Dialog>);
+    const d = screen.getByRole("dialog", { name: "Окно" });
+    expect(d).toHaveAttribute("open");
+    expect(d).toHaveClass("ui-dialog--md");
+    fireEvent(d, new Event("cancel", { cancelable: true }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
+
+function Demo({ onSelect }: { onSelect(): void }) {
+  const [on, setOn] = useState(true);
+  return (
+    <div>
+      <Menu label="Ещё">{(close) => (<>
+        <MenuItem pressed={on} onSelect={() => setOn(!on)}>Переключатель</MenuItem>
+        <MenuSeparator />
+        <MenuItem onSelect={() => { onSelect(); close(); }}>Действие</MenuItem>
+      </>)}</Menu>
+      <p>вне</p>
+    </div>
+  );
+}
+
+describe("Menu", () => {
+  it("открывает пункты, aria-pressed, выбор закрывает меню", async () => {
+    const onSelect = vi.fn();
+    render(<Demo onSelect={onSelect} />);
+    expect(screen.queryByText("Действие")).toBeNull();
+    await userEvent.click(screen.getByRole("button", { name: "Ещё" }));
+    expect(screen.getByRole("button", { name: "Переключатель" })).toHaveAttribute("aria-pressed", "true");
+    await userEvent.click(screen.getByText("Действие"));
+    expect(onSelect).toHaveBeenCalled();
+    expect(screen.queryByText("Действие")).toBeNull();
+  });
+  it("Escape и щелчок вне закрывают", async () => {
+    render(<Demo onSelect={() => {}} />);
+    await userEvent.click(screen.getByRole("button", { name: "Ещё" }));
+    await userEvent.keyboard("{Escape}");
+    expect(screen.queryByText("Действие")).toBeNull();
+    await userEvent.click(screen.getByRole("button", { name: "Ещё" }));
+    await userEvent.click(screen.getByText("вне"));
+    expect(screen.queryByText("Действие")).toBeNull();
+  });
+});
diff --git a/web/src/ui/index.ts b/web/src/ui/index.ts
index f4b616f..d18a9e5 100644
--- a/web/src/ui/index.ts
+++ b/web/src/ui/index.ts
@@ -8,3 +8,7 @@ export { Badge, Chip } from "./Badge.tsx";
 export { Notice } from "./Notice.tsx";
 export { Panel } from "./Panel.tsx";
 export { PageHeader } from "./PageHeader.tsx";
+export { Field } from "./Field.tsx";
+export { TextInput, Textarea, SearchInput, Select, Checkbox } from "./inputs.tsx";
+export { Dialog } from "./Dialog.tsx";
+export { Dropdown, Menu, MenuItem, MenuSeparator } from "./Menu.tsx";
diff --git a/web/src/ui/inputs.tsx b/web/src/ui/inputs.tsx
new file mode 100644
index 0000000..033414a
--- /dev/null
+++ b/web/src/ui/inputs.tsx
@@ -0,0 +1,43 @@
+import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+import { IconButton } from "./Button.tsx";
+import { IconChevronDown, IconClose, IconSearch } from "./icons.tsx";
+
+type Size = { size?: "md" | "lg" };
+const cx = (...a: Array<string | false | undefined>) => a.filter(Boolean).join(" ");
+
+export function TextInput({ size = "md", className, ...rest }: Size & Omit<InputHTMLAttributes<HTMLInputElement>, "size">) {
+  return <input {...rest} className={cx("ui-input", `ui-input--${size}`, className)} />;
+}
+
+export function Textarea({ size = "md", className, ...rest }: Size & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size">) {
+  return <textarea {...rest} className={cx("ui-input", "ui-textarea", `ui-input--${size}`, className)} />;
+}
+
+export function SearchInput({ value, onChange, label, placeholder }: { value: string; onChange(v: string): void; label: string; placeholder?: string }) {
+  return (
+    <span className="ui-search">
+      <span className="ui-search__icon" aria-hidden="true"><IconSearch /></span>
+      <input type="search" className="ui-input ui-input--md ui-search__input" aria-label={label} placeholder={placeholder}
+        value={value} onChange={(e) => onChange(e.target.value)} />
+      {value !== "" && <IconButton className="ui-search__clear" label="Очистить" icon={<IconClose />} onClick={() => onChange("")} />}
+    </span>
+  );
+}
+
+export function Select({ size = "md", className, children, ...rest }: Size & Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">) {
+  return (
+    <span className={cx("ui-select", `ui-select--${size}`, className)}>
+      <select {...rest} className="ui-input ui-select__control">{children}</select>
+      <span className="ui-select__chevron" aria-hidden="true"><IconChevronDown /></span>
+    </span>
+  );
+}
+
+export function Checkbox({ label, className, ...rest }: { label: ReactNode } & Omit<InputHTMLAttributes<HTMLInputElement>, "type">) {
+  return (
+    <label className={cx("ui-check", className)}>
+      <input {...rest} type="checkbox" className="ui-check__box" />
+      <span>{label}</span>
+    </label>
+  );
+}
diff --git a/web/src/ui/ui.css b/web/src/ui/ui.css
index d7a9340..4fa6ec0 100644
--- a/web/src/ui/ui.css
+++ b/web/src/ui/ui.css
@@ -118,3 +118,74 @@
 .ui-page-header__title { margin: 0; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; color: var(--color-text-primary); }
 .ui-page-header__subtitle { margin: var(--space-1) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-secondary); }
 .ui-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+
+/* поля */
+.ui-field { display: flex; flex-direction: column; gap: var(--space-1); }
+.ui-field__label { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--color-text-primary); }
+.ui-field__hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
+.ui-field__error { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-status-error); }
+
+.ui-input {
+  box-sizing: border-box; width: 100%; height: var(--control-h); padding: 0 var(--space-3);
+  border: 1px solid var(--color-border-default); border-radius: var(--control-radius);
+  background: var(--color-bg-surface); color: var(--color-text-primary);
+  font: inherit; font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body);
+  transition: border-color var(--motion), box-shadow var(--motion);
+}
+.ui-input--lg { height: var(--control-h-lg); }
+.ui-input::placeholder { color: var(--color-text-placeholder); }
+.ui-input:hover:not(:disabled) { border-color: var(--color-border-strong); }
+.ui-input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-color: var(--color-action-primary); }
+.ui-input[aria-invalid="true"] { border-color: var(--color-status-error); }
+.ui-input:disabled { cursor: not-allowed; color: var(--color-text-disabled); background: var(--color-bg-track); }
+.ui-textarea { height: auto; min-height: 80px; padding: var(--space-2) var(--space-3); resize: vertical; }
+
+.ui-search { position: relative; display: inline-flex; align-items: center; width: 100%; }
+.ui-search__icon { position: absolute; left: var(--space-3); display: inline-flex; color: var(--color-text-secondary); pointer-events: none; }
+.ui-search__input { padding-left: calc(var(--space-3) + 24px); padding-right: calc(var(--space-2) + var(--control-h)); }
+.ui-search__input::-webkit-search-cancel-button { display: none; }
+.ui-search__clear { position: absolute; right: 0; }
+
+.ui-select { position: relative; display: inline-flex; align-items: center; width: 100%; }
+.ui-select__control { appearance: none; padding-right: calc(var(--space-3) + 24px); cursor: pointer; }
+.ui-select--lg .ui-select__control { height: var(--control-h-lg); }
+.ui-select__chevron { position: absolute; right: var(--space-3); display: inline-flex; color: var(--color-text-secondary); pointer-events: none; }
+
+.ui-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-primary); cursor: pointer; }
+.ui-check__box { width: 16px; height: 16px; margin: 0; border-radius: var(--radius-xs); accent-color: var(--color-action-primary); cursor: pointer; }
+.ui-check__box:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
+
+/* окно */
+.ui-dialog {
+  box-sizing: border-box; max-width: none; max-height: 90vh; padding: var(--space-6); overflow: auto;
+  border: 1px solid var(--color-border-default); border-radius: var(--radius-2xl);
+  background: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: var(--shadow-dialog);
+  font-family: var(--font-ui);
+}
+.ui-dialog::backdrop { background: var(--color-overlay); }
+.ui-dialog--sm { width: min(480px, calc(100vw - 32px)); }
+.ui-dialog--md { width: min(640px, calc(100vw - 32px)); }
+.ui-dialog--lg { width: min(1000px, calc(100vw - 32px)); }
+@media (max-width: 700px) {
+  .ui-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
+}
+
+/* меню: пункты — кнопки; «выбрано» — цветом текста и галочкой */
+.dd-menu {
+  background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-popover); color: var(--color-text-primary); font-family: var(--font-ui);
+}
+.dd--start > .dd-menu.menu { left: 0; right: auto; }
+.menu button {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%;
+  min-height: var(--control-h); padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-sm);
+  background: none; color: var(--color-text-primary); font: inherit; font-family: var(--font-ui);
+  font-size: var(--fs-body); line-height: var(--lh-body); text-align: left; cursor: pointer;
+  transition: background var(--motion), color var(--motion);
+}
+.menu button:hover { background: var(--color-bg-hover); }
+.menu button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; background: var(--color-bg-hover); }
+.menu button[aria-pressed="true"] { color: var(--color-action-primary); }
+.menu button[aria-pressed="true"]::after { content: "✓"; font-weight: 600; }
+.menu button.danger { color: var(--color-status-error); }
+.menu hr { border: 0; border-top: 1px solid var(--color-border-default); margin: var(--space-1) 0; }
-- 
2.47.2


From 0a1fd832ff514d9a0b6ccb96aeff62e8edb293aa Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:15:25 +0400
Subject: [PATCH 07/23] =?UTF-8?q?refactor(web):=20=D0=BE=D0=B1=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B8=D0=B7=20Jira=20?=
 =?UTF-8?q?=E2=80=94=20=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BE=D0=B1=D0=BE=D0=BB=D0=BE=D1=87=D0=BA=D0=B8,=20?=
 =?UTF-8?q?=D0=B4=D0=BE=D1=81=D0=BA=D0=B0=20=D1=85=D1=80=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=82=20=D1=82=D0=BE=D0=BB=D1=8C=D0=BA=D0=BE=20=D0=B8=D1=81?=
 =?UTF-8?q?=D1=82=D0=BE=D1=87=D0=BD=D0=B8=D0=BA=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/App.tsx                       |   3 +-
 web/src/board/BoardPage.tsx           |   4 +-
 web/src/board/components/Toolbar.tsx  |  12 +-
 web/src/board/status.test.ts          |  12 +-
 web/src/board/status.ts               |  19 +--
 web/src/board/useBoardSource.test.tsx | 195 +++-------------------
 web/src/board/useBoardSource.ts       | 133 ++-------------
 web/src/shell/RefreshProvider.tsx     | 169 ++++++++++++++++++++
 web/src/shell/refresh.test.tsx        | 222 ++++++++++++++++++++++++++
 web/src/shell/refresh.ts              |  20 +++
 web/src/shell/refreshStatus.test.ts   |  20 +++
 web/src/shell/refreshStatus.ts        |  32 ++++
 web/src/test/batchHub.ts              |  35 ++++
 web/src/test/render.tsx               |   3 +-
 14 files changed, 543 insertions(+), 336 deletions(-)
 create mode 100644 web/src/shell/RefreshProvider.tsx
 create mode 100644 web/src/shell/refresh.test.tsx
 create mode 100644 web/src/shell/refresh.ts
 create mode 100644 web/src/shell/refreshStatus.test.ts
 create mode 100644 web/src/shell/refreshStatus.ts
 create mode 100644 web/src/test/batchHub.ts

diff --git a/web/src/App.tsx b/web/src/App.tsx
index c5c022c..34645c9 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router";
 import { makeQueryClient } from "./api/queryClient.ts";
 import { AuthGate } from "./auth/AuthGate.tsx";
+import { RefreshProvider } from "./shell/RefreshProvider.tsx";
 import { routes } from "./routes.tsx";
 import "./styles/tokens.css";
 import "./styles/base.css";
@@ -15,7 +16,7 @@ export function App({ router }: { router?: Router }) {
   const [r] = useState(() => router ?? createBrowserRouter(routes, { basename: "/app" }));
   return (
     <QueryClientProvider client={client}>
-      <AuthGate><RouterProvider router={r} /></AuthGate>
+      <AuthGate><RefreshProvider><RouterProvider router={r} /></RefreshProvider></AuthGate>
     </QueryClientProvider>
   );
 }
diff --git a/web/src/board/BoardPage.tsx b/web/src/board/BoardPage.tsx
index 8ad3c78..a075816 100644
--- a/web/src/board/BoardPage.tsx
+++ b/web/src/board/BoardPage.tsx
@@ -67,9 +67,9 @@ export function BoardPage({ project }: { project: string }) {
   return (
     <div data-testid="page-board">
       <div className="sticky" ref={headRef}>
-        <Toolbar label={src.label} title={src.title} status={src.status} refreshing={src.refreshing} byDate={prefs.filters.byDate}
+        <Toolbar label={src.label} title={src.title} status={src.status} byDate={prefs.filters.byDate}
           snap={prefs.snap} model={src.model} vis={vis} problemCount={problemCount(vis.problems)} problemsOpen={prefs.problems}
-          tableOpen={prefs.table} onReload={src.reload} onRefresh={() => void src.refreshFromJira()} onFile={onFile}
+          tableOpen={prefs.table} onReload={src.reload} onFile={onFile}
           onProblems={() => prefs.toggle("problems")} onExport={onExport} onTable={() => prefs.toggle("table")}
           onSnap={() => prefs.toggle("snap")} onReset={prefs.resetLayout} />
         <FilterBar model={src.model} prefs={prefs} />
diff --git a/web/src/board/components/Toolbar.tsx b/web/src/board/components/Toolbar.tsx
index 5609b66..f367126 100644
--- a/web/src/board/components/Toolbar.tsx
+++ b/web/src/board/components/Toolbar.tsx
@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { useJiraRefresh } from "../../shell/refresh.ts";
+import { refreshText } from "../../shell/refreshStatus.ts";
 import { applyTheme, readTheme, saveTheme, THEME_NAMES, THEMES, type Theme } from "../../shell/theme.ts";
 import { statusText, type BoardStatus } from "../status.ts";
 import type { BoardModel, Visible } from "../types.ts";
@@ -6,9 +8,9 @@ import { NOT_IN_HUB } from "../constants.ts";
 import { Dropdown } from "../../ui/index.ts";
 
 interface ToolbarProps {
-  label: string; title: string; status: BoardStatus | null; refreshing: boolean; byDate: boolean; snap: boolean;
+  label: string; title: string; status: BoardStatus | null; byDate: boolean; snap: boolean;
   model: BoardModel; vis: Visible; problemCount: number; problemsOpen: boolean; tableOpen: boolean;
-  onReload(): void; onRefresh(): void; onFile(name: string, text: string): void; onProblems(): void;
+  onReload(): void; onFile(name: string, text: string): void; onProblems(): void;
   onExport(): void; onTable(): void; onSnap(): void; onReset(): void;
 }
 
@@ -16,7 +18,9 @@ export function Toolbar(p: ToolbarProps) {
   const [theme, setTheme] = useState<Theme>(readTheme);
   const [confirm, setConfirm] = useState(false);
   useEffect(() => { if (!confirm) return; const t = setTimeout(() => setConfirm(false), 8000); return () => clearTimeout(t); }, [confirm]);
-  const st = p.status ? statusText(p.status) : null;
+  const refresh = useJiraRefresh();   // кнопка и ход пакета временно здесь; в верхней панели — с Task 5
+  const rt = refresh.event ? refreshText(refresh.event) : null;
+  const st = p.status ? statusText(p.status) : rt ? { text: rt.text, warn: rt.tone === "error" || rt.tone === "warning" } : null;
   const m = p.model, v = p.vis, r = v.removed;
   const coreShown = v.nodes.filter((n) => !n.dim).length, ctxShown = v.nodes.length - coreShown;
   const nextTheme = () => { const t = THEMES[(THEMES.indexOf(theme) + 1) % THEMES.length]; setTheme(t); saveTheme(t); applyTheme(t); };
@@ -26,7 +30,7 @@ export function Toolbar(p: ToolbarProps) {
       <span className="src">
         <span className="file-name" title={p.title}>{p.label}</span>
         <button type="button" className="link" title="Загрузить снимок зеркала хаба заново, без обращения к Jira" onClick={p.onReload}>Перечитать</button>
-        <button type="button" className="link" disabled={p.refreshing} onClick={p.onRefresh}
+        <button type="button" className="link" disabled={refresh.busy} onClick={() => void refresh.start()}
           title="Поставить в хаб пакет «обновление по базовой JQL» и дождаться его: агент перечитает задачи из Jira">Обновить из Jira</button>
         <label className="link" title="CSV из фильтра Jira или JSON, выгруженный этой доской. JSON при работе с хабом переносит только расстановку карточек, дорожки и фильтры; CSV показывает снимок файла до «Перечитать»">
           файл…
diff --git a/web/src/board/status.test.ts b/web/src/board/status.test.ts
index e5ef803..35b1632 100644
--- a/web/src/board/status.test.ts
+++ b/web/src/board/status.test.ts
@@ -2,16 +2,8 @@ import { describe, expect, it } from "vitest";
 import { statusText } from "./status.ts";
 
 describe("statusText", () => {
-  it("пакет: офлайн, очередь, остаток, повтор", () => {
-    expect(statusText({ kind: "batch", id: 7, phase: "queued", remaining: 12, agentOffline: true, retrying: false }))
-      .toEqual({ text: "агент офлайн — пакет выполнится, когда он выйдет на связь; пакет #7 в очереди, осталось ~12 с…", warn: false });
-    expect(statusText({ kind: "batch", id: 7, phase: "running", remaining: 0, agentOffline: false, retrying: true }))
-      .toEqual({ text: "пакет #7 выполняется… (хаб не отвечает, повтор через 3 с)", warn: true });
-  });
-  it("исходы и ошибки", () => {
-    expect(statusText({ kind: "batch-failed", id: 7, error: "429" })).toEqual({ text: "пакет #7 не выполнен: 429", warn: true });
-    expect(statusText({ kind: "batch-lost", id: 7, reason: "пакета нет в хабе" }).text)
-      .toBe("пакет #7: пакета нет в хабе — опрос остановлен, «Обновить из Jira» снова доступна");
+  it("состояния доски", () => {
+    expect(statusText({ kind: "loading" })).toEqual({ text: "загрузка данных хаба…", warn: false });
     expect(statusText({ kind: "hub-down", hasData: true, fromFile: false }).text).toBe("хаб не отвечает — показаны прежние данные");
     expect(statusText({ kind: "hub-down", hasData: true, fromFile: true }).text).toBe("хаб не отвечает — на доске снимок из файла");
     expect(statusText({ kind: "file-error", fileName: "a.csv", reason: "в файле нет строк с задачами" }).text)
diff --git a/web/src/board/status.ts b/web/src/board/status.ts
index 0a401bd..2860e7b 100644
--- a/web/src/board/status.ts
+++ b/web/src/board/status.ts
@@ -1,13 +1,6 @@
-export const POLL_MS = 3000;          // период опроса пакета, мс (как у links.html)
-export const MAX_POLL_ERRORS = 5;     // столько ошибок «хаб не отвечает» подряд — и опрос пакета останавливается (M-4)
-
+// события строки состояния доски; ход пакета обновления из Jira — в оболочке (shell/refreshStatus.ts)
 export type BoardStatus =
   | { kind: "loading" }
-  | { kind: "batch"; id: number; phase: "queued" | "running"; remaining: number; agentOffline: boolean; retrying: boolean }
-  | { kind: "batch-done"; id: number }
-  | { kind: "batch-failed"; id: number; error: string }
-  | { kind: "batch-cancelled"; id: number }
-  | { kind: "batch-lost"; id: number; reason: string }
   | { kind: "hub-down"; hasData: boolean; fromFile: boolean }
   | { kind: "file-error"; fileName: string; reason: string }
   | { kind: "json-applied"; fileName: string }
@@ -17,16 +10,6 @@ export type BoardStatus =
 export function statusText(s: BoardStatus): { text: string; warn: boolean } {
   switch (s.kind) {
     case "loading": return { text: "загрузка данных хаба…", warn: false };
-    case "batch": {
-      const off = s.agentOffline ? "агент офлайн — пакет выполнится, когда он выйдет на связь; " : "";
-      const left = s.remaining ? `, осталось ~${s.remaining} с` : "";
-      const retry = s.retrying ? ` (хаб не отвечает, повтор через ${POLL_MS / 1000} с)` : "";
-      return { text: `${off}пакет #${s.id} ${s.phase === "queued" ? "в очереди" : "выполняется"}${left}…${retry}`, warn: s.retrying };
-    }
-    case "batch-done": return { text: `пакет #${s.id} выполнен`, warn: false };
-    case "batch-failed": return { text: `пакет #${s.id} не выполнен: ${s.error}`, warn: true };
-    case "batch-cancelled": return { text: `пакет #${s.id} отменён`, warn: true };
-    case "batch-lost": return { text: `пакет #${s.id}: ${s.reason} — опрос остановлен, «Обновить из Jira» снова доступна`, warn: true };
     case "hub-down": return {
       text: s.fromFile ? "хаб не отвечает — на доске снимок из файла"
         : s.hasData ? "хаб не отвечает — показаны прежние данные" : "хаб не отвечает: запустите хаб (jira-hub serve) и нажмите «Перечитать»",
diff --git a/web/src/board/useBoardSource.test.tsx b/web/src/board/useBoardSource.test.tsx
index 73ec91e..f426652 100644
--- a/web/src/board/useBoardSource.test.tsx
+++ b/web/src/board/useBoardSource.test.tsx
@@ -1,49 +1,23 @@
 import { QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
 import type { ReactNode } from "react";
 import { beforeEach, describe, expect, it } from "vitest";
 import { qk } from "../api/queries.ts";
 import { makeQueryClient } from "../api/queryClient.ts";
-import { getToken, setToken } from "../auth/token.ts";
-import { json, mockFetch } from "../test/fetchMock.ts";
+import { setToken } from "../auth/token.ts";
+import { json } from "../test/fetchMock.ts";
+import { batch, deferred, fixture as fx, hub, SNAP } from "../test/batchHub.ts";
+import { useJiraRefresh } from "../shell/refresh.ts";
+import { RefreshProvider } from "../shell/RefreshProvider.tsx";
 import { dictsFromSettings } from "./dicts.ts";
 import settings from "./__fixtures__/settings.json";
 import { useBoardSource } from "./useBoardSource.ts";
 
-const fx = (name: string) => readFileSync(join(import.meta.dirname, "__fixtures__", name), "utf8");
-const SNAP = JSON.parse(fx("hub-basic.board.json"));
 const CSV = fx("jira-export.csv");
 const { dicts } = dictsFromSettings(settings);
-const hook = (client = makeQueryClient()) => ({ client, ...renderHook(() => useBoardSource(dicts, "AWPCA", { pollMs: 10 }),
-  { wrapper: ({ children }: { children: ReactNode }) => <QueryClientProvider client={client}>{children}</QueryClientProvider> }) });
-const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
-const deferred = <T,>() => { let resolve!: (v: T) => void; const promise = new Promise<T>((r) => { resolve = r; }); return { promise, resolve }; };
-
-// хаб в памяти: снимок, список пакетов, пакет по id; счётчики запросов
-function hub(over: Partial<Record<string, (url: URL, body: unknown) => Response | Promise<Response>>> = {}) {
-  const calls: string[] = [];
-  const inFlight: Record<string, number> = {}, maxInFlight: Record<string, number> = {};
-  const fetch = mockFetch(async (method, url, body) => {
-    const k = `${method} ${url.pathname}`;
-    calls.push(k);
-    inFlight[k] = (inFlight[k] ?? 0) + 1;
-    maxInFlight[k] = Math.max(maxInFlight[k] ?? 0, inFlight[k]);
-    try {
-      const h = over[k] ?? over[`${method} ${url.pathname.replace(/\d+$/, ":id")}`];
-      if (h) return await h(url, body);
-      if (k === "GET /board") return json(200, SNAP);
-      if (k === "GET /batches") return json(200, { batches: [] });
-      if (k === "GET /agent") return json(200, { online: true, last_seen_at: null, warning: null });
-      if (k === "POST /refresh") return json(201, { id: 7, estimate_seconds: 5, count: 1 });
-      return json(404, { error: "not_found" });
-    } finally { inFlight[k] -= 1; }
-  });
-  return { fetch, calls, count: (k: string) => calls.filter((c) => c === k).length, maxInFlight: (k: string) => maxInFlight[k] ?? 0 };
-}
-const batch = (status: string, cmd: Record<string, unknown> = { status: "done" }) =>
-  json(200, { id: 7, title: "Обновление", author: "viewer", created_at: "", cancelled_at: null, status, counts: {}, remaining_seconds: 0, commands: [{ id: 1, seq: 1, type: "refresh", error: null, finished_at: null, ...cmd }] });
+// доска под провайдером обновления из Jira (как в приложении); refresh — состояние оболочки
+const hook = (client = makeQueryClient()) => ({ client, ...renderHook(() => ({ ...useBoardSource(dicts, "AWPCA"), refresh: useJiraRefresh() }),
+  { wrapper: ({ children }: { children: ReactNode }) => <QueryClientProvider client={client}><RefreshProvider pollMs={10}>{children}</RefreshProvider></QueryClientProvider> }) });
 
 describe("useBoardSource", () => {
   beforeEach(() => setToken("tok"));
@@ -73,93 +47,17 @@ describe("useBoardSource", () => {
     await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
   });
 
-  it("M-2: двойное нажатие — один пакет и один опрос за раз", async () => {
-    let polls = 0;
-    const h = hub({ "GET /batches/:id": () => (++polls < 4 ? batch("running") : batch("done")) });
-    const { result } = hook();
-    await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    await act(async () => { void result.current.refreshFromJira(); await result.current.refreshFromJira(); });
-    expect(h.count("POST /refresh")).toBe(1);
-    expect(result.current.refreshing).toBe(true);
-    await waitFor(() => expect(result.current.status).toEqual({ kind: "batch-done", id: 7 }));
-    expect(result.current.refreshing).toBe(false);
-    expect(h.maxInFlight("GET /batches/7")).toBe(1);
-    expect(h.count("GET /board")).toBe(2);   // по завершении снимок перечитан
-    expect(h.count("GET /batches")).toBe(1);   // T10.1: после своего пакета список пакетов не перечитывается
-  });
-
-  it("M-3: незавершённый пакет viewer подхватывается и после «Перечитать»", async () => {
-    let listed: unknown[] = [];
-    const h = hub({ "GET /batches": () => json(200, { batches: listed }), "GET /batches/:id": () => batch("running") });
-    const { result } = hook();
-    await waitFor(() => expect(h.count("GET /batches")).toBe(1));
-    expect(result.current.refreshing).toBe(false);
-    listed = [{ id: 7, author: "viewer", status: "running" }, { id: 6, author: "chat", status: "running" }];
-    act(() => result.current.reload());
-    await waitFor(() => expect(result.current.refreshing).toBe(true));
-    await waitFor(() => expect(result.current.status).toMatchObject({ kind: "batch", id: 7, phase: "running" }));
-  });
-
-  it("M-4: 404 на опросе — опрос остановлен, кнопка доступна", async () => {
-    const h = hub({ "GET /batches/:id": () => json(404, { error: "not_found", detail: "batch" }) });
-    const { result } = hook();
-    await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    await act(() => result.current.refreshFromJira());
-    await waitFor(() => expect(result.current.status).toMatchObject({ kind: "batch-lost", id: 7 }));
-    expect(result.current.refreshing).toBe(false);
-    const n = h.count("GET /batches/7");
-    await sleep(50);
-    expect(h.count("GET /batches/7")).toBe(n);
-  });
-
-  for (const status of [400, 422]) {
-    it(`T10.2: ${status} на опросе — опрос остановлен, batch-lost с detail, refreshing сброшен`, async () => {
-      const h = hub({ "GET /batches/:id": () => json(status, { error: "bad_request", detail: "плохой пакет" }) });
-      const { result } = hook();
-      await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-      await act(() => result.current.refreshFromJira());
-      await waitFor(() => expect(result.current.status).toMatchObject({ kind: "batch-lost", id: 7, reason: expect.stringContaining("плохой пакет") }));
-      expect(result.current.refreshing).toBe(false);
-      const n = h.count("GET /batches/7");
-      await sleep(50);
-      expect(h.count("GET /batches/7")).toBe(n);
-    });
-  }
-
-  it("M-4: 5 ошибок «хаб не отвечает» подряд — опрос остановлен", async () => {
-    const h = hub({ "GET /batches/:id": () => { throw new TypeError("Failed to fetch"); } });
-    const { result } = hook();
-    await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    await act(() => result.current.refreshFromJira());
-    await waitFor(() => expect(result.current.status).toMatchObject({ kind: "batch-lost", reason: "хаб не отвечает" }));
-    expect(h.count("GET /batches/7")).toBe(5);
-    await sleep(50);
-    expect(h.count("GET /batches/7")).toBe(5);
-    expect(result.current.refreshing).toBe(false);
-  });
-
-  it("пакет с ошибкой команды — текст ошибки; агент офлайн — предупреждение в статусе", async () => {
-    let polls = 0;
-    hub({
-      "GET /agent": () => json(200, { online: false, last_seen_at: null, warning: null }),
-      "GET /batches/:id": () => (++polls < 3 ? batch("running") : batch("done", { status: "failed", error: "Jira 500" })),
-    });
-    const { result } = hook();
-    await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    await act(() => result.current.refreshFromJira());
-    await waitFor(() => expect(result.current.status).toMatchObject({ kind: "batch", agentOffline: true }));
-    await waitFor(() => expect(result.current.status).toEqual({ kind: "batch-failed", id: 7, error: "Jira 500" }));
-  });
 
   it("M-1: пакет, завершившийся при показанном файле, не заменяет файл", async () => {
     let polls = 0;
     hub({ "GET /batches/:id": () => (++polls < 3 ? batch("running") : batch("done")) });
     const { result } = hook();
     await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    await act(() => result.current.refreshFromJira());
+    await act(() => result.current.refresh.start());
     act(() => { result.current.loadFile("jira-export.csv", CSV); });
-    await waitFor(() => expect(result.current.status).toEqual({ kind: "batch-done", id: 7 }));
+    await waitFor(() => expect(result.current.refresh.event).toEqual({ kind: "batch-done", id: 7 }));
     expect(result.current.source).toBe("file");
+    expect(result.current.label).toBe("jira-export.csv (из файла)");
   });
 
   it("хаб остановлен при «Перечитать» — прежние данные и hub-down", async () => {
@@ -193,16 +91,18 @@ describe("useBoardSource", () => {
     expect(result.current.status).toEqual({ kind: "json-applied", fileName: "old-board.json" });
   });
 
-  it("T10.3: «Перечитать» и CSV во время пакета не стирают строку пакета", async () => {
+  it("T10.3: «Перечитать» и CSV во время пакета не трогают ход пакета; шапка доски — без события пакета", async () => {
     hub({ "GET /batches/:id": () => batch("running") });
     const { result } = hook();
     await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    await act(() => result.current.refreshFromJira());
-    await waitFor(() => expect(result.current.status).toMatchObject({ kind: "batch", id: 7 }));
+    await act(() => result.current.refresh.start());
+    await waitFor(() => expect(result.current.refresh.event).toMatchObject({ kind: "batch", id: 7 }));
     act(() => result.current.reload());
-    expect(result.current.status).toMatchObject({ kind: "batch", id: 7 });
+    expect(result.current.status).toBeNull();
+    expect(result.current.refresh.event).toMatchObject({ kind: "batch", id: 7 });
     act(() => { result.current.loadFile("jira-export.csv", CSV); });
-    expect(result.current.status).toMatchObject({ kind: "batch", id: 7 });
+    expect(result.current.status).toBeNull();
+    expect(result.current.refresh.event).toMatchObject({ kind: "batch", id: 7 });
   });
 
   it("T10.4: JSON-снимок без данных хаба — «на доске снимок из файла»", async () => {
@@ -214,16 +114,6 @@ describe("useBoardSource", () => {
     expect(result.current.status).toEqual({ kind: "hub-down", hasData: true, fromFile: true });
   });
 
-  it("«Обновить из Jira» при показанном CSV: хаб недоступен — «на доске снимок из файла»", async () => {
-    hub({ "GET /agent": () => { throw new TypeError("Failed to fetch"); } });
-    const { result } = hook();
-    await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    act(() => { result.current.loadFile("jira-export.csv", CSV); });
-    expect(result.current.source).toBe("file");
-    await act(() => result.current.refreshFromJira());
-    expect(result.current.status).toEqual({ kind: "hub-down", hasData: true, fromFile: true });
-  });
-
   it("T10.4: пакет завершился при показанном CSV, хаб не ответил — «на доске снимок из файла»", async () => {
     let polls = 0, down = false;
     hub({
@@ -232,56 +122,9 @@ describe("useBoardSource", () => {
     });
     const { result } = hook();
     await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    await act(() => result.current.refreshFromJira());
+    await act(() => result.current.refresh.start());
     act(() => { result.current.loadFile("jira-export.csv", CSV); });
     await waitFor(() => expect(result.current.status).toEqual({ kind: "hub-down", hasData: true, fromFile: true }));
     expect(result.current.source).toBe("file");
   });
-
-  it("уход со страницы и возврат во время пакета — пакет подхвачен снова, один опрос (Review Focus 2)", async () => {
-    let listed: unknown[] = [];
-    const h = hub({ "GET /batches": () => json(200, { batches: listed }), "GET /batches/:id": () => batch("running") });
-    const first = hook();
-    await waitFor(() => expect(first.result.current.model.nodes.length).toBe(10));
-    await act(() => first.result.current.refreshFromJira());
-    listed = [{ id: 7, author: "viewer", status: "running" }];
-    first.unmount();
-    const second = hook(first.client);
-    await waitFor(() => expect(second.result.current.status).toMatchObject({ kind: "batch", id: 7 }));
-    expect(second.result.current.refreshing).toBe(true);
-    expect(h.maxInFlight("GET /batches/7")).toBe(1);
-  });
-
-  it("T10.6: незавершённый пакет viewer без refresh не подхватывается", async () => {
-    const h = hub({
-      "GET /batches": () => json(200, { batches: [{ id: 7, author: "viewer", status: "running" }] }),
-      "GET /batches/:id": () => batch("running", { type: "ensure_fields" }),
-    });
-    const { result } = hook();
-    await waitFor(() => expect(h.count("GET /batches/7")).toBe(1));
-    await sleep(50);
-    expect(result.current.refreshing).toBe(false);
-    expect(h.count("GET /batches/7")).toBe(1);   // только проверка типа, опроса нет
-  });
-
-  it("401 на запуске пакета с текущим токеном — токен сброшен", async () => {
-    hub({ "GET /agent": () => json(401, { error: "unauthorized" }) });
-    const { result } = hook();
-    await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    await act(() => result.current.refreshFromJira());
-    expect(getToken()).toBe("");
-  });
-
-  it("запоздавший 401 прежнему токену не сбрасывает новый токен", async () => {
-    const slow = deferred<Response>();
-    hub({ "GET /agent": () => slow.promise });
-    const { result } = hook();
-    await waitFor(() => expect(result.current.model.nodes.length).toBe(10));
-    let run!: Promise<void>;
-    act(() => { run = result.current.refreshFromJira(); });
-    setToken("new-tok");
-    slow.resolve(json(401, { error: "unauthorized" }));
-    await act(() => run);
-    expect(getToken()).toBe("new-tok");
-  });
 });
diff --git a/web/src/board/useBoardSource.ts b/web/src/board/useBoardSource.ts
index 2ca77d6..a4d7379 100644
--- a/web/src/board/useBoardSource.ts
+++ b/web/src/board/useBoardSource.ts
@@ -1,20 +1,17 @@
-// источник данных доски: снимок хаба (GET /board) или файл (CSV/JSON); обновление из Jira — пакет refresh от имени
-// viewer и опрос его хода. Устройство закрывает недочёты jira-hub#20: явный источник (M-1), одна кнопка и один опрос
-// (M-2), подхват незавершённого пакета после любой загрузки (M-3), остановка опроса (M-4), одно событие состояния (M-5)
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+// источник данных доски: снимок хаба (GET /board) или файл (CSV/JSON). Обновление из Jira живёт в оболочке
+// (shell/RefreshProvider.tsx); здесь — явный источник (M-1) и одно событие состояния доски (M-5)
+import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { api, ApiError, AuthError, dropTokenOn, HubDownError } from "../api/client.ts";
+import { AuthError, dropTokenOn, HubDownError } from "../api/client.ts";
 import { qk, useBoard } from "../api/queries.ts";
-import type { AgentView, Batch, CreatedBatch } from "../api/types.ts";
 import { fromCsv } from "./model/fromCsv.ts";
 import { fromHub } from "./model/fromHub.ts";
 import { fromJson } from "./model/fromJson.ts";
 import { emptyModel, fmtStamp } from "./model/util.ts";
-import { MAX_POLL_ERRORS, POLL_MS, type BoardStatus } from "./status.ts";
+import type { BoardStatus } from "./status.ts";
 import type { BoardModel, Dicts, JsonImport } from "./types.ts";
 
 type Source = { kind: "hub" } | { kind: "file"; model: BoardModel };
-interface Active { id: number; agentOffline: boolean }
 
 export interface BoardSource {
   model: BoardModel;
@@ -22,32 +19,21 @@ export interface BoardSource {
   label: string;
   title: string;
   status: BoardStatus | null;
-  refreshing: boolean;
   reload(): void;
-  refreshFromJira(): Promise<void>;
   loadFile(fileName: string, text: string): JsonImport | null;
 }
 
-const terminal = (b: Batch | undefined) => !!b && (b.status === "done" || b.status === "cancelled");
-
-export function useBoardSource(dicts: Dicts | null, project: string, { pollMs = POLL_MS }: { pollMs?: number } = {}): BoardSource {
+export function useBoardSource(dicts: Dicts | null, project: string): BoardSource {
   const qc = useQueryClient();
   const board = useBoard(project);
   const [source, setSource] = useState<Source>({ kind: "hub" });
   const [event, setEvent] = useState<BoardStatus | null>(null);
-  const [active, setActive] = useState<Active | null>(null);
-  const [starting, setStarting] = useState(false);
-  const startingRef = useRef(false);
-  const failures = useRef(0);
 
   const hubModel = useMemo(() => (board.data && dicts ? fromHub(board.data, dicts) : null), [board.data, dicts]);
 
   // свежие значения для эффектов, которые не должны перезапускаться от их смены
   const sourceRef = useRef(source);
   useEffect(() => { sourceRef.current = source; }, [source]);
-  const activeRef = useRef(active);
-  useEffect(() => { activeRef.current = active; }, [active]);
-  const skipPickup = useRef(false);   // T10.1: снимок, перечитанный после своего пакета, — пакет уже завершён
 
   const report = useCallback((e: unknown, hasData: boolean, fromFile = false) => {
     if (e instanceof AuthError) dropTokenOn(e);
@@ -58,113 +44,12 @@ export function useBoardSource(dicts: Dicts | null, project: string, { pollMs =
   // хаб не ответил на снимок: прежние данные остаются (M-5 — отдельное событие, не затирается другими)
   useEffect(() => {
     if (!board.error || board.error instanceof AuthError) return;
-    skipPickup.current = false;
     report(board.error, !!board.data, sourceRef.current.kind === "file");
   }, [board.error, board.errorUpdatedAt, board.data, report]);
 
-  // M-3 #20: после каждой успешной загрузки снимка — подхватить незавершённый пакет обновления от viewer
-  useEffect(() => {
-    if (!board.dataUpdatedAt) return;
-    if (skipPickup.current) { skipPickup.current = false; return; }
-    if (activeRef.current) return;
-    let gone = false;
-    (async () => {
-      const r = await api.get<{ batches: Batch[] }>("/batches", { limit: 20 });
-      const b = r.batches.find((x) => x.author === "viewer" && (x.status === "queued" || x.status === "running"));
-      if (!b || gone) return;
-      const full = await api.get<Batch>(`/batches/${b.id}`);   // T10.6: в списке нет команд — тип смотрим в пакете (R-2)
-      if (gone || full.commands?.[0]?.type !== "refresh") return;
-      failures.current = 0;
-      setActive((cur) => cur ?? { id: b.id, agentOffline: false });
-    })().catch(() => { /* не критично: подхватим при следующей загрузке */ });
-    return () => { gone = true; };
-  }, [board.dataUpdatedAt]);
-
-  // M-2, M-4: один опрос пакета; остановка на завершении, любой 4xx (T10.2), 401 и после MAX_POLL_ERRORS ошибок подряд
-  const batch = useQuery({
-    queryKey: ["batch", active?.id ?? 0],
-    enabled: active !== null,
-    gcTime: 0,
-    staleTime: 0,
-    queryFn: async () => {
-      try {
-        const b = await api.get<Batch>(`/batches/${active!.id}`);
-        failures.current = 0;
-        return b;
-      } catch (e) {
-        if (e instanceof HubDownError) failures.current += 1;
-        throw e;
-      }
-    },
-    refetchInterval: (q) => {
-      const e = q.state.error;
-      if (terminal(q.state.data)) return false;
-      if (e instanceof AuthError || e instanceof ApiError) return false;   // любая 4xx не лечится повтором
-      if (failures.current >= MAX_POLL_ERRORS) return false;
-      return pollMs;
-    },
-    refetchIntervalInBackground: true,
-  });
-
-  const finish = useCallback((id: number) => {
-    failures.current = 0;
-    setActive(null);
-    qc.removeQueries({ queryKey: ["batch", id] });
-    skipPickup.current = true;
-    void qc.invalidateQueries({ queryKey: qk.board(project) });   // снимок обновится; показанный файл не заменяется (M-1)
-  }, [qc, project]);
-
-  useEffect(() => {
-    if (!active) return;
-    const b = batch.data, e = batch.error;
-    if (b && b.id === active.id && !batch.isError) {
-      if (terminal(b)) {
-        const cmd = b.commands?.[0];
-        setEvent(cmd?.status === "failed" ? { kind: "batch-failed", id: b.id, error: cmd.error || "ошибка агента" }
-          : b.status === "cancelled" || cmd?.status === "cancelled" || cmd?.status === "skipped" ? { kind: "batch-cancelled", id: b.id }
-          : { kind: "batch-done", id: b.id });
-        finish(b.id);
-        return;
-      }
-      setEvent({ kind: "batch", id: b.id, phase: b.status === "queued" ? "queued" : "running",
-        remaining: b.remaining_seconds, agentOffline: active.agentOffline, retrying: false });
-      return;
-    }
-    if (e instanceof ApiError) {
-      setEvent({ kind: "batch-lost", id: active.id, reason: e.status === 404 ? "пакета нет в хабе" : e.detail ?? e.message });
-      finish(active.id);
-    } else if (e instanceof HubDownError) {
-      if (failures.current >= MAX_POLL_ERRORS) {
-        setEvent({ kind: "batch-lost", id: active.id, reason: "хаб не отвечает" });
-        finish(active.id);
-      } else {
-        setEvent((cur) => (cur?.kind === "batch" ? { ...cur, retrying: true } : cur));
-      }
-    }
-  }, [batch.data, batch.error, batch.isError, batch.errorUpdatedAt, batch.dataUpdatedAt, active, finish]);
-
-  const refreshFromJira = useCallback(async () => {
-    if (startingRef.current || active) return;
-    startingRef.current = true;
-    setStarting(true);
-    try {
-      const agent = await api.get<AgentView>("/agent");
-      const b = await api.post<CreatedBatch>("/refresh", { full: true, author: "viewer" });
-      failures.current = 0;
-      setActive({ id: b.id, agentOffline: !agent.online });
-      setEvent({ kind: "batch", id: b.id, phase: "queued", remaining: b.estimate_seconds, agentOffline: !agent.online, retrying: false });
-    } catch (e) {
-      const fromFile = sourceRef.current.kind === "file";
-      report(e, !!board.data || fromFile, fromFile);
-    } finally {
-      startingRef.current = false;
-      setStarting(false);
-    }
-  }, [active, report, board.data]);
-
   const reload = useCallback(() => {
     setSource({ kind: "hub" });
-    setEvent((cur) => (cur?.kind === "batch" ? cur : null));
+    setEvent(null);
     void qc.refetchQueries({ queryKey: qk.board(project) });
   }, [qc, project]);
 
@@ -174,7 +59,7 @@ export function useBoardSource(dicts: Dicts | null, project: string, { pollMs =
     try {
       if (!isJson) {
         setSource({ kind: "file", model: fromCsv(text, fileName, dicts) });
-        setEvent((cur) => (cur?.kind === "batch" ? cur : null));
+        setEvent(null);
         return null;
       }
       const r = fromJson(text, fileName, dicts);
@@ -208,5 +93,5 @@ export function useBoardSource(dicts: Dicts | null, project: string, { pollMs =
     : label;
   const status: BoardStatus | null = event ?? (source.kind === "hub" && board.isPending ? { kind: "loading" } : null);
 
-  return { model, source: source.kind, label, title, status, refreshing: starting || active !== null, reload, refreshFromJira, loadFile };
+  return { model, source: source.kind, label, title, status, reload, loadFile };
 }
diff --git a/web/src/shell/RefreshProvider.tsx b/web/src/shell/RefreshProvider.tsx
new file mode 100644
index 0000000..33affe1
--- /dev/null
+++ b/web/src/shell/RefreshProvider.tsx
@@ -0,0 +1,169 @@
+// владелец состояния «Обновить из Jira»: один опрос пакета на всё приложение. Правила — прежние (jira-hub#20):
+// одна кнопка и один опрос (M-2), подхват незавершённого пакета после любой загрузки снимка (M-3), остановка опроса
+// (M-4, T10.2), только пакеты с первой командой refresh (T10.6)
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { api, ApiError, AuthError, dropTokenOn, HubDownError } from "../api/client.ts";
+import { qk } from "../api/queries.ts";
+import type { AgentView, Batch, CreatedBatch } from "../api/types.ts";
+import { RefreshContext, type JiraRefresh } from "./refresh.ts";
+import { DONE_VISIBLE_MS, MAX_POLL_ERRORS, POLL_MS, type RefreshEvent } from "./refreshStatus.ts";
+
+interface Active { id: number; agentOffline: boolean }
+
+const terminal = (b: Batch | undefined) => !!b && (b.status === "done" || b.status === "cancelled");
+
+export function RefreshProvider({ children, pollMs = POLL_MS }: { children: ReactNode; pollMs?: number }) {
+  const qc = useQueryClient();
+  const [event, setEvent] = useState<RefreshEvent | null>(null);
+  const [active, setActive] = useState<Active | null>(null);
+  const [starting, setStarting] = useState(false);
+  const startingRef = useRef(false);
+  const failures = useRef(0);
+  const activeRef = useRef(active);
+  useEffect(() => { activeRef.current = active; }, [active]);
+  // T10.1: сколько ближайших загрузок снимка — перечитывание после своего пакета (пакет уже завершён, подхватывать нечего)
+  const skipPickup = useRef(0);
+  const picking = useRef(false);
+
+  const agent = useQuery({
+    queryKey: ["agent"], refetchInterval: 60_000, refetchIntervalInBackground: true,
+    queryFn: () => api.get<AgentView>("/agent"),
+  });
+
+  const report = useCallback((e: unknown) => {
+    if (e instanceof AuthError) dropTokenOn(e);
+    else if (e instanceof HubDownError) setEvent({ kind: "hub-down" });
+    else setEvent({ kind: "error", message: e instanceof Error ? e.message : String(e) });
+  }, []);
+
+  // M-3 #20: подхватить незавершённый пакет обновления от viewer
+  const pickup = useCallback(() => {
+    if (activeRef.current || startingRef.current || picking.current) return;
+    picking.current = true;
+    (async () => {
+      const r = await api.get<{ batches: Batch[] }>("/batches", { limit: 20 });
+      const b = r.batches.find((x) => x.author === "viewer" && (x.status === "queued" || x.status === "running"));
+      if (!b) return;
+      const full = await api.get<Batch>(`/batches/${b.id}`);   // T10.6: в списке нет команд — тип смотрим в пакете (R-2)
+      if (full.commands?.[0]?.type !== "refresh" || activeRef.current || startingRef.current) return;
+      failures.current = 0;
+      setActive((cur) => cur ?? { id: b.id, agentOffline: false });
+    })().catch(() => { /* не критично: подхватим при следующей загрузке */ }).finally(() => { picking.current = false; });
+  }, []);
+
+  useEffect(() => {
+    pickup();
+    return qc.getQueryCache().subscribe((ev) => {
+      if (ev.type !== "updated" || ev.action.type !== "success" || ev.query.queryKey[0] !== "board") return;
+      if (skipPickup.current > 0) { skipPickup.current -= 1; return; }
+      pickup();
+    });
+  }, [qc, pickup]);
+
+  // M-2, M-4: один опрос пакета; остановка на завершении, любой 4xx (T10.2), 401 и после MAX_POLL_ERRORS ошибок подряд
+  const batch = useQuery({
+    queryKey: ["batch", active?.id ?? 0],
+    enabled: active !== null,
+    gcTime: 0,
+    staleTime: 0,
+    queryFn: async () => {
+      try {
+        const b = await api.get<Batch>(`/batches/${active!.id}`);
+        failures.current = 0;
+        return b;
+      } catch (e) {
+        if (e instanceof HubDownError) failures.current += 1;
+        throw e;
+      }
+    },
+    refetchInterval: (q) => {
+      const e = q.state.error;
+      if (terminal(q.state.data)) return false;
+      if (e instanceof AuthError || e instanceof ApiError) return false;   // любая 4xx не лечится повтором
+      if (failures.current >= MAX_POLL_ERRORS) return false;
+      return pollMs;
+    },
+    refetchIntervalInBackground: true,
+  });
+
+  const finish = useCallback((id: number) => {
+    failures.current = 0;
+    setActive(null);
+    qc.removeQueries({ queryKey: ["batch", id] });
+    // перечитывание активных снимков досок — после своего пакета, подхват не нужен; показанный файл не заменяется (M-1)
+    skipPickup.current = qc.getQueryCache().findAll({ queryKey: qk.boardAll, type: "active" }).length;
+    for (const key of [qk.boardAll, ["issues"], ["issue"], qk.projects]) void qc.invalidateQueries({ queryKey: key });
+  }, [qc]);
+
+  useEffect(() => {
+    if (!active) return;
+    const b = batch.data, e = batch.error;
+    if (b && b.id === active.id && !batch.isError) {
+      if (terminal(b)) {
+        const cmd = b.commands?.[0];
+        setEvent(cmd?.status === "failed" ? { kind: "batch-failed", id: b.id, error: cmd.error || "ошибка агента" }
+          : b.status === "cancelled" || cmd?.status === "cancelled" || cmd?.status === "skipped" ? { kind: "batch-cancelled", id: b.id }
+          : { kind: "batch-done", id: b.id });
+        finish(b.id);
+        return;
+      }
+      setEvent({ kind: "batch", id: b.id, phase: b.status === "queued" ? "queued" : "running",
+        remaining: b.remaining_seconds, agentOffline: active.agentOffline, retrying: false });
+      return;
+    }
+    if (e instanceof ApiError) {
+      setEvent({ kind: "batch-lost", id: active.id, reason: e.status === 404 ? "пакета нет в хабе" : e.detail ?? e.message });
+      finish(active.id);
+    } else if (e instanceof HubDownError) {
+      if (failures.current >= MAX_POLL_ERRORS) {
+        setEvent({ kind: "batch-lost", id: active.id, reason: "хаб не отвечает" });
+        finish(active.id);
+      } else {
+        setEvent((cur) => (cur?.kind === "batch" ? { ...cur, retrying: true } : cur));
+      }
+    }
+  }, [batch.data, batch.error, batch.isError, batch.errorUpdatedAt, batch.dataUpdatedAt, active, finish]);
+
+  // «пакет выполнен» гаснет сам
+  useEffect(() => {
+    if (event?.kind !== "batch-done") return;
+    const t = setTimeout(() => setEvent((cur) => (cur === event ? null : cur)), DONE_VISIBLE_MS);
+    return () => clearTimeout(t);
+  }, [event]);
+
+  const start = useCallback(async () => {
+    if (startingRef.current || activeRef.current) return;
+    startingRef.current = true;
+    setStarting(true);
+    try {
+      const a = await api.get<AgentView>("/agent");
+      const b = await api.post<CreatedBatch>("/refresh", { full: true, author: "viewer" });
+      failures.current = 0;
+      const next = { id: b.id, agentOffline: !a.online };
+      activeRef.current = next;
+      setActive(next);
+      setEvent({ kind: "batch", id: b.id, phase: "queued", remaining: b.estimate_seconds, agentOffline: !a.online, retrying: false });
+    } catch (e) {
+      report(e);
+    } finally {
+      startingRef.current = false;
+      setStarting(false);
+    }
+  }, [report]);
+
+  const track = useCallback((id: number) => {
+    if (activeRef.current) return;
+    failures.current = 0;
+    const next = { id, agentOffline: false };
+    activeRef.current = next;
+    setActive(next);
+    setEvent({ kind: "batch", id, phase: "queued", remaining: 0, agentOffline: false, retrying: false });
+  }, []);
+
+  const value = useMemo<JiraRefresh>(() => ({
+    event, busy: starting || active !== null, agent: agent.data ?? null, start, track,
+  }), [event, starting, active, agent.data, start, track]);
+
+  return <RefreshContext.Provider value={value}>{children}</RefreshContext.Provider>;
+}
diff --git a/web/src/shell/refresh.test.tsx b/web/src/shell/refresh.test.tsx
new file mode 100644
index 0000000..e3a5a17
--- /dev/null
+++ b/web/src/shell/refresh.test.tsx
@@ -0,0 +1,222 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { act, render, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useBoard, useIssues } from "../api/queries.ts";
+import { makeQueryClient } from "../api/queryClient.ts";
+import { getToken, setToken } from "../auth/token.ts";
+import { json } from "../test/fetchMock.ts";
+import { batch, deferred, hub, sleep } from "../test/batchHub.ts";
+import { useJiraRefresh, type JiraRefresh } from "./refresh.ts";
+import { RefreshProvider } from "./RefreshProvider.tsx";
+
+const wrap = (client = makeQueryClient()) => ({ children }: { children: ReactNode }) =>
+  <QueryClientProvider client={client}><RefreshProvider pollMs={10}>{children}</RefreshProvider></QueryClientProvider>;
+const refreshHook = (client = makeQueryClient()) => ({ client, ...renderHook(() => useJiraRefresh(), { wrapper: wrap(client) }) });
+
+describe("RefreshProvider", () => {
+  beforeEach(() => setToken("tok"));
+  afterEach(() => { vi.useRealTimers(); });
+
+  it("вне провайдера — понятная ошибка", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(() => renderHook(() => useJiraRefresh())).toThrow(/RefreshProvider/);
+    spy.mockRestore();
+  });
+
+  it("M-2: двойное нажатие — один пакет и один опрос за раз; по завершении board перечитан, список пакетов — нет", async () => {
+    let polls = 0;
+    const h = hub({ "GET /batches/:id": () => (++polls < 4 ? batch("running") : batch("done")) });
+    const { result } = renderHook(() => ({ r: useJiraRefresh(), b: useBoard("AWPCA") }), { wrapper: wrap() });
+    await waitFor(() => expect(result.current.b.data).toBeDefined());
+    await waitFor(() => expect(h.count("GET /batches")).toBeGreaterThanOrEqual(1));
+    const listed = h.count("GET /batches");
+    await act(async () => { void result.current.r.start(); await result.current.r.start(); });
+    expect(h.count("POST /refresh")).toBe(1);
+    expect(result.current.r.busy).toBe(true);
+    await waitFor(() => expect(result.current.r.event).toEqual({ kind: "batch-done", id: 7 }));
+    expect(result.current.r.busy).toBe(false);
+    expect(h.maxInFlight("GET /batches/7")).toBe(1);
+    await waitFor(() => expect(h.count("GET /board")).toBe(2));   // по завершении снимок перечитан
+    await sleep(30);
+    expect(h.count("GET /batches")).toBe(listed);   // T10.1: после своего пакета список пакетов не перечитывается
+  });
+
+  it("M-3: незавершённый пакет viewer подхватывается после загрузки снимка (в том числе повторной)", async () => {
+    let listed: unknown[] = [];
+    const h = hub({ "GET /batches": () => json(200, { batches: listed }), "GET /batches/:id": () => batch("running") });
+    const { result } = renderHook(() => ({ r: useJiraRefresh(), b: useBoard("AWPCA") }), { wrapper: wrap() });
+    await waitFor(() => expect(h.count("GET /batches")).toBeGreaterThanOrEqual(1));
+    expect(result.current.r.busy).toBe(false);
+    listed = [{ id: 7, author: "viewer", status: "running" }, { id: 6, author: "chat", status: "running" }];
+    await act(async () => { await result.current.b.refetch(); });
+    await waitFor(() => expect(result.current.r.busy).toBe(true));
+    await waitFor(() => expect(result.current.r.event).toMatchObject({ kind: "batch", id: 7, phase: "running" }));
+  });
+
+  it("M-3: пакет подхватывается при монтировании провайдера", async () => {
+    hub({ "GET /batches": () => json(200, { batches: [{ id: 7, author: "viewer", status: "queued" }] }), "GET /batches/:id": () => batch("running") });
+    const { result } = refreshHook();
+    await waitFor(() => expect(result.current.event).toMatchObject({ kind: "batch", id: 7 }));
+    expect(result.current.busy).toBe(true);
+  });
+
+  it("M-4: 404 на опросе — опрос остановлен, кнопка доступна", async () => {
+    const h = hub({ "GET /batches/:id": () => json(404, { error: "not_found", detail: "batch" }) });
+    const { result } = refreshHook();
+    await act(() => result.current.start());
+    await waitFor(() => expect(result.current.event).toMatchObject({ kind: "batch-lost", id: 7, reason: "пакета нет в хабе" }));
+    expect(result.current.busy).toBe(false);
+    const n = h.count("GET /batches/7");
+    await sleep(50);
+    expect(h.count("GET /batches/7")).toBe(n);
+  });
+
+  for (const status of [400, 422]) {
+    it(`T10.2: ${status} на опросе — опрос остановлен, batch-lost с detail, busy сброшен`, async () => {
+      const h = hub({ "GET /batches/:id": () => json(status, { error: "bad_request", detail: "плохой пакет" }) });
+      const { result } = refreshHook();
+      await act(() => result.current.start());
+      await waitFor(() => expect(result.current.event).toMatchObject({ kind: "batch-lost", id: 7, reason: expect.stringContaining("плохой пакет") }));
+      expect(result.current.busy).toBe(false);
+      const n = h.count("GET /batches/7");
+      await sleep(50);
+      expect(h.count("GET /batches/7")).toBe(n);
+    });
+  }
+
+  it("M-4: 5 ошибок «хаб не отвечает» подряд — опрос остановлен", async () => {
+    const h = hub({ "GET /batches/:id": () => { throw new TypeError("Failed to fetch"); } });
+    const { result } = refreshHook();
+    await act(() => result.current.start());
+    await waitFor(() => expect(result.current.event).toMatchObject({ kind: "batch-lost", reason: "хаб не отвечает" }));
+    expect(h.count("GET /batches/7")).toBe(5);
+    await sleep(50);
+    expect(h.count("GET /batches/7")).toBe(5);
+    expect(result.current.busy).toBe(false);
+  });
+
+  it("пакет с ошибкой команды — текст ошибки; агент офлайн — предупреждение в событии", async () => {
+    let polls = 0;
+    hub({
+      "GET /agent": () => json(200, { online: false, last_seen_at: null, warning: null }),
+      "GET /batches/:id": () => (++polls < 3 ? batch("running") : batch("done", { status: "failed", error: "Jira 500" })),
+    });
+    const { result } = refreshHook();
+    await act(() => result.current.start());
+    await waitFor(() => expect(result.current.event).toMatchObject({ kind: "batch", agentOffline: true }));
+    await waitFor(() => expect(result.current.event).toEqual({ kind: "batch-failed", id: 7, error: "Jira 500" }));
+  });
+
+  it("«Обновить из Jira» при недоступном хабе — событие hub-down", async () => {
+    hub({ "GET /agent": () => { throw new TypeError("Failed to fetch"); } });
+    const { result } = refreshHook();
+    await act(() => result.current.start());
+    expect(result.current.event).toEqual({ kind: "hub-down" });
+    expect(result.current.busy).toBe(false);
+  });
+
+  it("T10.6: незавершённый пакет viewer без refresh не подхватывается", async () => {
+    const h = hub({
+      "GET /batches": () => json(200, { batches: [{ id: 7, author: "viewer", status: "running" }] }),
+      "GET /batches/:id": () => batch("running", { type: "ensure_fields" }),
+    });
+    const { result } = refreshHook();
+    await waitFor(() => expect(h.count("GET /batches/7")).toBe(1));
+    await sleep(50);
+    expect(result.current.busy).toBe(false);
+    expect(h.count("GET /batches/7")).toBe(1);   // только проверка типа, опроса нет
+  });
+
+  it("401 на запуске пакета с текущим токеном — токен сброшен", async () => {
+    hub({ "GET /agent": () => json(401, { error: "unauthorized" }) });
+    const { result } = refreshHook();
+    await act(() => result.current.start());
+    expect(getToken()).toBe("");
+  });
+
+  it("запоздавший 401 прежнему токену не сбрасывает новый токен", async () => {
+    const slow = deferred<Response>();
+    hub({ "GET /agent": () => slow.promise });
+    const { result } = refreshHook();
+    let run!: Promise<void>;
+    act(() => { run = result.current.start(); });
+    setToken("new-tok");
+    slow.resolve(json(401, { error: "unauthorized" }));
+    await act(() => run);
+    expect(getToken()).toBe("new-tok");
+  });
+
+  it("по завершении инвалидируются board, issues, issue, projects", async () => {
+    let polls = 0;
+    const h = hub({ "GET /batches/:id": () => (++polls < 2 ? batch("running") : batch("done")) });
+    const { result } = renderHook(() => ({ r: useJiraRefresh(), b: useBoard("AWPCA"), i: useIssues({}) }), { wrapper: wrap() });
+    await waitFor(() => expect(result.current.b.data).toBeDefined());
+    await waitFor(() => expect(result.current.i.data).toBeDefined());
+    await act(() => result.current.r.start());
+    await waitFor(() => expect(result.current.r.event).toMatchObject({ kind: "batch-done" }));
+    await waitFor(() => expect(h.count("GET /board")).toBe(2));
+    await waitFor(() => expect(h.count("GET /issues")).toBe(2));
+  });
+
+  it("инвалидируются ключи board, issues, issue, projects (шпион)", async () => {
+    const client = makeQueryClient();
+    const spy = vi.spyOn(client, "invalidateQueries");
+    hub({ "GET /batches/:id": () => batch("done") });
+    const { result } = refreshHook(client);
+    await act(() => result.current.start());
+    await waitFor(() => expect(result.current.event).toEqual({ kind: "batch-done", id: 7 }));
+    const keys = spy.mock.calls.map(([f]) => (f as { queryKey: unknown[] }).queryKey[0]);
+    expect(keys).toEqual(expect.arrayContaining(["board", "issues", "issue", "projects"]));
+  });
+
+  it("track(9) опрашивает пакет 9 без POST /refresh", async () => {
+    const h = hub({ "GET /batches/:id": () => json(200, { id: 9, title: "x", author: "viewer", created_at: "", cancelled_at: null, status: "done", counts: {}, remaining_seconds: 0, commands: [{ id: 1, seq: 1, type: "refresh", error: null, finished_at: null, status: "done" }] }) });
+    const { result } = refreshHook();
+    await waitFor(() => expect(h.count("GET /batches")).toBe(1));
+    act(() => result.current.track(9));
+    expect(result.current.busy).toBe(true);
+    await waitFor(() => expect(result.current.event).toEqual({ kind: "batch-done", id: 9 }));
+    expect(h.count("POST /refresh")).toBe(0);
+    expect(h.count("GET /batches/9")).toBeGreaterThanOrEqual(1);
+  });
+
+  it("batch-done исчезает через 10 с", async () => {
+    hub({ "GET /batches/:id": () => batch("done") });
+    vi.useFakeTimers({ shouldAdvanceTime: true });   // время идёт и само (опрос, waitFor), но сдвигается и вручную
+    const { result } = refreshHook();
+    await act(() => result.current.start());
+    await waitFor(() => expect(result.current.event).toEqual({ kind: "batch-done", id: 7 }));
+    await act(async () => { vi.advanceTimersByTime(9_800); });
+    expect(result.current.event).toEqual({ kind: "batch-done", id: 7 });
+    await act(async () => { vi.advanceTimersByTime(200); });
+    expect(result.current.event).toBeNull();
+  });
+
+  it("переход между страницами во время пакета: один POST, один опрос, busy до завершения; по завершении board перечитан", async () => {
+    let finished = false;
+    const h = hub({ "GET /batches/:id": () => (finished ? batch("done") : batch("running")) });
+    const client = makeQueryClient();
+    let r!: JiraRefresh;
+    const Probe = () => { r = useJiraRefresh(); return null; };
+    const Page = () => { useBoard("AWPCA"); return null; };   // «страница»: монтируется и размонтируется, провайдер — один
+    const ui = (page: boolean) => (
+      <QueryClientProvider client={client}><RefreshProvider pollMs={10}><Probe />{page && <Page />}</RefreshProvider></QueryClientProvider>);
+    const view = render(ui(true));
+    await waitFor(() => expect(h.count("GET /board")).toBe(1));
+    await act(() => r.start());
+    view.rerender(ui(false));
+    expect(r.busy).toBe(true);
+    view.rerender(ui(true));
+    await waitFor(() => expect(h.count("GET /board")).toBeGreaterThanOrEqual(1));
+    await sleep(40);
+    expect(h.count("POST /refresh")).toBe(1);
+    expect(h.maxInFlight("GET /batches/7")).toBe(1);
+    expect(r.busy).toBe(true);
+    const boards = h.count("GET /board");
+    finished = true;
+    await waitFor(() => expect(r.busy).toBe(false));
+    expect(r.event).toMatchObject({ kind: "batch-done" });
+    await waitFor(() => expect(h.count("GET /board")).toBe(boards + 1));
+  });
+});
diff --git a/web/src/shell/refresh.ts b/web/src/shell/refresh.ts
new file mode 100644
index 0000000..c2de10a
--- /dev/null
+++ b/web/src/shell/refresh.ts
@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import type { AgentView } from "../api/types.ts";
+import type { RefreshEvent } from "./refreshStatus.ts";
+
+// обновление из Jira: состояние живёт в оболочке (RefreshProvider), страницы и верхняя панель только читают его
+export interface JiraRefresh {
+  event: RefreshEvent | null;
+  busy: boolean;                         // запрос /refresh в пути или пакет выполняется
+  agent: AgentView | null;
+  start(): Promise<void>;
+  track(batchId: number): void;          // опрашивать уже поставленный пакет (форма «Новый проект»)
+}
+
+export const RefreshContext = createContext<JiraRefresh | null>(null);
+
+export function useJiraRefresh(): JiraRefresh {
+  const v = useContext(RefreshContext);
+  if (!v) throw new Error("useJiraRefresh вызван вне RefreshProvider: оберните приложение в <RefreshProvider>");
+  return v;
+}
diff --git a/web/src/shell/refreshStatus.test.ts b/web/src/shell/refreshStatus.test.ts
new file mode 100644
index 0000000..fc520fe
--- /dev/null
+++ b/web/src/shell/refreshStatus.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { refreshText } from "./refreshStatus.ts";
+
+describe("refreshText", () => {
+  it("пакет: офлайн, очередь, остаток, повтор", () => {
+    expect(refreshText({ kind: "batch", id: 7, phase: "queued", remaining: 12, agentOffline: true, retrying: false }))
+      .toEqual({ text: "агент офлайн — пакет выполнится, когда он выйдет на связь; пакет #7 в очереди, осталось ~12 с…", tone: "info" });
+    expect(refreshText({ kind: "batch", id: 7, phase: "running", remaining: 0, agentOffline: false, retrying: true }))
+      .toEqual({ text: "пакет #7 выполняется… (хаб не отвечает, повтор через 3 с)", tone: "warning" });
+  });
+  it("исходы и ошибки", () => {
+    expect(refreshText({ kind: "batch-done", id: 7 })).toEqual({ text: "пакет #7 выполнен", tone: "success" });
+    expect(refreshText({ kind: "batch-failed", id: 7, error: "429" })).toEqual({ text: "пакет #7 не выполнен: 429", tone: "error" });
+    expect(refreshText({ kind: "batch-cancelled", id: 7 })).toEqual({ text: "пакет #7 отменён", tone: "warning" });
+    expect(refreshText({ kind: "batch-lost", id: 7, reason: "пакета нет в хабе" }).text)
+      .toBe("пакет #7: пакета нет в хабе — опрос остановлен, «Обновить из Jira» снова доступна");
+    expect(refreshText({ kind: "hub-down" })).toEqual({ text: "хаб не отвечает — пакет не поставлен", tone: "error" });
+    expect(refreshText({ kind: "error", message: "boom" })).toEqual({ text: "boom", tone: "error" });
+  });
+});
diff --git a/web/src/shell/refreshStatus.ts b/web/src/shell/refreshStatus.ts
new file mode 100644
index 0000000..5401f8f
--- /dev/null
+++ b/web/src/shell/refreshStatus.ts
@@ -0,0 +1,32 @@
+export const POLL_MS = 3000;          // период опроса пакета, мс (как у links.html)
+export const MAX_POLL_ERRORS = 5;     // столько ошибок «хаб не отвечает» подряд — и опрос пакета останавливается (M-4)
+export const DONE_VISIBLE_MS = 10_000;   // «пакет выполнен» гаснет через это время
+
+// событие обновления из Jira: ход пакета и ошибки его постановки; показывает верхняя панель оболочки
+export type RefreshEvent =
+  | { kind: "batch"; id: number; phase: "queued" | "running"; remaining: number; agentOffline: boolean; retrying: boolean }
+  | { kind: "batch-done"; id: number }
+  | { kind: "batch-failed"; id: number; error: string }
+  | { kind: "batch-cancelled"; id: number }
+  | { kind: "batch-lost"; id: number; reason: string }
+  | { kind: "hub-down" }
+  | { kind: "error"; message: string };
+
+export type RefreshTone = "info" | "success" | "error" | "warning";
+
+export function refreshText(e: RefreshEvent): { text: string; tone: RefreshTone } {
+  switch (e.kind) {
+    case "batch": {
+      const off = e.agentOffline ? "агент офлайн — пакет выполнится, когда он выйдет на связь; " : "";
+      const left = e.remaining ? `, осталось ~${e.remaining} с` : "";
+      const retry = e.retrying ? ` (хаб не отвечает, повтор через ${POLL_MS / 1000} с)` : "";
+      return { text: `${off}пакет #${e.id} ${e.phase === "queued" ? "в очереди" : "выполняется"}${left}…${retry}`, tone: e.retrying ? "warning" : "info" };
+    }
+    case "batch-done": return { text: `пакет #${e.id} выполнен`, tone: "success" };
+    case "batch-failed": return { text: `пакет #${e.id} не выполнен: ${e.error}`, tone: "error" };
+    case "batch-cancelled": return { text: `пакет #${e.id} отменён`, tone: "warning" };
+    case "batch-lost": return { text: `пакет #${e.id}: ${e.reason} — опрос остановлен, «Обновить из Jira» снова доступна`, tone: "error" };
+    case "hub-down": return { text: "хаб не отвечает — пакет не поставлен", tone: "error" };
+    case "error": return { text: e.message, tone: "error" };
+  }
+}
diff --git a/web/src/test/batchHub.ts b/web/src/test/batchHub.ts
new file mode 100644
index 0000000..452eb0a
--- /dev/null
+++ b/web/src/test/batchHub.ts
@@ -0,0 +1,35 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { json, mockFetch } from "./fetchMock.ts";
+
+// хаб в памяти для тестов обновления из Jira: снимок, список пакетов, пакет по id; счётчики запросов
+export const fixture = (name: string) => readFileSync(join(import.meta.dirname, "..", "board", "__fixtures__", name), "utf8");
+export const SNAP = JSON.parse(fixture("hub-basic.board.json"));
+export const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+export const deferred = <T,>() => { let resolve!: (v: T) => void; const promise = new Promise<T>((r) => { resolve = r; }); return { promise, resolve }; };
+
+export function hub(over: Partial<Record<string, (url: URL, body: unknown) => Response | Promise<Response>>> = {}) {
+  const calls: string[] = [];
+  const inFlight: Record<string, number> = {}, maxInFlight: Record<string, number> = {};
+  const fetch = mockFetch(async (method, url, body) => {
+    const k = `${method} ${url.pathname}`;
+    calls.push(k);
+    inFlight[k] = (inFlight[k] ?? 0) + 1;
+    maxInFlight[k] = Math.max(maxInFlight[k] ?? 0, inFlight[k]);
+    try {
+      const h = over[k] ?? over[`${method} ${url.pathname.replace(/\d+$/, ":id")}`];
+      if (h) return await h(url, body);
+      if (k === "GET /board") return json(200, SNAP);
+      if (k === "GET /issues") return json(200, { issues: [] });
+      if (k === "GET /projects") return json(200, { projects: [] });
+      if (k === "GET /batches") return json(200, { batches: [] });
+      if (k === "GET /agent") return json(200, { online: true, last_seen_at: null, warning: null });
+      if (k === "POST /refresh") return json(201, { id: 7, estimate_seconds: 5, count: 1 });
+      return json(404, { error: "not_found" });
+    } finally { inFlight[k] -= 1; }
+  });
+  return { fetch, calls, count: (k: string) => calls.filter((c) => c === k).length, maxInFlight: (k: string) => maxInFlight[k] ?? 0 };
+}
+
+export const batch = (status: string, cmd: Record<string, unknown> = { status: "done" }) =>
+  json(200, { id: 7, title: "Обновление", author: "viewer", created_at: "", cancelled_at: null, status, counts: {}, remaining_seconds: 0, commands: [{ id: 1, seq: 1, type: "refresh", error: null, finished_at: null, ...cmd }] });
diff --git a/web/src/test/render.tsx b/web/src/test/render.tsx
index 7fb580b..74aa32a 100644
--- a/web/src/test/render.tsx
+++ b/web/src/test/render.tsx
@@ -2,6 +2,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import { render } from "@testing-library/react";
 import type { ReactElement } from "react";
 import { createMemoryRouter, RouterProvider } from "react-router";
+import { RefreshProvider } from "../shell/RefreshProvider.tsx";
 import { makeQueryClient } from "../api/queryClient.ts";
 
 // компонент под QueryClient и data-роутером в памяти: path — шаблон маршрута (для useParams), route — открытый адрес
@@ -9,5 +10,5 @@ export function renderWithProviders(ui: ReactElement, { route = "/", path = "*"
   const client = makeQueryClient();
   const router = createMemoryRouter([{ path, element: ui }, { path: "*", element: <p>другая страница</p> }],
     { initialEntries: [route] });
-  return { client, router, ...render(<QueryClientProvider client={client}><RouterProvider router={router} /></QueryClientProvider>) };
+  return { client, router, ...render(<QueryClientProvider client={client}><RefreshProvider><RouterProvider router={router} /></RefreshProvider></QueryClientProvider>) };
 }
-- 
2.47.2


From e55a482182393f8e859ccd7c00f186a1872e29b5 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:17:19 +0400
Subject: [PATCH 08/23] =?UTF-8?q?=D0=A1=D0=BF=D0=B5=D0=BA=D0=B0:=20=D1=80?=
 =?UTF-8?q?=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=2014=20=E2=80=94=20T4.1=20?=
 =?UTF-8?q?=D1=87=D0=B8=D0=BD=D0=B8=D1=82=D1=81=D1=8F=20=D0=B2=20=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D1=87=D0=B5=205=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 openspec/changes/redesign/design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/openspec/changes/redesign/design.md b/openspec/changes/redesign/design.md
index c870c9b..2e5c9e9 100644
--- a/openspec/changes/redesign/design.md
+++ b/openspec/changes/redesign/design.md
@@ -188,3 +188,4 @@
 | 11 | 21.10.2026 | Тема — два положения, системная только без сохранённого выбора (решение 21) | переключатель AURA двухпозиционный | низкая: вернуть третье положение — пункт меню |
 | 12 | 21.10.2026 | Проверка вида скриншотами в PR, без пиксельных эталонов (решение 23) | вид будет меняться по замечаниям, эталоны мешали бы | низкая |
 | 13 | 22.10.2026 | Задача 1: тёмные `--color-action-danger` `#ffaea5` и hover `#ffcbc5` взяты из tokens.json AURA; `--color-status-error` остаётся `#e26c67`; затемнение фона окон везде `--color-overlay` 45% (у проектов было 40%); палитра `--k-*`/`--p-*` подобрана на глаз, `--k-test` малиновый (`#a63d78` / `#e07fb0`), чтобы не сливаться с зелёным действием | токены AURA — канон; один overlay вместо двух значений; различимость видов задач на доске | низкая: правка значений в tokens.css |
+| 14 | 22.10.2026 | Задача 4: регресс T4.1 (счётчик `skipPickup` не уменьшается при ошибке перечитывания) чинится в Задаче 5, без отдельного раунда ревью; в Задаче 4 пропуск подхвата сделан счётчиком вместо флага, подхват коалесцируется, тоны `refreshText`: error для batch-lost/failed/hub-down/error, warning для cancelled | регресс мелкий и в том же модуле, что правится в Задаче 5 | низкая: один пропущенный подхват чужого пакета до следующей загрузки снимка |
-- 
2.47.2


From 3e2f252aac31ff19eb7af251cb4f7e2cef117d8a Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:23:39 +0400
Subject: [PATCH 09/23] =?UTF-8?q?feat(web):=20=D0=B2=D0=B5=D1=80=D1=85?=
 =?UTF-8?q?=D0=BD=D1=8F=D1=8F=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20?=
 =?UTF-8?q?=E2=80=94=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8B,=20?=
 =?UTF-8?q?=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D0=B5=20Jira,=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5,=20=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=B0=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/e2e/board.spec.ts                 |   4 +-
 web/e2e/hub.ts                        |   2 +-
 web/src/App.test.tsx                  |   7 +-
 web/src/api/queries.ts                |   5 +-
 web/src/board/BoardPage.test.tsx      |  25 ++----
 web/src/board/components/Toolbar.tsx  |  12 +--
 web/src/issues/IssueModal.test.tsx    |   6 +-
 web/src/projects/NewProjectDialog.tsx |   4 +-
 web/src/projects/ProjectPicker.tsx    |   5 +-
 web/src/projects/projects.css         |   2 +-
 web/src/projects/projects.test.tsx    |   9 +-
 web/src/shell/AppBar.test.tsx         | 120 ++++++++++++++++++++++++++
 web/src/shell/AppBar.tsx              |  28 ++++++
 web/src/shell/DataStatus.tsx          |  31 +++++++
 web/src/shell/Layout.tsx              |  26 ++----
 web/src/shell/RefreshProvider.tsx     |   4 +-
 web/src/shell/refresh.test.tsx        |  23 ++++-
 web/src/shell/shell.css               |  34 ++++++--
 web/src/shell/theme.ts                |   1 -
 web/src/styles/base.css               |   4 +-
 20 files changed, 275 insertions(+), 77 deletions(-)
 create mode 100644 web/src/shell/AppBar.test.tsx
 create mode 100644 web/src/shell/AppBar.tsx
 create mode 100644 web/src/shell/DataStatus.tsx

diff --git a/web/e2e/board.spec.ts b/web/e2e/board.spec.ts
index fea09f1..644d640 100644
--- a/web/e2e/board.spec.ts
+++ b/web/e2e/board.spec.ts
@@ -58,7 +58,7 @@ test("ⓘ открывает карточку окном поверх доски
   await expect(page).toHaveURL(/\/app\/issues\/AURORA-9001$/);
   await expect(page.getByRole("dialog").getByRole("heading", { name: "Схема свода" })).toBeVisible();
   await expect(page.getByTestId("page-board")).toBeAttached();
-  await expect(page.getByRole("link", { name: "Доска", exact: true })).toHaveClass(/active/);
+  await expect(page.getByRole("link", { name: "Доска связей", exact: true })).toHaveAttribute("aria-current", "page");
 });
 
 test("M-3: прокрутка и данные доски после окна карточки и после другого раздела", async ({ page }) => {
@@ -85,7 +85,7 @@ test("M-3: прокрутка и данные доски после окна к
   // ссылки меню вверху страницы: обычный click прокрутил бы доску к ним до перехода и затёр запомненное, поэтому dispatchEvent
   await page.getByRole("link", { name: "Задачи", exact: true }).dispatchEvent("click");
   await expect(page).toHaveURL(/\/app\/issues\?project=AWPCA$/);
-  await page.getByRole("link", { name: "Доска", exact: true }).dispatchEvent("click");
+  await page.getByRole("link", { name: "Доска связей", exact: true }).dispatchEvent("click");
   await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(y - 2);
 });
 
diff --git a/web/e2e/hub.ts b/web/e2e/hub.ts
index 621bc7d..86eff72 100644
--- a/web/e2e/hub.ts
+++ b/web/e2e/hub.ts
@@ -9,7 +9,7 @@ export async function login(page: Page, path = "/app/board") {
   await page.goto(path);
   await page.getByLabel("Клиентский токен хаба").fill(tokens().client);
   await page.getByRole("button", { name: "Войти" }).click();
-  await expect(page.getByRole("link", { name: "Доска" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "Доска связей" })).toBeVisible();
 }
 
 async function call(path: string, body: unknown) {
diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx
index 070faf4..611e12c 100644
--- a/web/src/App.test.tsx
+++ b/web/src/App.test.tsx
@@ -27,7 +27,7 @@ describe("оболочка", () => {
     expect(router.state.location.pathname).toBe("/app/issues");
     expect(router.state.location.search).toBe("?project=AWPCA");
     expect(await screen.findByTestId("page-issues")).toBeInTheDocument();
-    await userEvent.click(screen.getByRole("link", { name: "Доска" }));
+    await userEvent.click(screen.getByRole("link", { name: "Доска связей" }));
     expect(router.state.location.pathname).toBe("/app/board");
     expect(router.state.location.search).toBe("?project=AWPCA");
     expect(await screen.findByTestId("page-board")).toBeInTheDocument();
@@ -42,6 +42,7 @@ describe("оболочка", () => {
 
   it("«Сменить токен» показывает экран входа", async () => {
     render(<App router={at("/app/board")} />);
+    await userEvent.click(await screen.findByRole("button", { name: "Ещё" }));
     await userEvent.click(screen.getByRole("button", { name: "Сменить токен" }));
     expect(getAuth().token).toBe("");
     expect(screen.getByRole("heading", { name: "Вход в хаб" })).toBeInTheDocument();
@@ -56,13 +57,13 @@ describe("оболочка", () => {
       render(<App router={router} />);
       expect(await screen.findByText(/сломалось/)).toBeInTheDocument();
       expect(screen.getByRole("button", { name: "Перезагрузить" })).toBeInTheDocument();
-      expect(screen.getByRole("link", { name: "Доска" })).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: "Доска связей" })).toBeInTheDocument();
     } finally { PAGE_ROUTES.splice(PAGE_ROUTES.indexOf(boom), 1); }
   });
 
   it("без токена — только экран входа", () => {
     clearToken();
     render(<App router={at("/app/board")} />);
-    expect(screen.queryByRole("link", { name: "Доска" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: "Доска связей" })).not.toBeInTheDocument();
   });
 });
diff --git a/web/src/api/queries.ts b/web/src/api/queries.ts
index d44bb2b..0ec0b20 100644
--- a/web/src/api/queries.ts
+++ b/web/src/api/queries.ts
@@ -19,8 +19,9 @@ export const qk = {
 export const useSettings = () =>
   useQuery({ queryKey: qk.settings, queryFn: () => api.get<HubSettings>("/settings"), staleTime: Infinity });
 
-export const useBoard = (project: string) =>
-  useQuery({ queryKey: qk.board(project), queryFn: () => api.get<BoardSnapshot>("/board", { project }) });
+// project === null — проект ещё не выбран: запроса нет
+export const useBoard = (project: string | null) =>
+  useQuery({ queryKey: qk.board(project ?? ""), enabled: project !== null, queryFn: () => api.get<BoardSnapshot>("/board", { project: project! }) });
 
 export const useProjects = () =>
   useQuery({ queryKey: qk.projects, queryFn: () => api.get<{ projects?: Project[] }>("/projects").then((r) => r.projects ?? []) });
diff --git a/web/src/board/BoardPage.test.tsx b/web/src/board/BoardPage.test.tsx
index afa9e82..5e70356 100644
--- a/web/src/board/BoardPage.test.tsx
+++ b/web/src/board/BoardPage.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
@@ -111,34 +111,21 @@ describe("страница доски", () => {
     expect(await screen.findByText("jira-export.csv (из файла)")).toBeInTheDocument();
   });
 
-  it("тема переключается по кругу и применяется к документу", async () => {
+  it("доска не рисует «Обновить из Jira» и ход пакета: они в верхней панели", async () => {
     hub();
     page();
     await screen.findByText(/задач из 9/);
+    expect(screen.queryByRole("button", { name: "Обновить из Jira" })).not.toBeInTheDocument();
     await userEvent.click(screen.getByTitle("Ещё"));
-    await userEvent.click(screen.getByRole("button", { name: "Тема: системная" }));
-    expect(document.documentElement.getAttribute("data-theme")).toBe("light");
-    expect(localStorage.getItem("graph-theme")).toBe("light");
+    expect(screen.queryByRole("button", { name: /^Тема/ })).not.toBeInTheDocument();
   });
-
-  it("«Обновить из Jira» ставит пакет и недоступна, пока он идёт", async () => {
-    const fetch = hub();
-    page();
-    await screen.findByText(/задач из 9/);
-    const btn = screen.getByRole("button", { name: "Обновить из Jira" });
-    await userEvent.click(btn);
-    await waitFor(() => expect(btn).toBeDisabled());
-    expect(fetch.mock.calls.filter(([u, i]) => u === "/refresh" && i?.method === "POST")).toHaveLength(1);
-    expect(await screen.findByText(/пакет #7 выполняется/)).toBeInTheDocument();
-  });
-  it("заголовок страницы — h1, пока идёт пакет в шапке label и строка состояния", async () => {
+  it("заголовок страницы — h1, в шапке label; строка состояния — только события доски", async () => {
     hub();
     page();
     await screen.findByText(/задач из 9/);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
-    await userEvent.click(screen.getByRole("button", { name: "Обновить из Jira" }));
-    expect(await screen.findByRole("status")).toHaveTextContent(/пакет #7/);
     expect(screen.getByText(/^Хаб · данные на/)).toBeInTheDocument();
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
   });
 
   it("пустой link_types при заполненном kind_labels — называет только недостающий словарь", async () => {
diff --git a/web/src/board/components/Toolbar.tsx b/web/src/board/components/Toolbar.tsx
index f367126..8701d00 100644
--- a/web/src/board/components/Toolbar.tsx
+++ b/web/src/board/components/Toolbar.tsx
@@ -1,7 +1,4 @@
 import { useEffect, useState } from "react";
-import { useJiraRefresh } from "../../shell/refresh.ts";
-import { refreshText } from "../../shell/refreshStatus.ts";
-import { applyTheme, readTheme, saveTheme, THEME_NAMES, THEMES, type Theme } from "../../shell/theme.ts";
 import { statusText, type BoardStatus } from "../status.ts";
 import type { BoardModel, Visible } from "../types.ts";
 import { NOT_IN_HUB } from "../constants.ts";
@@ -15,23 +12,17 @@ interface ToolbarProps {
 }
 
 export function Toolbar(p: ToolbarProps) {
-  const [theme, setTheme] = useState<Theme>(readTheme);
   const [confirm, setConfirm] = useState(false);
   useEffect(() => { if (!confirm) return; const t = setTimeout(() => setConfirm(false), 8000); return () => clearTimeout(t); }, [confirm]);
-  const refresh = useJiraRefresh();   // кнопка и ход пакета временно здесь; в верхней панели — с Task 5
-  const rt = refresh.event ? refreshText(refresh.event) : null;
-  const st = p.status ? statusText(p.status) : rt ? { text: rt.text, warn: rt.tone === "error" || rt.tone === "warning" } : null;
+  const st = p.status ? statusText(p.status) : null;   // только события доски; ход пакета «Обновить из Jira» — в верхней панели
   const m = p.model, v = p.vis, r = v.removed;
   const coreShown = v.nodes.filter((n) => !n.dim).length, ctxShown = v.nodes.length - coreShown;
-  const nextTheme = () => { const t = THEMES[(THEMES.indexOf(theme) + 1) % THEMES.length]; setTheme(t); saveTheme(t); applyTheme(t); };
   return (
     <div className="top">
       <h1>Доска связей</h1>
       <span className="src">
         <span className="file-name" title={p.title}>{p.label}</span>
         <button type="button" className="link" title="Загрузить снимок зеркала хаба заново, без обращения к Jira" onClick={p.onReload}>Перечитать</button>
-        <button type="button" className="link" disabled={refresh.busy} onClick={() => void refresh.start()}
-          title="Поставить в хаб пакет «обновление по базовой JQL» и дождаться его: агент перечитает задачи из Jira">Обновить из Jira</button>
         <label className="link" title="CSV из фильтра Jira или JSON, выгруженный этой доской. JSON при работе с хабом переносит только расстановку карточек, дорожки и фильтры; CSV показывает снимок файла до «Перечитать»">
           файл…
           <input type="file" accept=".csv,.json,text/csv,application/json" hidden onChange={async (e) => {
@@ -61,7 +52,6 @@ export function Toolbar(p: ToolbarProps) {
             <button type="button" onClick={() => { close(); p.onExport(); }}>Экспорт JSON</button>
             <button type="button" aria-pressed={p.tableOpen} onClick={p.onTable}>Таблица связей</button>
             <button type="button" aria-pressed={p.snap} onClick={p.onSnap}>Привязка к сетке</button>
-            <button type="button" onClick={nextTheme}>Тема: {THEME_NAMES[theme]}</button>
             <hr />
             {!confirm ? <button type="button" className="danger" onClick={() => setConfirm(true)}>Сбросить раскладку</button> : (
               <div className="confirm">
diff --git a/web/src/issues/IssueModal.test.tsx b/web/src/issues/IssueModal.test.tsx
index 7ff09eb..1259ac0 100644
--- a/web/src/issues/IssueModal.test.tsx
+++ b/web/src/issues/IssueModal.test.tsx
@@ -41,7 +41,7 @@ describe("карточка окном", () => {
     expect(await within(dialog()).findByRole("heading", { name: /AURORA-9002/ })).toBeInTheDocument();
     expect(within(screen.getByRole("main")).getByRole("table")).toBe(table);   // таблица команд карточки — в окне, не в main                         // фон не пересоздаётся
     expect(screen.getByLabelText("Спринт")).toHaveValue("AWPCA_Спринт 2");  // фильтр фона — из его адреса
-    expect(screen.getByRole("link", { name: "Задачи" })).toHaveClass("active");
+    expect(screen.getByRole("link", { name: "Задачи" })).toHaveAttribute("aria-current", "page");
     await userEvent.click(within(dialog()).getByRole("button", { name: "Закрыть" }));
     await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
     expect(router.state.location.pathname).toBe("/app/issues");
@@ -88,7 +88,7 @@ describe("карточка окном", () => {
     expect(router.state.location.pathname).toBe("/app/issues/AURORA-9001");
   });
 
-  it("с доски: окно поверх доски, вкладка «Доска» активна, после закрытия доска та же", async () => {
+  it("с доски: окно поверх доски, раздел «Доска связей» активен, после закрытия доска та же", async () => {
     const router = at(["/app/board"]);
     render(<App router={router} />);
     const ilink = await screen.findByRole("link", { name: "Открыть карточку AURORA-9001" });
@@ -96,7 +96,7 @@ describe("карточка окном", () => {
     await userEvent.click(ilink);
     expect(await within(dialog()).findByRole("heading", { name: /AURORA-9001/ })).toBeInTheDocument();
     expect(screen.getByTestId("page-board")).toBe(boardEl);
-    expect(screen.getByRole("link", { name: "Доска" })).toHaveClass("active");
+    expect(screen.getByRole("link", { name: "Доска связей" })).toHaveAttribute("aria-current", "page");
     await userEvent.click(within(dialog()).getByRole("button", { name: "Закрыть" }));
     await waitFor(() => expect(router.state.location.pathname).toBe("/app/board"));
     expect(screen.getByTestId("page-board")).toBe(boardEl);
diff --git a/web/src/projects/NewProjectDialog.tsx b/web/src/projects/NewProjectDialog.tsx
index 5d4d176..1c3b955 100644
--- a/web/src/projects/NewProjectDialog.tsx
+++ b/web/src/projects/NewProjectDialog.tsx
@@ -5,7 +5,7 @@ import type { Project } from "../api/types.ts";
 import "./projects.css";
 
 // окно «Новый проект» (как IssueModal): <dialog> держит фокус; Esc и «Отмена» — onClose, ошибка хаба — рядом с «Создать»
-export function NewProjectDialog({ onClose, onCreated }: { onClose(): void; onCreated(p: Project): void }) {
+export function NewProjectDialog({ onClose, onCreated }: { onClose(): void; onCreated(p: Project, batchId: number): void }) {
   const ref = useRef<HTMLDialogElement>(null);
   const [label, setLabel] = useState(""), [name, setName] = useState(""), [board, setBoard] = useState("");
   const create = useCreateProject();
@@ -15,7 +15,7 @@ export function NewProjectDialog({ onClose, onCreated }: { onClose(): void; onCr
     e.preventDefault();
     const f: { label: string; name: string; board_id?: number } = { label: label.trim(), name: name.trim() };
     if (board.trim() !== "") f.board_id = Number(board);
-    create.mutate(f, { onSuccess: (r) => onCreated(r.project) });
+    create.mutate(f, { onSuccess: (r) => onCreated(r.project, r.batch_id) });
   };
   const err = create.error;
   const text = err ? (err instanceof ApiError ? err.detail ?? err.message : err.message) : null;
diff --git a/web/src/projects/ProjectPicker.tsx b/web/src/projects/ProjectPicker.tsx
index 3f8e1b3..5c9d6d0 100644
--- a/web/src/projects/ProjectPicker.tsx
+++ b/web/src/projects/ProjectPicker.tsx
@@ -1,3 +1,4 @@
+import { Select } from "../ui/index.ts";
 import { useProjectContext } from "./ProjectContext.ts";
 
 const NEW = " new";   // служебное значение пункта «Новый проект…»: метка пробелов содержать не может
@@ -6,11 +7,11 @@ export function ProjectPicker() {
   const { state, projects, select, openNew } = useProjectContext();
   const current = state.kind === "ok" ? state.project.label : "";
   return (
-    <select className="project-picker" aria-label="Проект" value={current}
+    <Select className="project-picker" aria-label="Проект" value={current}
       onChange={(e) => { if (e.target.value === NEW) openNew(); else select(e.target.value); }}>
       {current === "" && <option value="" disabled>выберите проект</option>}
       {projects.map((p) => <option key={p.label} value={p.label}>{p.label} — {p.name}</option>)}
       <option value={NEW}>＋ Новый проект…</option>
-    </select>
+    </Select>
   );
 }
diff --git a/web/src/projects/projects.css b/web/src/projects/projects.css
index 579aa30..51cb6b9 100644
--- a/web/src/projects/projects.css
+++ b/web/src/projects/projects.css
@@ -1,5 +1,5 @@
 /* выбор проекта и окно «Новый проект» */
-.appbar .project-picker{font:inherit;font-size:14px;height:30px;max-width:280px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);padding:0 8px}
+.appbar .project-picker{max-width:280px;min-width:160px}
 .project-gate{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin:24px 0}
 .project-dialog{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);padding:16px 20px;min-width:340px}
 .project-dialog::backdrop{background:var(--color-overlay)}
diff --git a/web/src/projects/projects.test.tsx b/web/src/projects/projects.test.tsx
index 9214398..76b20f3 100644
--- a/web/src/projects/projects.test.tsx
+++ b/web/src/projects/projects.test.tsx
@@ -96,15 +96,22 @@ describe("проект в приложении", () => {
   });
 
   it("создание проекта из формы", async () => {
-    const h = hub([A], { "POST /projects": () => json(201, { project: S, batch_id: 7 }) });
+    const h = hub([A], {
+      "POST /projects": () => json(201, { project: S, batch_id: 7 }),
+      "GET /batches/7": () => json(200, { id: 7, author: "viewer", status: "queued", remaining_seconds: 5, counts: {}, commands: [{ type: "refresh", status: "queued" }] }),
+    });
     const router = open("/app/board?project=AWPCA");
     await screen.findByTestId("page-board");
+    const listed = h.get("/batches").length;
     await userEvent.selectOptions(screen.getByRole("combobox", { name: "Проект" }), "＋ Новый проект…");
     const dlg = screen.getByRole("dialog", { name: "Новый проект" });
     await userEvent.type(within(dlg).getByLabelText("Метка"), "STOCKS_DRRK");
     await userEvent.type(within(dlg).getByLabelText("Название"), "Запасы ДРРК");
     await userEvent.click(within(dlg).getByRole("button", { name: "Создать" }));
     await waitFor(() => expect(router.state.location.search).toBe("?project=STOCKS_DRRK"));
+    // пакет проекта отслеживается по batch_id (track): верхняя панель показывает ход, список пакетов не запрашивается
+    expect(await within(screen.getByRole("banner")).findByRole("status")).toHaveTextContent(/пакет #7 в очереди/);
+    expect(h.get("/batches").length).toBe(listed);
     const post = h.calls.find((c) => c.method === "POST" && c.url.pathname === "/projects")!;
     expect(post.body).toEqual({ label: "STOCKS_DRRK", name: "Запасы ДРРК", author: "viewer" });
     expect(screen.queryByRole("dialog", { name: "Новый проект" })).not.toBeInTheDocument();
diff --git a/web/src/shell/AppBar.test.tsx b/web/src/shell/AppBar.test.tsx
new file mode 100644
index 0000000..392f599
--- /dev/null
+++ b/web/src/shell/AppBar.test.tsx
@@ -0,0 +1,120 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { createMemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it } from "vitest";
+import { App } from "../App.tsx";
+import { getAuth, setToken } from "../auth/token.ts";
+import settings from "../board/__fixtures__/settings.json";
+import { routes } from "../routes.tsx";
+import { json, mockFetch } from "../test/fetchMock.ts";
+
+const SNAP = JSON.parse(readFileSync(join(import.meta.dirname, "..", "board", "__fixtures__", "hub-basic.board.json"), "utf8"));
+const A = { label: "AWPCA", name: "АРМ КА", board_id: null, board_type: null, created_at: "", issues_count: 9 };
+const WITH_SYNC = { ...SNAP, last_sync: { started_at: "2026-10-14T11:58:00+00:00", finished_at: "2026-10-14T12:00:00+00:00", issues_count: 9 } };
+
+interface Call { method: string; url: URL }
+function hub(over: Record<string, () => Response> = {}) {
+  const calls: Call[] = [];
+  mockFetch((method, url) => {
+    calls.push({ method, url });
+    const k = `${method} ${url.pathname}`;
+    if (over[k]) return over[k]();
+    if (k === "GET /projects") return json(200, { projects: [A] });
+    if (k === "GET /settings") return json(200, settings);
+    if (k === "GET /board") return json(200, WITH_SYNC);
+    if (k === "GET /issues") return json(200, { issues: [] });
+    if (k === "GET /batches") return json(200, { batches: [] });
+    if (k === "GET /agent") return json(200, { online: true, last_seen_at: "2026-10-14T09:30:00+00:00" });
+    if (k === "POST /refresh") return json(201, { id: 7, estimate_seconds: 5, count: 1 });
+    if (k === "GET /batches/7") return json(200, { id: 7, author: "viewer", status: "running", remaining_seconds: 3, counts: {}, commands: [{ type: "refresh", status: "running" }] });
+    return json(404, { error: "not_found" });
+  });
+  return { count: (m: string, p: string) => calls.filter((c) => c.method === m && c.url.pathname === p).length };
+}
+const open = (path: string) => {
+  const router = createMemoryRouter(routes, { initialEntries: [path], basename: "/app" });
+  render(<App router={router} />);
+  return router;
+};
+const bar = () => screen.getByRole("banner");
+
+describe("верхняя панель", () => {
+  beforeEach(() => { setToken("tok"); localStorage.clear(); });
+
+  it("разделы — ссылки «Доска связей» и «Задачи», активная с aria-current", async () => {
+    hub();
+    open("/app/issues?project=AWPCA");
+    await screen.findByRole("link", { name: "Доска связей" });
+    await waitFor(() => expect(screen.getByRole("link", { name: "Доска связей" })).toHaveAttribute("href", "/app/board?project=AWPCA"));
+    expect(screen.getByRole("link", { name: "Задачи" })).toHaveAttribute("aria-current", "page");
+    expect(screen.getByRole("link", { name: "Доска связей" })).not.toHaveAttribute("aria-current");
+  });
+
+  it("«Обновить из Jira» на /issues ставит пакет, недоступна, по done — «пакет #7 выполнен» и GET /issues повторно", async () => {
+    let done = false;
+    const h = hub({ "GET /batches/7": () => json(200, { id: 7, author: "viewer", status: done ? "done" : "running", remaining_seconds: 3, counts: {}, commands: [{ type: "refresh", status: done ? "done" : "running" }] }) });
+    open("/app/issues?project=AWPCA");
+    await screen.findByTestId("page-issues");
+    await waitFor(() => expect(h.count("GET", "/issues")).toBeGreaterThan(0));
+    const issuesBefore = h.count("GET", "/issues");
+    const btn = within(bar()).getByRole("button", { name: "Обновить из Jira" });
+    await userEvent.click(btn);
+    await waitFor(() => expect(btn).toBeDisabled());
+    expect(btn).toHaveAttribute("aria-busy", "true");
+    expect(h.count("POST", "/refresh")).toBe(1);
+    expect(await within(bar()).findByRole("status")).toHaveTextContent(/пакет #7 выполняется/);
+    done = true;
+    await waitFor(() => expect(within(bar()).getByRole("status")).toHaveTextContent("пакет #7 выполнен"), { timeout: 6000 });
+    await waitFor(() => expect(h.count("GET", "/issues")).toBeGreaterThan(issuesBefore));
+    expect(btn).toBeEnabled();
+  });
+
+  it("агент офлайн — «агент офлайн»; на связи — «агент на связи»", async () => {
+    hub({ "GET /agent": () => json(200, { online: false, last_seen_at: "2026-10-14T09:30:00+00:00" }) });
+    open("/app/board?project=AWPCA");
+    expect(await within(bar()).findByText("агент офлайн")).toBeInTheDocument();
+  });
+
+  it("агент на связи", async () => {
+    hub();
+    open("/app/board?project=AWPCA");
+    expect(await within(bar()).findByText("агент на связи")).toBeInTheDocument();
+  });
+
+  it("«данные на ДД.ММ ЧЧ:ММ» берутся из last_sync снимка", async () => {
+    hub();
+    open("/app/issues?project=AWPCA");
+    expect(await within(bar()).findByText(/^данные на \d\d\.\d\d \d\d:\d\d$/)).toBeInTheDocument();
+  });
+
+  it("полного обновления не было", async () => {
+    hub({ "GET /board": () => json(200, { ...SNAP, last_sync: null }) });
+    open("/app/issues?project=AWPCA");
+    expect(await within(bar()).findByText("полного обновления не было")).toBeInTheDocument();
+  });
+
+  it("меню «Ещё» → «Сменить токен» показывает экран входа", async () => {
+    hub();
+    open("/app/board?project=AWPCA");
+    await userEvent.click(await screen.findByRole("button", { name: "Ещё" }));
+    await userEvent.click(screen.getByRole("button", { name: "Сменить токен" }));
+    expect(getAuth().token).toBe("");
+    expect(screen.getByRole("heading", { name: "Вход в хаб" })).toBeInTheDocument();
+  });
+
+  it("переключатель темы — в панели", async () => {
+    hub();
+    open("/app/board?project=AWPCA");
+    expect(await within(bar()).findByRole("switch", { name: "Тёмная тема" })).toBeInTheDocument();
+  });
+
+  it("доска не рисует свою кнопку «Обновить из Jira»: в приложении она одна", async () => {
+    hub();
+    open("/app/board?project=AWPCA");
+    await screen.findByTestId("page-board");
+    await screen.findByText(/задач из/);
+    expect(screen.getAllByRole("button", { name: "Обновить из Jira" })).toHaveLength(1);
+  });
+});
diff --git a/web/src/shell/AppBar.tsx b/web/src/shell/AppBar.tsx
new file mode 100644
index 0000000..6f69d4f
--- /dev/null
+++ b/web/src/shell/AppBar.tsx
@@ -0,0 +1,28 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { clearToken } from "../auth/token.ts";
+import { withProject } from "../projects/current.ts";
+import { ProjectPicker } from "../projects/ProjectPicker.tsx";
+import { Menu, MenuItem, Segmented, ThemeSwitch } from "../ui/index.ts";
+import { DataStatus } from "./DataStatus.tsx";
+
+export type Section = "/board" | "/issues";
+
+// верхняя панель (design.md, решение 9): название, проект, разделы, состояние данных, тема, меню «Ещё»
+export function AppBar({ section, project }: { section: Section; project: string | null }) {
+  const qc = useQueryClient();
+  const href = (to: Section) => (project ? to + withProject("", project) : to);
+  return (
+    <header className="appbar">
+      <span className="appbar__brand">Хаб Jira</span>
+      <ProjectPicker />
+      <Segmented label="Раздел" value={section}
+        options={[{ value: "/board", label: "Доска связей", href: href("/board") }, { value: "/issues", label: "Задачи", href: href("/issues") }]} />
+      <span className="appbar__spacer" />
+      <DataStatus project={project} />
+      <ThemeSwitch />
+      <Menu label="Ещё">
+        {(close) => <MenuItem onSelect={() => { close(); clearToken(); qc.clear(); }}>Сменить токен</MenuItem>}
+      </Menu>
+    </header>
+  );
+}
diff --git a/web/src/shell/DataStatus.tsx b/web/src/shell/DataStatus.tsx
new file mode 100644
index 0000000..5d01fcc
--- /dev/null
+++ b/web/src/shell/DataStatus.tsx
@@ -0,0 +1,31 @@
+import { useBoard } from "../api/queries.ts";
+import { fmtStamp } from "../board/model/util.ts";
+import { Button, IconRefresh } from "../ui/index.ts";
+import { useJiraRefresh } from "./refresh.ts";
+import { refreshText } from "./refreshStatus.ts";
+
+// состояние данных: агент, время последнего полного обновления, кнопка «Обновить из Jira» и ход пакета
+export function DataStatus({ project }: { project: string | null }) {
+  const refresh = useJiraRefresh();
+  const board = useBoard(project);
+  const ls = board.data?.last_sync ?? null;
+  const agent = refresh.agent;
+  const rt = refresh.event ? refreshText(refresh.event) : null;
+  const seen = agent?.last_seen_at ? `последний выход на связь: ${fmtStamp(agent.last_seen_at)}` : "выхода на связь ещё не было";
+  return (
+    <div className="data-status">
+      {agent && (
+        <span className="data-status__agent" title={seen}>
+          <span className={"data-status__dot" + (agent.online ? " is-online" : "")} aria-hidden="true" />
+          {agent.online ? "агент на связи" : "агент офлайн"}
+        </span>
+      )}
+      {board.data && <span className="data-status__sync">{ls ? `данные на ${fmtStamp(ls.finished_at)}` : "полного обновления не было"}</span>}
+      <Button variant="primary" icon={<IconRefresh />} loading={refresh.busy} onClick={() => void refresh.start()}
+        title="Поставить в хаб пакет «обновление по базовой JQL» и дождаться его: агент перечитает задачи из Jira">
+        Обновить из Jira
+      </Button>
+      {rt && <span className={`data-status__event data-status__event--${rt.tone}`} role="status">{rt.text}</span>}
+    </div>
+  );
+}
diff --git a/web/src/shell/Layout.tsx b/web/src/shell/Layout.tsx
index f9ccdde..3d8ee03 100644
--- a/web/src/shell/Layout.tsx
+++ b/web/src/shell/Layout.tsx
@@ -1,21 +1,19 @@
-import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Link, matchPath, useLocation, useNavigate, useRoutes } from "react-router";
+import { matchPath, useLocation, useNavigate, useRoutes } from "react-router";
 import { useProjects } from "../api/queries.ts";
-import { clearToken } from "../auth/token.ts";
 import { CloseAbortContext } from "../issues/closeAbort.ts";
 import { IssueModal } from "../issues/IssueModal.tsx";
 import { cardState, LIST_BACKGROUND } from "../issues/modal.ts";
 import { rememberedProject, rememberProject, resolveProject, withProject } from "../projects/current.ts";
 import { NewProjectDialog } from "../projects/NewProjectDialog.tsx";
 import { ProjectContext, type ProjectCtx, type ProjectState } from "../projects/ProjectContext.ts";
-import { ProjectPicker } from "../projects/ProjectPicker.tsx";
+import { AppBar } from "./AppBar.tsx";
 import { ErrorBoundary } from "./ErrorBoundary.tsx";
 import { PAGE_ROUTES } from "./pages.tsx";
+import { useJiraRefresh } from "./refresh.ts";
 import "./shell.css";
 
 export function Layout() {
-  const qc = useQueryClient();
   const location = useLocation();
   const navigate = useNavigate();
   const issueKey = matchPath("/issues/:key", location.pathname)?.params.key ?? null;
@@ -77,25 +75,15 @@ export function Layout() {
   const ctx = useMemo<ProjectCtx>(() => ({ state, projects: projects.data ?? [], select, openNew: () => setNewOpen(true) }),
     [state, projects.data, select]);
 
-  const tab = (to: string, label: string) => {
-    const active = at === to || at.startsWith(to + "/");
-    return <Link to={okLabel ? { pathname: to, search: withProject("", okLabel) } : to} className={active ? "active" : undefined}
-      aria-current={active ? "page" : undefined}>{label}</Link>;
-  };
+  const refresh = useJiraRefresh();
   return (
     <ProjectContext value={ctx}>
-      <header className="appbar">
-        <span className="brand">Хаб Jira</span>
-        <ProjectPicker />
-        <nav>{tab("/board", "Доска")}{tab("/issues", "Задачи")}</nav>
-        <span className="spacer" />
-        <button type="button" className="link" onClick={() => { clearToken(); qc.clear(); }}>Сменить токен</button>
-      </header>
-      <main className="page">
+      <AppBar section={section} project={okLabel} />
+      <main className={"page" + (section === "/board" ? " page--board" : "")}>
         <ErrorBoundary key={at}>{page}</ErrorBoundary>
       </main>
       {issueKey && <CloseAbortContext value={abortClose}><IssueModal issueKey={issueKey} onClose={close} /></CloseAbortContext>}
-      {newOpen && <NewProjectDialog onClose={() => setNewOpen(false)} onCreated={(p) => { setNewOpen(false); select(p.label); }} />}
+      {newOpen && <NewProjectDialog onClose={() => setNewOpen(false)} onCreated={(p, batchId) => { setNewOpen(false); refresh.track(batchId); select(p.label); }} />}
     </ProjectContext>
   );
 }
diff --git a/web/src/shell/RefreshProvider.tsx b/web/src/shell/RefreshProvider.tsx
index 33affe1..0f6c1b9 100644
--- a/web/src/shell/RefreshProvider.tsx
+++ b/web/src/shell/RefreshProvider.tsx
@@ -93,7 +93,9 @@ export function RefreshProvider({ children, pollMs = POLL_MS }: { children: Reac
     qc.removeQueries({ queryKey: ["batch", id] });
     // перечитывание активных снимков досок — после своего пакета, подхват не нужен; показанный файл не заменяется (M-1)
     skipPickup.current = qc.getQueryCache().findAll({ queryKey: qk.boardAll, type: "active" }).length;
-    for (const key of [qk.boardAll, ["issues"], ["issue"], qk.projects]) void qc.invalidateQueries({ queryKey: key });
+    // T4.1: перечитывание могло упасть (успеха нет, счётчик не уменьшился) — по его завершению счётчик гасится в любом случае
+    void qc.invalidateQueries({ queryKey: qk.boardAll }).finally(() => { skipPickup.current = 0; });
+    for (const key of [["issues"], ["issue"], qk.projects]) void qc.invalidateQueries({ queryKey: key });
   }, [qc]);
 
   useEffect(() => {
diff --git a/web/src/shell/refresh.test.tsx b/web/src/shell/refresh.test.tsx
index e3a5a17..aca0856 100644
--- a/web/src/shell/refresh.test.tsx
+++ b/web/src/shell/refresh.test.tsx
@@ -6,7 +6,7 @@ import { useBoard, useIssues } from "../api/queries.ts";
 import { makeQueryClient } from "../api/queryClient.ts";
 import { getToken, setToken } from "../auth/token.ts";
 import { json } from "../test/fetchMock.ts";
-import { batch, deferred, hub, sleep } from "../test/batchHub.ts";
+import { batch, deferred, hub, SNAP, sleep } from "../test/batchHub.ts";
 import { useJiraRefresh, type JiraRefresh } from "./refresh.ts";
 import { RefreshProvider } from "./RefreshProvider.tsx";
 
@@ -147,6 +147,27 @@ describe("RefreshProvider", () => {
     expect(getToken()).toBe("new-tok");
   });
 
+  it("T4.1: упавшее перечитывание снимка после своего пакета не гасит подхват следующей независимой загрузки", async () => {
+    let boardFails = false, listed: unknown[] = [];
+    const h = hub({
+      "GET /board": () => (boardFails ? json(500, { error: "boom" }) : json(200, SNAP)),
+      "GET /batches": () => json(200, { batches: listed }),
+      "GET /batches/:id": (url) => (url.pathname.endsWith("/8") ? json(200, { id: 8, author: "viewer", status: "running", remaining_seconds: 3, counts: {}, commands: [{ type: "refresh", status: "running" }] }) : batch("done")),
+    });
+    const { result } = renderHook(() => ({ r: useJiraRefresh(), b: useBoard("AWPCA") }), { wrapper: wrap() });
+    await waitFor(() => expect(result.current.b.data).toBeDefined());
+    await waitFor(() => expect(h.count("GET /batches")).toBeGreaterThanOrEqual(1));
+    boardFails = true;
+    await act(() => result.current.r.start());
+    await waitFor(() => expect(result.current.r.event).toEqual({ kind: "batch-done", id: 7 }));
+    await waitFor(() => expect(h.count("GET /board")).toBe(2));   // перечитывание после пакета упало
+    await sleep(30);
+    boardFails = false;
+    listed = [{ id: 8, author: "viewer", status: "running" }];
+    await act(async () => { await result.current.b.refetch(); });
+    await waitFor(() => expect(result.current.r.event).toMatchObject({ kind: "batch", id: 8 }));
+  });
+
   it("по завершении инвалидируются board, issues, issue, projects", async () => {
     let polls = 0;
     const h = hub({ "GET /batches/:id": () => (++polls < 2 ? batch("running") : batch("done")) });
diff --git a/web/src/shell/shell.css b/web/src/shell/shell.css
index 3ea927e..32371c8 100644
--- a/web/src/shell/shell.css
+++ b/web/src/shell/shell.css
@@ -1,8 +1,28 @@
-/* оболочка: верхняя панель разделов */
-.appbar{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
-.appbar .brand{font-weight:600}
-.appbar nav{display:flex;gap:4px}
-.appbar nav a{color:var(--fg);text-decoration:none;padding:6px 10px;border-radius:6px}
-.appbar nav a.active{background:var(--accent);color:var(--accent-fg)}
-.appbar .spacer{flex:1 1 auto}
+/* оболочка: верхняя панель разделов (design.md, решение 9) */
+.appbar{
+  display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;min-height:64px;padding:8px 24px;box-sizing:border-box;
+  border-bottom:1px solid var(--color-border-default);background:var(--color-bg-surface);
+}
+.appbar__brand{font-size:16px;line-height:24px;font-weight:700;color:var(--color-text-primary);white-space:nowrap}
+.appbar__spacer{flex:1 1 auto}
+.data-status{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
+.data-status__agent{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
+.data-status__dot{width:8px;height:8px;border-radius:50%;background:var(--color-status-error)}
+.data-status__dot.is-online{background:var(--color-status-success)}
+.data-status__sync{white-space:nowrap}
+.data-status__event{font-weight:600}
+.data-status__event--info{color:var(--color-text-secondary)}
+.data-status__event--success{color:var(--color-status-success)}
+.data-status__event--warning{color:var(--color-status-warning)}
+.data-status__event--error{color:var(--color-status-error)}
 .crash{max-width:640px;margin:48px auto}
+@media (max-width:1099px){
+  .appbar .data-status{order:10;flex:1 0 100%}
+  .appbar .appbar__spacer{flex:1 1 0}
+}
+@media (max-width:639px){
+  .appbar{padding-inline:16px}
+  .appbar__brand{display:none}
+  .appbar .ui-seg{flex:1 1 100%;order:5}
+  .appbar .ui-seg__item{flex:1 1 0;justify-content:center}
+}
diff --git a/web/src/shell/theme.ts b/web/src/shell/theme.ts
index 82389a4..a50bac2 100644
--- a/web/src/shell/theme.ts
+++ b/web/src/shell/theme.ts
@@ -1,7 +1,6 @@
 // тема интерфейса: "" — системная, light, dark; ключ graph-theme, как у прежней доски (links.html, строки 1000–1003)
 export const THEMES = ["", "light", "dark"] as const;
 export type Theme = (typeof THEMES)[number];
-export const THEME_NAMES: Record<Theme, string> = { "": "системная", light: "светлая", dark: "тёмная" };
 const KEY = "graph-theme";
 
 export function readTheme(): Theme {
diff --git a/web/src/styles/base.css b/web/src/styles/base.css
index 9b5edde..2ca943d 100644
--- a/web/src/styles/base.css
+++ b/web/src/styles/base.css
@@ -7,7 +7,9 @@ h1{font-size:var(--fs-section);line-height:var(--lh-section);font-weight:700;mar
 .spacer{flex:1 1 auto}
 .hint{font-size:13px;color:var(--muted)}
 .warn{color:var(--p-high)}
-.page{padding-inline:16px;padding-block:0 32px}
+.page{padding-inline:24px;padding-block:0 32px;max-width:1440px;margin-inline:auto}
+.page--board{max-width:none}
+@media (max-width:639px){.page{padding-inline:16px}}
 .login{max-width:560px;margin:48px auto}.login form{display:flex;gap:8px}.login input{flex:1;font:inherit;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}.login .err{color:var(--p-crit)}
 :focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
 @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
-- 
2.47.2


From 9e480cceaf4019c13c9b9864003887c5c75333b7 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:26:12 +0400
Subject: [PATCH 10/23] =?UTF-8?q?=D0=A1=D0=BF=D0=B5=D0=BA=D0=B0:=20=D1=80?=
 =?UTF-8?q?=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=2015=20=E2=80=94=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D1=81=D0=BE=D1=82=D0=B0=20=D0=B2=D0=B5=D1=80=D1=85=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=B9=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 openspec/changes/redesign/design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/openspec/changes/redesign/design.md b/openspec/changes/redesign/design.md
index 2e5c9e9..90eeb10 100644
--- a/openspec/changes/redesign/design.md
+++ b/openspec/changes/redesign/design.md
@@ -189,3 +189,4 @@
 | 12 | 21.10.2026 | Проверка вида скриншотами в PR, без пиксельных эталонов (решение 23) | вид будет меняться по замечаниям, эталоны мешали бы | низкая |
 | 13 | 22.10.2026 | Задача 1: тёмные `--color-action-danger` `#ffaea5` и hover `#ffcbc5` взяты из tokens.json AURA; `--color-status-error` остаётся `#e26c67`; затемнение фона окон везде `--color-overlay` 45% (у проектов было 40%); палитра `--k-*`/`--p-*` подобрана на глаз, `--k-test` малиновый (`#a63d78` / `#e07fb0`), чтобы не сливаться с зелёным действием | токены AURA — канон; один overlay вместо двух значений; различимость видов задач на доске | низкая: правка значений в tokens.css |
 | 14 | 22.10.2026 | Задача 4: регресс T4.1 (счётчик `skipPickup` не уменьшается при ошибке перечитывания) чинится в Задаче 5, без отдельного раунда ревью; в Задаче 4 пропуск подхвата сделан счётчиком вместо флага, подхват коалесцируется, тоны `refreshText`: error для batch-lost/failed/hub-down/error, warning для cancelled | регресс мелкий и в том же модуле, что правится в Задаче 5 | низкая: один пропущенный подхват чужого пакета до следующей загрузки снимка |
+| 15 | 22.10.2026 | Задача 5: высота верхней панели `min-height: 64` (не фиксированная), чтобы вторая строка данных переносилась при ширине <1100 px; панель не sticky | перенос без обрезки | низкая: заменить на фиксированную высоту и скролл строки |
-- 
2.47.2


From cec8beecfbad8d450521fe755fda99a078918b55 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:33:32 +0400
Subject: [PATCH 11/23] =?UTF-8?q?feat(web):=20=D1=88=D0=B0=D0=BF=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D0=B4=D0=BE=D1=81=D0=BA=D0=B8,=20=D0=BF=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=20=D1=83=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=BF=D0=BE=20=D0=B3=D1=80=D1=83=D0=BF?=
 =?UTF-8?q?=D0=BF=D0=B0=D0=BC,=20=D1=81=D0=B2=D0=BE=D1=80=D0=B0=D1=87?=
 =?UTF-8?q?=D0=B8=D0=B2=D0=B0=D0=B5=D0=BC=D0=B0=D1=8F=20=D0=BB=D0=B5=D0=B3?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B4=D0=B0=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BoardHeader вместо Toolbar, панель управления в Panel, легенда сворачивается
(jira-hub-legend), ящик проблем, экспорт и таблица связей в Panel.
Dropdown: явный проп menu; тест фонового обновления проектов мокает GET /batches/7.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/e2e/board.spec.ts                       |  2 +-
 web/e2e/geometry.spec.ts                    | 10 +--
 web/src/board/BoardPage.test.tsx            | 59 +++++++++++++--
 web/src/board/BoardPage.tsx                 | 15 ++--
 web/src/board/board.css                     | 72 +++++++++++-------
 web/src/board/components/BoardHeader.tsx    | 84 +++++++++++++++++++++
 web/src/board/components/ExportBox.tsx      | 11 +--
 web/src/board/components/FilterBar.tsx      | 46 +++++++----
 web/src/board/components/Legend.tsx         | 28 ++++---
 web/src/board/components/LinkTable.tsx      |  7 +-
 web/src/board/components/MultiSelect.tsx    | 14 ++--
 web/src/board/components/ProblemsDrawer.tsx |  7 +-
 web/src/board/components/Toolbar.tsx        | 78 -------------------
 web/src/board/legendPref.ts                 | 10 +++
 web/src/projects/projects.test.tsx          |  1 +
 web/src/styles/controls.css                 |  2 -
 web/src/ui/Menu.tsx                         | 16 ++--
 web/src/ui/inputs.tsx                       |  4 +-
 18 files changed, 288 insertions(+), 178 deletions(-)
 create mode 100644 web/src/board/components/BoardHeader.tsx
 delete mode 100644 web/src/board/components/Toolbar.tsx
 create mode 100644 web/src/board/legendPref.ts

diff --git a/web/e2e/board.spec.ts b/web/e2e/board.spec.ts
index 644d640..61c3c35 100644
--- a/web/e2e/board.spec.ts
+++ b/web/e2e/board.spec.ts
@@ -35,7 +35,7 @@ test("растяжка за уголок и возврат размера дво
 });
 
 test("«по датам» — колонки дат, подписи и стрелки", async ({ page }) => {
-  await page.getByRole("button", { name: "▥ по датам" }).click();
+  await page.getByRole("button", { name: "По датам" }).click();
   await expect(page.locator(".dcol").first()).toBeVisible();
   await expect(page.locator(".dates-track .dlabel").first()).toBeVisible();
   await expect(page.locator("svg.edges path")).not.toHaveCount(0);
diff --git a/web/e2e/geometry.spec.ts b/web/e2e/geometry.spec.ts
index 87c09f4..2be7084 100644
--- a/web/e2e/geometry.spec.ts
+++ b/web/e2e/geometry.spec.ts
@@ -28,7 +28,7 @@ test("высота карточек берётся по содержимому 
 
 test("при открытой панели «Проблемы» полоса дат по ширине равна обёртке холста", async ({ page }) => {
   await login(page);
-  await page.getByRole("button", { name: "▥ по датам" }).click();
+  await page.getByRole("button", { name: "По датам" }).click();
   await expect(page.locator(".dates-in")).toBeVisible();
   for (const open of [false, true]) {
     if (open) {
@@ -47,22 +47,22 @@ test("смена спринта и исполнителя, убирающая к
   await login(page);
   await expect(page.locator(".board .card[data-key]").first()).toBeVisible();
   const total = await page.locator(".board .card[data-key]").count();
-  const dd = (i: number) => page.locator(".bar .dd-btn").nth(i);   // 0 — спринты, 1 — исполнители
+  const dd = (i: number) => page.locator(".board-controls .multi-btn").nth(i);   // 0 — спринты, 1 — исполнители
   for (const [i, name] of [[0, "Спринт 3"], [1, "Сидорова"]] as const) {
     await dd(i).click();
     await page.getByRole("button", { name: "Снять выбор" }).click();
     await page.locator(".dd-item", { hasText: name }).first().locator("input").check();
     await page.keyboard.press("Escape");
     await expect(page.locator("h1")).toHaveText("Доска связей");
-    await expect(page.locator(".top")).toBeVisible();
+    await expect(page.locator(".sticky .ui-page-header")).toBeVisible();
     await expect(page.locator(".board")).toBeVisible();
     await expect.poll(() => page.locator(".board .card[data-key]:not(.dim)").count(), `фильтр «${name}»`).toBeLessThan(total);
     await dd(i).click();
     await page.getByRole("button", { name: "Снять выбор" }).click();
     await page.keyboard.press("Escape");
   }
-  await page.getByRole("button", { name: "▥ по датам" }).click();
-  await expect(page.locator(".top")).toBeVisible();
+  await page.getByRole("button", { name: "По датам" }).click();
+  await expect(page.locator(".sticky .ui-page-header")).toBeVisible();
   expect(errs).toEqual([]);
 });
 
diff --git a/web/src/board/BoardPage.test.tsx b/web/src/board/BoardPage.test.tsx
index 5e70356..bdce9f7 100644
--- a/web/src/board/BoardPage.test.tsx
+++ b/web/src/board/BoardPage.test.tsx
@@ -63,7 +63,7 @@ describe("страница доски", () => {
     hub();
     page();
     await screen.findByText(/задач из 9/);
-    const nb = screen.getByRole("button", { name: "+ соседи по связям" });
+    const nb = screen.getByRole("button", { name: "Соседи по связям" });
     await userEvent.click(nb);
     expect(nb).toHaveAttribute("aria-pressed", "true");
     expect(localStorage.getItem("graph-neighbors")).toBe("1");
@@ -78,13 +78,23 @@ describe("страница доски", () => {
     await userEvent.click(screen.getByRole("button", { name: /Проблемы/ }));
     expect(screen.getByText("Проблемы на доске")).toBeInTheDocument();
     expect(localStorage.getItem("graph-prob")).toBe("1");
+    expect(screen.getByRole("button", { name: /^Проблемы/ })).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("кнопка «Проблемы» несёт счётчик и aria-pressed", async () => {
+    hub();
+    page();
+    await screen.findByText(/задач из 9/);
+    const b = screen.getByRole("button", { name: /^Проблемы/ });
+    expect(b).toHaveAttribute("aria-pressed", "false");
+    expect(within(b).getByText(/^\d+$/)).toBeInTheDocument();
   });
 
   it("экспорт JSON показывает выгрузку arm-ka-links/1 с раскладкой", async () => {
     hub();
     page();
     await screen.findByText(/задач из 9/);
-    await userEvent.click(screen.getByTitle("Ещё"));
+    await userEvent.click(screen.getByRole("button", { name: "Ещё" }));
     await userEvent.click(screen.getByRole("button", { name: "Экспорт JSON" }));
     const text = (screen.getByRole("textbox") as HTMLTextAreaElement).value;
     expect(JSON.parse(text)).toMatchObject({ format: "arm-ka-links/1", source: "Хаб" });
@@ -96,7 +106,7 @@ describe("страница доски", () => {
     localStorage.setItem("graph-pos:board", '{"AURORA-9001":{"x":1,"ry":40}}');
     page();
     await screen.findByText(/задач из 9/);
-    await userEvent.click(screen.getByTitle("Ещё"));
+    await userEvent.click(screen.getByRole("button", { name: "Ещё" }));
     await userEvent.click(screen.getByRole("button", { name: "Сбросить раскладку" }));
     await userEvent.click(screen.getByRole("button", { name: "Да, сбросить" }));
     expect(localStorage.getItem("graph-pos:board")).toBeNull();
@@ -108,7 +118,42 @@ describe("страница доски", () => {
     await screen.findByText(/задач из 9/);
     const input = document.querySelector('input[type="file"]') as HTMLInputElement;
     fireEvent.change(input, { target: { files: [new File([fx("jira-export.csv")], "jira-export.csv", { type: "text/csv" })] } });
-    expect(await screen.findByText("jira-export.csv (из файла)")).toBeInTheDocument();
+    expect(await screen.findByText("из файла: jira-export.csv")).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Вернуться к данным хаба" }));
+    expect(await screen.findByText(/^Хаб · данные на/)).toBeInTheDocument();
+    expect(screen.queryByText(/^из файла:/)).not.toBeInTheDocument();
+  });
+
+  it("«Загрузить файл…» в меню «Ещё» открывает выбор файла", async () => {
+    hub();
+    page();
+    await screen.findByText(/задач из 9/);
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const click = vi.spyOn(input, "click");
+    await userEvent.click(screen.getByRole("button", { name: "Ещё" }));
+    await userEvent.click(screen.getByRole("button", { name: "Загрузить файл…" }));
+    expect(click).toHaveBeenCalled();
+  });
+
+  it("свёрнутая легенда: скрыт «тестирование», «Легенда» свёрнута, после перемонтирования свёрнута, «скрыто: 1»", async () => {
+    hub();
+    const r = page();
+    await screen.findByText(/задач из 9/);
+    const legend = () => document.querySelector(".legend");
+    await userEvent.click(within(legend() as HTMLElement).getByRole("button", { name: /тестирование/ }));
+    expect(screen.getByText("скрыто: 1")).toBeInTheDocument();
+    const toggle = screen.getByRole("button", { name: /^Легенда/ });
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    await userEvent.click(toggle);
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    expect(legend()).toBeNull();
+    expect(localStorage.getItem("jira-hub-legend")).toBe("0");
+    r.unmount();
+    page();
+    await screen.findByText(/задач из 9/);
+    expect(screen.getByRole("button", { name: /^Легенда/ })).toHaveAttribute("aria-expanded", "false");
+    expect(legend()).toBeNull();
+    expect(screen.getByText("скрыто: 1")).toBeInTheDocument();
   });
 
   it("доска не рисует «Обновить из Jira» и ход пакета: они в верхней панели", async () => {
@@ -116,7 +161,9 @@ describe("страница доски", () => {
     page();
     await screen.findByText(/задач из 9/);
     expect(screen.queryByRole("button", { name: "Обновить из Jira" })).not.toBeInTheDocument();
-    await userEvent.click(screen.getByTitle("Ещё"));
+    await userEvent.click(screen.getByRole("button", { name: "Ещё" }));
+    expect(screen.getByRole("button", { name: "Ещё" })).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByRole("button", { name: "Перечитать" })).toBeInTheDocument();   // меню действительно открыто
     expect(screen.queryByRole("button", { name: /^Тема/ })).not.toBeInTheDocument();
   });
   it("заголовок страницы — h1, в шапке label; строка состояния — только события доски", async () => {
@@ -147,7 +194,7 @@ describe("страница доски", () => {
     renderWithProviders(<StrictMode><BoardPage project="AWPCA" /></StrictMode>, { route: "/board", path: "/board" });
     await screen.findByText(/^Хаб · данные на/);
     const set = vi.spyOn(Storage.prototype, "setItem");
-    fireEvent.click(screen.getByRole("button", { name: /критический путь/ }));
+    fireEvent.click(screen.getByRole("button", { name: "Критический путь" }));
     expect(set.mock.calls.filter(([k]) => k === "graph-crit")).toEqual([["graph-crit", "1"]]);
   });
 
diff --git a/web/src/board/BoardPage.tsx b/web/src/board/BoardPage.tsx
index a075816..ee9f1e6 100644
--- a/web/src/board/BoardPage.tsx
+++ b/web/src/board/BoardPage.tsx
@@ -8,10 +8,12 @@ import { FilterBar } from "./components/FilterBar.tsx";
 import { Legend } from "./components/Legend.tsx";
 import { LinkTable } from "./components/LinkTable.tsx";
 import { problemCount, ProblemsDrawer } from "./components/ProblemsDrawer.tsx";
-import { Notice, Toolbar } from "./components/Toolbar.tsx";
+import { Notice } from "../ui/index.ts";
+import { BoardHeader, BoardNotes } from "./components/BoardHeader.tsx";
 import { dictsFromSettings } from "./dicts.ts";
 import { exportFileName, exportJson } from "./exportJson.ts";
 import { todayIso } from "./model/util.ts";
+import { readLegendOpen, saveLegendOpen } from "./legendPref.ts";
 import { useBoardPrefs } from "./useBoardPrefs.ts";
 import { useBoardSource } from "./useBoardSource.ts";
 import "./board.css";
@@ -26,6 +28,7 @@ export function BoardPage({ project }: { project: string }) {
   const vis = useMemo(() => computeVisible(src.model, prefs.filters, prefs.store.laneOrder, today),
     [src.model, prefs.filters, prefs.store.laneOrder, today]);
   const [exportText, setExportText] = useState<string | null>(null);
+  const [legendOpen, setLegendOpen] = useState(readLegendOpen);
   const saveRef = useRef<(() => void) | null>(null);
   // высота закреплённой шапки — ящик «Проблемы» и полоса дат липнут под ней (строки 1016–1019); при уходе — снимаем
   const headRef = useCallback((el: HTMLDivElement | null) => {
@@ -42,10 +45,10 @@ export function BoardPage({ project }: { project: string }) {
   if (settings.error) return <p className="warn" data-testid="page-board">Настройки хаба не загрузились: {settings.error.message}</p>;
   if (d && d.missing.length) {
     return (
-      <div className="notice" role="alert" data-testid="page-board">
+      <div data-testid="page-board"><Notice tone="error">
         В настройках хаба нет {d.missing.join(" и ")} — доска не может перевести виды работ и типы связей Jira. Задайте
         словари в config.example.json и выполните <code>uv run jira-hub init --config …</code> или запишите их через PUT /settings.
-      </div>
+      </Notice></div>
     );
   }
 
@@ -67,14 +70,14 @@ export function BoardPage({ project }: { project: string }) {
   return (
     <div data-testid="page-board">
       <div className="sticky" ref={headRef}>
-        <Toolbar label={src.label} title={src.title} status={src.status} byDate={prefs.filters.byDate}
+        <BoardHeader label={src.label} title={src.title} source={src.source} fileName={src.model.fileName} status={src.status} byDate={prefs.filters.byDate}
           snap={prefs.snap} model={src.model} vis={vis} problemCount={problemCount(vis.problems)} problemsOpen={prefs.problems}
           tableOpen={prefs.table} onReload={src.reload} onFile={onFile}
           onProblems={() => prefs.toggle("problems")} onExport={onExport} onTable={() => prefs.toggle("table")}
           onSnap={() => prefs.toggle("snap")} onReset={prefs.resetLayout} />
         <FilterBar model={src.model} prefs={prefs} />
-        <Notice model={src.model} />
-        <Legend prefs={prefs} />
+        <BoardNotes model={src.model} />
+        <Legend prefs={prefs} open={legendOpen} onToggle={() => { const n = !legendOpen; setLegendOpen(n); saveLegendOpen(n); }} />
       </div>
       {exportText !== null && <ExportBox text={exportText} onClose={() => setExportText(null)} />}
       <BoardCanvas vis={vis} byDate={prefs.filters.byDate} snap={prefs.snap} today={today} store={prefs.store}
diff --git a/web/src/board/board.css b/web/src/board/board.css
index e8fa494..65ff0f6 100644
--- a/web/src/board/board.css
+++ b/web/src/board/board.css
@@ -1,14 +1,31 @@
-/* 3. Закреплённая шапка: название, файл, статистика, кнопка проблем, меню; под ней строка управления и легенда */
-.sticky{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);padding-block:12px 8px;margin:0 0 8px;box-shadow:0 1px 0 var(--line)}
-.top{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:0 0 8px;min-height:34px}
-.src{display:inline-flex;align-items:baseline;gap:8px;min-width:0}
-.file-name{font-size:14px;color:var(--muted);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.stats{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
-.stats b{color:var(--fg);font-weight:500}
-/* 5. Строка управления, предупреждения о файле, легенда-фильтр */
-.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
-.notice{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;color:var(--p-high);margin:0 0 6px}
-.legend{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:0;font-size:13px;color:var(--muted)}
+/* 3. Закреплённая шапка: заголовок и действия (PageHeader), панель управления (Panel), предупреждения, легенда */
+.sticky{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);padding-block:var(--space-4) var(--space-2);margin:0 0 var(--space-2);box-shadow:0 1px 0 var(--line)}
+.sticky .ui-page-header{margin-bottom:var(--space-3);gap:var(--space-2)}
+.stats{font-variant-numeric:tabular-nums}
+.stats b{color:var(--color-text-primary);font-weight:600}
+.board-src{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);min-height:var(--lh-body)}
+.board-src:empty{display:none}
+.board-src__label{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary);max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.board-event{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text-secondary)}
+.board-event--warn{color:var(--color-status-warning)}
+.menu__label{display:inline-flex;align-items:center;gap:var(--space-2)}
+.confirm{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--fs-body);line-height:var(--lh-body);max-width:280px}
+.confirm__row{display:flex;gap:var(--space-2)}
+.menu .confirm .ui-btn{width:auto;flex:1 1 0;justify-content:center;border-radius:var(--radius-round);min-height:var(--control-h);padding:0 var(--space-3);font-weight:600}
+.menu .confirm .ui-btn--danger{background:var(--color-action-danger);color:var(--color-text-on-primary)}
+.menu .confirm .ui-btn--secondary{background:transparent;border:1px solid var(--color-border-strong)}
+/* 5. Панель управления: выбор спринтов и исполнителей, группы «Показать» и «Режим» */
+.board-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-2)}
+.board-controls__group{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
+.board-controls__label{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
+.board-controls__sep{width:1px;align-self:stretch;min-height:var(--control-h);background:var(--color-border-default)}
+.board-controls__text{font-size:var(--fs-body);color:var(--color-text-secondary)}
+.multi-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:auto;min-width:180px;max-width:360px;text-align:left;cursor:pointer}
+.multi-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.multi-btn[aria-expanded="true"]{border-color:var(--color-action-primary)}
+.legend-box{margin:0}
+.legend-head{display:flex;align-items:center;gap:var(--space-2)}
+.legend{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:var(--space-1) 0 0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
 .legend span{display:inline-flex;align-items:center;gap:6px}
 .legend .sep{width:1px;height:14px;background:var(--line)}
 .legend .hint{margin-left:auto}
@@ -30,7 +47,6 @@ svg.edges,svg.guides{position:absolute;inset:0;width:100%;height:100%;pointer-ev
 svg.guides{z-index:3}
 svg.guides line{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
 .empty{padding:40px 16px;color:var(--muted);text-align:center}
-.bar>span:empty{display:none}
 #hubState{white-space:normal;min-width:0}
 .login{max-width:560px;margin:48px auto;padding:20px 24px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
 .login h2{margin:0 0 8px;font-size:17px;font-weight:600}
@@ -128,32 +144,31 @@ svg.guides line{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
 .who.none::before{background:transparent;border:1px solid var(--muted)}
 
 /* 7. Панель проблем справа от доски, липнет под шапкой и прокручивается внутри себя */
-.drawer{flex:0 0 340px;max-width:40%;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow:auto;font-size:14px;box-sizing:border-box;align-self:flex-start;position:sticky;top:calc(var(--head-h,0px) + 8px);max-height:calc(100vh - var(--head-h,0px) - 24px)}
-.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
-.drawer-head b{font-weight:600}
-.drawer h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:12px 0 4px}
+.drawer{flex:0 0 340px;max-width:40%;overflow:auto;box-sizing:border-box;align-self:flex-start;position:sticky;top:calc(var(--head-h,0px) + 8px);max-height:calc(100vh - var(--head-h,0px) - 24px);font-size:var(--fs-body)}
+.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
+.board-h2{margin:0;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;color:var(--color-text-primary)}
+.board-h3{margin:var(--space-3) 0 var(--space-1);font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:600;color:var(--color-text-secondary)}
 .drawer ul{margin:0;padding-left:18px}
 .drawer li{margin:3px 0}
-.drawer .k{font-family:var(--font-mono);font-size:13px;color:var(--accent);text-decoration:none}
-.drawer .ok{color:var(--k-test);margin:8px 0 0}
+.drawer .k{font-family:var(--font-mono);font-size:13px;color:var(--color-action-primary);text-decoration:none}
+.drawer .ok{color:var(--color-status-success);margin:var(--space-2) 0 0}
 .drawer .why{color:var(--muted)}
 
-/* 8. Экспорт JSON и таблица связей (включаются из меню «⋯») */
-.export{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 8px;display:flex;flex-direction:column;gap:8px}
-.export textarea{font-family:var(--font-mono);font-size:11.5px;width:100%;box-sizing:border-box;height:180px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);padding:8px;resize:vertical}
-details{margin-top:12px}
-summary{cursor:pointer;color:var(--muted);font-size:14px}
-.tbl{max-width:100%;overflow-x:auto;margin-top:8px}
-table{border-collapse:collapse;font-size:14px;min-width:520px}
+/* 8. Экспорт JSON и таблица связей (включаются из меню «Ещё») */
+.export{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-2)}
+.export textarea{font-family:var(--font-mono);font-size:11.5px;width:100%;box-sizing:border-box;height:180px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--fg);padding:8px;resize:vertical}
+.link-table{margin-top:var(--space-3)}
+.tbl{max-width:100%;overflow-x:auto;margin-top:var(--space-2)}
+table{border-collapse:collapse;font-size:var(--fs-body);min-width:520px}
 th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:top}
-th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
-td.k{font-family:var(--font-mono);font-size:12px;white-space:nowrap}
+th{font-size:var(--fs-caption);font-weight:600;color:var(--color-text-secondary)}
+td.k{font-family:var(--font-mono);font-size:12px;white-space:nowrap;color:var(--color-action-primary)}
 
 /* 9. Движение и узкие экраны */
 @media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s}}
 @media (prefers-reduced-motion:reduce){.card .grip,.fold::before{transition:none}}
 @media (max-width:900px){.stage{flex-direction:column}.drawer{flex:none;max-width:100%;max-height:none;position:static}}
-@media (max-width:640px){.sticky{position:static}.dates-bar{position:static}.file-name{max-width:100%}}
+@media (max-width:640px){.sticky{position:static}.dates-bar{position:static}}
 
 /* «Открыть карточку» в заголовке карточки (R-1) */
 .card .open-card{margin-left:6px;color:var(--muted);text-decoration:none;font-size:13px}
@@ -162,4 +177,3 @@ td.k{font-family:var(--font-mono);font-size:12px;white-space:nowrap}
 .measure{position:absolute;left:-100000px;top:0;visibility:hidden;pointer-events:none}
 .measure .card{position:static;height:auto}
 .measure .card .title{-webkit-line-clamp:unset}
-.top h1{font-size:15px;font-weight:600;margin:0}
diff --git a/web/src/board/components/BoardHeader.tsx b/web/src/board/components/BoardHeader.tsx
new file mode 100644
index 0000000..c2d3fb6
--- /dev/null
+++ b/web/src/board/components/BoardHeader.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState } from "react";
+import { statusText, type BoardStatus } from "../status.ts";
+import type { BoardModel, Visible } from "../types.ts";
+import { NOT_IN_HUB } from "../constants.ts";
+import { Badge, Button, IconButton, IconRefresh, IconUpload, IconWarning, Menu, MenuItem, MenuSeparator, Notice, PageHeader } from "../../ui/index.ts";
+
+interface BoardHeaderProps {
+  label: string; title: string; source: "hub" | "file"; fileName: string; status: BoardStatus | null; byDate: boolean; snap: boolean;
+  model: BoardModel; vis: Visible; problemCount: number; problemsOpen: boolean; tableOpen: boolean;
+  onReload(): void; onFile(name: string, text: string): void; onProblems(): void;
+  onExport(): void; onTable(): void; onSnap(): void; onReset(): void;
+}
+
+export function BoardHeader(p: BoardHeaderProps) {
+  const [confirm, setConfirm] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+  useEffect(() => { if (!confirm) return; const t = setTimeout(() => setConfirm(false), 8000); return () => clearTimeout(t); }, [confirm]);
+  const st = p.status ? statusText(p.status) : null;   // только события доски; ход пакета «Обновить из Jira» — в верхней панели
+  const m = p.model, v = p.vis, r = v.removed;
+  const coreShown = v.nodes.filter((n) => !n.dim).length, ctxShown = v.nodes.length - coreShown;
+  const stats = (
+    <span className="stats">
+      <b>{coreShown}</b> задач из {m.nodes.filter((n) => !n.stub).length}
+      {ctxShown > 0 && <> · <b>+{ctxShown}</b> соседи по связям</>}
+      {" · "}<b>{v.links.length}</b> связей из {m.links.length}
+      {r.loose > 0 && <> · скрыто без связей: {r.loose}</>}
+    </span>
+  );
+  return (
+    <PageHeader title="Доска связей" subtitle={stats} actions={
+      <>
+        <Button variant="secondary" icon={<IconWarning />} aria-pressed={p.problemsOpen} onClick={p.onProblems}
+          title="Сроки блокеров, задачи без исполнителя, передачи между людьми">
+          Проблемы <Badge tone={p.problemCount ? "error" : "neutral"}>{p.problemCount}</Badge>
+        </Button>
+        <Menu label="Ещё">
+          {(close) => (
+            <>
+              <MenuItem title="Загрузить снимок зеркала хаба заново, без обращения к Jira" onSelect={() => { close(); p.onReload(); }}>Перечитать</MenuItem>
+              <MenuItem icon={<IconUpload size={16} />} onSelect={() => { close(); fileRef.current?.click(); }}
+                title="CSV из фильтра Jira или JSON, выгруженный этой доской. JSON при работе с хабом переносит только расстановку карточек, дорожки и фильтры; CSV показывает снимок файла до «Перечитать»">Загрузить файл…</MenuItem>
+              <MenuItem onSelect={() => { close(); p.onExport(); }}>Экспорт JSON</MenuItem>
+              <MenuItem pressed={p.tableOpen} onSelect={p.onTable}>Таблица связей</MenuItem>
+              <MenuItem pressed={p.snap} onSelect={p.onSnap}>Привязка к сетке</MenuItem>
+              <MenuSeparator />
+              {!confirm ? <MenuItem danger onSelect={() => setConfirm(true)}>Сбросить раскладку</MenuItem> : (
+                <div className="confirm">
+                  <span>Вернуть автоматическую раскладку {p.byDate ? "режима «по датам»" : "(обычную; раскладка «по датам» останется)"}, порядок и раскрытие дорожек?</span>
+                  <div className="confirm__row">
+                    <Button variant="danger" onClick={() => { p.onReset(); setConfirm(false); close(); }}>Да, сбросить</Button>
+                    <Button variant="secondary" onClick={() => setConfirm(false)}>Нет</Button>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </Menu>
+        <input ref={fileRef} type="file" accept=".csv,.json,text/csv,application/json" hidden onChange={async (e) => {
+          const f = e.target.files?.[0];
+          e.target.value = "";
+          if (f) p.onFile(f.name, await f.text());
+        }} />
+      </>
+    }>
+      <div className="board-src">
+        {p.source === "file" ? (
+          <>
+            <Badge tone="info">из файла: {p.fileName}</Badge>
+            <IconButton label="Вернуться к данным хаба" icon={<IconRefresh size={16} />} onClick={p.onReload} />
+          </>
+        ) : <span className="board-src__label" title={p.title}>{p.label}</span>}
+        {st && <span className={"board-event" + (st.warn ? " board-event--warn" : "")} role="status">{st.text}</span>}
+      </div>
+    </PageHeader>
+  );
+}
+
+// предупреждения о данных под шапкой (строки 878–880)
+export function BoardNotes({ model }: { model: BoardModel }) {
+  const notes = [...model.problems];
+  if (model.missing) notes.push(`упомянуты в связях, но в ${model.stubLane === NOT_IN_HUB ? "зеркале хаба" : "файле"} отсутствуют: ${model.missing}`);
+  if (!notes.length) return null;
+  return <Notice tone="warning">{notes.map((n) => <div key={n}>{n}</div>)}</Notice>;
+}
diff --git a/web/src/board/components/ExportBox.tsx b/web/src/board/components/ExportBox.tsx
index 0fa491c..9e9a731 100644
--- a/web/src/board/components/ExportBox.tsx
+++ b/web/src/board/components/ExportBox.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { Button, Panel } from "../../ui/index.ts";
 
 export function ExportBox({ text, onClose }: { text: string; onClose(): void }) {
   const [copied, setCopied] = useState(false);
@@ -8,13 +9,13 @@ export function ExportBox({ text, onClose }: { text: string; onClose(): void })
   };
   let ta: HTMLTextAreaElement | null = null;
   return (
-    <div className="export">
+    <Panel className="export">
       <div className="row">
-        <span className="hint">JSON доски: все задачи, связи, раскладка, дорожки и фильтры. Загружается обратно ссылкой «файл…». Если файл не скачался, скопируйте текст.</span>
-        <button className="btn" type="button" onClick={() => void copy(ta)}>{copied ? "Скопировано" : "Копировать"}</button>
-        <button className="btn" type="button" onClick={onClose}>Закрыть</button>
+        <span className="hint">JSON доски: все задачи, связи, раскладка, дорожки и фильтры. Загружается обратно пунктом «Загрузить файл…» в меню «Ещё». Если файл не скачался, скопируйте текст.</span>
+        <Button onClick={() => void copy(ta)}>{copied ? "Скопировано" : "Копировать"}</Button>
+        <Button onClick={onClose}>Закрыть</Button>
       </div>
       <textarea readOnly spellCheck={false} value={text} ref={(el) => { ta = el; }} />
-    </div>
+    </Panel>
   );
 }
diff --git a/web/src/board/components/FilterBar.tsx b/web/src/board/components/FilterBar.tsx
index 4594668..3015c86 100644
--- a/web/src/board/components/FilterBar.tsx
+++ b/web/src/board/components/FilterBar.tsx
@@ -1,27 +1,43 @@
+import type { ReactNode } from "react";
 import { sprintBox, sprintItems, whoBox, whoItems } from "../analysis/facets.ts";
 import type { BoardPrefsApi } from "../useBoardPrefs.ts";
 import type { BoardModel } from "../types.ts";
+import { Button, IconCalendar, IconCritical, IconHandoff, IconLink, IconNeighbors, Panel } from "../../ui/index.ts";
 import { MultiSelect } from "./MultiSelect.tsx";
 
-const TOGGLES = [
-  { name: "neighbors", label: "+ соседи по связям", title: "Добавить к отобранным задачам их соседей по связям из любого спринта, любого исполнителя и вида работы. Соседи рисуются пунктиром и считаются отдельно" },
-  { name: "onlyHand", label: "⇄ передачи", title: "Оставить только стрелки, где задачу ждёт другой человек. Карточки не убирает — для этого «скрыть без связей»" },
-  { name: "onlyLinked", label: "скрыть без связей", title: "Убрать с доски карточки, у которых не осталось ни одной видимой стрелки" },
-  { name: "crit", label: "⚑ критический путь", title: "Самая длинная цепочка блокировок по плановым датам окончания" },
-  { name: "byDate", label: "▥ по датам", title: "Разложить карточки по колонкам плановых дат окончания. У этого режима своя расстановка: карточку можно двигать внутри её колонки; обычная расстановка не меняется и вернётся, когда режим выключен" },
-] as const;
+type Toggle = "neighbors" | "onlyHand" | "onlyLinked" | "crit" | "byDate";
+interface Item { name: Toggle; label: string; icon: ReactNode; title: string }
+
+const SHOW: Item[] = [
+  { name: "neighbors", label: "Соседи по связям", icon: <IconNeighbors size={16} />, title: "Добавить к отобранным задачам их соседей по связям из любого спринта, любого исполнителя и вида работы. Соседи рисуются пунктиром и считаются отдельно" },
+  { name: "onlyHand", label: "Только передачи", icon: <IconHandoff size={16} />, title: "Оставить только стрелки, где задачу ждёт другой человек. Карточки не убирает — для этого «скрыть без связей»" },
+  { name: "onlyLinked", label: "Скрыть без связей", icon: <IconLink size={16} />, title: "Убрать с доски карточки, у которых не осталось ни одной видимой стрелки" },
+];
+const MODE: Item[] = [
+  { name: "crit", label: "Критический путь", icon: <IconCritical size={16} />, title: "Самая длинная цепочка блокировок по плановым датам окончания" },
+  { name: "byDate", label: "По датам", icon: <IconCalendar size={16} />, title: "Разложить карточки по колонкам плановых дат окончания. У этого режима своя расстановка: карточку можно двигать внутри её колонки; обычная расстановка не меняется и вернётся, когда режим выключен" },
+];
 
 export function FilterBar({ model, prefs }: { model: BoardModel; prefs: BoardPrefsApi }) {
   const f = prefs.filters, sb = sprintBox(model), wb = whoBox(model, f);
-  return (
-    <div className="bar">
-      <span>{sb.kind === "text" ? <span className="file-name">{sb.text}</span>
-        : sb.kind === "multi" && <MultiSelect items={sprintItems(model, f).items} selected={f.sprints} allLabel="Все спринты" onChange={prefs.setSprints} />}</span>
-      <span>{wb.kind === "text" ? <span className="file-name">{wb.text}</span>
-        : wb.kind === "multi" && <MultiSelect items={whoItems(model, f).items} selected={f.who} allLabel="Все исполнители" onChange={prefs.setWho} />}</span>
-      {TOGGLES.map((t) => (
-        <button key={t.name} className="btn" type="button" aria-pressed={f[t.name]} title={t.title} onClick={() => prefs.toggle(t.name)}>{t.label}</button>
+  const group = (label: string, items: Item[]) => (
+    <div className="board-controls__group" role="group" aria-label={label}>
+      <span className="board-controls__label">{label}</span>
+      {items.map((t) => (
+        <Button key={t.name} variant="secondary" icon={t.icon} aria-pressed={f[t.name]} title={t.title} onClick={() => prefs.toggle(t.name)}>{t.label}</Button>
       ))}
     </div>
   );
+  return (
+    <Panel className="board-controls">
+      {sb.kind === "text" ? <span className="board-controls__text">{sb.text}</span>
+        : sb.kind === "multi" && <MultiSelect items={sprintItems(model, f).items} selected={f.sprints} allLabel="Все спринты" onChange={prefs.setSprints} />}
+      {wb.kind === "text" ? <span className="board-controls__text">{wb.text}</span>
+        : wb.kind === "multi" && <MultiSelect items={whoItems(model, f).items} selected={f.who} allLabel="Все исполнители" onChange={prefs.setWho} />}
+      <span className="board-controls__sep" aria-hidden="true" />
+      {group("Показать", SHOW)}
+      <span className="board-controls__sep" aria-hidden="true" />
+      {group("Режим", MODE)}
+    </Panel>
+  );
 }
diff --git a/web/src/board/components/Legend.tsx b/web/src/board/components/Legend.tsx
index bb5547c..bba3c3a 100644
--- a/web/src/board/components/Legend.tsx
+++ b/web/src/board/components/Legend.tsx
@@ -1,25 +1,35 @@
 import type { ReactNode } from "react";
 import type { BoardPrefsApi } from "../useBoardPrefs.ts";
+import { Badge, Button, IconLegend } from "../../ui/index.ts";
 
 const KINDS = [["decision", "решение"], ["analytics", "аналитика / актуализация"], ["dev", "разработка"], ["ui", "UI"],
   ["test", "тестирование"], ["org", "организационная"]] as const;
 const EDGES = [["block", "блокирует начало → заблокирована", "ln"], ["rel", "связанные", "ln dash"]] as const;
 
-export function Legend({ prefs }: { prefs: BoardPrefsApi }) {
+export function Legend({ prefs, open, onToggle }: { prefs: BoardPrefsApi; open: boolean; onToggle(): void }) {
   const { hideKind, hideEdge } = prefs.filters;
+  const hidden = hideKind.size + hideEdge.size;
   const btn = (what: "kind" | "edge", value: string, off: boolean, body: ReactNode) => (
     <button key={what + value} type="button" className={"lg" + (off ? " off" : "")} aria-pressed={!off}
       title={off ? "Показать снова" : "Скрыть на доске"} onClick={() => prefs.toggleHidden(what, value)}>{body}</button>
   );
   return (
-    <div className="legend">
-      {KINDS.map(([k, label]) => btn("kind", k, hideKind.has(k), <><span className="sw" style={{ background: `var(--k-${k})` }} />{label}</>))}
-      <span className="sep" />
-      {EDGES.map(([k, label, ln]) => btn("edge", k, hideEdge.has(k), <><span className={ln} />{label}</>))}
-      <span><span className="ln hand" />передача другому исполнителю</span>
-      <span><span className="ln crit" />критический путь</span>
-      <span><span className="out-sw" />сосед по связям, сам под фильтры не попадает</span>
-      <span className="hint">щелчок по виду работы или типу связи скрывает их</span>
+    <div className="legend-box">
+      <div className="legend-head">
+        <Button variant="ghost" icon={<IconLegend size={16} />} aria-expanded={open} onClick={onToggle}>Легенда</Button>
+        {hidden > 0 && <Badge tone="neutral">скрыто: {hidden}</Badge>}
+      </div>
+      {open && (
+        <div className="legend">
+          {KINDS.map(([k, label]) => btn("kind", k, hideKind.has(k), <><span className="sw" style={{ background: `var(--k-${k})` }} />{label}</>))}
+          <span className="sep" />
+          {EDGES.map(([k, label, ln]) => btn("edge", k, hideEdge.has(k), <><span className={ln} />{label}</>))}
+          <span><span className="ln hand" />передача другому исполнителю</span>
+          <span><span className="ln crit" />критический путь</span>
+          <span><span className="out-sw" />сосед по связям, сам под фильтры не попадает</span>
+          <span className="hint">щелчок по виду работы или типу связи скрывает их</span>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/web/src/board/components/LinkTable.tsx b/web/src/board/components/LinkTable.tsx
index 7e53759..7f8abd2 100644
--- a/web/src/board/components/LinkTable.tsx
+++ b/web/src/board/components/LinkTable.tsx
@@ -1,13 +1,14 @@
+import { Panel } from "../../ui/index.ts";
 import type { VisLink } from "../types.ts";
 
 export function LinkTable({ links }: { links: VisLink[] }) {
   return (
-    <details open>
-      <summary>Таблица связей</summary>
+    <Panel as="section" className="link-table">
+      <h2 className="board-h2">Таблица связей</h2>
       <div className="tbl"><table>
         <thead><tr><th>Блокирует</th><th>Тип</th><th>Заблокирована</th></tr></thead>
         <tbody>{links.map((l) => <tr key={`${l.src}>${l.dst}${l.type}`}><td className="k">{l.src}</td><td>{l.type}</td><td className="k">{l.dst}</td></tr>)}</tbody>
       </table></div>
-    </details>
+    </Panel>
   );
 }
diff --git a/web/src/board/components/MultiSelect.tsx b/web/src/board/components/MultiSelect.tsx
index 90e17b7..9f829d4 100644
--- a/web/src/board/components/MultiSelect.tsx
+++ b/web/src/board/components/MultiSelect.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import type { FacetItem } from "../analysis/facets.ts";
-import { Dropdown } from "../../ui/index.ts";
+import { Button, Dropdown, IconChevronDown, SearchInput } from "../../ui/index.ts";
 
-// мультиселект с поиском: пустой выбор = без фильтра (строки 913–938)
+// мультиселект с поиском: пустой выбор = без фильтра (строки 913–938); кнопка — вид Select
 export function MultiSelect({ items, selected, allLabel, onChange }: {
   items: FacetItem[]; selected: Set<string>; allLabel: string; onChange(next: Set<string>): void;
 }) {
@@ -13,13 +13,13 @@ export function MultiSelect({ items, selected, allLabel, onChange }: {
   const flip = (v: string, on: boolean) => { const n = new Set(selected); if (on) n.add(v); else n.delete(v); onChange(n); };
   return (
     <Dropdown onOpen={() => setQ("")} button={({ open, toggle }) => (
-      <button type="button" className="btn dd-btn" aria-expanded={open} title={sel.map((i) => i.label).join(", ")} onClick={toggle}>
-        <span className="lbl">{label}</span><span className="car">▼</span>
+      <button type="button" className="ui-input multi-btn" aria-expanded={open} title={sel.map((i) => i.label).join(", ")} onClick={toggle}>
+        <span className="lbl">{label}</span><IconChevronDown size={16} />
       </button>
     )}>
       {() => (
         <>
-          <input type="search" placeholder="Поиск…" aria-label="Поиск" autoFocus value={q} onChange={(e) => setQ(e.target.value)} />
+          <SearchInput label="Поиск" placeholder="Поиск…" autoFocus value={q} onChange={setQ} />
           <div className="dd-list" role="group" aria-label={allLabel}>
             {!shown.length && <div className="dd-empty">ничего не найдено</div>}
             {shown.map((i) => (
@@ -30,8 +30,8 @@ export function MultiSelect({ items, selected, allLabel, onChange }: {
             ))}
           </div>
           <div className="dd-foot">
-            <button type="button" className="btn all" onClick={() => onChange(new Set(items.map((i) => i.value)))}>Выбрать все</button>
-            <button type="button" className="btn clear" onClick={() => onChange(new Set())}>Снять выбор</button>
+            <Button variant="ghost" onClick={() => onChange(new Set(items.map((i) => i.value)))}>Выбрать все</Button>
+            <Button variant="ghost" onClick={() => onChange(new Set())}>Снять выбор</Button>
           </div>
         </>
       )}
diff --git a/web/src/board/components/ProblemsDrawer.tsx b/web/src/board/components/ProblemsDrawer.tsx
index 7a7f5ba..264df9d 100644
--- a/web/src/board/components/ProblemsDrawer.tsx
+++ b/web/src/board/components/ProblemsDrawer.tsx
@@ -1,3 +1,4 @@
+import { Button, Panel } from "../../ui/index.ts";
 import { JIRA_URL } from "../constants.ts";
 import type { ProblemItem, Problems } from "../types.ts";
 
@@ -8,7 +9,7 @@ function Section({ title, list }: { title: string; list: ProblemItem[] }) {
   if (!list.length) return null;
   return (
     <>
-      <h4>{title} ({list.length})</h4>
+      <h3 className="board-h3">{title} ({list.length})</h3>
       <ul>{list.map((x, i) => <li key={i}><K k={x.a.key} /> → <K k={x.b.key} /> <span className="why">— {x.text}</span></li>)}</ul>
     </>
   );
@@ -17,7 +18,8 @@ function Section({ title, list }: { title: string; list: ProblemItem[] }) {
 export function ProblemsDrawer({ problems, onClose }: { problems: Problems; onClose(): void }) {
   return (
     <aside className="drawer">
-      <div className="drawer-head"><b>Проблемы на доске</b><button type="button" className="btn sm" onClick={onClose}>Закрыть</button></div>
+     <Panel>
+      <div className="drawer-head"><h2 className="board-h2">Проблемы на доске</h2><Button variant="ghost" onClick={onClose}>Закрыть</Button></div>
       <div>
         {!problemCount(problems) && <div className="ok">По датам, исполнителям и статусам блокеров на видимой части доски проблем нет.</div>}
         <Section title="Срок блокера не раньше срока зависимой задачи" list={problems.dates} />
@@ -25,6 +27,7 @@ export function ProblemsDrawer({ problems, onClose }: { problems: Problems; onCl
         <Section title="Блокер не начат, а срок зависимой задачи близко" list={problems.late} />
         <Section title="Передачи между исполнителями (точки ожидания)" list={problems.hand} />
       </div>
+     </Panel>
     </aside>
   );
 }
diff --git a/web/src/board/components/Toolbar.tsx b/web/src/board/components/Toolbar.tsx
deleted file mode 100644
index 8701d00..0000000
--- a/web/src/board/components/Toolbar.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useEffect, useState } from "react";
-import { statusText, type BoardStatus } from "../status.ts";
-import type { BoardModel, Visible } from "../types.ts";
-import { NOT_IN_HUB } from "../constants.ts";
-import { Dropdown } from "../../ui/index.ts";
-
-interface ToolbarProps {
-  label: string; title: string; status: BoardStatus | null; byDate: boolean; snap: boolean;
-  model: BoardModel; vis: Visible; problemCount: number; problemsOpen: boolean; tableOpen: boolean;
-  onReload(): void; onFile(name: string, text: string): void; onProblems(): void;
-  onExport(): void; onTable(): void; onSnap(): void; onReset(): void;
-}
-
-export function Toolbar(p: ToolbarProps) {
-  const [confirm, setConfirm] = useState(false);
-  useEffect(() => { if (!confirm) return; const t = setTimeout(() => setConfirm(false), 8000); return () => clearTimeout(t); }, [confirm]);
-  const st = p.status ? statusText(p.status) : null;   // только события доски; ход пакета «Обновить из Jira» — в верхней панели
-  const m = p.model, v = p.vis, r = v.removed;
-  const coreShown = v.nodes.filter((n) => !n.dim).length, ctxShown = v.nodes.length - coreShown;
-  return (
-    <div className="top">
-      <h1>Доска связей</h1>
-      <span className="src">
-        <span className="file-name" title={p.title}>{p.label}</span>
-        <button type="button" className="link" title="Загрузить снимок зеркала хаба заново, без обращения к Jira" onClick={p.onReload}>Перечитать</button>
-        <label className="link" title="CSV из фильтра Jira или JSON, выгруженный этой доской. JSON при работе с хабом переносит только расстановку карточек, дорожки и фильтры; CSV показывает снимок файла до «Перечитать»">
-          файл…
-          <input type="file" accept=".csv,.json,text/csv,application/json" hidden onChange={async (e) => {
-            const f = e.target.files?.[0];
-            e.target.value = "";
-            if (f) p.onFile(f.name, await f.text());
-          }} />
-        </label>
-      </span>
-      {st && <span className={"stats" + (st.warn ? " warn" : "")} role="status">{st.text}</span>}
-      <span className="stats">
-        <b>{coreShown}</b> задач из {m.nodes.filter((n) => !n.stub).length}
-        {ctxShown > 0 && <> · <b>+{ctxShown}</b> соседи по связям</>}
-        {" · "}<b>{v.links.length}</b> связей из {m.links.length}
-        {r.loose > 0 && <> · скрыто без связей: {r.loose}</>}
-      </span>
-      <span className="spacer" />
-      <button className="btn" type="button" aria-pressed={p.problemsOpen} onClick={p.onProblems}
-        title="Сроки блокеров, задачи без исполнителя, передачи между людьми">
-        Проблемы <span className={"n" + (p.problemCount ? "" : " zero")}>{p.problemCount}</span>
-      </button>
-      <Dropdown className="more" button={({ open, toggle }) => (
-        <button type="button" className="btn more-btn" aria-haspopup="menu" aria-expanded={open} title="Ещё" onClick={toggle}>⋯</button>
-      )}>
-        {(close) => (
-          <>
-            <button type="button" onClick={() => { close(); p.onExport(); }}>Экспорт JSON</button>
-            <button type="button" aria-pressed={p.tableOpen} onClick={p.onTable}>Таблица связей</button>
-            <button type="button" aria-pressed={p.snap} onClick={p.onSnap}>Привязка к сетке</button>
-            <hr />
-            {!confirm ? <button type="button" className="danger" onClick={() => setConfirm(true)}>Сбросить раскладку</button> : (
-              <div className="confirm">
-                <span>Вернуть автоматическую раскладку {p.byDate ? "режима «по датам»" : "(обычную; раскладка «по датам» останется)"}, порядок и раскрытие дорожек?</span>
-                <div className="row">
-                  <button type="button" className="btn yes" onClick={() => { p.onReset(); setConfirm(false); close(); }}>Да, сбросить</button>
-                  <button type="button" className="btn no" onClick={() => setConfirm(false)}>Нет</button>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </Dropdown>
-    </div>
-  );
-}
-
-// предупреждения о данных под шапкой (строки 878–880)
-export function Notice({ model }: { model: BoardModel }) {
-  const notes = [...model.problems];
-  if (model.missing) notes.push(`упомянуты в связях, но в ${model.stubLane === NOT_IN_HUB ? "зеркале хаба" : "файле"} отсутствуют: ${model.missing}`);
-  if (!notes.length) return null;
-  return <div className="notice">{notes.map((n) => <span key={n}>{n}</span>)}</div>;
-}
diff --git a/web/src/board/legendPref.ts b/web/src/board/legendPref.ts
new file mode 100644
index 0000000..ca90125
--- /dev/null
+++ b/web/src/board/legendPref.ts
@@ -0,0 +1,10 @@
+// свёрнутость легенды доски: "0" — свёрнута, иначе развёрнута; ошибки хранилища глотаем
+const KEY = "jira-hub-legend";
+
+export function readLegendOpen(): boolean {
+  try { return localStorage.getItem(KEY) !== "0"; } catch { return true; }
+}
+
+export function saveLegendOpen(open: boolean): void {
+  try { localStorage.setItem(KEY, open ? "1" : "0"); } catch { /* хранилище недоступно — состояние только в памяти */ }
+}
diff --git a/web/src/projects/projects.test.tsx b/web/src/projects/projects.test.tsx
index 76b20f3..546e7b6 100644
--- a/web/src/projects/projects.test.tsx
+++ b/web/src/projects/projects.test.tsx
@@ -150,6 +150,7 @@ describe("проект в приложении", () => {
     const h = hub([A, S], {
       "GET /projects": () => (++n === 1 ? json(200, { projects: [A, S] }) : json(500, { error: "boom" })),
       "POST /projects": () => json(201, { project: S, batch_id: 7 }),
+      "GET /batches/7": () => json(200, { id: 7, author: "viewer", status: "queued", remaining_seconds: 5, counts: {}, commands: [{ type: "refresh", status: "queued" }] }),
     });
     const router = open("/app/board?project=AWPCA");
     await screen.findByTestId("page-board");
diff --git a/web/src/styles/controls.css b/web/src/styles/controls.css
index 8b83067..a80ddc3 100644
--- a/web/src/styles/controls.css
+++ b/web/src/styles/controls.css
@@ -15,8 +15,6 @@
 .dd-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .dd-btn .car{font-size:10px;opacity:.7}
 .dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:280px;max-width:420px;padding:8px;display:flex;flex-direction:column;gap:6px}
-.dd-menu input[type=search]{font:inherit;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 8px;width:100%;box-sizing:border-box}
-.dd-menu input[type=search]:focus-visible{border-color:var(--accent);outline:none}
 .dd-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}
 .dd-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:5px;cursor:pointer;font-size:14px}
 .dd-item:hover{background:var(--soft)}
diff --git a/web/src/ui/Menu.tsx b/web/src/ui/Menu.tsx
index f3b3d19..c888a3b 100644
--- a/web/src/ui/Menu.tsx
+++ b/web/src/ui/Menu.tsx
@@ -3,8 +3,8 @@ import { IconButton } from "./Button.tsx";
 import { IconMore } from "./icons.tsx";
 
 // выпадающий список: кнопка открывает, щелчок вне или Escape закрывает (строки 897–904)
-export function Dropdown({ button, className = "", children, onOpen }: {
-  button: (p: { open: boolean; toggle(): void }) => ReactNode; className?: string;
+export function Dropdown({ button, className = "", menu = false, children, onOpen }: {
+  button: (p: { open: boolean; toggle(): void }) => ReactNode; className?: string; menu?: boolean;   // menu — меню пунктов («Ещё»), не панель
   children: (close: () => void) => ReactNode; onOpen?: () => void;
 }) {
   const [open, setOpen] = useState(false);
@@ -19,7 +19,7 @@ export function Dropdown({ button, className = "", children, onOpen }: {
   return (
     <div className={"dd " + className} ref={ref} onKeyDown={(e) => { if (e.key === "Escape") setOpen(false); }}>
       {button({ open, toggle })}
-      {open && <div className={"dd-menu" + (className.includes("more") ? " menu" : "")}>{children(() => setOpen(false))}</div>}
+      {open && <div className={"dd-menu" + (menu ? " menu" : "")}>{children(() => setOpen(false))}</div>}
     </div>
   );
 }
@@ -29,19 +29,19 @@ export function Menu({ label, children, align = "end" }: {
   label: string; children: (close: () => void) => ReactNode; align?: "start" | "end";
 }) {
   return (
-    <Dropdown className={"more" + (align === "start" ? " dd--start" : "")}
+    <Dropdown menu className={"more" + (align === "start" ? " dd--start" : "")}
       button={({ open, toggle }) => <IconButton label={label} icon={<IconMore />} aria-haspopup="menu" aria-expanded={open} onClick={toggle} />}>
       {children}
     </Dropdown>
   );
 }
 
-export function MenuItem({ onSelect, pressed, danger, icon, children }: {
-  onSelect(): void; pressed?: boolean; danger?: boolean; icon?: ReactNode; children: ReactNode;
+export function MenuItem({ onSelect, pressed, danger, icon, title, children }: {
+  onSelect(): void; title?: string; pressed?: boolean; danger?: boolean; icon?: ReactNode; children: ReactNode;
 }) {
   return (
-    <button type="button" className={danger ? "danger" : undefined} aria-pressed={pressed === undefined ? undefined : pressed} onClick={onSelect}>
-      {icon}{children}
+    <button type="button" className={danger ? "danger" : undefined} aria-pressed={pressed === undefined ? undefined : pressed} title={title} onClick={onSelect}>
+      <span className="menu__label">{icon}{children}</span>
     </button>
   );
 }
diff --git a/web/src/ui/inputs.tsx b/web/src/ui/inputs.tsx
index 033414a..af3f495 100644
--- a/web/src/ui/inputs.tsx
+++ b/web/src/ui/inputs.tsx
@@ -13,11 +13,11 @@ export function Textarea({ size = "md", className, ...rest }: Size & Omit<Textar
   return <textarea {...rest} className={cx("ui-input", "ui-textarea", `ui-input--${size}`, className)} />;
 }
 
-export function SearchInput({ value, onChange, label, placeholder }: { value: string; onChange(v: string): void; label: string; placeholder?: string }) {
+export function SearchInput({ value, onChange, label, placeholder, autoFocus }: { value: string; onChange(v: string): void; label: string; placeholder?: string; autoFocus?: boolean }) {
   return (
     <span className="ui-search">
       <span className="ui-search__icon" aria-hidden="true"><IconSearch /></span>
-      <input type="search" className="ui-input ui-input--md ui-search__input" aria-label={label} placeholder={placeholder}
+      <input type="search" className="ui-input ui-input--md ui-search__input" aria-label={label} placeholder={placeholder} autoFocus={autoFocus}
         value={value} onChange={(e) => onChange(e.target.value)} />
       {value !== "" && <IconButton className="ui-search__clear" label="Очистить" icon={<IconClose />} onClick={() => onChange("")} />}
     </span>
-- 
2.47.2


From 3a711ff2ea270a64cec58500e476121a22788a38 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:42:53 +0400
Subject: [PATCH 12/23] =?UTF-8?q?style(web):=20=D0=BF=D0=BE=D0=BB=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BD=D0=BE=20=D0=B4=D0=BE=D1=81=D0=BA=D0=B8=20=E2=80=94?=
 =?UTF-8?q?=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B8,=20=D0=B4?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BE=D0=B6=D0=BA=D0=B8,=20=D0=B4=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B2=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5=20=D1=81=D0=B8?=
 =?UTF-8?q?=D1=81=D1=82=D0=B5=D0=BC=D1=8B=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/board/board.css                     | 165 ++++++++++----------
 web/src/board/components/Card.tsx           |   3 +-
 web/src/board/components/Lane.tsx           |   7 +-
 web/src/board/components/ProblemsDrawer.tsx |   2 +-
 4 files changed, 93 insertions(+), 84 deletions(-)

diff --git a/web/src/board/board.css b/web/src/board/board.css
index 65ff0f6..b1c6658 100644
--- a/web/src/board/board.css
+++ b/web/src/board/board.css
@@ -1,5 +1,5 @@
 /* 3. Закреплённая шапка: заголовок и действия (PageHeader), панель управления (Panel), предупреждения, легенда */
-.sticky{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);padding-block:var(--space-4) var(--space-2);margin:0 0 var(--space-2);box-shadow:0 1px 0 var(--line)}
+.sticky{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--color-bg-canvas);padding-block:var(--space-4) var(--space-2);margin:0 0 var(--space-2);box-shadow:0 1px 0 var(--color-border-default)}
 .sticky .ui-page-header{margin-bottom:var(--space-3);gap:var(--space-2)}
 .stats{font-variant-numeric:tabular-nums}
 .stats b{color:var(--color-text-primary);font-weight:600}
@@ -27,140 +27,147 @@
 .legend-head{display:flex;align-items:center;gap:var(--space-2)}
 .legend{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:var(--space-1) 0 0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
 .legend span{display:inline-flex;align-items:center;gap:6px}
-.legend .sep{width:1px;height:14px;background:var(--line)}
+.legend .sep{width:1px;height:14px;background:var(--color-border-default)}
 .legend .hint{margin-left:auto}
-.lg{font:inherit;font-size:13px;color:var(--muted);background:none;border:0;padding:2px 5px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
-.lg:hover,.lg:focus-visible{background:var(--soft);color:var(--fg);outline:none}
+.lg{font:inherit;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary);background:none;border:1px solid transparent;padding:2px 6px;border-radius:var(--radius-xs);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
+.lg:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
+.lg:focus-visible{background:var(--color-bg-hover);color:var(--color-text-primary);border-color:var(--color-border-selected);outline:none}
 .lg.off{opacity:.45;text-decoration:line-through}
 .sw{width:10px;height:10px;border-radius:2px;display:inline-block}
 .ln{width:26px;height:0;border-top:2px solid var(--edge-strong);display:inline-block}
 .ln.dash{border-top-style:dashed;border-top-color:var(--edge)}
 .ln.hand{border-top-color:var(--guide)}
 .ln.crit{border-top-width:4px;border-top-color:var(--guide)}
-.out-sw{width:16px;height:11px;border:1.5px dashed var(--muted);border-radius:3px;display:inline-block}
+.out-sw{width:16px;height:11px;border:1.5px dashed var(--color-text-secondary);border-radius:3px;display:inline-block}
 
 /* 6. Доска: прокрутка только по горизонтали (вертикальная — у страницы), дорожки по эпикам, карточки абсолютные */
-.stage{display:flex;gap:10px;align-items:stretch}
-.wrap{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:8px;background:var(--card);user-select:none;-webkit-user-select:none}
-.board{position:relative;min-width:max(100%,max-content)}
+.stage{display:flex;gap:var(--space-3);align-items:stretch}
+.wrap{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;border:1px solid var(--color-border-default);border-radius:var(--radius-xl);background:var(--color-bg-surface);user-select:none;-webkit-user-select:none}
+.board{position:relative;min-width:100%}
 svg.edges,svg.guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
 svg.guides{z-index:3}
 svg.guides line{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
-.empty{padding:40px 16px;color:var(--muted);text-align:center}
+.empty{padding:40px 16px;color:var(--color-text-secondary);text-align:center}
 #hubState{white-space:normal;min-width:0}
-.login{max-width:560px;margin:48px auto;padding:20px 24px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
-.login h2{margin:0 0 8px;font-size:17px;font-weight:600}
-.login p{margin:0 0 12px;font-size:14px;color:var(--muted)}
-.login p.err{color:var(--p-crit)}
-.login code{font-family:var(--font-mono);font-size:13px;color:var(--fg)}
+.login{max-width:560px;margin:48px auto;padding:20px 24px;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-xl)}
+.login h2{margin:0 0 8px;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:700}
+.login p{margin:0 0 12px;font-size:var(--fs-body);color:var(--color-text-secondary)}
+.login p.err{color:var(--color-status-error)}
+.login code{font-family:var(--font-mono);font-size:13px;color:var(--color-text-primary)}
 .login form{display:flex;gap:8px;margin:0 0 12px}
-.login input{flex:1;min-width:0;font:inherit;font-size:14px;height:34px;box-sizing:border-box;padding:0 10px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px}
-.login input:focus-visible{border-color:var(--accent);outline:none}
-.lane{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
-.lane:nth-child(even of .lane){background:color-mix(in srgb,var(--soft) 45%,transparent)}
-.lane.folded{background:color-mix(in srgb,var(--soft) 80%,transparent)}
-.lane.target{box-shadow:inset 0 3px 0 var(--accent)}
-.lane.target-after{box-shadow:inset 0 -3px 0 var(--accent)}
+.login input{flex:1;min-width:0;font:inherit;font-size:var(--fs-body);height:var(--control-h);box-sizing:border-box;padding:0 10px;color:var(--color-text-primary);background:var(--color-bg-canvas);border:1px solid var(--color-border-default);border-radius:var(--radius-sm)}
+.login input:focus-visible{border-color:var(--color-border-selected);outline:none}
+.lane{position:absolute;left:0;right:0;border-top:1px solid var(--color-border-default)}
+.lane:nth-child(even of .lane){background:var(--lane-alt)}
+.lane.folded{background:var(--color-bg-hover)}
+.lane.target{box-shadow:inset 0 3px 0 var(--color-action-primary)}
+.lane.target-after{box-shadow:inset 0 -3px 0 var(--color-action-primary)}
 .lane.dragging{opacity:.6}
 .lane-head{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:4px;z-index:1}
-.fold{width:18px;height:18px;border:0;background:none;color:var(--muted);cursor:pointer;padding:0;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:0}
-.fold::before{content:"";border:5px solid transparent;border-top:6px solid currentColor;border-bottom:0;transition:transform .15s}
-.fold:hover{background:var(--soft);color:var(--fg)}
-.lane.folded .fold::before{transform:rotate(-90deg)}
-.lane-name{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;cursor:grab;padding:2px 4px;border-radius:4px;user-select:none;touch-action:none}
-.lane-name:hover{background:var(--soft);color:var(--fg)}
-.lane-count{display:none;font-size:12.5px;color:var(--muted);margin-left:4px}
+.fold{width:20px;height:20px;border:0;background:none;color:var(--color-text-secondary);cursor:pointer;padding:0;border-radius:var(--radius-xs);display:inline-flex;align-items:center;justify-content:center}
+.fold svg{transition:transform .15s}
+.fold:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
+.fold:focus-visible,.lane-tools button:focus-visible,.card .open-card:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:1px}
+.lane.folded .fold svg{transform:rotate(-90deg)}
+.lane-name{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary);font-weight:600;cursor:grab;padding:2px 4px;border-radius:var(--radius-xs);user-select:none;touch-action:none}
+.lane-name:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
+.lane-count{display:none;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary);margin-left:4px}
 .lane.folded .lane-count{display:inline}
 .lane-tools{display:none;gap:2px}
 .lane:hover .lane-tools{display:inline-flex}
-.lane-tools button{font:inherit;font-size:12px;line-height:1;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:4px;width:22px;height:22px;cursor:pointer;padding:0}
-.lane-tools button:hover{border-color:var(--accent);color:var(--accent)}
+.lane-tools button{display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-secondary);background:var(--color-bg-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-xs);width:22px;height:22px;cursor:pointer;padding:0}
+.lane-tools button:hover{border-color:var(--color-action-primary);color:var(--color-action-primary)}
 .lane-tools button:disabled{opacity:.35;cursor:default}
+.lane-tools .up svg{transform:rotate(180deg)}
 /* режим «по датам»: колонки по плановым датам окончания, шапка колонки над дорожками; карточки двигаются внутри своей колонки */
-.dcol{position:absolute;top:0;border-left:1px solid var(--line);box-sizing:border-box;pointer-events:none}
+.dcol{position:absolute;top:0;border-left:1px solid var(--color-border-default);box-sizing:border-box;pointer-events:none}
 .dcol:first-of-type{border-left:0}
 .dcol.past{background:color-mix(in srgb,var(--p-crit) 5%,transparent)}
-.dcol.today{background:color-mix(in srgb,var(--accent) 7%,transparent)}
+.dcol.today{background:color-mix(in srgb,var(--color-action-primary) 7%,transparent)}
 /* полоса дат над доской: липнет под шапкой страницы, по горизонтали двигается вместе с доской (transform по scrollLeft) */
-.dates-bar{position:sticky;top:calc(var(--head-h,0px) + env(safe-area-inset-top,0px));z-index:9;background:var(--bg)}
-.dates-in{overflow:hidden;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--card);height:36px;box-sizing:border-box}
+.dates-bar{position:sticky;top:calc(var(--head-h,0px) + env(safe-area-inset-top,0px));z-index:9;background:var(--color-bg-canvas)}
+.dates-in{overflow:hidden;border:1px solid var(--color-border-default);border-bottom:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--color-bg-surface);height:36px;box-sizing:border-box}
 .dates-track{position:relative;height:100%}
-.dlabel{position:absolute;top:9px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);font-weight:600;white-space:nowrap}
-.dlabel .n{font-weight:400;color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
+.dlabel{position:absolute;top:10px;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-primary);font-weight:600;white-space:nowrap}
+.dlabel .n{font-weight:400;color:var(--color-text-secondary);margin-left:6px;font-variant-numeric:tabular-nums}
 .dlabel.past{color:var(--p-crit)}
-.dlabel.today{color:var(--accent)}
-.dlabel.none{color:var(--muted);font-weight:500}
+.dlabel.today{color:var(--color-action-primary)}
+.dlabel.none{color:var(--color-text-secondary);font-weight:400}
 .stage.bydate .wrap{border-top-left-radius:0;border-top-right-radius:0}
 .dsplit{position:absolute;top:0;bottom:0;width:11px;margin-left:-5px;cursor:col-resize;z-index:1}
-.dsplit::after{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
-.dsplit:hover::after,.dsplit.on::after{background:var(--accent);width:3px;left:4px;border-radius:2px}
+.dsplit::after{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--color-border-default)}
+.dsplit:hover::after,.dsplit.on::after{background:var(--color-action-primary);width:3px;left:4px;border-radius:2px}
 .dates-in.resizing{cursor:col-resize}
 /* горизонтальная прокрутка доски, прилипшая к низу окна: полоса всегда видна, скроллбар нарисован явно (на macOS системный прячется) */
-.hscroll{position:sticky;bottom:0;z-index:8;overflow-x:scroll;overflow-y:hidden;height:14px;background:var(--bg);padding-top:2px;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--edge) var(--soft)}
+.hscroll{position:sticky;bottom:0;z-index:8;overflow-x:scroll;overflow-y:hidden;height:14px;background:var(--color-bg-canvas);padding-top:2px;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--color-border-strong) var(--color-bg-track)}
 .hscroll>div{height:1px}
 .hscroll::-webkit-scrollbar{height:12px}
-.hscroll::-webkit-scrollbar-track{background:var(--soft);border-radius:6px}
-.hscroll::-webkit-scrollbar-thumb{background:var(--edge);border-radius:6px;border:2px solid var(--soft)}
-.hscroll::-webkit-scrollbar-thumb:hover{background:var(--accent)}
+.hscroll::-webkit-scrollbar-track{background:var(--color-bg-track);border-radius:6px}
+.hscroll::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:6px;border:2px solid var(--color-bg-track)}
+.hscroll::-webkit-scrollbar-thumb:hover{background:var(--color-action-primary)}
 /* карточка: текст выделяется, тянуть можно только за рамку (появляется при наведении) и за уголок */
-.card{position:absolute;width:240px;height:120px;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;overflow:hidden;cursor:default;touch-action:none}
-.card:hover{border-color:var(--accent)}
+.card{position:absolute;width:240px;height:120px;box-sizing:border-box;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:12px;display:flex;flex-direction:column;gap:4px;overflow:hidden;cursor:default;touch-action:none}
+.card:hover{border-color:var(--color-border-strong)}
 .card.out{border-style:dashed;opacity:.7}
 .card.closed{opacity:.4}
 .card.closed:hover,.card.closed:focus-within{opacity:1}
 .edges path.closed{opacity:.4}
 .card.crit{box-shadow:0 0 0 2px var(--guide)}
-.card.focus{box-shadow:0 0 0 2px var(--accent)}
-.card.drag{cursor:grabbing;border-color:var(--accent);box-shadow:var(--shadow-popover);z-index:2}
+.card.focus{box-shadow:0 0 0 2px var(--color-action-primary)}
+.card.drag{cursor:grabbing;border-color:var(--color-action-primary);box-shadow:var(--shadow-popover);z-index:2}
 .card .title,.card .state,.card .who,.card .meta,.card .key,.card .sprint-tag{user-select:text;-webkit-user-select:text;cursor:text;touch-action:auto}
 .card .key{cursor:pointer}
 .card .meta{cursor:default}
-.card .grip{position:absolute;background:var(--accent);opacity:0;cursor:grab;z-index:1;transition:opacity .12s}
-.card .grip.t{left:0;right:0;top:0;height:8px;border-radius:5px 5px 0 0}
-.card .grip.b{left:0;right:14px;bottom:0;height:8px;border-radius:0 0 0 5px}
-.card .grip.l{left:0;top:0;bottom:0;width:8px;border-radius:5px 0 0 5px}
-.card .grip.r{right:0;top:0;bottom:14px;width:8px;border-radius:0 5px 0 0}
-.card:hover .grip,.card.drag .grip{opacity:.85}
+.card .grip{position:absolute;background:var(--color-action-primary);opacity:0;cursor:grab;z-index:1;transition:opacity .12s}
+.card .grip.t{left:0;right:0;top:0;height:8px;border-radius:11px 11px 0 0}
+.card .grip.b{left:0;right:14px;bottom:0;height:8px;border-radius:0 0 0 11px}
+.card .grip.l{left:0;top:0;bottom:0;width:8px;border-radius:11px 0 0 11px}
+.card .grip.r{right:0;top:0;bottom:14px;width:8px;border-radius:0 11px 0 0}
+.card:hover .grip,.card.drag .grip{opacity:.6}
 .card.drag .grip{cursor:grabbing}
-.card .rsz{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--line) 50%);border-bottom-right-radius:5px;z-index:2}
-.card:hover .rsz{background:linear-gradient(135deg,transparent 50%,var(--accent) 50%)}
+.card .rsz{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--color-border-strong) 50%);border-bottom-right-radius:11px;z-index:2}
+.card:hover .rsz{background:linear-gradient(135deg,transparent 50%,var(--color-action-primary) 50%)}
 .head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
-.key{font-family:var(--font-mono);font-size:13.5px;font-weight:500;color:var(--accent);text-decoration:none;flex:0 0 auto}
-.sprint-tag{font-size:11px;line-height:1;padding:4px 7px;border-radius:10px;background:var(--soft);color:var(--muted);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
-.sprint-tag.sel{background:var(--accent);color:var(--accent-fg)}
-.sprint-tag.none{background:transparent;border:1px dashed var(--line)}
-.title{font-size:14.5px;line-height:19px;min-width:0;flex:1 1 auto;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
-.meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
+.key{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--color-action-primary);text-decoration:none;flex:0 0 auto}
+.sprint-tag{font-size:11px;line-height:1;padding:4px 7px;border-radius:var(--radius-round);background:var(--color-bg-track);color:var(--color-text-secondary);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
+.sprint-tag.sel{background:var(--color-action-primary);color:var(--color-text-on-primary)}
+.sprint-tag.none{background:transparent;border:1px dashed var(--color-border-strong)}
+.title{font-size:14.5px;line-height:19px;font-weight:600;color:var(--color-text-primary);min-width:0;flex:1 1 auto;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
+.meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--color-text-secondary);white-space:nowrap;flex:0 0 auto}
 .kind{display:inline-flex;align-items:center;gap:4px}
 .kind i{width:8px;height:8px;border-radius:2px;display:inline-block}
 .prio{font-weight:600}
 /* состояние задачи (статус, срок, исполнитель) — отдельный блок под чертой, основным цветом: это главное после названия */
-.state,.who{font-size:13px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
-.state{display:flex;align-items:center;gap:6px;margin-top:4px;padding-top:7px;border-top:1px solid var(--line)}
-.status{font-size:12.5px;line-height:1;padding:4px 7px;border-radius:10px;background:var(--soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.state,.who{font-size:13px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-primary)}
+.state{display:flex;align-items:center;gap:6px;margin-top:4px;padding-top:7px;border-top:1px solid var(--color-border-default)}
+/* статус — вид Badge (neutral) */
+.status{font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:600;padding:1px 8px;border:1px solid var(--color-border-default);border-radius:var(--radius-round);background:var(--color-bg-track);color:var(--color-text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .due{font-variant-numeric:tabular-nums;font-weight:600;flex:0 0 auto}
-.who::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:1px}
-.who.none{color:var(--muted);font-style:italic}
-.who.none::before{background:transparent;border:1px solid var(--muted)}
+.who::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--color-action-primary);margin-right:5px;vertical-align:1px}
+.who.none{color:var(--color-text-secondary);font-style:italic}
+.who.none::before{background:transparent;border:1px solid var(--color-text-secondary)}
 
-/* 7. Панель проблем справа от доски, липнет под шапкой и прокручивается внутри себя */
-.drawer{flex:0 0 340px;max-width:40%;overflow:auto;box-sizing:border-box;align-self:flex-start;position:sticky;top:calc(var(--head-h,0px) + 8px);max-height:calc(100vh - var(--head-h,0px) - 24px);font-size:var(--fs-body)}
-.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
-.board-h2{margin:0;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;color:var(--color-text-primary)}
+/* 7. Панель проблем справа от доски, липнет под шапкой; прокручивается содержимое внутри рамки Panel */
+.drawer{flex:0 0 340px;max-width:40%;box-sizing:border-box;align-self:flex-start;position:sticky;top:calc(var(--head-h,0px) + 8px);max-height:calc(100vh - var(--head-h,0px) - 24px);display:flex;font-size:var(--fs-body)}
+.drawer>.ui-panel{display:flex;flex-direction:column;gap:var(--space-3);min-height:0;min-width:0;flex:1 1 auto;padding:var(--space-4) 0 var(--space-4) var(--space-4)}
+.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding-right:var(--space-4)}
+.drawer-body{overflow-y:auto;min-height:0;padding-right:var(--space-4)}
+.board-h2{margin:0;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:700;color:var(--color-text-primary)}
 .board-h3{margin:var(--space-3) 0 var(--space-1);font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:600;color:var(--color-text-secondary)}
+.board-h3:first-child{margin-top:0}
 .drawer ul{margin:0;padding-left:18px}
 .drawer li{margin:3px 0}
-.drawer .k{font-family:var(--font-mono);font-size:13px;color:var(--color-action-primary);text-decoration:none}
-.drawer .ok{color:var(--color-status-success);margin:var(--space-2) 0 0}
-.drawer .why{color:var(--muted)}
+.drawer .k{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--color-action-primary);text-decoration:none}
+.drawer .ok{color:var(--color-status-success);margin:0}
+.drawer .why{color:var(--color-text-secondary)}
 
 /* 8. Экспорт JSON и таблица связей (включаются из меню «Ещё») */
 .export{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-2)}
-.export textarea{font-family:var(--font-mono);font-size:11.5px;width:100%;box-sizing:border-box;height:180px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--fg);padding:8px;resize:vertical}
+.export textarea{font-family:var(--font-mono);font-size:11.5px;width:100%;box-sizing:border-box;height:180px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-bg-surface);color:var(--color-text-primary);padding:8px;resize:vertical}
 .link-table{margin-top:var(--space-3)}
 .tbl{max-width:100%;overflow-x:auto;margin-top:var(--space-2)}
 table{border-collapse:collapse;font-size:var(--fs-body);min-width:520px}
-th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:top}
+th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--color-border-default);vertical-align:top}
 th{font-size:var(--fs-caption);font-weight:600;color:var(--color-text-secondary)}
 td.k{font-family:var(--font-mono);font-size:12px;white-space:nowrap;color:var(--color-action-primary)}
 
@@ -171,8 +178,8 @@ td.k{font-family:var(--font-mono);font-size:12px;white-space:nowrap;color:var(--
 @media (max-width:640px){.sticky{position:static}.dates-bar{position:static}}
 
 /* «Открыть карточку» в заголовке карточки (R-1) */
-.card .open-card{margin-left:6px;color:var(--muted);text-decoration:none;font-size:13px}
-.card .open-card:hover,.card .open-card:focus-visible{color:var(--accent);outline:none}
+.card .open-card{margin-left:6px;color:var(--color-text-secondary);text-decoration:none;display:inline-flex;align-items:center;border-radius:var(--radius-xs)}
+.card .open-card:hover{color:var(--color-action-primary)}
 /* слой измерения: карточки шириной CW с высотой по содержимому, невидим */
 .measure{position:absolute;left:-100000px;top:0;visibility:hidden;pointer-events:none}
 .measure .card{position:static;height:auto}
diff --git a/web/src/board/components/Card.tsx b/web/src/board/components/Card.tsx
index 5c22ddd..c94ce92 100644
--- a/web/src/board/components/Card.tsx
+++ b/web/src/board/components/Card.tsx
@@ -1,5 +1,6 @@
 import { memo, type PointerEvent } from "react";
 import { Link } from "react-router";
+import { IconOpen } from "../../ui/icons.tsx";
 import { BOARD_CARD_STATE } from "../../issues/modal.ts";
 import { CW, JIRA_URL, KIND, PRIO } from "../constants.ts";
 import { lineClamp, type Rect, type RelBox } from "../layout/layout.ts";
@@ -34,7 +35,7 @@ export const Card = memo(function Card({ node: n, box, rel, multiSprint, sprintS
       <div className="head">
         <a className="key" href={`${JIRA_URL}/browse/${n.key}`} target="_blank" rel="noopener">{n.key}</a>
         {!n.stub && <Link className="open-card" to={`/issues/${n.key}`} state={BOARD_CARD_STATE} title="Открыть карточку задачи"
-          aria-label={`Открыть карточку ${n.key}`}>ⓘ</Link>}
+          aria-label={`Открыть карточку ${n.key}`}><IconOpen size={16} /></Link>}
         {showTag && (n.sprint
           ? <span className={"sprint-tag" + (sprintSel.has(n.sprint) ? " sel" : "")} title={n.sprint}>{n.sprint.replace(/^AWPCA_/, "")}</span>
           : <span className="sprint-tag none">без спринта</span>)}
diff --git a/web/src/board/components/Lane.tsx b/web/src/board/components/Lane.tsx
index a4eadcb..40d5895 100644
--- a/web/src/board/components/Lane.tsx
+++ b/web/src/board/components/Lane.tsx
@@ -1,4 +1,5 @@
 import { useRef, useState, type PointerEvent } from "react";
+import { IconChevronDown } from "../../ui/icons.tsx";
 import type { LaneGeom } from "../layout/layout.ts";
 import { plural } from "../model/util.ts";
 
@@ -39,12 +40,12 @@ export function Lane({ g, index, last, count, lanes, boardTop, targetClass, onTo
   return (
     <div className={cls} style={{ top: g.y, height: g.h }}>
       <div className="lane-head">
-        <button type="button" className="fold" title="Свернуть или развернуть дорожку" onClick={() => onToggle(g.name)} />
+        <button type="button" className="fold" title="Свернуть или развернуть дорожку" onClick={() => onToggle(g.name)}><IconChevronDown size={16} /></button>
         <span ref={nameRef} className="lane-name" title="Перетащить, чтобы поменять дорожки местами" onPointerDown={down}>{g.name}</span>
         <span className="lane-count">{plural(count, "задача", "задачи", "задач")}</span>
         <span className="lane-tools">
-          <button type="button" title="Выше" disabled={index === 0} onClick={() => onMove(g.name, index - 1)}>▲</button>
-          <button type="button" title="Ниже" disabled={index === last} onClick={() => onMove(g.name, index + 1)}>▼</button>
+          <button type="button" className="up" title="Выше" disabled={index === 0} onClick={() => onMove(g.name, index - 1)}><IconChevronDown size={16} /></button>
+          <button type="button" title="Ниже" disabled={index === last} onClick={() => onMove(g.name, index + 1)}><IconChevronDown size={16} /></button>
         </span>
       </div>
     </div>
diff --git a/web/src/board/components/ProblemsDrawer.tsx b/web/src/board/components/ProblemsDrawer.tsx
index 264df9d..fc59236 100644
--- a/web/src/board/components/ProblemsDrawer.tsx
+++ b/web/src/board/components/ProblemsDrawer.tsx
@@ -20,7 +20,7 @@ export function ProblemsDrawer({ problems, onClose }: { problems: Problems; onCl
     <aside className="drawer">
      <Panel>
       <div className="drawer-head"><h2 className="board-h2">Проблемы на доске</h2><Button variant="ghost" onClick={onClose}>Закрыть</Button></div>
-      <div>
+      <div className="drawer-body">
         {!problemCount(problems) && <div className="ok">По датам, исполнителям и статусам блокеров на видимой части доски проблем нет.</div>}
         <Section title="Срок блокера не раньше срока зависимой задачи" list={problems.dates} />
         <Section title="Блокер без исполнителя" list={problems.unassigned} />
-- 
2.47.2


From 7c76c178a42f07a79f18d12ddea61184a2e49590 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:51:58 +0400
Subject: [PATCH 13/23] =?UTF-8?q?feat(web):=20=D1=81=D0=BF=D0=B8=D1=81?=
 =?UTF-8?q?=D0=BE=D0=BA=20=D0=B7=D0=B0=D0=B4=D0=B0=D1=87=20=E2=80=94=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B8=D1=81=D0=BA=20=D0=BD=D0=B0=20=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=B4=D1=83,=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D1=8B=20?=
 =?UTF-8?q?=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=D1=8E=20=D1=81=20=D0=BF?=
 =?UTF-8?q?=D0=BB=D0=B0=D1=88=D0=BA=D0=B0=D0=BC=D0=B8,=20=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=BE=D0=BA=D0=B0=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=B5=D1=82=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA?=
 =?UTF-8?q?=D1=83=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/e2e/issues.spec.ts             |  42 ++++++---
 web/src/issues/IssueFilters.tsx    |  61 +++++++++++++
 web/src/issues/IssueLink.tsx       |  13 ++-
 web/src/issues/IssueModal.test.tsx |   1 +
 web/src/issues/IssueTable.tsx      |  44 ++++++++++
 web/src/issues/IssuesPage.test.tsx | 135 ++++++++++++++++++++++++++---
 web/src/issues/IssuesPage.tsx      |  63 +++++---------
 web/src/issues/issues.css          |  39 +++++++--
 web/src/shell/AppBar.test.tsx      |   2 +-
 9 files changed, 327 insertions(+), 73 deletions(-)
 create mode 100644 web/src/issues/IssueFilters.tsx
 create mode 100644 web/src/issues/IssueTable.tsx

diff --git a/web/e2e/issues.spec.ts b/web/e2e/issues.spec.ts
index 4b1479b..60bd895 100644
--- a/web/e2e/issues.spec.ts
+++ b/web/e2e/issues.spec.ts
@@ -3,8 +3,10 @@ import { login } from "./hub.ts";
 
 test("фильтр → карточка окном → заметка сохраняется и переживает перезагрузку", async ({ page }) => {
   await login(page, "/app/issues");
-  await page.getByLabel("Исполнитель").selectOption("Петров Пётр Петрович");
+  await page.getByRole("button", { name: /Фильтры/ }).click();
+  await page.getByRole("combobox", { name: "Исполнитель" }).selectOption("Петров Пётр Петрович");
   await expect(page).toHaveURL(/assignee=/);
+  await expect(page.getByText("Исполнитель: Петров Пётр Петрович")).toBeVisible();   // плашка
   await page.getByRole("link", { name: "AURORA-9002", exact: true }).click();
   const d = page.getByRole("dialog");
   await expect(d.getByRole("heading", { name: "API свода" })).toBeVisible();
@@ -17,16 +19,37 @@ test("фильтр → карточка окном → заметка сохра
   await page.keyboard.press("Escape");
   await expect(page.getByRole("dialog")).toHaveCount(0);
   await expect(page).toHaveURL(/\/app\/issues\?project=AWPCA&assignee=/);
-  await expect(page.getByLabel("Исполнитель")).toHaveValue("Петров Пётр Петрович");
+  await expect(page.getByRole("combobox", { name: "Исполнитель" })).toHaveValue("Петров Пётр Петрович");   // панель осталась раскрытой (sessionStorage)
+});
+
+test("фильтр в адресе в новой вкладке: панель свёрнута, плашка и счётчик видны, плашка снимает фильтр", async ({ page }) => {
+  await login(page, "/app/issues?project=AWPCA&assignee=" + encodeURIComponent("Петров Пётр Петрович"));
+  await page.evaluate(() => sessionStorage.clear());
+  await page.reload();
+  const btn = page.getByRole("button", { name: /Фильтры/ });
+  await expect(btn).toHaveAttribute("aria-expanded", "false");
+  await expect(btn).toContainText("1");
+  await expect(page.getByRole("combobox", { name: "Исполнитель" })).toHaveCount(0);
+  await expect(page.locator("table.issue-table tbody tr")).toHaveCount(2);
+  await page.getByRole("button", { name: "Снять фильтр Исполнитель" }).click();
+  await expect(page).not.toHaveURL(/assignee=/);
+  await expect(page.locator("table.issue-table tbody tr")).toHaveCount(9);
+});
+
+test("щелчок по ячейке строки открывает карточку, по выделенному тексту — нет", async ({ page }) => {
+  await login(page, "/app/issues");
+  await page.getByRole("cell", { name: "Схема свода" }).click();
+  await expect(page).toHaveURL(/\/app\/issues\/AURORA-9001/);
+  await expect(page.getByRole("dialog").getByRole("heading", { name: "Схема свода" })).toBeVisible();
 });
 
 test("окно поверх списка: прокрутка списка на месте при открытии и после закрытия", async ({ page }) => {
   await page.setViewportSize({ width: 1280, height: 320 });
   await login(page, "/app/issues");
-  await expect(page.locator("table.grid tbody tr")).toHaveCount(9);   // AURORA-9006 «Готово» скрыта
+  await expect(page.locator("table.issue-table tbody tr")).toHaveCount(9);   // AURORA-9006 «Готово» скрыта
   const y = await page.evaluate(() => { window.scrollTo(0, document.documentElement.scrollHeight); return window.scrollY; });
   expect(y).toBeGreaterThan(50);
-  await page.locator("table.grid tbody tr").last().getByRole("link").click();
+  await page.locator("table.issue-table tbody tr").last().getByRole("link").click();
   await expect(page.getByRole("dialog")).toBeVisible();
   expect(await page.evaluate(() => window.scrollY)).toBe(y);
   await page.keyboard.press("Escape");
@@ -174,14 +197,13 @@ test("узкий экран: окно на всю ширину, заметки 
   expect(await d.evaluate((el) => el.scrollWidth <= el.clientWidth + 1)).toBe(true);
 });
 
-test("закрытые скрыты по умолчанию, снятый флажок показывает их", async ({ page }) => {
+test("закрытые скрыты по умолчанию, «Все» показывает их", async ({ page }) => {
   await login(page, "/app/issues");
-  await expect(page.locator("table.grid tbody tr")).toHaveCount(9);
+  await expect(page.locator("table.issue-table tbody tr")).toHaveCount(9);
   await expect(page.getByRole("link", { name: "AURORA-9006", exact: true })).toHaveCount(0);
-  const hide = page.getByRole("checkbox", { name: "скрыть закрытые" });
-  await hide.click();                          // не uncheck(): адрес меняется навигацией, флажок следует за ним не сразу
+  await page.getByRole("radio", { name: "Все" }).click();
   await expect(page).toHaveURL(/closed=1/);
-  await expect(hide).not.toBeChecked();
+  await expect(page.getByRole("radio", { name: "Все" })).toBeChecked();
   await expect(page.getByRole("link", { name: "AURORA-9006", exact: true })).toBeVisible();
-  await expect(page.locator("table.grid tbody tr")).toHaveCount(10);
+  await expect(page.locator("table.issue-table tbody tr")).toHaveCount(10);
 });
diff --git a/web/src/issues/IssueFilters.tsx b/web/src/issues/IssueFilters.tsx
new file mode 100644
index 0000000..d1a9594
--- /dev/null
+++ b/web/src/issues/IssueFilters.tsx
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Badge, Button, Chip, Field, IconFilter, Panel, SearchInput, Segmented, Select } from "../ui/index.ts";
+import type { IssueFilters as Filters } from "../api/queries.ts";
+import { withCurrent, type Opt } from "./options.ts";
+
+export const SELECTS = [
+  ["sprint", "Спринт"], ["assignee", "Исполнитель"], ["work_kind", "Вид работы"], ["status", "Статус Jira"],
+  ["label", "Метка"], ["epic", "Эпик"],
+] as const;
+type Name = (typeof SELECTS)[number][0];
+
+// раскрыта ли панель «Фильтры» — на время сессии вкладки; ошибки хранилища глотаем
+const KEY = "jira-hub-issue-filters";
+const readOpen = () => { try { return sessionStorage.getItem(KEY) === "1"; } catch { return false; } };
+const saveOpen = (open: boolean) => { try { sessionStorage.setItem(KEY, open ? "1" : "0"); } catch { /* только в памяти */ } };
+
+export function IssueFilters({ filters, set, onReset, q, setQ, showClosed, opts, hasBoard }: {
+  filters: Filters; set(name: string, value: string): void; onReset(): void;
+  q: string; setQ(v: string): void; showClosed: boolean; opts: Record<Name, Opt[]>; hasBoard: boolean;
+}) {
+  const [open, setOpen] = useState(readOpen);
+  const toggle = () => setOpen((o) => { saveOpen(!o); return !o; });
+  const labelOf = (name: Name, value: string) => opts[name].find((o) => o.value === value)?.label ?? value;
+  const chosen = SELECTS.filter(([n]) => filters[n]);
+  return (
+    <Panel className="issue-filters">
+      <div className="issue-filters__row">
+        <div className="issue-filters__search">
+          <SearchInput label="Поиск по ключу или теме" placeholder="Ключ или тема" value={q} onChange={setQ} />
+        </div>
+        <Segmented label="Закрытые задачи" value={showClosed ? "all" : "open"}
+          options={[{ value: "open", label: "Открытые" }, { value: "all", label: "Все" }]}
+          onChange={(v) => set("closed", v === "all" ? "1" : "")} />
+        <Button aria-pressed={filters.neighbor === "1"} onClick={() => set("neighbor", filters.neighbor === "1" ? "" : "1")}>Только соседи</Button>
+        <Button icon={<IconFilter />} aria-expanded={open} aria-controls="issue-filters-grid" onClick={toggle}>
+          Фильтры{chosen.length > 0 && <Badge tone="info">{chosen.length}</Badge>}
+        </Button>
+      </div>
+      {chosen.length > 0 && (
+        <div className="issue-filters__chips">
+          {chosen.map(([n, label]) => (
+            <Chip key={n} removeLabel={`Снять фильтр ${label}`} onRemove={() => set(n, "")}>{label}: {labelOf(n, filters[n]!)}</Chip>
+          ))}
+          <Button variant="ghost" onClick={onReset}>Сбросить</Button>
+        </div>
+      )}
+      {open && (
+        <div className="issue-filters__grid" id="issue-filters-grid">
+          {SELECTS.map(([name, label]) => (
+            <Field key={name} label={label}>
+              <Select aria-label={label} value={filters[name] ?? ""} onChange={(e) => set(name, e.target.value)}>
+                <option value="">все</option>
+                {withCurrent(opts[name], filters[name], hasBoard).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+              </Select>
+            </Field>
+          ))}
+        </div>
+      )}
+    </Panel>
+  );
+}
diff --git a/web/src/issues/IssueLink.tsx b/web/src/issues/IssueLink.tsx
index dff0d22..fd484ac 100644
--- a/web/src/issues/IssueLink.tsx
+++ b/web/src/issues/IssueLink.tsx
@@ -1,9 +1,18 @@
 import type { ReactNode } from "react";
-import { Link, useLocation } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 import { openCardState } from "./modal.ts";
 
+const cardPath = (key: string) => `/issues/${encodeURIComponent(key)}`;
+
+// переход к карточке задачи: окно поверх текущей страницы (или смена содержимого открытого окна) — как у ссылки-ключа
+export function useOpenIssue(): (key: string) => void {
+  const loc = useLocation();
+  const navigate = useNavigate();
+  return (key) => void navigate(cardPath(key), { state: openCardState(loc) });
+}
+
 // ссылка на карточку задачи: открывает окно поверх текущей страницы (или меняет содержимое открытого окна)
 export function IssueLink({ issueKey, className, children }: { issueKey: string; className?: string; children?: ReactNode }) {
   const loc = useLocation();
-  return <Link className={className} to={`/issues/${encodeURIComponent(issueKey)}`} state={openCardState(loc)}>{children ?? issueKey}</Link>;
+  return <Link className={className} to={cardPath(issueKey)} state={openCardState(loc)}>{children ?? issueKey}</Link>;
 }
diff --git a/web/src/issues/IssueModal.test.tsx b/web/src/issues/IssueModal.test.tsx
index 1259ac0..d31a9e4 100644
--- a/web/src/issues/IssueModal.test.tsx
+++ b/web/src/issues/IssueModal.test.tsx
@@ -32,6 +32,7 @@ describe("карточка окном", () => {
   beforeEach(() => { setToken("tok"); hub(); });
 
   it("из списка: окно поверх списка, фон не пересоздаётся, ✕ возвращает со старым фильтром, «назад» не открывает карточку", async () => {
+    sessionStorage.setItem("jira-hub-issue-filters", "1");   // панель «Фильтры» раскрыта
     const router = at(["/app/board", "/app/issues?sprint=AWPCA_Спринт 2"]);
     render(<App router={router} />);
     const table = await screen.findByRole("table");
diff --git a/web/src/issues/IssueTable.tsx b/web/src/issues/IssueTable.tsx
new file mode 100644
index 0000000..1a026f1
--- /dev/null
+++ b/web/src/issues/IssueTable.tsx
@@ -0,0 +1,44 @@
+import type { MouseEvent } from "react";
+import { Badge, Panel } from "../ui/index.ts";
+import type { IssueRow } from "../api/types.ts";
+import { isOverdue, todayISO } from "./card.ts";
+import { IssueLink } from "./IssueLink.tsx";
+import { dueOf } from "./options.ts";
+
+// щелчок по строке открывает карточку, если это не ссылка/кнопка и не выделение текста
+function rowClick(e: MouseEvent<HTMLTableRowElement>, key: string, onOpen: (key: string) => void) {
+  if ((e.target as HTMLElement).closest("a, button")) return;
+  if (window.getSelection()?.toString()) return;
+  onOpen(key);
+}
+
+export function IssueTable({ rows, epicNames, closed, onOpen }: {
+  rows: IssueRow[]; epicNames: Record<string, string>; closed: Set<string>; onOpen(key: string): void;
+}) {
+  const today = todayISO();
+  return (
+    <Panel padding="none" className="issue-table-wrap">
+      <table className="issue-table">
+        <thead><tr><th>Ключ</th><th>Тема</th><th>Статус Jira</th><th>Исполнитель</th><th>Срок</th><th>Спринт</th><th>Эпик</th><th>Вид работы</th><th>Тип</th></tr></thead>
+        <tbody>
+          {rows.map((i) => {
+            const due = dueOf(i);
+            return (
+              <tr key={i.key} onClick={(e) => rowClick(e, i.key, onOpen)}>
+                <td className="issue-table__key"><IssueLink issueKey={i.key} />{i.neighbor && <Badge tone="neutral">сосед</Badge>}</td>
+                <td className="issue-table__sum">{i.summary}</td>
+                <td>{i.status && <Badge tone="info">{i.status}</Badge>}</td>
+                <td>{i.assignee}</td>
+                <td className={isOverdue(due, i.status, closed, today) ? "overdue" : undefined}>{due}</td>
+                <td>{i.sprint}</td>
+                <td>{i.epic_key ? epicNames[i.epic_key] ?? i.epic_key : ""}</td>
+                <td>{i.work_kind}</td>
+                <td>{i.issue_type}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </Panel>
+  );
+}
diff --git a/web/src/issues/IssuesPage.test.tsx b/web/src/issues/IssuesPage.test.tsx
index 76d885a..b4d6d25 100644
--- a/web/src/issues/IssuesPage.test.tsx
+++ b/web/src/issues/IssuesPage.test.tsx
@@ -2,7 +2,7 @@ import { act, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { qk } from "../api/queries.ts";
 import { setToken } from "../auth/token.ts";
 import settings from "../board/__fixtures__/settings.json";
@@ -26,7 +26,8 @@ const issuesCalls = (fetch: ReturnType<typeof hub>) =>
   fetch.mock.calls.map(([u]) => new URL(String(u), "http://hub.test")).filter((u) => u.pathname === "/issues");
 
 describe("список задач", () => {
-  beforeEach(() => setToken("tok"));
+  beforeEach(() => { setToken("tok"); sessionStorage.clear(); });
+  const expanded = () => sessionStorage.setItem("jira-hub-issue-filters", "1");
 
   it("фильтры из адреса уходят в GET /issues; ключ ведёт на карточку", async () => {
     const fetch = hub(() => [row(1)]);
@@ -41,6 +42,7 @@ describe("список задач", () => {
   });
 
   it("выбор исполнителя пишет его в адрес и в запрос", async () => {
+    expanded();
     const fetch = hub(() => [row(1)]);
     const { router } = renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
     await screen.findByRole("link", { name: "AURORA-9001" });
@@ -113,6 +115,7 @@ describe("список задач", () => {
   });
 
   it("T13.1: значение фильтра из адреса вне вариантов — в списке с пометкой", async () => {
+    expanded();
     hub(() => [row(1)]);
     renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues?sprint=AWPCA_Спринт 0", path: "/issues" });
     const sel = await screen.findByLabelText("Спринт");
@@ -121,6 +124,7 @@ describe("список задач", () => {
   });
 
   it("значение есть на доске, снимок грузится — подпись без пометки и после загрузки", async () => {
+    expanded();
     const board = deferred<Response>();
     mockFetch((_m, url) => {
       if (url.pathname === "/settings") return json(200, settings);
@@ -140,6 +144,7 @@ describe("список задач", () => {
   });
 
   it("T13.1: пока снимок доски грузится, пометки «(нет на доске)» нет", async () => {
+    expanded();
     mockFetch((_m, url) => {
       if (url.pathname === "/settings") return json(200, settings);
       if (url.pathname === "/board") return new Promise<Response>(() => {});   // снимок не приходит до конца теста
@@ -152,31 +157,32 @@ describe("список задач", () => {
     expect(within(sel).getByRole("option", { name: "AWPCA_Спринт 2" })).toBeInTheDocument();
   });
 
-  const hideBox = () => screen.getByRole("checkbox", { name: "скрыть закрытые" });
+  const openedRadio = () => screen.getByRole("radio", { name: "Открытые" });
+  const allRadio = () => screen.getByRole("radio", { name: "Все" });
 
-  it("закрытые скрыты по умолчанию; снятый флажок — closed=1 и запрос без hide_closed", async () => {
+  it("закрытые скрыты по умолчанию; «Все» — closed=1 и запрос без hide_closed", async () => {
     const fetch = hub(() => [row(1)]);
     const { router } = renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
     await screen.findByRole("link", { name: "AURORA-9001" });
-    expect(hideBox()).toBeChecked();
+    expect(openedRadio()).toBeChecked();
     let q = issuesCalls(fetch).at(-1)!.searchParams;
     expect(q.get("hide_closed")).toBe("1");
     expect(q.has("closed")).toBe(false);
-    await userEvent.click(hideBox());
+    await userEvent.click(allRadio());
     await waitFor(() => expect(router.state.location.search).toBe("?closed=1"));
     await waitFor(() => expect(issuesCalls(fetch).at(-1)!.searchParams.has("hide_closed")).toBe(false));
     q = issuesCalls(fetch).at(-1)!.searchParams;
     expect(q.has("closed")).toBe(false);
-    await userEvent.click(hideBox());
+    await userEvent.click(openedRadio());
     await waitFor(() => expect(router.state.location.search).toBe(""));
-    expect(hideBox()).toBeChecked();   // выборка с hide_closed=1 уже в кэше — повторного запроса может не быть
+    expect(openedRadio()).toBeChecked();   // выборка с hide_closed=1 уже в кэше — повторного запроса может не быть
   });
 
-  it("адрес closed=1 — флажок снят, запрос без hide_closed", async () => {
+  it("адрес closed=1 — выбрано «Все», запрос без hide_closed", async () => {
     const fetch = hub(() => [row(1)]);
     renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues?closed=1", path: "/issues" });
     await screen.findByRole("link", { name: "AURORA-9001" });
-    expect(hideBox()).not.toBeChecked();
+    expect(allRadio()).toBeChecked();
     expect(issuesCalls(fetch).every((u) => !u.searchParams.has("hide_closed"))).toBe(true);
   });
 
@@ -187,7 +193,7 @@ describe("список задач", () => {
     const q = issuesCalls(fetch).at(-1)!.searchParams;
     expect(q.get("status")).toBe("Готово");
     expect(q.has("hide_closed")).toBe(false);
-    expect(hideBox()).toBeChecked();
+    expect(openedRadio()).toBeChecked();
   });
 
   it("выбран незакрытый статус Jira — hide_closed отправляется", async () => {
@@ -219,4 +225,111 @@ describe("список задач", () => {
     expect(screen.queryByRole("columnheader", { name: "Статус по факту" })).toBeNull();
     expect(issuesCalls(fetch).every((u) => !u.searchParams.has("fact_status"))).toBe(true);
   });
+  describe("панель фильтров", () => {
+    const URL2 = "/issues?sprint=AWPCA_Спринт 2&assignee=Петров Пётр Петрович";
+
+    it("Фильтр в адресе: счётчик 2, плашки, панель свёрнута", async () => {
+      hub(() => [row(1)]);
+      renderWithProviders(<IssuesPage project="AWPCA" />, { route: URL2, path: "/issues" });
+      await screen.findByRole("link", { name: "AURORA-9001" });
+      const btn = screen.getByRole("button", { name: /Фильтры/ });
+      expect(btn).toHaveTextContent("2");
+      expect(btn).toHaveAttribute("aria-expanded", "false");
+      expect(screen.getByText("Спринт: AWPCA_Спринт 2")).toBeInTheDocument();
+      expect(screen.getByText("Исполнитель: Петров Пётр Петрович")).toBeInTheDocument();
+      expect(screen.queryByRole("combobox", { name: "Спринт" })).toBeNull();
+    });
+
+    it("кнопка «Фильтры» раскрывает панель и запоминает это в sessionStorage", async () => {
+      hub(() => [row(1)]);
+      renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
+      await screen.findByRole("link", { name: "AURORA-9001" });
+      await userEvent.click(screen.getByRole("button", { name: /Фильтры/ }));
+      expect(screen.getByRole("button", { name: /Фильтры/ })).toHaveAttribute("aria-expanded", "true");
+      for (const n of ["Спринт", "Исполнитель", "Вид работы", "Статус Jira", "Метка", "Эпик"]) expect(screen.getByLabelText(n)).toBeInTheDocument();
+      expect(sessionStorage.getItem("jira-hub-issue-filters")).toBe("1");
+    });
+
+    it("панель раскрыта по sessionStorage", async () => {
+      sessionStorage.setItem("jira-hub-issue-filters", "1");
+      hub(() => [row(1)]);
+      renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
+      expect(await screen.findByLabelText("Спринт")).toBeInTheDocument();
+    });
+
+    it("Снять фильтр плашкой: sprint уходит из адреса, assignee остаётся", async () => {
+      const fetch = hub(() => [row(1)]);
+      const { router } = renderWithProviders(<IssuesPage project="AWPCA" />, { route: URL2, path: "/issues" });
+      await screen.findByRole("link", { name: "AURORA-9001" });
+      await userEvent.click(screen.getByRole("button", { name: "Снять фильтр Спринт" }));
+      await waitFor(() => expect(router.state.location.search).not.toContain("sprint="));
+      expect(router.state.location.search).toContain("assignee=");
+      await waitFor(() => expect(issuesCalls(fetch).at(-1)!.searchParams.has("sprint")).toBe(false));
+    });
+
+    it("«Сбросить» снимает шесть списков, поиск и «Только соседи» остаются", async () => {
+      hub(() => [row(1)]);
+      const { router } = renderWithProviders(<IssuesPage project="AWPCA" />,
+        { route: "/issues?sprint=AWPCA_Спринт 2&assignee=Петров Пётр Петрович&status=В работе&q=свод&neighbor=1", path: "/issues" });
+      await screen.findByRole("link", { name: "AURORA-9001" });
+      await userEvent.click(screen.getByRole("button", { name: "Сбросить" }));
+      await waitFor(() => expect(router.state.location.search).toBe("?q=%D1%81%D0%B2%D0%BE%D0%B4&neighbor=1"));
+      expect(screen.queryByRole("button", { name: "Сбросить" })).toBeNull();
+    });
+
+    it("«Только соседи» — кнопка с aria-pressed, пишет neighbor=1", async () => {
+      hub(() => [row(1)]);
+      const { router } = renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
+      await screen.findByRole("link", { name: "AURORA-9001" });
+      const b = screen.getByRole("button", { name: "Только соседи" });
+      expect(b).toHaveAttribute("aria-pressed", "false");
+      await userEvent.click(b);
+      await waitFor(() => expect(router.state.location.search).toBe("?neighbor=1"));
+      expect(screen.getByRole("button", { name: "Только соседи" })).toHaveAttribute("aria-pressed", "true");
+    });
+  });
+
+  it("подзаголовок: показано N", async () => {
+    hub(() => [row(1), row(2)]);
+    renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
+    await screen.findByRole("link", { name: "AURORA-9001" });
+    expect(screen.getByText("показано 2")).toBeInTheDocument();
+  });
+
+  it("пустая выдача — сведения «По этим фильтрам задач нет»", async () => {
+    hub(() => []);
+    renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
+    expect(await screen.findByText("По этим фильтрам задач нет")).toBeInTheDocument();
+  });
+
+  it("Щелчок по строке: ячейка темы открывает карточку", async () => {
+    hub(() => [row(1)]);
+    const { router } = renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
+    await userEvent.click(await screen.findByRole("cell", { name: "Задача 1" }));
+    await waitFor(() => expect(router.state.location.pathname).toBe("/issues/AURORA-9001"));
+  });
+
+  it("выделенный текст в строке — без перехода", async () => {
+    hub(() => [row(1)]);
+    const { router } = renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
+    const cell = await screen.findByRole("cell", { name: "Задача 1" });
+    const sel = vi.spyOn(window, "getSelection").mockReturnValue({ toString: () => "Задач" } as unknown as Selection);
+    await userEvent.click(cell);
+    sel.mockRestore();
+    expect(router.state.location.pathname).toBe("/issues");
+  });
+
+  it("просрочено: класс overdue у срока незакрытой задачи с прошедшим сроком, у закрытой нет", async () => {
+    hub(() => [
+      { ...row(1), planned_end: "2000-01-01", status: "В работе" },
+      { ...row(2), planned_end: "2000-01-01", status: "Готово" },
+      { ...row(3), planned_end: "2999-01-01", status: "В работе" },
+    ]);
+    renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues?closed=1", path: "/issues" });
+    await screen.findByRole("link", { name: "AURORA-9001" });
+    const dueCell = (n: number) => within(screen.getByRole("row", { name: new RegExp(`AURORA-${9000 + n}`) })).getByText(/^(2000|2999)-01-01$/);
+    await waitFor(() => expect(dueCell(1)).toHaveClass("overdue"));
+    expect(dueCell(2)).not.toHaveClass("overdue");
+    expect(dueCell(3)).not.toHaveClass("overdue");
+  });
 });
diff --git a/web/src/issues/IssuesPage.tsx b/web/src/issues/IssuesPage.tsx
index 4419b92..efdae09 100644
--- a/web/src/issues/IssuesPage.tsx
+++ b/web/src/issues/IssuesPage.tsx
@@ -1,22 +1,22 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router";
 import { isClosed, useClosedStatuses } from "../api/closed.ts";
-import { ISSUE_FILTER_NAMES, useBoard, useIssues, useSettings, type IssueFilters } from "../api/queries.ts";
-import { IssueLink } from "./IssueLink.tsx";
-import { dueOf, epicNames, filterOptions, withCurrent } from "./options.ts";
+import { ISSUE_FILTER_NAMES, useBoard, useIssues, useSettings, type IssueFilters as Filters } from "../api/queries.ts";
+import { Button, Notice, PageHeader } from "../ui/index.ts";
+import { IssueFilters, SELECTS } from "./IssueFilters.tsx";
+import { useOpenIssue } from "./IssueLink.tsx";
+import { IssueTable } from "./IssueTable.tsx";
+import { epicNames, filterOptions } from "./options.ts";
 import "./issues.css";
 
-const SELECTS = [
-  ["sprint", "Спринт"], ["assignee", "Исполнитель"], ["work_kind", "Вид работы"], ["status", "Статус Jira"],
-  ["label", "Метка"], ["epic", "Эпик"],
-] as const;
 const Q_DELAY = 300;   // поиск — после паузы ввода (R-7)
 
 export function IssuesPage({ project }: { project: string }) {
   const [params, setParams] = useSearchParams();
-  const filters = useMemo<IssueFilters>(() =>
+  const filters = useMemo<Filters>(() =>
     Object.fromEntries(ISSUE_FILTER_NAMES.map((n) => [n, params.get(n) ?? ""]).filter(([, v]) => v)), [params]);
   const set = (name: string, value: string) => setParams((p) => { const n = new URLSearchParams(p); if (value) n.set(name, value); else n.delete(name); return n; });
+  const reset = () => setParams((p) => { const n = new URLSearchParams(p); SELECTS.forEach(([name]) => n.delete(name)); return n; });
   const [q, setQ] = useState(filters.q ?? "");
   const written = useRef(filters.q ?? "");   // последнее значение q, согласованное с адресом (записанное нами или принятое из него)
   useEffect(() => {
@@ -38,49 +38,30 @@ export function IssuesPage({ project }: { project: string }) {
   const board = useBoard(project), settings = useSettings();
   const opts = useMemo(() => filterOptions(board.data, settings.data), [board.data, settings.data]);
   const names = useMemo(() => epicNames(board.data), [board.data]);
-  // закрытые скрыты, пока флажок не снят (closed=1); выбранный закрытый статус Jira скрытие отменяет
+  // закрытые скрыты, пока не выбрано «Все» (closed=1); выбранный закрытый статус Jira скрытие отменяет
   const showClosed = params.get("closed") === "1";
   const closed = useClosedStatuses();
-  const query = useMemo<IssueFilters>(() => (showClosed || isClosed(filters.status, closed) ? { ...filters, project } : { ...filters, project, hide_closed: "1" }),
+  const query = useMemo<Filters>(() => (showClosed || isClosed(filters.status, closed) ? { ...filters, project } : { ...filters, project, hide_closed: "1" }),
     [filters, project, showClosed, closed]);
   const list = useIssues(query);
   const rows = list.data?.pages.flat() ?? [];
+  const open = useOpenIssue();
 
   return (
     <div data-testid="page-issues" className="issues">
-      <h1>Задачи</h1>
-      <div className="filters">
-        {SELECTS.map(([name, label]) => (
-          <label key={name}>{label}
-            <select aria-label={label} value={filters[name] ?? ""} onChange={(e) => set(name, e.target.value)}>
-              <option value="">все</option>
-              {withCurrent(opts[name], filters[name], !!board.data).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
-            </select>
-          </label>
-        ))}
-        <label className="check"><input type="checkbox" checked={filters.neighbor === "1"} onChange={(e) => set("neighbor", e.target.checked ? "1" : "")} />только соседи</label>
-        <label className="check"><input type="checkbox" checked={!showClosed} onChange={(e) => set("closed", e.target.checked ? "" : "1")} />скрыть закрытые</label>
-        <input type="search" aria-label="Поиск по ключу или теме" placeholder="ключ или тема" value={q} onChange={(e) => setQ(e.target.value)} />
-      </div>
+      <PageHeader title="Задачи" subtitle={list.isPending ? undefined : `показано ${rows.length}${list.hasNextPage ? " · есть ещё" : ""}`} />
+      <IssueFilters filters={filters} set={set} onReset={reset} q={q} setQ={setQ} showClosed={showClosed} opts={opts} hasBoard={!!board.data} />
       {list.isError && (
-        <p className="warn" role="alert">{(list.error as Error).message}{" "}
-          <button className="btn sm" type="button" onClick={() => void list.refetch()}>Повторить</button></p>
+        <Notice tone="error" action={<Button size="md" onClick={() => void list.refetch()}>Повторить</Button>}>{(list.error as Error).message}</Notice>
+      )}
+      {rows.length > 0 && <IssueTable rows={rows} epicNames={names} closed={closed} onOpen={open} />}
+      {list.isPending && <p className="issues__hint">Загрузка…</p>}
+      {!list.isPending && !rows.length && !list.isError && <Notice tone="info">По этим фильтрам задач нет</Notice>}
+      {list.hasNextPage && (
+        <div className="issues__more">
+          <Button disabled={list.isFetchingNextPage} onClick={() => void list.fetchNextPage()}>Показать ещё</Button>
+        </div>
       )}
-      <table className="grid">
-        <thead><tr><th>Ключ</th><th>Тема</th><th>Тип</th><th>Статус Jira</th><th>Исполнитель</th><th>Спринт</th><th>Срок</th><th>Эпик</th><th>Вид работы</th><th>Сосед</th></tr></thead>
-        <tbody>
-          {rows.map((i) => (
-            <tr key={i.key}>
-              <td><IssueLink issueKey={i.key} /></td><td>{i.summary}</td><td>{i.issue_type}</td><td>{i.status}</td>
-              <td>{i.assignee}</td><td>{i.sprint}</td><td>{dueOf(i)}</td><td>{i.epic_key ? names[i.epic_key] ?? i.epic_key : ""}</td>
-              <td>{i.work_kind}</td><td>{i.neighbor ? "да" : ""}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {list.isPending && <p className="hint">загрузка…</p>}
-      {!list.isPending && !rows.length && !list.isError && <p className="hint">По этим фильтрам задач нет.</p>}
-      {list.hasNextPage && <button className="btn" type="button" disabled={list.isFetchingNextPage} onClick={() => void list.fetchNextPage()}>Показать ещё</button>}
     </div>
   );
 }
diff --git a/web/src/issues/issues.css b/web/src/issues/issues.css
index d334333..04af075 100644
--- a/web/src/issues/issues.css
+++ b/web/src/issues/issues.css
@@ -1,11 +1,34 @@
-.issues .filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end;margin:12px 0}
-.issues .filters label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:2px}
-.issues .filters label.check{flex-direction:row;align-items:center;gap:6px;color:var(--fg)}
-.issues select,.issues input[type=search]{font:inherit;font-size:14px;height:32px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);padding:0 8px}
-.grid{width:100%;border-collapse:collapse;font-size:14px}
-.grid th,.grid td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
-.grid th{color:var(--muted);font-weight:500;position:sticky;top:0;background:var(--bg)}
-.grid a{color:var(--accent)}
+.issues{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-6)}
+.issues .ui-page-header{margin-bottom:0}
+.issue-filters{display:flex;flex-direction:column;gap:var(--space-3)}
+.issue-filters__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
+.issue-filters__search{flex:1 1 280px;min-width:0;max-width:480px}
+.issue-filters__row .ui-btn .ui-badge{margin-left:var(--space-2)}
+.issue-filters__row .ui-btn[aria-pressed="true"],.issue-filters__row .ui-btn[aria-expanded="true"]{border-color:var(--color-border-selected);color:var(--color-action-primary)}
+.issue-filters__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
+.issue-filters__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3) var(--space-4)}
+@media (max-width:899.98px){.issue-filters__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media (max-width:639.98px){.issue-filters__grid{grid-template-columns:minmax(0,1fr)}.issue-filters__search{max-width:none}}
+/* прокрутка внутри панели — только на узких экранах: overflow на предке отключает липкую шапку страницы */
+@media (max-width:1099.98px){.issue-table-wrap{overflow-x:auto}}
+.issue-table th:first-child{border-top-left-radius:calc(var(--radius-xl) - 1px)}
+.issue-table th:last-child{border-top-right-radius:calc(var(--radius-xl) - 1px)}
+.issue-table tbody tr:last-child td:first-child{border-bottom-left-radius:calc(var(--radius-xl) - 1px)}
+.issue-table tbody tr:last-child td:last-child{border-bottom-right-radius:calc(var(--radius-xl) - 1px)}
+.issue-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body);line-height:var(--lh-body)}
+.issue-table th,.issue-table td{height:44px;padding:0 var(--space-3);text-align:left;vertical-align:middle;border-bottom:1px solid var(--color-border-default)}
+.issue-table tbody tr:last-child td{border-bottom:0}
+.issue-table th{position:sticky;top:0;z-index:1;background:var(--color-bg-surface);color:var(--color-text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:600;white-space:nowrap}
+.issue-table td{color:var(--color-text-primary)}
+.issue-table tbody tr{cursor:pointer}
+.issue-table tbody tr:hover td{background:var(--color-bg-hover)}
+.issue-table__key{white-space:nowrap}
+.issue-table__key a{font-family:var(--font-mono);font-size:13px;color:var(--color-action-primary);text-decoration:none;margin-right:var(--space-2)}
+.issue-table__key a:hover{text-decoration:underline}
+.issue-table__sum{min-width:240px}
+.issue-table td.overdue{color:var(--color-status-error);font-weight:600}
+.issues__hint{margin:0;color:var(--color-text-secondary)}
+.issues__more{display:flex;justify-content:center}
 .issue a{color:var(--accent)}
 .issue-head{position:sticky;top:0;z-index:1;background:var(--bg);padding:14px 0 10px;border-bottom:1px solid var(--line);margin-bottom:14px}
 .issue-head .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
diff --git a/web/src/shell/AppBar.test.tsx b/web/src/shell/AppBar.test.tsx
index 392f599..2e3ef54 100644
--- a/web/src/shell/AppBar.test.tsx
+++ b/web/src/shell/AppBar.test.tsx
@@ -38,7 +38,7 @@ const open = (path: string) => {
   render(<App router={router} />);
   return router;
 };
-const bar = () => screen.getByRole("banner");
+const bar = () => screen.getAllByRole("banner")[0];   // верхняя панель — первая; PageHeader страницы без <main> тоже даёт banner
 
 describe("верхняя панель", () => {
   beforeEach(() => { setToken("tok"); localStorage.clear(); });
-- 
2.47.2


From cc85f52546941945a9c758cb40f902f6c7f8081c Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 00:53:30 +0400
Subject: [PATCH 14/23] =?UTF-8?q?=D0=A1=D0=BF=D0=B5=D0=BA=D0=B0:=20=D1=80?=
 =?UTF-8?q?=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=2016=20=E2=80=94=20=D1=82?=
 =?UTF-8?q?=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D0=B0=20=D1=81=D0=BF=D0=B8=D1=81?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=BD=D0=B0=20=D1=83=D0=B7=D0=BA=D0=BE=D0=BC=20?=
 =?UTF-8?q?=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D0=B5=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 openspec/changes/redesign/design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/openspec/changes/redesign/design.md b/openspec/changes/redesign/design.md
index 90eeb10..a961944 100644
--- a/openspec/changes/redesign/design.md
+++ b/openspec/changes/redesign/design.md
@@ -190,3 +190,4 @@
 | 13 | 22.10.2026 | Задача 1: тёмные `--color-action-danger` `#ffaea5` и hover `#ffcbc5` взяты из tokens.json AURA; `--color-status-error` остаётся `#e26c67`; затемнение фона окон везде `--color-overlay` 45% (у проектов было 40%); палитра `--k-*`/`--p-*` подобрана на глаз, `--k-test` малиновый (`#a63d78` / `#e07fb0`), чтобы не сливаться с зелёным действием | токены AURA — канон; один overlay вместо двух значений; различимость видов задач на доске | низкая: правка значений в tokens.css |
 | 14 | 22.10.2026 | Задача 4: регресс T4.1 (счётчик `skipPickup` не уменьшается при ошибке перечитывания) чинится в Задаче 5, без отдельного раунда ревью; в Задаче 4 пропуск подхвата сделан счётчиком вместо флага, подхват коалесцируется, тоны `refreshText`: error для batch-lost/failed/hub-down/error, warning для cancelled | регресс мелкий и в том же модуле, что правится в Задаче 5 | низкая: один пропущенный подхват чужого пакета до следующей загрузки снимка |
 | 15 | 22.10.2026 | Задача 5: высота верхней панели `min-height: 64` (не фиксированная), чтобы вторая строка данных переносилась при ширине <1100 px; панель не sticky | перенос без обрезки | низкая: заменить на фиксированную высоту и скролл строки |
+| 16 | 22.10.2026 | Задача 8: ниже 1100 px таблица списка прокручивается по горизонтали внутри панели, шапка таблицы там не липкая; от 1100 px липкая | overflow на предке отключает `position: sticky`; широкая таблица на узком экране важнее липкой шапки | низкая: на узком экране шапку не видно при прокрутке вниз |
-- 
2.47.2


From 2a0b617cbaceaf6a360e093ce46edf94e598e715 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:04:18 +0400
Subject: [PATCH 15/23] =?UTF-8?q?style(web):=20=D0=BA=D0=B0=D1=80=D1=82?=
 =?UTF-8?q?=D0=BE=D1=87=D0=BA=D0=B0=20=D0=B7=D0=B0=D0=B4=D0=B0=D1=87=D0=B8?=
 =?UTF-8?q?=20=D0=B8=20=D1=81=D0=BB=D1=83=D0=B6=D0=B5=D0=B1=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B5=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=82=D0=BA=D0=B8=20=D0=B2=20?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=D0=B5=20=D1=81=D0=B8=D1=81=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BC=D1=8B=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/issues/IssueCard.test.tsx |   6 +-
 web/src/issues/IssueCard.tsx      |  50 ++++++------
 web/src/issues/IssueModal.tsx     |  12 ++-
 web/src/issues/NoteForm.tsx       |  33 ++++----
 web/src/issues/Notes.tsx          |   3 +-
 web/src/issues/issues.css         | 125 ++++++++++++++++++------------
 web/src/ui/Dialog.tsx             |  16 ++--
 7 files changed, 144 insertions(+), 101 deletions(-)

diff --git a/web/src/issues/IssueCard.test.tsx b/web/src/issues/IssueCard.test.tsx
index f80c656..5718ab2 100644
--- a/web/src/issues/IssueCard.test.tsx
+++ b/web/src/issues/IssueCard.test.tsx
@@ -46,12 +46,12 @@ describe("карточка задачи", () => {
     expect(await screen.findByRole("heading", { level: 2, name: "Тема AURORA-9001" })).toBeInTheDocument();
     const head = screen.getByTestId("issue-head");
     expect(within(head).getByText("AURORA-9001")).toBeInTheDocument();
-    expect(within(head).getByText("В работе", { selector: ".badge.status" })).toBeInTheDocument();
+    expect(within(head).getByText("В работе", { selector: ".ui-badge" })).toBeInTheDocument();
     expect(head.querySelector(".badge.fact")).toBeNull();                      // статуса по факту в карточке нет (hide-closed)
     expect(within(head).queryByText(/факт:/)).toBeNull();
     expect(within(head).getByTestId("issue-facts")).toHaveTextContent("Иванов Иван Иванович · срок 10.01 просрочено · AWPCA_Спринт 2 · эпик: Тестовый эпик");
-    expect(within(head).getByText("просрочено")).toHaveClass("overdue");
-    expect(screen.getByRole("link", { name: "Открыть в Jira ↗" })).toHaveAttribute("href", "https://sdlc.go.rshbank.ru/jira/browse/AURORA-9001");
+    expect(within(head).getByText("просрочено")).toHaveClass("ui-badge--error");
+    expect(screen.getByRole("link", { name: "Открыть в Jira" })).toHaveAttribute("href", "https://sdlc.go.rshbank.ru/jira/browse/AURORA-9001");
   });
 
   it("связи по группам с темой и статусом; задача вне зеркала; прочий тип с направлением", async () => {
diff --git a/web/src/issues/IssueCard.tsx b/web/src/issues/IssueCard.tsx
index 14757b7..40c8942 100644
--- a/web/src/issues/IssueCard.tsx
+++ b/web/src/issues/IssueCard.tsx
@@ -8,6 +8,7 @@ import { fmtDate, fmtStamp } from "../board/model/util.ts";
 import { groupLinks, isOverdue, todayISO } from "./card.ts";
 import { useCommentsHidden } from "./commentsPref.ts";
 import { IssueLink } from "./IssueLink.tsx";
+import { Badge, Button, IconButton, IconClose, IconExternal, Notice, Panel } from "../ui/index.ts";
 import { Notes } from "./Notes.tsx";
 import { dueOf } from "./options.ts";
 import { WikiText } from "./wiki/WikiText.tsx";
@@ -19,17 +20,23 @@ export function IssueCard({ issueKey: key, onClose }: { issueKey: string; onClos
   const issue = useIssue(key);
   const settings = useSettings();
   const closed = useClosedStatuses();
-  const close = <button className="close" type="button" aria-label="Закрыть" onClick={onClose}>✕</button>;
-  if (issue.isPending) return <div className="issue" data-testid="issue-card"><div className="issue-head"><p className="hint">загрузка {key}…</p>{close}</div></div>;
+  const close = <IconButton label="Закрыть" icon={<IconClose />} onClick={onClose} />;
+  if (issue.isPending) {
+    return <div className="issue" data-testid="issue-card"><div className="issue-head"><div className="row1"><span className="key">{key}</span><span className="spacer" />{close}</div><p className="hint">загрузка {key}…</p></div></div>;
+  }
   if (issue.error instanceof ApiError && issue.error.status === 404) {
-    return <div className="issue" data-testid="issue-card"><p>Задачи {key} нет в зеркале хаба.</p><button className="btn" type="button" onClick={onClose}>Закрыть</button></div>;
+    return (
+      <div className="issue issue--state" data-testid="issue-card">
+        <Notice tone="info" action={<Button onClick={onClose}>Закрыть</Button>}>Задачи {key} нет в зеркале хаба.</Notice>
+      </div>
+    );
   }
   if (issue.isError && !issue.data) {
     return (
-      <div className="issue" data-testid="issue-card">
-        <p className="warn" role="alert">{issue.error.message}{" "}
-          <button className="btn sm" type="button" onClick={() => void issue.refetch()}>Повторить</button></p>
-        <button className="btn" type="button" onClick={onClose}>Закрыть</button>
+      <div className="issue issue--state" data-testid="issue-card">
+        <Notice tone="error" action={<><Button onClick={() => void issue.refetch()}>Повторить</Button><Button onClick={onClose}>Закрыть</Button></>}>
+          {issue.error.message}
+        </Notice>
       </div>
     );
   }
@@ -37,7 +44,7 @@ export function IssueCard({ issueKey: key, onClose }: { issueKey: string; onClos
   const due = dueOf(i);
   const facts = [
     i.assignee && <span key="who">{i.assignee}</span>,
-    due && <span key="due">срок {fmtDate(due)}{isOverdue(due, i.status, closed, todayISO()) && <> <span className="overdue">просрочено</span></>}</span>,
+    due && <span key="due">срок {fmtDate(due)}{isOverdue(due, i.status, closed, todayISO()) && <> <Badge tone="error">просрочено</Badge></>}</span>,
     i.sprint && <span key="sprint">{i.sprint}</span>,
     i.epic_key && <span key="epic">эпик: {i.epic_summary ?? i.epic_key}</span>,
   ].filter(Boolean);
@@ -46,16 +53,15 @@ export function IssueCard({ issueKey: key, onClose }: { issueKey: string; onClos
       <header className="issue-head" data-testid="issue-head">
         <div className="row1">
           <span className="key">{i.key}</span>
-          {i.status && <span className="badge status">{i.status}</span>}
+          {i.status && <Badge>{i.status}</Badge>}
           <span className="spacer" />
-          <a href={`${JIRA_URL}/browse/${i.key}`} target="_blank" rel="noopener">Открыть в Jira ↗</a>
+          <a className="ui-btn ui-btn--secondary ui-btn--md" href={`${JIRA_URL}/browse/${i.key}`} target="_blank" rel="noopener"><IconExternal size={16} />Открыть в Jira</a>
           {close}
         </div>
         <h2 id="issue-modal-title">{i.summary || i.key}</h2>
         {facts.length > 0 && <p className="facts" data-testid="issue-facts">{facts.flatMap((f, n) => (n ? [" · ", f] : [f]))}</p>}
         {issue.isError && (
-          <p className="warn" role="alert">{issue.error.message}{" "}
-            <button className="btn sm" type="button" onClick={() => void issue.refetch()}>Повторить</button></p>
+          <Notice tone="error" action={<Button onClick={() => void issue.refetch()}>Повторить</Button>}>{issue.error.message}</Notice>
         )}
       </header>
       <div className="cols">
@@ -64,11 +70,11 @@ export function IssueCard({ issueKey: key, onClose }: { issueKey: string; onClos
           {i.description && <Description text={i.description} projectKey={settings.data?.project_key} />}
           <Comments items={i.comments ?? []} projectKey={settings.data?.project_key} />
         </div>
-        <div className="side">
+        <Panel className="side">
           <Notes key={i.key} issue={i} />
           <OtherFields issue={i} />
           <Commands issue={i} />
-        </div>
+        </Panel>
       </div>
     </div>
   );
@@ -90,7 +96,7 @@ function Links({ issue, linkTypes }: { issue: IssueDetail; linkTypes: Record<str
                 <IssueLink issueKey={l.key} />{" "}
                 {l.summary === null && l.status === null
                   ? <span className="sum absent">нет в зеркале</span>
-                  : <><span className="sum">{l.summary}</span>{l.status && <>{" "}<span className="badge status">{l.status}</span></>}</>}
+                  : <><span className="sum">{l.summary}</span>{l.status && <>{" "}<Badge>{l.status}</Badge></>}</>}
               </li>
             ))}
           </ul>
@@ -102,7 +108,7 @@ function Links({ issue, linkTypes }: { issue: IssueDetail; linkTypes: Record<str
 
 // переключатель блока «исходник» / «текст»; выбор живёт до размонтирования карточки (design wiki-render #7)
 function SourceToggle({ source, onToggle }: { source: boolean; onToggle: () => void }) {
-  return <button className="link" type="button" aria-pressed={source} onClick={onToggle}>{source ? "текст" : "исходник"}</button>;
+  return <Button variant="ghost" aria-pressed={source} onClick={onToggle}>{source ? "текст" : "исходник"}</Button>;
 }
 
 function Description({ text, projectKey }: { text: string; projectKey?: string }) {
@@ -134,7 +140,7 @@ function Description({ text, projectKey }: { text: string; projectKey?: string }
       {source
         ? <pre ref={ref as RefObject<HTMLPreElement>} className={cls}>{text}</pre>
         : <div ref={ref as RefObject<HTMLDivElement>} className={cls}><WikiText text={text} projectKey={projectKey} /></div>}
-      {(long || open) && <button className="link" type="button" onClick={() => setOpen(!open)}>{open ? "свернуть" : "развернуть"}</button>}
+      {(long || open) && <Button variant="ghost" className="more" onClick={() => setOpen(!open)}>{open ? "свернуть" : "развернуть"}</Button>}
     </section>
   );
 }
@@ -143,8 +149,8 @@ function Comment({ c, projectKey }: { c: IssueComment; projectKey?: string }) {
   const [source, setSource] = useState(false);
   return (
     <li>
-      <div className="who">
-        <span>{c.author ?? "—"}{c.created ? `, ${fmtStamp(c.created)}` : ""}</span>
+      <div className="c-head">
+        <span className="c-head__name">{c.author ?? "—"}{c.created ? `, ${fmtStamp(c.created)}` : ""}</span>
         <SourceToggle source={source} onToggle={() => setSource(!source)} />
       </div>
       {source
@@ -160,7 +166,7 @@ function Comments({ items, projectKey }: { items: IssueComment[]; projectKey?: s
     <section className="comments" data-testid="comments">
       <div className="sec-head">
         <h3>Комментарии ({items.length})</h3>
-        {items.length > 0 && <button className="link" type="button" onClick={() => setHidden(!hidden)}>{hidden ? "Показать" : "Скрыть"}</button>}
+        {items.length > 0 && <Button variant="ghost" onClick={() => setHidden(!hidden)}>{hidden ? "Показать" : "Скрыть"}</Button>}
       </div>
       {!items.length && <p className="hint">комментариев нет</p>}
       {items.length > 0 && !hidden && (
@@ -194,13 +200,13 @@ function Commands({ issue: i }: { issue: IssueDetail }) {
     <section className="commands">
       <details>
         <summary>Команды моста ({i.commands.length})</summary>
-        <table className="grid">
+        <div className="cmd-wrap"><table className="grid">
           <thead><tr><th>Команда</th><th>Пакет</th><th>Тип</th><th>Статус</th><th>Завершена</th><th>Ошибка</th></tr></thead>
           <tbody>{i.commands.map((c) => (
             <tr key={c.id}><td>#{c.id}</td><td>#{c.batch_id}</td><td>{c.type}</td><td>{c.status}</td>
               <td>{c.finished_at ? fmtStamp(c.finished_at) : ""}</td><td>{c.error}</td></tr>
           ))}</tbody>
-        </table>
+        </table></div>
       </details>
     </section>
   );
diff --git a/web/src/issues/IssueModal.tsx b/web/src/issues/IssueModal.tsx
index a4f7134..f7ac8b6 100644
--- a/web/src/issues/IssueModal.tsx
+++ b/web/src/issues/IssueModal.tsx
@@ -1,27 +1,25 @@
 import { useEffect, useRef } from "react";
+import { Dialog } from "../ui/index.ts";
 import { ErrorBoundary } from "../shell/ErrorBoundary.tsx";
 import { IssueCard } from "./IssueCard.tsx";
 
-// имя окна — заголовок карточки; пока его нет (загрузка, 404, ошибка), запасное имя — ключ задачи
+// имя окна — ключ задачи; заголовок карточки (h2) подписывает окно через aria-labelledby
 // окно карточки (design 13): <dialog> держит фокус и делает фон недоступным; Esc и щелчок по фону — onClose.
 // Сами окно не закрываем: оно исчезает вместе с адресом карточки. Если браузер закрыл его сам (Esc без активации
 // пользователя — cancel не отменяемый), открываем снова и просим закрытия по общему пути (блокировщик заметок).
 export function IssueModal({ issueKey, onClose }: { issueKey: string; onClose: () => void }) {
-  const ref = useRef<HTMLDialogElement>(null);
   // I-2: закрывать щелчком по фону, только если и нажатие было на фоне — выделение текста, отпущенное за краем окна,
   // даёт click на самом <dialog>, но нажатие было внутри содержимого
   const downOnBackdrop = useRef(false);
   useEffect(() => {
-    const d = ref.current;
-    if (d && !d.open) d.showModal();
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";      // страница под окном не прокручивается
     return () => { document.body.style.overflow = prev; };
   }, []);
   return (
-    <dialog ref={ref} className="issue-modal" aria-labelledby="issue-modal-title" aria-label={issueKey}
+    <Dialog size="lg" className="issue-modal" label={issueKey} onClose={onClose} aria-labelledby="issue-modal-title"
       onCancel={(e) => { if (e.cancelable) { e.preventDefault(); onClose(); } }}
-      onClose={() => { const d = ref.current; if (d?.isConnected) { d.showModal(); onClose(); } }}
+      onNativeClose={(e) => { const d = e.currentTarget; if (d.isConnected) { d.showModal(); onClose(); } }}
       onPointerDown={(e) => { downOnBackdrop.current = e.target === e.currentTarget; }}
       onClick={(e) => {
         const fromBackdrop = downOnBackdrop.current;
@@ -29,6 +27,6 @@ export function IssueModal({ issueKey, onClose }: { issueKey: string; onClose: (
         if (e.target === e.currentTarget && fromBackdrop) onClose();
       }}>
       <ErrorBoundary key={issueKey}><IssueCard issueKey={issueKey} onClose={onClose} /></ErrorBoundary>
-    </dialog>
+    </Dialog>
   );
 }
diff --git a/web/src/issues/NoteForm.tsx b/web/src/issues/NoteForm.tsx
index e41e9df..1372020 100644
--- a/web/src/issues/NoteForm.tsx
+++ b/web/src/issues/NoteForm.tsx
@@ -3,6 +3,7 @@ import { useBlocker } from "react-router";
 import { useCloseAbort } from "./closeAbort.ts";
 import { ApiError } from "../api/client.ts";
 import { useSaveNote, useSettings } from "../api/queries.ts";
+import { Button, Field, Notice, Select, Textarea } from "../ui/index.ts";
 import { NOTE_FIELDS, type IssueDetail, type NoteField, type NoteFields } from "../api/types.ts";
 
 type Values = Record<NoteField, string>;
@@ -52,33 +53,37 @@ export function NoteForm({ issue, onDone }: { issue: IssueDetail; onDone: () =>
     <form className="note" aria-labelledby="notes-title" onSubmit={(e) => { e.preventDefault(); submit(); }}>
       <h3 id="notes-title">Служебные заметки</h3>
       <fieldset className="note-fields" disabled={save.isPending}>
-        <label>Вид работы
-          <select value={values.work_kind} onChange={set("work_kind")}>
+        <Field label="Вид работы">
+          <Select value={values.work_kind} onChange={set("work_kind")}>
             <option value="">—</option>
             {kindOptions.map((k) => <option key={k} value={k}>{k}</option>)}
-          </select>
-        </label>
+          </Select>
+        </Field>
         {TEXTS.map(([f, label]) => (
-          <label key={f}>{label}<textarea rows={3} value={values[f]} onChange={set(f)} /></label>
+          <Field key={f} label={label}><Textarea rows={3} value={values[f]} onChange={set(f)} /></Field>
         ))}
       </fieldset>
-      {err && <p className="err" role="alert">{err}</p>}
+      {err && <Notice tone="error">{err}</Notice>}
       <div className="row">
-        <button className="btn" type="submit" disabled={!dirty || save.isPending}>Сохранить</button>
-        <button className="btn" type="button" disabled={save.isPending} onClick={() => (dirty ? setAskCancel(true) : onDone())}>Отмена</button>
+        <Button variant="primary" type="submit" disabled={!dirty || save.isPending}>Сохранить</Button>
+        <Button type="button" disabled={save.isPending} onClick={() => (dirty ? setAskCancel(true) : onDone())}>Отмена</Button>
       </div>
       {askCancel && (
-        <div className="confirm" role="alertdialog" aria-label="Отменить правки заметки?">
+        <div className="note-confirm" role="alertdialog" aria-label="Отменить правки заметки?">
           <span>Отменить правки заметки?</span>
-          <button className="btn" type="button" onClick={onDone}>Отменить правки</button>
-          <button className="btn" type="button" onClick={() => setAskCancel(false)}>Продолжить правку</button>
+          <div className="row">
+            <Button onClick={onDone}>Отменить правки</Button>
+            <Button variant="primary" onClick={() => setAskCancel(false)}>Продолжить правку</Button>
+          </div>
         </div>
       )}
       {blocker.state === "blocked" && (
-        <div className="confirm" role="alertdialog" ref={confirmRef}>
+        <div className="note-confirm" role="alertdialog" ref={confirmRef}>
           <span>Есть несохранённые правки заметки. Уйти без сохранения?</span>
-          <button className="btn" type="button" onClick={() => blocker.proceed()}>Уйти</button>
-          <button className="btn" type="button" onClick={() => { blocker.reset(); abortClose(); }}>Остаться</button>
+          <div className="row">
+            <Button onClick={() => blocker.proceed()}>Уйти</Button>
+            <Button variant="primary" onClick={() => { blocker.reset(); abortClose(); }}>Остаться</Button>
+          </div>
         </div>
       )}
     </form>
diff --git a/web/src/issues/Notes.tsx b/web/src/issues/Notes.tsx
index bd8bc78..97d53c8 100644
--- a/web/src/issues/Notes.tsx
+++ b/web/src/issues/Notes.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { IssueDetail, NoteField } from "../api/types.ts";
+import { Button } from "../ui/index.ts";
 import { fmtStamp } from "../board/model/util.ts";
 import { NoteForm } from "./NoteForm.tsx";
 
@@ -15,7 +16,7 @@ export function Notes({ issue }: { issue: IssueDetail }) {
     <section className="note view" aria-labelledby="notes-title">
       <div className="sec-head">
         <h3 id="notes-title">Служебные заметки</h3>
-        <button className="btn sm" type="button" onClick={() => setEditing(true)}>Править</button>
+        <Button onClick={() => setEditing(true)}>Править</Button>
       </div>
       <dl className="fields">
         {ROWS.map(([f, label]) => <div key={f}><dt>{label}</dt><dd>{n?.[f] || "—"}</dd></div>)}
diff --git a/web/src/issues/issues.css b/web/src/issues/issues.css
index 04af075..812ae35 100644
--- a/web/src/issues/issues.css
+++ b/web/src/issues/issues.css
@@ -29,63 +29,92 @@
 .issue-table td.overdue{color:var(--color-status-error);font-weight:600}
 .issues__hint{margin:0;color:var(--color-text-secondary)}
 .issues__more{display:flex;justify-content:center}
-.issue a{color:var(--accent)}
-.issue-head{position:sticky;top:0;z-index:1;background:var(--bg);padding:14px 0 10px;border-bottom:1px solid var(--line);margin-bottom:14px}
-.issue-head .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
-.issue-head .key{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
+/* карточка задачи в окне (design 13, 19): всё через токены */
+.issue{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text-primary)}
+.issue a{color:var(--color-action-primary)}
+.issue a.ui-btn{color:var(--color-text-primary);text-decoration:none}
+.issue .hint{margin:0;font-size:var(--fs-body);color:var(--color-text-secondary)}
+.issue--state{padding-top:var(--space-6)}
+.issue-head{position:sticky;top:0;z-index:1;background:var(--color-bg-surface);padding:var(--space-6) 0 var(--space-4);border-bottom:1px solid var(--color-border-default);margin-bottom:var(--space-5)}
+.issue-head .row1{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
+.issue-head .key{font-family:var(--font-mono);font-size:13px;color:var(--color-text-secondary)}
 .issue-head .spacer{flex:1 1 auto}
-.issue-head h2{margin:6px 0 4px;font-size:20px;line-height:1.3}
-.issue-head .facts{margin:0;color:var(--muted);font-size:14px}
-.issue .overdue{color:var(--p-crit);font-weight:600}
-.issue .close{font-size:18px;line-height:1;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 6px}
-.badge{display:inline-block;font-size:12px;line-height:18px;padding:0 8px;border-radius:9px;background:var(--soft);color:var(--fg);white-space:nowrap}
-.issue .cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
-.issue .side{display:flex;flex-direction:column;gap:16px;min-width:0}
-.issue .side .note{align-self:stretch}   /* .note{align-self:start} — с прежней страницы; в колонке окна — на всю ширину */
-.issue .main{min-width:0}
+.issue-head h2{margin:var(--space-3) 0 var(--space-1);font-size:var(--fs-section);line-height:var(--lh-section);font-weight:700;overflow-wrap:anywhere}
+.issue-head .facts{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);color:var(--color-text-secondary)}
+.issue-head .ui-notice{margin-top:var(--space-3)}
+.issue .cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-6);align-items:start}
+.issue .main{min-width:0;display:flex;flex-direction:column;gap:var(--space-5)}
+.issue .side.ui-panel{min-width:0;display:flex;flex-direction:column;gap:var(--space-4);background:var(--color-bg-subtle)}
+.issue .side>*+*{border-top:1px solid var(--color-border-default);padding-top:var(--space-4)}
 @media (max-width:899.98px){
-  .issue .cols{display:flex;flex-direction:column;align-items:stretch;gap:16px}
-  .issue .side{display:contents}
+  .issue .cols{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4)}
+  .issue .main{display:contents}
+  .issue .side.ui-panel{display:contents}
+  /* на узком экране разделы правой колонки — отдельные панели, заметки идут первыми */
+  .issue .side>*{background:var(--color-bg-subtle);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-4);min-width:0}
+  .issue .side>*+*{border-top:1px solid var(--color-border-default);padding-top:var(--space-4)}
   .issue .side .note{order:-1}
   .issue .side .other{order:1}
   .issue .side .commands{order:2}
 }
-.issue section{margin-bottom:18px}
-.issue h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px}
-.issue .sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
-.issue .group{margin:0 0 10px}
-.issue .group h4{font-size:13px;font-weight:600;margin:0 0 4px}
+.issue section,.issue form{margin:0}
+.issue h3{margin:0;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;color:var(--color-text-primary)}
+.issue .sec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control-h);margin-bottom:var(--space-2)}
+.issue .sec-head .ui-btn--ghost{padding:0 var(--space-2);margin-right:calc(-1*var(--space-2))}
+.issue .sec-head .ui-btn--secondary{padding:0 var(--space-3)}
+.issue .more{padding:0 var(--space-2);margin-left:calc(-1*var(--space-2))}
+.issue .links-sec>h3{margin-bottom:var(--space-2)}
+.issue .group{margin:0 0 var(--space-3)}
+.issue .group:last-child{margin-bottom:0}
+.issue .group h4{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;margin:0 0 var(--space-1);color:var(--color-text-secondary)}
 .issue .links{list-style:none;margin:0;padding:0}
-.issue .links li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:3px 0}
-.issue .links .tag{font-size:12px;color:var(--muted);min-width:76px}
-.issue .links .sum{flex:1 1 200px;min-width:0}
-.issue .links .absent{color:var(--muted);font-style:italic}
-.issue .description{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px;margin:0 0 4px}
-.issue pre.description{white-space:pre-wrap;font:inherit}
+.issue .links li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-1) 0}
+.issue .links li>a{font-family:var(--font-mono);font-size:13px;text-decoration:none}
+.issue .links li>a:hover{text-decoration:underline}
+.issue .links .tag{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary);min-width:76px}
+.issue .links .sum{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
+.issue .links .absent{color:var(--color-text-secondary);font-style:italic}
+.issue .description{background:var(--color-bg-subtle);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:var(--space-3);margin:0 0 var(--space-1);line-height:1.5;overflow-wrap:anywhere}
+.issue pre.description{white-space:pre-wrap;font:inherit;line-height:1.5}
 .issue pre.description.clamped{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;
   /* нижний отступ — рамкой цвета фона: overflow обрезает по краю padding, и в нижнем padding была видна 9-я строка */
-  padding-bottom:0;border-bottom:10px solid var(--panel);box-shadow:0 1px 0 var(--line)}
-.issue .comments>ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+  padding-bottom:0;border-bottom:var(--space-3) solid var(--color-bg-subtle);box-shadow:0 1px 0 var(--color-border-default)}
 .issue div.description.clamped{max-height:12em;overflow:hidden;
   /* рендер: блочное содержимое line-clamp не режет — ограничение высотой ≈ 8 строк (line-height 1.5, design #8, R-5) */
-  padding-bottom:0;border-bottom:10px solid var(--panel);box-shadow:0 1px 0 var(--line)}
-.issue .comments .who{font-size:12px;color:var(--muted);margin-bottom:2px;display:flex;justify-content:space-between;gap:8px}
-.issue .comments .who .link{font-size:12px}
-.issue .comments pre.body{white-space:pre-wrap;font:inherit;margin:0}
-.issue .fields{display:grid;grid-template-columns:1fr;gap:6px;margin:0}
-.issue .fields dt{font-size:12px;color:var(--muted)}
-.issue .fields dd{margin:0;white-space:pre-wrap}
-.issue .commands summary{cursor:pointer;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
-.issue .commands table{margin-top:8px;font-size:13px}
-.note{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;align-self:start}
-.note fieldset{display:contents;border:0;margin:0;padding:0;min-width:0}
-.note label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
-.note input,.note select,.note textarea{font:inherit;font-size:14px;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
-.note .err{color:var(--p-crit)}
-.note .confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+  padding-bottom:0;border-bottom:var(--space-3) solid var(--color-bg-subtle);box-shadow:0 1px 0 var(--color-border-default)}
+.issue .comments>ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
+.issue .comments>ul>li{padding:var(--space-3) 0;border-top:1px solid var(--color-border-default)}
+.issue .comments>ul>li:first-child{border-top:0;padding-top:0}
+.issue .comments .c-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-1);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
+.issue .comments .c-head .ui-btn{margin-block:-8px;padding:0 var(--space-2);margin-right:calc(-1*var(--space-2));font-size:var(--fs-caption)}
+.issue .comments pre.body{white-space:pre-wrap;font:inherit;margin:0;overflow-wrap:anywhere}
+.issue .fields{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:0}
+.issue .fields dt{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
+.issue .fields dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
+.issue .other>h3{margin-bottom:var(--space-2)}
+.issue .commands>h3{margin-bottom:var(--space-2)}
+.issue .commands summary{cursor:pointer;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;border-radius:var(--radius-xs)}
+.issue .commands summary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
+.issue .cmd-wrap{margin-top:var(--space-2);overflow-x:auto}
+.issue .commands table{border-collapse:collapse;font-size:var(--fs-caption);line-height:var(--lh-caption);width:100%}
+.issue .commands th{text-align:left;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}
+.issue .commands th,.issue .commands td{padding:var(--space-1) var(--space-2) var(--space-1) 0;border-bottom:1px solid var(--color-border-default);vertical-align:top}
+/* служебные заметки (design 20) */
+.note{display:flex;flex-direction:column;gap:var(--space-3)}
+.note fieldset{display:flex;flex-direction:column;gap:var(--space-3);border:0;margin:0;padding:0;min-width:0}
+.note .row{gap:var(--space-2)}
+.note .note-confirm{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);font-size:var(--fs-body);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-bg-surface)}
+.note.view .hint{margin-top:var(--space-3);font-size:var(--fs-caption);line-height:var(--lh-caption)}
 
-/* окно карточки задачи (design 13) */
-.issue-modal{width:min(1000px,calc(100vw - 32px));max-width:none;max-height:90vh;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);overflow:auto}
-.issue-modal::backdrop{background:var(--color-overlay)}
-.issue-modal > .issue{padding:0 20px 20px}
-@media (max-width:700px){.issue-modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;border-radius:0}}
+/* окно карточки задачи (design 13): размер и рамка — Dialog size="lg"; прокрутка и шапка — здесь */
+.issue-modal{padding:0}
+.issue-modal > .issue{padding:0 var(--space-6) var(--space-6)}
+@media (max-width:700px){
+  .issue-modal > .issue{padding:0 var(--space-4) var(--space-4)}
+  /* узкий экран: шапка не липкая, «Закрыть» остаётся справа в первой строке, «Открыть в Jira» уходит во вторую */
+  .issue-head{position:static;padding-top:var(--space-4)}
+  .issue-head .spacer{order:1}
+  .issue-head .ui-icon-btn{order:2}
+  .issue-head a.ui-btn{order:3}
+}
+.issue .ui-notice__text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text-primary)}
diff --git a/web/src/ui/Dialog.tsx b/web/src/ui/Dialog.tsx
index 6c09e57..42bdb17 100644
--- a/web/src/ui/Dialog.tsx
+++ b/web/src/ui/Dialog.tsx
@@ -1,14 +1,18 @@
-import { useEffect, useRef, type ReactNode } from "react";
+import { useEffect, useRef, type DialogHTMLAttributes, type ReactNode, type SyntheticEvent } from "react";
 
-// окно: родной <dialog> держит фокус и закрывает фон; Esc — onClose, закрытие по фону — на стороне использующего
-export function Dialog({ label, onClose, size = "md", className, children }: {
-  label: string; onClose(): void; size?: "sm" | "md" | "lg"; className?: string; children: ReactNode;
-}) {
+// окно: родной <dialog> держит фокус и закрывает фон; Esc — onClose, закрытие по фону — на стороне использующего.
+// Остальные атрибуты <dialog> (onCancel, onClick, aria-labelledby …) проходят насквозь и могут переопределить поведение по
+// умолчанию; нативное событие close — onNativeClose (имя onClose занято запросом закрытия).
+type Rest = Omit<DialogHTMLAttributes<HTMLDialogElement>, "className" | "children" | "onClose" | "aria-label">;
+export function Dialog({ label, onClose, onNativeClose, size = "md", className, children, ...rest }: {
+  label: string; onClose(): void; onNativeClose?(e: SyntheticEvent<HTMLDialogElement>): void;
+  size?: "sm" | "md" | "lg"; className?: string; children: ReactNode;
+} & Rest) {
   const ref = useRef<HTMLDialogElement>(null);
   useEffect(() => { const d = ref.current; if (d && !d.open) d.showModal(); }, []);
   return (
     <dialog ref={ref} className={["ui-dialog", `ui-dialog--${size}`, className].filter(Boolean).join(" ")} aria-label={label}
-      onCancel={(e) => { e.preventDefault(); onClose(); }}>
+      onCancel={(e) => { e.preventDefault(); onClose(); }} {...rest} onClose={onNativeClose}>
       {children}
     </dialog>
   );
-- 
2.47.2


From 047835b2231aba9b84b3d4e5e9fd0304569c785a Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:06:17 +0400
Subject: [PATCH 16/23] =?UTF-8?q?=D0=A1=D0=BF=D0=B5=D0=BA=D0=B0:=20=D1=80?=
 =?UTF-8?q?=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=2017=20=E2=80=94=20=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B0=20=D0=B7=D0=B0=D0=B4?=
 =?UTF-8?q?=D0=B0=D1=87=D0=B8,=20Dialog,=20=D0=BA=D0=BB=D0=B0=D1=81=D1=81?=
 =?UTF-8?q?=D1=8B=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 openspec/changes/redesign/design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/openspec/changes/redesign/design.md b/openspec/changes/redesign/design.md
index a961944..f869839 100644
--- a/openspec/changes/redesign/design.md
+++ b/openspec/changes/redesign/design.md
@@ -191,3 +191,4 @@
 | 14 | 22.10.2026 | Задача 4: регресс T4.1 (счётчик `skipPickup` не уменьшается при ошибке перечитывания) чинится в Задаче 5, без отдельного раунда ревью; в Задаче 4 пропуск подхвата сделан счётчиком вместо флага, подхват коалесцируется, тоны `refreshText`: error для batch-lost/failed/hub-down/error, warning для cancelled | регресс мелкий и в том же модуле, что правится в Задаче 5 | низкая: один пропущенный подхват чужого пакета до следующей загрузки снимка |
 | 15 | 22.10.2026 | Задача 5: высота верхней панели `min-height: 64` (не фиксированная), чтобы вторая строка данных переносилась при ширине <1100 px; панель не sticky | перенос без обрезки | низкая: заменить на фиксированную высоту и скролл строки |
 | 16 | 22.10.2026 | Задача 8: ниже 1100 px таблица списка прокручивается по горизонтали внутри панели, шапка таблицы там не липкая; от 1100 px липкая | overflow на предке отключает `position: sticky`; широкая таблица на узком экране важнее липкой шапки | низкая: на узком экране шапку не видно при прокрутке вниз |
+| 17 | 22.10.2026 | Задача 9: в окне карточки текст `Notice` 14 px основным цветом (локальный оверрайд `.issue .ui-notice__text`, общий компонент не тронут); `ui/Dialog` пропускает остальные атрибуты `<dialog>` и принимает `onNativeClose`; классы `.who` → `c-head`, `.confirm` → `note-confirm` из-за протечки глобальных правил `board.css`/`controls.css` | 12 px вторичным плохо читается на фоне ошибки; `IssueModal` сохраняет прежнюю логику закрытия | низкая: вернуть размер текста / переименовать классы |
-- 
2.47.2


From 2a472cacbfb52c8c746251f48fe73f5d3136214b Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:19:09 +0400
Subject: [PATCH 17/23] =?UTF-8?q?style(web):=20=D0=B2=D1=85=D0=BE=D0=B4,?=
 =?UTF-8?q?=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B9=20=D0=BF=D1=80=D0=BE=D0=B5?=
 =?UTF-8?q?=D0=BA=D1=82,=20=D1=81=D0=BB=D1=83=D0=B6=D0=B5=D0=B1=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D1=8B;=20=D1=81?=
 =?UTF-8?q?=D1=82=D0=B0=D1=80=D1=8B=D0=B5=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?=
 =?UTF-8?q?=20=D1=83=D0=B1=D1=80=D0=B0=D0=BD=D1=8B=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Экраны входа, «Новый проект», ProjectGate, «не найдено» и ошибка отрисовки
переведены на компоненты системы. controls.css удалён, псевдонимы токенов
убраны, глобальные .row/.spacer/.hint/.warn/.login разобраны. Разделы в
верхней панели не активны вне доски и задач. Тонкая настройка дорожек доски,
тест на ошибку списка, стабилизирован тест проектов.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 ARCHITECTURE.md                        |  5 ++++
 web/src/App.test.tsx                   |  8 +++---
 web/src/App.tsx                        |  1 -
 web/src/auth/LoginScreen.test.tsx      |  3 ++-
 web/src/auth/LoginScreen.tsx           | 24 +++++++++++-------
 web/src/auth/login.css                 |  9 +++++++
 web/src/board/board.css                | 17 ++++---------
 web/src/board/components/ExportBox.tsx |  4 +--
 web/src/board/components/Lane.tsx      |  4 +--
 web/src/issues/IssueFilters.tsx        |  2 +-
 web/src/issues/IssuesPage.test.tsx     | 19 ++++++++++++++
 web/src/issues/issues.css              | 10 ++++----
 web/src/issues/wiki/wiki.css           | 14 +++++------
 web/src/projects/NewProjectDialog.tsx  | 34 ++++++++++++-------------
 web/src/projects/ProjectGate.tsx       | 13 ++++++----
 web/src/projects/projects.css          | 17 ++++++-------
 web/src/projects/projects.test.tsx     |  3 ++-
 web/src/shell/AppBar.test.tsx          | 13 ++++++++++
 web/src/shell/AppBar.tsx               |  4 +--
 web/src/shell/ErrorBoundary.tsx        | 10 +++++---
 web/src/shell/Layout.tsx               |  6 ++---
 web/src/shell/NotFound.tsx             |  6 +++--
 web/src/shell/shell.css                |  1 +
 web/src/styles/base.css                |  5 ----
 web/src/styles/controls.css            | 35 --------------------------
 web/src/styles/tokens.css              | 10 +++-----
 web/src/ui/Segmented.tsx               |  2 +-
 web/src/ui/icons.tsx                   |  1 +
 web/src/ui/ui.css                      | 20 ++++++++++++++-
 29 files changed, 163 insertions(+), 137 deletions(-)
 create mode 100644 web/src/auth/login.css
 delete mode 100644 web/src/styles/controls.css

diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 4292119..a65633a 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -30,6 +30,11 @@
 `/app/board`. Данные — только через HTTP API с клиентским токеном; `mirror.board` отдаёт зеркало без преобразований,
 перевод в модель доски — в `web/src/board/model`. Логика доски — чистые модули `web/src/board/{model,analysis,layout}`
 и `storage.ts` (ключи `localStorage` прежней страницы; у проекта AWPCA — прежние, у остальных с суффиксом `@<метка>`; набор ключей — состояние модуля, выставляется при монтировании страницы), отрисовка — `web/src/board/components`.
+Вид — дизайн-система AURA: токены цвета, шрифта, отступов и теней (светлая и тёмная темы) — `web/src/styles/tokens.css`,
+единственное место с литералами цвета; базовые компоненты (`Button`, `Notice`, `Dialog`, `Field`, `Panel`, меню и др.) —
+`web/src/ui/`, остальные стили подключаются к токенам по семантическим именам. Обновление данных из Jira (кнопка в
+верхней панели, отслеживание пакета) — `web/src/shell/refresh.ts` (провайдер в `App.tsx`); доска отдаёт наружу только
+источник и события снимка.
 
 Цепочки: `api → queue → commands/mirror/settings/projects → db`; `db → projects` (только миграция, ленивый импорт); `projects → settings`; `db → backup → paths`, `db → paths`; `files → paths`; `api → relay → settings`; `mcp_server → client → HTTP API`; `importer → mirror/settings`.
 
diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx
index 611e12c..6e08d5b 100644
--- a/web/src/App.test.tsx
+++ b/web/src/App.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { createMemoryRouter } from "react-router";
 import { beforeEach, describe, expect, it } from "vitest";
@@ -36,8 +36,9 @@ describe("оболочка", () => {
   it("неизвестный путь — «не найдено» со ссылками", async () => {
     render(<App router={at("/app/nope")} />);
     expect(await screen.findByRole("heading", { name: "Страница не найдена" })).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "доска" })).toHaveAttribute("href", "/app/board");
-    expect(screen.getByRole("link", { name: "задачи" })).toHaveAttribute("href", "/app/issues");
+    const main = within(screen.getByRole("main"));
+    expect(main.getByRole("link", { name: "Доска связей" })).toHaveAttribute("href", "/app/board");
+    expect(main.getByRole("link", { name: "Задачи" })).toHaveAttribute("href", "/app/issues");
   });
 
   it("«Сменить токен» показывает экран входа", async () => {
@@ -57,6 +58,7 @@ describe("оболочка", () => {
       render(<App router={router} />);
       expect(await screen.findByText(/сломалось/)).toBeInTheDocument();
       expect(screen.getByRole("button", { name: "Перезагрузить" })).toBeInTheDocument();
+      expect(screen.getAllByRole("alert")).toHaveLength(1);
       expect(screen.getByRole("link", { name: "Доска связей" })).toBeInTheDocument();
     } finally { PAGE_ROUTES.splice(PAGE_ROUTES.indexOf(boom), 1); }
   });
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 34645c9..cb4bce8 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -7,7 +7,6 @@ import { RefreshProvider } from "./shell/RefreshProvider.tsx";
 import { routes } from "./routes.tsx";
 import "./styles/tokens.css";
 import "./styles/base.css";
-import "./styles/controls.css";
 
 type Router = ReturnType<typeof createBrowserRouter>;
 
diff --git a/web/src/auth/LoginScreen.test.tsx b/web/src/auth/LoginScreen.test.tsx
index edec09a..f082226 100644
--- a/web/src/auth/LoginScreen.test.tsx
+++ b/web/src/auth/LoginScreen.test.tsx
@@ -19,6 +19,7 @@ describe("вход", () => {
     expect(screen.getByRole("heading", { name: "Вход в хаб" })).toBeInTheDocument();
     expect(screen.queryByText("страница приложения")).not.toBeInTheDocument();
     expect(screen.getByText(/uv run jira-hub tokens/)).toBeInTheDocument();
+    expect(screen.getByLabelText("Клиентский токен хаба")).toHaveAttribute("type", "password");
   });
 
   it("верный токен сохраняется и открывает приложение", async () => {
@@ -37,7 +38,7 @@ describe("вход", () => {
     const input = screen.getByLabelText("Клиентский токен хаба");
     await userEvent.type(input, "wrong");
     await userEvent.click(screen.getByRole("button", { name: "Войти" }));
-    expect(await screen.findByText(/Токен не подошёл/)).toBeInTheDocument();
+    expect(await screen.findByRole("alert")).toHaveTextContent(/Токен не подошёл/);
     expect(input).toHaveValue("wrong");
     expect(localStorage.getItem("jira-hub-token")).toBeNull();
   });
diff --git a/web/src/auth/LoginScreen.tsx b/web/src/auth/LoginScreen.tsx
index c8c3553..eb1c29a 100644
--- a/web/src/auth/LoginScreen.tsx
+++ b/web/src/auth/LoginScreen.tsx
@@ -1,8 +1,10 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useState, type FormEvent } from "react";
 import { ApiError, AuthError, checkToken } from "../api/client.ts";
+import { Button, Field, Notice, Panel, TextInput } from "../ui/index.ts";
 import { setToken, TOKEN_RE } from "./token.ts";
 import { useAuth } from "./useAuth.ts";
+import "./login.css";
 
 const BAD_TOKEN = "Токен не подошёл. Проверьте его по uv run jira-hub tokens: токен могли пересоздать.";
 const BAD_CHARS = "В токене недопустимые символы: скопируйте строку после «клиентский токен:» целиком, без пробелов и кириллицы.";
@@ -36,15 +38,19 @@ export function LoginScreen() {
 
   return (
     <div className="login">
-      <h2>Вход в хаб</h2>
-      <p>Приложению нужен клиентский токен хаба. Его показывает команда <code>uv run jira-hub tokens</code> в каталоге
-        jira-hub на этом Mac. Токен сохранится в этом браузере.</p>
-      {error && <p className="err" role="alert">{error}</p>}
-      <form onSubmit={submit}>
-        <input type="password" autoComplete="off" spellCheck={false} aria-label="Клиентский токен хаба"
-          placeholder="клиентский токен" value={value} onChange={(e) => setValue(e.target.value)} />
-        <button className="btn" type="submit" disabled={busy}>Войти</button>
-      </form>
+      <Panel padding="lg" className="login__panel">
+        <h2 className="login__title">Вход в хаб</h2>
+        <p className="login__text">Приложению нужен клиентский токен хаба. Его показывает команда <code>uv run jira-hub tokens</code> в каталоге
+          jira-hub на этом Mac. Токен сохранится в этом браузере.</p>
+        {error && <Notice tone="error">{error}</Notice>}
+        <form className="login__form" onSubmit={submit}>
+          <Field label="Клиентский токен хаба">
+            <TextInput size="lg" type="password" autoComplete="off" spellCheck={false}
+              placeholder="клиентский токен" value={value} onChange={(e) => setValue(e.target.value)} />
+          </Field>
+          <Button variant="primary" size="lg" type="submit" loading={busy}>Войти</Button>
+        </form>
+      </Panel>
     </div>
   );
 }
diff --git a/web/src/auth/login.css b/web/src/auth/login.css
new file mode 100644
index 0000000..023dfdc
--- /dev/null
+++ b/web/src/auth/login.css
@@ -0,0 +1,9 @@
+/* экран входа: Panel 480 px по центру канвы (design.md, решение 20) */
+.login { display: flex; justify-content: center; padding: 64px var(--space-4) var(--space-8); }
+.login__panel { box-sizing: border-box; width: min(480px, 100%); display: flex; flex-direction: column; gap: var(--space-4); }
+.login__title { margin: 0; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; color: var(--color-text-primary); }
+.login__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-secondary); }
+.login__text code { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--color-text-primary); }
+.login__form { display: flex; flex-direction: column; gap: var(--space-4); }
+.login__form .ui-btn { align-self: stretch; }
+@media (max-width: 639px) { .login { padding-top: var(--space-6); } }
diff --git a/web/src/board/board.css b/web/src/board/board.css
index b1c6658..894231a 100644
--- a/web/src/board/board.css
+++ b/web/src/board/board.css
@@ -49,17 +49,9 @@ svg.guides{z-index:3}
 svg.guides line{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
 .empty{padding:40px 16px;color:var(--color-text-secondary);text-align:center}
 #hubState{white-space:normal;min-width:0}
-.login{max-width:560px;margin:48px auto;padding:20px 24px;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-xl)}
-.login h2{margin:0 0 8px;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:700}
-.login p{margin:0 0 12px;font-size:var(--fs-body);color:var(--color-text-secondary)}
-.login p.err{color:var(--color-status-error)}
-.login code{font-family:var(--font-mono);font-size:13px;color:var(--color-text-primary)}
-.login form{display:flex;gap:8px;margin:0 0 12px}
-.login input{flex:1;min-width:0;font:inherit;font-size:var(--fs-body);height:var(--control-h);box-sizing:border-box;padding:0 10px;color:var(--color-text-primary);background:var(--color-bg-canvas);border:1px solid var(--color-border-default);border-radius:var(--radius-sm)}
-.login input:focus-visible{border-color:var(--color-border-selected);outline:none}
 .lane{position:absolute;left:0;right:0;border-top:1px solid var(--color-border-default)}
 .lane:nth-child(even of .lane){background:var(--lane-alt)}
-.lane.folded{background:var(--color-bg-hover)}
+.lane.folded{background:var(--color-bg-track);border-bottom:1px solid var(--color-border-strong);border-top-color:var(--color-border-strong)}
 .lane.target{box-shadow:inset 0 3px 0 var(--color-action-primary)}
 .lane.target-after{box-shadow:inset 0 -3px 0 var(--color-action-primary)}
 .lane.dragging{opacity:.6}
@@ -78,7 +70,6 @@ svg.guides line{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
 .lane-tools button{display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-secondary);background:var(--color-bg-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-xs);width:22px;height:22px;cursor:pointer;padding:0}
 .lane-tools button:hover{border-color:var(--color-action-primary);color:var(--color-action-primary)}
 .lane-tools button:disabled{opacity:.35;cursor:default}
-.lane-tools .up svg{transform:rotate(180deg)}
 /* режим «по датам»: колонки по плановым датам окончания, шапка колонки над дорожками; карточки двигаются внутри своей колонки */
 .dcol{position:absolute;top:0;border-left:1px solid var(--color-border-default);box-sizing:border-box;pointer-events:none}
 .dcol:first-of-type{border-left:0}
@@ -128,7 +119,7 @@ svg.guides line{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
 .card .rsz{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--color-border-strong) 50%);border-bottom-right-radius:11px;z-index:2}
 .card:hover .rsz{background:linear-gradient(135deg,transparent 50%,var(--color-action-primary) 50%)}
 .head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
-.key{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--color-action-primary);text-decoration:none;flex:0 0 auto}
+.card .key{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--color-action-primary);text-decoration:none;flex:0 0 auto}
 .sprint-tag{font-size:11px;line-height:1;padding:4px 7px;border-radius:var(--radius-round);background:var(--color-bg-track);color:var(--color-text-secondary);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
 .sprint-tag.sel{background:var(--color-action-primary);color:var(--color-text-on-primary)}
 .sprint-tag.none{background:transparent;border:1px dashed var(--color-border-strong)}
@@ -163,6 +154,8 @@ svg.guides line{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
 
 /* 8. Экспорт JSON и таблица связей (включаются из меню «Ещё») */
 .export{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-2)}
+.export__row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
+.export__hint{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
 .export textarea{font-family:var(--font-mono);font-size:11.5px;width:100%;box-sizing:border-box;height:180px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-bg-surface);color:var(--color-text-primary);padding:8px;resize:vertical}
 .link-table{margin-top:var(--space-3)}
 .tbl{max-width:100%;overflow-x:auto;margin-top:var(--space-2)}
@@ -173,7 +166,7 @@ td.k{font-family:var(--font-mono);font-size:12px;white-space:nowrap;color:var(--
 
 /* 9. Движение и узкие экраны */
 @media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s}}
-@media (prefers-reduced-motion:reduce){.card .grip,.fold::before{transition:none}}
+@media (prefers-reduced-motion:reduce){.card .grip,.fold svg{transition:none}}
 @media (max-width:900px){.stage{flex-direction:column}.drawer{flex:none;max-width:100%;max-height:none;position:static}}
 @media (max-width:640px){.sticky{position:static}.dates-bar{position:static}}
 
diff --git a/web/src/board/components/ExportBox.tsx b/web/src/board/components/ExportBox.tsx
index 9e9a731..eb1e071 100644
--- a/web/src/board/components/ExportBox.tsx
+++ b/web/src/board/components/ExportBox.tsx
@@ -10,8 +10,8 @@ export function ExportBox({ text, onClose }: { text: string; onClose(): void })
   let ta: HTMLTextAreaElement | null = null;
   return (
     <Panel className="export">
-      <div className="row">
-        <span className="hint">JSON доски: все задачи, связи, раскладка, дорожки и фильтры. Загружается обратно пунктом «Загрузить файл…» в меню «Ещё». Если файл не скачался, скопируйте текст.</span>
+      <div className="export__row">
+        <span className="export__hint">JSON доски: все задачи, связи, раскладка, дорожки и фильтры. Загружается обратно пунктом «Загрузить файл…» в меню «Ещё». Если файл не скачался, скопируйте текст.</span>
         <Button onClick={() => void copy(ta)}>{copied ? "Скопировано" : "Копировать"}</Button>
         <Button onClick={onClose}>Закрыть</Button>
       </div>
diff --git a/web/src/board/components/Lane.tsx b/web/src/board/components/Lane.tsx
index 40d5895..e9711f8 100644
--- a/web/src/board/components/Lane.tsx
+++ b/web/src/board/components/Lane.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState, type PointerEvent } from "react";
-import { IconChevronDown } from "../../ui/icons.tsx";
+import { IconChevronDown, IconChevronUp } from "../../ui/icons.tsx";
 import type { LaneGeom } from "../layout/layout.ts";
 import { plural } from "../model/util.ts";
 
@@ -44,7 +44,7 @@ export function Lane({ g, index, last, count, lanes, boardTop, targetClass, onTo
         <span ref={nameRef} className="lane-name" title="Перетащить, чтобы поменять дорожки местами" onPointerDown={down}>{g.name}</span>
         <span className="lane-count">{plural(count, "задача", "задачи", "задач")}</span>
         <span className="lane-tools">
-          <button type="button" className="up" title="Выше" disabled={index === 0} onClick={() => onMove(g.name, index - 1)}><IconChevronDown size={16} /></button>
+          <button type="button" title="Выше" disabled={index === 0} onClick={() => onMove(g.name, index - 1)}><IconChevronUp size={16} /></button>
           <button type="button" title="Ниже" disabled={index === last} onClick={() => onMove(g.name, index + 1)}><IconChevronDown size={16} /></button>
         </span>
       </div>
diff --git a/web/src/issues/IssueFilters.tsx b/web/src/issues/IssueFilters.tsx
index d1a9594..a544973 100644
--- a/web/src/issues/IssueFilters.tsx
+++ b/web/src/issues/IssueFilters.tsx
@@ -19,7 +19,7 @@ export function IssueFilters({ filters, set, onReset, q, setQ, showClosed, opts,
   q: string; setQ(v: string): void; showClosed: boolean; opts: Record<Name, Opt[]>; hasBoard: boolean;
 }) {
   const [open, setOpen] = useState(readOpen);
-  const toggle = () => setOpen((o) => { saveOpen(!o); return !o; });
+  const toggle = () => { saveOpen(!open); setOpen(!open); };   // T8.1: запись в хранилище вне функции-обновителя
   const labelOf = (name: Name, value: string) => opts[name].find((o) => o.value === value)?.label ?? value;
   const chosen = SELECTS.filter(([n]) => filters[n]);
   return (
diff --git a/web/src/issues/IssuesPage.test.tsx b/web/src/issues/IssuesPage.test.tsx
index b4d6d25..0781803 100644
--- a/web/src/issues/IssuesPage.test.tsx
+++ b/web/src/issues/IssuesPage.test.tsx
@@ -51,6 +51,25 @@ describe("список задач", () => {
     await waitFor(() => expect(issuesCalls(fetch).at(-1)!.searchParams.get("assignee")).toBe("Петров Пётр Петрович"));
   });
 
+  it("ошибка списка — сообщение хаба и «Повторить», повтор перезапрашивает список (T8.4)", async () => {
+    let fail = true;
+    const fetch = mockFetch((_m, url) => {
+      if (url.pathname === "/settings") return json(200, settings);
+      if (url.pathname === "/board") return json(200, SNAP);
+      if (url.pathname === "/issues") return fail ? json(500, { error: "boom" }) : json(200, { issues: [row(1)] });
+      return json(404, {});
+    });
+    renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
+    const alert = await screen.findByRole("alert");
+    expect(alert).toHaveTextContent("хаб ответил 500");
+    expect(screen.queryByText("По этим фильтрам задач нет")).toBeNull();
+    fail = false;
+    await userEvent.click(within(alert).getByRole("button", { name: "Повторить" }));
+    expect(await screen.findByRole("link", { name: "AURORA-9001" })).toBeInTheDocument();
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(issuesCalls(fetch)).toHaveLength(2);
+  });
+
   it("«Показать ещё» до неполной порции", async () => {
     const fetch = hub((p) => (p.get("offset") === "0" ? Array.from({ length: 50 }, (_, i) => row(i + 1)) : Array.from({ length: 17 }, (_, i) => row(i + 51))));
     renderWithProviders(<IssuesPage project="AWPCA" />, { route: "/issues", path: "/issues" });
diff --git a/web/src/issues/issues.css b/web/src/issues/issues.css
index 812ae35..6b59e4a 100644
--- a/web/src/issues/issues.css
+++ b/web/src/issues/issues.css
@@ -37,7 +37,7 @@
 .issue--state{padding-top:var(--space-6)}
 .issue-head{position:sticky;top:0;z-index:1;background:var(--color-bg-surface);padding:var(--space-6) 0 var(--space-4);border-bottom:1px solid var(--color-border-default);margin-bottom:var(--space-5)}
 .issue-head .row1{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
-.issue-head .key{font-family:var(--font-mono);font-size:13px;color:var(--color-text-secondary)}
+.issue-head .key{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--color-text-secondary)}
 .issue-head .spacer{flex:1 1 auto}
 .issue-head h2{margin:var(--space-3) 0 var(--space-1);font-size:var(--fs-section);line-height:var(--lh-section);font-weight:700;overflow-wrap:anywhere}
 .issue-head .facts{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);color:var(--color-text-secondary)}
@@ -85,8 +85,8 @@
 .issue .comments>ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
 .issue .comments>ul>li{padding:var(--space-3) 0;border-top:1px solid var(--color-border-default)}
 .issue .comments>ul>li:first-child{border-top:0;padding-top:0}
-.issue .comments .c-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-1);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
-.issue .comments .c-head .ui-btn{margin-block:-8px;padding:0 var(--space-2);margin-right:calc(-1*var(--space-2));font-size:var(--fs-caption)}
+.issue .comments .c-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control-h);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
+.issue .comments .c-head .ui-btn{padding:0 var(--space-2);margin-right:calc(-1*var(--space-2));font-size:var(--fs-caption)}
 .issue .comments pre.body{white-space:pre-wrap;font:inherit;margin:0;overflow-wrap:anywhere}
 .issue .fields{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:0}
 .issue .fields dt{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
@@ -102,12 +102,12 @@
 /* служебные заметки (design 20) */
 .note{display:flex;flex-direction:column;gap:var(--space-3)}
 .note fieldset{display:flex;flex-direction:column;gap:var(--space-3);border:0;margin:0;padding:0;min-width:0}
-.note .row{gap:var(--space-2)}
+.note .row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
 .note .note-confirm{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);font-size:var(--fs-body);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-bg-surface)}
 .note.view .hint{margin-top:var(--space-3);font-size:var(--fs-caption);line-height:var(--lh-caption)}
 
 /* окно карточки задачи (design 13): размер и рамка — Dialog size="lg"; прокрутка и шапка — здесь */
-.issue-modal{padding:0}
+.ui-dialog.issue-modal{padding:0}
 .issue-modal > .issue{padding:0 var(--space-6) var(--space-6)}
 @media (max-width:700px){
   .issue-modal > .issue{padding:0 var(--space-4) var(--space-4)}
diff --git a/web/src/issues/wiki/wiki.css b/web/src/issues/wiki/wiki.css
index 133d5d5..b6b9699 100644
--- a/web/src/issues/wiki/wiki.css
+++ b/web/src/issues/wiki/wiki.css
@@ -10,13 +10,13 @@ div.wiki :is(h5,h6){font-size:13px}
 div.wiki :is(ul,ol){margin:0 0 6px;padding-left:22px}
 div.wiki li>:is(ul,ol){margin:2px 0 0}
 div.wiki table{display:block;max-width:100%;min-width:0;overflow-x:auto;border-collapse:collapse;margin:0 0 6px;font-size:13px}
-div.wiki :is(th,td){border:1px solid var(--line);padding:3px 8px;text-align:left;vertical-align:top;overflow-wrap:break-word}
+div.wiki :is(th,td){border:1px solid var(--color-border-default);padding:3px 8px;text-align:left;vertical-align:top;overflow-wrap:break-word}
 /* глобальные table/th из board.css (min-width 520px, прописные 11px) здесь не действуют (I-1) */
-div.wiki th{background:var(--soft);font-weight:600;font-size:inherit;text-transform:none;letter-spacing:normal;color:inherit}
+div.wiki th{background:var(--color-bg-hover);font-weight:600;font-size:inherit;text-transform:none;letter-spacing:normal;color:inherit}
 div.wiki code,div.wiki pre{font-family:var(--font-mono);font-size:12.5px}
-div.wiki code{background:var(--soft);border-radius:3px;padding:0 3px}
-div.wiki pre{background:var(--soft);border-radius:4px;padding:6px 8px;margin:0 0 6px;overflow-x:auto;white-space:pre;overflow-wrap:normal}
-div.wiki blockquote{margin:0 0 6px;padding:0 0 0 10px;border-left:3px solid var(--line);color:var(--muted)}
-div.wiki hr{border:0;border-top:1px solid var(--line);margin:8px 0}
-div.wiki .mention{color:var(--accent)}
+div.wiki code{background:var(--color-bg-hover);border:1px solid var(--color-border-default);border-radius:var(--radius-xs);padding:0 3px}
+div.wiki pre{background:var(--color-bg-hover);border:1px solid var(--color-border-default);border-radius:var(--radius-sm);padding:6px 8px;margin:0 0 6px;overflow-x:auto;white-space:pre;overflow-wrap:normal}
+div.wiki blockquote{margin:0 0 6px;padding:0 0 0 10px;border-left:3px solid var(--color-border-default);color:var(--color-text-secondary)}
+div.wiki hr{border:0;border-top:1px solid var(--color-border-default);margin:8px 0}
+div.wiki .mention{color:var(--color-action-primary)}
 pre.wiki-source{white-space:pre-wrap;font:inherit;margin:0}
diff --git a/web/src/projects/NewProjectDialog.tsx b/web/src/projects/NewProjectDialog.tsx
index 1c3b955..a215548 100644
--- a/web/src/projects/NewProjectDialog.tsx
+++ b/web/src/projects/NewProjectDialog.tsx
@@ -1,15 +1,14 @@
-import { useEffect, useRef, useState, type FormEvent } from "react";
+import { useState, type FormEvent } from "react";
 import { ApiError } from "../api/client.ts";
 import { useCreateProject } from "../api/queries.ts";
 import type { Project } from "../api/types.ts";
+import { Button, Dialog, Field, Notice, TextInput } from "../ui/index.ts";
 import "./projects.css";
 
-// окно «Новый проект» (как IssueModal): <dialog> держит фокус; Esc и «Отмена» — onClose, ошибка хаба — рядом с «Создать»
+// окно «Новый проект» (как IssueModal): <dialog> держит фокус; Esc и «Отмена» — onClose, ошибка хаба — над кнопками
 export function NewProjectDialog({ onClose, onCreated }: { onClose(): void; onCreated(p: Project, batchId: number): void }) {
-  const ref = useRef<HTMLDialogElement>(null);
   const [label, setLabel] = useState(""), [name, setName] = useState(""), [board, setBoard] = useState("");
   const create = useCreateProject();
-  useEffect(() => { const d = ref.current; if (d && !d.open) d.showModal(); }, []);
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
@@ -21,21 +20,20 @@ export function NewProjectDialog({ onClose, onCreated }: { onClose(): void; onCr
   const text = err ? (err instanceof ApiError ? err.detail ?? err.message : err.message) : null;
 
   return (
-    <dialog ref={ref} className="project-dialog" aria-label="Новый проект"
-      onCancel={(e) => { e.preventDefault(); if (!create.isPending) onClose(); }}>
-      <form onSubmit={submit}>
-        <h2>Новый проект</h2>
-        <label>Метка<input value={label} onChange={(e) => setLabel(e.target.value)} required /></label>
-        <label>Название<input value={name} onChange={(e) => setName(e.target.value)} required /></label>
-        <label>Номер доски Jira
-          <input type="number" min={1} value={board} onChange={(e) => setBoard(e.target.value)} placeholder="scrum или kanban определится сам" />
-        </label>
-        <div className="actions">
-          <button className="btn" type="submit" disabled={create.isPending}>Создать</button>
-          <button className="btn" type="button" onClick={onClose} disabled={create.isPending}>Отмена</button>
-          {text && <span className="warn" role="alert">{text}</span>}
+    <Dialog size="sm" label="Новый проект" className="project-dialog" onClose={() => { if (!create.isPending) onClose(); }}>
+      <form className="project-form" onSubmit={submit}>
+        <h2 className="project-form__title">Новый проект</h2>
+        <Field label="Метка"><TextInput value={label} onChange={(e) => setLabel(e.target.value)} required /></Field>
+        <Field label="Название"><TextInput value={name} onChange={(e) => setName(e.target.value)} required /></Field>
+        <Field label="Номер доски Jira">
+          <TextInput type="number" min={1} value={board} onChange={(e) => setBoard(e.target.value)} placeholder="scrum или kanban определится сам" />
+        </Field>
+        {text && <Notice tone="error">{text}</Notice>}
+        <div className="project-form__actions">
+          <Button variant="secondary" disabled={create.isPending} onClick={onClose}>Отмена</Button>
+          <Button variant="primary" type="submit" loading={create.isPending}>Создать</Button>
         </div>
       </form>
-    </dialog>
+    </Dialog>
   );
 }
diff --git a/web/src/projects/ProjectGate.tsx b/web/src/projects/ProjectGate.tsx
index 3f6eb87..4c02fce 100644
--- a/web/src/projects/ProjectGate.tsx
+++ b/web/src/projects/ProjectGate.tsx
@@ -1,18 +1,21 @@
 import type { ReactNode } from "react";
 import type { Project } from "../api/types.ts";
+import { Button, Notice } from "../ui/index.ts";
 import { useProjectContext } from "./ProjectContext.ts";
+import "./projects.css";
 
 // страница доски/списка показывается, только когда текущий проект определён; иначе — причина и что делать
 export function ProjectGate({ children }: { children: (p: Project) => ReactNode }) {
   const { state, openNew } = useProjectContext();
   switch (state.kind) {
-    case "loading": return <p className="hint">Загрузка проектов…</p>;
-    case "error": return <p className="warn" role="alert">Проекты не загрузились: {state.error.message}</p>;
+    case "loading": return <div className="project-gate"><Notice tone="info">Загрузка проектов…</Notice></div>;
+    case "error": return <div className="project-gate"><Notice tone="error">Проекты не загрузились: {state.error.message}</Notice></div>;
     case "unknown":
-      return <div className="project-gate" data-testid="project-unknown"><p className="warn">проект {state.label} не найден</p><p className="hint">Выберите проект в списке «Проект» вверху.</p></div>;
+      return <div className="project-gate" data-testid="project-unknown">
+        <Notice tone="warning" title={`проект ${state.label} не найден`}>Выберите проект в списке «Проект» вверху.</Notice></div>;
     case "none":
-      return <div className="project-gate"><p className="hint">Проектов нет.</p>
-        <button className="btn" type="button" onClick={openNew}>＋ Новый проект…</button></div>;
+      return <div className="project-gate">
+        <Notice tone="info" title="Проектов нет." action={<Button variant="primary" onClick={openNew}>＋ Новый проект…</Button>} /></div>;
     case "ok": return <>{children(state.project)}</>;
   }
 }
diff --git a/web/src/projects/projects.css b/web/src/projects/projects.css
index 51cb6b9..8870ab4 100644
--- a/web/src/projects/projects.css
+++ b/web/src/projects/projects.css
@@ -1,10 +1,7 @@
-/* выбор проекта и окно «Новый проект» */
-.appbar .project-picker{max-width:280px;min-width:160px}
-.project-gate{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin:24px 0}
-.project-dialog{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);padding:16px 20px;min-width:340px}
-.project-dialog::backdrop{background:var(--color-overlay)}
-.project-dialog form{display:flex;flex-direction:column;gap:10px}
-.project-dialog h2{margin:0 0 4px;font-size:18px}
-.project-dialog label{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
-.project-dialog input{font:inherit;font-size:14px;height:32px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);padding:0 8px}
-.project-dialog .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+/* выбор проекта, служебные состояния выбора и окно «Новый проект» */
+.appbar .project-picker { max-width: 280px; min-width: 160px; }
+.project-gate { max-width: 640px; margin: var(--space-6) 0; }
+.project-gate .ui-notice { align-items: center; }
+.project-form { display: flex; flex-direction: column; gap: var(--space-4); }
+.project-form__title { margin: 0; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 700; color: var(--color-text-primary); }
+.project-form__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
diff --git a/web/src/projects/projects.test.tsx b/web/src/projects/projects.test.tsx
index 546e7b6..081d404 100644
--- a/web/src/projects/projects.test.tsx
+++ b/web/src/projects/projects.test.tsx
@@ -83,6 +83,7 @@ describe("проект в приложении", () => {
     const h = hub();
     open("/app/issues?project=NOPE");
     expect(await screen.findByText(/проект NOPE не найден/)).toBeInTheDocument();
+    expect(screen.getByTestId("project-unknown")).toHaveTextContent("Выберите проект в списке «Проект» вверху.");
     expect(screen.getByRole("combobox", { name: "Проект" })).toBeInTheDocument();
     expect(h.get("/issues")).toHaveLength(0);
   });
@@ -161,7 +162,7 @@ describe("проект в приложении", () => {
     await userEvent.click(within(dlg).getByRole("button", { name: "Создать" }));   // инвалидация: повторный GET /projects падает
     await waitFor(() => expect(router.state.location.search).toBe("?project=STOCKS_DRRK"));
     expect(h.get("/projects").length).toBeGreaterThan(1);
-    expect(screen.getByRole("combobox", { name: "Проект" })).toHaveValue("STOCKS_DRRK");
+    await waitFor(() => expect(screen.getByRole("combobox", { name: "Проект" })).toHaveValue("STOCKS_DRRK"));   // O-4: адрес меняется раньше отрисовки
     expect(await screen.findByTestId("page-board")).toBeInTheDocument();
   });
 
diff --git a/web/src/shell/AppBar.test.tsx b/web/src/shell/AppBar.test.tsx
index 2e3ef54..65a1ae8 100644
--- a/web/src/shell/AppBar.test.tsx
+++ b/web/src/shell/AppBar.test.tsx
@@ -52,6 +52,19 @@ describe("верхняя панель", () => {
     expect(screen.getByRole("link", { name: "Доска связей" })).not.toHaveAttribute("aria-current");
   });
 
+  it("на странице «не найдено» ни один раздел не активен; ссылки в сообщении ведут на разделы", async () => {
+    hub();
+    open("/app/nowhere?project=AWPCA");
+    expect(await screen.findByRole("heading", { name: "Страница не найдена" })).toBeInTheDocument();
+    const nav = within(bar()).getByRole("navigation", { name: "Раздел" });
+    expect(within(nav).getByRole("link", { name: "Доска связей" })).not.toHaveAttribute("aria-current");
+    expect(within(nav).getByRole("link", { name: "Задачи" })).not.toHaveAttribute("aria-current");
+    const main = within(screen.getByRole("main"));
+    expect(main.getByRole("link", { name: "Доска связей" })).toHaveAttribute("href", "/app/board");
+    expect(main.getByRole("link", { name: "Задачи" })).toHaveAttribute("href", "/app/issues");
+    expect(screen.getByRole("alert")).toHaveTextContent("Страница не найдена");
+  });
+
   it("«Обновить из Jira» на /issues ставит пакет, недоступна, по done — «пакет #7 выполнен» и GET /issues повторно", async () => {
     let done = false;
     const h = hub({ "GET /batches/7": () => json(200, { id: 7, author: "viewer", status: done ? "done" : "running", remaining_seconds: 3, counts: {}, commands: [{ type: "refresh", status: done ? "done" : "running" }] }) });
diff --git a/web/src/shell/AppBar.tsx b/web/src/shell/AppBar.tsx
index 6f69d4f..e624093 100644
--- a/web/src/shell/AppBar.tsx
+++ b/web/src/shell/AppBar.tsx
@@ -7,8 +7,8 @@ import { DataStatus } from "./DataStatus.tsx";
 
 export type Section = "/board" | "/issues";
 
-// верхняя панель (design.md, решение 9): название, проект, разделы, состояние данных, тема, меню «Ещё»
-export function AppBar({ section, project }: { section: Section; project: string | null }) {
+// верхняя панель (design.md, решение 9); section = null на путях вне разделов — активной ссылки нет (T5.1): название, проект, разделы, состояние данных, тема, меню «Ещё»
+export function AppBar({ section, project }: { section: Section | null; project: string | null }) {
   const qc = useQueryClient();
   const href = (to: Section) => (project ? to + withProject("", project) : to);
   return (
diff --git a/web/src/shell/ErrorBoundary.tsx b/web/src/shell/ErrorBoundary.tsx
index 0a8e2d8..13878d5 100644
--- a/web/src/shell/ErrorBoundary.tsx
+++ b/web/src/shell/ErrorBoundary.tsx
@@ -1,4 +1,5 @@
 import { Component, type ErrorInfo, type ReactNode } from "react";
+import { Button, Notice } from "../ui/index.ts";
 
 interface State { error: Error | null }
 
@@ -10,10 +11,11 @@ export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
   render() {
     if (!this.state.error) return this.props.children;
     return (
-      <div className="crash" role="alert">
-        <h2>Страница сломалась</h2>
-        <p>{this.state.error.message}</p>
-        <button className="btn" type="button" onClick={() => window.location.reload()}>Перезагрузить</button>
+      <div className="crash">
+        <Notice tone="error" title={<h2>Страница сломалась</h2>}
+          action={<Button variant="primary" onClick={() => window.location.reload()}>Перезагрузить</Button>}>
+          {this.state.error.message}
+        </Notice>
       </div>
     );
   }
diff --git a/web/src/shell/Layout.tsx b/web/src/shell/Layout.tsx
index 3d8ee03..02e0219 100644
--- a/web/src/shell/Layout.tsx
+++ b/web/src/shell/Layout.tsx
@@ -70,8 +70,8 @@ export function Layout() {
   }, [okLabel, fromUrl, issueKey, onPage, at, pageLocation.search, navigate]);
 
   const [newOpen, setNewOpen] = useState(false);
-  const section = at === "/issues" ? "/issues" : "/board";
-  const select = useCallback((label: string) => { void navigate({ pathname: section, search: withProject("", label) }); }, [navigate, section]);
+  const section = at === "/issues" || at === "/board" ? at : null;
+  const select = useCallback((label: string) => { void navigate({ pathname: section ?? "/board", search: withProject("", label) }); }, [navigate, section]);
   const ctx = useMemo<ProjectCtx>(() => ({ state, projects: projects.data ?? [], select, openNew: () => setNewOpen(true) }),
     [state, projects.data, select]);
 
@@ -79,7 +79,7 @@ export function Layout() {
   return (
     <ProjectContext value={ctx}>
       <AppBar section={section} project={okLabel} />
-      <main className={"page" + (section === "/board" ? " page--board" : "")}>
+      <main className={"page" + (section !== "/issues" ? " page--board" : "")}>
         <ErrorBoundary key={at}>{page}</ErrorBoundary>
       </main>
       {issueKey && <CloseAbortContext value={abortClose}><IssueModal issueKey={issueKey} onClose={close} /></CloseAbortContext>}
diff --git a/web/src/shell/NotFound.tsx b/web/src/shell/NotFound.tsx
index 8a830de..b7805c4 100644
--- a/web/src/shell/NotFound.tsx
+++ b/web/src/shell/NotFound.tsx
@@ -1,10 +1,12 @@
 import { Link } from "react-router";
+import { Notice } from "../ui/index.ts";
 
 export function NotFound() {
   return (
     <div className="crash">
-      <h2>Страница не найдена</h2>
-      <p>Разделы приложения: <Link to="/board">доска</Link>, <Link to="/issues">задачи</Link>.</p>
+      <Notice tone="warning" title={<h2>Страница не найдена</h2>}>
+        Разделы приложения: <Link to="/board">Доска связей</Link>, <Link to="/issues">Задачи</Link>.
+      </Notice>
     </div>
   );
 }
diff --git a/web/src/shell/shell.css b/web/src/shell/shell.css
index 32371c8..de3e5ea 100644
--- a/web/src/shell/shell.css
+++ b/web/src/shell/shell.css
@@ -16,6 +16,7 @@
 .data-status__event--warning{color:var(--color-status-warning)}
 .data-status__event--error{color:var(--color-status-error)}
 .crash{max-width:640px;margin:48px auto}
+.crash h2{margin:0;font:inherit}
 @media (max-width:1099px){
   .appbar .data-status{order:10;flex:1 0 100%}
   .appbar .appbar__spacer{flex:1 1 0}
diff --git a/web/src/styles/base.css b/web/src/styles/base.css
index 2ca943d..54a8a42 100644
--- a/web/src/styles/base.css
+++ b/web/src/styles/base.css
@@ -3,13 +3,8 @@ html,body{min-height:100%}
 body{font:var(--fs-body)/var(--lh-body) var(--font-ui);background:var(--color-bg-canvas);color:var(--color-text-primary);margin:0}
 h1{font-size:var(--fs-section);line-height:var(--lh-section);font-weight:700;margin:0}
 [hidden]{display:none!important}
-.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
-.spacer{flex:1 1 auto}
-.hint{font-size:13px;color:var(--muted)}
-.warn{color:var(--p-high)}
 .page{padding-inline:24px;padding-block:0 32px;max-width:1440px;margin-inline:auto}
 .page--board{max-width:none}
 @media (max-width:639px){.page{padding-inline:16px}}
-.login{max-width:560px;margin:48px auto}.login form{display:flex;gap:8px}.login input{flex:1;font:inherit;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}.login .err{color:var(--p-crit)}
 :focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
 @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
diff --git a/web/src/styles/controls.css b/web/src/styles/controls.css
deleted file mode 100644
index a80ddc3..0000000
--- a/web/src/styles/controls.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.link{font:inherit;font-size:14px;color:var(--accent);cursor:pointer;background:none;border:0;padding:0;text-decoration:underline dotted;white-space:nowrap}
-.link:hover,.link:focus-visible{text-decoration-style:solid;outline:none}
-.link:disabled{color:var(--muted);cursor:default;text-decoration:none}
-/* 4. Кнопки и выпадающие списки */
-.btn{font:inherit;font-size:14px;line-height:1.2;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:0 12px;cursor:pointer;height:34px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:5px}
-.btn:hover,.btn:focus-visible{border-color:var(--accent);outline:none}
-.btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
-.btn .n{font-weight:600;color:var(--p-crit)}
-.btn .n.zero{font-weight:500;color:var(--muted)}
-.btn[aria-pressed="true"] .n{color:inherit}
-.btn.sm{height:28px;padding:0 8px;font-size:13px}
-.more-btn{padding:0 10px;font-size:20px;line-height:1;letter-spacing:.05em}
-.dd{position:relative;display:inline-block}
-.dd-btn{max-width:360px;gap:8px;justify-content:space-between}
-.dd-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.dd-btn .car{font-size:10px;opacity:.7}
-.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:280px;max-width:420px;padding:8px;display:flex;flex-direction:column;gap:6px}
-.dd-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}
-.dd-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:5px;cursor:pointer;font-size:14px}
-.dd-item:hover{background:var(--soft)}
-.dd-item input{accent-color:var(--accent);margin:0;width:14px;height:14px;flex:0 0 auto}
-.dd-item .n{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
-.dd-item.none{color:var(--muted);font-style:italic}
-.dd-item.zero{opacity:.5}
-.dd-foot{display:flex;gap:6px;justify-content:space-between;border-top:1px solid var(--line);padding-top:6px}
-.dd-foot .btn{height:30px;padding:0 10px;font-size:13.5px}
-.dd-empty{font-size:12.5px;color:var(--muted);padding:6px}
-.dd-sep{border:0;border-top:1px solid var(--line);margin:4px 0}
-/* меню «⋯»: открывается к левому краю, пункты с галочкой — переключатели */
-.dd-menu.menu{right:0;left:auto;min-width:230px;padding:6px}
-.confirm{display:flex;flex-direction:column;gap:6px;padding:6px 10px;font-size:14px}
-.confirm .row{flex-wrap:nowrap}
-.confirm .btn{height:28px;padding:0 10px;width:auto;flex:1 1 0}
-.confirm .btn.yes{background:var(--p-crit);color:var(--color-text-on-primary);border-color:var(--p-crit)}
-
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index dc10dcd..4590601 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -43,7 +43,7 @@
   --p-low: #a3a39b;
   --edge: #a3a39b;
   --guide: #c2410c;
-  --lane-alt: #f1f1ee;
+  --lane-alt: #f5f5f2;
   --edge-strong: var(--color-action-primary);
   --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
   --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
@@ -55,10 +55,6 @@
   --lh-caption: 16px; --lh-body: 20px; --lh-lg: 24px; --lh-section: 28px;
   --control-h: 32px; --control-h-lg: 40px; --control-radius: 10px;
   --motion: 180ms ease;
-  /* Псевдонимы на переход: удаляются в Task 10 */
-  --bg: var(--color-bg-canvas); --fg: var(--color-text-primary); --muted: var(--color-text-secondary);
-  --line: var(--color-border-default); --card: var(--color-bg-surface); --panel: var(--color-bg-surface);
-  --soft: var(--color-bg-hover); --accent: var(--color-action-primary); --accent-fg: var(--color-text-on-primary);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
@@ -104,7 +100,7 @@
     --p-low: #6c726b;
     --edge: #6c726b;
     --guide: #f08a5a;
-    --lane-alt: #212121;
+    --lane-alt: #252525;
     --edge-strong: var(--color-action-primary);
   }
 }
@@ -151,6 +147,6 @@
   --p-low: #6c726b;
   --edge: #6c726b;
   --guide: #f08a5a;
-  --lane-alt: #212121;
+  --lane-alt: #252525;
   --edge-strong: var(--color-action-primary);
 }
diff --git a/web/src/ui/Segmented.tsx b/web/src/ui/Segmented.tsx
index 149afe4..fe46d09 100644
--- a/web/src/ui/Segmented.tsx
+++ b/web/src/ui/Segmented.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router";
 type Option<T extends string> = { value: T; label: string; href?: string };
 
 export function Segmented<T extends string>({ label, value, options, onChange }: {
-  label: string; value: T; options: Option<T>[]; onChange?(v: T): void;
+  label: string; value: T | null; options: Option<T>[]; onChange?(v: T): void;
 }) {
   if (options.some((o) => o.href)) {
     return (
diff --git a/web/src/ui/icons.tsx b/web/src/ui/icons.tsx
index fc1d3a3..e6ad481 100644
--- a/web/src/ui/icons.tsx
+++ b/web/src/ui/icons.tsx
@@ -15,6 +15,7 @@ export const IconUpload = make(<><path d="M12 16V4"/><path d="M7 9l5-5 5 5"/><pa
 export const IconMore = make(<><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></>);
 export const IconClose = make(<><path d="M6 6l12 12M18 6L6 18"/></>);
 export const IconChevronDown = make(<><path d="M6 9l6 6 6-6"/></>);
+export const IconChevronUp = make(<><path d="M6 15l6-6 6 6"/></>);
 export const IconSearch = make(<><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></>);
 export const IconFilter = make(<><path d="M4 5h16l-6 8v6l-4-2v-4z"/></>);
 export const IconSun = make(<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></>);
diff --git a/web/src/ui/ui.css b/web/src/ui/ui.css
index 4fa6ec0..88d7933 100644
--- a/web/src/ui/ui.css
+++ b/web/src/ui/ui.css
@@ -98,6 +98,7 @@
 .ui-notice__title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--color-text-primary); }
 .ui-notice__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
 .ui-notice__action { flex: none; }
+.ui-notice a { color: var(--color-action-primary); }
 .ui-notice--success { background: var(--color-status-success-bg); border-color: var(--color-status-success); }
 .ui-notice--success .ui-notice__icon { background: var(--color-status-success); }
 .ui-notice--error { background: var(--color-status-error-bg); border-color: var(--color-status-error); }
@@ -170,11 +171,28 @@
   .ui-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
 }
 
-/* меню: пункты — кнопки; «выбрано» — цветом текста и галочкой */
+/* выпадающая панель и меню: пункты — кнопки; «выбрано» — цветом текста и галочкой */
+.dd { position: relative; display: inline-block; }
 .dd-menu {
+  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 20; min-width: 280px; max-width: 420px;
+  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2);
   background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
   box-shadow: var(--shadow-popover); color: var(--color-text-primary); font-family: var(--font-ui);
 }
+.dd-menu.menu { right: 0; left: auto; min-width: 230px; gap: 0; padding: var(--space-1); }
+.dd-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; }
+.dd-item {
+  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
+  font-size: var(--fs-body); line-height: var(--lh-body); cursor: pointer;
+}
+.dd-item:hover { background: var(--color-bg-hover); }
+.dd-item input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--color-action-primary); cursor: pointer; }
+.dd-item input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
+.dd-item .n { margin-left: auto; font-size: var(--fs-caption); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
+.dd-item.none { color: var(--color-text-secondary); font-style: italic; }
+.dd-item.zero { opacity: .5; }
+.dd-empty { padding: var(--space-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
+.dd-foot { display: flex; gap: var(--space-2); justify-content: space-between; border-top: 1px solid var(--color-border-default); padding-top: var(--space-2); }
 .dd--start > .dd-menu.menu { left: 0; right: auto; }
 .menu button {
   display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%;
-- 
2.47.2


From d3e8d969c88695d094ef96fe711b30d3a8c5bed5 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:24:57 +0400
Subject: [PATCH 18/23] =?UTF-8?q?style(web):=20=D0=B2=D0=B5=D1=80=D1=85?=
 =?UTF-8?q?=D0=BD=D1=8F=D1=8F=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=83=D0=B7=D0=BA=D0=BE=D0=BC=20=D1=8D=D0=BA?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B5,=20=D0=BA=D0=BE=D0=BD=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=D1=81=D1=82=20=D1=82=D0=B5=D0=BA=D1=81=D1=82=D0=B0=20Not?=
 =?UTF-8?q?ice=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Тема и меню «…» остаются в первой строке панели, статус данных — второй;
на 390 px выбор проекта сжимается. Текст Notice — основным цветом.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/issues/issues.css | 4 ++--
 web/src/shell/shell.css   | 3 +++
 web/src/ui/ui.css         | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/issues/issues.css b/web/src/issues/issues.css
index 6b59e4a..529ccf9 100644
--- a/web/src/issues/issues.css
+++ b/web/src/issues/issues.css
@@ -30,7 +30,7 @@
 .issues__hint{margin:0;color:var(--color-text-secondary)}
 .issues__more{display:flex;justify-content:center}
 /* карточка задачи в окне (design 13, 19): всё через токены */
-.issue{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text-primary)}
+.issue{font-size:var(--fs-body);line-height:var(--lh-body)}
 .issue a{color:var(--color-action-primary)}
 .issue a.ui-btn{color:var(--color-text-primary);text-decoration:none}
 .issue .hint{margin:0;font-size:var(--fs-body);color:var(--color-text-secondary)}
@@ -117,4 +117,4 @@
   .issue-head .ui-icon-btn{order:2}
   .issue-head a.ui-btn{order:3}
 }
-.issue .ui-notice__text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text-primary)}
+.issue .ui-notice__text{font-size:var(--fs-body);line-height:var(--lh-body)}
diff --git a/web/src/shell/shell.css b/web/src/shell/shell.css
index de3e5ea..9bbd6ee 100644
--- a/web/src/shell/shell.css
+++ b/web/src/shell/shell.css
@@ -19,11 +19,14 @@
 .crash h2{margin:0;font:inherit}
 @media (max-width:1099px){
   .appbar .data-status{order:10;flex:1 0 100%}
+  .appbar .ui-theme,.appbar .more{order:4}   /* T10.1: тема и «…» остаются в первой строке, статус данных — второй */
   .appbar .appbar__spacer{flex:1 1 0}
 }
 @media (max-width:639px){
   .appbar{padding-inline:16px}
   .appbar__brand{display:none}
+  .appbar .appbar__spacer{display:none}
+  .appbar .project-picker{flex:1 1 0;width:auto;max-width:none;min-width:0}   /* T10.1: picker, тема и «…» — в одной строке */
   .appbar .ui-seg{flex:1 1 100%;order:5}
   .appbar .ui-seg__item{flex:1 1 0;justify-content:center}
 }
diff --git a/web/src/ui/ui.css b/web/src/ui/ui.css
index 88d7933..7abe2a2 100644
--- a/web/src/ui/ui.css
+++ b/web/src/ui/ui.css
@@ -96,7 +96,7 @@
 }
 .ui-notice__body { flex: 1; min-width: 0; }
 .ui-notice__title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--color-text-primary); }
-.ui-notice__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
+.ui-notice__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-primary); }
 .ui-notice__action { flex: none; }
 .ui-notice a { color: var(--color-action-primary); }
 .ui-notice--success { background: var(--color-status-success-bg); border-color: var(--color-status-success); }
-- 
2.47.2


From 7ace847548e03f5252c05f6d40346f15e7afc924 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:26:39 +0400
Subject: [PATCH 19/23] =?UTF-8?q?=D0=A1=D0=BF=D0=B5=D0=BA=D0=B0:=20=D1=80?=
 =?UTF-8?q?=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=2018=20=E2=80=94=20=D1=82?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B=20=D0=B4=D0=BE=D1=80=D0=BE=D0=B6?=
 =?UTF-8?q?=D0=B5=D0=BA,=20Notice,=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20=D1=83=D0=B7=D0=BA=D0=BE=D0=BC=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 openspec/changes/redesign/design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/openspec/changes/redesign/design.md b/openspec/changes/redesign/design.md
index f869839..83ad4c1 100644
--- a/openspec/changes/redesign/design.md
+++ b/openspec/changes/redesign/design.md
@@ -192,3 +192,4 @@
 | 15 | 22.10.2026 | Задача 5: высота верхней панели `min-height: 64` (не фиксированная), чтобы вторая строка данных переносилась при ширине <1100 px; панель не sticky | перенос без обрезки | низкая: заменить на фиксированную высоту и скролл строки |
 | 16 | 22.10.2026 | Задача 8: ниже 1100 px таблица списка прокручивается по горизонтали внутри панели, шапка таблицы там не липкая; от 1100 px липкая | overflow на предке отключает `position: sticky`; широкая таблица на узком экране важнее липкой шапки | низкая: на узком экране шапку не видно при прокрутке вниз |
 | 17 | 22.10.2026 | Задача 9: в окне карточки текст `Notice` 14 px основным цветом (локальный оверрайд `.issue .ui-notice__text`, общий компонент не тронут); `ui/Dialog` пропускает остальные атрибуты `<dialog>` и принимает `onNativeClose`; классы `.who` → `c-head`, `.confirm` → `note-confirm` из-за протечки глобальных правил `board.css`/`controls.css` | 12 px вторичным плохо читается на фоне ошибки; `IssueModal` сохраняет прежнюю логику закрытия | низкая: вернуть размер текста / переименовать классы |
+| 18 | 22.10.2026 | Задача 10: `--lane-alt` светлый `#f5f5f2`, тёмный `#252525` (свёрнутая дорожка в тёмной отличается рамками, не фоном); заголовки «не найдено» и ошибки отрисовки — `h2` внутри `Notice`; текст `Notice` основным цветом 12/16 (в карточке 14/20); на 390 px в верхней панели проект, тема и меню в одной строке, переключатель разделов — ниже | палитра AURA ограничена; различимость дорожек, контраст текста сообщений | низкая: правка значений токенов и `order` в shell.css |
-- 
2.47.2


From 3b73bb5ca0806fd3c2a1ed762bfec0e0bfffccf7 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:34:51 +0400
Subject: [PATCH 20/23] =?UTF-8?q?test(web):=20=D1=81=D0=BA=D1=80=D0=B8?=
 =?UTF-8?q?=D0=BF=D1=82=20=D1=81=D0=BA=D1=80=D0=B8=D0=BD=D1=88=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2=20=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D0=BE=D0=B2=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=B2=D0=B8=D0=B4=D0=B0=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .gitignore              |   1 +
 web/e2e/screens.spec.ts | 100 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 web/e2e/screens.spec.ts

diff --git a/.gitignore b/.gitignore
index b56602c..4a0f716 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,4 @@ web/test-results/
 web/playwright-report/
 web/.e2e-hub/
 *.tsbuildinfo
+web/e2e-screens/
diff --git a/web/e2e/screens.spec.ts b/web/e2e/screens.spec.ts
new file mode 100644
index 0000000..a0f876c
--- /dev/null
+++ b/web/e2e/screens.spec.ts
@@ -0,0 +1,100 @@
+import { expect, test, type Page } from "@playwright/test";
+import { mkdirSync } from "node:fs";
+import { resolve } from "node:path";
+import { agentServeRefresh, login } from "./hub.ts";
+
+// Снимки экранов для проверки вида (запуск: SCREENS=1 npx playwright test e2e/screens.spec.ts).
+// Результат — web/e2e-screens/<тема>-<ширина>-<экран>.png, в git не попадает.
+test.skip(!process.env.SCREENS, "снимки только по SCREENS=1");
+
+const OUT = resolve(import.meta.dirname, "../e2e-screens");
+const SIZES = [{ w: 1920, h: 1080 }, { w: 390, h: 844 }];
+
+for (const theme of ["light", "dark"] as const) {
+  for (const { w, h } of SIZES) {
+    test.describe(`${theme} ${w}`, () => {
+      test.use({ viewport: { width: w, height: h }, colorScheme: theme });
+      test.beforeEach(async ({ page }) => {
+        mkdirSync(OUT, { recursive: true });
+        await page.addInitScript((t) => { localStorage.setItem("graph-theme", t); }, theme);
+      });
+      const shot = (page: Page, name: string) =>
+        page.screenshot({ path: `${OUT}/${theme}-${w}-${name}.png`, fullPage: true });
+      const settle = async (page: Page) => {
+        await page.evaluate(() => document.fonts.ready.then(() => undefined));
+        await page.waitForTimeout(400);   // раскладка доски и переходы успокаиваются до снимка
+      };
+
+      test("login", async ({ page }) => {
+        await page.goto("/app/board");
+        await expect(page.getByLabel("Клиентский токен хаба")).toBeVisible();
+        await settle(page);
+        await shot(page, "login");
+      });
+
+      test("board", async ({ page }) => {
+        await login(page);
+        await expect(page.locator(".board .card[data-key]").first()).toBeVisible();
+        await settle(page);
+        await shot(page, "board");
+      });
+
+      test("board-bydate", async ({ page }) => {
+        await login(page);
+        await page.getByRole("button", { name: "По датам" }).click();
+        await expect(page.locator(".dcol").first()).toBeVisible();
+        await settle(page);
+        await shot(page, "board-bydate");
+      });
+
+      test("board-problems", async ({ page }) => {
+        await login(page);
+        await expect(page.locator(".board .card[data-key]").first()).toBeVisible();
+        await page.getByRole("button", { name: /Проблемы/ }).click();
+        await settle(page);
+        await shot(page, "board-problems");
+      });
+
+      test("issues", async ({ page }) => {
+        await login(page, "/app/issues");
+        await expect(page.locator("table.issue-table tbody tr").first()).toBeVisible();
+        await settle(page);
+        await shot(page, "issues");
+      });
+
+      test("issues-filters", async ({ page }) => {
+        await login(page, "/app/issues");
+        await page.getByRole("button", { name: /Фильтры/ }).click();
+        await page.getByRole("combobox", { name: "Исполнитель" }).selectOption("Петров Пётр Петрович");
+        await expect(page).toHaveURL(/assignee=/);
+        await settle(page);
+        await shot(page, "issues-filters");
+      });
+
+      test("card", async ({ page }) => {
+        await login(page, "/app/issues/AURORA-9001");
+        await expect(page.getByRole("dialog").getByRole("heading", { name: "Схема свода" })).toBeVisible();
+        await settle(page);
+        await shot(page, "card");
+      });
+
+      test("new-project", async ({ page }) => {
+        await login(page);
+        await page.getByLabel("Проект", { exact: true }).selectOption({ label: "＋ Новый проект…" });
+        await expect(page.getByRole("dialog", { name: "Новый проект" })).toBeVisible();
+        await settle(page);
+        await shot(page, "new-project");
+      });
+
+      test("refresh", async ({ page }) => {
+        await login(page);
+        await page.getByRole("button", { name: "Обновить из Jira" }).click();
+        await expect(page.getByRole("status")).toContainText(/пакет #\d+/);
+        await settle(page);
+        await shot(page, "refresh");
+        await agentServeRefresh();   // не оставляем пакет в очереди тестового хаба
+        await expect(page.getByRole("status")).toContainText(/выполнен/, { timeout: 15_000 });
+      });
+    });
+  }
+}
-- 
2.47.2


From 04804360d52572fc3a083c90d04768e96ebb1bc0 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:34:51 +0400
Subject: [PATCH 21/23] =?UTF-8?q?fix(web):=20=D0=BD=D0=B0=20=D1=83=D0=B7?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=20=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D0=B5=20?=
 =?UTF-8?q?=D0=BF=D1=80=D1=8F=D1=87=D0=B5=D0=BC=20=D0=B2=D0=B5=D1=80=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D0=BB=D0=B8=D1=82=D0=B5=D0=BB=D0=B8=20=D0=BF?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20=D0=B4=D0=BE=D1=81=D0=BA=D0=B8?=
 =?UTF-8?q?=20=D0=B8=20=D0=BB=D0=B5=D0=B3=D0=B5=D0=BD=D0=B4=D1=8B=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/board/board.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/board/board.css b/web/src/board/board.css
index 894231a..a25a74c 100644
--- a/web/src/board/board.css
+++ b/web/src/board/board.css
@@ -169,6 +169,7 @@ td.k{font-family:var(--font-mono);font-size:12px;white-space:nowrap;color:var(--
 @media (prefers-reduced-motion:reduce){.card .grip,.fold svg{transition:none}}
 @media (max-width:900px){.stage{flex-direction:column}.drawer{flex:none;max-width:100%;max-height:none;position:static}}
 @media (max-width:640px){.sticky{position:static}.dates-bar{position:static}}
+@media (max-width:640px){.board-controls__sep,.legend .sep{display:none}}
 
 /* «Открыть карточку» в заголовке карточки (R-1) */
 .card .open-card{margin-left:6px;color:var(--color-text-secondary);text-decoration:none;display:inline-flex;align-items:center;border-radius:var(--radius-xs)}
-- 
2.47.2


From 0a5ca2e00abd6498821fca8b78374fe857496c0e Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:52:58 +0400
Subject: [PATCH 22/23] =?UTF-8?q?fix(web):=20=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=BF=D0=BE=20=D1=84=D0=B8=D0=BD=D0=B0=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=BD=D0=BE=D0=BC=D1=83=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?=
 =?UTF-8?q?:=20=D0=BF=D0=BE=D0=BC=D0=B5=D1=82=D0=BA=D0=B0=20=D1=85=D0=B0?=
 =?UTF-8?q?=D0=B1=D0=B0=20=D0=BD=D0=B0=20=D0=B4=D0=BE=D1=81=D0=BA=D0=B5,?=
 =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20=D0=B2=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B5,=20=D0=BF=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85,=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BD=D1=82=D1=80=D0=B0=D1=81=D1=82=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B4=D1=83=D0=BF=D1=80=D0=B5=D0=B6=D0=B4=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B9=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/e2e/board.spec.ts                    |  2 +-
 web/src/board/BoardPage.test.tsx         | 16 ++++++++--------
 web/src/board/BoardPage.tsx              |  2 +-
 web/src/board/board.css                  |  2 +-
 web/src/board/components/BoardHeader.tsx |  2 +-
 web/src/issues/IssueFilters.tsx          |  2 +-
 web/src/main.tsx                         |  1 +
 web/src/shell/DataStatus.tsx             |  2 +-
 web/src/shell/refreshStatus.test.ts      |  2 +-
 web/src/shell/refreshStatus.ts           |  2 +-
 web/src/shell/shell.css                  | 12 +++++++++---
 web/src/ui/icons.tsx                     |  2 --
 web/src/ui/ui.css                        | 11 ++++++++++-
 13 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/web/e2e/board.spec.ts b/web/e2e/board.spec.ts
index 61c3c35..921b8bf 100644
--- a/web/e2e/board.spec.ts
+++ b/web/e2e/board.spec.ts
@@ -49,7 +49,7 @@ test("«Обновить из Jira» с учебным агентом доход
   await agentServeRefresh();
   await expect(page.getByRole("status")).toContainText(/пакет #\d+ выполнен/, { timeout: 15_000 });
   await expect(btn).toBeEnabled();
-  await expect(page.getByText(/^Хаб · данные на /)).toBeVisible();
+  await expect(page.getByText(/^данные на /)).toBeVisible();
   await expect(page.locator(".board .card[data-key]")).not.toHaveCount(0);
 });
 
diff --git a/web/src/board/BoardPage.test.tsx b/web/src/board/BoardPage.test.tsx
index bdce9f7..0cfeb27 100644
--- a/web/src/board/BoardPage.test.tsx
+++ b/web/src/board/BoardPage.test.tsx
@@ -39,7 +39,7 @@ describe("страница доски", () => {
   it("строит доску из хаба: источник, статистика, выбор самого наполненного спринта", async () => {
     hub();
     page();
-    expect(await screen.findByText(/^Хаб · данные на/)).toBeInTheDocument();
+    expect(await screen.findByText(/задач из/)).toBeInTheDocument();
     expect(screen.getByText(/задач из 9/)).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /AWPCA_Спринт 2/ })).toBeInTheDocument();
   });
@@ -47,7 +47,7 @@ describe("страница доски", () => {
   it("снимок запрашивается по проекту страницы", async () => {
     const fetch = hub();
     page();
-    await screen.findByText(/^Хаб · данные на/);
+    await screen.findByText(/задач из/);
     const urls = fetch.mock.calls.map(([u]) => new URL(String(u), "http://hub.test")).filter((u) => u.pathname === "/board");
     expect(urls[0].searchParams.get("project")).toBe("AWPCA");
   });
@@ -120,7 +120,7 @@ describe("страница доски", () => {
     fireEvent.change(input, { target: { files: [new File([fx("jira-export.csv")], "jira-export.csv", { type: "text/csv" })] } });
     expect(await screen.findByText("из файла: jira-export.csv")).toBeInTheDocument();
     await userEvent.click(screen.getByRole("button", { name: "Вернуться к данным хаба" }));
-    expect(await screen.findByText(/^Хаб · данные на/)).toBeInTheDocument();
+    expect(await screen.findByText(/задач из/)).toBeInTheDocument();
     expect(screen.queryByText(/^из файла:/)).not.toBeInTheDocument();
   });
 
@@ -171,7 +171,7 @@ describe("страница доски", () => {
     page();
     await screen.findByText(/задач из 9/);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
-    expect(screen.getByText(/^Хаб · данные на/)).toBeInTheDocument();
+    expect(screen.queryByText(/^Хаб · данные на/)).not.toBeInTheDocument();   // данные хаба пометки не имеют (спека, решение 13)
     expect(screen.queryByRole("status")).not.toBeInTheDocument();
   });
 
@@ -184,7 +184,7 @@ describe("страница доски", () => {
   it("T12.3: --head-h снимается при уходе со страницы", async () => {
     hub();
     const r = page();
-    await screen.findByText(/^Хаб · данные на/);
+    await screen.findByText(/задач из/);
     r.unmount();
     expect(document.documentElement.style.getPropertyValue("--head-h")).toBe("");
   });
@@ -192,7 +192,7 @@ describe("страница доски", () => {
   it("T12.2: переключатель пишет флаг в хранилище один раз, в том числе в StrictMode", async () => {
     hub();
     renderWithProviders(<StrictMode><BoardPage project="AWPCA" /></StrictMode>, { route: "/board", path: "/board" });
-    await screen.findByText(/^Хаб · данные на/);
+    await screen.findByText(/задач из/);
     const set = vi.spyOn(Storage.prototype, "setItem");
     fireEvent.click(screen.getByRole("button", { name: "Критический путь" }));
     expect(set.mock.calls.filter(([k]) => k === "graph-crit")).toEqual([["graph-crit", "1"]]);
@@ -210,12 +210,12 @@ describe("страница доски", () => {
     hub();
     localStorage.setItem("graph-pos:old.json", '{"AURORA-9001":{"x":1,"ry":40}}');
     const r = page("STOCKS_DRRK");
-    await screen.findByText(/^Хаб · данные на/);
+    await screen.findByText(/задач из/);
     expect(localStorage.getItem("graph-pos:board@STOCKS_DRRK")).toBeNull();
     expect(localStorage.getItem("graph-pos:board")).toBeNull();
     r.unmount();
     page("AWPCA");
-    await screen.findByText(/^Хаб · данные на/);
+    await screen.findByText(/задач из/);
     expect(localStorage.getItem("graph-pos:board")).toBe('{"AURORA-9001":{"x":1,"ry":40}}');
   });
 
diff --git a/web/src/board/BoardPage.tsx b/web/src/board/BoardPage.tsx
index ee9f1e6..e0295b6 100644
--- a/web/src/board/BoardPage.tsx
+++ b/web/src/board/BoardPage.tsx
@@ -42,7 +42,7 @@ export function BoardPage({ project }: { project: string }) {
   }, []);
 
   if (settings.isPending) return <p className="hint" data-testid="page-board">Загрузка настроек хаба…</p>;
-  if (settings.error) return <p className="warn" data-testid="page-board">Настройки хаба не загрузились: {settings.error.message}</p>;
+  if (settings.error) return <div data-testid="page-board"><Notice tone="error">Настройки хаба не загрузились: {settings.error.message}</Notice></div>;
   if (d && d.missing.length) {
     return (
       <div data-testid="page-board"><Notice tone="error">
diff --git a/web/src/board/board.css b/web/src/board/board.css
index a25a74c..f7ea935 100644
--- a/web/src/board/board.css
+++ b/web/src/board/board.css
@@ -7,7 +7,7 @@
 .board-src:empty{display:none}
 .board-src__label{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary);max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .board-event{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text-secondary)}
-.board-event--warn{color:var(--color-status-warning)}
+.board-event--warn{color:color-mix(in srgb, var(--color-status-warning) 55%, var(--color-text-primary))}
 .menu__label{display:inline-flex;align-items:center;gap:var(--space-2)}
 .confirm{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--fs-body);line-height:var(--lh-body);max-width:280px}
 .confirm__row{display:flex;gap:var(--space-2)}
diff --git a/web/src/board/components/BoardHeader.tsx b/web/src/board/components/BoardHeader.tsx
index c2d3fb6..50297f0 100644
--- a/web/src/board/components/BoardHeader.tsx
+++ b/web/src/board/components/BoardHeader.tsx
@@ -68,7 +68,7 @@ export function BoardHeader(p: BoardHeaderProps) {
             <Badge tone="info">из файла: {p.fileName}</Badge>
             <IconButton label="Вернуться к данным хаба" icon={<IconRefresh size={16} />} onClick={p.onReload} />
           </>
-        ) : <span className="board-src__label" title={p.title}>{p.label}</span>}
+        ) : null}   {/* данные хаба пометки не имеют: хаб показывает верхняя панель (design.md, решение 13) */}
         {st && <span className={"board-event" + (st.warn ? " board-event--warn" : "")} role="status">{st.text}</span>}
       </div>
     </PageHeader>
diff --git a/web/src/issues/IssueFilters.tsx b/web/src/issues/IssueFilters.tsx
index a544973..65af002 100644
--- a/web/src/issues/IssueFilters.tsx
+++ b/web/src/issues/IssueFilters.tsx
@@ -32,7 +32,7 @@ export function IssueFilters({ filters, set, onReset, q, setQ, showClosed, opts,
           options={[{ value: "open", label: "Открытые" }, { value: "all", label: "Все" }]}
           onChange={(v) => set("closed", v === "all" ? "1" : "")} />
         <Button aria-pressed={filters.neighbor === "1"} onClick={() => set("neighbor", filters.neighbor === "1" ? "" : "1")}>Только соседи</Button>
-        <Button icon={<IconFilter />} aria-expanded={open} aria-controls="issue-filters-grid" onClick={toggle}>
+        <Button icon={<IconFilter />} aria-expanded={open} aria-controls={open ? "issue-filters-grid" : undefined} onClick={toggle}>
           Фильтры{chosen.length > 0 && <Badge tone="info">{chosen.length}</Badge>}
         </Button>
       </div>
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 8a7a891..7326e39 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -5,6 +5,7 @@ import "@fontsource/mulish/400.css";
 import "@fontsource/mulish/600.css";
 import "@fontsource/mulish/700.css";
 import "@fontsource/ibm-plex-mono/500.css";
+import "@fontsource/ibm-plex-mono/600.css";
 import { App } from "./App.tsx";
 import { applyTheme, readTheme } from "./shell/theme.ts";
 
diff --git a/web/src/shell/DataStatus.tsx b/web/src/shell/DataStatus.tsx
index 5d01fcc..dcc4457 100644
--- a/web/src/shell/DataStatus.tsx
+++ b/web/src/shell/DataStatus.tsx
@@ -25,7 +25,7 @@ export function DataStatus({ project }: { project: string | null }) {
         title="Поставить в хаб пакет «обновление по базовой JQL» и дождаться его: агент перечитает задачи из Jira">
         Обновить из Jira
       </Button>
-      {rt && <span className={`data-status__event data-status__event--${rt.tone}`} role="status">{rt.text}</span>}
+      <span className={`data-status__event${rt ? ` data-status__event--${rt.tone}` : ""}`} role="status" title={rt?.text}>{rt?.text}</span>
     </div>
   );
 }
diff --git a/web/src/shell/refreshStatus.test.ts b/web/src/shell/refreshStatus.test.ts
index fc520fe..a4ed1a8 100644
--- a/web/src/shell/refreshStatus.test.ts
+++ b/web/src/shell/refreshStatus.test.ts
@@ -4,7 +4,7 @@ import { refreshText } from "./refreshStatus.ts";
 describe("refreshText", () => {
   it("пакет: офлайн, очередь, остаток, повтор", () => {
     expect(refreshText({ kind: "batch", id: 7, phase: "queued", remaining: 12, agentOffline: true, retrying: false }))
-      .toEqual({ text: "агент офлайн — пакет выполнится, когда он выйдет на связь; пакет #7 в очереди, осталось ~12 с…", tone: "info" });
+      .toEqual({ text: "агент офлайн — пакет выполнится, когда он выйдет на связь; пакет #7 в очереди, осталось ~12 с…", tone: "warning" });
     expect(refreshText({ kind: "batch", id: 7, phase: "running", remaining: 0, agentOffline: false, retrying: true }))
       .toEqual({ text: "пакет #7 выполняется… (хаб не отвечает, повтор через 3 с)", tone: "warning" });
   });
diff --git a/web/src/shell/refreshStatus.ts b/web/src/shell/refreshStatus.ts
index 5401f8f..629ee23 100644
--- a/web/src/shell/refreshStatus.ts
+++ b/web/src/shell/refreshStatus.ts
@@ -20,7 +20,7 @@ export function refreshText(e: RefreshEvent): { text: string; tone: RefreshTone
       const off = e.agentOffline ? "агент офлайн — пакет выполнится, когда он выйдет на связь; " : "";
       const left = e.remaining ? `, осталось ~${e.remaining} с` : "";
       const retry = e.retrying ? ` (хаб не отвечает, повтор через ${POLL_MS / 1000} с)` : "";
-      return { text: `${off}пакет #${e.id} ${e.phase === "queued" ? "в очереди" : "выполняется"}${left}…${retry}`, tone: e.retrying ? "warning" : "info" };
+      return { text: `${off}пакет #${e.id} ${e.phase === "queued" ? "в очереди" : "выполняется"}${left}…${retry}`, tone: e.retrying || e.agentOffline ? "warning" : "info" };
     }
     case "batch-done": return { text: `пакет #${e.id} выполнен`, tone: "success" };
     case "batch-failed": return { text: `пакет #${e.id} не выполнен: ${e.error}`, tone: "error" };
diff --git a/web/src/shell/shell.css b/web/src/shell/shell.css
index 9bbd6ee..52b4e30 100644
--- a/web/src/shell/shell.css
+++ b/web/src/shell/shell.css
@@ -1,5 +1,6 @@
 /* оболочка: верхняя панель разделов (design.md, решение 9) */
 .appbar{
+  position:relative;
   display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;min-height:64px;padding:8px 24px;box-sizing:border-box;
   border-bottom:1px solid var(--color-border-default);background:var(--color-bg-surface);
 }
@@ -7,16 +8,21 @@
 .appbar__spacer{flex:1 1 auto}
 .data-status{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-secondary)}
 .data-status__agent{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
-.data-status__dot{width:8px;height:8px;border-radius:50%;background:var(--color-status-error)}
+.data-status__dot{width:8px;height:8px;border-radius:50%;background:var(--color-status-warning)}
 .data-status__dot.is-online{background:var(--color-status-success)}
 .data-status__sync{white-space:nowrap}
-.data-status__event{font-weight:600}
+/* I-3: живой регион всегда в DOM; ≥1100 текст события — отдельной строкой у нижней границы панели (кнопка не двигается, высота панели не меняется) */
+.data-status__event{font-weight:600;min-width:0}
+.data-status__event:empty{position:absolute}
 .data-status__event--info{color:var(--color-text-secondary)}
 .data-status__event--success{color:var(--color-status-success)}
-.data-status__event--warning{color:var(--color-status-warning)}
+.data-status__event--warning{color:color-mix(in srgb, var(--color-status-warning) 55%, var(--color-text-primary))}
 .data-status__event--error{color:var(--color-status-error)}
 .crash{max-width:640px;margin:48px auto}
 .crash h2{margin:0;font:inherit}
+@media (min-width:1100px){
+  .data-status__event{position:absolute;right:24px;bottom:1px;max-width:min(560px,45vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:14px}
+}
 @media (max-width:1099px){
   .appbar .data-status{order:10;flex:1 0 100%}
   .appbar .ui-theme,.appbar .more{order:4}   /* T10.1: тема и «…» остаются в первой строке, статус данных — второй */
diff --git a/web/src/ui/icons.tsx b/web/src/ui/icons.tsx
index e6ad481..eb25186 100644
--- a/web/src/ui/icons.tsx
+++ b/web/src/ui/icons.tsx
@@ -30,7 +30,5 @@ export const IconCritical = make(<><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></
 export const IconCalendar = make(<><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v4M16 3v4"/></>);
 export const IconNeighbors = make(<><circle cx="12" cy="12" r="2.5"/><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="20" r="1.5"/><path d="M10 10.5L6.5 7.5M14 10.5l3.5-3M12 14.5v4"/></>);
 export const IconLink = make(<><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></>);
-export const IconGrid = make(<><rect x="4" y="4" width="6.5" height="6.5" rx="1"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1"/></>);
-export const IconReset = make(<><path d="M4 12a8 8 0 1 1 2.3 5.7"/><path d="M4 19v-7h7"/></>);
 export const IconLegend = make(<><path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.5" cy="6" r=".8"/><circle cx="4.5" cy="12" r=".8"/><circle cx="4.5" cy="18" r=".8"/></>);
 export const IconOpen = make(<><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>);
diff --git a/web/src/ui/ui.css b/web/src/ui/ui.css
index 7abe2a2..1dce05b 100644
--- a/web/src/ui/ui.css
+++ b/web/src/ui/ui.css
@@ -26,6 +26,14 @@
 .ui-btn:disabled { cursor: not-allowed; color: var(--color-text-disabled); }
 .ui-btn--primary:disabled, .ui-btn--danger:disabled { background: var(--color-bg-track); border-color: var(--color-border-default); }
 .ui-btn[aria-busy="true"] { cursor: progress; }
+/* загрузка: вид своего варианта, а не серая «выключенная» кнопка (AURA); повторный щелчок невозможен — disabled */
+.ui-btn--primary[aria-busy="true"]:disabled { background: var(--color-action-primary); border-color: transparent; color: var(--color-text-on-primary); }
+.ui-btn--danger[aria-busy="true"]:disabled { background: var(--color-action-danger); border-color: transparent; color: var(--color-text-on-primary); }
+.ui-btn--secondary[aria-busy="true"]:disabled { color: var(--color-text-primary); }
+.ui-btn--ghost[aria-busy="true"]:disabled { color: var(--color-action-primary); }
+.ui-btn--primary[aria-busy="true"] .ui-spinner, .ui-btn--danger[aria-busy="true"] .ui-spinner {
+  border-color: color-mix(in srgb, var(--color-text-on-primary) 35%, transparent); border-top-color: var(--color-text-on-primary);
+}
 .ui-spinner {
   width: 16px; height: 16px; border-radius: var(--radius-round);
   border: 2px solid var(--color-border-strong); border-top-color: var(--color-action-primary);
@@ -72,7 +80,7 @@
 .ui-badge--neutral { background: var(--color-bg-track); border-color: var(--color-border-default); color: var(--color-text-secondary); }
 .ui-badge--success { background: var(--color-status-success-bg); border-color: var(--color-status-success); color: var(--color-status-success); }
 .ui-badge--error { background: var(--color-status-error-bg); border-color: var(--color-status-error); color: var(--color-status-error); }
-.ui-badge--warning { background: var(--color-status-warning-bg); border-color: var(--color-status-warning-border); color: var(--color-status-warning); }
+.ui-badge--warning { background: var(--color-status-warning-bg); border-color: var(--color-status-warning-border); color: color-mix(in srgb, var(--color-status-warning) 55%, var(--color-text-primary)); }
 .ui-badge--info { background: var(--color-bg-subtle); border-color: var(--color-border-strong); color: var(--color-text-primary); }
 
 .ui-chip {
@@ -99,6 +107,7 @@
 .ui-notice__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-primary); }
 .ui-notice__action { flex: none; }
 .ui-notice a { color: var(--color-action-primary); }
+.ui-notice--warning a { color: var(--color-text-primary); text-decoration: underline; }
 .ui-notice--success { background: var(--color-status-success-bg); border-color: var(--color-status-success); }
 .ui-notice--success .ui-notice__icon { background: var(--color-status-success); }
 .ui-notice--error { background: var(--color-status-error-bg); border-color: var(--color-status-error); }
-- 
2.47.2


From 45ff5fac239b08b997ba5632da13b91ec2ab4c27 Mon Sep 17 00:00:00 2001
From: Andrey Epifancev <andrey.epifancev@ssi-solutions.ru>
Date: Thu, 22 Oct 2026 01:57:58 +0400
Subject: [PATCH 23/23] =?UTF-8?q?=D0=A1=D0=BF=D0=B5=D0=BA=D0=B0:=20=D1=80?=
 =?UTF-8?q?=D0=B5=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=2019=20=E2=80=94=20=D0=B8?=
 =?UTF-8?q?=D1=82=D0=BE=D0=B3=D0=B8=20=D1=84=D0=B8=D0=BD=D0=B0=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E=20(#6?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 openspec/changes/redesign/design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/openspec/changes/redesign/design.md b/openspec/changes/redesign/design.md
index 83ad4c1..fa6ee2c 100644
--- a/openspec/changes/redesign/design.md
+++ b/openspec/changes/redesign/design.md
@@ -193,3 +193,4 @@
 | 16 | 22.10.2026 | Задача 8: ниже 1100 px таблица списка прокручивается по горизонтали внутри панели, шапка таблицы там не липкая; от 1100 px липкая | overflow на предке отключает `position: sticky`; широкая таблица на узком экране важнее липкой шапки | низкая: на узком экране шапку не видно при прокрутке вниз |
 | 17 | 22.10.2026 | Задача 9: в окне карточки текст `Notice` 14 px основным цветом (локальный оверрайд `.issue .ui-notice__text`, общий компонент не тронут); `ui/Dialog` пропускает остальные атрибуты `<dialog>` и принимает `onNativeClose`; классы `.who` → `c-head`, `.confirm` → `note-confirm` из-за протечки глобальных правил `board.css`/`controls.css` | 12 px вторичным плохо читается на фоне ошибки; `IssueModal` сохраняет прежнюю логику закрытия | низкая: вернуть размер текста / переименовать классы |
 | 18 | 22.10.2026 | Задача 10: `--lane-alt` светлый `#f5f5f2`, тёмный `#252525` (свёрнутая дорожка в тёмной отличается рамками, не фоном); заголовки «не найдено» и ошибки отрисовки — `h2` внутри `Notice`; текст `Notice` основным цветом 12/16 (в карточке 14/20); на 390 px в верхней панели проект, тема и меню в одной строке, переключатель разделов — ниже | палитра AURA ограничена; различимость дорожек, контраст текста сообщений | низкая: правка значений токенов и `order` в shell.css |
+| 19 | 22.10.2026 | Финал: задача 11 принята без отдельного ревью задачи (покрыта финальным ревью); фикс-волна по финальному ревью — кнопка в `loading` сохраняет вид своего варианта, текст предупреждений на светлом `color-mix(warning 55%, text-primary)`, статус пакета в верхней панели от 1100 px лежит у нижней границы (макс. 560 px, многоточие, полный текст в `title`), `role=status` — постоянный контейнер; «агент офлайн» и событие при офлайн-агенте — предупреждение | снизить дрейф раскладки и поднять контраст; соответствие решению 10 | низкая: правка CSS панели/Button/Notice |
-- 
2.47.2