# frontend — веб-интерфейс Зона записи сессий «Фронт». Пройдены S0 (план), S1 (инструменты, скриншот-цикл, токены, витрина) и S2 (оболочка трёх панелей и слой `src/ui/`). Продуктовых экранов ещё нет — они на S4–S7 (`docs/BACKLOG.md`, Ф-1); вход в S3 заблокирован отсутствием контракта API v0. ## Как запустить ```bash npm install npm run dev # http://localhost:5173/showcase npm run check # prettier → eslint → stylelint → tsc → vitest npm run check:full # + сборка + скриншоты npm run shot # снимки в .shots/ — открыть и посмотреть глазами ``` Маршрутов два, и оба снимаются: `/showcase` — оболочка на фикстуре одной главы, `/scale` — она же на настоящем масштабе книги (2284 раздела, 1200 терминов). Новый экран заводится вместе с маршрутом и строкой в `scripts/shot.mjs` — расхождение двух списков падает тестом. Для скриншот-цикла нужен Chromium Playwright и локальные библиотеки в `.tooling/` (ставятся без sudo, процедура — `docs/FRONTEND_PLAN.md` §4). `npm install` заодно ставит pre-commit хук (`scripts/githooks/`): коммит с frontend-путями не проходит без зелёного `npm run check`; смесь frontend/ с чужой зоной и файлы «никогда не коммитить» блокируются для всех (D39.88). Обход — `git commit --no-verify`. ## Что здесь будет Веб-приложение поверх `../platform/`. MVP — не IDE, а **дашборд + читалка**: библиотека книг, наблюдение за прогоном, подпись банка памяти, сравнение оригинала с переводом, добавление главы. Редактирование перевода прямо в интерфейсе — ПОЗЖЕ (тогда появится редактор текста; в MVP не нужен). Десктоп — то же самое приложение в окне (Tauri), отдельной логики не имеет. В MVP не делается. ## Документы - [`docs/FRONTEND_SESSION_PROMPT.md`](docs/FRONTEND_SESSION_PROMPT.md) — промт фронт-сессий: область этапов, референсы с измеренными значениями, экраны, ограничения, порядок работы. - [`docs/STACK_DECISIONS.md`](docs/STACK_DECISIONS.md) — пины версий, ловушки и список того, что достраивается в движке. Источник: многоагентное исследование 02.08.2026. - [`docs/FRONTEND_PLAN.md`](docs/FRONTEND_PLAN.md) — план S0: сверенные пины, карта `src/`, слои каскада, правила поддерживаемости в проверяемой форме, протокол скриншот-цикла, перепроверенные замеры референса и список расхождений витрины. - [`docs/frontend-PROGRESS.md`](docs/frontend-PROGRESS.md) — журнал зоны: текущее состояние, решения владельца по продукту, открытые вопросы, хроника сессий. Имя с префиксом `frontend-` намеренно: журнал оркестратора называется `docs/PROGRESS.md`, и одноимённые файлы путали ссылки. Прогресс фронта пишут сюда все, включая оркестратора (слово владельца 04.08). - [`docs/BACKLOG.md`](docs/BACKLOG.md) — зонный бэклог фронта. - [`docs/API_CONTRACT_INPUT.md`](docs/API_CONTRACT_INPUT.md) — ⚠ **исполнено, не поддерживается:** вход в контракт, написанный до него. Всё содержимое ушло в спеку и спутник ниже; остаётся как аудиторский след (как каждая просьба выводилась из кода движка), место ему в `docs/archive/`. - [`docs/api-contract/openapi.yaml`](docs/api-contract/openapi.yaml) — **сам контракт v0, OpenAPI 3.1: нормативная поверхность.** Линтуется spectral шестым шагом `npm run check`, из неё генерится `src/api/schema.ts`. Черновик на ратификацию: дом готовой копии — `docs/architecture/14-api-contract/`, зона оркестратора. - [`docs/API_CONTRACT_DRAFT.md`](docs/API_CONTRACT_DRAFT.md) — спутник спеки: откуда взято каждое решение (выведено из кода движка · предложено фронтом · открыто), обоснования, зависимости и двенадцать открытых вопросов. При расхождении по форме побеждает YAML, при вопросе «почему так» — этот файл. - `references/` — три скриншота-референса (Fleet, Antigravity). ## Источник внешнего вида — один **Замеры с `references/fleet.png`, зафиксированные в `tokens.css`.** Промежуточных дизайн-макетов нет: инструменты проектирования макетов не используются (решение владельца 02.08). Палитра и геометрия сняты с референса пипеткой и лежат в `STACK_DECISIONS.md` и §1.1 промта — их берут как данность, а не выводят заново. ⚠ JetBrains Fleet закрыт (скачивание прекращено 22.12.2025) — добрать новые измерения неоткуда. Всё, что не замерено (кегли, интерлиньяж, внутренние отступы), подбирается на глаз по скриншоту.