textmachine/frontend/docs/S35_SESSION_PROMPT.md

# Промт: фронт-сессия S3.5 — фикс-пак оболочки (гейт S4)

Ты — фронтенд-сессия TextMachine, шестая по счёту. Зона записи — **только `frontend/`**; сессия
НЕ коммитит — дерево готовит и передаёт на лендинг оркестратору. Протокол зоны — стоящий промт
`FRONTEND_SESSION_PROMPT.md` §«Зона и git», он в силе целиком; итоги, пинги и вопросы владельцу —
ТОЛЬКО зонный журнал `frontend-PROGRESS.md` (в `docs/PROGRESS.md` фронт не пишет). В дереве живут
незакоммиченные файлы ДРУГИХ зон (полигон: `eval/*`, `docs/experiments/22*|23*`) — не трогать
и не «прибирать».

> Промт написан оркестратором №16 (09.08.2026) из **24 замечаний владельца**, снятых с живого
> прогона витрины. Замечания пронумерованы номерами владельца — **(1)…(24)**, номера локальны
> этому промту (как Q-номера паков). В отчёте пройтись по ВСЕМ 24: сделано (кадр ДО/ПОСЛЕ) /
> диспозиция с обоснованием / вопрос В-строкой. Молча пропустить номер нельзя.

## Зачем эта сессия (рамка)

Владельцу НЕ нравится текущее качество оболочки, и **S4 гейчен до её починки** (D39.119 п.4).
Скоуп S3.5 зафиксирован там же: **вкладки по VS Code-модели + Ф-19 + полный список владельца** —
список ниже и есть. Это фикс-пак ОБОЛОЧКИ И ВИТРИНЫ: настоящие экраны S4–S7 (загрузка книги,
механизм подписи банка, содержимое настроек, экспорт) НЕ строить. Общее замечание владельца,
рамка всего пака: модель до сих пор «не понимает связанность между элементами, их визуальную
ценность и не видит картину целиком» — каждый пункт чинить не изолированной заплаткой,
а глядя на весь экран.

## Обязательное чтение до кода (порядок)

1. `FRONTEND_SESSION_PROMPT.md` — стоящий промт: сценарий, жёсткие ограничения, зона и git.
2. Шапка `frontend-PROGRESS.md` + `BACKLOG.md` — пак прямо касается Ф-7, Ф-11, Ф-19, Ф-20, Ф-21,
   Ф-30, Ф-32; их диспозиции не переизобретать.
3. `FRONTEND_PLAN.md` §5 — гейты, замеры, скриншот-цикл (что уже стоит и как расширять).
4. Референсы `frontend/references/`: **fleet.png — главный** (пропорции, зазоры, верхняя полоса,
   статус-полоса) · **antigravity_add_folder.png** — модал добавления (свежий, докинут владельцем
   09.08) · antigravity_chat.png · antigravity_main.png.
5. `docs/product-requirements.md` — продуктовые требования (из реестра, не из памяти).
6. Контракт: зонная копия `frontend/docs/api-contract/openapi.yaml` — формы данных берутся оттуда.

## Инструментальная рамка (обязательна)

- **Скриншот-цикл стоит и остаётся законом:** `npm run shot`, «смотреть на снимок — обязательная
  часть цикла» (`scripts/shot.mjs` шапка). Для этого пака статики МАЛО: половина замечаний — про
  ИНТЕРАКЦИЮ (клики по вкладкам, драг ручки, модалы, ховеры). Playwright уже в зависимостях
  (`playwright` 1.62.1) — писать сценарии интеракций (клик → кадр → проверка состояния) и гонять
  их частью самопроверки; долгоживущие — в `scripts/`, replayable, не в /tmp. Вердикт «сделано»
  без кадра ДО/ПОСЛЕ не принимается.
- **Сверка с референсом:** `npm run shot --size 1280x764` — вьюпорт fleet.png для прямого
  наложения. Замечание (1) дополнительно требует кадра **2560×1440** — владелец смотрит
  на 27" 2K, и дефолтные масштабы не понравились именно там.
- Если в окружении установлен плагин **frontend-design** (официальный Anthropic) — он активируется
  на фронт-задачах сам; его гайды по типографике/палитре применять, но пины `STACK_DECISIONS.md`
  и токен-гейты (одно место для цвета и размера) первичны.
- **Мандат самопроверки:** ревью ИСПОЛНЕНИЕМ своего кода и своих кадров + адверсариальное ревью
  диффа (author≠reviewer) в конце — как в S2/S3. `npm run check` и `npm run check:full` зелёные
  на сдаче; гейт доступности axe зелёный (⚠ при смене фонов пересчитывать контраст — Ф-11 уже
  на пороге WCAG).

