Перенос дизайна в server-rendered веб-UI (web-ui)

Новая capability web-ui: презентационный перенос готового дизайна (семантический HTML + единый jellybit.css, тёмная тема по настройке ОС) в html/template без шага сборки. - Встроенная (go:embed) отдача статики под /static с Cache-Control и cache-busting (?v=<hash> по содержимому css/js). - Шрифты IBM Plex self-hosted (@font-face, cyrillic+latin), без CDN. - Наколеночный менеджер зависимостей: вендор (htmx + шрифты) не хранится в репо (gitignore), идемпотентно добывается `task assets` по web/assets.manifest с проверкой sha256; task build/run зависят от assets. - Общие партиалы: шапка, бейдж статуса (карта всех 14 состояний), виджет «файл источника → раскладка» (общий для review и download). - Страницы: список с фильтром/поиском, ревью, новая страница просмотра загрузки (/download/{id}). deleted скрыт по умолчанию. - Превью раскладки берётся из единой логики internal/layout (buildFileRows), без дублирования правил имён в шаблонах. - Убраны meta-refresh и инлайн-стили; copyHash на vanilla с fallback на execCommand и честной индикацией (целевой деплой — HTTP LAN). Вне scope (отдельный change): живые обновления прогресса и раздел раздачи, клиентский режим ручной раскладки файл→серия (с Alpine.js). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 19:59:19 +03:00
parent d190072647
commit 4e2593ac31
26 changed files with 1960 additions and 303 deletions
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-06-30
@@ -0,0 +1,155 @@
+## Context
+
+Веб-UI — тонкий транспорт над ядром (приём в `ingest`, команды в `worker`,
+чтение в `store`). Рендер server-rendered через `html/template`, ассеты
+встраиваются `go:embed` (`web/web.go`). Сейчас встроены только шаблоны;
+статика (CSS/JS/шрифты) не отдаётся, «живость» сделана грубым
+`<meta http-equiv="refresh" content="5">`, оформление — инлайн-`<style>` с
+хардкодом цветов.
+
+Готов дизайн (`tmp/design/`): семантический HTML + единый `jellybit.css`
+(токены, тёмная тема по ОС), спроектированный под этот стек — без сборки,
+npm, React. Превью целевых путей раскладки уже считается на сервере через
+`internal/layout.BuildLinks` (поле `reviewView.Preview`) — это источник истины
+имён, дублировать его нельзя (инвариант: превью = реальная раскладка).
+
+Стек зафиксирован с заказчиком: htmx (через манифест с checksum, без Node),
+шрифты self-hosted, статика через `go:embed`. Реактивных фреймворков нет:
+клиентский режим ручной раскладки файл→серия отложен (операция редкая), вместе
+с ним отложен и Alpine.js — его добавим, когда виджет понадобится. Живые
+обновления прогресса — отдельный change (`web-live-updates`), здесь meta-refresh
+просто убирается.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Перенести дизайн `tmp/design/` в прод-шаблоны без шага сборки.
+- Встроить и отдавать статику (CSS, htmx, Alpine, шрифты) из одного бинаря.
+- Единая дизайн-система: один CSS, токены, тёмная тема по ОС, бейджи статусов.
+- Общие партиалы (шапка, бейдж, виджет «файл→раскладка») вместо дублей.
+- Добавить страницу `download` (просмотр одной загрузки).
+- Превью путей на ревью — показ из единого серверного расчёта `internal/layout`.
+
+**Non-Goals:**
+- Живые обновления прогресса/SSE (отдельный change).
+- Клиентский режим ручной раскладки файл→серия (S·E, нумерация, live-превью) и
+  Alpine.js под него — отложены до реальной необходимости (операция редкая).
+- Изменение доменного поведения (приём, распознавание, петля ревью, команды).
+- Авторизация веб-UI (остаётся вне scope, доверенная LAN).
+- npm/бандлер/CSS-постпроцессинг.
+
+## Decisions
+
+### D1. Статика через `go:embed` + `http.FileServer` под `/static/`
+
+`web/web.go` встраивает `static/*` рядом с `templates/*`. Роут
+`r.Handle("/static/*", http.StripPrefix("/static/", fileServer))` с
+`Cache-Control` (длинный max-age для вендорных файлов и шрифтов; для CSS —
+умеренный, либо cache-busting через `?v=<hash>`, посчитанный при старте).
+
+*Альтернативы:* отдавать с диска — отвергнуто (ломает однобинарность);
+CDN для htmx/Alpine — отвергнуто (внешняя сеть, инвариант self-host).
+
+### D2. Шрифты self-hosted через `@font-face`
+
+IBM Plex Sans/Mono кладём в `web/static/fonts/`, подключаем `@font-face` в
+`jellybit.css`. Из шаблонов убираем `<link>` на Google Fonts.
+
+*Почему:* umbar — домашний сервер, не зависим от внешней сети, не утекает
+referrer. Handoff сам это рекомендует.
+
+### D3. Зависимости фронта — наколеночный менеджер: gitignore + идемпотентный фетч
+
+Вендорные ассеты (htmx + шрифты IBM Plex) **не храним в репозитории** —
+`web/static/vendor/` в gitignore. Источник истины — манифест `web/assets.manifest`
+(строки `<путь под web/static/>  <url>  <sha256>`). `task assets` идемпотентен:
+для каждой записи — если файл есть и sha256 совпал, берём с диска; иначе качаем и
+сверяем (несовпадение валит таргет). Node/бандлер не вводим. Alpine.js не вводим
+— реактивных виджетов в этом change нет (см. Non-Goals).
+
+**Граница вендора.** В vendor только фетчабельные третьесторонние пакеты (htmx,
+woff2-шрифты). Авторские `jellybit.css` (с вшитым `@font-face` на `../vendor/
+fonts/`) и `app.js` — наш исходник, коммитятся как обычно (качать неоткуда).
+
+**Сборка.** `go:embed templates static` встраивает и vendor, поэтому файлы должны
+быть на диске к моменту `go build`. `task build`/`task run` зависят от `task
+assets`. Бинарь остаётся самодостаточным (всё встроено), репозиторий — без
+вендора. Размен: канонична сборка через Task; голый `go build` без `task assets`
+соберёт бинарь с неполной статикой (css есть, шрифтов/htmx нет) — это принято.
+
+*Альтернативы:* (1) коммитить результат фетча — отвергнуто заказчиком (не хотим
+вендор в репо). (2) npm + бандлер (Parcel/esbuild) через Docker — отвергнуто
+сейчас: бандлить нечего (htmx — готовый `<script>`, своего JS ~ноль), целый
+рантайм ради пары файлов. Дорастёт фронт до своих компонентов — отдельный change
+и esbuild (проще Parcel; есть Go-биндинги, можно без Node).
+
+### D4. Партиалы через `template.ParseFS` нескольких файлов
+
+Выносим общие куски в `web/templates/partials/`: `header.html`,
+`status_badge.html` (карта `state→class/подпись`), `layout_widget.html`
+(виджет «файл источника → раскладка», общий для review и download). Бейдж
+рендерится по `state` — карту держим в одном партиале (`{{define}}`), не
+дублируем по страницам. Текущий `add`-FuncMap сохраняем; при нужде добавляем
+маленькие чистые функции-хелперы.
+
+*Почему:* handoff (п. 7) прямо просит вынести шапку, бейдж и виджет в общие
+партиалы — сейчас они продублированы.
+
+### D5. `download.html` — новая страница `/download/{id}`
+
+Новый GET-хендлер + view-структура: распознавание, файлы→раскладка (тот же
+партиал), раздача, история/таймлайн. Действия — по состоянию (как в index),
+формы переиспользуют уже существующие `/ui/downloads/{id}/*` эндпоинты.
+
+### D6. Ручная раскладка файл→серия — отложена
+
+Клиентский режим ручного редактирования (S·E по файлам, нумерация,
+live-превью) в этот change не входит — операция редкая, не оправдывает
+реактивный виджет и Alpine.js сейчас. На ревью остаётся показ файлов и
+серверного превью (read-only) + существующие действия через формы/htmx
+(уточнить/перераспознать/выбрать кандидата/применить/позже/отклонить).
+
+*Когда понадобится* — заведём отдельный change: тогда же выберем подход
+(клиентская валидация + серверный dry-run превью переиспользует
+`layout.BuildLinks`, чтобы не дублировать правила имён в JS) и добавим Alpine.
+
+### D7. Убрать meta-refresh и инлайн-стили
+
+`<meta http-equiv="refresh">` и `<style>` удаляются. До change живых
+обновлений список статичен (обновление — перезагрузкой). Это осознанный
+временный шаг, чтобы не смешивать презентацию с поведенческим изменением.
+
+## Risks / Trade-offs
+
+- **Устаревание/дрейф htmx** → версия и sha256 в манифесте; обновление
+  осознанное (правка манифеста + `task assets` с проверкой хеша).
+- **URL-rot / офлайн-сборка** (vendor не в репо) → первая сборка требует сети,
+  дальше файлы кэшируются на диске (идемпотентно). Митигация: пиннинг версий +
+  два рабочих зеркала (unpkg/jsdelivr), URL правится в манифесте. Если понадобится
+  жёсткая офлайн-воспроизводимость — внутреннее зеркало или возврат к коммиту.
+- **Регресс действий при переносе шаблонов** (поле без `name`, не та форма) →
+  опираемся на разметку `<!-- action: … -->` в прототипах и существующие
+  хендлеры; проверяем каждое действие по состоянию; ревью кода до archive.
+- **Временная потеря авто-обновления** (D7) → приемлемо, закрывается
+  следующим change; список обновляется перезагрузкой.
+- **Рассинхрон карты статусов** между бейджем и доменом → карта в одном
+  партиале + спека требует полноты покрытия всех состояний.
+
+## Migration Plan
+
+1. Манифест + идемпотентный `task assets` (фетч htmx и шрифтов в gitignored
+   `web/static/vendor/` с проверкой sha256); `task build`/`run` зависят от
+   `assets`; добавить авторские `web/static/{css,js}`, расширить `go:embed`.
+2. Роут `/static/*` + `Cache-Control`.
+3. Партиалы (header, status_badge, layout_widget); переключить index/review.
+4. Добавить `download.html` + хендлер `/download/{id}`.
+5. Убрать meta-refresh и инлайн-стили.
+6. `task lint` + `task test`; ручная проверка действий по состояниям.
+
+Откат — презентационный, без миграций БД и схемы: revert коммита
+восстанавливает прежние шаблоны.
+
+## Open Questions
+
+- Cache-busting CSS: `?v=<hash>` при старте или фиксированный `Cache-Control`
+  с коротким max-age. Решим при реализации D1 (склонность — хеш при старте).
@@ -0,0 +1,63 @@
+## Why
+
+Текущий веб-UI — черновой: инлайн `<style>`, хардкод цветов, грубый
+`<meta http-equiv="refresh" content="5">` для «живости». Готов полноценный
+дизайн (`tmp/design/`) — семантический HTML + один CSS-файл, заточенный ровно
+под нашу архитектуру (server-rendered Go, без сборки/npm/React). Пора перенести
+его в прод, чтобы «единое окно» стало пригодным для ежедневного использования.
+
+Это презентационный change: поведение ядра (приём, распознавание, раскладка,
+петля ревью) не меняется — оформляем уже существующие действия и состояния.
+
+## What Changes
+
+- **Отдача статики:** роут `/static/*` через `http.FileServer` над `web.FS`,
+  `go:embed` для `web/static/{css,js,fonts,vendor}`, разумные `Cache-Control`.
+- **Шрифты self-hosted:** IBM Plex Sans + IBM Plex Mono кладём локально и
+  подключаем через `@font-face` (без Google Fonts CDN — не зависим от внешней
+  сети, не светим referrer).
+- **Дизайн-система:** `jellybit.css` (токены, тёмная тема по настройке ОС) как
+  единственный CSS; новые цвета не вводим — только из токенов.
+- **Зависимости фронта:** вендорные ассеты (htmx + шрифты) **не храним в репо** —
+  `web/static/vendor/` в gitignore. `task assets` идемпотентно добывает их по
+  манифесту (имя/версия/URL/sha256): нет файла или хеш не сошёлся — качает, иначе
+  берёт с диска. Без Node и бандлера. Авторские css/js — обычный коммит.
+- **Общие партиалы:** шапка `.app-header`, бейдж статуса (карта `state→class`),
+  виджет «файл источника → раскладка» (общий для review и download).
+- **Шаблоны:** переносим `index` и `review`, добавляем `download` (просмотр одной
+  загрузки). Референсные `states.html`/`directions.html` в прод не идут.
+- **Убираем meta-refresh** и инлайн-стили; до отдельного change живых
+  обновлений список остаётся статичным (без авто-обновления прогресса).
+- **Клиентский JS по минимуму:** `copyHash` (vanilla), спойлер контекста
+  (нативный `<details>`). Реактивных виджетов нет — все действия идут через
+  формы/htmx.
+- **Превью путей** на экране ревью отображается из серверного расчёта
+  (`internal/layout`), без дублирования правил в шаблоне.
+- **Формы:** проставить `name` полей, совпадающие с Go-структурами обработчиков.
+
+## Capabilities
+
+### New Capabilities
+- `web-ui`: презентационный слой веб-интерфейса — встроенная отдача статики и
+  шрифтов, единая дизайн-система, рендеринг страниц (список/ревью/просмотр),
+  бейджи статусов и клиентские взаимодействия без сборки (копирование infohash,
+  спойлер, режим ручной раскладки с live-превью).
+
+### Modified Capabilities
+<!-- Нет. Доменное поведение приёма/распознавания/ревью не меняется; правила
+     ревью-поверхности живут в docs/specs/review-ux.md (ещё не перенесены в
+     OpenSpec). Этот change оформляет уже существующие действия и состояния. -->
+
+## Impact
+
+- **Код:** `internal/httpapi` (роут статики, новые/обновлённые хендлеры рендера,
+  партиалы), `web/web.go` (`go:embed` статики), новые `web/static/**` и
+  `web/templates/{index,review,download}.html`. Превью зовёт `internal/naming`.
+- **Зависимости:** вендор (htmx + шрифты) добывается `task assets` по манифесту с
+  checksum, не npm/не Go-модуль; Node не вводим. `web/static/vendor/` в gitignore.
+  `go:embed` требует ассеты на сборке, поэтому `task build`/`task run` зависят от
+  `task assets` (идемпотентного) — бинарь остаётся самодостаточным, но голый
+  `go build` без фетча неполноценен (осознанный размен).
+- **Поведение:** без изменений в API/ядре. Вне scope: живые обновления прогресса
+  (отдельный change `web-live-updates`) и клиентский режим ручной раскладки
+  файл→серия (отложен до реальной необходимости — операция редкая).
@@ -0,0 +1,147 @@
+## ADDED Requirements
+
+### Requirement: Встроенная отдача статики
+
+Сервис SHALL отдавать статические ассеты (CSS, клиентский JS, вендорные
+библиотеки, шрифты) из встроенной (`go:embed`) файловой системы под префиксом
+`/static/`, без внешних зависимостей времени выполнения. Бинарь остаётся
+единым и самодостаточным.
+
+#### Scenario: Запрос встроенного ассета
+
+- **WHEN** клиент запрашивает `GET /static/css/jellybit.css`
+- **THEN** сервис отвечает `200` с телом из встроенной FS и корректным
+  `Content-Type`
+
+#### Scenario: Кэширование статики
+
+- **WHEN** сервис отдаёт ответ на запрос под `/static/`
+- **THEN** ответ содержит заголовок `Cache-Control`, разрешающий кэширование
+  ассета браузером
+
+#### Scenario: Несуществующий ассет
+
+- **WHEN** клиент запрашивает несуществующий путь под `/static/`
+- **THEN** сервис отвечает `404` и не раскрывает структуру файловой системы
+
+### Requirement: Шрифты без внешних сетей
+
+Веб-UI SHALL подключать шрифты (IBM Plex Sans, IBM Plex Mono) только из
+локально встроенных файлов через `@font-face`. Страницы MUST NOT обращаться к
+сторонним хостам (Google Fonts CDN и т. п.) для загрузки шрифтов или стилей.
+
+#### Scenario: Нет внешних ссылок на шрифты
+
+- **WHEN** браузер открывает любую страницу веб-UI
+- **THEN** все используемые шрифты загружаются из-под `/static/` того же
+  origin, без обращений к внешним доменам
+
+### Requirement: Единая дизайн-система
+
+Все страницы веб-UI SHALL использовать единственный CSS-файл `jellybit.css` с
+дизайн-токенами; страницы MUST NOT содержать инлайн-`<style>` или хардкод
+цветов вне токенов. Тема (светлая/тёмная) SHALL определяться настройкой ОС
+(`color-scheme` + `prefers-color-scheme`), без отдельного переключателя.
+
+#### Scenario: Тёмная тема по настройке ОС
+
+- **WHEN** в ОS пользователя выбрана тёмная тема и открывается страница
+- **THEN** интерфейс отображается в тёмной палитре из токенов, без действий
+  пользователя
+
+#### Scenario: Нет инлайн-стилей
+
+- **WHEN** рендерится любая страница веб-UI
+- **THEN** оформление берётся из подключённого `jellybit.css`, в разметке нет
+  блоков `<style>` с хардкодом цветов
+
+### Requirement: Бейдж статуса загрузки
+
+Веб-UI SHALL отображать состояние каждой загрузки бейджем
+`<span class="badge st-{STATE}">` с человекочитаемой русской подписью; класс
+определяет цвет группы. Маппинг SHALL покрывать все состояния домена
+(`downloading`, `completed`, `recognizing`, `linking`, `review`, `deferred`,
+`done`, `stuck`, `target_missing`, `failed`, `orphaned`, `cancelled`,
+`reverted`, `deleted`).
+
+#### Scenario: Состояние отрисовано бейджем
+
+- **WHEN** загрузка находится в состоянии `review`
+- **THEN** в списке у неё бейдж с классом `st-review` и подписью «на ревью»
+
+#### Scenario: Полнота покрытия
+
+- **WHEN** загрузка находится в любом из состояний домена
+- **THEN** для него существует класс бейджа и русская подпись (неизвестных
+  состояний без оформления нет)
+
+### Requirement: Страницы веб-UI
+
+Веб-UI SHALL предоставлять страницы: список загрузок с единым окном
+добавления и фильтром/поиском (`/`), экран ревью одной загрузки (`/review/{id}`)
+и страницу просмотра одной загрузки (`/download/{id}`) с распознаванием,
+файлами→раскладкой и историей. Состояние `deleted` SHALL
+быть скрыто в списке по умолчанию (с переключателем «показать всё»).
+(Раздел живой статистики раздачи на странице загрузки — вне scope этого change,
+вводится вместе с живыми обновлениями.)
+
+#### Scenario: Просмотр одной загрузки
+
+- **WHEN** клиент открывает `GET /download/{id}` существующей загрузки
+- **THEN** отрисовывается страница с её распознаванием, файлами, раскладкой и
+  историей
+
+#### Scenario: Удалённые скрыты по умолчанию
+
+- **WHEN** в списке есть загрузки в состоянии `deleted` и фильтр «показать
+  всё» не включён
+- **THEN** они не отображаются, но доступны при включённом переключателе
+
+### Requirement: Действия соответствуют состоянию
+
+Каждая страница SHALL показывать только действия, допустимые в текущем
+состоянии загрузки, и каждое действие-кнопка SHALL отправлять форму с полями,
+имена которых совпадают с ожидаемыми обработчиком (`internal/httpapi`).
+
+#### Scenario: Набор действий по состоянию
+
+- **WHEN** загрузка в состоянии `done`
+- **THEN** доступно действие отката (undo), но недоступны «применить»/«позже»
+
+#### Scenario: Имена полей формы
+
+- **WHEN** пользователь отправляет форму действия (например, «уточнить»)
+- **THEN** поля формы имеют `name`, которые обработчик читает без
+  переименования, и действие исполняется
+
+### Requirement: Превью раскладки через единую логику именования
+
+Превью целевых путей раскладки в веб-UI SHALL вычисляться той же логикой
+именования, что и реальная раскладка (`internal/naming`), а не дублировать
+правила в шаблоне. Показанные пути MUST совпадать с теми, что создались бы при
+применении.
+
+#### Scenario: Превью совпадает с реальной раскладкой
+
+- **WHEN** на экране ревью отображается превью целевых путей для текущей
+  догадки
+- **THEN** эти пути идентичны тем, что создаст применение (те же правила имён,
+  спецвыпусков, мультифайла, запрещённых символов и коллизий)
+
+### Requirement: Клиентские взаимодействия без сборки
+
+Веб-UI SHALL реализовывать клиентскую логику без шага сборки и без реактивных
+фреймворков: копирование infohash (vanilla JS) и раскрытие контекста нативным
+`<details>`. Все действия над загрузкой SHALL выполняться через формы/htmx
+(раундтрип на сервер), без клиентского пересчёта доменного состояния.
+
+#### Scenario: Копирование infohash
+
+- **WHEN** пользователь нажимает кнопку копирования рядом с infohash
+- **THEN** значение infohash копируется в буфер обмена без перезагрузки
+  страницы
+
+#### Scenario: Раскрытие контекста без JS
+
+- **WHEN** пользователь раскрывает спойлер переданного контекста
+- **THEN** контекст показывается нативным `<details>`, без скриптов
@@ -0,0 +1,46 @@
+## 1. Статика и встраивание
+
+- [x] 1.1 Создать структуру `web/static/{css,js,vendor}/`; `web/static/vendor/` в gitignore
+- [x] 1.2 Шрифты IBM Plex Sans + IBM Plex Mono (cyrillic+latin, нужные начертания) — в манифест, фетч в `web/static/vendor/fonts/`
+- [x] 1.3 Перенести `jellybit.css` из `tmp/design/` в `web/static/css/`, добавить `@font-face` на `../vendor/fonts/` (убрать ссылки на Google Fonts)
+- [x] 1.4 Манифест `web/assets.manifest` (путь/URL/sha256) + идемпотентный `task assets` (нет файла или хеш не сошёлся → качаем, иначе с диска); `task build`/`run` зависят от `assets`
+- [x] 1.5 Вынести `copyHash` в `web/static/js/app.js` (vanilla)
+- [x] 1.6 Расширить `go:embed` в `web/web.go` на `static/*`
+- [x] 1.7 Добавить роут `/static/*` (`http.FileServer` + `StripPrefix`) с `Cache-Control`; решить cache-busting CSS (хеш при старте)
+
+## 2. Общие партиалы
+
+- [x] 2.1 Партиал `web/templates/partials/header.html` (`.app-header`)
+- [x] 2.2 Партиал `partials/status_badge.html` — карта `state→class/подпись` для всех 14 состояний (один источник)
+- [x] 2.3 Партиал `partials/layout_widget.html` — виджет «файл источника → раскладка» (общий для review и download)
+- [x] 2.4 Перенастроить `template.ParseFS` в `httpapi` на загрузку партиалов; сохранить/дополнить FuncMap
+
+## 3. Страница списка (index)
+
+- [x] 3.1 Перенести вёрстку `index.html` из `tmp/design/` в `web/templates/index.html` (карточки `range`, единое окно добавления, фильтр/поиск)
+- [x] 3.2 Подключить `jellybit.css` и htmx; убрать `<meta http-equiv="refresh">` и инлайн-`<style>`
+- [x] 3.3 Бейдж статуса через партиал; блок `.card-acts` — условия по `state` (соответствие `downloadView`)
+- [x] 3.4 `deleted` скрыт по умолчанию + переключатель «показать всё»
+- [x] 3.5 Проставить `name` полей форм действий под существующие хендлеры; сверить каждое действие по состоянию
+
+## 4. Страница ревью (review)
+
+- [x] 4.1 Перенести вёрстку `review.html` (догадка, кандидаты `range`, причины, уточнение, действия)
+- [x] 4.2 Строка «нейронка» (`.nn-cand`) — обычный кандидат, не особый режим
+- [x] 4.3 Превью путей через серверное поле `reviewView.Preview` (единая `internal/layout`)
+- [x] 4.4 Сверить поля форм (`apply`/`refine`/`rerecognize`/`type`/`candidate`/`provider`/`nobase`/`defer`) с хендлерами
+
+## 5. Страница просмотра (download)
+
+- [x] 5.1 View-структура `downloadDetailView` (распознавание, файлы, раскладка, раздача, история)
+- [x] 5.2 Хендлер `GET /download/{id}` + роут; 404 на отсутствующую загрузку
+- [x] 5.3 Шаблон `web/templates/download.html` (переиспользует партиал виджета и бейдж)
+- [x] 5.4 Таймлайн истории (`.timeline`) и действия по состоянию
+
+## 6. Проверка и завершение
+
+- [x] 6.1 `task lint` и `task test` зелёные
+- [x] 6.2 Ручная проверка: все действия по каждому состоянию срабатывают, превью на ревью = реальная раскладка
+- [x] 6.3 Проверить отсутствие внешних сетевых запросов (шрифты/стили только с `/static/`)
+- [x] 6.4 `openspec validate --strict web-ui-design-port`
+- [x] 6.5 Ревью кода (до archive) — пройдено; находки MEDIUM-1/2, LOW-2/3 исправлены