orquesta-agent 0.2.56 → 0.2.58

package/dist/ui/public/app.js

@@ -1,322 +1,248 @@
-// Orquesta Agent Manager — Frontend
+// Orquesta Agent Manager Frontend
 
-const API = '/api'
+const API_BASE = '/api'
 let agents = []
 let systemInfo = null
 let editingAgentId = null
-let openLogsId = null
-let logsIntervals = new Map()
-
-// ── Icons (inline SVG) ─────────────────────────────────────────────
-
-const ICONS = {
-  play: '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21"/></svg>',
-  stop: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>',
-  restart: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>',
-  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"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>',
-  edit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
-  trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
-  link: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
-  chevDown: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>',
-  chevUp: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>',
-}
-
-// ── System Health ──────────────────────────────────────────────────
-
-async function loadHealth() {
-  try {
-    const res = await fetch(`${API}/system/health`)
-    if (!res.ok) return
-    const h = await res.json()
-
-    // CPU
-    const cpuPct = h.cpu.usage
-    document.getElementById('cpu-value').innerHTML = `${cpuPct}<small>%</small>`
-    setBar('cpu-bar', cpuPct)
-    document.getElementById('cpu-detail').textContent = `${h.cpu.count} cores`
-
-    // Memory
-    const memPct = Math.round((h.memory.used / h.memory.total) * 100)
-    document.getElementById('mem-value').innerHTML = `${memPct}<small>%</small>`
-    setBar('mem-bar', memPct)
-    document.getElementById('mem-detail').textContent = `${fmtBytes(h.memory.used)} / ${fmtBytes(h.memory.total)}`
-
-    // Disk
-    if (h.disk.total > 0) {
-      const diskPct = Math.round((h.disk.used / h.disk.total) * 100)
-      document.getElementById('disk-value').innerHTML = `${diskPct}<small>%</small>`
-      setBar('disk-bar', diskPct)
-      document.getElementById('disk-detail').textContent = `${fmtBytes(h.disk.free)} free of ${fmtBytes(h.disk.total)}`
-    } else {
-      document.getElementById('disk-value').innerHTML = `N/A`
-    }
-
-    // Uptime
-    document.getElementById('uptime-value').textContent = fmtUptime(h.uptime * 1000)
-    document.getElementById('hostname-detail').textContent = h.hostname
-  } catch { /* ignore */ }
-}
-
-function setBar(id, pct) {
-  const el = document.getElementById(id)
-  el.style.width = `${Math.min(pct, 100)}%`
-  el.className = 'health-bar-fill ' + (pct > 90 ? 'red' : pct > 70 ? 'yellow' : 'green')
-}
-
-// ── System Info ────────────────────────────────────────────────────
+let logsAgentId = null
+let logsInterval = null
 
+// Load system info
 async function loadSystemInfo() {
   try {
-    const res = await fetch(`${API}/system`)
+    const res = await fetch(`${API_BASE}/system`)
     systemInfo = await res.json()
 
+    // Update UI
     document.getElementById('version').textContent = `v${systemInfo.version}`
-
-    // Claude CLI mode
-    const claudeCard = document.getElementById('mode-claude')
-    const claudeDot = document.getElementById('claude-dot')
-    const claudeLabel = document.getElementById('claude-label')
-    if (systemInfo.hasClaudeCli && systemInfo.claudeAuth?.authenticated) {
-      claudeDot.className = 'dot on'
-      claudeLabel.textContent = `Ready (${systemInfo.claudeAuth.method})`
-      claudeCard.classList.add('active')
-    } else if (systemInfo.hasClaudeCli) {
-      claudeDot.className = 'dot warn'
-      claudeLabel.textContent = 'Installed but not authenticated'
+    document.getElementById('platform').textContent = systemInfo.platform
+
+    // Claude CLI status
+    const claudeStatus = document.getElementById('claude-status')
+    if (systemInfo.hasClaudeCli) {
+      if (systemInfo.claudeAuth?.authenticated) {
+        claudeStatus.innerHTML = `<span class="badge success">✓ ${systemInfo.claudeAuth.method}</span>`
+      } else {
+        claudeStatus.innerHTML = `<span class="badge warning">⚠ Not authenticated</span>`
+      }
     } else {
-      claudeDot.className = 'dot off'
-      claudeLabel.textContent = 'Not installed'
+      claudeStatus.innerHTML = `<span class="badge danger">✗ Not installed</span>`
     }
 
-    // Orquesta CLI mode (Batuta proxy)
-    const orqCard = document.getElementById('mode-orquesta')
-    const orqDot = document.getElementById('orquesta-dot')
-    const orqLabel = document.getElementById('orquesta-label')
+    // Orquesta CLI status
+    const orquestaStatus = document.getElementById('orquesta-status')
     if (systemInfo.hasOrquestaCli) {
-      orqDot.className = 'dot on'
-      orqLabel.textContent = 'Ready (Claude, GPT-4o, DeepSeek, Gemini...)'
-      orqCard.classList.add('active')
+      orquestaStatus.innerHTML = `<span class="badge success">✓ Installed</span>`
     } else {
-      orqDot.className = 'dot off'
-      orqLabel.textContent = 'Not installed — npm i -g orquesta-cli'
+      orquestaStatus.innerHTML = `<span class="badge danger">✗ Not installed</span>`
     }
-
-    // Node
-    document.getElementById('node-dot').className = 'dot on'
-    document.getElementById('node-label').textContent = systemInfo.nodeVersion
-  } catch { /* ignore */ }
+  } catch (err) {
+    console.error('Failed to load system info:', err)
+  }
 }
 
