kingkont 0.15.1 → 0.16.1

package/lib/chatSession.js

@@ -32,6 +32,19 @@ const fs = require('node:fs');
 const fsp = require('node:fs/promises');
 const path = require('node:path');
 const crypto = require('node:crypto');
+const wsHub = require('./wsHub');
+
+function _wsChannel(key) { return 'chat:' + key; }
+function _publishChange(session) {
+  // Push minimal event — клиент сам fetch'нет /api/chat/state.
+  wsHub.publish(_wsChannel(session.key), {
+    kind: 'state-changed',
+    busy: session.busy,
+    pendingCount: session.pendingToolCalls?.length || 0,
+    historyLen: session.history.length,
+    updatedAt: session.updatedAt,
+  });
+}
 
 const MAX_TOOL_ITERATIONS = 12;
 const PERSIST_DEBOUNCE_MS = 800;
@@ -119,6 +132,9 @@ async function getSession(key, { create = true } = {}) {
 function schedulePersist(session) {
   clearTimeout(session._persistTimer);
   session._persistTimer = setTimeout(() => _persist(session), PERSIST_DEBOUNCE_MS);
+  // Также сразу пушим WS-event — клиент видит изменение мгновенно
+  // (без ожидания дебаунса persist).
+  _publishChange(session);
 }
 
 // ============== TOOL-CALL PARSER ==============
@@ -234,6 +250,7 @@ function _waitForToolResults(session, toolCalls) {
   return new Promise(resolve => {
     session.pendingToolCalls = toolCalls;
     session.pendingResolve = resolve;
+    _publishChange(session);   // мгновенно сообщаем клиенту что появились pending tools
   });
 }
 

package/lib/jobsHub.js

@@ -0,0 +1,57 @@
+// lib/jobsHub.js — Server-side тракинг фоновых задач (генерации,
+// chat-loops). Клиент сообщает старт/конец через POST /api/jobs/track,
+// сервер хранит in-memory + push'ит WebSocket-событие 'jobs:changed'
+// чтобы welcome-индикаторы обновлялись live и без поллинга.
+//
+// Структура:
+//   jobsByProject = Map<projectKey, Map<jobId, {kind, name, startedAt, ...}>>
+//
+// Channel для подписки: 'jobs:<projectKey>' — push при изменениях этого
+// проекта. Также 'jobs:all' — глобальный поток для welcome-экрана.
+
+'use strict';
+
+const wsHub = require('./wsHub');
+
+const jobsByProject = new Map();   // projectKey → Map<jobId, jobInfo>
+
+function _emit(projectKey) {
+  const list = listForProject(projectKey);
+  wsHub.publish('jobs:' + projectKey, { kind: 'changed', list });
+  wsHub.publish('jobs:all', { kind: 'changed', projectKey, list });
+}
+
+function start({ projectKey, jobId, kind, name, type }) {
+  if (!projectKey || !jobId) return;
+  let m = jobsByProject.get(projectKey);
+  if (!m) { m = new Map(); jobsByProject.set(projectKey, m); }
+  m.set(jobId, { kind: kind || null, name: name || null, type: type || null, startedAt: Date.now() });
+  _emit(projectKey);
+}
+
+function end({ projectKey, jobId }) {
+  if (!projectKey || !jobId) return null;
+  const m = jobsByProject.get(projectKey);
+  if (!m) return null;
+  const job = m.get(jobId);
+  m.delete(jobId);
+  if (!m.size) jobsByProject.delete(projectKey);
+  _emit(projectKey);
+  return job || null;
+}
+
+function listForProject(projectKey) {
+  const m = jobsByProject.get(projectKey);
+  if (!m) return [];
+  return Array.from(m.entries()).map(([jobId, info]) => ({ jobId, ...info }));
+}
+
+function listAll() {
+  const out = {};
+  for (const [k, m] of jobsByProject.entries()) {
+    out[k] = Array.from(m.entries()).map(([jobId, info]) => ({ jobId, ...info }));
+  }
+  return out;
+}
+
+module.exports = { start, end, listForProject, listAll };

package/lib/providers.js

@@ -602,16 +602,34 @@ async function generateMusic(args) {
   const { prompt, durationMs, settings: s } = args;
   if (!prompt) throw new Error('нужен prompt');
 
-  // Приоритет direct ElevenLabs если включён + есть ключ — у юзера могут
-  // быть кастомные саб-настройки и платный ElevenLabs (зачем тратить
-  // Chatium-кредиты). Аналогичная логика в generateTts/generateSfx.
+  // Приоритет direct ElevenLabs если включён + есть ключ.
   const directElevenAvailable = s.useElevenlabs && process.env.ELEVENLABS_API_KEY;
 
+  // Пробуем Chatium первым ТОЛЬКО если direct ElevenLabs не доступен.
+  // Если Chatium упал на музыке — auto-fallback на direct ElevenLabs если он
+  // тоже включён (бывало: Chatium-side music broken, у юзера только Eleven
+  // через Chatium → 500 → надо retry direct).
   if (s.useChatium && s.chatium?.token && s.chatium?.base && !directElevenAvailable) {
-    return await audioViaChatium(s, { kind: 'music', prompt, durationMs });
+    try {
+      return await audioViaChatium(s, { kind: 'music', prompt, durationMs });
+    } catch (e) {
+      // Если есть direct Eleven (даже без env-key, попробуем s.elevenKey) —
+      // используем его как fallback.
+      if (s.useElevenlabs && (process.env.ELEVENLABS_API_KEY || s.elevenKey)) {
+        console.warn('[music] Chatium failed, falling back to direct ElevenLabs:', e?.message);
+        // Промосим в env если задан в settings но не в env (race с
+        // applySettingsToEnv после старта сервера).
+        if (!process.env.ELEVENLABS_API_KEY && s.elevenKey) {
+          process.env.ELEVENLABS_API_KEY = s.elevenKey;
+        }
+        // Падаем в direct-eleven path ниже.
+      } else {
+        throw new Error(`Музыка через KingKont недоступна: ${e.message?.slice(0, 200)}. Включи прямой ElevenLabs ключ в Настройках.`);
+      }
+    }
   }
   if (!s.useElevenlabs) throw new Error('Войдите в KingKont или ElevenLabs для аудио.');
-  const key = process.env.ELEVENLABS_API_KEY;
+  const key = process.env.ELEVENLABS_API_KEY || s.elevenKey;
   if (!key) throw new Error('ELEVENLABS_API_KEY не задан');
   const body = { prompt };
   if (durationMs) body.music_length_ms = +durationMs;

package/lib/wsHub.js

@@ -0,0 +1,69 @@
+// lib/wsHub.js — WebSocket hub для push-уведомлений клиентам.
+//
+// Клиент подключается к ws://localhost:<PORT>/ws и подписывается на
+// "channels" (sessionKey, "jobs:*", и т.п.). Сервер push'ит JSON-events
+// при изменениях — клиент слышит ОБРАТЯ ОБРАТНОЙ СВЯЗИ:
+// чат-loop progressing, генерация завершилась, и т.п. — без поллинга.
+//
+// При фейле WebSocket'a клиент сам падает на polling (см. chat.js).
+//
+// Sub-ы хранятся в Map<channel, Set<ws>>. ws хранит свой Set каналов
+// чтобы при close очистить все подписки.
+//
+// Сообщения от клиента → сервер:
+//   {type: 'subscribe',   channel: 'chat:cloud:abc'}
+//   {type: 'unsubscribe', channel: 'chat:cloud:abc'}
+//   {type: 'ping'}     — heartbeat (server отвечает {type:'pong'})
+//
+// Сообщения от сервера → клиенту:
+//   {type: 'event', channel: 'chat:cloud:abc', event: {kind:'state-changed', ...}}
+
+'use strict';
+
+const { WebSocketServer } = require('ws');
+
+const channels = new Map();    // channel → Set<ws>
+
+function attach(httpServer) {
+  const wss = new WebSocketServer({ server: httpServer, path: '/ws' });
+  wss.on('connection', (ws) => {
+    ws._subs = new Set();
+    ws.on('message', (raw) => {
+      let m;
+      try { m = JSON.parse(raw.toString()); } catch { return; }
+      if (m?.type === 'subscribe' && typeof m.channel === 'string') {
+        ws._subs.add(m.channel);
+        if (!channels.has(m.channel)) channels.set(m.channel, new Set());
+        channels.get(m.channel).add(ws);
+      } else if (m?.type === 'unsubscribe' && typeof m.channel === 'string') {
+        ws._subs.delete(m.channel);
+        channels.get(m.channel)?.delete(ws);
+      } else if (m?.type === 'ping') {
+        try { ws.send(JSON.stringify({ type: 'pong' })); } catch {}
+      }
+    });
+    ws.on('close', () => {
+      for (const ch of ws._subs) channels.get(ch)?.delete(ws);
+      ws._subs.clear();
+    });
+    ws.on('error', () => { /* swallow */ });
+  });
+  console.log('▶  WS attached at /ws');
+  return wss;
+}
+
+// Push event на канал. Если нет подписчиков — no-op (event теряется
+// до подключения; для критичных вещей клиент сам ре-фетчит state на
+// connect через GET).
+function publish(channel, event) {
+  const subs = channels.get(channel);
+  if (!subs || !subs.size) return;
+  const json = JSON.stringify({ type: 'event', channel, event });
+  for (const ws of subs) {
+    if (ws.readyState === ws.OPEN) {
+      try { ws.send(json); } catch { /* dead connection */ }
+    }
+  }
+}
+
+module.exports = { attach, publish };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.15.1",
+  "version": "0.16.1",
   "description": "KingKont · Chatium — нод-редактор сцен с AI-генерацией (картинки/видео/голос/SFX/музыка/текст)",
   "main": "main.js",
   "bin": {
@@ -44,7 +44,8 @@
     "postinstall": "node scripts/patch-electron-name.js"
   },
   "dependencies": {
-    "electron": "^38.8.6"
+    "electron": "^38.8.6",
+    "ws": "^8.20.0"
   },
   "devDependencies": {
     "electron-builder": "^25.1.8"

package/renderer/board.js

@@ -609,6 +609,31 @@ window.addEventListener('bgjobs:changed', () => {
   if (!state.filmHandle) renderWelcomeRecents().catch(() => {});
 });
 
+// WebSocket подписка на jobs:all — server push'ит при изменениях ЛЮБЫХ
+// jobs (других вкладок, других клиентов). Если открыт welcome —
+// перерисовываем чтобы видеть актуальные «⏳ N» badges.
+let _welcomeWS = null;
+function _connectWelcomeJobsWS() {
+  if (_welcomeWS && _welcomeWS.readyState === WebSocket.OPEN) return;
+  try {
+    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+    _welcomeWS = new WebSocket(`${proto}://${location.host}/ws`);
+  } catch { _welcomeWS = null; return; }
+  _welcomeWS.onopen = () => {
+    try { _welcomeWS.send(JSON.stringify({ type: 'subscribe', channel: 'jobs:all' })); } catch {}
+  };
+  _welcomeWS.onmessage = (e) => {
+    let m; try { m = JSON.parse(e.data); } catch { return; }
+    if (m?.type === 'event' && m.channel === 'jobs:all') {
+      if (!state.filmHandle) renderWelcomeRecents().catch(() => {});
+    }
+  };
+  _welcomeWS.onclose = () => { _welcomeWS = null; setTimeout(_connectWelcomeJobsWS, 5000); };
+  _welcomeWS.onerror = () => {};
+}
+// Запуск при первом welcome render'е.
+setTimeout(_connectWelcomeJobsWS, 500);
+
 // Карточка локального (папочного) проекта — извлечена из renderWelcomeRecents.
 // Удаление и save-as-template — через ПКМ (по аналогии с cloud-карточкой).
 function makeRecentWelcomeCard(r) {

package/renderer/chat.js

@@ -636,7 +636,9 @@
       if (r.ok) {
         const snap = await r.json();
         applyServerState(snap);
-        if (snap.busy) startPolling(key);
+        // Стартуем транспорт ВСЕГДА — даже если не busy сейчас, юзер
+        // может отправить сообщение, и WS-events будут приходить мгновенно.
+        startTransport(key);
         return;
       }
     } catch (e) { console.warn('[chat] load from server failed:', e?.message); }
@@ -845,6 +847,27 @@
   // при send(). Файлы сохраняются в <currentBoard>/inbox/<name>.
   let manualAttachments = [];   // [{relPath, name, size, mime}] — файлы из drag-drop
 
+  // Короткая строка-итог контекста для отображения в чате рядом с user-msg.
+  // null если нечего показать.
+  function _ctxToInlineLabel(ctx) {
+    const parts = [];
+    if (ctx.scene) parts.push(`🎬 ${ctx.scene.name}`);
+    const byType = {};
+    for (const sel of ctx.selected) (byType[sel.type] = byType[sel.type] || []).push(sel);
+    for (const [type, items] of Object.entries(byType)) {
+      const icon = type === 'image' ? '🖼' : type === 'video' ? '🎬' : type === 'audio' ? '🎙' : type === 'text' ? '📝' : '◉';
+      if (items.length === 1) parts.push(`${icon} ${items[0].name || items[0].id?.slice(0,6)}`);
+      else {
+        const noun = (typeof _typeForms !== 'undefined' && _typeForms[type]) || ['нода','ноды','нод'];
+        parts.push(`${icon} ${items.length} ${_ru_plural(items.length, noun)}`);
+      }
+    }
+    if (ctx.attachments?.length) {
+      parts.push(`📎 ${ctx.attachments.length} файл${ctx.attachments.length > 1 ? 'а' : ''}`);
+    }
+    return parts.length ? parts.join(' · ') : null;
+  }
+
   function buildContextSnapshot() {
     const ctx = { scene: null, selected: [], attachments: manualAttachments.slice() };
     if (state.currentBoard) {
@@ -1109,60 +1132,119 @@
     return null;
   }
 
-  // Длинный pollin цикл. Стартует после send(). Опрашивает GET /api/chat/state
-  // каждые 800ms, пока сервер busy=true. Если сервер вернул pendingToolCalls
-  // — исполняет их локально (тут есть FSAH-доступ) и шлёт results через
-  // POST /api/chat/tool-results, после чего сервер продолжает loop.
+  // === Транспорт чата с сервером ===
+  // Приоритет: WebSocket (push с сервера, мгновенно). Fallback: polling
+  // (каждые 800ms) когда WS отвалился или вообще не доступен. polling
+  // используется и как полноценный транспорт — он корректно работает.
+  //
+  // На каждый «появилось изменение» (WS event ИЛИ poll-tick) — просто
+  // перетягиваем GET /api/chat/state и применяем (см. _refreshAndExecute).
   let pollTimer = null;
   let pollKey = null;
+  let ws = null;
+  let wsKey = null;
+  let wsConnectedAt = 0;
+  let wsReconnectTimer = null;
+
+  async function _refreshAndExecute(key) {
+    if (sessionKey() !== key) return false;
+    let snap;
+    try {
+      const r = await fetch('/api/chat/state?key=' + encodeURIComponent(key));
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      snap = await r.json();
+    } catch (e) {
+      console.warn('[chat] state fetch failed:', e?.message);
+      return false;
+    }
+    applyServerState(snap);
+    // Pending tools? — исполняем локально и шлём results.
+    if (snap.pendingToolCalls && snap.pendingToolCalls.length) {
+      const results = [];
+      for (const tc of snap.pendingToolCalls) {
+        if (tc._parseError) {
+          results.push({ id: tc.id, name: 'parse_error', ok: false, error: tc._parseError });
+          continue;
+        }
+        try {
+          const r2 = await runTool(tc.name, tc.args);
+          results.push({ id: tc.id, name: tc.name, ok: true, result: r2 });
+        } catch (e) {
+          results.push({ id: tc.id, name: tc.name, ok: false, error: e?.message || String(e) });
+        }
+      }
+      try {
+        await fetch('/api/chat/tool-results', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key, results }),
+        });
+      } catch {}
+    }
+    if (!snap.busy && snap.lastError) appendStatus('⚠ ' + snap.lastError, true);
+    return snap.busy;
+  }
+
+  // ===== WebSocket =====
+  function ensureWS(key) {
+    if (ws && wsKey === key && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+    closeWS();
+    wsKey = key;
+    try {
+      const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+      ws = new WebSocket(`${proto}://${location.host}/ws`);
+    } catch (e) {
+      console.warn('[chat] WS connect failed:', e?.message);
+      ws = null;
+      // Fallback на polling.
+      startPolling(key);
+      return;
+    }
+    ws.onopen = () => {
+      wsConnectedAt = Date.now();
+      try { ws.send(JSON.stringify({ type: 'subscribe', channel: 'chat:' + key })); } catch {}
+      // Сразу подтягиваем актуальное состояние (могли пропустить events).
+      _refreshAndExecute(key).catch(() => {});
+      stopPolling();   // WS живёт — polling не нужен
+    };
+    ws.onmessage = (e) => {
+      let m;
+      try { m = JSON.parse(e.data); } catch { return; }
+      if (m?.type === 'event' && m.channel === 'chat:' + key) {
+        _refreshAndExecute(key).catch(() => {});
+      }
+    };
+    ws.onerror = () => { /* close handler сделает остальное */ };
+    ws.onclose = () => {
+      ws = null;
+      // Если ws закрылся быстро (<3s от open) — не reconnect'имся бесконечно
+      // в фоне для этой сессии, fallback на polling.
+      if (wsKey === key) {
+        startPolling(key);   // безопасно, если уже polling — startPolling no-op
+        // И через 5s попробуем WS снова.
+        clearTimeout(wsReconnectTimer);
+        wsReconnectTimer = setTimeout(() => ensureWS(key), 5000);
+      }
+    };
+  }
+  function closeWS() {
+    clearTimeout(wsReconnectTimer); wsReconnectTimer = null;
+    if (ws) { try { ws.close(); } catch {} ws = null; }
+    wsKey = null;
+  }
+
+  // ===== Polling (fallback) =====
   async function startPolling(key) {
     if (pollKey === key && pollTimer) return;
     stopPolling();
     pollKey = key;
     const tick = async () => {
       if (pollKey !== key) return;
-      try {
-        const r = await fetch('/api/chat/state?key=' + encodeURIComponent(key));
-        if (!r.ok) throw new Error('HTTP ' + r.status);
-        const snap = await r.json();
-        // Применяем снимок только если сессия всё ещё активна на клиенте.
-        if (sessionKey() === key) applyServerState(snap);
-        // Если есть pending-tools — исполняем и шлём results (продолжаем
-        // poll сразу, не ждём next tick).
-        if (snap.pendingToolCalls && snap.pendingToolCalls.length) {
-          const results = [];
-          for (const tc of snap.pendingToolCalls) {
-            if (tc._parseError) {
-              results.push({ id: tc.id, name: 'parse_error', ok: false, error: tc._parseError });
-              continue;
-            }
-            try {
-              const r2 = await runTool(tc.name, tc.args);
-              results.push({ id: tc.id, name: tc.name, ok: true, result: r2 });
-            } catch (e) {
-              results.push({ id: tc.id, name: tc.name, ok: false, error: e?.message || String(e) });
-            }
-          }
-          await fetch('/api/chat/tool-results', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ key, results }),
-          }).catch(() => {});
-          // Сразу продолжаем polling без задержки (loop уже резюмирован сервером).
-          if (pollKey === key) pollTimer = setTimeout(tick, 50);
-          return;
-        }
-        if (snap.busy) {
-          if (pollKey === key) pollTimer = setTimeout(tick, 800);
-        } else {
-          // Loop завершён — последняя статус-строка может быть info'й.
-          if (snap.lastError) appendStatus('⚠ ' + snap.lastError, true);
-          stopPolling();
-        }
-      } catch (e) {
-        console.warn('[chat] poll failed:', e?.message);
-        if (pollKey === key) pollTimer = setTimeout(tick, 2000);   // backoff
-      }
+      const stillBusy = await _refreshAndExecute(key);
+      if (!stillBusy) { stopPolling(); return; }
+      if (pollKey === key) pollTimer = setTimeout(tick, 800);
     };
     tick();
   }
