orquesta-agent 0.2.53 → 0.2.54

package/dist/ui/public/app.js

@@ -1,248 +1,318 @@
-// Orquesta Agent Manager Frontend
+// Orquesta Agent Manager — Frontend
 
-const API_BASE = '/api'
+const API = '/api'
 let agents = []
 let systemInfo = null
 let editingAgentId = null
-let logsAgentId = null
-let logsInterval = 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 ────────────────────────────────────────────────────
 
-// 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 CLI
+    const claudeDot = document.getElementById('claude-dot')
+    const claudeLabel = document.getElementById('claude-label')
+    if (systemInfo.hasClaudeCli && systemInfo.claudeAuth?.authenticated) {
+      claudeDot.className = 'dot on'
+      claudeLabel.textContent = systemInfo.claudeAuth.method
+    } else if (systemInfo.hasClaudeCli) {
+      claudeDot.className = 'dot warn'
+      claudeLabel.textContent = 'not authenticated'
     } else {
-      claudeStatus.innerHTML = `<span class="badge danger">✗ Not installed</span>`
+      claudeDot.className = 'dot off'
+      claudeLabel.textContent = 'not installed'
     }
 
-    // Orquesta CLI status
-    const orquestaStatus = document.getElementById('orquesta-status')
+    // Orquesta CLI
+    const orqDot = document.getElementById('orquesta-dot')
+    const orqLabel = document.getElementById('orquesta-label')
     if (systemInfo.hasOrquestaCli) {
-      orquestaStatus.innerHTML = `<span class="badge success">✓ Installed</span>`
+      orqDot.className = 'dot on'
+      orqLabel.textContent = 'installed'
     } else {
-      orquestaStatus.innerHTML = `<span class="badge danger">✗ Not installed</span>`
+      orqDot.className = 'dot off'
+      orqLabel.textContent = 'not installed'
     }
-  } catch (err) {
-    console.error('Failed to load system info:', err)
-  }
+
+    // Node
+    document.getElementById('node-dot').className = 'dot on'
+    document.getElementById('node-label').textContent = systemInfo.nodeVersion
+  } catch { /* ignore */ }
 }
 
-// Load agents
+// ── 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 { /* ignore */ }
 }
 
-// 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 = 'block'
+    emptyState.style.display = ''
     container.innerHTML = ''
     container.appendChild(emptyState)
+    countEl.textContent = ''
     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>
+  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>
         </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>
-        </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>
-        ` : ''}
+      <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-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 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>
+        <pre class="logs-content" id="logs-content-${a.id}"></pre>
       </div>
-    </div>
-  `).join('')
+    </div>`
+  }).join('')
+
+  // Restore open logs
+  if (openLogsId) {
+    refreshLogs(openLogsId)
+  }
 }
 
-// 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
-    }
-
+    const res = await fetch(`${API}/agents/${id}/start`, { method: 'POST' })
+    if (!res.ok) { const d = await res.json(); alert(d.error); return }
     setTimeout(loadAgents, 1000)
-  } catch (err) {
-    alert(`Failed to start agent: ${err.message}`)
-  }
+  } 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()
+    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) }
+}
 
-    if (!res.ok) {
-      alert(`Failed to restart agent: ${data.error}`)
-      return
-    }
+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) }
+}
 
-    setTimeout(loadAgents, 2000)
-  } catch (err) {
-    alert(`Failed to restart agent: ${err.message}`)
+// ── 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)
+    }
+    openLogsId = id
+    const el = document.getElementById(`logs-${id}`)
+    if (el) el.classList.add('open')
+    refreshLogs(id)
+    startLogsPolling(id)
   }
+  // Re-render buttons (toggle icon)
+  renderAgents()
 }
 
-// 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
+function startLogsPolling(id) {
+  stopLogsPolling(id)
+  const interval = setInterval(() => refreshLogs(id), 2000)
+  logsIntervals.set(id, interval)
+}
+
+function stopLogsPolling(id) {
+  const interval = logsIntervals.get(id)
+  if (interval) {
+    clearInterval(interval)
+    logsIntervals.delete(id)
   }
+}
 
+async function refreshLogs(id) {
   try {
-    const res = await fetch(`${API_BASE}/agents/${id}`, { method: 'DELETE' })
+    const res = await fetch(`${API}/agents/${id}/logs?lines=200`)
     const data = await res.json()
-
-    if (!res.ok) {
-      alert(`Failed to delete agent: ${data.error}`)
-      return
+    const el = document.getElementById(`logs-content-${id}`)
+    if (el) {
+      el.textContent = data.logs.join('\n') || 'No logs yet'
+      el.scrollTop = el.scrollHeight
     }
+  } catch { /* ignore */ }
+}
 
-    loadAgents()
-  } catch (err) {
-    alert(`Failed to delete agent: ${err.message}`)
-  }
+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 */ }
 }
 
-// Open add agent modal
+// ── 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-start').checked = a.autoStart
+  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 = {
+  const body = {
     name: document.getElementById('agent-name').value,
     workingDir: document.getElementById('agent-working-dir').value,
     token: document.getElementById('agent-token').value,
@@ -253,159 +323,68 @@ async function saveAgent(event) {
   }
 
   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)
+  } catch (e) { alert(e.message) }
 }
 
-// Load logs
-async function loadLogs() {
-  if (!logsAgentId) return
+// ── Utilities ──────────────────────────────────────────────────────
 
-  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 esc(text) {
+  const d = document.createElement('div')
+  d.textContent = text || ''
+  return d.innerHTML
 }
 
-// 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 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`
 }
 
-// Close logs modal
-function closeLogsModal() {
-  document.getElementById('logs-modal').classList.remove('active')
-  if (logsInterval) {
-    clearInterval(logsInterval)
-    logsInterval = null
-  }
-  logsAgentId = null
+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]}`
 }
 
-// Utility: Escape HTML
-function escapeHtml(text) {
-  const div = document.createElement('div')
-  div.textContent = text
-  return div.innerHTML
-}
+// ── Init ───────────────────────────────────────────────────────────
 
-// 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', () => {
-    document.getElementById('refresh-btn').querySelector('.icon').classList.add('loading')
-    Promise.all([loadSystemInfo(), loadAgents()]).then(() => {
-      document.getElementById('refresh-btn').querySelector('.icon').classList.remove('loading')
+    const icon = document.getElementById('refresh-icon')
+    icon.classList.add('spinning')
+    Promise.all([loadSystemInfo(), loadHealth(), loadAgents()]).then(() => {
+      setTimeout(() => icon.classList.remove('spinning'), 500)
     })
   })
 
-  // 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
+  // Auto-refresh
   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
-    }
   }
 })