orquesta-agent 0.2.0 → 0.2.1

package/dist/ui/public/app.js

@@ -0,0 +1,411 @@
+// Orquesta Agent Manager Frontend
+
+const API_BASE = '/api'
+let agents = []
+let systemInfo = null
+let editingAgentId = null
+let logsAgentId = null
+let logsInterval = null
+
+// Load system info
+async function loadSystemInfo() {
+  try {
+    const res = await fetch(`${API_BASE}/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>`
+      }
+    } else {
+      claudeStatus.innerHTML = `<span class="badge danger">✗ Not installed</span>`
+    }
+
+    // Orquesta CLI status
+    const orquestaStatus = document.getElementById('orquesta-status')
+    if (systemInfo.hasOrquestaCli) {
+      orquestaStatus.innerHTML = `<span class="badge success">✓ Installed</span>`
+    } else {
+      orquestaStatus.innerHTML = `<span class="badge danger">✗ Not installed</span>`
+    }
+  } catch (err) {
+    console.error('Failed to load system info:', err)
+  }
+}
+
+// Load agents
+async function loadAgents() {
+  try {
+    const res = await fetch(`${API_BASE}/agents`)
+    agents = await res.json()
+    renderAgents()
+  } 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')
+
+  if (agents.length === 0) {
+    emptyState.style.display = 'block'
+    container.innerHTML = ''
+    container.appendChild(emptyState)
+    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>
+        </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>
+
+      <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('')
+}
+
+// Start agent
+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}`)
+  }
+}
+
+// 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
+    }
+
+    setTimeout(loadAgents, 1000)
+  } catch (err) {
+    alert(`Failed to stop agent: ${err.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
+    }
+
+    setTimeout(loadAgents, 2000)
+  } catch (err) {
+    alert(`Failed to restart agent: ${err.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
+  }
+
+  try {
+    const res = await fetch(`${API_BASE}/agents/${id}`, { method: 'DELETE' })
+    const data = await res.json()
+
+    if (!res.ok) {
+      alert(`Failed to delete agent: ${data.error}`)
+      return
+    }
+
+    loadAgents()
+  } catch (err) {
+    alert(`Failed to delete agent: ${err.message}`)
+  }
+}
+
+// Open add agent modal
+function openAddAgentModal() {
+  editingAgentId = null
+  document.getElementById('modal-title').textContent = 'Add New Agent'
+  document.getElementById('agent-form').reset()
+  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
+
+  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-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 = {
+    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,
+    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
+    }
+
+    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)
+  }
+}
+
+// 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}`)
+  }
+}
+
+// Close logs modal
+function closeLogsModal() {
+  document.getElementById('logs-modal').classList.remove('active')
+  if (logsInterval) {
+    clearInterval(logsInterval)
+    logsInterval = null
+  }
+  logsAgentId = null
+}
+
+// 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()
+  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)
+})
+
+// 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
+    }
+  }
+})

package/dist/ui/public/index.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Orquesta Agent Manager</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <!-- Header -->
+    <header class="header">
+      <div class="header-content">
+        <h1>🎼 Orquesta Agent Manager</h1>
+        <div class="header-info">
+          <span id="version" class="badge">v0.0.0</span>
+          <button id="refresh-btn" class="btn btn-secondary">
+            <span class="icon">🔄</span> Refresh
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <!-- System Info -->
+    <div id="system-info" class="system-info">
+      <div class="system-item">
+        <span class="label">Platform:</span>
+        <span id="platform">-</span>
+      </div>
+      <div class="system-item">
+        <span class="label">Claude CLI:</span>
+        <span id="claude-status">-</span>
+      </div>
+      <div class="system-item">
+        <span class="label">Orquesta CLI:</span>
+        <span id="orquesta-status">-</span>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <div class="actions">
+      <button id="add-agent-btn" class="btn btn-primary">
+        <span class="icon">➕</span> Add New Agent
+      </button>
+    </div>
+
+    <!-- Agents List -->
+    <div id="agents-container" class="agents-container">
+      <div id="empty-state" class="empty-state">
+        <div class="empty-icon">📦</div>
+        <h3>No agents configured</h3>
+        <p>Click "Add New Agent" to get started</p>
+      </div>
+    </div>
+
+    <!-- Modal: Add/Edit Agent -->
+    <div id="agent-modal" class="modal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 id="modal-title">Configure Agent</h2>
+          <button class="modal-close" onclick="closeAgentModal()">&times;</button>
+        </div>
+        <form id="agent-form" class="modal-body">
+          <div class="form-group">
+            <label for="agent-name">Agent Name *</label>
+            <input type="text" id="agent-name" required placeholder="my-project">
+          </div>
+
+          <div class="form-group">
+            <label for="agent-working-dir">Working Directory *</label>
+            <input type="text" id="agent-working-dir" required placeholder="/path/to/project">
+            <small>The folder where your project code lives</small>
+          </div>
+
+          <div class="form-group">
+            <label for="agent-token">Token *</label>
+            <input type="password" id="agent-token" required placeholder="oat_...">
+            <small>Get your token from Orquesta dashboard</small>
+          </div>
+
+          <div class="form-group">
+            <label for="agent-cli-preference">CLI Preference</label>
+            <select id="agent-cli-preference">
+              <option value="auto">Auto (prefer Orquesta CLI)</option>
+              <option value="orquesta">Orquesta CLI (force local LLM)</option>
+              <option value="claude">Claude CLI (force Anthropic API)</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="agent-permission-mode">Permission Mode</label>
+            <select id="agent-permission-mode">
+              <option value="auto">Auto (no approval needed)</option>
+              <option value="supervised">Supervised (require approval)</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label class="checkbox-label">
+              <input type="checkbox" id="agent-auto-start">
+              <span>Auto-start on boot (systemd/launchd)</span>
+            </label>
+          </div>
+
+          <div class="form-group">
+            <label class="checkbox-label">
+              <input type="checkbox" id="agent-auto-pull" checked>
+              <span>Auto-pull git before prompts</span>
+            </label>
+          </div>
+
+          <div class="form-actions">
+            <button type="button" class="btn btn-secondary" onclick="closeAgentModal()">Cancel</button>
+            <button type="submit" class="btn btn-primary">Save Agent</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Modal: Logs Viewer -->
+    <div id="logs-modal" class="modal">
+      <div class="modal-content modal-large">
+        <div class="modal-header">
+          <h2 id="logs-title">Agent Logs</h2>
+          <button class="modal-close" onclick="closeLogsModal()">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div class="logs-controls">
+            <button id="logs-refresh" class="btn btn-secondary btn-sm">🔄 Refresh</button>
+            <button id="logs-clear" class="btn btn-secondary btn-sm">🗑️ Clear Logs</button>
+            <label class="checkbox-label">
+              <input type="checkbox" id="logs-autoscroll" checked>
+              <span>Auto-scroll</span>
+            </label>
+          </div>
+          <pre id="logs-content" class="logs-content"></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>

