feat(web): редизайн UI под маску эпика #123 + режим «Сравнение»#234
Merged
Conversation
Приводит визуальный слой (static/{index.html,app.css,app.js}) в соответствие
эталонному макету web-mvp-mask.html, приложенному владельцем к issue #123
("Сайт должен быть аналогичен этому! Перепроверь!!!"). Backend-контракт не
меняется — это чисто фронтенд-редизайн поверх уже реализованного #125.
- Design-токены: палитра "Hydra" (light/dark), Inter + JetBrains Mono,
radius/shadow/space/text-scale — перенесены дословно из макета.
- Layout: grid-based .app-shell (topbar 48px + sidebar 220px + main) вместо
flex + resizable-дивайдеров. Resize убран сознательно — макет фиксирует
ширины без единого drag-handle, точное соответствие важнее гибкости.
- Sidebar: навигация разделов (Проверка решений/Загрузчик задач-заготовка
под #186/Глоссарий/Настройки-заглушка) вместо переключателя в topbar;
История/Недавние пути переехали в левую панель "Конфигурация".
- Mode row: 4 кнопки (Сравнение/Тесты/Bench/Microbench-заготовка под #187)
вместо 2-кнопочного сегмента.
- Split-pane: 2 колонки вместо 3 панелей — ErrorCard detail panel и action
cards переехали во вкладку "Детали" правой панели "Результаты" (рядом с
новыми вкладками "Лог"/"Эталон", пока как заглушки/зависящие от Compare).
- Новые UI-примитивы (renderVerdict/kpiGrid/codeBlock/skeletonBlock)
переиспользуются в renderTests/renderBench/renderDetailPanel.
- Fix: display=swap у Google Fonts вызывал layout shift после первой
отрисовки (кнопки meняли ширину при подмене шрифта), из-за чего клик по
"Запустить" мог попасть на соседнюю кнопку режима — заменено на
display=optional.
Вся функциональность #125 (палитра, ErrorCard, action cards, сценарные
кнопки, раздел «Глоссарий» с backlog) сохранена без изменений в логике —
только новая разметка/классы. Полная регрессия tests/test_web.py +
tests/test_web_glossary.py (54 теста, включая 4 source-grep на буквальные
JS-паттерны) проходит без правок. Визуально сверено с макетом через
browser preview (light/dark, sidebar 220px, split-pane 1fr 1fr, шрифты,
мобильный коллапс).
Режим "Сравнение" (Compare) — фронтенд готов (ref-input, mode-row, вкладка
"Эталон"), backend reference-ranking — следующий коммит.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
grade_benchmark() принимает необязательный reference (путь или имя файла среди уже найденных решений). Резолвится — ранжирование считается относительно него, а не самого быстрого решения: вердикты REFERENCE (сам эталон) / FASTER / SIMILAR / SLOWER / MUCH_SLOWER, реализовано новой _apply_reference_ranking() в web/viewmodels.py, core/microbench_runner.py не тронут (общий код с CLI, jёстко берёт min() как базу — параметризовать ради одного web-сценария не стоило). Ответ дополняется reference_source/ reference_file для вкладки "Эталон". Не резолвится (опечатка/чужой файл) — тихий fallback на обычное ранжирование, как если бы reference не передавали, а не ошибка. /api/grade пробрасывает query-параметр reference в grade_benchmark(); mode остаётся "bench" — новый mode= для Compare не вводится, режим разруливается на фронтенде (issue #123-redesign). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…HANGELOG - docs/web-mvp.md: заметка о выполненном редизайне (design-токены, grid layout из web-mvp-mask.html) и новом режиме «Сравнение» (reference- ranking), с явным разграничением от issue #55 (импорт эталона со Stepik — отдельный, не связанный механизм). - CHANGELOG.md [Unreleased]: запись под Added описывает редизайн и Compare. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This was referenced Jul 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Редизайн визуального слоя (
src/stepik_grader/web/static/) под эталонный макетweb-mvp-mask.html, приложенный владельцем к issue #123 ("Сайт должен быть аналогичен этому! Перепроверь!!!"), плюс новый режим «Сравнение» (Compare)..app-shell(topbar 48px + sidebar 220px + main) вместо flex + resizable-дивайдеров. Sidebar — навигация разделов (Проверка решений / Загрузчик задач-заглушка под feat(web): добавить Downloader workflow для загрузки тестов Stepik #186 / Глоссарий / Настройки-заглушка); История/Недавние пути переехали в левую панель "Конфигурация".grade_benchmark(reference=...)ранжирует относительно указанного локального файла (новые вердиктыREFERENCE/FASTERповерх существующихSIMILAR/SLOWER/MUCH_SLOWER), не резолвится → тихий fallback на обычное ранжирование.core/microbench_runner.apply_relative_ranking(общий с CLI) не тронут — новая логика в web-only_apply_reference_ranking().display=swapу Google Fonts вызывал layout shift после первой отрисовки (кнопки меняли ширину при подмене шрифта, из-за чего клик по "Запустить" иногда попадал на соседнюю кнопку режима) — заменено наdisplay=optional.Test plan
pytest tests/ -x -q --tb=short— 875 passed (37 pre-existing subprocess-related failures на этой машине, идентичные на main)ruff check ./ruff format --check .— чистоmypy src/stepik_grader --ignore-missing-imports— чистоCHANGELOG.md— запись под[Unreleased]🤖 Generated with Claude Code