-// ── Agents ─────────────────────────────────────────────────────────
-
+// Load agents
 async function loadAgents() {
   try {
-    const res = await fetch(`${API}/agents`)
+    const res = await fetch(`${API_BASE}/agents`)
     agents = await res.json()
     renderAgents()
-  } catch { /* ignore */ }
+  } catch (err) {
+    console.error('Failed to load agents:', err)
+  }
 }
 
+// Render agents list
 function renderAgents() {
   const container = document.getElementById('agents-container')
   const emptyState = document.getElementById('empty-state')
-  const countEl = document.getElementById('agent-count')
 
   if (agents.length === 0) {
-    emptyState.style.display = ''
+    emptyState.style.display = 'block'
     container.innerHTML = ''
     container.appendChild(emptyState)
-    countEl.textContent = ''
     return
   }
 
   emptyState.style.display = 'none'
-  const running = agents.filter(a => a.status === 'running').length
-  countEl.textContent = `(${running}/${agents.length} running)`
-
-  container.innerHTML = agents.map(a => {
-    const isLogsOpen = openLogsId === a.id
-    return `
-    <div class="agent-card ${a.status}" id="card-${a.id}">
-      <div class="agent-card-header">
-        <div class="agent-card-left">
-          <span class="agent-status-dot ${a.status}"></span>
-          <div>
-            <div class="agent-name">${esc(a.name)}</div>
-            <a class="agent-project-link" href="https://orquesta.live/dashboard/projects" target="_blank" rel="noopener">
-              ${ICONS.link} Open in Dashboard
-            </a>
-          </div>
-        </div>
-        <div class="agent-card-right">
-          ${a.status === 'running' ? `
-            <button class="btn btn-sm" onclick="stopAgent('${a.id}')" title="Stop">${ICONS.stop} <span class="btn-label">Stop</span></button>
-            <button class="btn btn-sm" onclick="restartAgent('${a.id}')" title="Restart">${ICONS.restart} <span class="btn-label">Restart</span></button>
-          ` : `
-            <button class="btn btn-sm btn-success" onclick="startAgent('${a.id}')" title="Start">${ICONS.play} <span class="btn-label">Start</span></button>
-          `}
-          <button class="btn btn-sm" onclick="toggleLogs('${a.id}')" title="Logs">${isLogsOpen ? ICONS.chevUp : ICONS.logs}</button>
-          <button class="btn btn-sm" onclick="editAgent('${a.id}')" title="Edit">${ICONS.edit}</button>
-          <button class="btn btn-sm btn-danger" onclick="deleteAgent('${a.id}', '${esc(a.name)}')" title="Delete">${ICONS.trash}</button>
+  container.innerHTML = agents.map(agent => `
+    <div class="agent-card">
+      <div class="agent-header">
+        <div class="agent-title">
+          <span class="status-dot ${agent.status}"></span>
+          <h3>${escapeHtml(agent.name)}</h3>
         </div>
+        <span class="badge ${agent.status === 'running' ? 'success' : agent.status === 'error' ? 'danger' : ''}">${agent.status.toUpperCase()}</span>
       </div>
 
-      <div class="agent-card-meta">
-        <div class="meta-item"><span class="meta-label">Dir</span><span class="meta-value">${esc(a.workingDir)}</span></div>
-        <div class="meta-item"><span class="meta-label">CLI</span><span class="meta-value">${a.cliPreference}</span></div>
-        <div class="meta-item"><span class="meta-label">Mode</span><span class="meta-value">${a.permissionMode}</span></div>
-        ${a.pid ? `<div class="meta-item"><span class="meta-label">PID</span><span class="meta-value">${a.pid}</span></div>` : ''}
-        ${a.uptime ? `<div class="meta-item"><span class="meta-label">Uptime</span><span class="meta-value">${fmtUptime(a.uptime)}</span></div>` : ''}
-        ${a.error ? `<div class="meta-item"><span class="meta-label" style="color:var(--red)">Error</span><span class="meta-value" style="color:var(--red)">${esc(a.error)}</span></div>` : ''}
-      </div>
-
-      <div class="agent-logs ${isLogsOpen ? 'open' : ''}" id="logs-${a.id}">
-        <div class="agent-logs-header">
-          <span>Live Logs</span>
-          <div style="display:flex;gap:6px">
-            <button class="btn btn-sm" onclick="refreshLogs('${a.id}')">Refresh</button>
-            <button class="btn btn-sm btn-danger" onclick="clearLogs('${a.id}')">Clear</button>
-          </div>
+      <div class="agent-info">
+        <div class="info-row">
+          <span class="label">Working Dir:</span>
+          <span class="value">${escapeHtml(agent.workingDir)}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">CLI:</span>
+          <span class="value">${agent.cliPreference}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">Permission:</span>
+          <span class="value">${agent.permissionMode}</span>
+        </div>
+        ${agent.pid ? `
+        <div class="info-row">
+          <span class="label">PID:</span>
+          <span class="value">${agent.pid}</span>
+        </div>
+        ` : ''}
+        ${agent.uptime ? `
+        <div class="info-row">
+          <span class="label">Uptime:</span>
+          <span class="value">${formatUptime(agent.uptime)}</span>
+        </div>
+        ` : ''}
+        ${agent.error ? `
+        <div class="info-row">
+          <span class="label">Error:</span>
+          <span class="value" style="color: #c62828;">${escapeHtml(agent.error)}</span>
         </div>
-        <pre class="logs-content" id="logs-content-${a.id}"></pre>
+        ` : ''}
       </div>
-    </div>`
-  }).join('')
 
-  // Restore open logs
-  if (openLogsId) {
-    refreshLogs(openLogsId)
-  }
+      <div class="agent-actions">
+        ${agent.status === 'running' ? `
+          <button class="btn btn-sm btn-secondary" onclick="stopAgent('${agent.id}')">
+            <span class="icon">⏹</span> Stop
+          </button>
+          <button class="btn btn-sm btn-secondary" onclick="restartAgent('${agent.id}')">
+            <span class="icon">🔄</span> Restart
+          </button>
+        ` : `
+          <button class="btn btn-sm btn-success" onclick="startAgent('${agent.id}')">
+            <span class="icon">▶️</span> Start
+          </button>
+        `}
+        <button class="btn btn-sm btn-secondary" onclick="viewLogs('${agent.id}', '${escapeHtml(agent.name)}')">
+          <span class="icon">📄</span> Logs
+        </button>
+        <button class="btn btn-sm btn-secondary" onclick="editAgent('${agent.id}')">
+          <span class="icon">✏️</span> Edit
+        </button>
+        <button class="btn btn-sm btn-danger" onclick="deleteAgent('${agent.id}', '${escapeHtml(agent.name)}')">
+          <span class="icon">🗑️</span> Delete
+        </button>
+      </div>
+    </div>
+  `).join('')
 }
 
-// ── Agent Actions ──────────────────────────────────────────────────
-
+// Start agent
 async function startAgent(id) {
   try {
-    const res = await fetch(`${API}/agents/${id}/start`, { method: 'POST' })
-    if (!res.ok) { const d = await res.json(); alert(d.error); return }
+    const res = await fetch(`${API_BASE}/agents/${id}/start`, { method: 'POST' })
+    const data = await res.json()
+
+    if (!res.ok) {
+      alert(`Failed to start agent: ${data.error}`)
+      return
+    }
+
     setTimeout(loadAgents, 1000)
-  } catch (e) { alert(e.message) }
+  } catch (err) {
+    alert(`Failed to start agent: ${err.message}`)
+  }
 }
 