@@ -1172,6 +1254,12 @@
     pollKey = null;
   }
 
+  // Главная entry-point: попытаться WS, если не получится — polling.
+  function startTransport(key) {
+    if (typeof WebSocket !== 'undefined') ensureWS(key);
+    else startPolling(key);
+  }
+
   // Сервер прислал snapshot — применяем history к UI.
   function applyServerState(snap) {
     if (!snap) return;
@@ -1201,14 +1289,26 @@
     // Snapshot НЕ берём автоматически — теперь это явный tool take_snapshot,
     // который Claude вызывает перед destructive-действиями. См. system-prompt.
     // Контекст + system-prompt: формируем тут (на клиенте) и отдаём серверу.
+    // Также сохраняем context-snapshot в user-msg чтобы юзер видел в чате
+    // на каком контексте он спрашивал (через много turns'ов это полезно).
     const ctxSnap = buildContextSnapshot();
     const system = buildSystemPrompt() + '\n\n' + buildContextBlock(ctxSnap);
+    // Inline context summary в visible тексте сообщения для UI render'a.
+    // Claude получает полный context через system, юзер — через ctxLabel
+    // в самом message (см. renderHistoryFiltered).
+    const ctxLabel = _ctxToInlineLabel(ctxSnap);
+    // Если есть контекст — добавляем его как первой строкой в сообщение
+    // (с маркером [ctx:...]). Это вид'но и юзеру (renderer стилизует),
+    // и Claude (повторяет инструкцию из system-prompt в самом turn'е).
+    const textWithCtx = ctxLabel
+      ? `[ctx: ${ctxLabel}]\n${userText}`
+      : userText;
     appendStatus('KingKont думает…');
     try {
       const r = await fetch('/api/chat/send', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ key, text: userText, system }),
+        body: JSON.stringify({ key, text: textWithCtx, system }),
       });
       if (!r.ok) {
         const err = await r.json().catch(() => ({}));
@@ -1216,7 +1316,7 @@
       }
       const snap = await r.json();
       applyServerState(snap);
