kingkont 0.18.2 → 0.18.4

package/package.json

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

package/renderer/notifyPanel.js

@@ -21,12 +21,46 @@
 
   function _ensureUI() {
     if ($('notifyBtn')) return;
+    // CSS animations для бейджа/панели/новых row'ов — иначе юзер не
+    // замечает что событие пришло (прошлая версия с display:none→flex
+    // была инстант, не привлекала внимание).
+    if (!$('notifyPanelStyles')) {
+      const style = document.createElement('style');
+      style.id = 'notifyPanelStyles';
+      style.textContent = `
+        @keyframes notifyBellPulse {
+          0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(227,51,119,0.55); background: rgba(60,30,50,0.92); }
+          40%  { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(227,51,119,0); background: rgba(120,40,80,0.95); }
+          100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(227,51,119,0); background: rgba(30,30,40,0.85); }
+        }
+        @keyframes notifyPanelSlide {
+          0%   { transform: translateY(12px) scale(0.96); opacity: 0; }
+          100% { transform: translateY(0) scale(1);       opacity: 1; }
+        }
+        @keyframes notifyRowFlash {
+          0%   { box-shadow: 0 0 0 0 rgba(227,51,119,0.0), inset 0 0 0 0 rgba(227,51,119,0.0); transform: translateX(-6px); opacity: 0.4; }
+          18%  { transform: translateX(0); opacity: 1; box-shadow: 0 0 14px 2px rgba(227,51,119,0.55), inset 2px 0 0 0 rgba(227,51,119,0.85); }
+          100% { box-shadow: 0 0 0 0 rgba(227,51,119,0), inset 2px 0 0 0 rgba(227,51,119,0); transform: translateX(0); opacity: 1; }
+        }
+        #notifyBtn.pulsing {
+          animation: notifyBellPulse 0.9s ease-out 1;
+        }
+        #notifyPanel.opening {
+          animation: notifyPanelSlide 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
+          transform-origin: bottom left;
+        }
+        #notifyList .notify-row.is-new {
+          animation: notifyRowFlash 1.6s ease-out 1;
+        }
+      `;
+      document.head.appendChild(style);
+    }
     // Кнопка-колокольчик в нижнем-левом углу — там есть свободное место,
     // не перекрывает sidebar/canvas-toolbar/welcome-status.
     const btn = document.createElement('button');
     btn.id = 'notifyBtn';
     btn.title = 'События (генерации, чат, ошибки)';
-    btn.style.cssText = 'position:fixed; bottom:12px; left:12px; z-index:9998; background:rgba(30,30,40,0.85); border:1px solid #444; color:#ccc; font-size:14px; width:32px; height:32px; border-radius:50%; cursor:pointer; backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;';
+    btn.style.cssText = 'position:fixed; bottom:12px; left:12px; z-index:9998; background:rgba(30,30,40,0.85); border:1px solid #444; color:#ccc; font-size:14px; width:32px; height:32px; border-radius:50%; cursor:pointer; backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; transition:background 0.2s;';
     btn.innerHTML = '🔔';
     document.body.appendChild(btn);
     btn.addEventListener('click', toggle);
@@ -54,13 +88,32 @@
     $('notifyClear').addEventListener('click', () => { events.length = 0; unread = 0; render(); });
   }
 
-  function setOpen(open) {
+  // openMode: 'manual' (юзер сам нажал на 🔔 — НЕ автозакрываем),
+  //           'auto'   (открыли по событию — закроется через таймер),
+  //           null     (закрыто).
+  let openMode = null;
+  function setOpen(open, mode) {
     _ensureUI();
     panelOpen = open;
-    $('notifyPanel').style.display = open ? 'flex' : 'none';
-    if (open) { unread = 0; updateBadge(); render(); }
+    openMode = open ? (mode || 'manual') : null;
+    const panel = $('notifyPanel');
+    panel.style.display = open ? 'flex' : 'none';
+    if (open) {
+      // Слайд-анимация при открытии — иначе display:none→flex слишком
+      // резкий, юзер не успевает заметить «панель появилась». Переустанавливаем
+      // класс через requestAnimationFrame чтобы анимация рестартовала
+      // даже если панель только что закрылась.
+      panel.classList.remove('opening');
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => panel.classList.add('opening'));
+      });
+      unread = 0;
+      updateBadge();
+      render();
+    }
   }