package/dist/ui/public/style.css

@@ -0,0 +1,471 @@
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  background: #f5f7fa;
+  color: #2c3e50;
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Header */
+.header {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header h1 {
+  font-size: 28px;
+  color: #2c3e50;
+}
+
+.header-info {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+/* System Info */
+.system-info {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 24px;
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.system-item {
+  display: flex;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.system-item .label {
+  font-weight: 600;
+  color: #6c757d;
+}
+
+/* Badge */
+.badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+.badge.success {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.badge.danger {
+  background: #ffebee;
+  color: #c62828;
+}
+
+.badge.warning {
+  background: #fff3e0;
+  color: #ef6c00;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.btn-primary {
+  background: #1976d2;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #1565c0;
+}
+
+.btn-secondary {
+  background: #e0e0e0;
+  color: #424242;
+}
+
+.btn-secondary:hover {
+  background: #bdbdbd;
+}
+
+.btn-success {
+  background: #2e7d32;
+  color: white;
+}
+
+.btn-success:hover {
+  background: #1b5e20;
+}
+
+.btn-danger {
+  background: #c62828;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #b71c1c;
+}
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.btn .icon {
+  font-size: 16px;
+}
+
+/* Actions */
+.actions {
+  margin-bottom: 24px;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.empty-icon {
+  font-size: 64px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-state h3 {
+  font-size: 20px;
+  margin-bottom: 8px;
+  color: #2c3e50;
+}
+
+.empty-state p {
+  color: #6c757d;
+}
+
+/* Agents Container */
+.agents-container {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+}
+
+/* Agent Card */
+.agent-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  transition: all 0.2s;
+}
+
+.agent-card:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+}
+
+.agent-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.agent-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.agent-title h3 {
+  font-size: 18px;
+  color: #2c3e50;
+}
+
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.running {
+  background: #2e7d32;
+  box-shadow: 0 0 8px #2e7d32;
+}
+
+.status-dot.stopped {
+  background: #9e9e9e;
+}
+
+.status-dot.error {
+  background: #c62828;
+  box-shadow: 0 0 8px #c62828;
+}
+
+.agent-info {
+  margin-bottom: 16px;
+}
+
+.info-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.info-row .label {
+  font-weight: 600;
+  color: #6c757d;
+  min-width: 100px;
+}
+
+.info-row .value {
+  color: #2c3e50;
+  word-break: break-all;
+}
+
+.agent-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* Modal */
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal.active {
+  display: flex;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+}
+
+.modal-large {
+  max-width: 900px;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.modal-header h2 {
+  font-size: 20px;
+  color: #2c3e50;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: #9e9e9e;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.modal-close:hover {
+  background: #f5f5f5;
+  color: #424242;
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+/* Form */
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 14px;
+}
+
+.form-group input[type="text"],
+.form-group input[type="password"],
+.form-group select {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: all 0.2s;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: #1976d2;
+  box-shadow: 0 0 0 3px rgba(25,118,210,0.1);
+}
+
+.form-group small {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: #6c757d;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-weight: normal;
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #e0e0e0;
+}
+
+/* Logs */
+.logs-controls {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  align-items: center;
+}
+
+.logs-content {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 16px;
+  border-radius: 6px;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  max-height: 500px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.logs-content:empty::before {
+  content: 'No logs available';
+  color: #6c757d;
+  font-style: italic;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .agents-container {
+    grid-template-columns: 1fr;
+  }
+
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .system-info {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .agent-actions {
+    flex-direction: column;
+  }
+
+  .agent-actions .btn {
+    width: 100%;
+  }
+}
+
+/* Loading spinner */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading {
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orquesta-agent",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Local agent for Orquesta - connects your VM to the Orquesta dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -8,7 +8,7 @@
     "orquesta-agent": "./dist/index.js"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && cp -r src/ui/public dist/ui/",
     "dev": "tsc --watch",
     "start": "node dist/index.js",
     "prepublishOnly": "npm run build",