viberadar 0.3.37 → 0.3.38

package/dist/ui/dashboard.html

@@ -675,6 +675,41 @@
       font-size: 11px; color: var(--yellow); background: rgba(255,200,0,0.1);
       border: 1px solid var(--yellow); border-radius: 4px; padding: 2px 8px;
     }
+    /* ── Console Tabs ───────────────────────────────────────────────────────── */
+    .agent-tabs-bar {
+      display: flex; align-items: stretch; overflow-x: auto;
+      background: #0a0e15; border-bottom: 1px solid var(--border);
+      flex-shrink: 0; min-height: 30px;
+      scrollbar-width: thin; scrollbar-color: var(--border) transparent;
+    }
+    .agent-tabs-bar::-webkit-scrollbar { height: 3px; }
+    .agent-tabs-bar::-webkit-scrollbar-thumb { background: var(--border); }
+    .agent-tab {
+      display: flex; align-items: center; gap: 6px;
+      padding: 0 8px 0 10px; cursor: pointer;
+      white-space: nowrap; border-right: 1px solid var(--border);
+      font-size: 11px; color: var(--muted); background: transparent;
+      max-width: 200px; flex-shrink: 0; user-select: none;
+      transition: background 0.1s, color 0.1s;
+      border-bottom: 2px solid transparent;
+    }
+    .agent-tab:hover { background: var(--bg-hover); color: var(--text); }
+    .agent-tab.active { background: var(--bg-card); color: var(--text); border-bottom-color: var(--accent); }
+    .agent-tab-title { overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
+    .agent-tab-close {
+      background: none; border: none; cursor: pointer; color: var(--dim);
+      font-size: 13px; padding: 0 2px; line-height: 1; flex-shrink: 0;
+      border-radius: 3px; margin-left: 2px; opacity: 0;
+    }
+    .agent-tab:hover .agent-tab-close { opacity: 1; }
+    .agent-tab-close:hover { background: var(--border); color: var(--text); }
+    .tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+    .tab-dot-running { background: var(--yellow); animation: tab-pulse 1s ease-in-out infinite; }
+    .tab-dot-ok      { background: var(--green); }
+    .tab-dot-error   { background: var(--red); }
+    .tab-dot-info    { background: var(--muted); }
+    @keyframes tab-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
+    #termBtn.term-error { color: var(--red); border-color: var(--red); }
     .file-row-more-btn {
       background: none; border: none; cursor: pointer; font-size: 14px; color: var(--dim);
       padding: 0 4px; line-height: 1; opacity: 0; transition: opacity 0.1s;
@@ -783,6 +818,7 @@
     <button class="agent-panel-cancel" id="agentCancelBtn" onclick="cancelAgent()" title="Сбросить состояние агента" style="display:none">⏹ сброс</button>
     <button class="agent-panel-close" onclick="closeAgentPanel()">✕</button>
   </div>
+  <div class="agent-tabs-bar" id="agentTabsBar"></div>
   <div class="agent-terminal" id="agentTerminal"></div>
 </div>
 
@@ -824,6 +860,155 @@ async function runCoverage() {
 // ─── Agent ────────────────────────────────────────────────────────────────────
 let agentRunning = false;
 
+// ─── Console Sessions ─────────────────────────────────────────────────────────
+const consoleSessions  = [];   // { id, title, lines, status, startTime }
+let activeSessionId    = null; // currently viewed tab
+let runningSessionId   = null; // tab that is currently receiving output
+const SESSION_MAX      = 25;
+const SESSIONS_KEY     = 'viberadar_sessions';
+
+function _sessionId() {
+  return 's' + Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
+}
+
+function saveSessions() {
+  try {
+    const data = consoleSessions.slice(-SESSION_MAX).map(s => ({
+      ...s, lines: s.lines.slice(-500)
+    }));
+    localStorage.setItem(SESSIONS_KEY, JSON.stringify(data));
+  } catch {}
+}
+
+function restoreSessions() {
+  try {
+    const raw = localStorage.getItem(SESSIONS_KEY);
+    if (!raw) return;
+    const saved = JSON.parse(raw);
+    consoleSessions.push(...saved);
+    for (const s of consoleSessions) {
+      if (s.status === 'running') {
+        s.status = 'error';
+        s.lines.push({ text: '⚡ Прервано (перезагрузка страницы)', isError: true });
+      }
+    }
+    if (consoleSessions.length > 0) {
+      activeSessionId = consoleSessions[consoleSessions.length - 1].id;
+      renderTabs();
+      renderActiveSession();
+    }
+  } catch {}
+}
+
+function createSession(title, status = 'running') {
+  if (consoleSessions.length >= SESSION_MAX) consoleSessions.shift();
+  const s = { id: _sessionId(), title, lines: [], status, startTime: Date.now() };
+  consoleSessions.push(s);
+  activeSessionId = s.id;
+  document.getElementById('agentPanel').classList.add('open');
+  document.getElementById('termBtn').classList.add('term-active');
+  renderTabs();
+  renderActiveSession();
+  saveSessions();
+  return s.id;
+}
+
+function switchSession(id) {
+  activeSessionId = id;
+  const s = consoleSessions.find(s => s.id === id);
+  if (s) {
+    const statusText = s.status === 'running' ? 'работает…'
+      : s.status === 'ok'    ? '✅ готово'
+      : s.status === 'error' ? '❌ ошибка'
+      : '';
+    document.getElementById('agentPanelTitle').textContent  = s.title;
+    document.getElementById('agentPanelStatus').textContent = statusText;
+  }
+  renderTabs();
+  renderActiveSession();
+}
+
+function closeSession(id) {
+  const idx = consoleSessions.findIndex(s => s.id === id);
+  if (idx === -1) return;
+  consoleSessions.splice(idx, 1);
+  if (activeSessionId === id) {
+    activeSessionId = consoleSessions.length > 0
+      ? consoleSessions[Math.min(idx, consoleSessions.length - 1)].id
+      : null;
+  }
+  renderTabs();
+  renderActiveSession();
+  saveSessions();
+}
+
+function appendToSession(id, lineOrNode, isError = false, isDim = false) {
+  const s = consoleSessions.find(s => s.id === id);
+  if (!s) return;
+  let stored;
+  if (typeof lineOrNode === 'string') {
+    stored = { text: lineOrNode, isError, isDim };
+  } else {
+    stored = { html: lineOrNode.outerHTML };
+  }
+  s.lines.push(stored);
+  if (activeSessionId === id) {
+    const term = document.getElementById('agentTerminal');
+    const el = document.createElement('div');
+    if (stored.html) {
+      el.innerHTML = stored.html;
+    } else {
+      el.className = 'agent-line' + (isError ? ' err' : isDim ? ' dim' : '');
+      el.textContent = lineOrNode;
+    }
+    term.appendChild(el);
+    term.scrollTop = term.scrollHeight;
+  }
+}
+
+function updateSessionStatus(id, status) {
+  const s = consoleSessions.find(s => s.id === id);
+  if (!s) return;
+  s.status = status;
+  renderTabs();
+  saveSessions();
+}
+
+function renderTabs() {
+  const bar = document.getElementById('agentTabsBar');
+  if (!bar) return;
+  bar.innerHTML = consoleSessions.map(s => {
+    const isActive = s.id === activeSessionId;
+    const safe = s.title.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return `<div class="agent-tab${isActive ? ' active' : ''}" onclick="switchSession('${s.id}')">
+      <span class="tab-dot tab-dot-${s.status}"></span>
+      <span class="agent-tab-title" title="${safe}">${safe}</span>
+      <button class="agent-tab-close" onclick="event.stopPropagation();closeSession('${s.id}')" title="Закрыть вкладку">×</button>
+    </div>`;
+  }).join('');
+  const active = bar.querySelector('.agent-tab.active');
+  if (active) active.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+}
+
+function renderActiveSession() {
+  const term = document.getElementById('agentTerminal');
+  if (!term) return;
+  term.innerHTML = '';
+  const s = consoleSessions.find(s => s.id === activeSessionId);
+  if (!s) return;
+  for (const ln of s.lines) {
+    const el = document.createElement('div');
+    if (ln.html) {
+      el.innerHTML = ln.html;
+    } else {
+      el.className = 'agent-line' + (ln.isError ? ' err' : ln.isDim ? ' dim' : '');
+      el.textContent = ln.text;
+    }
+    term.appendChild(el);
+  }
+  term.scrollTop = term.scrollHeight;
+}
+
 async function setAgent(agent) {
   await fetch('/api/set-agent', {
     method: 'POST',
@@ -858,7 +1043,13 @@ async function cancelAgent() {
   setAgentRunning(false);
   updateQueueBadge(0);
   document.getElementById('agentPanelStatus').textContent = '⏹ сброшен';
-  appendTerminalLine('⏹ Состояние агента сброшено (очередь очищена)', false);
+  if (runningSessionId) {
+    appendToSession(runningSessionId, '⏹ Состояние агента сброшено (очередь очищена)', false);
+    updateSessionStatus(runningSessionId, 'error');
+    runningSessionId = null;
+  } else {
+    appendTerminalLine('⏹ Состояние агента сброшено (очередь очищена)', false);
+  }
 }
 
 async function clearAgentQueue() {
@@ -981,7 +1172,6 @@ async function runAgentTask(task, featureKey, filePath) {
   document.getElementById('agentPanel').classList.add('open');
   document.getElementById('termBtn').classList.add('term-active');
   if (!agentRunning) {
-    document.getElementById('agentTerminal').innerHTML = '';
     document.getElementById('agentPanelStatus').textContent = 'запускаю…';
   }
   await fetch('/api/run-agent', {
@@ -992,11 +1182,9 @@ async function runAgentTask(task, featureKey, filePath) {
 }
 
 async function runTests(featureKey, testType) {
-  document.getElementById('agentTerminal').innerHTML = '';
-  document.getElementById('agentPanelTitle').textContent = `🧪 ${testType} тесты`;
-  document.getElementById('agentPanelStatus').textContent = 'запускаю…';
   document.getElementById('agentPanel').classList.add('open');
   document.getElementById('termBtn').classList.add('term-active');
+  document.getElementById('agentPanelStatus').textContent = 'запускаю…';
   await fetch('/api/run-tests', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -1017,12 +1205,11 @@ function toggleAgentPanel() {
 }
 
 function appendTerminalLine(line, isError, isDim) {
-  const term = document.getElementById('agentTerminal');
-  const el = document.createElement('div');
-  el.className = 'agent-line' + (isError ? ' err' : isDim ? ' dim' : '');
-  el.textContent = line;
-  term.appendChild(el);
-  term.scrollTop = term.scrollHeight;
+  if (!activeSessionId) {
+    const id = createSession('Консоль', 'info');
+    activeSessionId = id;
+  }
+  appendToSession(activeSessionId, line, !!isError, !!isDim);
 }
 
 // ─── Color helpers ────────────────────────────────────────────────────────────
@@ -1989,36 +2176,50 @@ function connectSSE() {
     updateQueueBadge(queueLength);
     document.getElementById('agentPanel').classList.add('open');
     document.getElementById('termBtn').classList.add('term-active');
-    appendTerminalLine(`📋 В очереди (${queueLength}): ${title}`, false);
+    // Append queue notification to the currently running session (or active)
+    const targetId = runningSessionId || activeSessionId;
+    if (targetId) {
+      appendToSession(targetId, `📋 В очереди (${queueLength}): ${title}`, false);
+    }
   });
 
   es.addEventListener('agent-started', (e) => {
     setAgentRunning(true);
     const { title, queueLength = 0 } = JSON.parse(e.data);
     updateQueueBadge(queueLength);
+    const id = createSession(title);
+    runningSessionId = id;
     document.getElementById('agentPanelTitle').textContent = '🤖 ' + title;
     document.getElementById('agentPanelStatus').textContent = 'запускаю…';
-    document.getElementById('agentPanel').classList.add('open');
-    document.getElementById('termBtn').classList.add('term-active');
-    document.getElementById('agentTerminal').innerHTML = '';
   });
 
   es.addEventListener('agent-output', (e) => {
     const { line, isError, isDim } = JSON.parse(e.data);
-    appendTerminalLine(line, !!isError, !!isDim);
-    document.getElementById('agentPanelStatus').textContent = 'работает…';
+    if (runningSessionId) {
+      appendToSession(runningSessionId, line, !!isError, !!isDim);
+      if (activeSessionId === runningSessionId) {
+        document.getElementById('agentPanelStatus').textContent = 'работает…';
+      }
+    } else {
+      appendTerminalLine(line, !!isError, !!isDim);
+    }
   });
 
   es.addEventListener('agent-done', () => {
     setAgentRunning(false);
     updateQueueBadge(0);
-    document.getElementById('agentPanelStatus').textContent = '✅ готово';
+    if (runningSessionId) {
+      updateSessionStatus(runningSessionId, 'ok');
+      if (activeSessionId === runningSessionId) {
+        document.getElementById('agentPanelStatus').textContent = '✅ готово';
+      }
+      runningSessionId = null;
+    }
     renderContent();
   });
 
   es.addEventListener('agent-summary', (e) => {
     const { passed, failed, files } = JSON.parse(e.data);
-    const term = document.getElementById('agentTerminal');
     const allOk = failed === 0;
     const box = document.createElement('div');
     box.style.cssText = `
@@ -2035,28 +2236,46 @@ function connectSSE() {
       </div>
       ${files.map(f => `<div style="font-size:11px;color:var(--dim);margin-top:3px">📄 ${f}</div>`).join('')}
     `;
-    term.appendChild(box);
-    term.scrollTop = term.scrollHeight;
+    const targetId = runningSessionId || activeSessionId;
+    if (targetId) appendToSession(targetId, box);
   });
 
   es.addEventListener('agent-error', (e) => {
     setAgentRunning(false);
     const { message } = JSON.parse(e.data);
-    document.getElementById('agentPanelStatus').textContent = '❌ ошибка';
-    appendTerminalLine('❌ ' + (message || 'Ошибка агента'), true);
+    if (runningSessionId) {
+      appendToSession(runningSessionId, '❌ ' + (message || 'Ошибка агента'), true);
+      updateSessionStatus(runningSessionId, 'error');
+      if (activeSessionId === runningSessionId) {
+        document.getElementById('agentPanelStatus').textContent = '❌ ошибка';
+      }
+      runningSessionId = null;
+    } else {
+      document.getElementById('agentPanelStatus').textContent = '❌ ошибка';
+      appendTerminalLine('❌ ' + (message || 'Ошибка агента'), true);
+    }
   });
 
   es.addEventListener('tests-started', (e) => {
     const { testType, count } = JSON.parse(e.data);
+    const id = createSession(`🧪 ${testType}`);
+    runningSessionId = id;
+    appendToSession(id, `Запускаю ${testType} тесты (${count} файлов)…`);
     document.getElementById('agentPanelTitle').textContent = `🧪 ${testType} тесты`;
     document.getElementById('agentPanelStatus').textContent = `запускаю ${count} файлов…`;
   });
 
   es.addEventListener('tests-done', (e) => {
     const { passed, failed, testErrors } = JSON.parse(e.data);
-    document.getElementById('agentPanelStatus').textContent =
-      failed === 0 ? `✅ ${passed} passed` : `⚠️ ${passed} passed, ${failed} failed`;
-    // Apply testErrors directly from event — no separate fetch needed
+    const status = failed === 0 ? 'ok' : 'error';
+    if (runningSessionId) {
+      updateSessionStatus(runningSessionId, status);
+      if (activeSessionId === runningSessionId) {
+        document.getElementById('agentPanelStatus').textContent =
+          failed === 0 ? `✅ ${passed} passed` : `⚠️ ${passed} passed, ${failed} failed`;
+      }
+      runningSessionId = null;
+    }
     D.testErrors = testErrors || {};
     renderContent();
   });
@@ -2068,7 +2287,7 @@ function connectSSE() {
   };
 }
 
-init().then(() => connectSSE());
+init().then(() => { restoreSessions(); connectSSE(); });
 </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberadar",
-  "version": "0.3.37",
+  "version": "0.3.38",
   "description": "Live module map with test coverage for vibecoding projects",
   "main": "./dist/cli.js",
   "bin": {