TPA Mockup — презентационный макет

Назначение

mockup/index.html — самодостаточный HTML-макет TPA для показа интерфейса.

Макет:

• не подключается к БД и не вызывает API;
• использует реальные партии QRA0R за 2026-09 из PSS4 для списка, деталей и сравнения;
• DRY YIELD оставлен демонстрационным, потому что ODC-куб недоступен;
• должен открываться двойным кликом в браузере;
• использует вшитый base64-логотип static/logo.png;
• в UI показывает только BatchIdent; внутренние db_id, BatchID и SAP не отображаются.

Текущая структура — прежний UI TPA, но визуальное оформление взято из DESIGN.md:

• кремовый фон #fdfcfc;
• моноширинный шрифт;
• плоские панели без теней;
• hairline-границы;
• интерактивные элементы с радиусом 4px;
• семантические цвета: accent #007aff, danger #ff3b30, warning #ff9f0a, success #30d158.

Текущее состояние

Последняя сверка: 2026-10-09.

Параметр	Значение
Файл	C:\AUTO\TPA Tobacco Production Analyzer_v2\mockup\index.html
Тип	один HTML-файл, CSS/JS внутри
Логотип	вшит как data:image/png;base64,...
Последний известный размер	917375 байт ≈ 896 КБ
Статус данных	партии, параметры и PPL — реальные данные PSS4 за 2026-09; DRY YIELD — демо из-за недоступности ODC
Внешний слайд-каркас	удалён из DOM; макет начинается сразу с .app
Модальное окно описания	есть, открывается автоматически и по кнопке
Размытие фона	blur(4px) по краям; активный блок показывается без размытия; на сторис-страницах 01 · BPWATTS — кратко, 02 · Тул и демо, 03 · Результат и шаги blur-панели отключены
Модальное окно	всегда по центру, без горизонтального сдвига
Индикатор блока	без стрелки и без внешнего outline; добавлен синий бейдж #blockBadge у активного блока
Навигация по блокам	7 пунктов: 01 · BPWATTS — кратко, 02 · Тул и демо, 03 · Результат и шаги (topbar-псевдо-блоки сторис BPWATTS), 04 · Партии, 05 · AI-анализ, 06 · Сравнение партий, 07 · AI по Blend; выключены в навигации: Поиск по параметру, TimeLine, InBatch Рецепт, Настройки (вкладки сохранены, но в навигацию не входят)
Адаптивность	media queries 1100px, 900px, 560px; html, body { overflow-x: hidden; }

Структура страницы

1. Topbar

Вверху макета:

• логотип TPA;
• заголовок TPA — Tobacco Production Analyzer;
• подзаголовок PSS4 Runtime / local :1131;
• бейдж DEMO · реальные партии QRA0R · DRY — демо;
• статус DB OK;
• uptime;
• демо-кнопки: LCM, BackLog, Настройки, Логи, BPWATTS, Перезагрузить, Выключить;
• 📖 BPWATTS открывает модальное описание блока 01 · BPWATTS — кратко;
• ⚙ Настройки — блок выключен в навигации, клик окно не открывает.

2. Полоса текущего блока

Под topbar находится .block-bar.

Слева:

• #blockIndicator — текущий блок, при старте [+] 01 · BPWATTS — кратко;
• клик по индикатору открывает окно описания блока.

Справа:

• кнопка [?] О блоке;
• подсказка ← → переключение блоков · демо-данные.

3. Фильтры

Панель filters:

• период С / По;
• фильтр по коду/названию смеси или ID смеси;
• поиск смеси QRA0R;
• поиск по BatchIdent: 1100903, 1200902;
• CF Name CFS Ladoga CPS;
• выбор смеси: QRA0R «BS141D» (30 партий);
• кнопки Загрузить смеси и ✕ Сбросить фильтр;
• тип сырья: Lamina (30), Aroma (0).

4. Список партий

Панель batches-panel содержит реальные партии смеси QRA0R за 2026-09.

Показываются колонки:

• выбор;
• избранное;
• дата;
• смесь;
• версия рецепта;
• CF Name;
• IBC / non-IBC;
• AROMA;
• BatchIdent;
• ProdQTY;
• DRY YIELD;
• линия.

В текущем макете выбраны две партии:

• 1100903 / DRY YIELD 86.7% (демо);
• 1200902 / DRY YIELD 89.6% (демо).

5. Вкладки деталей

Панель detail-panel содержит 7 вкладок:

№	ID вкладки	Название	Назначение
1	tab-single	Одна партия	карточка партии: параметры участков, цели PPL, статусы, ручные корректировки
2	tab-ai	AI Анализ	демо-чат агента по TPA_AI_Chat_.md: поток табака на входе FTD по 14 партиям, панель параметров справа
3	tab-compare	Сравнение	сравнение двух партий: Δ, отклонение, цели, статусы, Fact / Target
4	tab-params	🔎 Поиск по параметру	матрица выбранного параметра по партиям: DRY YIELD, Batch Size, Final-WB
5	tab-lcm	TimeLine	временная ось партии 1100903: старт, AB Feeder, AddBack, Master WB, Final WB, завершение
6	tab-inbatch	InBatch Рецепт	рецепт партии 1100903: CL / BU / FC / Stems / ET, ISS Rate, PPL-статусы
7	tab-blendai	🤖 AI по Blend	демо AI-обсуждения по blend

