orquesta-agent 0.2.58 → 0.2.60

package/dist/ui/public/app.js

@@ -1,411 +1,352 @@
-// Orquesta Agent Manager Frontend
+// Orquesta Agent Manager
 
-const API_BASE = '/api'
+const API = '/api'
 let agents = []
 let systemInfo = null
 let editingAgentId = null
-let logsAgentId = null
-let logsInterval = null
+let openAgentId = null
+let openPanel = 'logs'
+let logSources = new Map() // agentId → EventSource
+
+// ── SVG Icons ──────────────────────────────────────────────────────
+
+const I = {
+  server: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1"/><circle cx="6" cy="18" r="1"/></svg>',
+  play: '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 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"/></svg>',
+  terminal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
+  file: '<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>',
+  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>',
+  x: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+  clear: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',
+}
+
+// ── Tab switching ──────────────────────────────────────────────────
+
+function switchTab(tab) {
+  document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'))
+  document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'))
+  document.getElementById('tab-' + tab)?.classList.add('active')
+  document.querySelector(`[data-tab="${tab}"]`)?.classList.add('active')
+  if (tab === 'health') loadHealth()
+}
+
+// ── System Info ────────────────────────────────────────────────────
 
-// Load system info
 async function loadSystemInfo() {
   try {
-    const res = await fetch(`${API_BASE}/system`)
+    const res = await fetch(`${API}/system`)
     systemInfo = await res.json()
-
-    // Update UI
     document.getElementById('version').textContent = `v${systemInfo.version}`
-    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>`
-      }
+
+    // Claude
+    const cd = document.getElementById('claude-dot')
+    const cs = document.getElementById('claude-status')
+    if (systemInfo.hasClaudeCli && systemInfo.claudeAuth?.authenticated) {
+      cd.className = 'cli-dot on'; cs.textContent = systemInfo.claudeAuth.method
+    } else if (systemInfo.hasClaudeCli) {
+      cd.className = 'cli-dot warn'; cs.textContent = 'no auth'
     } else {
-      claudeStatus.innerHTML = `<span class="badge danger">✗ Not installed</span>`
+      cd.className = 'cli-dot'; cs.textContent = 'missing'
     }
 
-    // Orquesta CLI status
-    const orquestaStatus = document.getElementById('orquesta-status')
+    // Orquesta
+    const od = document.getElementById('orquesta-dot')
+    const os2 = document.getElementById('orquesta-status')
     if (systemInfo.hasOrquestaCli) {
-      orquestaStatus.innerHTML = `<span class="badge success">✓ Installed</span>`
+      od.className = 'cli-dot on'; os2.textContent = 'ready'
     } else {
-      orquestaStatus.innerHTML = `<span class="badge danger">✗ Not installed</span>`
+      od.className = 'cli-dot'; os2.textContent = 'missing'
     }
-  } catch (err) {
-    console.error('Failed to load system info:', err)
-  }
+
+    document.getElementById('node-status').textContent = systemInfo.nodeVersion
+  } catch {}
 }
 
-// Load agents
+// ── Health ─────────────────────────────────────────────────────────
+
+async function loadHealth() {
+  try {
+    const res = await fetch(`${API}/system/health`)
+    if (!res.ok) return
+    const h = await res.json()
+
+    const cpuPct = h.cpu.usage
+    document.getElementById('cpu-value').textContent = cpuPct + '%'
+    setBar('cpu-bar', cpuPct)
+    document.getElementById('cpu-detail').textContent = `${h.cpu.count} cores`
+
+    const memPct = Math.round((h.memory.used / h.memory.total) * 100)
+    document.getElementById('mem-value').textContent = memPct + '%'
+    setBar('mem-bar', memPct)
+    document.getElementById('mem-detail').textContent = `${fmtBytes(h.memory.used)} / ${fmtBytes(h.memory.total)}`
+
+    if (h.disk.total > 0) {
+      const diskPct = Math.round((h.disk.used / h.disk.total) * 100)
+      document.getElementById('disk-value').textContent = diskPct + '%'
+      setBar('disk-bar', diskPct)
+      document.getElementById('disk-detail').textContent = `${fmtBytes(h.disk.free)} free`
+    }
+
+    document.getElementById('uptime-value').textContent = fmtUptime(h.uptime * 1000)
+    document.getElementById('hostname-detail').textContent = h.hostname
+  } catch {}
+}
+
+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' : '')
+}
+
+// ── Agents ─────────────────────────────────────────────────────────
+
 async function loadAgents() {
   try {
-    const res = await fetch(`${API_BASE}/agents`)
+    const res = await fetch(`${API}/agents`)
     agents = await res.json()
     renderAgents()
-  } catch (err) {
-    console.error('Failed to load agents:', err)
-  }
+  } catch {}
 }
 
-// Render agents list
 function renderAgents() {
-  const container = document.getElementById('agents-container')
-  const emptyState = document.getElementById('empty-state')
+  const c = document.getElementById('agents-container')
+  const countEl = document.getElementById('agent-count')
 
   if (agents.length === 0) {
-    emptyState.style.display = 'block'
-    container.innerHTML = ''
-    container.appendChild(emptyState)
+    countEl.textContent = 'No agents running'
+    c.innerHTML = `<div class="empty-state">
+      ${I.server}
+      <h3>No agents configured</h3>
+      <p>Add an agent to connect your project to Orquesta</p>
+      <button class="btn btn-primary" onclick="openAddAgentModal()">Add Agent</button>
+    </div>`
     return
   }
 
-  emptyState.style.display = 'none'
-  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-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>
+  const running = agents.filter(a => a.status === 'running').length
+  countEl.textContent = `${running} of ${agents.length} online`
+
+  c.innerHTML = '<div class="agents-grid">' + agents.map(a => {
+    const isOpen = openAgentId === a.id
+    const isDiscovered = a.id.startsWith('discovered-')
+    const displayName = isDiscovered ? a.workingDir.split('/').pop() || a.name : a.name
+
+    return `<div class="agent-card" id="card-${a.id}">
+      <div class="agent-card-header">
+        <div class="agent-icon ${a.status}">${I.server}</div>
+        <div class="agent-info">
+          <div class="agent-name-row">
+            <span class="agent-name">${esc(displayName)}</span>
+            <span class="agent-badge ${a.status}"><span class="badge-dot ${a.status === 'running' ? 'pulse' : ''}"></span>${a.status}</span>
+          </div>
+          <div class="agent-meta">
+            <span>${esc(a.workingDir)}</span>
+            ${a.pid ? `<span>PID <span class="meta-val">${a.pid}</span></span>` : ''}
+            ${a.uptime ? `<span>${fmtUptime(a.uptime)}</span>` : ''}
+          </div>
         </div>
-        ${agent.pid ? `
-        <div class="info-row">
-          <span class="label">PID:</span>
-          <span class="value">${agent.pid}</span>
+        <div class="agent-actions">
+          ${a.status === 'running' ? `
+            <button class="btn btn-sm" onclick="stopAgent('${a.id}')" title="Stop">${I.stop}</button>
+            <button class="btn btn-sm" onclick="restartAgent('${a.id}')" title="Restart">${I.restart}</button>
+          ` : `
+            <button class="btn btn-sm btn-primary" onclick="startAgent('${a.id}')" title="Start">${I.play}</button>
+          `}
+          <button class="btn btn-sm ${isOpen ? 'active' : ''}" onclick="togglePanel('${a.id}')" title="Logs">${I.terminal}</button>
+          ${!isDiscovered ? `
+            <button class="btn btn-icon btn-sm" onclick="editAgent('${a.id}')" title="Edit">${I.edit}</button>
+            <button class="btn btn-icon btn-sm btn-danger" onclick="deleteAgent('${a.id}','${esc(displayName)}')" title="Delete">${I.trash}</button>
+          ` : ''}
         </div>
-        ` : ''}
-        ${agent.uptime ? `
-        <div class="info-row">
-          <span class="label">Uptime:</span>
-          <span class="value">${formatUptime(agent.uptime)}</span>
+      </div>
+      <div class="agent-tabs ${isOpen ? 'open' : ''}" id="tabs-${a.id}">
+        <div class="agent-tabs-bar">
+          <button class="agent-tab active" onclick="switchPanel('${a.id}','logs')">Logs</button>
+          <div class="agent-tabs-actions">
+            <button class="btn btn-sm btn-icon" onclick="clearLogs('${a.id}')" title="Clear">${I.clear}</button>
+            <button class="btn btn-sm btn-icon" onclick="togglePanel('${a.id}')" title="Close">${I.x}</button>
+          </div>
         </div>
-        ` : ''}
-        ${agent.error ? `
-        <div class="info-row">
-          <span class="label">Error:</span>
-          <span class="value" style="color: #c62828;">${escapeHtml(agent.error)}</span>
+        <div class="agent-panel active" id="panel-logs-${a.id}">
+          <div class="log-viewer" id="logs-${a.id}"></div>
         </div>
-        ` : ''}
       </div>
+    </div>`
+  }).join('') + '</div>'
 
-      <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('')
+  // Reconnect SSE for open panel
+  if (openAgentId) connectLogStream(openAgentId)
 }
 
-// Start agent
+// ── Agent Actions ──────────────────────────────────────────────────
+
 async function startAgent(id) {
   try {
-    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 (err) {
-    alert(`Failed to start agent: ${err.message}`)
-  }
+    const res = await fetch(`${API}/agents/${id}/start`, { method: 'POST' })
+    if (!res.ok) { const d = await res.json(); alert(d.error); return }
+    setTimeout(loadAgents, 1500)
+  } catch (e) { alert(e.message) }
 }
 
-// Stop agent
 async function stopAgent(id) {
   try {
-    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
-    }
-
+    const res = await fetch(`${API}/agents/${id}/stop`, { method: 'POST' })
+    if (!res.ok) { const d = await res.json(); alert(d.error); return }
     setTimeout(loadAgents, 1000)
-  } catch (err) {
-    alert(`Failed to stop agent: ${err.message}`)
-  }
+  } catch (e) { alert(e.message) }
 }
 
-// Restart agent
 async function restartAgent(id) {
   try {
-    const res = await fetch(`${API_BASE}/agents/${id}/restart`, { method: 'POST' })
-    const data = await res.json()
-
-    if (!res.ok) {
-      alert(`Failed to restart agent: ${data.error}`)
-      return
-    }
-
+    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 (err) {
-    alert(`Failed to restart agent: ${err.message}`)
-  }
+  } catch (e) { alert(e.message) }
 }
 
-// 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
-  }
-
+  if (!confirm(`Delete agent "${name}"?`)) return
   try {
-    const res = await fetch(`${API_BASE}/agents/${id}`, { method: 'DELETE' })
-    const data = await res.json()
+    const res = await fetch(`${API}/agents/${id}`, { method: 'DELETE' })
+    if (!res.ok) { const d = await res.json(); alert(d.error); return }
+    if (openAgentId === id) { disconnectLogStream(id); openAgentId = null }
+    loadAgents()
+  } catch (e) { alert(e.message) }
+}
 
-    if (!res.ok) {
-      alert(`Failed to delete agent: ${data.error}`)
-      return
-    }
+// ── Log Panel ──────────────────────────────────────────────────────
 
-    loadAgents()
-  } catch (err) {
-    alert(`Failed to delete agent: ${err.message}`)
+function togglePanel(id) {
+  if (openAgentId === id) {
+    disconnectLogStream(id)
+    openAgentId = null
+  } else {
+    if (openAgentId) disconnectLogStream(openAgentId)
+    openAgentId = id
+    connectLogStream(id)
   }
+  renderAgents()
 }
 
-// Open add agent modal
+function connectLogStream(id) {
+  disconnectLogStream(id)
+  const es = new EventSource(`${API}/agents/${id}/logs/stream`)
+  es.onmessage = (e) => {
+    try {
+      const { logs } = JSON.parse(e.data)
+      const el = document.getElementById('logs-' + id)
+      if (el) {
+        el.textContent = logs.join('\n')
+        el.scrollTop = el.scrollHeight
+      }
+    } catch {}
+  }
+  es.onerror = () => {
+    // Reconnect on error after 3s
+    disconnectLogStream(id)
+    setTimeout(() => {
+      if (openAgentId === id) connectLogStream(id)
+    }, 3000)
+  }
+  logSources.set(id, es)
+}
+
+function disconnectLogStream(id) {
+  const es = logSources.get(id)
+  if (es) { es.close(); logSources.delete(id) }
+}
+
+async function clearLogs(id) {
+  try {
+    await fetch(`${API}/agents/${id}/logs`, { method: 'DELETE' })
+  } catch {}
+}
+
+// ── Modal ──────────────────────────────────────────────────────────
+
 function openAddAgentModal() {
   editingAgentId = null
-  document.getElementById('modal-title').textContent = 'Add New Agent'
+  document.getElementById('modal-title').textContent = 'Add 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 agent = agents.find(a => a.id === id)
-  if (!agent) return
-
+  const a = agents.find(x => x.id === id)
+  if (!a) return
   editingAgentId = id
   document.getElementById('modal-title').textContent = 'Edit Agent'
-  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-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-pull').checked = a.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 formData = {
+async function saveAgent(e) {
+  e.preventDefault()
+  const body = {
     name: document.getElementById('agent-name').value,
     workingDir: document.getElementById('agent-working-dir').value,
     token: document.getElementById('agent-token').value,
     cliPreference: document.getElementById('agent-cli-preference').value,
     permissionMode: document.getElementById('agent-permission-mode').value,
-    autoStart: document.getElementById('agent-auto-start').checked,
+    autoStart: false,
     autoPull: document.getElementById('agent-auto-pull').checked,
   }
-
   try {
-    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
-    }
-
+    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 }
     closeAgentModal()
     loadAgents()
-  } 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)
-}
-
-// Load logs
-async function loadLogs() {
-  if (!logsAgentId) return
-
-  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)
-  }
+  } catch (e2) { alert(e2.message) }
 }
 
-// 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
-    }
+// ── Utilities ──────────────────────────────────────────────────────
 
-    loadLogs()
-  } catch (err) {
-    alert(`Failed to clear logs: ${err.message}`)
-  }
-}
+function esc(t) { const d = document.createElement('div'); d.textContent = t || ''; return d.innerHTML }
 
-// Close logs modal
-function closeLogsModal() {
-  document.getElementById('logs-modal').classList.remove('active')
-  if (logsInterval) {
-    clearInterval(logsInterval)
-    logsInterval = null
-  }
-  logsAgentId = null
+function fmtUptime(ms) {
+  const s = Math.floor(ms / 1000), m = Math.floor(s / 60), h = Math.floor(m / 60), 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'
+  return s + 's'
 }
 
-// Utility: Escape HTML
-function escapeHtml(text) {
-  const div = document.createElement('div')
-  div.textContent = text
-  return div.innerHTML
+function fmtBytes(b) {
+  if (!b) return '0 B'
+  const k = 1024, s = ['B','KB','MB','GB','TB'], i = Math.floor(Math.log(b) / Math.log(k))
+  return (b / Math.pow(k, i)).toFixed(1) + ' ' + s[i]
 }
 
-// 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`
-}
+// ── Init ───────────────────────────────────────────────────────────
 
-// Event listeners
 document.addEventListener('DOMContentLoaded', () => {
   loadSystemInfo()
+  loadHealth()
   loadAgents()
-
-  // Refresh button
-  document.getElementById('refresh-btn').addEventListener('click', () => {
-    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)
-
-  // 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, 15000)
 })
 
-// Close modals on background click
 window.addEventListener('click', (e) => {
-  if (e.target.classList.contains('modal')) {
+  if (e.target.classList.contains('modal-overlay')) {
     e.target.classList.remove('active')
-    if (e.target.id === 'logs-modal' && logsInterval) {
-      clearInterval(logsInterval)
-      logsInterval = null
-    }
   }
 })