kingkont 0.20.16 → 0.20.18

package/index.html

@@ -126,6 +126,7 @@
 
 <main class="main">
   <div class="toolbar">
+    <button id="sidebarToggle" class="kk-mobile-burger" title="Меню сцен" aria-label="Меню сцен">☰</button>
     <button id="addText" class="kk-edit-only" disabled title="Создать пустую текстовую ноду">✏️ Написать</button>
     <button id="genText"  class="kk-edit-only" disabled title="Сгенерировать текст">📝 Текст</button>
     <button id="genAudio" class="kk-edit-only" disabled title="Сгенерировать голос">🎙 Голос</button>

package/lib/providers.js

@@ -110,11 +110,27 @@ const CHATIUM_VIDEO_MODELS = {
   'grok-t2v':         'grok-imagine/text-to-video',
 };
 
-// OpenRouter image-gen модели. Раньше пробовали google/gemini-2.5-flash-image-preview,
-// но OpenRouter отдаёт 404 «No endpoints found» — slug устарел / модель за paywall.
-// Пока пусто = роутинг через OpenRouter не активен → fall through на KIE / Chatium.
-// Если найдётся рабочий slug — вернём.
-const OPENROUTER_IMAGE_MODELS = {};
+// OpenRouter image-gen модели — приоритетный путь для nano-banana
+// (см. startGeneration: orAvailable && orSupportsModel → OpenRouter).
+// OpenRouter регистрирует их буквально как "Nano Banana ..." —
+// сопоставление по их official-названиям:
+//   nano-banana-2 (Gemini 3.1 Flash Image Preview)  → preview, дешевле
+//   nano-banana-pro (Gemini 3 Pro Image Preview)    → выше качество
+// (Slug google/gemini-2.5-flash-image-preview из старого кода устарел —
+//  OpenRouter возвращал «No endpoints found».)
+const OPENROUTER_IMAGE_MODELS = {
+  'nano-banana-2':   'google/gemini-3.1-flash-image-preview',
+  'nano-banana-pro': 'google/gemini-3-pro-image-preview',
+};
+
+// OpenRouter video-gen модели — отдельный API endpoint POST /api/v1/videos
+// (не /chat/completions). Подтверждено: bytedance/seedance-2.0 и -fast
+// доступны (см. /api/v1/videos/models). duration: 4-15s, resolution: 480p/720p
+// (для -2.0 ещё 1080p), aspects: 1:1, 3:4, 9:16, 4:3, 16:9, 21:9, 9:21.
+const OPENROUTER_VIDEO_MODELS = {
+  'seedance-2':      'bytedance/seedance-2.0',
+  'seedance-2-fast': 'bytedance/seedance-2.0-fast',
+};
 
 function resolveModel(map, key, fallback) {
   if (!key) return fallback;
@@ -302,12 +318,18 @@ async function startGeneration(args) {
   //   1) KIE — если useKie=true И KIE_API_KEY И модель поддерживается KIE.
   //   2) Chatium — fallback, либо если модель не входит в KIE.
   //   3) Если ни один не доступен — ошибка.
-  const orKey = modelKey || (kind === 'image' ? 'nano-banana-2' : null);
+  const orKey = modelKey || (kind === 'image' ? 'nano-banana-2' : (kind === 'video' ? 'seedance-2' : null));
   const orAvailable = s.useOpenrouter && process.env.OPENROUTER_API_KEY;
-  const orSupportsModel = kind === 'image' && !!OPENROUTER_IMAGE_MODELS[orKey];
-  if (orAvailable && orSupportsModel) {
+  const orImgModel = kind === 'image' && OPENROUTER_IMAGE_MODELS[orKey];
+  const orVidModel = kind === 'video' && OPENROUTER_VIDEO_MODELS[orKey];
+  if (orAvailable && orImgModel) {
     return await _startGenerationViaOpenRouter({ key: orKey, prompt, imageInputs, aspectRatio });
   }
+  if (orAvailable && orVidModel) {
+    return await _startGenerationViaOpenRouterVideo({
+      key: orKey, prompt, imageInputs, firstFrame, aspectRatio, resolution, duration,
+    });
+  }
 
   const kieMap = kind === 'video' ? KIE_VIDEO_MODELS : KIE_IMAGE_MODELS;
   const kieKey = modelKey || (kind === 'video' ? 'seedance-2' : 'nano-banana-2');
@@ -470,6 +492,48 @@ async function _startGenerationViaOpenRouter({ key, prompt, imageInputs, aspectR
   return { taskId, provider: 'openrouter' };
 }
 
+// OpenRouter video API (отдельный POST /api/v1/videos).
+// Response shape:
+//   POST {prompt, model, duration, aspect_ratio, resolution, image_input?}
+//   → { id, polling_url, status: 'pending' }
+//   GET /videos/<id> → status 'pending' | 'completed' с unsigned_urls
+// taskId формата 'openrouter-vid:<openrouter-id>' — pollGeneration ниже
+// делает GET к polling_url (требует Bearer), при completed возвращает
+// первый из unsigned_urls (тоже с auth — клиент идёт через /api/proxy,
+// proxy-handler в server.js добавит Authorization для openrouter.ai/...).
+async function _startGenerationViaOpenRouterVideo({ key, prompt, imageInputs, firstFrame, aspectRatio, resolution, duration }) {
+  const apiKey = process.env.OPENROUTER_API_KEY;
+  const model = OPENROUTER_VIDEO_MODELS[key];
+  if (!model) throw new Error(`OpenRouter не поддерживает video-модель "${key}"`);
+  const body = { prompt, model };
+  if (duration) body.duration = +duration;
+  if (aspectRatio) body.aspect_ratio = aspectRatio;
+  if (resolution) body.resolution = resolution;
+  // image-to-video: первый кадр или первая ref-картинка.
+  const startImage = firstFrame || (Array.isArray(imageInputs) && imageInputs[0]) || null;
+  if (startImage) body.image_input = startImage;
+  logCall('POST', 'OpenRouter', 'https://openrouter.ai/api/v1/videos',
+    `model=${model} dur=${duration || '-'}s asp=${aspectRatio || '-'} res=${resolution || '-'}`);
+  const r = await fetch('https://openrouter.ai/api/v1/videos', {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${apiKey}`,
+      'Content-Type': 'application/json',
+      'HTTP-Referer': 'http://localhost',
+      'X-Title': 'KingKont',
+    },
+    body: JSON.stringify(body),
+  });
+  const text = await r.text();
+  let data; try { data = JSON.parse(text); } catch { data = { raw: text }; }
+  if (!r.ok) {
+    const baseMsg = data?.error?.message || data?.raw || `HTTP ${r.status}`;
+    throw new Error(`OpenRouter /videos: ${baseMsg}`);
+  }
+  if (!data.id) throw new Error(`OpenRouter не вернул id: ${text.slice(0, 200)}`);
+  return { taskId: 'openrouter-vid:' + data.id, provider: 'openrouter' };
+}
+
 // Внутренний helper: KIE-путь startGeneration. Вынесен чтобы не дублировать
 // логику между «KIE первичный» и старым «KIE fallback».
 async function _startGenerationViaKie({ kind, prompt, key, imageInputs, videoInputs, aspectRatio, resolution, duration, quality }) {
@@ -557,6 +621,32 @@ async function pollGeneration(taskId, settings) {
     if (r.status === 'error') return { status: 'error', error: r.error, provider: 'openrouter' };
     return { status: 'pending', state: 'generating', provider: 'openrouter' };
   }
+  // OpenRouter video-gen — async, polling-API.
+  if (taskId.startsWith('openrouter-vid:')) {
+    const id = taskId.slice('openrouter-vid:'.length);
+    const apiKey = process.env.OPENROUTER_API_KEY;
+    if (!apiKey) return { status: 'error', error: 'OPENROUTER_API_KEY не задан', provider: 'openrouter' };
+    try {
+      const r = await fetch(`https://openrouter.ai/api/v1/videos/${encodeURIComponent(id)}`, {
+        headers: { 'Authorization': `Bearer ${apiKey}` },
+      });
+      const text = await r.text();
+      let d; try { d = JSON.parse(text); } catch { d = {}; }
+      if (!r.ok) return { status: 'error', error: d?.error?.message || `HTTP ${r.status}`, provider: 'openrouter' };
+      if (d.status === 'completed') {
+        const url = Array.isArray(d.unsigned_urls) && d.unsigned_urls[0];
+        if (!url) return { status: 'error', error: 'OpenRouter video без unsigned_urls', provider: 'openrouter' };
+        const cost = d.usage?.cost ?? null;
+        return { status: 'done', url, cost, provider: 'openrouter' };
+      }
+      if (d.status === 'failed' || d.status === 'error') {
+        return { status: 'error', error: d.error || d.error?.message || 'failed', provider: 'openrouter' };
+      }
+      return { status: 'pending', state: d.status || 'generating', provider: 'openrouter' };
+    } catch (e) {
+      return { status: 'error', error: 'OpenRouter video poll: ' + (e?.message || e), provider: 'openrouter' };
+    }
+  }
 
   if (taskId.startsWith('chatium:')) {
     const realId = taskId.slice('chatium:'.length);

package/main.js

@@ -15,6 +15,50 @@ const { start } = require('./server');
 let win = null;
 let port = null;
 
+// ===== File-логгер для агента-помощника =====
+// Все console.log/warn/error из main + renderer пишутся в один файл,
+// который Claude (помощник разработки) может читать и анализировать.
+// Юзер: «давай ты сам будешь анализировать логи. я использую electron».
+const LOG_FILE_PATH = () => path.join(app.getPath('userData'), 'app.log');
+const LOG_MAX_BYTES = 5 * 1024 * 1024;            // 5MB → ротация в .log.1
+function _rotateLogIfNeeded(p) {
+  try {
+    const st = fs.statSync(p);
+    if (st.size > LOG_MAX_BYTES) {
+      const bak = p + '.1';
+      try { fs.unlinkSync(bak); } catch {}
+      fs.renameSync(p, bak);
+    }
+  } catch {}
+}
+function appLog(prefix, ...args) {
+  const ts = new Date().toISOString();
+  const msg = args.map(a => {
+    if (a instanceof Error) return a.stack || a.message || String(a);
+    if (typeof a === 'string') return a;
+    try { return JSON.stringify(a); } catch { return String(a); }
+  }).join(' ');
+  const line = `${ts} [${prefix}] ${msg}\n`;
+  try {
+    const p = LOG_FILE_PATH();
+    _rotateLogIfNeeded(p);
+    fs.appendFileSync(p, line);
+  } catch {}
+}
+// Hook console.* — origin'ы оставляем, чтобы видеть в stdout тоже.
+const _origLog = console.log.bind(console);
+const _origWarn = console.warn.bind(console);
+const _origErr = console.error.bind(console);
+console.log = (...a) => { _origLog(...a); appLog('main', ...a); };
+console.warn = (...a) => { _origWarn(...a); appLog('warn', ...a); };
+console.error = (...a) => { _origErr(...a); appLog('error', ...a); };
+process.on('uncaughtException',  e => appLog('uncaught', e));
+process.on('unhandledRejection', e => appLog('unhandled', e));
+// IPC из renderer'а — пишем под префиксом renderer:<level>.
+ipcMain.on('app-log:write', (_evt, level, msg) => {
+  appLog('renderer:' + (level || 'log'), msg);
+});
+
 // ===== Native player (опциональный, питон-процесс с mpv) =====
 let nativeProc = null;
 let nativeWsUrl = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.20.16",
+  "version": "0.20.18",
   "description": "KingKont \u00b7 Chatium \u2014 \u043d\u043e\u0434-\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0441\u0446\u0435\u043d \u0441 AI-\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 (\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438/\u0432\u0438\u0434\u0435\u043e/\u0433\u043e\u043b\u043e\u0441/SFX/\u043c\u0443\u0437\u044b\u043a\u0430/\u0442\u0435\u043a\u0441\u0442)",
   "main": "main.js",
   "bin": {

package/preload.js

@@ -112,6 +112,12 @@ contextBridge.exposeInMainWorld('appPath', {
 // Используется renderer'ом в режиме «облачного проекта» (без showDirectoryPicker).
 // На веб-версии (без preload) — undefined; web-shell использует in-memory модель
 // + сразу-на-сервер (см. renderer/cloudFs.js fallback).
+// Renderer → main file-логгер. Используется для проброса console.* в файл,
+// который агент-помощник (Claude) может читать. См. main.js appLog.
+contextBridge.exposeInMainWorld('appLog', {
+  write: (level, msg) => ipcRenderer.send('app-log:write', level, msg),
+});
+
 contextBridge.exposeInMainWorld('cloudFs', {
   ensureProject: (id)             => ipcRenderer.invoke('cloudFs:ensureProject', id),
   list:          (id, rel)        => ipcRenderer.invoke('cloudFs:list', id, rel),

package/renderer/board.js

@@ -256,6 +256,32 @@ window.addEventListener('DOMContentLoaded', async () => {
         e.stopPropagation();
         showProjectContextMenu(e.clientX, e.clientY);
     });
+    // Mobile-burger toggle: открыть/закрыть sidebar в template-просмотре
+    // на узких экранах. CSS показывает кнопку только в view-only-mode @media
+    // (max-width:768px). Клик добавляет/убирает body.sidebar-open → slide-in.
+    // Клик по backdrop'у (::before) тоже закрывает — wire'им через body click.
+    const burger = document.getElementById('sidebarToggle');
+    if (burger) {
+        burger.addEventListener('click', e => {
+            e.stopPropagation();
+            document.body.classList.toggle('sidebar-open');
+        });
+    }
+    document.body.addEventListener('click', e => {
+        if (!document.body.classList.contains('sidebar-open')) return;
+        // Клик в любом месте ВНЕ sidebar/toolbar — закрываем.
+        if (e.target.closest('.sidebar') || e.target.closest('.toolbar')) return;
+        document.body.classList.remove('sidebar-open');
+    });
+    // Клик по элементу sidebar-list (board-item) — закрываем шторку, чтобы
+    // юзер сразу увидел выбранную сцену.
+    document.querySelectorAll('.sidebar-list').forEach(list => {
+        list.addEventListener('click', e => {
+            if (e.target.closest('.item')) {
+                document.body.classList.remove('sidebar-open');
+            }
+        });
+    });
     // Версия приложения на welcome-экране и в шапке проекта (после слова
     // "KingKont"). appInfo.version() — IPC к main → app.getVersion().
     // На веб-версии (без preload) — пропускаем, версия не показывается.
@@ -1643,18 +1669,17 @@ async function openShareModal(p) {
         // В Electron location.origin === http://localhost:17893 — кому
         // отправлять такую ссылку? Принимающий открывает в обычном браузере,
         // там приложение живёт на kingkont.ru. В web используем origin.
-        // Через /app/spaces/client/index.html (auth-aware stub) — он редиректит
-        // на свежую версионированную /static/web-<sha>.html. /static/web.html
-        // напрямую chatium edge-cache намертво держит stale, шарить эту ссылку
-        // нельзя — получатель увидит старую версию.
         const isLocal = /^https?:\/\/(localhost|127\.0\.0\.1)/.test(location.origin);
         const base = isLocal ? 'https://kingkont.ru' : location.origin;
-        return base + '/app/spaces/client/index.html#template=' + proj.id;
+        return base + '/static/web.html#template=' + proj.id;
     }
     function render() {
         const isPub = !!proj.isPublic;
         box.innerHTML = `
-      <h2 style="margin:0 0 16px;font-size:18px;">🤝 Расшарить «${escapeHtml(proj.name || p.name || '')}»</h2>
+      <div style="display:flex;align-items:center;gap:10px;margin:0 0 16px;">
+        <h2 style="margin:0;font-size:18px;flex:1;">🤝 Расшарить «${escapeHtml(proj.name || p.name || '')}»</h2>
+        <button id="shareGoto" title="Открыть проект как зритель (template-view)" style="padding:6px 12px;background:#2a3854;color:#aac8e6;border:1px solid #4a6a9a;border-radius:4px;cursor:pointer;font-size:12px;white-space:nowrap;">↗ Перейти</button>
+      </div>
 
       <div style="background:#1a1a1a;padding:14px;border-radius:6px;margin-bottom:16px;">
         <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;">
@@ -1730,6 +1755,14 @@ async function openShareModal(p) {
                 pubT.disabled = false;
             }
         });
+        // «Перейти» — открыть зрительскую template-ссылку в новой вкладке.
+        // Полезно автору проверить как проект выглядит для получателя.
+        box.querySelector('#shareGoto')?.addEventListener('click', () => {
+            const url = templateUrl();
+            // В Electron setWindowOpenHandler → shell.openExternal (системный
+            // браузер). В web — обычная новая вкладка.
+            window.open(url, '_blank', 'noopener');
+        });
         // Copy URL
         box.querySelector('#pubCopy')?.addEventListener('click', async () => {
             const inp = box.querySelector('#pubUrl');
@@ -2946,12 +2979,18 @@ function askName(title, placeholder = '', initialValue = '', opts = {}) {
         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';
+        // multiline=true → textarea вместо input (для длинных описаний).
+        const inp = document.createElement(opts.multiline ? 'textarea' : 'input');
+        if (!opts.multiline) 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;';
+        if (opts.multiline) {
+            inp.rows = 6;
+            inp.style.cssText = 'width:100%; padding:10px; background:#1a1a1a; color:#e0e0e0; border:1px solid #444; border-radius:4px; font-size:13px; line-height:1.5; resize:vertical; min-height:120px; margin-bottom:14px; font-family:inherit;';
+        } else {
+            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');
@@ -2976,6 +3015,8 @@ function askName(title, placeholder = '', initialValue = '', opts = {}) {
         ok.addEventListener('click', () => close(inp.value.trim()));
         inp.addEventListener('keydown', e => {
             if (e.key === 'Enter') {
+                // В textarea Enter добавляет перенос; Cmd/Ctrl+Enter — submit.
+                if (opts.multiline && !(e.metaKey || e.ctrlKey)) return;
                 e.preventDefault();
                 close(inp.value.trim());
             }
@@ -3154,14 +3195,16 @@ $('newLocation').addEventListener('click', async () => {
 //   handle резолвится в момент перехода (через listEpisodes/listCharacters
 //   /listLocations), хранить нельзя — FSAH-handle не сериализуется в JSON.
 function refreshNodeLinkBadge(el, node) {
-    const badge = el.querySelector('.link-badge');
-    if (!badge) return;
-    if (node.linkedBoard?.name) {
-        badge.style.display = '';
-        badge.title = `Дабл-клик / клик: открыть → ${node.linkedBoard.name}`;
-    } else {
-        badge.style.display = 'none';
-    }
+    const goBtn = el.querySelector('.link-go-btn');
+    const has = !!node.linkedBoard?.name;
+    if (goBtn) {
+        goBtn.style.display = has ? '' : 'none';
+        if (has) goBtn.textContent = `Перейти → ${node.linkedBoard.name}`;
+    }
+    // Legacy: удаляем .link-badge из старых нод (если она была вставлена
+    // прежней версией кода). Юзер просил убрать иконку из угла.
+    const legacy = el.querySelector('.link-badge');
+    if (legacy) legacy.remove();
 }
 async function _resolveLinkedBoardHandle(target) {
     if (!state.filmHandle || !target?.name) return null;
@@ -3380,26 +3423,55 @@ async function selectBoard(board) {
     const z = state.zoom || 1;
     document.querySelector('.canvas-frame').style.width = (6000 * z + 2 * padX) + 'px';
     document.querySelector('.canvas-frame').style.height = (4000 * z + 2 * padY) + 'px';
-    if (view) {
-        // Backward-compat старых view (без padding) — добавляем.
-        if (typeof view.scrollLeft === 'number') {
-            canvasWrap.scrollLeft = view.scrollLeft >= padX ? view.scrollLeft : view.scrollLeft + padX;
-        }
-        else
+    // Восстановление scroll-позиции:
+    //   1) Сохранённый view (юзер сам прокрутил и сохранил) → восстанавливаем.
+    //   2) Иначе — скроллим к верхней-левой ноде доски (с 20px gap).
+    //      Юзер: «любую сцену для которой нет сохранённой позиции —
+    //      открывать с верхнего-левого угла». Покрывает и view-only
+    //      template-link, и любые свежесозданные сцены без view.
+    //   3) Если нод нет — fallback на канвас-origin (padX, padY).
+    // Хелпер: scroll к верхней-левой ноде доски (с 20px gap).
+    const scrollToTopLeftNode = () => {
+        const nodes = state.currentBoard.metadata?.nodes || [];
+        if (nodes.length) {
+            const minX = Math.min(...nodes.map(n => n.x ?? 0));
+            const minY = Math.min(...nodes.map(n => n.y ?? 0));
+            const z = state.zoom || 1;
+            canvasWrap.scrollLeft = (minX - 20) * z + padX;
+            canvasWrap.scrollTop  = (minY - 20) * z + padY;
+        } else {
             canvasWrap.scrollLeft = padX;
-        if (typeof view.scrollTop === 'number') {
-            canvasWrap.scrollTop = view.scrollTop >= padY ? view.scrollTop : view.scrollTop + padY;
+            canvasWrap.scrollTop  = padY;
         }
-        else
-            canvasWrap.scrollTop = padY;
+    };
+    // В view-only / #template= ВСЕГДА скроллим к top-left, независимо от
+    // сохранённого автором view. Юзер: «при показе template любую сцену
+    // нужно грузить с верхнего левого угла».
+    const isViewOnly = document.body.classList.contains('view-only-mode')
+        || /^#template=/.test(location.hash || '');
+    const hasSavedView = view && (typeof view.scrollLeft === 'number' || typeof view.scrollTop === 'number');
+    if (isViewOnly) {
+        scrollToTopLeftNode();
+    } else if (hasSavedView) {
+        // view.scrollLeft/Top — это снэпшот canvasWrap.scrollLeft/Top на
+        // момент сохранения, в координатах viewport'а (с учётом padX/padY).
+        // Раньше тут была heuristic-compat: `value >= padX ? value : value+padX`
+        // — предполагалось что старые сохранения без padding'а маленькие.
+        // Но юзер может валидно скроллить В padding-зону (negative canvas-
+        // coords) → новый save имеет scrollLeft < padX → heuristic считал
+        // это legacy и добавлял padX → восстановление в неправильное место.
+        // Юзер: «сохранение не происходит когда мы сдвигаемся в область
+        // отрицательных значений». Теперь восстанавливаем как-есть.
+        if (typeof view.scrollLeft === 'number') canvasWrap.scrollLeft = view.scrollLeft;
+        else canvasWrap.scrollLeft = padX;
+        if (typeof view.scrollTop === 'number') canvasWrap.scrollTop = view.scrollTop;
+        else canvasWrap.scrollTop = padY;
     }
     else {
-        canvasWrap.scrollLeft = padX;
-        canvasWrap.scrollTop = padY;
+        scrollToTopLeftNode();
     }
-    // Auto-scroll к bbox нод если ни одна не попадает в viewport.
-    // Frame уже ресайзнут синхронно выше, scroll проставлен корректно —
-    // в next frame _autoScrollToNodesIfHidden имеет валидную картинку.
+    // Auto-scroll к bbox нод если ни одна не попадает в viewport
+    // (защита для legacy-проектов с сохранённым view далеко от нод).
     requestAnimationFrame(() => _autoScrollToNodesIfHidden(padX, padY));
     // Возобновить незавершённые джобы текущей доски
     for (const n of state.currentBoard.metadata.nodes) {
@@ -3837,16 +3909,20 @@ async function createNodeEl(node) {
     el.appendChild(anchor);
     attachAnchor(node, el, anchor);
     attachDrag(el, node);
-    // Link-badge: показывает 🔗 если у ноды есть linkedBoard (ссылка на сцену).
-    // Сам badge кликабельный — переход выполняется также через dblclick по ноде.
-    const linkBadge = document.createElement('div');
-    linkBadge.className = 'link-badge';
-    linkBadge.textContent = '🔗';
-    el.appendChild(linkBadge);
-    linkBadge.addEventListener('click', e => {
+    // Большая явная кнопка «Перейти →» снизу ноды (юзер: «когда есть ссылка
+    // на сцену нужна явная кнопка прям снизу ноды, чуть выше нижней границы»).
+    // Видна только когда linkedBoard.name есть — refreshNodeLinkBadge ниже.
+    // Маленького 🔗-badge в углу нет — юзер: «иконку ссылки сверху-справа
+    // нужно убрать», кнопка снизу — достаточно явный индикатор.
+    const linkGo = document.createElement('button');
+    linkGo.className = 'link-go-btn';
+    linkGo.type = 'button';
+    el.appendChild(linkGo);
+    linkGo.addEventListener('click', e => {
         e.stopPropagation();
         if (node.linkedBoard?.name) goToLinkedBoard(node);
     });
+    linkGo.addEventListener('mousedown', e => e.stopPropagation());
     refreshNodeLinkBadge(el, node);
     el.addEventListener('dblclick', e => {
         if (e.target.closest('textarea, input, video, button, .delete, .anchor, .resize-handle, [contenteditable]'))
@@ -3883,6 +3959,11 @@ async function createNodeEl(node) {
         e.stopPropagation();
         showNodeContextMenu(node, e.clientX, e.clientY);
     });
+    // Sidecar-описание для image/video — отдельный элемент на canvas'е
+    // (ensureNodeDescriptionEl идемпотентно создаёт/обновляет/удаляет).
+    // Вызывается ЗДЕСЬ, чтобы покрыть все вызовы createNodeEl: renderCanvas
+    // / generate.js (новые ноды) / timeline.js / drawings.js / chat.js.
+    if (typeof ensureNodeDescriptionEl === 'function') ensureNodeDescriptionEl(node);
     return el;
 }
 // =================== Контекстное меню ноды (ПКМ) ===================
@@ -4027,6 +4108,28 @@ function showNodeContextMenu(node, clientX, clientY) {
     if (node.type === 'image' || node.type === 'video' || node.type === 'audio') {
         add('➕ В таймлайн', () => addToTimeline(node));
     }
+    // Описание ноды: текст-аннотация привязанная к медиа (вместо отдельной
+    // text-ноды). Юзер: «чтобы вместо текстовой ноды можно было использовать
+    // описание, приложенное к картинке». Inline-textarea под медиа уже есть
+    // (см. renderNodeBody), это удобный picker для крупного редактирования.
+    if (node.type === 'image' || node.type === 'video') {
+        const hasDesc = !!(node.description && node.description.trim());
+        add(hasDesc ? '📝 Изменить описание…' : '📝 Добавить описание…', async () => {
+            const next = await askName(
+                'Описание ноды (Cmd+Enter — сохранить):',
+                'Например: лес ночью, луна за облаками, тишина',
+                node.description || '',
+                { multiline: true, okText: 'Сохранить' },
+            );
+            if (next == null) return;
+            node.description = next;
+            scheduleSave();
+            // Sidecar-описание — отдельный элемент на canvas'е, см.
+            // ensureNodeDescriptionEl в settings.js. Идемпотентно: пересоздаёт/
+            // удаляет/обновляет в зависимости от того, есть ли текст.
+            if (typeof ensureNodeDescriptionEl === 'function') ensureNodeDescriptionEl(node);
+        });
+    }
     // Image-нода как обложка проекта — копируется в `<project>/.cover.<ext>`,
     // оттуда подхватывается generateProjectThumb (для recents и шаблонов).
     if (node.type === 'image' && node.file && state.filmHandle) {

package/renderer/cloudProjects.js

@@ -367,6 +367,12 @@
               await _downloadAllTexts(projectId, bgBoards).catch(() => {});
               // Перечитываем тексты ТЕКУЩЕЙ доски (другие — при switchBoard).
               await _refreshCurrentBoardTexts().catch(() => {});
+              // Проверяем — изменился ли проект на сервере с момента нашего
+              // последнего sync'а. Юзер: «когда заходим в облачный проект —
+              // в фоне проверяем есть ли изменения на сервере; если есть —
+              // показываем модалку Проект изменён на сервере. Загрузить?».
+              // Сравниваем server.updatedAt vs local meta.syncedAt.
+              await _maybeOfferReloadFromServer(projectId, p, meta).catch(() => {});
             }).catch(() => {});
             return;
           }
@@ -526,6 +532,44 @@
     await Promise.all(Array.from({ length: CONCURRENCY }, worker));
   }
 
+  // Проверка: проект изменился на сервере с момента нашего последнего sync'а?
+  // Если да — показываем модалку «Загрузить свежую версию?».
+  //   • Только Electron (window.cloudFs) — в вебе локальной копии нет,
+  //     все данные всегда свежие с сервера, проверка бессмысленна.
+  //   • Только edit-режим (canModify=true) — в template/view-only юзер
+  //     просматривает чужой проект, его не должно дёргать предложение
+  //     «загрузить свежую версию» (нечего перезаписывать локально).
+  async function _maybeOfferReloadFromServer(projectId, serverProj, localMeta) {
+    // ВРЕМЕННО ОТКЛЮЧЕНО. Юзер: «отключи проверку 'что что-то изменено',
+    // а то она сейчас неправильно работает в электроне». Причины ложных
+    // срабатываний (предположительно): localMeta.syncedAt не обновляется
+    // надёжно после save'а из Electron'а → server.updatedAt всегда выглядит
+    // «новее», и юзера дёргает модалка после каждого открытия проекта.
+    // Нужно сначала разобраться с syncedAt-bookkeeping, потом включать.
+    return;
+    // eslint-disable-next-line no-unreachable
+    if (!window.cloudFs) return;                 // только Electron
+    if (!serverProj?.canModify) return;          // только edit-mode (не template)
+    if (!state.cloudProjectId || state.cloudProjectId !== projectId) return;
+    const serverUpdatedAt = +serverProj?.updatedAt || 0;
+    const localSyncedAt   = +localMeta?.syncedAt   || 0;
+    // 5-секундный grace — на случай небольшого drift'а часов между нашим
+    // save'ом и server-side updatedAt (записывается БД при апдейте).
+    if (serverUpdatedAt <= localSyncedAt + 5000) return;
+    // Уже спрашивали для этого ts — не докучаем повторно.
+    if (state._cloudReloadAskedAt === serverUpdatedAt) return;
+    state._cloudReloadAskedAt = serverUpdatedAt;
+    const dirtyWarn = state.cloudDirty
+      ? '\n\n⚠ У вас есть локальные несохранённые изменения — они потеряются.'
+      : '';
+    const ok = confirm(
+      `Проект изменён на сервере (после вашего последнего открытия).\n` +
+      `Загрузить свежую версию?${dirtyWarn}`
+    );
+    if (!ok) return;
+    await openCloudProject(projectId, serverProj?.name, { forceRefresh: true });
+  }
+
   // Перечитать .md-контент text-нод текущей доски из FS и обновить DOM.
   // Используется после фонового _downloadAllTexts — если тексты пришли
   // ПОСЛЕ openFilm, ноды показывают пустые textarea, пока этот хук не
@@ -955,6 +999,27 @@
       }
 
       // 3) Update server record.
+      // Лог для диагностики (юзер: «откуда там 8 файлов? на экране 4»):
+      // считает разрыв между тем что на доске визуально и что отправляется.
+      const _binFilesCount = Object.keys(allFilesIndex).length;
+      const _textsByBoard = manifestBoards.map(b => ({
+        board: `${b.kind}/${b.name}`,
+        files: Object.keys(b.files || {}),
+        texts: Object.keys(b.texts || {}),
+        nodes: (b.scene?.nodes || []).length,
+        nodeTypes: (b.scene?.nodes || []).reduce((acc, n) => {
+          acc[n.type] = (acc[n.type] || 0) + 1; return acc;
+        }, {}),
+      }));
+      console.log('[cloudProjects] save → chatium:', {
+        projectId,
+        binFilesTotal: _binFilesCount,
+        textsTotal: manifestBoards.reduce((s, b) => s + Object.keys(b.texts || {}).length, 0),
+        uploadedCount: uploaded,
+        reusedCount: reused,
+        boards: _textsByBoard,
+        allFilesKeys: Object.keys(allFilesIndex),
+      });
       PROGRESS.update(uploaded, total, 'Сохранение на сервере…');
       const updateR = await fetch('/api/projects/' + encodeURIComponent(projectId), {
         method: 'POST',

package/renderer/drawings.js

@@ -130,7 +130,10 @@
     svg.setAttribute('width', '6000');
     svg.setAttribute('height', '4000');
     svg.setAttribute('class', 'drawing-preview');
-    svg.style.cssText = 'position:absolute;left:0;top:0;pointer-events:none;z-index:1000;';
+    // overflow:visible — иначе SVG клипит preview-path в отрицательной зоне
+    // (когда юзер рисует в canvas-frame-padding). _canvasCoord возвращает
+    // отрицательные x/y; без overflow:visible эти точки не отрисуются.
+    svg.style.cssText = 'position:absolute;left:0;top:0;pointer-events:none;z-index:1000;overflow:visible;';
     c.appendChild(svg);
     return svg;
   }
@@ -249,8 +252,17 @@
   window.boardDrawings = { setTool, renderInto, smoothPath, arrowHead, toolStyle };
 
   document.addEventListener('DOMContentLoaded', () => {
-    const canvas = document.getElementById('canvas');
-    if (canvas) canvas.addEventListener('mousedown', _onMouseDown, true);
+    // Слушаем mousedown НА canvas-frame, а не на .canvas. canvas-frame
+    // имеет padding (padX/padY) вокруг .canvas — это «отрицательная зона»
+    // (canvas-coord < 0 или > 6000), которую юзер видит и в которой хочет
+    // рисовать. mousedown на .canvas не срабатывает за пределами 6000×4000,
+    // даже если внутри padding. Юзер: «рисовать в отрицательной области
+    // тоже не получается». _canvasCoord возвращает координаты от .canvas-
+    // bounding-rect — значения становятся отрицательными для кликов слева/
+    // сверху от canvas. minX/minY в bbox-расчёте это переживают (нода с
+    // x<0 валидна, см. drag-handler без Math.max(0,...) клампа).
+    const frame = document.getElementById('canvasFrame');
+    if (frame) frame.addEventListener('mousedown', _onMouseDown, true);
     document.addEventListener('keydown', _onKeyDown);
     document.querySelectorAll('[data-draw-tool]').forEach(b => {
       b.addEventListener('click', () => setTool(b.dataset.drawTool));