📖 BPWATTS — topbar-кнопка; в навигации модального окна идёт как псевдо-блок 01 · BPWATTS — кратко (сторис-страница 1). Сторис-страницы 02 · Тул и демо и 03 · Результат и шаги — псевдо-блоки без вкладки. Настройки — topbar-кнопка, в навигации выключена.

Что изображено на макете

Партии, параметры и PPL в макете — реальные данные PSS4 за 2026-09. DRY YIELD — демонстрационный, так как ODC-куб недоступен.

Общая сцена

• Макет показывает одностраничный интерфейс TPA для смеси QRA0R за период 2026-09.
• В панели партий показано 7 реальных партий из 30 доступных за месяц.
• Выбраны 2 партии:
  • 1100903 — QRA0R V.19, 2026-09-11, DRY YIELD 86.7% (демо);
  • 1200902 — QRA0R V.19, 2026-09-20, DRY YIELD 89.6% (демо).
• Основной сценарий: оператор переходит в AI Анализ и запускает имитацию реального чата с агентом — разбор потока табака на входе FTD по 14 партиям (TPA_AI_Chat_.md).
• Ключевая история AI-чата: поблендовый разброс WB-Speed / расчётного потока, факторы на входе FTD и параметры, которые задают скорость потока; панель справа по-прежнему показывает сравнение 1100903 vs 1200902.

По текстам

Topbar

Тексты и кнопки шапки:

• TPA — Tobacco Production Analyzer
• PSS4 Runtime / local :1131
• 🤖 AI Анализ — демо
• DEMO · реальные партии QRA0R · DRY — демо
• DB OK
• Uptime: 12 d 4 h
• кнопки:
  • LCM
  • 📋 BackLog
  • ⚙ Настройки — блок выключен в навигации (клик окно не открывает)
  • 📋 Логи
  • 📖 BPWATTS — открывает описание блока 01 · BPWATTS — кратко

Полоса текущего блока

Под шапкой:

• [+] 01 · BPWATTS — кратко — текущий блок при старте, меняется при переключении блоков
• [?] О блоке
• клик — описание блока

Панель фильтров партий

Поля и кнопки:

• Смесь → QRA0R
• С → 2026-09-01
• До → 2026-09-30
• Загружено: 1 смесь · 30 партий · DRY YIELD — демо-значения (ODC недоступен)
• Lamina (30)
• Aroma (0)

Таблица партий

Заголовки таблицы:

• чекбокс
• Избр.
• Дата
• Смесь
• Версия Рецепта
• CF Name
• IBC / non-IBC
• AROMA
• BatchIdent
• ProdQTY
• DRY YIELD
• Линия

Реальные строки в макете:

BatchIdent	Дата	Рецепт	ProdQTY	DRY (демо)	Линия
1010905	2026-09-01	QRA0R V.19	11 104 kg	88.4	LA
1040903	2026-09-04	QRA0R V.19	11 236 kg	89.1	LA
1100903	2026-09-11	QRA0R V.19	10 943 kg	86.7	LA
1130911	2026-09-13	QRA0R V.20	11 000 kg	88.9	LA
1170903	2026-09-17	QRA0R V.19	11 234 kg	89.4	LA
1200902	2026-09-20	QRA0R V.19	11 015 kg	89.6	LA
1300905	2026-09-30	QRA0R V.19	11 094 kg	89.9	LA

Выбраны чекбоксами: 1100903 и 1200902.

Вкладки

Видимые вкладки:

• 📦 Партии
• 🤖 AI Анализ
• ⚖ Сравнение партий
• 🔍 Поиск по параметру
• ⏱ TimeLine
• 📋 InBatch Рецепт
• 🧬 AI по Blend

Блок 04 · Партии

В правой детали партии:

• 1100903 · QRA0R «BS141D» · QRA0R V.19 · 2026-09-11 03:25 · CF CFS Ladoga CPS · IBC · 10 943 kg · линия LA · DRY YIELD 86.7% (демо)
• кнопки:
  • 📊 Экспорт в Excel
  • 📁 Открыть папку
  • Скрыть N/A
  • Только N/A

Таблица параметров детали партии:

Секция / Параметр	Факт	Цель (PPL)
AB Feeder RS Comas - Total Wet Weight ✏️	50.0 kg	—
Final-WB-Dry-Real ✏️	9 567.09 kg	—
Final-WB-Qty-Real ✏️	11 050.3 kg	—
Batch Size	10 000 kg	В ЦЕЛИ 10 000 🎯
CL - Tobacco ISS Rate	0.0 %	В ЦЕЛИ 0 🎯
BU - Tobacco ISS Rate	26.0 %	В ЦЕЛИ 26 🎯
FC - Tobacco ISS Rate	37.5 %	В ЦЕЛИ 37.5 🎯
Stems ISS Rate	14.5 %	В ЦЕЛИ 14.5 🎯
Stems Estimated Moisture (QA 167)	12.5 %	В ЦЕЛИ 12.5 🎯
ET ISS Rate	22.0 %	В ЦЕЛИ 22 🎯
ET Application Ratio	31.28 %	В ЦЕЛИ 31.28 🎯