## Замечания владельца

### Вкладки — модель VS Code (2, 3; сюда же Ф-19)

**(2) Спам вкладками.** Любой клик по главе плодит вкладку по центру. Сделать ровно модель
VS Code для текстовых файлов:
- одиночный клик по главе → **preview-вкладка** (одна на панель, заголовок курсивом);
- одиночный клик по другой главе **замещает содержимое** preview-вкладки — новая не создаётся;
- **пин** (превращение в постоянную): двойной клик по главе, двойной клик по самой вкладке,
  либо содержательное взаимодействие с открытым содержимым (в VS Code — правка; что считать
  содержательным у нас — реши и запиши в отчёт; простая прокрутка пинить не должна);
- закрытие — как сейчас (крестик/Delete, Ф-17 в силе).

**Ф-19 чинится здесь же:** переключение вкладки размонтирует панель и теряет прокрутку
(`react-aria-components` не рендерит невыбранную TabPanel), пересборка 2284 узлов стоит
70–140 мс. Строка откладывала лекарство «до решения об устройстве оболочки» — это решение
принимается СЕЙЧАС, под задачу: keep-alive панелей или запоминание офсета на вкладку — выбрать
по замеру и записать почему.

Приёмка playwright-сценарием: пять одиночных кликов по разным главам → в ряду ровно ОДНА
preview-вкладка; двойной клик → пин, следующий одиночный клик открывает НОВУЮ preview рядом;
на `/scale` прокрутка дерева до 9000 → уход на другую вкладку → возврат → офсет жив.

**(3) Вид вкладок.** Слишком мелкие, «не отделимы для глаза», слиты с панелью. Вписать вкладки
в панель аккуратнее: активная читается мгновенно (фон/подчёрк/контраст), высота и отступы —
по референсу, а не меньше. Это не «скопировать Fleet ещё точнее», а передать аккуратнее — см. (14).

### Геометрия, масштабы, зазоры (1, 5)

**(1) Дефолтные масштабы великоваты**, особенно на 27" 2K (на 24" терпимее). Ориентир — пропорции
fleet.png ОТНОСИТЕЛЬНО кадра: доли панелей, высоты строк дерева/списков, плотность элементов
внутри панелей («элементы как будто не тот масштаб имеют»). Работать ЗАМЕРОМ — наложение кадра
1280×764 на референс, измеренные доли/пиксели в `FRONTEND_PLAN.md` §5, — не на глаз. Все размеры
через `tokens.css` (токен-гейт Ф-4 стоит и обязателен).

**(5) Выравнивание панелей, зазоров и статус-полосы.** «Особенно заметно по тексту снизу» —
нижняя статус-полоса: базовые линии, вертикальные центры, отступы от краёв — сверить с Fleet
попиксельно; у них аккуратнее.

### Кнопки, иконки, настройки (4, 17, 19, 11)

**(4) Две кнопки поиска, делают одно и то же, лупа в непонятном месте.** У Fleet роли РАЗНЫЕ:
вкладка «Search» в левой панели — полнотекстовый поиск по проекту; лупа в правом верхнем углу —
глобальная палитра «Goto / Search everywhere». Развести роли осмысленно для читалки (поиск по
книге ≠ быстрый переход к главе/термину) либо оставить одну кнопку; кнопка без действия
запрещена (норма Ф-7/Ф-16).

**(17) Иконки «шакальные»** — особенно тогглы левой/правой панели. Разобраться с причиной,
а не перерисовать вслепую: размер сетки иконки vs размер отрисовки, выравнивание на пиксельную
сетку, толщина штриха на тёмном фоне, `shape-rendering`. Туда же — «текст рендерится странновато,
особенно внизу»: проверить сглаживание, вес и размер шрифта статус-полосы (дробные px после
масштабирования дают мыло). Показать кадрами ДО/ПОСЛЕ с зумом.

**(19)+(11) Настройки.** Шестерёнку — в правый верхний угол (как у Fleet), из нижней части
убрать. Открываются НЕ вкладкой — **модальным окном поверх оболочки** (по примеру Claude Code /
ChatGPT). Внутри — честный каркас разделов без содержимого (содержимое — S7), включая два
будущих пункта из (15): светлая тема, язык интерфейса.

### Драг панелей (18; сюда же половина 14)

**(18а) Баг:** фиолетовая полоска ресайза ЗАЛИПАЕТ после отпускания драга. **(18б) Форма:**
полоску сделать тонкой и вписанной ВНУТРИ гепа между окнами — она не должна перекрывать чёрный
геп (владелец: «чёрный фон между окнами не трогать, он идеален» — (14)).

