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 не писать — его выдаёт оркестратор после приёмки этого пака.