Текстовые акценты:

• ✏️ — ручное изменение;
• 🎯 — целевой параметр PPL;
• DRY YIELD помечен как демо.

Блок 05 · AI-анализ

Слева в AI-зоне:

• статус имитации:
  • начальное: [AI DEMO] Готов к имитации: обсуждение → результат
  • при запуске: [AI DEMO] Обсуждение: ...
  • после завершения: [AI DEMO] Готово: анализ потока FTD сформирован
• кнопки:
  • ▶ Имитация обсуждения
  • ↺ Сброс
  • ⚡ Анализ сравнения
  • 🆕 Новый диалог
  • 📋 Параметры

Начальный текст чата — первый вопрос эксперта из TPA_AI_Chat_.md:

• необходимо провести анализ по всем партия по параметры потока табака на входе в FTD, необходимо сравнить поблендно и определить поему по каким то партиям поток низкий, а по каким то поток высокий. Даже в рамках одного бленда потоки отличаются

Тексты шагов имитации:

• Контекст: 14 партий · поток табака на входе FTD · поблендовое сравнение · RAG: PR-OM-1500-III
• ответ AI 1/3: поблендовый анализ потока по 14 партиям (таблицы WB-Speed / расчётный поток, QRA17–QRA1B, сводка причин, рекомендации)
• вопрос эксперта 2/3: посмотри какие факторы еще есть влияющие на поток на входе в FTD
• ответ AI 2/3: факторы потока (температура сушки, целевая OV, DCC ExitOV, RunTime, TBS Residence, O2, разряжение, горелка)
• вопрос эксперта 3/3: какие параметры повлияли на скорость потока на входе в FTD разных партиях, напиши анализ
• ответ AI 3/3: параметры WB-Speed, причинно-следственная цепочка контура FTD, ключевые выводы

Итоговые ответы AI рендерятся из markdown файла TPA_AI_Chat_.md (таблицы, списки, code-блок контура управления), без прежнего скелета «Смесь / Партии / DRY YIELD / …».

Быстрые вопросы:

• Поблендовый разброс потока
• Факторы на входе FTD
• WB-Speed / температура
• Рекомендации

Поле ввода:

• placeholder: Задайте вопрос о партии... (Shift+Enter = новая строка, Enter = отправить)
• кнопка: Отправить

Справа в AI-зоне:

• 📋 Параметры — 1100903 vs 1200902
• поиск: 🔍 Поиск по ID или наименованию...
• фильтры:
  • скрыть N/A
  • только N/A
  • Δ нет
  • Δ средняя
  • Δ высокая
• таблица сравнения параметров:

Параметр	1100903	1200902	Δ	Цель (PPL)
AB Feeder GQ1 - Total Wet Weight	1 064.201	220.5803	−843.6207	—
AB Feeder 829 - Total Wet Weight	0	743.7	+743.7	—
AB Feeder 833 - Planned Wet Weight	2 300	0	−2 300	—
AB Feeder GQ3 - Total Wet Weight	1 114.147	0	−1 114.147	—
AB Feeder RS Comas - Total Wet Weight ✏️	50.0	50.0	0	—
Final-WB-Dry-Real ✏️	9 567.09	9 529.785	−37.305	—
Master-WB-Dry-Real ✏️	6 207.542	6 140.4	−67.142	—
Batch Size	10 000	10 000	0	В ЦЕЛИ 10 000 🎯

Блок 06 · Сравнение партий

Тексты:

• Сравнение параметров — QRA0R
• Смесь → QRA0R
• С → 2026-09-01
• До → 2026-09-30
• ⟳ Обновить
• ⬇ Excel
• Выбрано 2 партии. В демо показаны основные различия.

Шапки колонок:

• Параметр
• ID
• 1100903
• QRA0R · 86.7 (демо)
• QRA0R V.19
• 9 h 30 m
• 1200902
• QRA0R · 89.6 (демо)
• QRA0R V.19
• 12 h 43 m
• Δ
• Отклонение
• Цель
• Статус
• Fact / Target

Строки сравнения в макете:

Параметр	ID	1100903	1200902	Δ	Откл.	Цель	Статус
AB Feeder GQ1 - Total Wet Weight	—	1 064.201	220.5803	−843.6207	−79.3%	—	высокое отклонение
AB Feeder GQ1 - Weight 1	—	1 064.201	220.5511	−843.6499	−79.3%	—	высокое отклонение
AB Feeder 829 - Total Wet Weight	—	0	743.7	+743.7	—	—	из нуля в значение
AB Feeder 833 - Planned Wet Weight	—	2 300	0	−2 300	—	—	из значения в ноль
AB Feeder GQ3 - Total Wet Weight	—	1 114.147	0	−1 114.147	—	—	из значения в ноль
AB Feeder GQ2 - BatchID 1 ✏️	—	0	N/A	—	—	—	нет факта
AB Feeder RS Comas - Total Wet Weight ✏️	—	50.0	50.0	0	0%	—	норма
Final-WB-Dry-Real ✏️	—	9 567.09	9 529.785	−37.305	−0.4%	—	норма
Master-WB-Dry-Real ✏️	—	6 207.542	6 140.4	−67.142	−1.1%	—	норма
Batch Size	3	10 000	10 000	0	0%	В ЦЕЛИ 10 000 🎯	🎯 В цели

