orquesta-agent 0.2.57 → 0.2.59

package/dist/ui/public/app.js

@@ -1,27 +1,72 @@
-// Orquesta Agent Manager — Frontend
+// Orquesta Agent Manager
 
 const API = '/api'
 let agents = []
 let systemInfo = null
 let editingAgentId = null
-let openLogsId = null
-let logsIntervals = new Map()
+let openAgentId = null
+let openPanel = 'logs'
+let logSources = new Map() // agentId → EventSource
 
-// ── Icons (inline SVG) ─────────────────────────────────────────────
+// ── SVG Icons ──────────────────────────────────────────────────────
 
-const ICONS = {
-  play: '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21"/></svg>',
+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"/><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>',
+  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>',
-  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>',
+  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>',
 }
 
-// ── System Health ──────────────────────────────────────────────────
+// ── 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 ────────────────────────────────────────────────────
+
+async function loadSystemInfo() {
+  try {
+    const res = await fetch(`${API}/system`)
+    systemInfo = await res.json()
+    document.getElementById('version').textContent = `v${systemInfo.version}`
+
+    // 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 {
+      cd.className = 'cli-dot'; cs.textContent = 'missing'
+    }
+
+    // Orquesta
+    const od = document.getElementById('orquesta-dot')
+    const os2 = document.getElementById('orquesta-status')
+    if (systemInfo.hasOrquestaCli) {
+      od.className = 'cli-dot on'; os2.textContent = 'ready'
+    } else {
+      od.className = 'cli-dot'; os2.textContent = 'missing'
+    }
+
+    document.getElementById('node-status').textContent = systemInfo.nodeVersion
+  } catch {}
+}
+
+// ── Health ─────────────────────────────────────────────────────────
 
 async function loadHealth() {
   try {
@@ -29,82 +74,32 @@ async function loadHealth() {
     if (!res.ok) return
     const h = await res.json()
 
-    // CPU
     const cpuPct = h.cpu.usage
-    document.getElementById('cpu-value').innerHTML = `${cpuPct}<small>%</small>`
+    document.getElementById('cpu-value').textContent = cpuPct + '%'
     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>`
+    document.getElementById('mem-value').textContent = memPct + '%'
     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>`
+      document.getElementById('disk-value').textContent = diskPct + '%'
       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`
+      document.getElementById('disk-detail').textContent = `${fmtBytes(h.disk.free)} free`
     }
 
-    // Uptime
     document.getElementById('uptime-value').textContent = fmtUptime(h.uptime * 1000)
     document.getElementById('hostname-detail').textContent = h.hostname
-  } catch { /* ignore */ }
+  } 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' : 'green')
-}
-
-// ── System Info ────────────────────────────────────────────────────
-
-async function loadSystemInfo() {
-  try {
-    const res = await fetch(`${API}/system`)
-    systemInfo = await res.json()
-
-    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'
-    } else {
-      claudeDot.className = 'dot off'
-      claudeLabel.textContent = 'Not installed'
-    }
-
-    // Orquesta CLI mode (Batuta proxy)
-    const orqCard = document.getElementById('mode-orquesta')
-    const orqDot = document.getElementById('orquesta-dot')
-    const orqLabel = document.getElementById('orquesta-label')
-    if (systemInfo.hasOrquestaCli) {
-      orqDot.className = 'dot on'
-      orqLabel.textContent = 'Ready (Claude, GPT-4o, DeepSeek, Gemini...)'
-      orqCard.classList.add('active')
-    } else {
-      orqDot.className = 'dot off'
-      orqLabel.textContent = 'Not installed — npm i -g orquesta-cli'
-    }
-
-    // Node
-    document.getElementById('node-dot').className = 'dot on'
-    document.getElementById('node-label').textContent = systemInfo.nodeVersion
-  } catch { /* ignore */ }
+  el.style.width = Math.min(pct, 100) + '%'
+  el.className = 'health-bar-fill' + (pct > 90 ? ' red' : pct > 70 ? ' yellow' : '')
 }
 
 // ── Agents ─────────────────────────────────────────────────────────
@@ -114,79 +109,77 @@ async function loadAgents() {
     const res = await fetch(`${API}/agents`)
     agents = await res.json()
     renderAgents()
-  } catch { /* ignore */ }
+  } catch {}
 }
 
 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 = ''
-    container.innerHTML = ''
-    container.appendChild(emptyState)
-    countEl.textContent = ''
+    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'
   const running = agents.filter(a => a.status === 'running').length
-  countEl.textContent = `(${running}/${agents.length} running)`
+  countEl.textContent = `${running} of ${agents.length} online`
 
-  container.innerHTML = agents.map(a => {
-    const isLogsOpen = openLogsId === a.id
-    return `
-    <div class="agent-card ${a.status}" id="card-${a.id}">
+  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-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 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>
-        <div class="agent-card-right">
+        <div class="agent-actions">
           ${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" 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-success" onclick="startAgent('${a.id}')" title="Start">${ICONS.play} <span class="btn-label">Start</span></button>
+            <button class="btn btn-sm btn-primary" onclick="startAgent('${a.id}')" title="Start">${I.play}</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>
+          <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>
       </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 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>
-        <pre class="logs-content" id="logs-content-${a.id}"></pre>
+        <div class="agent-panel active" id="panel-logs-${a.id}">
+          <div class="log-viewer" id="logs-${a.id}"></div>
+        </div>
       </div>
     </div>`
-  }).join('')
+  }).join('') + '</div>'
 
-  // Restore open logs
-  if (openLogsId) {
-    refreshLogs(openLogsId)
-  }
+  // Reconnect SSE for open panel
+  if (openAgentId) connectLogStream(openAgentId)
 }
 
 // ── Agent Actions ──────────────────────────────────────────────────
@@ -195,7 +188,7 @@ 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 }
-    setTimeout(loadAgents, 1000)
+    setTimeout(loadAgents, 1500)
   } catch (e) { alert(e.message) }
 }
 
@@ -216,72 +209,61 @@ async function restartAgent(id) {
 }
 
 async function deleteAgent(id, name) {
-  if (!confirm(`Delete agent "${name}"? This will stop it and remove all configuration.`)) return
+  if (!confirm(`Delete agent "${name}"?`)) 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
+    if (openAgentId === id) { disconnectLogStream(id); openAgentId = null }
     loadAgents()
   } catch (e) { alert(e.message) }
 }
 
-// ── Inline Logs ────────────────────────────────────────────────────
+// ── Log Panel ──────────────────────────────────────────────────────
 
-function toggleLogs(id) {
-  if (openLogsId === id) {
-    openLogsId = null
-    const el = document.getElementById(`logs-${id}`)
-    if (el) el.classList.remove('open')
-    stopLogsPolling(id)
+function togglePanel(id) {
+  if (openAgentId === id) {
+    disconnectLogStream(id)
+    openAgentId = null
   } 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)
+    if (openAgentId) disconnectLogStream(openAgentId)
+    openAgentId = id
+    connectLogStream(id)
   }
-  // Re-render buttons (toggle icon)
   renderAgents()
 }
 
-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)
+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)
 }
 
-async function refreshLogs(id) {
-  try {
-    const res = await fetch(`${API}/agents/${id}/logs?lines=200`)
-    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
-    }
-  } catch { /* ignore */ }
+function disconnectLogStream(id) {
+  const es = logSources.get(id)
+  if (es) { es.close(); logSources.delete(id) }
 }
 
 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 */ }
+  } catch {}
 }
 
 // ── Modal ──────────────────────────────────────────────────────────
@@ -304,7 +286,6 @@ function editAgent(id) {
   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')
 }
@@ -314,18 +295,17 @@ function closeAgentModal() {
   editingAgentId = null
 }
 
-async function saveAgent(event) {
-  event.preventDefault()
+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 {
     const url = editingAgentId ? `${API}/agents/${editingAgentId}` : `${API}/agents`
     const method = editingAgentId ? 'PUT' : 'POST'
@@ -333,34 +313,25 @@ async function saveAgent(event) {
     if (!res.ok) { const d = await res.json(); alert(d.error); return }
     closeAgentModal()
     loadAgents()
-  } catch (e) { alert(e.message) }
+  } catch (e2) { alert(e2.message) }
 }
 
 // ── Utilities ──────────────────────────────────────────────────────
 
-function esc(text) {
-  const d = document.createElement('div')
-  d.textContent = text || ''
-  return d.innerHTML
-}
+function esc(t) { const d = document.createElement('div'); d.textContent = t || ''; return d.innerHTML }
 
 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`
+  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'
 }
 
-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]}`
+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]
 }
 
 // ── Init ───────────────────────────────────────────────────────────
@@ -369,26 +340,13 @@ document.addEventListener('DOMContentLoaded', () => {
   loadSystemInfo()
   loadHealth()
   loadAgents()
-
-  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('add-agent-btn').addEventListener('click', openAddAgentModal)
   document.getElementById('agent-form').addEventListener('submit', saveAgent)
-
-  // Auto-refresh
   setInterval(loadAgents, 5000)
-  setInterval(loadHealth, 10000)
+  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')
   }
 })