# frontend — веб-интерфейс

Зона записи сессий «Фронт». Пройдены S0 (план), S1 (инструменты, скриншот-цикл, токены, витрина),
S2 (оболочка трёх панелей и слой `src/ui/`), S3 (слой данных на контракте API), S3.5 (фикс-пак
оболочки по 24 замечаниям владельца), S3.6 (второй круг: палитра по замеру референсов, модель
вкладок, банк таблицей) и S3.7 (долги слоя данных Ф-49…Ф-51, `sense` обязателен в контракте 0.2.2,
строки интерфейса в каталог и гейт против хардкода, английский язык кода). Продуктовых экранов
ещё нет — они на S4–S7 (`docs/BACKLOG.md`, Ф-1).

## Как запустить

```bash
npm install
npm run dev          # http://localhost:5173/showcase
npm run check        # prettier → eslint → stylelint → contract → tsc → vitest
npm run check:full   # + сборка + скриншоты
npm run shot         # снимки в .shots/ — открыть и посмотреть глазами
npm run scenes       # сценарии интеракций: клик → кадр → проверка состояния
```

Маршрутов семь, и все снимаются (`/showcase` `/scale` `/empty` `/loading` `/error` `/offline`
`/partial`) — маршрут выбирает мир фикстур. Новый экран заводится вместе с маршрутом и строкой
в `scripts/shot.mjs` — расхождение двух списков падает тестом.

Два ключа снимка стоит знать: `--size 1280x764` даёт вьюпорт референса для прямого наложения,
`--dpr 1` снимает то, что видит владелец на своём мониторе (при дефолтных 2x полупиксель CSS
ложится в целый пиксель устройства, и мыло на штрихах иконок в кадр не попадает вовсе).
Замер кадра — `.tooling/py/bin/python scripts/measure.py references/fleet.png .shots/showcase.png`
(окружение запинено в `scripts/requirements.txt`, ставится одной строкой из его шапки).

Для скриншот-цикла нужен 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), в git не едут: кладёт владелец.

## Язык кода и язык интерфейса — разные вещи

Исходники зоны **английские**: комментарии, имена тестов, сообщения ошибок и логи скриптов.
Русский в `src/` живёт ровно в двух местах, и оба — данные: каталог сообщений
`src/i18n/ru.ts` (слова интерфейса, переводится файлом) и фикстуры `src/mock/` (проза книги,
которая стоит вместо настоящей). Держат это два гейта, и правила у них РАЗНЫЕ: ESLint запрещает текст в разметке МЕСТОМ, а не алфавитом (буква в `JSXText` или в читаемом атрибуте — ловится и русский литерал, и английский), а `src/i18n/catalogue.test.ts` подметает то, чего AST не видит, — комментарии, CSS, python-скрипты и корневые конфиги зоны.

## Источник внешнего вида — один

**Замеры с `references/fleet.png`, зафиксированные в `tokens.css`.** Промежуточных дизайн-макетов
нет: инструменты проектирования макетов не используются (решение владельца 02.08). Палитра и
геометрия сняты с референса пипеткой и лежат в `STACK_DECISIONS.md` и §1.1 промта — их берут
как данность, а не выводят заново.

⚠ JetBrains Fleet закрыт (скачивание прекращено 22.12.2025) — добрать новые измерения неоткуда.
Всё, что не замерено (кегли, интерлиньяж, внутренние отступы), подбирается на глаз по скриншоту.