-  function toggle() { setOpen(!panelOpen); }
+  function toggle() { setOpen(!panelOpen, 'manual'); }
+  function isManuallyOpen() { return panelOpen && openMode === 'manual'; }
 
   function updateBadge() {
     const b = $('notifyBadge');
@@ -90,6 +143,11 @@
       const time = `${String(dt.getHours()).padStart(2,'0')}:${String(dt.getMinutes()).padStart(2,'0')}:${String(dt.getSeconds()).padStart(2,'0')}`;
       const clickable = !!e.target;
       row.style.cssText = `position:relative; padding:8px 10px 8px 10px; border-radius:4px; margin-bottom:4px; background:${c}22; border-left:3px solid ${c}; cursor:${clickable ? 'pointer' : 'default'}; transition:background 0.1s;`;
+      row.classList.add('notify-row');
+      // Свежее событие — flash-анимация. Окно 2.2s достаточное чтобы
+      // юзер заметил, и не настолько большое чтобы старый event при
+      // re-render'е (например после удаления) ложно мигнул.
+      if (Date.now() - e.ts < 2200) row.classList.add('is-new');
       if (clickable) row.title = 'Перейти к объекту';
       const targetHint = clickable ? `<span style="color:#9ab; font-size:10px; margin-left:6px;">↗</span>` : '';
       row.innerHTML = `<div style="display:flex; justify-content:space-between; gap:8px; align-items:flex-start; padding-right:18px;">
@@ -158,6 +216,33 @@
     } else {
       render();
     }
+    _pulseBell();
+    // Авто-открытие панели на 3.5s — юзер видит событие сразу, потом
+    // панель прячется. Если юзер сам открыл — не трогаем (проверка в
+    // openAuto). Каждое новое событие сбрасывает таймер.
+    _scheduleAutoFlash();
+  }
+  // Bell-pulse: одна короткая анимация. Перезапускаем класс через
+  // void offsetWidth — иначе подряд идущие события не «пульсируют»
+  // повторно (CSS animation не рестартует на тот же класс).
+  function _pulseBell() {
+    const btn = $('notifyBtn');
+    if (!btn) return;
+    btn.classList.remove('pulsing');
+    void btn.offsetWidth;
+    btn.classList.add('pulsing');
+  }
+  // Auto-flash: открыть в auto-режиме и закрыть через таймер. Срабатывает
+  // на КАЖДОЕ addEvent. Если юзер уже manual'но открыл — открытие no-op'ится.
+  let _autoFlashT = null;
+  function _scheduleAutoFlash() {
+    if (panelOpen && openMode === 'manual') return; // юзер сам открыл — не лезем
+    if (!panelOpen) setOpen(true, 'auto');
+    if (_autoFlashT) clearTimeout(_autoFlashT);
+    _autoFlashT = setTimeout(() => {
+      _autoFlashT = null;
+      if (openMode === 'auto') setOpen(false);
+    }, 5000);
   }
 
   // Navigate from notification to scene/node.
@@ -224,20 +309,30 @@
       setTimeout(() => { el.style.boxShadow = ''; }, 2500);
     }, 200);
   }
-  window.notifyPanel = { open: () => setOpen(true), close: () => setOpen(false), toggle, addEvent, render };
+  // openAuto — для showToast: открывает в режиме auto (закроется по таймеру
+  // если showToast.close('auto') не отменён). open() без аргумента — manual.
+  window.notifyPanel = {
+    open: (mode) => setOpen(true, mode || 'manual'),
+    openAuto: () => setOpen(true, 'auto'),
+    closeAuto: () => { if (openMode === 'auto') setOpen(false); },
+    close: () => setOpen(false),
+    toggle, addEvent, render,
+    isManuallyOpen,
+  };
 
-  // Init: ensure UI exists ASAP, hook into showToast и WS-events.
+  // Init: ensure UI exists ASAP, drain pending toast queue, subscribe WS.
   document.addEventListener('DOMContentLoaded', () => {
     _ensureUI();
-    // Wrap showToast чтобы дублировать в панель + forward target для
-    // click-навигации (showToast(text, kind, {target: {...}})).
-    if (typeof window.showToast === 'function') {
-      const orig = window.showToast;
-      window.showToast = function (text, kind, opts) {
-        try { addEvent({ kind: kind || 'info', text, target: opts?.target || null }); } catch {}
-        return orig.apply(this, arguments);
-      };
-    }
+    // Дренируем showToast'ы которые вызвались до загрузки notifyPanel.
+    // (state.js:showToast копит в __pendingToastQueue если addEvent
+    // ещё не доступен.)
+    try {
+      const q = window.__pendingToastQueue;
+      if (Array.isArray(q)) {
+        for (const ev of q) addEvent(ev);
+        q.length = 0;
+      }
+    } catch {}
     // WS-канал jobs:all для start/end/done/failed events. Connect к /ws.
     function _connect() {
       let ws;

package/renderer/state.js

@@ -177,8 +177,10 @@ async function systemNotify(title, body, opts = {}) {
     try { perm = await Notification.requestPermission(); } catch {}
   }
   if (perm !== 'granted') {
-    // Не вышло — fallback на toast (юзер хоть так увидит).
-    if (typeof showToast === 'function') showToast('🔔 ' + title + (body ? ': ' + body : ''), 'info');
+    // Без OS-нотификации — событие УЖЕ добавлено в notifyPanel через
+    // showToast-wrapper (single-source-of-truth). Раньше тут был fallback
+    // на showToast → дубль события с префиксом «🔔 KingKont:» БЕЗ target,
+    // поэтому без клика. Теперь молча пропускаем.
     return null;
   }
   try {
@@ -197,36 +199,27 @@ async function systemNotify(title, body, opts = {}) {
 }
 window.systemNotify = systemNotify;
 
-// Глобальный toast для информативных уведомлений (генерация завершилась,
-// resume сработал, ...). Стек справа сверху. Auto-dismiss:
-//   - ok/info — 10s (юзер должен заметить успех)
-//   - error   — 30s (важно, не пропустить)
+// Глобальная сигналка событий. Раньше показывался bottom-left toast,
+// но дубль с notifyPanel'ом юзера утомил («toast не нужен»). Теперь:
+//   - событие добавляется в notifyPanel (через wrapper в notifyPanel.js)
+//   - панель открывается АВТОМАТИЧЕСКИ ненадолго (3s) — юзер видит
+//     событие сразу, потом панель скрывается, бейдж остаётся.
+// Возвращаем фейковый «токен» для совместимости с местами которые ждут
+// результат showToast (там ничего с ним не делают, но на всякий случай).
 function showToast(text, kind, opts) {
-  // opts.target: {projectKey, boardKey, nodeId} — toast становится кликабельным.
-  let host = document.getElementById('toastHost');
-  if (!host) {
-    host = document.createElement('div');
-    host.id = 'toastHost';
-    // Bottom-left стек — рядом с 🔔 кнопкой нотификаций. Новые toast'ы
-    // появляются СНИЗУ (flex-direction: column-reverse), так что они
-    // «всплывают» вверх от кнопки.
-    host.style.cssText = 'position:fixed; left:52px; bottom:12px; z-index:9999; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; max-width:340px;';
-    document.body.appendChild(host);
-  }
-  const t = document.createElement('div');
-  const colors = {
-    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: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);
-  const ttl = kind === 'error' ? 30000 : 10000;
-  setTimeout(() => t.remove(), ttl);
-  return t;
+  // Bottom-left toast убран — событие напрямую идёт в notifyPanel,
+  // панель сама подсветится (см. _scheduleAutoFlash в notifyPanel.js).
+  // Если notifyPanel ещё не загружен (DOM-readiness race) — копим
+  // в очередь, она дренируется при создании панели.
+  try {
+    if (window.notifyPanel?.addEvent) {
+      window.notifyPanel.addEvent({ kind: kind || 'info', text, target: opts?.target || null });
+    } else {
+      (window.__pendingToastQueue = window.__pendingToastQueue || [])
+        .push({ kind: kind || 'info', text, target: opts?.target || null });
+    }
+  } catch {}
+  return { _stub: true };
 }
 window.showToast = showToast;
 

package/renderer/styles.css

@@ -124,8 +124,11 @@
     display: flex; flex-direction: column; gap: 6px;
     font-size: 11px; color: #777;
   }
-  .sidebar-footer .hint { color: #777; font-size: 11px; line-height: 1.4; }
-  .sidebar-footer .jobs-info { color: #aaccdd; font-size: 11px; }
+  /* «В фоне: N» и hint «Перетаскивай файлы…» — отступаем влево на ширину
+     🔔-кнопки (32px + 12px gap слева от sidebar = 44px), чтобы кнопка
+     событий (position:fixed; left:12px; bottom:12px) их не перекрывала. */
+  .sidebar-footer .hint { color: #777; font-size: 11px; line-height: 1.4; padding-left: 44px; }
+  .sidebar-footer .jobs-info { color: #aaccdd; font-size: 11px; padding-left: 44px; }
   .sidebar-footer .balance-info {
     display: flex; align-items: center; gap: 6px; font-size: 11px;
     color: #c4c4c4; padding: 4px 8px; background: #2a2a2a;