После таблицы:

• ⬇ Excel · PDF · CSV — экспорт сравнения
• TPA_Compare_QRA0R_2b_20260930.xlsx · 3 528 строк

Демо-вкладки (выключены в навигации)

• Поиск по параметру: выбор параметра (DRY YIELD, Batch Size, Final-WB-Dry-Real), KPI, матрица по 7 партиям, N/A и статусы PPL.
• TimeLine: временная ось партии 1100903 03:25–12:55, участки, события, ручные корректировки.
• InBatch Рецепт: компоненты CL / BU / FC / Stems / ET, ISS Rate, Estimated Moisture, Application Ratio, цели PPL.

Модальное окно о блоке

Тексты:

• заголовок по умолчанию: Блок
• при открытом окне оно остаётся по центру (justify-content: center), стрелка не используется; активный блок выделяется компактным бейджем с подписью блока и spotlight-фоном.
• навигация:
  • [←] Пред. блок
  • счётчик вида 1 / 7; для блоков вне списка (вручную открытые вкладки) — — / 7
  • След. блок [→]

По блокам

Блок	Что изображено на макете
01 · BPWATTS — кратко	Сторис-страница (topbar-псевдо-блок, кнопка 📖 BPWATTS): проблема — >1000 параметров PSS, анализ по короткому стандартному перечню, Excel вручную, причины не локализуются; решение — TPA как единый контур IP + Process Engineering + AI, эксперты подтверждают выводы, локальный AI без внешних сервисов
02 · Тул и демо	Сторис-страница (псевдо-блок): TPA обращается в PSS, >400 параметров линии Lamina, сравнение с рецептом, подсветка отклонений, AI-преанализ с причинами и рекомендациями; реализовано: KB/тренинги по оборудованию, описания параметров Lamina с влиянием, Trim-влагомеры, лоты/композия мешки, ручные изменения; демо — вкладки 04–07 макета
03 · Результат и шаги	Сторис-страница (псевдо-блок): результат — быстрая локализация причины, полный анализ массива, опыт возвращается в KB; кто юзает (IP/PE эксперты, производство), как реагировать (подтверждение/отклонение гипотез, уроки смеси), говернанс (фидбек LLM, продвижение уроков в RAG/документацию, локальный контур)
04 · Партии	Список 7 реальных партий смеси QRA0R, панель фильтров, выбраны 1100903 и 1200902; справа — детали партии 1100903: полный список параметров, PPL-сводка, демо-DRY YIELD 86.7%, цели PPL/рецепта и ручные корректировки
05 · AI-анализ	AI-чат с имитацией реального диалога из TPA_AI_Chat_.md (3 хода эксперта / 3 ответа AI по потоку FTD), быстрые вопросы, поле ввода и справа — сравнение параметров 1100903 vs 1200902
06 · Сравнение партий	Таблица сравнения выбранных партий по реальным параметрам: AB Feeder GQ1/GQ2/GQ3/829/833/RS Comas, Final-WB, Master-WB, Batch Size; выделены отклонения и статусы; что смотреть: Δ, отклонения, переходы, ручные корректировки
07 · AI по Blend	Демо AI-обсуждения по blend: 7 партий QRA0R, средний демо DRY 88.9% (разброс 86.7–89.9), аутляеры 1100903 / 1300905, PPL-контекст, гипотеза и таблица партий blend; анализ всего blend, а не только конкретных партий
🔎 Поиск по параметру (выключен в навигации)	Интерактивная матрица выбранного параметра по 7 партиям: KPI, значения, N/A, цели PPL
⏱ TimeLine (выключен в навигации)	Временная ось партии 1100903: 6 участков, таблица событий, ручные корректировки
📋 InBatch Рецепт (выключен в навигации)	Состав партии 1100903: 5 компонентов, ISS Rate, влажность, application ratio, цели PPL
⚙ Настройки (выключен в навигации)	Topbar-кнопка ⚙ Настройки; блок выключен, клик окно не открывает
Модальное окно	Описание текущего блока, счётчик N / 7, кнопки перехода на предыдущий/следующий блок

Блок 04 · Партии

ID: tab-single.

Показывает выбранную партию:

1100903 · QRA0R «BS141D» · QRA0R V.19 · 2026-09-11 03:25 · CF CFS Ladoga CPS · IBC · 10 943 kg · линия LA · DRY YIELD 86.7% (демо)

Секции параметров:

• Manual / WB — ручные значения AddBack feeders и WB;
• Recipe / PPL — рецептурные параметры и цели PPL.

Маркеры:

• 🎯 — целевой параметр PPL;
• ✏️ — значение изменено вручную.

Примеры реальных параметров:

• AB Feeder RS Comas - Total Wet Weight ✏️ = 50.0 kg;
• Final-WB-Dry-Real ✏️ = 9 567.09 kg;
• Final-WB-Qty-Real ✏️ = 11 050.3 kg;
• Batch Size = 10 000 kg, цель PPL 10 000, статус В ЦЕЛИ;
• ET Application Ratio = 31.28 %, цель PPL 31.28.

Блок 05 · AI-анализ

ID: tab-ai.

Макет показывает:

• чат с LLM;
• имитацию реального диалога эксперта с агентом из TPA_AI_Chat_.md;
• markdown-ответы AI (таблицы, списки, code-блок контура FTD);
• панель параметров справа (1100903 vs 1200902);
• кнопки действий.

Имитация AI-обсуждения:

• статусная строка #aiDemoStatus показывает состояние: готов / обсуждение / готово;
• кнопка #btnAiDemoTop в topbar 🤖 AI Анализ — демо сразу переходит на вкладку tab-ai и запускает имитацию;
• кнопка #btnAiDemoRun запускает имитацию вручную;
• во вкладке AI по Blend кнопка #btnBlendDemoRun запускает blend-демо, автозапуск — при входе на вкладку;
• кнопка #btnAiDemoReset сбрасывает чат;
• AI-демо перезапускается при каждом переходе на вкладку tab-ai; работает даже при открытом модальном окне;
• кнопка #btnAiDemoTop принудительно перезапускает демо, даже если макет уже на вкладке tab-ai;
• шаги: контекст 14 партий / поток FTD → ответ AI 1/3 → вопрос эксперта 2/3 → ответ 2/3 → вопрос 3/3 → ответ 3/3;
• тексты реплик вшиты в source.html / index.html из TPA_AI_Chat_.md (макет по-прежнему открывается без сети).

Панель справа показывает параметры для анализа:

• AB Feeder GQ1 - Total Wet Weight;
• AB Feeder 829 - Total Wet Weight;
• AB Feeder 833 - Planned Wet Weight;
• AB Feeder GQ3 - Total Wet Weight;
• AB Feeder RS Comas - Total Wet Weight;
• Final-WB-Dry-Real;
• Master-WB-Dry-Real;
• Batch Size.

Блок 06 · Сравнение партий

ID: tab-compare.

Показывает сравнение:

• 1100903 · QRA0R · DRY 86.7 (демо) · QRA0R V.19 · 9 h 30 m;
• 1200902 · QRA0R · DRY 89.6 (демо) · QRA0R V.19 · 12 h 43 m.

Колонки сравнения:

• Параметр;
• ID;
• значения по партиям;
• Δ;
• Отклонение;
• Цель;
• Статус;
• Fact / Target.

Фильтры:

• Все;
• Высокое отклонение;
• Среднее отклонение;
• Заметное отклонение;
• Из нуля в значение;
• Из значения в ноль;
• Норма;
• Отсутствует;
• 🎯 В цели;
• ⚠️ Вне цели;
• 🧬 Цели рецепта (PSS4);
• ✏️ Корректировка вручную;
• Скрыть N/A;
• Только N/A.

Блок 07 · AI по Blend и выключенные блоки

AI по Blend — блок 07 навигации: демо AI-обсуждения на уровне смеси (весь blend за период, а не только конкретные партии). Поиск по параметру, TimeLine, InBatch Рецепт и Настройки выключены в навигации модального окна: вкладки сохранены и кликабельны, но в навигацию не входят, счётчик для них показывает — / 7, кнопка ⚙ Настройки окно не открывает.

ID	Название	Что описано в модальном окне
about	📖 BPWATTS (01 · BPWATTS — кратко)	сторис-страница 1: проблема (>1000 параметров PSS, короткий стандартный перечень, Excel вручную, пропущенные связи), решение (TPA: IP + Process Engineering + AI), локальный AI без внешних сервисов
tool	02 · Тул и демо	сторис-страница 2: TPA ↔ PSS, >400 параметров Lamina, сравнение с рецептом, подсветка отклонений, AI-преанализ и рекомендации; KB/тренинги, описания параметров с влиянием, Trim-влагомеры, лоты/композия мешки, ручные изменения; демо — вкладки 04–07
next	03 · Результат и шаги	сторис-страница 3: результат (быстрая локализация причины, полный анализ, опыт в KB), кто юзает (IP/PE, производство), как реагировать (гипотезы, уроки), говернанс (фидбек LLM, RAG, локальный контур)
tab-blendai	🤖 AI по Blend	blend-анализ: 7 партий QRA0R, KPI blend, средний демо DRY 88.9% (разброс 86.7–89.9), аутляеры, PPL и версии рецепта, гипотеза, уроки/RAG, «Свой вопрос»
tab-params	🔎 Поиск по параметру	выключен в навигации; интерактивная матрица: DRY YIELD, Batch Size, Final-WB-Dry-Real; KPI, N/A, цели PPL
tab-lcm	TimeLine	выключен в навигации; временная ось партии 1100903: старт, AB Feeder, AddBack, Master WB, Final WB, завершение
tab-inbatch	InBatch Рецепт	выключен в навигации; состав CL / BU / FC / Stems / ET, ISS Rate, влажность, application ratio, PPL
settings	⚙ Настройки	выключен в навигации; topbar-кнопка окно не открывает (подсказка в title)