Референс-реализация по слову владельца — проект vojo, скопировать ПОДХОД оттуда:
- `/home/ubuntu/projects/vojo/src/app/components/page/style.css.ts:11-70` — ручка: невидимая
  зона захвата 7px поверх зазора; индикатор — пилюля 2×36px по центру, `opacity: 0` в покое,
  ховер 0.25, драг — подсветка акцентом и рост до 48px; на упоре min сплющивается, на упоре
  max вытягивается («лимит чувствуется тактильно»); переходы 140ms.
- `/home/ubuntu/projects/vojo/src/app/components/page/Page.tsx:191-300` — механика: pointer
  capture на ручке; живая ширина в состоянии компонента, персист одним махом на pointerup
  (не на каждый move); cleanup-эффект снимает `cursor`/`user-select` с body при unmount
  посреди драга — ЭТО и есть лекарство от залипания (Alt-Tab, смена маршрута, pointerup мимо).
- Правый край — та же схема в `ThreadDrawer.tsx:209-241`.

Копируется подход, не файл: у vojo vanilla-extract и folds, у нас токены и CSS-модули.

### Читалка (9, 10, 24)

**(9) Оригинал/перевод разделить мягко визуально.** Сейчас колонки различимы слабо. Очень
деликатно: фон на полтона, тонкий разделитель, отступ — один приём, не три сразу. (Приглушение
колонки оригинала — отдельный хвост Ф-7 на S6, здесь не решать, но не противоречить.)

**(10) Серо-синяя линия вдоль текста** — владелец не смог её прочитать. Это полоска ЗАМЕЧАНИЯ
(`src/ui/Callout.tsx:13`, `Callout.module.css`: синяя `attention` / серая `glance` — выноска
по образцу antigravity_chat). Непрочитываемость подтверждает Ф-21 живым владельцем: смысл
различается только цветом. Переделать так, чтобы значение читалось без объяснения — связью
с замечанием (иконка/счётчик у блока, ховер подсвечивает пару «полоска ↔ текст замечания»),
НО продуктовое слово ступени не выдумывать — словарь на владельце (В-3/Ф-21).

**(24) Пометка черновика.** Пока глава переводится/черновая — мягкая пометка (иконка/ворнинг
с тултипом): «черновой вариант, может быть перегенерирован» — чтобы человек не пугался смены
названий и числа глав (research/27: пере-нарезка легальна). Форму брать из данных контракта
(статусы главы/прогона по спеке); поля не выдумывать — класс ошибки «фикстура выдумала форму»
уже ловился четырежды (Ф-14).

### Вкладка «Замечания» (8)

Владелец: непонятно зачем — всё рисуется в тексте, статусы есть в дереве; «лишнее. Если хочешь
защитить этот дизайн — обоснуй». Два легальных исхода: (а) снять вкладку; (б) защитить —
обоснованием И кадром сценария, который без неё не живёт (кандидат: сводный список по книге,
Ф-32 — пер-книжное чтение замечаний уже есть в памяти клиента). Решение — диспозицией в отчёте,
финальное слово — владельцу.

### Банк памяти (7, 13, 20)

**(7)+(13) Представление банка перепридумать.** Текущее «прям совсем не годится: не
репрезентативно, непонятно, нечитаемо». Больше информации на термин и читаемо для верификации:
оригинал · перевод · тип · род/пол · описание/обоснование · варианты · статус решения · откуда
термин (глава появления); сведения, раскрывающие БУДУЩИЕ события книги, — под спойлер. Поля
брать из контракта (`BankEntry`: `type`/`sense`/`since_ch`/`source`, трёхзначный статус); чего
в контракте нет (пол/род? варианты? спойлер-граница?) — не выдумывать в фикстуре молча,
а ПРЕДЛОЖИТЬ черновиком правки спеки с пометкой «предложено» (право и обязанность зоны —
D39.99 п.4; ратифицирует оркестратор).

**(20) «Подписать банк» и «подписано 10 из 60» непонятны:** что подписываем — банк или термины?
зачем счётчик? кнопка открывает вкладку-заглушку. Механизм подписи = S5, здесь НЕ строить.
В S3.5 — честная витрина: непонятные кнопки-заглушки снять (кнопка без действия запрещена)
либо заменить читаемым состоянием («ждут решения: 50»), формулировки — по словарю подписи
контракта (auto/draft/approved), без выдуманных глаголов.

### Библиотека и метаданные (6, 12, 21, 22, 23)