+// Stop agent
 async function stopAgent(id) {
   try {
-    const res = await fetch(`${API}/agents/${id}/stop`, { method: 'POST' })
-    if (!res.ok) { const d = await res.json(); alert(d.error); return }
+    const res = await fetch(`${API_BASE}/agents/${id}/stop`, { method: 'POST' })
+    const data = await res.json()
+
+    if (!res.ok) {
+      alert(`Failed to stop agent: ${data.error}`)
+      return
+    }
+
     setTimeout(loadAgents, 1000)
-  } catch (e) { alert(e.message) }
+  } catch (err) {
+    alert(`Failed to stop agent: ${err.message}`)
+  }
 }
 
+// Restart agent
 async function restartAgent(id) {
   try {
-    const res = await fetch(`${API}/agents/${id}/restart`, { method: 'POST' })
-    if (!res.ok) { const d = await res.json(); alert(d.error); return }
-    setTimeout(loadAgents, 2000)
-  } catch (e) { alert(e.message) }
-}
-
-async function deleteAgent(id, name) {
-  if (!confirm(`Delete agent "${name}"? This will stop it and remove all configuration.`)) return
-  try {
-    const res = await fetch(`${API}/agents/${id}`, { method: 'DELETE' })
-    if (!res.ok) { const d = await res.json(); alert(d.error); return }
-    if (openLogsId === id) openLogsId = null
-    loadAgents()
-  } catch (e) { alert(e.message) }
-}
+    const res = await fetch(`${API_BASE}/agents/${id}/restart`, { method: 'POST' })
+    const data = await res.json()
 
