kingkont 0.9.0 → 0.9.2

package/index.html

@@ -70,6 +70,13 @@
 
 <!-- Welcome-экран: виден только когда body.no-project -->
 <div class="welcome" id="welcome">
+  <!-- Топ-правый угол: identity + балансы. Позиционирование absolute,
+       чтобы не ехало с центрированной шапкой. Заполняется renderWelcomeStatus
+       (board.js) при каждом показе welcome И при auth-changed/balance-tick. -->
+  <div class="welcome-status" id="welcomeStatus" style="-webkit-app-region: no-drag;">
+    <div class="welcome-status-balances" id="welcomeStatusBalances"></div>
+    <div class="welcome-status-identity" id="welcomeStatusIdentity"></div>
+  </div>
   <div class="welcome-inner">
     <div class="welcome-header">
       <img class="welcome-logo" src="assets/icon.png" alt="" draggable="false" id="welcomeLogo" title="Дабл-клик — настройки" style="cursor:pointer;">

package/lib/providers.js

@@ -712,6 +712,18 @@ async function fetchBalances(s) {
       }
     } catch {}
   }
+  if (s.useKie && process.env.KIE_API_KEY) {
+    try {
+      // KIE: GET /api/v1/chat/credit → { code: 200, msg: 'success', data: <number> }
+      const r = await fetch(`${KIE_BASE}/api/v1/chat/credit`, {
+        headers: { 'Authorization': `Bearer ${process.env.KIE_API_KEY}` },
+      });
+      const d = await r.json().catch(() => ({}));
+      if (r.ok && d.code === 200 && typeof d.data === 'number') {
+        out.kie = { unit: 'credits', amount: d.data };
+      }
+    } catch {}
+  }
   return out;
 }
 

package/package.json

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

package/renderer/board.js

