kingkont 0.16.0 → 0.16.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "KingKont · Chatium — нод-редактор сцен с AI-генерацией (картинки/видео/голос/SFX/музыка/текст)",
   "main": "main.js",
   "bin": {

package/renderer/board.js

@@ -101,14 +101,17 @@ window.addEventListener('DOMContentLoaded', async () => {
   setInterval(() => { refreshBalance().catch(() => {}); }, 60_000);
 
   // Тихий autoload: первый recent с granted-permission (если есть).
-  // НО — если юзер только что вышел из проекта (closeProject поставил
-  // флаг welcomeOnNextStart), пропускаем autoload и показываем welcome.
-  // Это нужно чтобы Cmd+R после явного выхода не реоткрывал проект.
-  // (При обычном перезапуске после crash'а флага нет → автоload работает.)
-  const skipAutoload = localStorage.getItem('welcomeOnNextStart') === '1';
+  // skipAutoload работает по двум флагам:
+  //  - welcomeOnNextStart (одноразовый, ставится в closeProject)
+  //  - lastLocation === 'welcome' (постоянный, ставится при показе welcome)
+  // Без второго: после Cmd+R на welcome flag сбрасывался, и второй Cmd+R
+  // открывал последний проект. Теперь lastLocation сохраняется пока юзер
+  // не открыл проект.
+  const skipAutoload = localStorage.getItem('welcomeOnNextStart') === '1'
+                    || localStorage.getItem('lastLocation') === 'welcome';
   if (skipAutoload) {
     localStorage.removeItem('welcomeOnNextStart');
-    vlog('info', 'restore: skipped (user explicitly closed last project)');
+    vlog('info', 'restore: skipped (welcome state persisted)');
   } else {
     try {
       const recents = await getRecents();
@@ -458,8 +461,21 @@ async function renderWelcomeRecents() {
   if (!grid || !wrap) return;
   grid.innerHTML = '';
   wrap.style.display = '';
+  // Запоминаем что юзер на welcome — Cmd+R должен оставить здесь.
+  try { localStorage.setItem('lastLocation', 'welcome'); } catch {}
   // Identity-pill в правом верхнем — обновляем при каждом показе welcome.
   renderWelcomeIdentity().catch(() => {});
+  // Server-side bg-jobs cache: обновим в фоне (если изменится — снова
+  // re-render через bgjobs:changed event). Без infinite loop: проверяем
+  // что состояние реально поменялось.
+  (async () => {
+    const before = JSON.stringify(_bgServerCache);
+    await refreshBgServerCache();
+    const after = JSON.stringify(_bgServerCache);
+    if (before !== after && !state.filmHandle) {
+      window.dispatchEvent(new CustomEvent('bgjobs:changed'));
+    }
+  })().catch(() => {});
   const list = await getRecents();
 
   // Первой картой — «Открыть проект». Кликается → дёргает скрытый
@@ -603,10 +619,25 @@ function _ru_jobs(n) {
   if (n10 >= 2 && n10 <= 4) return 'генерации';
   return 'генераций';
 }
+// Server-side cache всех bg-jobs. Source of truth — server jobsHub
+// (через GET /api/jobs или WS push). localStorage остаётся только как
+// fallback и для оптимистичных обновлений на самом клиенте.
+let _bgServerCache = {};   // projectKey → [{jobId, kind, name, startedAt}]
+async function refreshBgServerCache() {
+  try {
+    const r = await fetch('/api/jobs');
+    if (!r.ok) return;
+    const d = await r.json();
+    _bgServerCache = d?.all || {};
+  } catch {}
+}
+
 // Live-update welcome когда bg-jobs меняются (start/end). Перерисовываем
 // только если открыт welcome (нет проекта), иначе UI не виден.
 window.addEventListener('bgjobs:changed', () => {
-  if (!state.filmHandle) renderWelcomeRecents().catch(() => {});
+  if (!state.filmHandle) {
+    refreshBgServerCache().then(() => renderWelcomeRecents().catch(() => {}));
+  }
 });
 
 // WebSocket подписка на jobs:all — server push'ит при изменениях ЛЮБЫХ
@@ -625,7 +656,11 @@ function _connectWelcomeJobsWS() {
   _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(() => {});
+      // Refresh cache from server first (m.event.list содержит свежий
+      // список для конкретного projectKey, но проще сделать GET /api/jobs).
+      refreshBgServerCache().then(() => {
+        if (!state.filmHandle) renderWelcomeRecents().catch(() => {});
+      });
     }
   };
   _welcomeWS.onclose = () => { _welcomeWS = null; setTimeout(_connectWelcomeJobsWS, 5000); };
@@ -647,9 +682,8 @@ function makeRecentWelcomeCard(r) {
     img.onload = () => setTimeout(() => URL.revokeObjectURL(img.src), 60_000);
     thumb.appendChild(img);
   } else thumb.textContent = '🎬';
-  // Бейдж «N в фоне» если в этом проекте крутятся генерации.
-  // Map проектов → projectKey: для folder-проектов = 'folder:' + r.name.
-  const bgList = (typeof bgJobsAll === 'function' ? bgJobsAll() : {})['folder:' + r.name];
+  // Бейдж «N в фоне» — server-side jobsHub source-of-truth (см. _bgServerCache).
+  const bgList = _bgServerCache['folder:' + r.name];
   if (bgList?.length) thumb.appendChild(_makeBgBadge(bgList.length));
   const meta = document.createElement('div');
   meta.className = 'welcome-card-meta';
@@ -804,8 +838,8 @@ function makeCloudWelcomeCard(p) {
   cloudBadge.textContent = '☁';
   cloudBadge.title = 'Облачный проект';
   thumb.appendChild(cloudBadge);
-  // Бейдж «N в фоне» если в этом проекте крутятся генерации.
-  const bgList = (typeof bgJobsAll === 'function' ? bgJobsAll() : {})['cloud:' + p.id];
+  // Бейдж «N в фоне» — server-side jobsHub source-of-truth.
+  const bgList = _bgServerCache['cloud:' + p.id];
   if (bgList?.length) thumb.appendChild(_makeBgBadge(bgList.length));
 
   const meta = document.createElement('div');
@@ -1060,6 +1094,8 @@ async function openFilm(handle) {
   state.filmHandle = handle;
   state.currentBoard = null;
   document.body.classList.remove('no-project');
+  // Запоминаем что юзер сейчас в проекте → Cmd+R откроет его снова.
+  try { localStorage.setItem('lastLocation', 'project'); } catch {}
   window.appProject?.notifyState(true);
   ensureClaudeMd(handle).catch(() => {});
   // Подзаголовок шапки = имя открытого проекта (вместо «Видео-редактор»).
@@ -1133,7 +1169,10 @@ async function openFilm(handle) {
 async function closeProject() {
   // Помечаем что юзер вышел явно — на следующем старте autoload пропускается.
   // Cmd+R после close = welcome, а не реоткрытие.
-  try { localStorage.setItem('welcomeOnNextStart', '1'); } catch {}
+  try {
+    localStorage.setItem('welcomeOnNextStart', '1');
+    localStorage.setItem('lastLocation', 'welcome');
+  } catch {}
   // Чат привязан к одному проекту — flush pending-persist В ТЕКУЩИЙ
   // filmHandle, потом сбрасываем in-memory. Без flush'а debounced-write
   // мог бы попасть в новый проект (race на 600ms окно).

package/renderer/chat.js

@@ -847,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) {
@@ -1268,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(() => ({}));
@@ -1335,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/generate.js

@@ -1725,11 +1725,15 @@ async function runTTSJob(node, text, boardHandle, bKey, voiceId) {
 }
 
 async function startGenerationJob(node, kind, prompt, mediaRefs, boardHandle, bKey, modelKey) {
-  const job = { boardKey: bKey, boardHandle, kind, taskId: null, nodeId: node.id };
+  // КЛЮЧЕВОЕ: captures projectKey НА МОМЕНТ старта — иначе если юзер
+  // позже закроет проект, на completion мы не знаем чьё это «end».
+  const projectKey = (state.cloudProjectId ? 'cloud:' + state.cloudProjectId
+                     : state.filmHandle?.name ? 'folder:' + state.filmHandle.name : null);
+  const job = { boardKey: bKey, boardHandle, kind, taskId: null, nodeId: node.id, projectKey };
   state.jobs.set(node.id, job);
   updateJobsBadge();
   // Track в global bg-jobs (для welcome-индикаторов и system-notif при завершении).
-  if (typeof bgJobStart === 'function') bgJobStart({ nodeId: node.id, kind, name: node.name });
+  if (typeof bgJobStart === 'function') bgJobStart({ nodeId: node.id, kind, name: node.name, projectKey });
   logJob(node.id, `gen start kind=${kind} model=${modelKey || '—'} refs=${mediaRefs?.length || 0} prompt="${(prompt||'').slice(0,200)}"`);
   // Подробный дамп всех refs со всеми полями
   logJob(node.id, `refs dump: ${logSafe((mediaRefs || []).map(r => ({
@@ -1856,9 +1860,10 @@ async function startGenerationJob(node, kind, prompt, mediaRefs, boardHandle, bK
     await mutateNode(bKey, boardHandle, node.id, n => {
       n.status = 'error'; n.error = e.message;
     });
+    const projectKeyOnError = state.jobs.get(node.id)?.projectKey;
     state.jobs.delete(node.id);
     updateJobsBadge();
-    if (typeof bgJobEnd === 'function') bgJobEnd(node.id);
+    if (typeof bgJobEnd === 'function') bgJobEnd(node.id, projectKeyOnError);
     if (typeof showToast === 'function') showToast(`⚠ ${kind || 'gen'}: ${e.message?.slice(0, 80)}`, 'error');
     if (typeof systemNotify === 'function' && document.hidden) {
       systemNotify('KingKont: ошибка генерации', e.message?.slice(0, 100), { tag: 'gen-err-' + node.id }).catch(() => {});
@@ -1986,10 +1991,12 @@ async function pollJob(job, nodeId, bKey, boardHandle, kind) {
           n.generated = { ...(n.generated || {}), creditsCharged: cost };
         }
       });
+      const projectKeyAtCompletion = state.jobs.get(nodeId)?.projectKey;
       state.jobs.delete(nodeId);
       updateJobsBadge();
-      // bgJob убираем (welcome перечитает счётчики через event).
-      if (typeof bgJobEnd === 'function') bgJobEnd(nodeId);
+      // bgJob убираем — projectKey берём из job (captured at start), а не
+      // _projectKeyForCurrent (юзер мог переключить проект, тогда было бы null).
+      if (typeof bgJobEnd === 'function') bgJobEnd(nodeId, projectKeyAtCompletion);
       if (typeof window.refreshBalance === 'function') window.refreshBalance();
       // Toast — ВСЕГДА (юзер хочет видеть когда что-то сделалось).
       // Стиль 'ok' для current-board, 'info' для другой доски.

package/renderer/state.js

@@ -83,24 +83,31 @@ function _projectKeyForCurrent() {
 }
 function bgJobStart(info) {
   // info: {nodeId, kind, name?, projectKey?}
+  // ВАЖНО: projectKey обязателен — иначе job висит на сервере вечно
+  // (если юзер закроет проект до bgJobEnd, _projectKeyForCurrent вернёт
+  //  null, и end-call станет no-op).
   const pk = info.projectKey || _projectKeyForCurrent();
-  if (!pk) return;
+  if (!pk) { console.warn('bgJobStart: no projectKey, skipping'); return; }
   try {
     const list = JSON.parse(localStorage.getItem(bgJobsKey(pk)) || '[]');
-    if (list.some(j => j.nodeId === info.nodeId)) return;  // уже трекается
-    list.push({ nodeId: info.nodeId, kind: info.kind, name: info.name || null, startedAt: Date.now() });
-    localStorage.setItem(bgJobsKey(pk), JSON.stringify(list));
-    window.dispatchEvent(new CustomEvent('bgjobs:changed'));
+    if (!list.some(j => j.nodeId === info.nodeId)) {
+      list.push({ nodeId: info.nodeId, kind: info.kind, name: info.name || null, startedAt: Date.now() });
+      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) {
+  // projectKey ОБЯЗАТЕЛЕН — без него юзер на welcome теряет уведомление
+  // и счётчик зависает. Раньше фоллбэк на _projectKeyForCurrent давал
+  // null (welcome) → no-op. Теперь шлём end даже если localStorage не
+  // знает проект (важно для server jobsHub).
   const pk = projectKey || _projectKeyForCurrent();
-  if (!pk) return null;
+  if (!pk) { console.warn('bgJobEnd: no projectKey for', nodeId); return null; }
   let job = null;
   try {
     const list = JSON.parse(localStorage.getItem(bgJobsKey(pk)) || '[]');
@@ -133,8 +140,16 @@ window.bgJobEnd = bgJobEnd;
 window.bgJobsAll = bgJobsAll;
 
 // === SYSTEM NOTIFICATION (HTML5 Notification API) ===
-// Просим разрешение лениво — на первом успешном вызове.
+// Просим разрешение eagerly при старте приложения чтобы первое уведомление
+// уже работало (без race с первой генерацией).
 let _notifPermAsked = false;
+if (typeof Notification !== 'undefined' && Notification.permission === 'default') {
+  // Откладываем чуть-чуть — иначе диалог появляется до того как юзер увидел UI.
+  setTimeout(() => {
+    _notifPermAsked = true;
+    Notification.requestPermission().catch(() => {});
+  }, 2000);
+}
 async function systemNotify(title, body, opts = {}) {
   if (typeof Notification === 'undefined') return null;
   let perm = Notification.permission;
@@ -142,7 +157,11 @@ async function systemNotify(title, body, opts = {}) {
     _notifPermAsked = true;
     try { perm = await Notification.requestPermission(); } catch {}
   }
-  if (perm !== 'granted') return null;
+  if (perm !== 'granted') {
+    // Не вышло — fallback на toast (юзер хоть так увидит).
+    if (typeof showToast === 'function') showToast('🔔 ' + title + (body ? ': ' + body : ''), 'info');
+    return null;
+  }
   try {
     const n = new Notification(title, {
       body: body || '',
@@ -160,26 +179,30 @@ async function systemNotify(title, body, opts = {}) {
 window.systemNotify = systemNotify;
 
 // Глобальный toast для информативных уведомлений (генерация завершилась,
-// resume сработал, ...). Стек справа сверху, auto-dismiss через 5s.
+// resume сработал, ...). Стек справа сверху. Auto-dismiss:
+//   - ok/info — 10s (юзер должен заметить успех)
+//   - error   — 30s (важно, не пропустить)
 function showToast(text, kind) {
   let host = document.getElementById('toastHost');
   if (!host) {
     host = document.createElement('div');
     host.id = 'toastHost';
-    host.style.cssText = 'position:fixed; right:16px; top:64px; z-index:9999; display:flex; flex-direction:column; gap:6px; pointer-events:none;';
+    host.style.cssText = 'position:fixed; right:16px; top:64px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:340px;';
     document.body.appendChild(host);
   }
   const t = document.createElement('div');
   const colors = {
-    ok:    'background:#1a3a1a; border:1px solid #2a6a3a; color:#9efa9e;',
-    error: 'background:#3a1a1a; border:1px solid #8a2a2a; color:#fa9e9e;',
-    info:  'background:#1a2a3a; border:1px solid #2a4a6a; color:#9ecdfa;',
+    ok:    'background:#1f4a1f; border:1px solid #4cc44c; color:#dcffdc;',
+    error: 'background:#4a1f1f; border:1px solid #c44c4c; color:#ffdcdc;',
+    info:  'background:#1f2f4a; border:1px solid #4c7cc4; color:#dceaff;',
   };
-  t.style.cssText = `${colors[kind] || colors.info} padding:8px 14px; border-radius:6px; font-size:12px; pointer-events:auto; box-shadow:0 4px 16px rgba(0,0,0,0.4); animation:toastIn 0.18s ease-out;`;
+  t.style.cssText = `${colors[kind] || colors.info} padding:10px 14px; border-radius:8px; font-size:13px; font-weight:500; pointer-events:auto; box-shadow:0 6px 20px rgba(0,0,0,0.5); cursor:pointer; line-height:1.4; word-break:break-word;`;
   t.textContent = text;
+  t.title = 'Кликни чтобы закрыть';
   t.addEventListener('click', () => t.remove());
   host.appendChild(t);
-  setTimeout(() => t.remove(), 5000);
+  const ttl = kind === 'error' ? 30000 : 10000;
+  setTimeout(() => t.remove(), ttl);
   return t;
 }
 window.showToast = showToast;

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,23 @@
   }
   .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 поверх обложки внизу с тёмным
+     градиентом, читается на ЛЮБОЙ обложке.
+     4:3 (а не 16:9) — карты выше, лучше выглядят на стандартных и
+     вертикальных обложках, занимают меньше горизонтального места. */
+  .welcome-card {
+    aspect-ratio: 4 / 3;
+    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 +539,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;