kingkont 0.7.39 → 0.7.40

package/renderer/board.js

@@ -0,0 +1,1522 @@
+// renderer/board.js — DOM init, sidebar, board open/render, SVG connections, node context menu, fullscreen viewer
+//
+// Этот модуль был выделен из index.html (раньше всё было в одном <script>
+// блоке на 9123 строки). Все модули загружаются как plain <script>
+// в одном глобальном scope — поэтому функции/переменные между файлами
+// видят друг друга по именам, без import/export. Порядок загрузки
+// важен: см. <script> теги внизу index.html.
+
+// =================== DOM ===================
+const $ = id => document.getElementById(id);
+const canvas = $('canvas');
+const canvasWrap = $('canvasWrap');
+const characterList = $('characterList');
+const locationList = $('locationList');
+const episodeList = $('episodeList');
+const emptyState = $('emptyState');
+
+// =================== Init ===================
+window.addEventListener('DOMContentLoaded', async () => {
+  if (!('showDirectoryPicker' in window)) { showUnsupported(); return; }
+  // По умолчанию проект не открыт — секции персонажей/локаций/сцен скрыты.
+  document.body.classList.add('no-project');
+  loadVoices().catch(() => {});  // preload голосов в фоне
+  // Application menu → действия в renderer
+  if (window.appMenu) {
+    window.appMenu.on('open-film', () => $('pickRoot').click());
+    window.appMenu.on('new-episode', () => $('newEpisode').click());
+    window.appMenu.on('new-character', () => $('newCharacter').click());
+    window.appMenu.on('new-location', () => $('newLocation').click());
+    window.appMenu.on('undo', () => undo());
+    window.appMenu.on('redo', () => redo());
+    window.appMenu.on('toggle-timeline', () => $('timelineBtn').click());
+    window.appMenu.on('close-project', () => closeProject());
+    window.appMenu.on('close-window-or-project', () => {
+      if (state.filmHandle) closeProject();
+      else window.appWindow?.minimize();
+    });
+    window.appMenu.on('open-settings', () => openSettings());
+  }
+  // Восстановить состояние панелей таймлайна/превью/реплик
+  const tlOpen = localStorage.getItem('timelineOpen') === '1';
+  const pvOpen = localStorage.getItem('previewOpen') === '1';
+  const rqOpen = false; // localStorage.getItem('repliquesOpen') === '1';  — панель реплик скрыта
+  if (tlOpen) $('timelinePanel').classList.remove('hidden');
+  // Превью больше не скрывается — состояние управляется previewCollapsed
+  if (rqOpen) $('repliquesPanel').classList.remove('hidden');
+  // Welcome-кнопка дублирует pickRoot click (с user-gesture от пользователя).
+  $('welcomeOpen').addEventListener('click', () => $('pickRoot').click());
+  // Sidebar search — фильтрует персонажей/локации/сцены.
+  $('sidebarSearch').addEventListener('input', e => {
+    const q = e.target.value.trim().toLowerCase();
+    for (const id of ['characterList','locationList','episodeList']) {
+      const list = $(id);
+      if (!list) continue;
+      for (const item of list.querySelectorAll('.item')) {
+        const name = (item.querySelector('.item-name')?.textContent || '').toLowerCase();
+        item.classList.toggle('search-hidden', q && !name.includes(q));
+      }
+    }
+  });
+  // Тихий autoload: первый recent с granted-permission (если есть).
+  try {
+    const recents = await getRecents();
+    if (recents.length && recents[0].handle) {
+      const first = recents[0];
+      let q = 'prompt';
+      try { q = await first.handle.queryPermission({ mode: 'readwrite' }); } catch {}
+      vlog('info', `restore: handle=${first.name} queryPermission=${q}`);
+      if (q === 'granted') {
+        await openFilm(first.handle);
+        return;
+      }
+    }
+  } catch (e) {
+    vlog('err', 'restore failed: ' + (e?.message || e));
+  }
+  await renderWelcomeRecents();
+  // Стартуем обновление баланса. Сразу + каждые 60 сек.
+  refreshBalance().catch(() => {});
+  setInterval(() => { refreshBalance().catch(() => {}); }, 60_000);
+
+  // Дабл-клик на логотипе (sidebar или welcome) → открытие окна настроек.
+  const openSettingsFromLogo = () => {
+    if (window.appSettings?.openSettingsWindow) window.appSettings.openSettingsWindow();
+  };
+  document.getElementById('brandLogo')?.addEventListener('dblclick', openSettingsFromLogo);
+  document.getElementById('welcomeLogo')?.addEventListener('dblclick', openSettingsFromLogo);
+
+  // Версия приложения на welcome-экране и в шапке проекта (после слова
+  // "KingKont"). appInfo.version() — IPC к main → app.getVersion().
+  // На веб-версии (без preload) — пропускаем, версия не показывается.
+  if (window.appInfo?.version) {
+    window.appInfo.version().then(v => {
+      if (!v) return;
+      const text = 'v' + v;
+      for (const id of ['welcomeVersion', 'brandVersion']) {
+        const el = document.getElementById(id);
+        if (el) el.textContent = text;
+      }
+    }).catch(() => {});
+  }
+});
+
+// === Баланс Chatium ===
+// Раз в минуту дёргает GET /api/balance (server.js → kingkont.ru). Если
+// chatium отключён или ключа нет — pill в sidebar-footer'е скрывается.
+// Цвет dot'а меняется в зависимости от баланса: green / yellow (<100) /
+// red (≤0). Также экспортирована глобально как window.refreshBalance —
+// чтобы settings-окно могло триггерить обновление после login/logout.
+async function refreshBalance() {
+  const wrap = document.getElementById('balancesAll');
+  if (!wrap) return;
+  let data = {};
+  try {
+    const r = await fetch('/api/balance/all');
+    if (r.ok) data = await r.json();
+  } catch {}
+  wrap.innerHTML = '';
+  // Один pill на провайдер. Если у провайдера нет данных (выключен или
+  // API не дал баланс) — pill не рендерим.
+  const pills = [
+    { key: 'kingkont',   label: 'KingKont',   onClick: () => window.openTxLog?.(), low: 100, fmt: (a) => `<b>${a.toLocaleString('ru-RU')}</b>&nbsp;credits` },
+    { key: 'openrouter', label: 'OpenRouter', low: 0.5,                              fmt: (a) => `<b>$${a.toFixed(2)}</b>` },
+    { key: 'elevenlabs', label: 'ElevenLabs', low: 1000,                             fmt: (a) => `<b>${a.toLocaleString('ru-RU')}</b>&nbsp;chars` },
+  ];
+  for (const p of pills) {
+    const d = data[p.key];
+    if (!d || typeof d.amount !== 'number') continue;
+    const pill = document.createElement('span');
+    pill.className = 'balance-info';
+    pill.title = `Баланс ${p.label}` + (p.onClick ? ' · клик — лог списаний' : '');
+    if (d.amount > 0 && d.amount < (p.low || 0)) pill.classList.add('low');
+    if (d.amount <= 0) pill.classList.add('empty');
+    pill.innerHTML = `<span class="dot"></span><span style="color:#888;font-size:10px;margin-right:4px;">${p.label}</span><span>${p.fmt(d.amount)}</span>`;
+    if (p.onClick) {
+      pill.style.cursor = 'pointer';
+      pill.addEventListener('click', p.onClick);
+    }
+    wrap.appendChild(pill);
+  }
+}
+window.refreshBalance = refreshBalance;
+
+// === Лог списаний (модал с историей кредитов) ===
+async function openTxLog() {
+  const modal = document.getElementById('txLogModal');
+  if (!modal) return;
+  modal.classList.remove('hidden');
+  await loadTxLog();
+}
+window.openTxLog = openTxLog;
+
+async function loadTxLog() {
+  const body = document.getElementById('txLogBody');
+  const balanceLine = document.getElementById('txBalanceLine');
+  if (!body) return;
+  body.innerHTML = '<div style="padding:24px; text-align:center; color:#888;">Загрузка…</div>';
+  if (balanceLine) balanceLine.textContent = '';
+  try {
+    const [txR, balR] = await Promise.all([
+      fetch('/api/transactions'),
+      fetch('/api/balance').catch(() => null),
+    ]);
+    if (!txR.ok) {
+      const t = await txR.text().catch(() => '');
+      body.innerHTML = `<div class="tx-empty">Ошибка: HTTP ${txR.status} ${escapeHtmlSafe(t.slice(0, 200))}</div>`;
+      return;
+    }
+    const txs = await txR.json();
+    if (balR && balR.ok) {
+      const b = await balR.json();
+      const n = Number(b.balance) || 0;
+      balanceLine.textContent = `· баланс ${n.toLocaleString('ru-RU')} credits`;
+    }
+    if (!Array.isArray(txs) || txs.length === 0) {
+      body.innerHTML = '<div class="tx-empty">Списаний нет</div>';
+      return;
+    }
+    const rows = txs.map(t => {
+      const amount = Number(t.amount) || 0;
+      const isNeg = amount < 0;
+      const amountStr = (isNeg ? '' : '+') + amount.toLocaleString('ru-RU');
+      const dateStr = formatTxDate(t.createdAt);
+      const typeLabel = formatTxType(t.type);
+      return `
+        <tr>
+          <td style="white-space:nowrap; color:#aaa; font-family:ui-monospace,monospace;">${escapeHtmlSafe(dateStr)}</td>
+          <td>
+            <div>${escapeHtmlSafe(t.description || '—')}</div>
+            <div class="tx-type">${escapeHtmlSafe(typeLabel)}${t.model ? ' · <span class="tx-model">' + escapeHtmlSafe(t.model) + '</span>' : ''}</div>
+          </td>
+          <td class="${isNeg ? 'tx-amount-neg' : 'tx-amount-pos'}">${escapeHtmlSafe(amountStr)}</td>
+        </tr>
+      `;
+    }).join('');
+    body.innerHTML = `
+      <table>
+        <thead>
+          <tr>
+            <th style="width:140px;">Время</th>
+            <th>Описание</th>
+            <th style="width:110px; text-align:right;">Кредиты</th>
+          </tr>
+        </thead>
+        <tbody>${rows}</tbody>
+      </table>
+    `;
+  } catch (e) {
+    body.innerHTML = `<div class="tx-empty">Ошибка: ${escapeHtmlSafe(e?.message || String(e))}</div>`;
+  }
+}
+
+function formatTxDate(ts) {
+  if (!ts) return '—';
+  const d = new Date(ts);
+  return d.toLocaleString('ru-RU', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
+}
+
+function formatTxType(t) {
+  return ({
+    deduct: 'списание',
+    reserve: 'резерв',
+    reserve_cancelled: 'резерв отменён',
+    refund: 'возврат',
+    topup: 'пополнение',
+    bonus: 'бонус',
+    subscription: 'подписка',
+    renewal: 'продление',
+    correction: 'корректировка',
+  })[t] || t || '—';
+}
+
+function escapeHtmlSafe(s) {
+  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+
+document.getElementById('txLogClose')?.addEventListener('click', () => {
+  document.getElementById('txLogModal').classList.add('hidden');
+});
+document.getElementById('txLogRefresh')?.addEventListener('click', () => loadTxLog());
+
+// === Recents store ===
+// Метаданные ({ name, thumbDataUrl, ts }) — в JSON-файле через recentsStore
+// (переживают quota-reset IDB). FSAH-handle — параллельно в IDB под ключом
+// `handle:<name>`. При load merge'им: если handle нет, карточка
+// показывается без действия — клик дёргает showDirectoryPicker заново.
+const MAX_RECENTS = 12;
+
+async function _readRecentsMeta() {
+  try {
+    if (window.recentsStore?.read) return await window.recentsStore.read();
+  } catch {}
+  return [];
+}
+async function _writeRecentsMeta(arr) {
+  try {
+    if (window.recentsStore?.write) await window.recentsStore.write(arr);
+  } catch (e) { console.warn('recents write failed', e); }
+}
+
+async function _blobToDataUrl(blob) {
+  if (!blob) return null;
+  return await new Promise((res, rej) => {
+    const r = new FileReader();
+    r.onload = () => res(r.result);
+    r.onerror = () => rej(r.error);
+    r.readAsDataURL(blob);
+  });
+}
+function _dataUrlToBlob(url) {
+  if (!url || typeof url !== 'string' || !url.startsWith('data:')) return null;
+  const [head, b64] = url.split(',');
+  const mime = (head.match(/data:([^;]+);base64/) || [])[1] || 'image/jpeg';
+  const bin = atob(b64);
+  const buf = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+  return new Blob([buf], { type: mime });
+}
+
+async function getRecents() {
+  const meta = await _readRecentsMeta();
+  const out = [];
+  for (const m of meta) {
+    let handle = null;
+    try { handle = await idbGet(`handle:${m.name}`); } catch {}
+    out.push({
+      name: m.name,
+      ts: m.ts || 0,
+      thumb: _dataUrlToBlob(m.thumbDataUrl),
+      handle,
+    });
+  }
+  return out;
+}
+
+async function touchRecent(handle, thumbBlob) {
+  if (!handle) return;
+  const list = await _readRecentsMeta();
+  const i = list.findIndex(r => r.name === handle.name);
+  let thumbDataUrl = (i >= 0 ? list[i].thumbDataUrl : null);
+  if (thumbBlob) thumbDataUrl = await _blobToDataUrl(thumbBlob);
+  const entry = { name: handle.name, ts: Date.now(), thumbDataUrl };
+  if (i >= 0) list.splice(i, 1);
+  list.unshift(entry);
+  while (list.length > MAX_RECENTS) list.pop();
+  await _writeRecentsMeta(list);
+  // Handle отдельно в IDB — переживает большинство сценариев. Если IDB
+  // ресетится — handle потеряется, метаданные останутся (карточка кликнется
+  // и попросит выбрать ту же папку через showDirectoryPicker).
+  try { await idbSet(`handle:${handle.name}`, handle); } catch {}
+}
+
+async function removeRecent(name) {
+  const list = await _readRecentsMeta();
+  await _writeRecentsMeta(list.filter(r => r.name !== name));
+  // handle в idb тоже удалим
+  try {
+    const db = await openDB();
+    const tx = db.transaction(STORE, 'readwrite');
+    tx.objectStore(STORE).delete(`handle:${name}`);
+  } catch {}
+}
+
+function fmtRelativeTime(ts) {
+  const dt = (Date.now() - ts) / 1000;
+  if (dt < 60) return 'только что';
+  if (dt < 3600) return `${Math.floor(dt / 60)} мин назад`;
+  if (dt < 86400) return `${Math.floor(dt / 3600)} ч назад`;
+  if (dt < 86400 * 7) return `${Math.floor(dt / 86400)} дн назад`;
+  return new Date(ts).toLocaleDateString();
+}
+
+async function renderWelcomeRecents() {
+  const grid = $('welcomeRecentGrid');
+  const wrap = $('welcomeRecent');
+  const titleEl = $('welcomeRecentTitle');
+  if (!grid || !wrap) return;
+  grid.innerHTML = '';
+  wrap.style.display = '';
+  const list = await getRecents();
+
+  // Первой картой — «Открыть проект». Кликается → дёргает скрытый
+  // #pickRoot button (тот же, что использует app menu).
+  const openCard = document.createElement('div');
+  openCard.className = 'welcome-card open-card';
+  const openThumb = document.createElement('div');
+  openThumb.className = 'welcome-card-thumb';
+  openThumb.textContent = '+';
+  const openMeta = document.createElement('div');
+  openMeta.className = 'welcome-card-meta';
+  const openName = document.createElement('div');
+  openName.className = 'welcome-card-name';
+  openName.textContent = 'Открыть проект';
+  const openSub = document.createElement('div');
+  openSub.className = 'welcome-card-ts';
+  openSub.textContent = 'выбрать папку…';
+  openMeta.append(openName, openSub);
+  openCard.append(openThumb, openMeta);
+  openCard.addEventListener('click', () => $('pickRoot').click());
+  grid.appendChild(openCard);
+
+  // Title меняем в зависимости от наличия recents.
+  if (titleEl) titleEl.textContent = list.length ? 'Открыть проект · недавние' : 'Открыть проект';
+
+  for (const r of list) {
+    const card = document.createElement('div');
+    card.className = 'welcome-card';
+    const thumb = document.createElement('div');
+    thumb.className = 'welcome-card-thumb';
+    if (r.thumb) {
+      const img = document.createElement('img');
+      img.src = URL.createObjectURL(r.thumb);
+      img.onload = () => setTimeout(() => URL.revokeObjectURL(img.src), 60_000);
+      thumb.appendChild(img);
+    } else {
+      thumb.textContent = '🎬';
+    }
+    const meta = document.createElement('div');
+    meta.className = 'welcome-card-meta';
+    const nameEl = document.createElement('div');
+    nameEl.className = 'welcome-card-name';
+    nameEl.textContent = r.name;
+    const tsEl = document.createElement('div');
+    tsEl.className = 'welcome-card-ts';
+    tsEl.textContent = fmtRelativeTime(r.ts);
+    meta.append(nameEl, tsEl);
+    card.append(thumb, meta);
+    const del = document.createElement('div');
+    del.className = 'welcome-card-del';
+    del.textContent = '×';
+    del.title = 'Удалить из недавних';
+    del.addEventListener('click', async e => {
+      e.stopPropagation();
+      if (!confirm(`Убрать «${r.name}» из недавних? (папка не удаляется)`)) return;
+      await removeRecent(r.name);
+      await renderWelcomeRecents();
+    });
+    card.appendChild(del);
+    card.addEventListener('click', async () => {
+      try {
+        if (r.handle) {
+          let g = (await r.handle.queryPermission({ mode: 'readwrite' })) === 'granted';
+          if (!g) g = (await r.handle.requestPermission({ mode: 'readwrite' })) === 'granted';
+          vlog('info', `welcome card click ${r.name}: granted=${g}`);
+          if (g) await openFilm(r.handle);
+          else alert('Доступ к папке не подтверждён.');
+        } else {
+          // Handle потерялся (IDB сбросилась) — открываем picker прямо здесь,
+          // чтобы сохранить user-gesture (через $('pickRoot').click() он
+          // теряется и showDirectoryPicker валится SecurityError).
+          try {
+            const handle = await window.showDirectoryPicker({ mode: 'readwrite', id: 'video-editor-film' });
+            await openFilm(handle);
+          } catch (err) {
+            if (err.name === 'AbortError') return;
+            throw err;
+          }
+        }
+      } catch (err) {
+        vlog('err', 'welcome card failed: ' + (err?.message || err));
+        alert('Ошибка: ' + (err?.message || err));
+      }
+    });
+    grid.appendChild(card);
+  }
+}
+
+// Сгенерировать превью: первый image-нод любого board'а проекта,
+// resize в 320×180, JPEG. Возвращает Blob или null.
+async function generateProjectThumb(filmHandle) {
+  try {
+    // Собрать кандидатов: characters + locations + episodes (в этом приоритете).
+    const candidates = [];
+    const collect = async (subdir) => {
+      try {
+        const root = await filmHandle.getDirectoryHandle(subdir);
+        for await (const [name, h] of root.entries()) {
+          if (h.kind === 'directory') candidates.push(h);
+        }
+      } catch {}
+    };
+    await collect(CHAR_DIR);
+    await collect(LOC_DIR);
+    // Эпизоды лежат прямо в корне — как папки кроме _* служебных
+    for await (const [name, h] of filmHandle.entries()) {
+      if (h.kind !== 'directory') continue;
+      if (name.startsWith('_') || name.startsWith('.')) continue;
+      if (name === CHAR_DIR || name === LOC_DIR) continue;
+      candidates.push(h);
+    }
+    // В каждом board'е смотрим scene.json и берём первую image-ноду
+    for (const board of candidates) {
+      let nodes = [];
+      try {
+        const fh = await board.getFileHandle('scene.json');
+        const data = JSON.parse(await (await fh.getFile()).text());
+        nodes = data.nodes || [];
+      } catch { continue; }
+      const imgNode = nodes.find(n => n.type === 'image' && n.file);
+      if (!imgNode) continue;
+      try {
+        const fh = await resolveBoardFile(board, imgNode.file);
+        const file = await fh.getFile();
+        return await blobToThumbJpeg(file, 320, 180);
+      } catch { continue; }
+    }
+  } catch (e) { vlog('err', 'thumb gen failed: ' + (e?.message || e)); }
+  return null;
+}
+
+async function blobToThumbJpeg(blob, w, h) {
+  const bmp = await createImageBitmap(blob);
+  const canvas = new OffscreenCanvas(w, h);
+  const ctx = canvas.getContext('2d');
+  // contain + центрирование на тёмной подложке
+  ctx.fillStyle = '#1a1a1a';
+  ctx.fillRect(0, 0, w, h);
+  const r = Math.min(w / bmp.width, h / bmp.height);
+  const dw = bmp.width * r, dh = bmp.height * r;
+  ctx.drawImage(bmp, (w - dw) / 2, (h - dh) / 2, dw, dh);
+  bmp.close();
+  return await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.78 });
+}
+
+function showUnsupported() {
+  document.body.innerHTML = `
+    <div class="unsupported">
+      <h1>Браузер не поддерживается</h1>
+      <p>Этот редактор использует <code>File System Access API</code> для работы с папками на диске.</p>
+      <p>Открой страницу в Chrome, Edge, Brave или Arc. Safari и Firefox пока не поддерживают эту функцию.</p>
+      <p>Запускай через <code>node server.js</code> и заходи на <code>http://localhost:8000</code>.</p>
+    </div>`;
+}
+
+$('pickRoot').addEventListener('click', async () => {
+  try {
+    const handle = await window.showDirectoryPicker({ mode: 'readwrite', id: 'video-editor-film' });
+    await openFilm(handle); // openFilm сам touchRecent → персистит в JSON
+  } catch (e) {
+    if (e.name === 'AbortError') return;
+    if (e.name === 'SecurityError') {
+      alert('API не работает с file://. Запусти:\n\nnode server.js\n\nи открой http://localhost:8000');
+    } else alert('Ошибка: ' + e.message);
+  }
+});
+
+// Кладём CLAUDE.md в корень проекта при каждом открытии (overwrite).
+// Содержимое — короткий указатель на скилл `kingkont`, без user-data, не
+// требует preserve. Апгрейды приложения автоматически донесут свежий текст.
+// Тихо (ошибки не блокируют openFilm). Если юзер хочет свою документацию —
+// в шаблоне написано «переименуй в NOTES.md».
+async function ensureClaudeMd(handle) {
+  if (!handle || !window.claudeMd?.template) return;
+  try {
+    const tpl = await window.claudeMd.template();
+    if (!tpl) return;
+    // Сравним с тем что лежит сейчас, чтобы не плодить лишних writes
+    // (FSAH triggers'нет permission-prompt'ы при первой записи в эту сессию).
+    let existing = null;
+    try {
+      const fh = await handle.getFileHandle('CLAUDE.md');
+      existing = await (await fh.getFile()).text();
+    } catch {}
+    if (existing === tpl) return; // уже актуальный — не трогаем
+    const fh = await handle.getFileHandle('CLAUDE.md', { create: true });
+    const w = await fh.createWritable();
+    await w.write(tpl);
+    await w.close();
+    vlog('info', existing == null ? 'CLAUDE.md создан в корне проекта' : 'CLAUDE.md обновлён');
+  } catch (e) { vlog('err', 'CLAUDE.md write failed: ' + (e?.message || e)); }
+}
+
+async function openFilm(handle) {
+  state.filmHandle = handle;
+  state.currentBoard = null;
+  document.body.classList.remove('no-project');
+  window.appProject?.notifyState(true);
+  ensureClaudeMd(handle).catch(() => {});
+  // Подзаголовок шапки = имя открытого проекта (вместо «Видео-редактор»).
+  const sub = $('brandSub');
+  if (sub) { sub.textContent = handle.name; sub.classList.add('has-project'); }
+  // Третья строка (имя board) пока пустая — заполнится при selectBoard.
+  const boardEl = $('brandBoard');
+  if (boardEl) { boardEl.style.display = 'none'; boardEl.innerHTML = ''; }
+  $('rootInfo').textContent = '';
+  // recents: обновляем timestamp + сохраняем handle. Thumb сгенерим в фоне ниже.
+  touchRecent(handle).catch(e => vlog('err', 'touchRecent: ' + e.message));
+  // Лениво — после рендера sidebar'а попробуем сгенерить превью и обновить recent.
+  setTimeout(async () => {
+    try {
+      const thumb = await generateProjectThumb(handle);
+      if (thumb) await touchRecent(handle, thumb);
+    } catch (e) { vlog('err', 'thumb refresh: ' + e.message); }
+  }, 1500);
+  $('newEpisode').disabled = false;
+  $('newCharacter').disabled = false;
+  $('newLocation').disabled = false;
+  $('repliquesBtn').disabled = false;
+  loadUploadCache().catch(() => {});
+  await refreshSidebar();
+  showEmpty();
+
+  const raw = localStorage.getItem(`lastBoard:${handle.name}`);
+  if (raw) {
+    try {
+      const last = JSON.parse(raw);
+      const list = last.kind === 'character' ? await listCharacters(handle)
+                 : last.kind === 'location'  ? await listLocations(handle)
+                 : await listEpisodes(handle);
+      const found = list.find(x => x.name === last.name);
+      if (found) await selectBoard({ kind: last.kind, ...found });
+    } catch {}
+  }
+
+  // Сканируем все доски на незавершённые задачи генерации (после перезагрузки)
+  scanAllBoardsForPendingJobs(handle).catch(e => console.warn('scan failed', e));
+  // Подгружаем настройки всех локаций
+  loadAllLocationsInfo().catch(() => {});
+  // Подгружаем настройки всех персонажей (для add-menu и т.д.)
+  loadAllCharactersInfo().then(() => {
+    // Если replicas-panel был открыт при перезагрузке — заполняем
+    if (!$('repliquesPanel').classList.contains('hidden') && state.charactersInfo.length) {
+      const sel = $('repliquesChar');
+      sel.innerHTML = '';
+      for (const c of state.charactersInfo) {
+        const opt = document.createElement('option');
+        opt.value = c.name;
+        opt.textContent = c.name + (c.voice ? '' : ' — голос не задан');
+        sel.appendChild(opt);
+      }
+      const last = localStorage.getItem('lastReplicaChar');
+      if (last && state.charactersInfo.some(c => c.name === last)) sel.value = last;
+      const ch = getSelectedReplicaChar();
+      if (ch) renderRepliquesList(ch);
+    }
+  }).catch(() => {});
+}
+
+// Закрыть текущий проект: выгрузить state, скрыть секции, восстановить
+// шапку, оставить запись в idb (чтобы Recent работал).
+async function closeProject() {
+  if (state.currentBoard?.urls) {
+    for (const u of Object.values(state.currentBoard.urls)) URL.revokeObjectURL(u);
+  }
+  state.filmHandle = null;
+  state.currentBoard = null;
+  window.appProject?.notifyState(false);
+  state.charactersInfo = [];
+  state.locationsInfo = [];
+  state.selectedNodeIds.clear();
+  state.selectedClipIds.clear();
+  state.selectedTrackIds.clear();
+  document.body.classList.add('no-project');
+  const sub = $('brandSub');
+  if (sub) { sub.textContent = 'Видео-редактор'; sub.classList.remove('has-project'); }
+  const boardEl = $('brandBoard');
+  if (boardEl) { boardEl.style.display = 'none'; boardEl.innerHTML = ''; }
+  $('rootInfo').textContent = '';
+  // Очистить sidebar-списки
+  for (const id of ['characterList','locationList','episodeList']) {
+    const el = $(id); if (el) el.innerHTML = '';
+  }
+  $('newEpisode').disabled = true;
+  $('newCharacter').disabled = true;
+  $('newLocation').disabled = true;
+  $('repliquesBtn').disabled = true;
+  $('boardBadge').style.display = 'none';
+  $('charSettingsBtn').style.display = 'none';
+  // Очистить холст
+  if (typeof clearCanvasKeepSvg === 'function') clearCanvasKeepSvg();
+  $('addText').disabled = true; $('genText').disabled = true; $('genAudio').disabled = true; $('genImage').disabled = true; $('genVideo').disabled = true; $('genSfx').disabled = true; $('genMusic').disabled = true;
+  
+  await renderWelcomeRecents();
+  showEmpty();
+}
+
+// =================== Sidebar ===================
+async function refreshSidebar() {
+  await Promise.all([refreshCharacters(), refreshLocations(), refreshEpisodes()]);
+}
+
+function makeBoardItem(it, kind) {
+  const el = document.createElement('div');
+  el.className = 'item';
+  if (state.currentBoard?.kind === kind && state.currentBoard.name === it.name) el.classList.add('active');
+  const nameSpan = document.createElement('span');
+  nameSpan.className = 'item-name';
+  nameSpan.textContent = it.name;
+  el.appendChild(nameSpan);
+  el.addEventListener('click', () => selectBoard({ kind, ...it }));
+  el.addEventListener('contextmenu', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    showBoardContextMenu(kind, it, e.clientX, e.clientY);
+  });
+  return el;
+}
+
+// Контекст-меню для board-item (sidebar): Переименовать / Свойства / Удалить.
+function showBoardContextMenu(kind, item, clientX, clientY) {
+  const menu = $('nodeMenu');
+  menu.innerHTML = '';
+  const add = (label, fn, opts = {}) => {
+    const b = document.createElement('button');
+    b.textContent = label;
+    if (opts.danger) b.style.color = '#f88';
+    b.addEventListener('click', () => { menu.classList.add('hidden'); fn(); });
+    menu.appendChild(b);
+  };
+  add('✎ Переименовать', async () => {
+    const newName = await askName('Новое название:', '', item.name);
+    if (!newName || newName === item.name) return;
+    try { await renameBoard(kind, item.name, newName); }
+    catch (err) { alert('Не удалось переименовать: ' + (err?.message || err)); }
+  });
+  if (kind === 'character') {
+    add('⚙ Свойства персонажа', () => {
+      // Открываем панель этого персонажа и потом её character-modal
+      selectBoard({ kind, ...item }).then(() => openCharacterSettings()).catch(() => {});
+    });
+  }
+  add('🗑 Удалить', async () => {
+    if (!confirm(`Удалить «${item.name}»? Папка переедет в _deleted, Cmd+Z восстановит.`)) return;
+    try { await deleteBoard(kind, item.name); }
+    catch (err) { alert('Не удалось удалить: ' + (err?.message || err)); }
+  }, { danger: true });
+  positionFloatingMenu(menu, clientX, clientY);
+  setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
+}
+
+// Переименовать board (папку): создать новую папку с тем же именем, перенести
+// содержимое, удалить старую. На macOS-FSAH прямого rename нет, делаем
+// copy+remove. Если board сейчас открыт — переоткрываем после переноса.
+async function renameBoard(kind, oldName, newName) {
+  newName = newName.trim();
+  if (!newName) throw new Error('пустое имя');
+  if (newName === oldName) return;
+  // /<>:|?*  плюс слеши — недопустимы в имени папки
+  if (/[\\/<>:|?*]/.test(newName)) throw new Error('недопустимые символы в имени');
+  let parent;
+  if (kind === 'character')      parent = await state.filmHandle.getDirectoryHandle(CHAR_DIR);
+  else if (kind === 'location')  parent = await state.filmHandle.getDirectoryHandle(LOC_DIR);
+  else                           parent = state.filmHandle;
+  // Проверяем что новое имя не занято
+  try { await parent.getDirectoryHandle(newName); throw new Error('папка с таким именем уже есть'); }
+  catch (e) { if (e.message === 'папка с таким именем уже есть') throw e; }
+  // Запоминаем был ли он активным
+  const wasActive = state.currentBoard?.kind === kind && state.currentBoard.name === oldName;
+  // Переносим
+  const src = await parent.getDirectoryHandle(oldName);
+  const dst = await parent.getDirectoryHandle(newName, { create: true });
+  await copyDirContents(src, dst);
+  await parent.removeEntry(oldName, { recursive: true });
+  // Обновить sidebar
+  if (kind === 'character') await refreshCharacters();
+  else if (kind === 'location') await refreshLocations();
+  else await refreshEpisodes();
+  // Если был активен — переоткрыть с новым именем
+  if (wasActive) {
+    const list = kind === 'character' ? await listCharacters(state.filmHandle)
+              : kind === 'location'  ? await listLocations(state.filmHandle)
+              : await listEpisodes(state.filmHandle);
+    const found = list.find(x => x.name === newName);
+    if (found) await selectBoard({ kind, ...found });
+  }
+  // Восстановить lastBoard для autoload
+  if (state.filmHandle) {
+    const last = JSON.parse(localStorage.getItem(`lastBoard:${state.filmHandle.name}`) || 'null');
+    if (last && last.kind === kind && last.name === oldName) {
+      localStorage.setItem(`lastBoard:${state.filmHandle.name}`,
+        JSON.stringify({ kind, name: newName }));
+    }
+  }
+}
+
+async function copyDirContents(src, dst) {
+  for await (const [name, h] of src.entries()) {
+    if (h.kind === 'file') {
+      const file = await h.getFile();
+      const fh = await dst.getFileHandle(name, { create: true });
+      const w = await fh.createWritable();
+      await w.write(file);
+      await w.close();
+    } else if (h.kind === 'directory') {
+      const subDst = await dst.getDirectoryHandle(name, { create: true });
+      await copyDirContents(h, subDst);
+    }
+  }
+}
+
+async function refreshCharacters() {
+  characterList.innerHTML = '';
+  if (!state.filmHandle) return;
+  const items = await listCharacters(state.filmHandle);
+  for (const it of items) characterList.appendChild(makeBoardItem(it, 'character'));
+}
+
+async function refreshLocations() {
+  locationList.innerHTML = '';
+  if (!state.filmHandle) return;
+  const items = await listLocations(state.filmHandle);
+  for (const it of items) locationList.appendChild(makeBoardItem(it, 'location'));
+}
+
+async function refreshEpisodes() {
+  episodeList.innerHTML = '';
+  if (!state.filmHandle) return;
+  const items = await listEpisodes(state.filmHandle);
+  for (const it of items) episodeList.appendChild(makeBoardItem(it, 'episode'));
+}
+
+// === Удаление досок (move в <film>/_deleted/) ===
+async function dirExists(parent, name) {
+  try { await parent.getDirectoryHandle(name); return true; } catch { return false; }
+}
+async function uniqueSubdirName(parent, baseName) {
+  let n = baseName, i = 2;
+  while (await dirExists(parent, n)) { n = `${baseName} (${i})`; i++; }
+  return n;
+}
+async function copyDirContents(src, dst) {
+  for await (const [name, h] of src.entries()) {
+    if (h.kind === 'file') {
+      const file = await h.getFile();
+      const fh = await dst.getFileHandle(name, { create: true });
+      const w = await fh.createWritable();
+      await w.write(file);
+      await w.close();
+    } else if (h.kind === 'directory') {
+      const child = await dst.getDirectoryHandle(name, { create: true });
+      await copyDirContents(h, child);
+    }
+  }
+}
+async function moveDirectory(srcParent, srcName, dstParent, dstName) {
+  const src = await srcParent.getDirectoryHandle(srcName);
+  if (typeof src.move === 'function') {
+    try { await src.move(dstParent, dstName); return; } catch {}
+  }
+  const dst = await dstParent.getDirectoryHandle(dstName, { create: true });
+  await copyDirContents(src, dst);
+  await srcParent.removeEntry(srcName, { recursive: true });
+}
+
+async function deleteBoard(kind, name) {
+  const dstRoot = await state.filmHandle.getDirectoryHandle('_deleted', { create: true });
+  const dstName = await uniqueSubdirName(dstRoot, name);
+  if (kind === 'character') {
+    const charsRoot = await state.filmHandle.getDirectoryHandle(CHAR_DIR);
+    await moveDirectory(charsRoot, name, dstRoot, dstName);
+  } else if (kind === 'location') {
+    const locsRoot = await state.filmHandle.getDirectoryHandle(LOC_DIR);
+    await moveDirectory(locsRoot, name, dstRoot, dstName);
+  } else {
+    await moveDirectory(state.filmHandle, name, dstRoot, dstName);
+  }
+  // Если эта доска сейчас открыта — закрыть
+  const wasActive = state.currentBoard?.kind === kind && state.currentBoard.name === name;
+  if (wasActive) {
+    if (state.currentBoard.urls) {
+      for (const u of Object.values(state.currentBoard.urls)) URL.revokeObjectURL(u);
+    }
+    state.currentBoard = null;
+    showEmpty();
+    localStorage.removeItem(`lastBoard:${state.filmHandle.name}`);
+  }
+  if (kind === 'character') await refreshCharacters();
+  else if (kind === 'location') await refreshLocations();
+  else await refreshEpisodes();
+  // Запоминаем для Cmd+Z (board-level undo, в памяти).
+  if (!Array.isArray(state.boardUndoStack)) state.boardUndoStack = [];
+  state.boardUndoStack.push({ kind, name, dstName, wasActive, ts: Date.now() });
+  if (state.boardUndoStack.length > 20) state.boardUndoStack.shift();
+}
+
+// Восстанавливает последний удалённый board из _deleted в исходную папку.
+async function undoBoardDelete() {
+  if (!state.filmHandle) return false;
+  if (!Array.isArray(state.boardUndoStack) || !state.boardUndoStack.length) return false;
+  const op = state.boardUndoStack.pop();
+  try {
+    const delRoot = await state.filmHandle.getDirectoryHandle('_deleted');
+    let parent;
+    if (op.kind === 'character')      parent = await state.filmHandle.getDirectoryHandle(CHAR_DIR, { create: true });
+    else if (op.kind === 'location')  parent = await state.filmHandle.getDirectoryHandle(LOC_DIR, { create: true });
+    else                              parent = state.filmHandle;
+    // Если в исходной папке уже есть та же name — придумаем уникальное.
+    let restoreName = op.name;
+    try { await parent.getDirectoryHandle(restoreName); restoreName = await uniqueSubdirName(parent, op.name); } catch {}
+    await moveDirectory(delRoot, op.dstName, parent, restoreName);
+    if (op.kind === 'character') await refreshCharacters();
+    else if (op.kind === 'location') await refreshLocations();
+    else await refreshEpisodes();
+    if (op.wasActive) {
+      const list = op.kind === 'character' ? await listCharacters(state.filmHandle)
+                : op.kind === 'location'  ? await listLocations(state.filmHandle)
+                : await listEpisodes(state.filmHandle);
+      const found = list.find(x => x.name === restoreName);
+      if (found) await selectBoard({ kind: op.kind, ...found });
+    }
+    return true;
+  } catch (e) {
+    console.warn('undoBoardDelete failed', e);
+    state.boardUndoStack.push(op); // вернуть на место чтобы повторить
+    alert('Не удалось восстановить: ' + (e?.message || e));
+    return false;
+  }
+}
+
+// Собственный prompt — нативный prompt() в Electron подавлен (deprecated в Chromium).
+// Возвращает строку или null. Esc/Cancel = null. Enter = подтвердить.
+function askName(title, placeholder = '', initialValue = '') {
+  return new Promise(resolve => {
+    const overlay = document.createElement('div');
+    overlay.className = 'modal';
+    overlay.style.cssText = 'position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index:9999;';
+    const box = document.createElement('div');
+    box.style.cssText = 'background:#222; border:1px solid #444; border-radius:8px; padding:18px 20px; min-width:360px; box-shadow:0 8px 32px rgba(0,0,0,0.6);';
+    const h = document.createElement('h3');
+    h.textContent = title;
+    h.style.cssText = 'margin:0 0 12px; font-size:14px; color:#e0e0e0;';
+    const inp = document.createElement('input');
+    inp.type = 'text';
+    inp.placeholder = placeholder;
+    if (initialValue) inp.value = initialValue;
+    inp.style.cssText = 'width:100%; padding:8px 10px; background:#1a1a1a; color:#e0e0e0; border:1px solid #444; border-radius:4px; font-size:14px; margin-bottom:14px;';
+    const row = document.createElement('div');
+    row.style.cssText = 'display:flex; gap:8px; justify-content:flex-end;';
+    const cancel = document.createElement('button');
+    cancel.textContent = 'Отмена';
+    const ok = document.createElement('button');
+    // Если поле уже заполнено — это редактирование существующего объекта,
+    // показываем «Сохранить». Иначе создание — «Создать».
+    ok.textContent = initialValue ? 'Сохранить' : 'Создать';
+    ok.className = 'primary';
+    row.append(cancel, ok);
+    box.append(h, inp, row); overlay.append(box);
+    document.body.append(overlay);
+    setTimeout(() => { inp.focus(); inp.select(); }, 30);
+    const close = (val) => { overlay.remove(); resolve(val); };
+    cancel.addEventListener('click', () => close(null));
+    ok.addEventListener('click', () => close(inp.value.trim() || null));
+    inp.addEventListener('keydown', e => {
+      if (e.key === 'Enter')  { e.preventDefault(); close(inp.value.trim() || null); }
+      if (e.key === 'Escape') { e.preventDefault(); close(null); }
+    });
+    overlay.addEventListener('mousedown', e => { if (e.target === overlay) close(null); });
+  });
+}
+
+// Лог-буфер: всё что пишем сюда — попадает в console и в window.veLog.
+// Достать из DevTools одной строкой:
+//   copy(JSON.stringify(window.veLog, null, 2))      // в буфер
+//   window.veLog.map(x=>`[${x.ts}] [${x.level}] ${x.msg}`).join('\n')   // как текст
+window.veLog = [];
+function vlog(level, ...parts) {
+  const ts = new Date().toISOString().slice(11, 23);
+  const msg = parts.map(p => typeof p === 'object' ? JSON.stringify(p) : String(p)).join(' ');
+  window.veLog.push({ ts, level, msg });
+  if (window.veLog.length > 500) window.veLog.shift();
+  const fn = level === 'err' ? console.error : (level === 'warn' ? console.warn : console.log);
+  fn(`[${ts}] [VE] ${msg}`);
+}
+// Глобальный перехват — нашли что-то в console, что не идёт через vlog.
+window.addEventListener('error', e => vlog('err', 'window error:', e.message, 'at', e.filename + ':' + e.lineno));
+window.addEventListener('unhandledrejection', e => vlog('err', 'unhandled rejection:', e.reason?.message || String(e.reason)));
+// Удобный шорткат: window.veDump() выводит лог одним блоком и копирует в буфер.
+window.veDump = () => {
+  const txt = window.veLog.map(x => `[${x.ts}] [${x.level}] ${x.msg}`).join('\n');
+  console.log(txt || '(пусто)');
+  // copyText определён ниже — используем typeof guard на случай вызова до его инициализации.
+  if (typeof copyText === 'function') copyText(txt);
+  else if (navigator.clipboard?.writeText) navigator.clipboard.writeText(txt).catch(() => {});
+  return txt;
+};
+
+$('newEpisode').addEventListener('click', async () => {
+  vlog('info', 'newEpisode click; hasFilm=' + !!state.filmHandle);
+  if (!state.filmHandle) { alert('Сначала открой проект (папку).'); return; }
+  try {
+    const name = await askName('Название сцены:', 'например, Сцена 1');
+    vlog('info', 'newEpisode name=' + JSON.stringify(name));
+    if (!name) return;
+    await state.filmHandle.getDirectoryHandle(name, { create: true });
+    await refreshEpisodes();
+    vlog('info', 'newEpisode created: ' + name);
+  } catch (e) {
+    vlog('err', 'newEpisode failed: ' + (e?.message || e));
+    alert('Ошибка: ' + (e?.message || e));
+  }
+});
+
+$('newCharacter').addEventListener('click', async () => {
+  vlog('info', 'newCharacter click; hasFilm=' + !!state.filmHandle);
+  if (!state.filmHandle) { alert('Сначала открой проект (папку).'); return; }
+  try {
+    const name = await askName('Имя персонажа:', 'например, Анна');
+    vlog('info', 'newCharacter name=' + JSON.stringify(name));
+    if (!name) return;
+    const root = await state.filmHandle.getDirectoryHandle(CHAR_DIR, { create: true });
+    await root.getDirectoryHandle(name, { create: true });
+    await refreshCharacters();
+    vlog('info', 'newCharacter created: ' + name);
+  } catch (e) {
+    vlog('err', 'newCharacter failed: ' + (e?.message || e));
+    alert('Ошибка: ' + (e?.message || e));
+  }
+});
+
+$('newLocation').addEventListener('click', async () => {
+  vlog('info', 'newLocation click; hasFilm=' + !!state.filmHandle);
+  if (!state.filmHandle) { alert('Сначала открой проект (папку).'); return; }
+  try {
+    const name = await askName('Название локации:', 'например, Кухня');
+    vlog('info', 'newLocation name=' + JSON.stringify(name));
+    if (!name) return;
+    const root = await state.filmHandle.getDirectoryHandle(LOC_DIR, { create: true });
+    await root.getDirectoryHandle(name, { create: true });
+    await refreshLocations();
+    vlog('info', 'newLocation created: ' + name);
+  } catch (e) {
+    vlog('err', 'newLocation failed: ' + (e?.message || e));
+    alert('Ошибка: ' + (e?.message || e));
+  }
+});
+
+// =================== Board (универсально для серии и персонажа) ===================
+async function selectBoard(board) {
+  if (state.currentBoard?.urls) {
+    for (const url of Object.values(state.currentBoard.urls)) URL.revokeObjectURL(url);
+  }
+  clearSelection();
+  state.selectedClipIds.clear();
+  state.selectedTrackIds.clear();
+  const meta = await loadBoardMetadata(board.handle);
+  state.currentBoard = {
+    ...board,
+    key: boardKey(board.kind, board.name),
+    metadata: {
+      nodes: meta.nodes,
+      connections: meta.connections || [],
+      view: meta.view || null,
+      character: meta.character || null,
+      location: meta.location || null,
+      timeline: meta.timeline || [],
+      history: meta.history || { past: [], future: [] },
+    },
+    urls: {},
+  };
+  if (meta._migrated) await saveBoardMetadata(board.handle, state.currentBoard.metadata);
+
+  $('addText').disabled = false; $('genText').disabled = false; $('genAudio').disabled = false; $('genImage').disabled = false; $('genVideo').disabled = false; $('genSfx').disabled = false; $('genMusic').disabled = false;
+  
+  $('path').textContent = `${state.filmHandle.name} / ${board.name}`;
+  // Тип board (Сцена/Персонаж/Локация) убрали из верхней панели —
+  // достаточно того что выделено в sidebar. Badge оставлен в DOM как
+  // hidden — на случай если где-то логика проверяет его наличие.
+  $('boardBadge').style.display = 'none';
+  // Имя выбранного board в шапке sidebar
+  const boardEl = $('brandBoard');
+  if (boardEl) {
+    boardEl.textContent = board.name;
+    boardEl.style.display = '';
+  }
+  emptyState.classList.add('hidden');
+  $('charSettingsBtn').style.display = board.kind === 'character' ? '' : 'none';
+  // Панель реплик скрыта (юзер попросил убрать из карточки персонажа).
+  // Сами данные реплик в scene.json не трогаем — таймлайн и character-озвучка
+  // продолжают работать. Если понадобится вернуть — расскомментируй ниже.
+  $('repliquesPanel').classList.add('hidden');
+  localStorage.setItem('repliquesOpen', '0');
+  // if (board.kind === 'character') {
+  //   openRepliquesFor(board.name).catch(e => console.warn('replicas open failed', e));
+  // }
+  localStorage.setItem(`lastBoard:${state.filmHandle.name}`,
+    JSON.stringify({ kind: board.kind, name: board.name }));
+  await refreshSidebar();
+  await renderCanvas();
+  // Сбрасываем кэш URL клипов и декодированных AudioBuffer от прошлой доски
+  for (const url of _clipURLCache.values()) URL.revokeObjectURL(url);
+  _clipURLCache.clear();
+  _audioBufferCache.clear();
+  // Thumbnails — тоже revoke предыдущей доски (иначе утечка blob URLs)
+  for (const url of _thumbUrls.values()) URL.revokeObjectURL(url);
+  _thumbUrls.clear();
+  // Восстанавливаем playhead из scene.json (если был сохранён)
+  const tlMeta = state.currentBoard.metadata.timeline;
+  state.playheadTime = (tlMeta && typeof tlMeta.playhead === 'number') ? tlMeta.playhead : 0;
+  // Если таймлайн уже открыт — перерендерить и обновить превью
+  if (!$('timelinePanel').classList.contains('hidden')) {
+    renderTimeline();
+    scheduleUpdatePreview();
+  }
+
+  // Восстановить pan/zoom доски
+  const view = state.currentBoard.metadata.view;
+  if (view) {
+    if (typeof view.zoom === 'number') {
+      state.zoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, view.zoom));
+      applyZoomStyles(state.zoom);
+      $('zoomLabel').textContent = Math.round(state.zoom * 100) + '%';
+    }
+    if (typeof view.scrollLeft === 'number') canvasWrap.scrollLeft = view.scrollLeft;
+    if (typeof view.scrollTop  === 'number') canvasWrap.scrollTop  = view.scrollTop;
+  } else {
+    state.zoom = 1;
+    applyZoomStyles(1);
+    $('zoomLabel').textContent = '100%';
+    canvasWrap.scrollLeft = 0;
+    canvasWrap.scrollTop = 0;
+  }
+
+  // Возобновить незавершённые джобы текущей доски
+  for (const n of state.currentBoard.metadata.nodes) {
+    if (n.status === 'generating' && n.generated?.taskId && !state.jobs.has(n.id)) {
+      resumeJob(n, state.currentBoard.key, state.currentBoard.handle);
+    }
+  }
+}
+
+function ensureConnectionsSvg() {
+  let svg = $('connectionsSvg');
+  if (svg && svg.parentNode === canvas) return svg;
+  svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.id = 'connectionsSvg';
+  svg.setAttribute('class', 'connections-layer');
+  svg.setAttribute('width', '6000');
+  svg.setAttribute('height', '4000');
+  canvas.appendChild(svg);
+  return svg;
+}
+
+function clearCanvasKeepSvg() {
+  const svg = ensureConnectionsSvg();
+  for (const child of [...canvas.children]) {
+    if (child !== svg) child.remove();
+  }
+  if (canvas.firstChild !== svg) canvas.insertBefore(svg, canvas.firstChild);
+}
+
+function showEmpty() {
+  clearCanvasKeepSvg();
+  emptyState.classList.remove('hidden');
+  $('addText').disabled = true; $('genText').disabled = true; $('genAudio').disabled = true; $('genImage').disabled = true; $('genVideo').disabled = true; $('genSfx').disabled = true; $('genMusic').disabled = true;
+  
+  $('path').textContent = '';
+  $('boardBadge').style.display = 'none';
+  $('charSettingsBtn').style.display = 'none';
+}
+
+async function renderCanvas() {
+  clearCanvasKeepSvg();
+  for (const node of state.currentBoard.metadata.nodes) {
+    canvas.appendChild(await createNodeEl(node));
+  }
+  renderConnections();
+}
+
+// =================== Connections (SVG) ===================
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+function bezierPath(x1, y1, x2, y2) {
+  const dx = Math.max(40, Math.abs(x2 - x1) / 2);
+  return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
+}
+
+// БЕЗ чтения offsetWidth/Height из DOM:
+// - offsetWidth/Height на content-visibility:auto-элементе ФОРСИТ материализацию
+//   (Chrome обязан посчитать реальные размеры → теряем весь смысл оффскрин-кулинга,
+//   selectBoard 338ms layout с dirty=45 of 784 — все 784 объекта пробуждались)
+// - Используем кэш в n.width/n.height; обновляется ResizeObserver'ом ниже.
+// Дефолт по типу — на первый рендер пока размер не измерен.
+function _defaultH(n) {
+  if (n.type === 'text') return n.height || 120;
+  if (n.type === 'audio') return n.height || 110;
+  if (n.type === 'image') return n.height || 220;
+  if (n.type === 'video') return n.height || 220;
+  return n.height || 80;
+}
+function nodeAnchorOut(n) {
+  return { x: n.x + (n.width || 280), y: n.y + _defaultH(n) / 2 };
+}
+function nodeAnchorIn(n) {
+  return { x: n.x, y: n.y + _defaultH(n) / 2 };
+}
+
+function renderConnections() {
+  const svg = $('connectionsSvg');
+  if (!svg) return;
+  // Удаляем все, кроме временной линии
+  for (const ch of [...svg.children]) if (!ch.classList.contains('temp-line')) ch.remove();
+  if (!state.currentBoard) return;
+  const nodes = state.currentBoard.metadata.nodes;
+  const conns = state.currentBoard.metadata.connections || [];
+  for (const c of conns) {
+    const f = nodes.find(n => n.id === c.from);
+    const t = nodes.find(n => n.id === c.to);
+    if (!f || !t) continue;
+    const p1 = nodeAnchorOut(f);
+    const p2 = nodeAnchorIn(t);
+    const d = bezierPath(p1.x, p1.y, p2.x, p2.y);
+    const g = document.createElementNS(SVG_NS, 'g');
+    g.setAttribute('class', 'conn');
+    g.dataset.id = c.id;
+    const hit = document.createElementNS(SVG_NS, 'path');
+    hit.setAttribute('class', 'hit');
+    hit.setAttribute('d', d);
+    const line = document.createElementNS(SVG_NS, 'path');
+    line.setAttribute('class', 'line');
+    line.setAttribute('d', d);
+    g.appendChild(hit);
+    g.appendChild(line);
+    g.addEventListener('click', () => removeConnection(c.id));
+    svg.appendChild(g);
+  }
+}
+
+function addConnection(fromId, toId) {
+  if (!fromId || !toId || fromId === toId) return;
+  const conns = state.currentBoard.metadata.connections;
+  if (conns.some(c => c.from === fromId && c.to === toId)) return;
+  conns.push({ id: crypto.randomUUID(), from: fromId, to: toId });
+  renderConnections();
+  scheduleSave();
+}
+
+function removeConnection(id) {
+  const conns = state.currentBoard.metadata.connections;
+  const i = conns.findIndex(c => c.id === id);
+  if (i < 0) return;
+  conns.splice(i, 1);
+  renderConnections();
+  scheduleSave();
+}
+
+async function createNodeEl(node) {
+  const el = document.createElement('div');
+  el.className = 'node';
+  if (node.type === 'text') el.classList.add('text-node');
+  el.dataset.id = node.id;
+  el.style.left = node.x + 'px';
+  el.style.top  = node.y + 'px';
+  if (node.width)  el.style.width  = node.width + 'px';
+  if (node.height) el.style.height = node.height + 'px';
+
+  const header = document.createElement('div');
+  header.className = 'node-header';
+  header.title = 'Тяни, чтобы переместить. Двойной клик по имени или ПКМ → Переименовать.';
+
+  // Имя ноды (если задано). Узкий header — обрезаем ellipsis'ом.
+  const nameEl = document.createElement('span');
+  nameEl.className = 'name';
+  if (node.name) nameEl.textContent = node.name;
+  else { nameEl.textContent = '—'; nameEl.classList.add('empty'); }
+  // Дабл-клик по имени → переименовать. Не блокируем drag-mousedown.
+  nameEl.addEventListener('dblclick', e => {
+    e.stopPropagation();
+    renameNode(node);
+  });
+  header.appendChild(nameEl);
+
+  const del = document.createElement('span');
+  del.className = 'delete'; del.textContent = '×'; del.title = 'Удалить ноду';
+  header.appendChild(del);
+  el.appendChild(header);
+
+  const body = document.createElement('div');
+  body.className = 'node-body';
+  el.appendChild(body);
+
+  await renderNodeBody(node, body);
+
+  del.addEventListener('click', e => {
+    e.stopPropagation();
+    deleteNode(node, el);
+  });
+
+  if (['image','video','audio'].includes(node.type) && node.generated) {
+    const footer = document.createElement('div');
+    footer.className = 'node-footer';
+    el.appendChild(footer);
+    updateNodeFooter(node, footer);
+  }
+
+  const rh = document.createElement('div');
+  rh.className = 'resize-handle';
+  el.appendChild(rh);
+  attachResize(el, node, rh);
+
+  const anchor = document.createElement('div');
+  anchor.className = 'anchor';
+  anchor.title = 'Тяни, чтобы сослаться или сгенерировать ноду со ссылкой';
+  el.appendChild(anchor);
+  attachAnchor(node, el, anchor);
+
+  attachDrag(el, node);
+
+  el.addEventListener('dblclick', e => {
+    if (e.target.closest('textarea, input, video, button, .delete, .anchor, .resize-handle')) return;
+    if (node.type === 'audio' && node.file) {
+      regenerateNode(node);
+      return;
+    }
+    if ((node.type === 'image' || node.type === 'video') && node.file) {
+      openFullscreen(node);
+      return;
+    }
+    if (node.generated) showNodeSettings(node);
+  });
+  el.addEventListener('contextmenu', e => {
+    if (e.target.closest('textarea, input, .anchor, .resize-handle')) return;
+    e.preventDefault();
+    e.stopPropagation();
+    showNodeContextMenu(node, e.clientX, e.clientY);
+  });
+  return el;
+}
+
+// =================== Контекстное меню ноды (ПКМ) ===================
+async function renameNode(node) {
+  const current = node.name || '';
+  const newName = await askName('Имя ноды (для @-ссылок):', '', current);
+  if (newName == null) return;
+  const trimmed = newName.trim();
+  // Текст-нода: переименовать соответствующий .md файл
+  if (trimmed && node.type === 'text' && node.file) {
+    const baseDesired = trimmed + '.md';
+    const currentBase = node.file.split('/').pop();
+    if (baseDesired !== currentBase) {
+      try {
+        const fh = await resolveBoardFile(state.currentBoard.handle, node.file);
+        const content = await (await fh.getFile()).text();
+        const dir = await getOrCreateBoardSubdir(state.currentBoard.handle, 'texts');
+        const newBase = await uniqueName(dir, baseDesired);
+        await writeFile(dir, newBase, content);
+        await removeBoardFile(state.currentBoard.handle, node.file);
+        node.file = `texts/${newBase}`;
+      } catch (e) { console.error('rename .md failed', e); }
+    }
+  }
+  node.name = trimmed;
+  scheduleSave();
+  // Обновим header — имя ноды показывается в .node-header .name.
+  const nodeEl = canvas.querySelector(`.node[data-id="${node.id}"]`);
+  const nameEl = nodeEl?.querySelector('.node-header .name');
+  if (nameEl) {
+    if (trimmed) {
+      nameEl.textContent = trimmed;
+      nameEl.classList.remove('empty');
+    } else {
+      nameEl.textContent = '—';
+      nameEl.classList.add('empty');
+    }
+  }
+}
+
+function showNodeContextMenu(node, clientX, clientY) {
+  const menu = $('nodeMenu');
+  menu.innerHTML = '';
+  const add = (label, fn, opts = {}) => {
+    const b = document.createElement('button');
+    b.textContent = label;
+    if (opts.danger) b.style.color = '#f88';
+    if (opts.disabled) { b.disabled = true; b.style.opacity = '0.4'; b.style.cursor = 'default'; }
+    b.addEventListener('click', () => { if (b.disabled) return; menu.classList.add('hidden'); fn(); });
+    menu.appendChild(b);
+  };
+  add(node.name ? `✏ Переименовать (${node.name})` : '✏ Переименовать', () => renameNode(node));
+  add('📋 Логи', () => showNodeLogs(node));
+  if (node.generated) add('⚙ Параметры', () => showNodeSettings(node));
+  if (node.status === 'generating') {
+    add('⏹ Остановить', () => stopJob(node.id));
+    add('↻ Перезапустить', () => restartJob(node.id));
+  } else if (node.status === 'draft') {
+    add('▶ Запустить генерацию', () => regenerateNode(node));
+    add('✎ Изменить и запустить', () => regenerateNode(node));
+  } else if (node.generated) {
+    add('↻ Перегенерировать (правка)', () => regenerateNode(node));
+  }
+  if (node.type === 'image' || node.type === 'video' || node.type === 'audio') {
+    add('➕ В таймлайн', () => addToTimeline(node));
+  }
+  // Локация: пометить картинку как location sheet
+  if (node.type === 'image' && node.file && state.currentBoard?.kind === 'location') {
+    const isSheet = state.currentBoard.metadata.location?.sheet === node.file;
+    add(isSheet ? '⭐ Это sheet локации' : '⭐ Сделать sheet локации', () => {
+      if (!state.currentBoard.metadata.location) state.currentBoard.metadata.location = {};
+      state.currentBoard.metadata.location.sheet = isSheet ? null : node.file;
+      scheduleSave();
+      loadAllLocationsInfo().catch(() => {});
+    });
+  }
+  // Персонаж: пометить картинку как character sheet
+  if (node.type === 'image' && node.file && state.currentBoard?.kind === 'character') {
+    const isSheet = state.currentBoard.metadata.character?.characterSheet === node.file;
+    add(isSheet ? '⭐ Это character sheet' : '⭐ Сделать character sheet', () => {
+      if (!state.currentBoard.metadata.character) state.currentBoard.metadata.character = {};
+      state.currentBoard.metadata.character.characterSheet = isSheet ? null : node.file;
+      scheduleSave();
+      loadAllCharactersInfo().catch(() => {});
+    });
+  }
+  add('⎘ Скопировать (Cmd+C)', () => copyNodeToClipboard(node));
+  add('✂ Вырезать (Cmd+X)', async () => {
+    await copyNodeToClipboard(node);
+    state.selectedNodeIds = new Set([node.id]);
+    await deleteSelectedNodes();
+  });
+  const canPaste = !!(state.clipboard?.length);
+  add('📥 Вставить (Cmd+V)', () => pasteClipboardNodes(), { disabled: !canPaste });
+  const canReplace = !!(state.clipboard?.length);
+  add('⇄ Заменить из буфера', () => replaceNodeFromClipboard(node), { disabled: !canReplace });
+  if (node.type === 'audio' && node.file) {
+    add('⬇ Скачать аудио', async () => {
+      try {
+        const fh = await resolveBoardFile(state.currentBoard.handle, node.file);
+        const file = await fh.getFile();
+        await downloadAudioAtSpeed(file, node.file, 1);
+      } catch (err) {
+        console.error('Download failed:', err);
+        alert('Не удалось скачать: ' + (err?.message || err));
+      }
+    });
+  }
+  add('🗑 Удалить', () => {
+    const el = canvas.querySelector(`.node[data-id="${node.id}"]`);
+    deleteNode(node, el);
+  }, { danger: true });
+  // Позиционируем не выходя за экран
+  positionFloatingMenu(menu, clientX, clientY);
+  setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
+}
+
+function closeNodeMenu(e) {
+  // Клик по активной кнопке меню — даём её click-обработчику сработать (он сам закроет меню),
+  // а пока перевзводим listener, чтобы случайно не закрыть до click-а.
+  if (e && e.target.closest('#nodeMenu button:not([disabled])')) {
+    document.addEventListener('mousedown', closeNodeMenu, { once: true });
+    return;
+  }
+  // Любой другой клик (по фону меню, по холсту, по тексту-заголовку и т.д.) — закрываем
+  $('nodeMenu').classList.add('hidden');
+}
+
+function showNodeLogs(node) {
+  const log = state.jobLogs.get(node.id) || [];
+  const meta = [];
+  meta.push(`id: ${node.id}`);
+  meta.push(`type: ${node.type}`);
+  meta.push(`name: ${node.name || '(без имени)'}`);
+  meta.push(`file: ${node.file || '—'}`);
+  meta.push(`status: ${node.status || 'ok'}`);
+  if (node.error) meta.push(`error: ${node.error}`);
+  if (node.generated) {
+    meta.push(`gen.kind: ${node.generated.kind}`);
+    meta.push(`gen.model: ${node.generated.model || node.generated.modelKey || '—'}`);
+    meta.push(`gen.taskId: ${node.generated.taskId || '—'}`);
+    meta.push(`gen.state: ${node.generated.state || '—'}`);
+    if (typeof node.generated.creditsCharged === 'number') {
+      meta.push(`gen.cost: ${node.generated.creditsCharged} credits`);
+    }
+    if (node.generated.voiceId) meta.push(`gen.voice: ${node.generated.voiceName || node.generated.voiceId}`);
+    if (node.generated.tones?.length) meta.push(`gen.tones: ${node.generated.tones.join(', ')}`);
+    if (node.generated.refs?.length) {
+      meta.push(`gen.refs: ${node.generated.refs.map(r => `@${r.name}(${r.type})`).join(', ')}`);
+    }
+    if (node.generated.prompt) meta.push(`gen.prompt: ${node.generated.prompt}`);
+    if (node.generated.rawPrompt && node.generated.rawPrompt !== node.generated.prompt) {
+      meta.push(`gen.rawPrompt: ${node.generated.rawPrompt}`);
+    }
+  }
+  if (node.history?.length) {
+    meta.push(`history: ${node.history.length} версий, текущая ${(node.historyIndex ?? 0) + 1}`);
+  }
+  meta.push('');
+  meta.push('--- timeline ---');
+  const start = log[0]?.ts || Date.now();
+  for (const e of log) {
+    const dt = ((e.ts - start) / 1000).toFixed(2).padStart(7);
+    meta.push(`+${dt}s  ${e.msg}`);
+  }
+  if (!log.length) meta.push('(нет записей)');
+  $('logsContent').textContent = meta.join('\n');
+  $('logsModal').classList.remove('hidden');
+}
+
+$('logsClose').addEventListener('click', () => $('logsModal').classList.add('hidden'));
+
+// =================== Полноэкранный просмотр ===================
+async function openFullscreen(node) {
+  const stage = $('fsStage');
+  stage.innerHTML = '';
+  try {
+    let url = state.currentBoard?.urls?.[node.file];
+    if (!url && state.currentBoard?.handle) {
+      const fh = await resolveBoardFile(state.currentBoard.handle, node.file);
+      url = URL.createObjectURL(await fh.getFile());
+      state.currentBoard.urls[node.file] = url;
+    }
+    if (!url) return;
+    if (node.type === 'image') {
+      const img = document.createElement('img');
+      img.src = url;
+      stage.appendChild(img);
+    } else if (node.type === 'video') {
+      const v = document.createElement('video');
+      v.src = url;
+      v.controls = true;
+      v.autoplay = true;
+      stage.appendChild(v);
+    }
+    $('fsModal').classList.remove('hidden');
+  } catch (e) {
+    console.error('openFullscreen failed:', e);
+  }
+}
+function closeFullscreen() {
+  const modal = $('fsModal');
+  if (modal.classList.contains('hidden')) return;
+  const v = $('fsStage').querySelector('video');
+  if (v) { try { v.pause(); } catch {} }
+  $('fsStage').innerHTML = '';
+  modal.classList.add('hidden');
+}
+$('fsClose').addEventListener('click', closeFullscreen);
+$('fsModal').addEventListener('click', e => {
+  if (e.target.id === 'fsModal' || e.target.id === 'fsStage') closeFullscreen();
+});
+window.addEventListener('keydown', e => {
+  if (e.key === 'Escape' && !$('fsModal').classList.contains('hidden')) {
+    e.stopPropagation();
+    closeFullscreen();
+  }
+}, true);
+// Универсальный copy-helper: clipboard API → fallback на execCommand.
+async function copyText(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {}
+  // Fallback: execCommand работает в Electron без permission.
+  try {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.cssText = 'position:fixed; opacity:0; pointer-events:none;';
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand('copy');
+    ta.remove();
+    return !!ok;
+  } catch { return false; }
+}
+
+$('logsCopy').addEventListener('click', async () => {
+  const orig = $('logsCopy').textContent;
+  const ok = await copyText($('logsContent').textContent);
+  $('logsCopy').textContent = ok ? '✓ Скопировано' : '✕ Не получилось';
+  setTimeout(() => { $('logsCopy').textContent = orig; }, 1500);
+});
+