@@ -50,8 +50,11 @@ window.addEventListener('DOMContentLoaded', async () => {
         // Сбрасываем кэш — он содержал данные старого юзера.
         localStorage.removeItem('cloudProjectsCache');
         localStorage.removeItem('cloudProjectsLastOpened');
-        // Если открыт welcome (нет проекта) — перерисовать. fetchListCached
-        // в renderWelcomeRecents подтянет свежий список с сервера.
+        // Welcome top-right identity-pill + balances — перерисовываем сразу
+        // (даже если открыт проект и welcome скрыт — обновится для следующего показа).
+        renderWelcomeIdentity().catch(() => {});
+        refreshBalance().catch(() => {});
+        // Если открыт welcome (нет проекта) — перерисовать grid.
         if (!state || !window.cloudProjects) return;
         if (window.cloudProjects.setVisibility) window.cloudProjects.setVisibility();
         if (!document.body.classList.contains('no-project')) return;
@@ -162,39 +165,91 @@ window.addEventListener('DOMContentLoaded', async () => {
 // red (≤0). Также экспортирована глобально как window.refreshBalance —
 // чтобы settings-окно могло триггерить обновление после login/logout.
 async function refreshBalance() {
-  const wrap = document.getElementById('balancesAll');
-  if (!wrap) return;
   let data = {};
   try {
     const r = await fetch('/api/balance/all');
     if (r.ok) data = await r.json();
   } catch {}
-  wrap.innerHTML = '';
   // Один pill на провайдер. Если у провайдера нет данных (выключен или
   // API не дал баланс) — pill не рендерим.
   const pills = [
     { key: 'kingkont',   label: 'KingKont',   onClick: () => window.openTxLog?.(), low: 100, fmt: (a) => `<b>${a.toLocaleString('ru-RU')}</b>&nbsp;credits` },
+    { key: 'kie',        label: 'KIE',        low: 5,                               fmt: (a) => `<b>${a.toLocaleString('ru-RU', { maximumFractionDigits: 2 })}</b>&nbsp;credits` },
     { key: 'openrouter', label: 'OpenRouter', low: 0.5,                              fmt: (a) => `<b>$${a.toFixed(2)}</b>` },
     { key: 'elevenlabs', label: 'ElevenLabs', low: 1000,                             fmt: (a) => `<b>${a.toLocaleString('ru-RU')}</b>&nbsp;chars` },
   ];
-  for (const p of pills) {
-    const d = data[p.key];
-    if (!d || typeof d.amount !== 'number') continue;
-    const pill = document.createElement('span');
-    pill.className = 'balance-info';
-    pill.title = `Баланс ${p.label}` + (p.onClick ? ' · клик — лог списаний' : '');
-    if (d.amount > 0 && d.amount < (p.low || 0)) pill.classList.add('low');
-    if (d.amount <= 0) pill.classList.add('empty');
-    pill.innerHTML = `<span class="dot"></span><span style="color:#888;font-size:10px;margin-right:4px;">${p.label}</span><span>${p.fmt(d.amount)}</span>`;
-    if (p.onClick) {
-      pill.style.cursor = 'pointer';
-      pill.addEventListener('click', p.onClick);
+  function renderInto(wrap) {
+    if (!wrap) return;
+    wrap.innerHTML = '';
+    for (const p of pills) {
+      const d = data[p.key];
+      if (!d || typeof d.amount !== 'number') continue;
+      const pill = document.createElement('span');
+      pill.className = 'balance-info';
+      pill.title = `Баланс ${p.label}` + (p.onClick ? ' · клик — лог списаний' : '');
+      if (d.amount > 0 && d.amount < (p.low || 0)) pill.classList.add('low');
+      if (d.amount <= 0) pill.classList.add('empty');
+      pill.innerHTML = `<span class="dot"></span><span style="color:#888;font-size:10px;margin-right:4px;">${p.label}</span><span>${p.fmt(d.amount)}</span>`;
+      if (p.onClick) {
+        pill.style.cursor = 'pointer';
+        pill.addEventListener('click', p.onClick);
+      }
+      wrap.appendChild(pill);
     }
-    wrap.appendChild(pill);
   }
+  // Sidebar-footer (когда открыт проект).
+  renderInto(document.getElementById('balancesAll'));
+  // Welcome top-right (когда no-project).
+  renderInto(document.getElementById('welcomeStatusBalances'));
 }
 window.refreshBalance = refreshBalance;
 
+// Identity-pill в правом верхнем углу welcome-экрана.
+// Показывает кто залогинен в KingKont (или предлагает войти).
+async function renderWelcomeIdentity() {
+  const wrap = document.getElementById('welcomeStatusIdentity');
+  if (!wrap) return;
+  wrap.innerHTML = '';
+  let status = null;
+  try { status = await window.appChatium?.status?.(); } catch {}
+  if (status?.connected) {
+    // Имя: предпочитаем display-name (login/name из auth~me), fallback — userId.
+    const name = status.login || status.name || status.userId || 'KingKont';
+    const sub = status.userId && status.userId !== name ? `· ${status.userId.slice(0, 8)}` : '';
+    wrap.innerHTML = `
+      <span style="color:#5c5; font-size:13px; line-height:1;">●</span>
+      <span class="who">${escapeHtml(name)}</span>
+      <span class="who-sub">${escapeHtml(sub)}</span>
+    `;
+    const logoutBtn = document.createElement('button');
+    logoutBtn.textContent = 'Выйти';
+    logoutBtn.title = 'Logout из KingKont';
+    logoutBtn.addEventListener('click', async () => {
+      if (!confirm('Выйти из KingKont?')) return;
+      try { await window.appChatium?.logout?.(); } catch {}
+    });
+    wrap.appendChild(logoutBtn);
+  } else {
+    wrap.innerHTML = `
+      <span style="color:#888; font-size:13px; line-height:1;">●</span>
+      <span class="who" style="color:#aaa;">Не залогинен</span>
+    `;
+    const loginBtn = document.createElement('button');
+    loginBtn.textContent = 'Войти';
+    loginBtn.title = 'Войти в KingKont';
+    loginBtn.addEventListener('click', async () => {
+      try { await window.appChatium?.login?.(); } catch (e) { alert('Login failed: ' + (e?.message || e)); }
+    });
+    wrap.appendChild(loginBtn);
+  }
+}
+window.renderWelcomeIdentity = renderWelcomeIdentity;
+function escapeHtml(s) {
+  return String(s || '').replace(/[&<>"']/g, c => ({
+    '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;',
+  }[c]));
+}
+
 // === Лог списаний (модал с историей кредитов) ===
 async function openTxLog() {
   const modal = document.getElementById('txLogModal');
@@ -396,6 +451,8 @@ async function renderWelcomeRecents() {
   if (!grid || !wrap) return;
   grid.innerHTML = '';
   wrap.style.display = '';
+  // Identity-pill в правом верхнем — обновляем при каждом показе welcome.
+  renderWelcomeIdentity().catch(() => {});
   const list = await getRecents();
 
   // Первой картой — «Открыть проект». Кликается → дёргает скрытый

package/renderer/settings.js

@@ -239,25 +239,33 @@ async function renderNodeBody(node, body) {
   if (node.status === 'draft') {
     const wrap = document.createElement('div');
     wrap.className = 'gen-pending';
-    const ic = document.createElement('div');
-    ic.style.cssText = 'font-size:36px; opacity:0.7;';
-    ic.textContent = node.type === 'audio' ? '🎙'
-                   : node.type === 'video' ? '🎬'
-                   : node.type === 'image' ? '🖼' : '📝';
-    const st = document.createElement('div');
-    st.className = 'state-text';
-    st.textContent = 'Черновик: подведи входы и запусти';
-    const pp = document.createElement('div');
-    pp.className = 'prompt-preview';
-    pp.textContent = node.generated?.rawPrompt || node.generated?.prompt || '';
-    wrap.append(ic, st, pp);
+    // Для image — кнопка наверху, без декоративных 🖼/«Черновик» (юзер
+    // и так видит ноду пустой). Для audio/video оставляем — у них
+    // меньше визуального контекста и иконка помогает идентифицировать тип.
+    const isImage = node.type === 'image';
     const runBtn = document.createElement('button');
     runBtn.textContent = '▶ Запустить генерацию';
     runBtn.className = 'primary';
-    runBtn.style.cssText = 'margin-top:8px; font-size:12px; padding:6px 10px;';
+    runBtn.style.cssText = isImage
+      ? 'font-size:12px; padding:6px 10px; align-self:stretch;'
+      : 'margin-top:8px; font-size:12px; padding:6px 10px;';
     runBtn.addEventListener('mousedown', e => e.stopPropagation());
     runBtn.addEventListener('click', e => { e.stopPropagation(); regenerateNode(node); });
-    wrap.appendChild(runBtn);
+    const pp = document.createElement('div');
+    pp.className = 'prompt-preview';
+    pp.textContent = node.generated?.rawPrompt || node.generated?.prompt || '';
+    if (isImage) {
+      wrap.append(runBtn, pp);
+    } else {
+      const ic = document.createElement('div');
+      ic.style.cssText = 'font-size:36px; opacity:0.7;';
+      ic.textContent = node.type === 'audio' ? '🎙'
+                     : node.type === 'video' ? '🎬' : '📝';
+      const st = document.createElement('div');
+      st.className = 'state-text';
+      st.textContent = 'Черновик: подведи входы и запусти';
+      wrap.append(ic, st, pp, runBtn);
+    }
     body.appendChild(wrap);
     return;
   }
@@ -520,21 +528,21 @@ async function renderNodeBody(node, body) {
       body.appendChild(playRow);
     }
   } else if (node.type === 'image' && !node.file && (node.generated?.rawPrompt || node.generated?.prompt)) {
-    // Fallback: image-нода с промптом, но без файла (ещё не генерилась
-    // и status != 'draft'). Показываем preview-блок чтобы юзер видел
-    // что собирается генерироваться.
+    // Image-нода с промптом, но без файла (ещё не генерилась).
+    // Кнопка ▶ Запустить — сверху (без декоративной 🖼-иконки и
+    // подписи «Не сгенерировано» — они только занимают место).
     const wrap = document.createElement('div');
     wrap.className = 'gen-pending';
-    const ic = document.createElement('div');
-    ic.style.cssText = 'font-size:36px; opacity:0.7;';
-    ic.textContent = '🖼';
-    const st = document.createElement('div');
-    st.className = 'state-text';
-    st.textContent = 'Не сгенерировано — открой ↻ для запуска';
+    const runBtn = document.createElement('button');
+    runBtn.textContent = '▶ Запустить генерацию';
+    runBtn.className = 'primary';
+    runBtn.style.cssText = 'font-size:12px; padding:6px 10px; align-self:stretch;';
+    runBtn.addEventListener('mousedown', e => e.stopPropagation());
+    runBtn.addEventListener('click', e => { e.stopPropagation(); regenerateNode(node); });
     const pp = document.createElement('div');
     pp.className = 'prompt-preview';
     pp.textContent = node.generated?.rawPrompt || node.generated?.prompt || '';
-    wrap.append(ic, st, pp);
+    wrap.append(runBtn, pp);
     body.appendChild(wrap);
   }
 }

package/renderer/styles.css

@@ -213,6 +213,40 @@
     vertical-align: middle; margin-left: 6px;
   }
   .welcome-sub { font-size: 12px; color: #888; letter-spacing: 0.5px; text-transform: uppercase; }
+  /* Топ-правый блок welcome-экрана: identity + balances. Положение fixed,
+     чтобы не зависеть от центрированной .welcome-inner колонки. */
+  .welcome-status {
+    position: fixed; top: 16px; right: 24px; z-index: 60;
+    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
+    pointer-events: none;     /* контейнер прозрачен, дочерние сами включают pointer-events */
+  }
+  .welcome-status-identity {
+    pointer-events: auto;
+    display: flex; align-items: center; gap: 8px;
+    background: rgba(30, 32, 40, 0.7); border: 1px solid #333;
+    border-radius: 999px; padding: 4px 10px;
+    font-size: 12px; color: #ccc;
+    backdrop-filter: blur(6px);
+  }
+  .welcome-status-identity .who {
+    color: #e0e0e0; font-weight: 500; max-width: 240px;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .welcome-status-identity .who-sub {
+    color: #888; font-size: 10px;
+    font-family: ui-monospace, 'SF Mono', monospace;
+  }
+  .welcome-status-identity button {
+    background: transparent; border: none; color: #9ab;
+    font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
+  }
+  .welcome-status-identity button:hover { background: rgba(255,255,255,0.06); color: #cde; }
+  .welcome-status-balances {
+    pointer-events: auto;
+    display: flex; flex-direction: row; gap: 6px; flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+  /* Используем те же .balance-info pill'ы что и в sidebar-footer'е. */
   .welcome-open {
     margin-top: 16px;
     padding: 12px 28px; font-size: 15px; font-weight: 600;