## План оптимизации редактора (агент)

Цель: убрать лаги визуального редактора на проектах 20+ сцен (пан/зум графа, drag, создание связей) и снизить влияние тяжёлых ассетов (изображения/видео) на редактор.

### Этап 0 — Замер и воспроизведение

- **Сценарии**: пан/зум графа, drag узлов, создание/удаление связей, работа со списком сцен, редактирование свойств сцены.
- **Сбор данных**: DevTools Performance (CPU/Rendering), наблюдение нагрузки (GPU/Video Decode), фиксация “где именно тормозит”.

**Результат**: подтверждены основные “горячие места” (граф/рендер/медиа/IPC).

---

### Этап 1 — Быстрый выигрыш без изменения формата проекта (минимально и безопасно)

#### 1.1 Lazy/async для изображений в карточках

- Для `<img>` в карточках графа и списка сцен применить:
  - `loading="lazy"`
  - `decoding="async"`
- Убедиться, что контейнеры превью не провоцируют лишние перерасчёты размеров/перерисовки.

#### 1.2 Снижение перерисовок графа (минимально и безопасно)

- **Стабилизировать входные данные** графа:
  - вместо передачи “всего `project.scenes`” подготовить “лёгкое” представление сцен, содержащее только поля, нужные для карточек (title, preview refs, флаги).
- Цель: изменения в инспекторе (описание/аудио/и т.п.) не должны заставлять ReactFlow пересобирать все `nodes/edges`.

#### 1.3 Ограничить частоту тяжёлых обновлений при действиях в графе

- Проверить, чтобы обновления позиций/связей не вызывали лишних “полных” пересборок и не инициировали дорогие операции чаще, чем нужно.

**Критерий готовности**: на проекте с 22 сценами взаимодействие с графом заметно плавнее, задержка при создании связей снижается.

---

### Этап 2 — Самое эффективное: thumbnails вместо оригиналов

#### 2.1 Модель данных для миниатюр

- Для превью/медиа хранить:
  - **original asset** (как сейчас) — для просмотра/презентации
  - **thumbnail asset** — для графа и списков
- Миниатюра — отдельный asset в `project.assets`, связанный с оригиналом (через поле в сцене или метаданные asset).

#### 2.2 Генерация thumbnail при импорте изображений

- При импорте превью/изображений:
  - ресайз до ~**320px по длинной стороне**
  - кодек: **WebP** (или JPEG)
- Сохранять thumbnail как отдельный файл/asset.

#### 2.3 Генерация thumbnail для видео по первому кадру

- При импорте видео:
  - извлечь кадр (0.5–1s если на 0s чёрный)
  - сохранить как **image/webp/jpeg** thumbnail
- В UI использовать thumbnail как постер для карточек.

#### 2.4 Использование thumbnails в UI

- **Граф сцен**: показывает только thumbnail.
- **Список сцен**: показывает только thumbnail.
- **Инспектор**: по желанию — только thumbnail.
- **Презентация/просмотр**: оригинал.

#### 2.5 Обратная совместимость

- Старые проекты без thumbnails:
  - “ленивая” догенерация в фоне при первом отображении,
  - или отдельная команда “Оптимизировать проект (создать миниатюры)”.

**Критерий готовности**: тяжёлые исходники почти не влияют на редактор; масштабируемость по сценам растёт.

---

### Этап 3 — Дополнительные ускорения (по ситуации)

- **3.1 Виртуализация списка сцен** (если список остаётся тяжёлым при 50+ сценах).
- **3.2 Дифф‑обновление `nodes/edges`** в ReactFlow вместо “пересборки целиком” (для 100+ сцен).
- **3.3 LOD‑поведение**: при сильном зуме карточки упрощаются (только заголовок/иконки), thumbnails отключаются.

---

### Приоритизация

- **Сразу**: Этап 1.
- **Максимальный эффект**: Этап 2.
- **Для больших проектов**: Этап 3.