-// ── Inline Logs ────────────────────────────────────────────────────
-
-function toggleLogs(id) {
-  if (openLogsId === id) {
-    openLogsId = null
-    const el = document.getElementById(`logs-${id}`)
-    if (el) el.classList.remove('open')
-    stopLogsPolling(id)
-  } else {
-    // Close previous
-    if (openLogsId) {
-      const prev = document.getElementById(`logs-${openLogsId}`)
-      if (prev) prev.classList.remove('open')
-      stopLogsPolling(openLogsId)
+    if (!res.ok) {
+      alert(`Failed to restart agent: ${data.error}`)
+      return
     }
-    openLogsId = id
-    const el = document.getElementById(`logs-${id}`)
-    if (el) el.classList.add('open')
-    refreshLogs(id)
-    startLogsPolling(id)
-  }
-  // Re-render buttons (toggle icon)
-  renderAgents()
-}
 
-function startLogsPolling(id) {
-  stopLogsPolling(id)
-  const interval = setInterval(() => refreshLogs(id), 2000)
-  logsIntervals.set(id, interval)
+    setTimeout(loadAgents, 2000)
+  } catch (err) {
+    alert(`Failed to restart agent: ${err.message}`)
+  }
 }
 
-function stopLogsPolling(id) {
-  const interval = logsIntervals.get(id)
-  if (interval) {
-    clearInterval(interval)
-    logsIntervals.delete(id)
+// Delete agent
+async function deleteAgent(id, name) {
+  if (!confirm(`Are you sure you want to delete agent "${name}"? This will stop the agent and remove all configuration.`)) {
+    return
   }
-}
 
-async function refreshLogs(id) {
   try {
-    const res = await fetch(`${API}/agents/${id}/logs?lines=200`)
+    const res = await fetch(`${API_BASE}/agents/${id}`, { method: 'DELETE' })
     const data = await res.json()
-    const el = document.getElementById(`logs-content-${id}`)
-    if (el) {
-      el.textContent = data.logs.join('\n') || 'No logs yet'
-      el.scrollTop = el.scrollHeight
+
+    if (!res.ok) {
+      alert(`Failed to delete agent: ${data.error}`)
+      return
     }
-  } catch { /* ignore */ }
-}
 
-async function clearLogs(id) {
-  if (!confirm('Clear all logs for this agent?')) return
-  try {
-    await fetch(`${API}/agents/${id}/logs`, { method: 'DELETE' })
-    refreshLogs(id)
-  } catch { /* ignore */ }
+    loadAgents()
+  } catch (err) {
+    alert(`Failed to delete agent: ${err.message}`)
+  }
 }
 
-// ── Modal ──────────────────────────────────────────────────────────
-
+// Open add agent modal
 function openAddAgentModal() {
   editingAgentId = null
-  document.getElementById('modal-title').textContent = 'Add Agent'
+  document.getElementById('modal-title').textContent = 'Add New Agent'
   document.getElementById('agent-form').reset()
-  document.getElementById('agent-auto-pull').checked = true
   document.getElementById('agent-modal').classList.add('active')
 }
 
+// Open edit agent modal
 function editAgent(id) {
-  const a = agents.find(x => x.id === id)
-  if (!a) return
+  const agent = agents.find(a => a.id === id)
+  if (!agent) return
+
   editingAgentId = id
   document.getElementById('modal-title').textContent = 'Edit Agent'
-  document.getElementById('agent-name').value = a.name
-  document.getElementById('agent-working-dir').value = a.workingDir
-  document.getElementById('agent-token').value = a.token
-  document.getElementById('agent-cli-preference').value = a.cliPreference
-  document.getElementById('agent-permission-mode').value = a.permissionMode
-  document.getElementById('agent-auto-start').checked = a.autoStart
-  document.getElementById('agent-auto-pull').checked = a.autoPull
+  document.getElementById('agent-name').value = agent.name
+  document.getElementById('agent-working-dir').value = agent.workingDir
+  document.getElementById('agent-token').value = agent.token
+  document.getElementById('agent-cli-preference').value = agent.cliPreference
+  document.getElementById('agent-permission-mode').value = agent.permissionMode
+  document.getElementById('agent-auto-start').checked = agent.autoStart
+  document.getElementById('agent-auto-pull').checked = agent.autoPull
   document.getElementById('agent-modal').classList.add('active')
 }
 
+// Close agent modal
 function closeAgentModal() {
   document.getElementById('agent-modal').classList.remove('active')
   editingAgentId = null
 }
 
+// Save agent
 async function saveAgent(event) {
   event.preventDefault()
-  const body = {
+
+  const formData = {
     name: document.getElementById('agent-name').value,
     workingDir: document.getElementById('agent-working-dir').value,
     token: document.getElementById('agent-token').value,
@@ -327,68 +253,159 @@ async function saveAgent(event) {
   }
 
   try {
-    const url = editingAgentId ? `${API}/agents/${editingAgentId}` : `${API}/agents`
-    const method = editingAgentId ? 'PUT' : 'POST'
-    const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
-    if (!res.ok) { const d = await res.json(); alert(d.error); return }
+    let res
+    if (editingAgentId) {
+      // Update existing agent
+      res = await fetch(`${API_BASE}/agents/${editingAgentId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      })
+    } else {
+      // Create new agent
+      res = await fetch(`${API_BASE}/agents`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      })
+    }
+
+    const data = await res.json()
+
+    if (!res.ok) {
+      alert(`Failed to save agent: ${data.error}`)
+      return
+    }
+
     closeAgentModal()
     loadAgents()
-  } catch (e) { alert(e.message) }
+  } catch (err) {
+    alert(`Failed to save agent: ${err.message}`)
+  }
+}
+
+// View logs
+function viewLogs(id, name) {
+  logsAgentId = id
+  document.getElementById('logs-title').textContent = `Logs: ${name}`
+  document.getElementById('logs-modal').classList.add('active')
+  loadLogs()
+
+  // Auto-refresh logs every 2 seconds
+  logsInterval = setInterval(() => {
+    if (document.getElementById('logs-autoscroll').checked) {
+      loadLogs()
+    }
+  }, 2000)
 }
 
-// ── Utilities ──────────────────────────────────────────────────────
+// Load logs
+async function loadLogs() {
+  if (!logsAgentId) return
 
-function esc(text) {
-  const d = document.createElement('div')
-  d.textContent = text || ''
-  return d.innerHTML
+  try {
+    const res = await fetch(`${API_BASE}/agents/${logsAgentId}/logs?lines=200`)
+    const data = await res.json()
+
+    const logsContent = document.getElementById('logs-content')
+    logsContent.textContent = data.logs.join('\n')
+
+    // Auto-scroll to bottom if enabled
+    if (document.getElementById('logs-autoscroll').checked) {
+      logsContent.scrollTop = logsContent.scrollHeight
+    }
+  } catch (err) {
+    console.error('Failed to load logs:', err)
+  }
 }
 
-function fmtUptime(ms) {
-  const s = Math.floor(ms / 1000)
-  const m = Math.floor(s / 60)
-  const h = Math.floor(m / 60)
-  const d = Math.floor(h / 24)
-  if (d > 0) return `${d}d ${h % 24}h`
-  if (h > 0) return `${h}h ${m % 60}m`
-  if (m > 0) return `${m}m ${s % 60}s`
-  return `${s}s`
+// Clear logs
+async function clearLogs() {
+  if (!logsAgentId) return
+
+  if (!confirm('Are you sure you want to clear all logs for this agent?')) {
+    return
+  }
+
+  try {
+    const res = await fetch(`${API_BASE}/agents/${logsAgentId}/logs`, { method: 'DELETE' })
+    const data = await res.json()
+
+    if (!res.ok) {
+      alert(`Failed to clear logs: ${data.error}`)
+      return
+    }
+
+    loadLogs()
+  } catch (err) {
+    alert(`Failed to clear logs: ${err.message}`)
+  }
 }
 
-function fmtBytes(bytes) {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`
+// Close logs modal
+function closeLogsModal() {
+  document.getElementById('logs-modal').classList.remove('active')
+  if (logsInterval) {
+    clearInterval(logsInterval)
+    logsInterval = null
+  }
+  logsAgentId = null
 }
 
-// ── Init ───────────────────────────────────────────────────────────
+// Utility: Escape HTML
+function escapeHtml(text) {
+  const div = document.createElement('div')
+  div.textContent = text
+  return div.innerHTML
+}
 
+// Utility: Format uptime
+function formatUptime(ms) {
+  const seconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (days > 0) return `${days}d ${hours % 24}h`
+  if (hours > 0) return `${hours}h ${minutes % 60}m`
+  if (minutes > 0) return `${minutes}m ${seconds % 60}s`
+  return `${seconds}s`
+}
+
+// Event listeners
 document.addEventListener('DOMContentLoaded', () => {
   loadSystemInfo()
-  loadHealth()
   loadAgents()
 
+  // Refresh button
   document.getElementById('refresh-btn').addEventListener('click', () => {
-    const icon = document.getElementById('refresh-icon')
-    icon.classList.add('spinning')
-    Promise.all([loadSystemInfo(), loadHealth(), loadAgents()]).then(() => {
-      setTimeout(() => icon.classList.remove('spinning'), 500)
+    document.getElementById('refresh-btn').querySelector('.icon').classList.add('loading')
+    Promise.all([loadSystemInfo(), loadAgents()]).then(() => {
+      document.getElementById('refresh-btn').querySelector('.icon').classList.remove('loading')
     })
   })
 
+  // Add agent button
   document.getElementById('add-agent-btn').addEventListener('click', openAddAgentModal)
+
+  // Agent form submit
   document.getElementById('agent-form').addEventListener('submit', saveAgent)
 
-  // Auto-refresh
+  // Logs controls
+  document.getElementById('logs-refresh').addEventListener('click', loadLogs)
+  document.getElementById('logs-clear').addEventListener('click', clearLogs)
+
+  // Auto-refresh agents every 5 seconds
   setInterval(loadAgents, 5000)
-  setInterval(loadHealth, 10000)
 })
 
 // Close modals on background click
 window.addEventListener('click', (e) => {
   if (e.target.classList.contains('modal')) {
     e.target.classList.remove('active')
+    if (e.target.id === 'logs-modal' && logsInterval) {
+      clearInterval(logsInterval)
+      logsInterval = null
+    }
   }
 })