**(6) «О книге» — метаданных больше, но подходы охранять.** Вытащить больше информации о книге,
при этом НИЧЕГО, что раскрывает принципы/логику работы бэкенда: деньги на экран не выносим
(§4.8 стоящего промта), модели/routing/внутренности пайплайна закрыты разрешающим списком
контракта — это осознанная защита подходов, не пробел. Легально из контракта: язык пары, объём,
главы/юниты, прогресс пофазно, статус, даты, замечания счётчиком.

**(12) Добавление книги — модальным окном**, по antigravity_add_folder.png (сейчас зачем-то
открывается новая вкладка): модал «добавить книгу» → выбор файла/папки → **поле названия:
автор вводит руками ЛИБО скипает — тогда название даёт авто-парсер** (различать эти два
источника) → слоты будущих пер-книжных настроек (каркасом). Сам аплоад (`POST /books`,
multipart, прогресс) строит S4 — здесь модал, его форма и мок-поведение.

**(21) Цветной статус книги — на ИКОНКЕ книги**, не точкой рядом с надписью.

**(23) Наложение системных надписей на название книги/главы** («готово», «нужна подпись»
перекрывают текст) — «исполнение кривое и некрасивое», сама идея бейджа не отвергнута.
Переделать: бейдж/иконка НЕ поверх названия (справа в ряд, отдельным слоем с гарантией
непересечения — эллипсис названию, фикс-место бейджу).

**(22) — вопрос владельца, ответ вписан оркестратором, сессии тут делать нечего:** «где
генерится оригинал названия главы?» Сейчас — фикстуры мока (`src/mock/book.ts:87-131`,
`src/mock/scale.ts:49-51`). В реальном пайплайне заголовок ПЕРЕВОДА движок рендерит
детерминистически из шаблона пары (`configs/langpacks/zh-ru/heading.txt`: «Глава {n}») и вклеивает
в финальный текст первого юнита, а исходный маркер остаётся телом оригинала; метка в дереве
по контракту — из ДАННЫХ (`heading`/`number`, К-3); чем подписывать главу без заголовка —
открытый В-4 на владельце (Ф-30).

### Цвет и тема (14, 15, 16)

**(14) «Слишком точная копия Fleet».** Подразбить цветовую схему чуть оригинальнее — акценты,
выделения, второстепенные поверхности; **чёрный фон между окнами НЕ трогать** («он идеален»).
Это доводка индивидуальности, не редизайн.

**(16) Фон главных окон «серо-неприятный».** Изучить (websearch) рекомендации по тёмным фонам,
приятным глазу: не чистый нейтральный серый — слегка тонированные тёмные (тёплый или холодный
подтон), не абсолютно чёрное полотно под текстом, контраст текста не на максимум. Предложить
2–3 варианта КАДРАМИ, выбрать лучший, показать владельцу оставшиеся как альтернативы. Токены —
в `tokens.css`; контраст пересчитать (Ф-11 у порога; axe-гейт остаётся зелёным).

**(15) Светлой темы нет, выбора языка интерфейса нет.** Оба живут в настройках (каркас — п. (11)).
Строить в S3.5 только если дёшево поверх токенов (палитра уже одно место — оценить честно);
иначе — ЧЕСТНАЯ диспозиция: цена, план, строки Ф-N в `BACKLOG.md`. Молчание нелегально.

## Что НЕ делать

- Не строить экраны S4–S7: загрузка книги, механизм подписи банка, содержимое настроек, экспорт.
- Не править канон контракта; правки спеки — черновиком «предложено», ратифицирует оркестратор.
- Не трогать чужие зоны и чужие незакоммиченные файлы (полигон жив).
- Продуктовые слова не выдумывать: ступень замечания (В-3), фраза паузы (В-6), подпись главы
  без заголовка (В-4) — на владельце.
- Тесты и гейты не подгонять под зелень (D39.121): красный гейт — вопрос оркестратору
  через журнал, не правка гейта.
- Никакого `git add -A`/`git commit` — дерево передаётся на лендинг как есть.

## Отчёт и приёмка

- Таблица по всем 24 номерам: номер → что сделано → кадр/замер (ДО/ПОСЛЕ) → либо диспозиция /
  В-строка. Прогон по номерам — в зонный журнал `frontend-PROGRESS.md`, хвосты — `BACKLOG.md`
  строками Ф-N, вопросы владельцу — В-строками.
- `npm run check` и `npm run check:full` зелёные; кадры в `.shots/`; наложение 1280×764
  на fleet.png и кадр 2560×1440 — приложены.
- Адверсариальное ревью диффа (author≠reviewer) исполнено, находки с диспозициями — в отчёт.
- Промт S4 не писать — его выдаёт оркестратор после приёмки этого пака.