Модальное окно «О блоке»

Окно показывает, какой блок открыт сейчас и что он означает.

Открывается:

• автоматически при загрузке макета через 450 мс, стартовый блок — 01 · BPWATTS — кратко;
• автоматически при смене вкладки, если окно было закрыто, через 420 мс;
• по кнопке [?] О блоке;
• по клику на #blockIndicator.

Закрывается:

• крестиком #btnBlockModalClose;
• кликом по фону;
• клавишей Esc.

Навигация внутри окна:

• [←] Пред. блок;
• След. блок [→];
• стрелки клавиатуры ← / →.

При навигации:

• для вкладок меняется активная вкладка в фоне;
• для псевдо-блоков about/tool/next (сторис-страницы 01–03) активная вкладка не меняется; spotlight снимает размытие со всей .topbar, бейдж скрывается, а в случае about подсвечивается topbar-кнопка 📖 BPWATTS;
• для сторис-страниц about/tool/next дополнительно отключены blur-панели: страница под модальным окном остаётся без размытия и без полупрозрачной подложки;
• меняется #blockIndicator;
• меняется заголовок и текст окна;
• обновляется счётчик вида 1 / 7; для блоков вне списка (вручную открытые вкладки) — — / 7.

Фон:

• пока окно открыто: blur-слои blur(4px) и полупрозрачный фон rgba(253, 252, 252, 0.34) накрывают макет вокруг активного блока;
• без размытия остаётся активная область блока (.detail-panel) или вся .topbar для псевдо-блоков;
• стрелка не используется;
• активный блок выделяется компактным синим бейджем #blockBadge с подписью блока;
• активная вкладка дополнительно подсвечивается акцентным цветом;
• модальное окно всегда остаётся по центру (justify-content: center) и не сдвигается по горизонтали;
• spotlight и бейдж пересчитываются при открытии, навигации, анимации вкладки, скролле и resize;
• при закрытии: все blur-слои, рамка и бейдж исчезают.

Подсветка активного блока:

• при открытии модального окна на body добавляется класс block-modal-open;
• .modal-backdrop больше не размывает фон: он прозрачный и нужен только для окна и клика мимо;
• resetModalAlignment() сбрасывает transform у .modal, чтобы окно не смещалось;
• .spotlight-overlay содержит четыре .spotlight-pane (top/bottom/left/right), которые формируют blur-фон вокруг .detail-panel или всей .topbar для псевдо-блоков;
• #blockBadge — фиксированный компактный бейдж, он ставится рядом с видимой частью .detail-panel; для about / settings бейдж не показывается;
• позиция бейджа и spotlight-панелей пересчитывается при открытии окна, переходе между блоками, завершении анимации вкладки, скролле и resize;
• при закрытии окна класс, бейдж и blur-панели убираются.

Ключевые JS-объекты

Имя	Назначение
blockOrder	порядок блоков (7): about, tool, next, tab-single, tab-ai, tab-compare, tab-blendai; вне навигации: tab-params, tab-lcm, tab-inbatch, settings
slides	ссылка на blockOrder (в текущей навигации используется goBlock)
setPseudoBlock(id)	отмечает блоки из PSEUDO_BLOCKS (about, tool, next, settings) как активный псевдо-блок и включает классы block-pseudo-open, block-about-open, block-tool-open, block-next-open, block-settings-open
getHighlightTarget()	возвращает .detail-panel / .tab-pane.active, либо .topbar для любого псевдо-блока
goToBlock(id)	переключает реальный блок или псевдо-блоки (about / tool / next / settings) без смены вкладки
blockLabels	короткие подписи блоков для индикатора
blockInfo	заголовки, тексты и списки для модального окна
openBlockModal()	открывает окно и подставляет текущий блок
closeBlockModal()	закрывает окно и отменяет таймер автопоказа
scheduleBlockModal(ms)	отложенное открытие окна
refreshBlockModal(tabId)	обновляет содержимое окна без закрытия
goBlock(offset)	переключает блок: +1 вперёд, -1 назад
showTab(tabId)	переключает вкладку с анимацией
setActiveTab(tabId)	меняет активную вкладку и подпись индикатора
stagger(scope)	лёгкая ступенчатая анимация элементов

Ключевые DOM-идентификаторы

ID	Элемент
blockIndicator	подпись текущего блока
btnBlockInfo	кнопка [?] О блоке
blockModal	backdrop модального окна
blockModalTitle	заголовок модального окна
blockModalBody	тело модального окна
btnBlockModalClose	крестик закрытия
btnBlockPrev	кнопка «Пред. блок»
btnBlockNext	кнопка «След. блок»
blockCounter	счётчик N / 7; для блоков вне списка — — / 7
btnSettingsTop	topbar-кнопка ⚙ Настройки; блок выключен в навигации, клик окно не открывает (подсказка в title)
btnAboutTop	topbar-кнопка 📖 BPWATTS; открывает описание блока 01 · BPWATTS — кратко
blockBadge	синий бейдж активного блока

