orquesta-agent 0.2.64 → 0.2.65

package/dist/ui/public/app.js

@@ -32,6 +32,7 @@ function switchTab(tab) {
   document.getElementById('tab-' + tab)?.classList.add('active')
   document.querySelector(`[data-tab="${tab}"]`)?.classList.add('active')
   if (tab === 'health') loadHealth()
+  if (tab === 'logs') loadAllLogs()
 }
 
 // ── System Info ────────────────────────────────────────────────────
@@ -242,7 +243,7 @@ function connectLogStream(id) {
       const { logs } = JSON.parse(e.data)
       const el = document.getElementById('logs-' + id)
       if (el) {
-        el.textContent = logs.join('\n')
+        el.innerHTML = colorizeLogs(logs)
         el.scrollTop = el.scrollHeight
       }
     } catch {}
@@ -318,6 +319,86 @@ async function saveAgent(e) {
   } catch (e2) { alert(e2.message) }
 }
 
+// ── All Logs Tab ───────────────────────────────────────────────────
+
+let allLogsSources = new Map()
+
+function loadAllLogs() {
+  const grid = document.getElementById('all-logs-grid')
+  if (!grid) return
+
+  // Close existing streams
+  for (const es of allLogsSources.values()) es.close()
+  allLogsSources.clear()
+
+  if (agents.length === 0) {
+    grid.innerHTML = '<div class="empty-state"><p>No agents running</p></div>'
+    return
+  }
+
+  const runningAgents = agents.filter(a => a.status === 'running')
+  if (runningAgents.length === 0) {
+    grid.innerHTML = '<div class="empty-state"><p>No agents currently running</p></div>'
+    return
+  }
+
+  grid.innerHTML = runningAgents.map(a => {
+    const isDiscovered = a.id.startsWith('discovered-')
+    const name = isDiscovered ? a.workingDir.split('/').pop() || a.name : a.name
+    return `<div class="all-logs-card">
+      <div class="all-logs-card-header">
+        <span class="agent-name-pill"><span class="badge-dot pulse"></span>${esc(name)}</span>
+        <span style="font-size:11px;color:var(--text-500)">PID ${a.pid || '?'}</span>
+      </div>
+      <div class="log-viewer" id="all-logs-${a.id}"></div>
+    </div>`
+  }).join('')
+
+  // Connect SSE for each agent
+  for (const a of runningAgents) {
+    const es = new EventSource(`${API}/agents/${a.id}/logs/stream`)
+    es.onmessage = (e) => {
+      try {
+        const { logs } = JSON.parse(e.data)
+        const el = document.getElementById('all-logs-' + a.id)
+        if (el) {
+          el.innerHTML = colorizeLogs(logs)
+          el.scrollTop = el.scrollHeight
+        }
+      } catch {}
+    }
+    allLogsSources.set(a.id, es)
+  }
+}
+
+// ANSI color code → HTML span conversion
+function colorizeLogs(lines) {
+  return lines.map(line => {
+    let html = esc(line)
+    // Strip ANSI codes and apply CSS classes
+    html = html
+      // Colors
+      .replace(/\x1b\[32m|\x1b\[39m/g, '') // strip raw escapes from esc()
+      .replace(/&#x1b;\[32m/g, '<span class="ansi-green">')
+      .replace(/&#x1b;\[33m/g, '<span class="ansi-yellow">')
+      .replace(/&#x1b;\[34m/g, '<span class="ansi-blue">')
+      .replace(/&#x1b;\[31m/g, '<span class="ansi-red">')
+      .replace(/&#x1b;\[36m/g, '<span class="ansi-cyan">')
+      .replace(/&#x1b;\[35m/g, '<span class="ansi-magenta">')
+      .replace(/&#x1b;\[1m/g, '<span class="ansi-bold">')
+      .replace(/&#x1b;\[2m/g, '<span class="ansi-dim">')
+      .replace(/&#x1b;\[0?m/g, '</span>')
+      .replace(/&#x1b;\[39m/g, '</span>')
+    // Highlight patterns
+    if (html.includes('✓') || html.includes('✅')) html = `<span class="log-success">${html}</span>`
+    else if (html.includes('⚠') || html.includes('WARN')) html = `<span class="log-warn">${html}</span>`
+    else if (html.includes('✗') || html.includes('❌') || html.includes('ERROR')) html = `<span class="log-error">${html}</span>`
+    // Dim timestamps
+    html = html.replace(/\[(\d{2}:\d{2}:\d{2})\]/g, '<span class="log-timestamp">[$1]</span>')
+    return `<div class="log-line">${html}</div>`
+  }).join('')
+}
+
 // ── Fullscreen Logs ────────────────────────────────────────────────
 
 let fullscreenLogId = null
@@ -336,7 +417,7 @@ function openFullscreenLogs(id, name) {
       const { logs } = JSON.parse(e.data)
       const el = document.getElementById('logs-fullscreen-content')
       if (el) {
-        el.textContent = logs.join('\n')
+        el.innerHTML = colorizeLogs(logs)
         el.scrollTop = el.scrollHeight
       }
     } catch {}

package/dist/ui/public/index.html

@@ -26,6 +26,10 @@
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M6 14h12"/></svg>
           Agents
         </button>
+        <button class="nav-item" data-tab="logs" onclick="switchTab('logs')">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+          All Logs
+        </button>
         <button class="nav-item" data-tab="health" onclick="switchTab('health')">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
           System
@@ -74,6 +78,15 @@
         <div id="agents-container"></div>
       </div>
 
+      <!-- All Logs Tab -->
+      <div id="tab-logs" class="tab-content">
+        <div class="page-header">
+          <h1>All Logs</h1>
+          <p class="page-subtitle">Real-time logs from all agents</p>
+        </div>
+        <div id="all-logs-grid" class="all-logs-grid"></div>
+      </div>
+
       <!-- Health Tab -->
       <div id="tab-health" class="tab-content">
         <div class="page-header">

package/dist/ui/public/style.css

@@ -619,6 +619,66 @@ body {
   border-top: 1px solid var(--bg-700);
 }
 
+/* ── All Logs Grid ──────────────────────────────────── */
+.all-logs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 12px;
+}
+
+.all-logs-card {
+  background: rgba(24,24,27,0.5);
+  border: 1px solid var(--bg-700);
+  border-radius: 12px;
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.all-logs-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: var(--bg-900);
+  border-bottom: 1px solid var(--bg-700);
+}
+
+.all-logs-card-header .agent-name-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.all-logs-card-header .agent-name-pill .badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+}
+
+.all-logs-card .log-viewer {
+  height: 350px;
+  border-radius: 0;
+}
+
+/* ── Log Colors (ANSI) ──────────────────────────────── */
+.log-viewer .log-line { margin: 0; }
+.log-viewer .ansi-green { color: #4ade80; }
+.log-viewer .ansi-red { color: #f87171; }
+.log-viewer .ansi-yellow { color: #facc15; }
+.log-viewer .ansi-blue { color: #60a5fa; }
+.log-viewer .ansi-cyan { color: #22d3ee; }
+.log-viewer .ansi-magenta { color: #c084fc; }
+.log-viewer .ansi-bold { font-weight: 700; }
+.log-viewer .ansi-dim { opacity: 0.6; }
+.log-viewer .log-timestamp { color: #52525b; }
+.log-viewer .log-success { color: #4ade80; }
+.log-viewer .log-warn { color: #facc15; }
+.log-viewer .log-error { color: #f87171; }
+.log-viewer .log-info { color: #60a5fa; }
+
 /* ── Fullscreen Logs ────────────────────────────────── */
 .logs-fullscreen {
   display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orquesta-agent",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "description": "Local agent for Orquesta - connects your VM to the Orquesta dashboard",
   "type": "module",
   "main": "dist/index.js",