-      startPolling(key);
+      startTransport(key);
     } catch (e) {
       appendStatus('⚠ ' + (e?.message || e), true);
     }
@@ -1268,10 +1368,24 @@
       }
       div.appendChild(lbl);
       if (hasContent) {
-        const body = document.createElement('div');
-        body.className = 'chat-msg-body';
-        body.textContent = m.content;
-        div.appendChild(body);
+        // Парсим [ctx: ...] префикс если есть — рендерим как маленький
+        // сабтайтл над основным текстом.
+        let mainText = m.content;
+        let ctxLine = null;
+        const cm = m.content.match(/^\[ctx:\s*([^\]\n]+)\]\n?([\s\S]*)$/);
+        if (cm) { ctxLine = cm[1].trim(); mainText = cm[2].trim(); }
+        if (ctxLine) {
+          const cx = document.createElement('div');
+          cx.className = 'chat-msg-ctx';
+          cx.textContent = ctxLine;
+          div.appendChild(cx);
+        }
+        if (mainText) {
+          const body = document.createElement('div');
+          body.className = 'chat-msg-body';
+          body.textContent = mainText;
+          div.appendChild(body);
+        }
       }
       if (hasTools) {
         // Все tools в ОДНУ строку (separated " · "), без emoji-icons —

package/renderer/state.js

@@ -92,19 +92,29 @@ function bgJobStart(info) {
     localStorage.setItem(bgJobsKey(pk), JSON.stringify(list));
     window.dispatchEvent(new CustomEvent('bgjobs:changed'));
   } catch {}
+  // Также шлём на сервер — чтобы welcome (любой клиент) видел через WS push.
+  fetch('/api/jobs/track', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ action: 'start', projectKey: pk, jobId: info.nodeId, kind: info.kind, name: info.name }),
+  }).catch(() => {});
 }
 function bgJobEnd(nodeId, projectKey) {
   const pk = projectKey || _projectKeyForCurrent();
   if (!pk) return null;
+  let job = null;
   try {
     const list = JSON.parse(localStorage.getItem(bgJobsKey(pk)) || '[]');
-    const job = list.find(j => j.nodeId === nodeId);
+    job = list.find(j => j.nodeId === nodeId) || null;
     const filtered = list.filter(j => j.nodeId !== nodeId);
     if (filtered.length) localStorage.setItem(bgJobsKey(pk), JSON.stringify(filtered));
     else localStorage.removeItem(bgJobsKey(pk));
     window.dispatchEvent(new CustomEvent('bgjobs:changed'));
-    return job;
-  } catch { return null; }
+  } catch {}
+  fetch('/api/jobs/track', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ action: 'end', projectKey: pk, jobId: nodeId }),
+  }).catch(() => {});
+  return job;
 }
 function bgJobsAll() {
   const result = {};

package/renderer/styles.css

@@ -365,20 +365,35 @@
   .chat-msg-body {
     color: #e0e0e0; white-space: pre-wrap; word-break: break-word;
   }
+  /* [ctx: ...] префикс — маленький subtitle над user-msg, светло-серый. */
+  .chat-msg-ctx {
+    font-size: 10.5px; color: #889;
+    background: rgba(255,255,255,0.04); padding: 2px 6px;
+    border-radius: 4px; margin-bottom: 3px;
+    align-self: flex-start; max-width: 100%;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
   .chat-tool {
     margin-top: 2px; background: transparent; border: none;
     padding: 0; font-size: 10.5px; color: #666;
+    /* Гарантия что tool-блок занимает ровно одну строку (плюс развёрнутый pre)
+       — иначе при множестве tools или длинных args блок разрастался. */
+    max-width: 100%; min-width: 0;
   }
   .chat-tool summary {
-    cursor: pointer; color: #666; outline: none; opacity: 0.75;
+    cursor: pointer; color: #666; outline: none; opacity: 0.7;
     font-family: ui-monospace, 'SF Mono', monospace;
     list-style: none; padding: 1px 4px;
     transition: color 0.1s, opacity 0.1s;
+    /* Один в строку, длинное → ellipsis. Click раскрывает <details>. */
+    display: block; white-space: nowrap; overflow: hidden;
+    text-overflow: ellipsis; max-width: 100%;
   }
   .chat-tool summary::-webkit-details-marker { display: none; }
   .chat-tool summary::before {
     content: '▸ '; color: #555; font-size: 9px;
   }
+  .chat-tool[open] summary { white-space: normal; text-overflow: clip; }
   .chat-tool[open] summary::before { content: '▾ '; }
   .chat-tool summary:hover { color: #aaa; opacity: 1; }
   .chat-tool pre {
@@ -478,10 +493,21 @@
   }
   .welcome-card.open-card .welcome-card-ts { color: #aac0d8; }
   .welcome-card:hover { border-color: #4a6a9a; transform: translateY(-2px); }
+  /* Card теперь сама с фиксированным aspect-ratio + overflow:hidden →
+     обложка заполняет всю карту (вертикальная картинка кроп'ится по верху/
+     низу через object-fit:cover, не растягивает карту бесконечно вверх).
+     Meta (название + дата) — absolute поверх обложки внизу с тёмным
+     градиентом, читается на ЛЮБОЙ обложке. */
+  .welcome-card {
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+  }
   .welcome-card-thumb {
-    width: 100%; aspect-ratio: 16 / 9; background: #1a1a1a;
+    position: absolute; inset: 0;
+    background: #1a1a1a;
     display: flex; align-items: center; justify-content: center;
     color: #444; font-size: 32px;
+    overflow: hidden;        /* страховка чтобы img/badge не выезжали */
   }
   .welcome-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
   /* ☁-бейдж в углу обложки облачного проекта. Делает cloud/folder-проекты
@@ -511,9 +537,17 @@
     0%, 100% { opacity: 0.85; }
     50% { opacity: 1; }
   }
-  .welcome-card-meta { padding: 8px 12px; }
-  .welcome-card-name { font-size: 13px; color: #ddd; word-break: break-all; }
-  .welcome-card-ts { font-size: 11px; color: #666; margin-top: 2px; }
+  /* Meta теперь оверлеем поверх обложки внизу с тёмным градиентом —
+     название + дата всегда читаемы независимо от цвета обложки. */
+  .welcome-card-meta {
+    position: absolute; left: 0; right: 0; bottom: 0;
+    padding: 28px 12px 8px 12px;
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.92) 100%);
+    color: #fff;
+    pointer-events: none;     /* клик идёт на card */
+  }
+  .welcome-card-name { font-size: 13px; color: #fff; word-break: break-all; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
+  .welcome-card-ts { font-size: 11px; color: #ccc; margin-top: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
   .welcome-card-del {
     position: absolute; top: 6px; right: 6px;
     background: rgba(0,0,0,0.6); color: #aaa;

package/server.js

@@ -14,6 +14,8 @@ const { extname, join, normalize, resolve } = require('node:path');
 
 const providers = require('./lib/providers');
 const chatSession = require('./lib/chatSession');
+const jobsHub = require('./lib/jobsHub');
+const wsHub = require('./lib/wsHub');
 
 // ---------- .env loader (без зависимостей) ----------
 function loadEnv() {
@@ -345,6 +347,30 @@ async function handleChatClear(req, res) {
   } catch (e) { sendError(res, e, 500); }
 }
 
+// =============================================================================
+// Jobs hub: client сообщает старт/конец фоновой работы (генерация ноды),
+// сервер хранит в памяти и push'ит WS-event 'jobs:<projectKey>' и 'jobs:all'.
+// Welcome-индикаторы и любые viewers подписываются на эти каналы.
+// =============================================================================
+async function handleJobsTrack(req, res) {
+  try {
+    const body = await readJson(req);
+    const { action, projectKey, jobId, kind, name, type } = body || {};
+    if (!projectKey || !jobId) return send(res, 400, { error: 'projectKey + jobId обязательны' });
+    if (action === 'start') jobsHub.start({ projectKey, jobId, kind, name, type });
+    else if (action === 'end') jobsHub.end({ projectKey, jobId });
+    else return send(res, 400, { error: 'action: start|end' });
+    send(res, 200, { ok: true });
+  } catch (e) { sendError(res, e, 500); }
+}
+async function handleJobsList(res, url) {
+  try {
+    const projectKey = url.searchParams.get('projectKey');
+    if (projectKey) send(res, 200, { jobs: jobsHub.listForProject(projectKey) });
+    else send(res, 200, { all: jobsHub.listAll() });
+  } catch (e) { sendError(res, e, 500); }
+}
+
 // =============================================================================
 // Static files (renderer assets).
 // =============================================================================
@@ -399,6 +425,9 @@ const server = createServer(async (req, res) => {
     if (req.method === 'GET'  && url.pathname === '/api/chat/state')        return handleChatState(res, url);
     if (req.method === 'POST' && url.pathname === '/api/chat/tool-results') return handleChatToolResults(req, res);
     if (req.method === 'POST' && url.pathname === '/api/chat/clear')        return handleChatClear(req, res);
+    // Jobs hub.
+    if (req.method === 'POST' && url.pathname === '/api/jobs/track')        return handleJobsTrack(req, res);
+    if (req.method === 'GET'  && url.pathname === '/api/jobs')              return handleJobsList(res, url);
     // Cloud-projects routes — зеркало templates, но для редактируемых проектов.
     if (req.method === 'GET'  && url.pathname === '/api/projects')     return handleProjectsList(res);
     if (req.method === 'POST' && url.pathname === '/api/projects')     return handleProjectCreate(req, res);
@@ -430,6 +459,8 @@ function start(port = PORT, opts = {}) {
     server.once('error', reject);
     server.listen(port, () => {
       const addr = server.address();
+      // Attach WebSocket hub поверх того же HTTP-сервера (path /ws).
+      try { wsHub.attach(server); } catch (e) { console.warn('WS attach failed:', e.message); }
       console.log(`▶  http://localhost:${addr.port}`);
       console.log(`   KIE_API_KEY:        ${process.env.KIE_API_KEY ? '✓' : '✗ missing'}`);
       console.log(`   ELEVENLABS_API_KEY: ${process.env.ELEVENLABS_API_KEY ? '✓' : '✗ missing'}`);