Ключевые CSS-классы

Класс	Назначение
.block-bar	полоса текущего блока под topbar
.block-indicator	активная подпись блока
.block-info-btn	кнопка открытия описания
.modal-backdrop	фиксированный прозрачный слой окна и клика мимо
.spotlight-overlay	контейнер blur-панелей вокруг активного блока
.spotlight-pane	одна из четырёх blur-панелей: top/bottom/left/right
.modal	центрированное окно
.modal-head	шапка окна
.modal-body	текст окна
.modal-list	список пунктов в окне
.modal-nav	навигация по блокам внутри окна
.modal-nav-btn	кнопки «Пред.» / «След.»
.modal-counter	счётчик блока
.block-badge	синий бейдж активного блока
body.block-pseudo-open	режим псевдо-блока topbar; снимает подсветку активной вкладки
body.block-about-open	режим псевдо-блока about; подсвечивает #btnAboutTop, отключает blur-панели
body.block-tool-open / body.block-next-open	режим сторис-страниц 02 · Тул и демо / 03 · Результат и шаги; отключают blur-панели
body.block-settings-open	режим псевдо-блока settings; подсвечивает #btnSettingsTop

Правила правок

Обязательные правила

1. Не редактировать вручную длинную base64-строку логотипа в mockup/index.html.
2. Править stripped-копию HTML, где логотип заменён на __TPA_LOGO__.
3. После правок собрать финальный mockup/index.html с вставкой base64-логотипа.
4. Обновить этот README.md, если меняется структура, текст, поведение или состояние макета.
5. Обновить корневой CHANGELOG.md по правилам проекта.

Рекомендуемый рабочий процесс

1. Создать stripped-копию, если её нет:

$src = 'C:\AUTO\TPA Tobacco Production Analyzer_v2\mockup\index.html'
$out = 'C:\AUTO\TPA Tobacco Production Analyzer_v2\mockup\source.html'
$html = [IO.File]::ReadAllText($src)
$html = $html -replace 'src="data:image/png;base64,[^"]+"', 'src="__TPA_LOGO__"'
[IO.File]::WriteAllText($out, $html, [Text.UTF8Encoding]::new($false))

2. Вносить правки в:

C:\AUTO\TPA Tobacco Production Analyzer_v2\mockup\source.html

3. Собрать финальный файл:

$b64 = [Convert]::ToBase64String([IO.File]::ReadAllBytes('C:\AUTO\TPA Tobacco Production Analyzer_v2\static\logo.png'))
$src = 'C:\AUTO\TPA Tobacco Production Analyzer_v2\mockup\source.html'
$out = 'C:\AUTO\TPA Tobacco Production Analyzer_v2\mockup\index.html'
$html = [IO.File]::ReadAllText($src)
if (-not $html.Contains('__TPA_LOGO__')) { throw 'placeholder __TPA_LOGO__ not found' }
$html = $html.Replace('__TPA_LOGO__', "data:image/png;base64,$b64")
[IO.File]::WriteAllText($out, $html, [Text.UTF8Encoding]::new($false))

4. Проверить результат:

$p = 'C:\AUTO\TPA Tobacco Production Analyzer_v2\mockup\index.html'
$t = [IO.File]::ReadAllText($p)
"placeholder left: " + $t.Contains('__TPA_LOGO__')
"data uri: " + $t.Contains('data:image/png;base64,')
"size: " + (Get-Item $p).Length

Ожидаемо:

• placeholder left: False
• data uri: True
• размер чуть меньше 1 МБ.

5. Открыть в браузере:

C:\AUTO\TPA Tobacco Production Analyzer_v2\mockup\index.html

Если страница не обновляется — сделать Ctrl+F5.

Как менять конкретные части

Сменить текст описания блока

Изменить объект blockInfo в <script>.

Пример:

"tab-single": {
  title: "[+] 04 · Партии",
  text: "Текст, который будет в модальном окне.",
  points: [
    "Пункт 1",
    "Пункт 2"
  ]
}

Сменить подпись блока в полосе индикатора

Изменить blockLabels.

Пример:

"tab-ai": "[+] 02 · AI"

Сменить порядок переключения блоков

Изменить blockOrder.

Пример:

const blockOrder = ["about", "tool", "next", "tab-single", "tab-ai", "tab-compare", "tab-blendai"];

Сменить силу размытия фона

Изменить .spotlight-pane:

.spotlight-pane {
  background: rgba(253, 252, 252, 0.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

Для более слабого эффекта уменьшить blur() и/или alpha-канал фона.

Для полного отключения размытия на конкретном псевдо-блоке:

body.block-about-open .spotlight-pane {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

Сменить демо-данные

Менять HTML:

• таблицу партий;
• .detail-header;
• таблицы вкладок;
• текст AI-ответа;
• панель параметров AI.

Не использовать реальные чувствительные данные в макете.

История изменений макета

Дата	Изменение
2026-10-09	В блоке 05 · AI-анализ демо-чат заменён на диалог из TPA_AI_Chat_.md: 3 вопроса эксперта и 3 markdown-ответа AI по потоку табака на входе FTD (14 партий, поблендовое сравнение); размер 917375 байт
2026-10-09	Навигация модального окна стала сторис BPWATTS из 7 пунктов: 01 · BPWATTS — кратко, 02 · Тул и демо, 03 · Результат и шаги (новые topbar-псевдо-блоки about/tool/next, PSEUDO_BLOCKS, blur-панели отключены на сторис-страницах), затем модули 04 · Партии, 05 · AI-анализ, 06 · Сравнение партий, 07 · AI по Blend; topbar-кнопка переименована в 📖 BPWATTS; счётчик N / 7; размер 865121 байт
2026-10-09	Навигация модального окна сокращена до 5 блоков: 01 · О Программе, 02 · Партии, 03 · AI-анализ, 04 · Сравнение партий, 05 · AI по Blend; Поиск по параметру, TimeLine, InBatch Рецепт, Настройки выключены (вкладки сохранены, счётчик — / 5, кнопка ⚙ Настройки окно не открывает); переписаны описания активных блоков (зачем нужна TPA, параметры/цели/ручные редакции, контекст LLM + RAG, что смотреть в сравнении, blend-анализ); размер 860348 байт
2026-10-07	На блоке 01 · О Программе отключено размытие страницы: body.block-about-open .spotlight-pane становится прозрачным и без backdrop-filter
2026-10-07	Добавлены демо для вкладок Поиск по параметру, TimeLine, InBatch Рецепт: матрица параметра, временная ось партии, состав рецепта; обновлены blockInfo и размер финала
2026-10-07	Из модальных описаний модулей убраны формулировки DEMO/демо; обновлены тексты blockInfo и modal-note
2026-10-07	Добавлено демо AI по Blend: 7 партий QRA0R, KPI, DRY YIELD (демо), аутляеры, PPL, гипотеза, таблица blend-партий; автозапуск на вкладке
2026-10-07	Добавлен первый пункт О Программе с сутью и выгодами; блоки перенумерованы 01–09; для topbar-псевдо-блоков spotlight цельсится на .topbar, бейдж скрыт, кнопка подсвечивается
2026-10-07	Добавлен 8-й пункт навигации Настройки как псевдо-блок; topbar-кнопка ⚙ Настройки открывает описание настроек; spotlight/бейдж цельсятся на кнопку
2026-10-07	Стрелка заменена на синий бейдж #blockBadge; убран внешний outline активного блока; blur ослаблен до 1.2px; модалка остаётся по центру
2026-10-07	Модальное окно всегда по центру, без горизонтального сдвига; стрелка получила fallback на видимый блок; добавлены media queries для разных разрешений
2026-10-07	Снято размытие с всего активного блока; spotlight пересчитывается после анимации вкладки и скролла
2026-10-07	Усилено размытие заднего фона до blur(4px) и подложки rgba(253,252,252,0.34)
2026-10-07	AI-имитация перезапускается при каждом переходе на вкладку tab-ai; кнопка topbar принудительно перезапускает демо
2026-10-07	AI-имитация запускается автоматически при переходе на вкладку tab-ai, даже при открытом модальном окне
2026-10-07	Размытие снимается только с активного пункта меню; модальное окно выравнивается по нему, стрелка доходит до вкладки
2026-10-07	Снято размытие на активном блоке: blur остаётся только вокруг него
2026-10-07	Модальное окно смещено вверх; вместо рамки и ярлыка добавлена динамическая стрелка от окна к активному блоку
2026-10-07	Добавлена подсветка активного блока при открытом модальном окне: акцентная рамка вокруг панели, подсветка активной вкладки и ярлык со стрелкой
2026-10-07	Заменены вымышленные данные на реальные партии QRA0R за 2026-09; UI показывает только BatchIdent; DRY YIELD оставлен демо из-за недоступности ODC
2026-10-07	Встроен base64-логотип в самодостаточный HTML
2026-10-07	Попробован внешний слайд-каркас по DESIGN.md
2026-10-07	Возвращена прежняя структура TPA, применены цвета/шрифт/фон из DESIGN.md
2026-10-07	Добавлена полоса .block-bar с текущим блоком
2026-10-07	Добавлено модальное окно «О блоке»
2026-10-07	Окно стало автоматически открываться при загрузке и смене блока
2026-10-07	Добавлена навигация по блокам из модального окна и blur-фон
2026-10-07	Ослаблено размытие до blur(3px)
2026-10-07	Добавлена имитация AI-обсуждения в блоке tab-ai: шаги анализа и итоговый результат
2026-10-07	Добавлена кнопка 🤖 AI Анализ — демо в topbar для быстрого перехода к имитации
2026-10-07	Добавлен раздел «Что изображено на макете»; исправлено DRY в шапке сравнения на 87.9

Замечания

• В index.html могут остаться неиспользуемые CSS-правила старого внешнего слайд-каркаса. Они не влияют на отображение, но при чистке их можно удалить.
• DRY YIELD в макете — демо-значения: ODC-куб недоступен, поэтому реальные yield-значения не вытаскиваются.
• В UI показывается только BatchIdent; db_id, BatchID и SAP скрыты.
• В макете не должны появляться персональные, финансовые, клиентские или сервисные секреты.