@newsails/veil-cli 1.0.1

package/ui/views/agents.js

@@ -0,0 +1,377 @@
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.agents = {
+  _agents: [],
+  _selected: null,
+  _detail: null,
+
+  render() {
+    return `
+      <div style="display:flex;height:100%;">
+        <!-- List panel -->
+        <div style="width:240px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface);">
+          <div style="padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
+            <span style="font-weight:600;font-size:13px;color:var(--text);">Agents</span>
+            <button id="btn-create-agent" class="btn btn-primary btn-sm">+ New</button>
+          </div>
+          <div id="agent-list" style="flex:1;overflow-y:auto;padding:6px;">
+            <div style="padding:20px;text-align:center;color:var(--text3);font-size:13px;">${window.Veil.utils.spinner()}</div>
+          </div>
+        </div>
+        <!-- Detail panel -->
+        <div id="agent-detail" style="flex:1;overflow-y:auto;">
+          <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13.5px;">
+            Select an agent
+          </div>
+        </div>
+      </div>`;
+  },
+
+  async mount() {
+    document.getElementById('btn-create-agent').addEventListener('click', () => this._showCreateModal());
+    await this._loadList();
+  },
+
+  unmount() {
+    this._selected = null;
+    this._detail   = null;
+  },
+
+  async _loadList() {
+    const el = document.getElementById('agent-list');
+    if (!el) return;
+    try {
+      const data = await window.Veil.state.api.listAgents();
+      this._agents = data.agents || [];
+      if (this._agents.length === 0) {
+        el.innerHTML = `<div style="padding:24px;text-align:center;color:var(--text3);font-size:13px;line-height:1.7;">No agents found.<br>Create one with <b>+ New</b> or add agent folders to <code>.veil/agents/</code>.</div>`;
+        return;
+      }
+      const U = window.Veil.utils;
+      el.innerHTML = this._agents.map(a => {
+        const initial = a.name.slice(0, 2).toUpperCase();
+        const colors = ['#7C6AF0','#3B82F6','#22C55E','#EAB308','#EF4444','#EC4899'];
+        const col = colors[a.name.charCodeAt(0) % colors.length];
+        return `
+        <div class="list-item ${this._selected === a.name ? 'selected' : ''}" data-agent="${U.esc(a.name)}"
+          style="display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;">
+          <div style="width:32px;height:32px;border-radius:50%;background:${col}22;color:${col};display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;">${U.esc(initial)}</div>
+          <div style="min-width:0;flex:1;">
+            <div style="font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${U.esc(a.name)}</div>
+            <div style="font-size:11.5px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${U.esc(a.model || '')}</div>
+          </div>
+        </div>`;
+      }).join('');
+
+      el.querySelectorAll('[data-agent]').forEach(row => {
+        row.addEventListener('click', () => {
+          const name = row.getAttribute('data-agent');
+          el.querySelectorAll('.list-item').forEach(r => r.classList.remove('selected'));
+          row.classList.add('selected');
+          this._selected = name;
+          this._loadDetail(name);
+        });
+      });
+
+      if (this._selected) this._loadDetail(this._selected);
+    } catch (err) {
+      if (el) el.innerHTML = `<div style="padding:16px;color:var(--red);font-size:13px;">Error: ${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  async _loadDetail(name) {
+    const el = document.getElementById('agent-detail');
+    if (!el) return;
+    el.innerHTML = `<div style="padding:20px;color:var(--text3);">${window.Veil.utils.spinner()} Loading…</div>`;
+    try {
+      const data  = await window.Veil.state.api.getAgent(name);
+      const agent = data.agent;
+      this._detail = agent;
+      const U  = window.Veil.utils;
+      const modes = agent.modes || {};
+      const modeKeys = Object.keys(modes).filter(k => modes[k] && modes[k].enabled);
+
+      const initial = agent.name.slice(0,2).toUpperCase();
+      const colors = ['#7C6AF0','#3B82F6','#22C55E','#EAB308','#EF4444','#EC4899'];
+      const col = colors[agent.name.charCodeAt(0) % colors.length];
+      el.innerHTML = `
+        <div style="padding:24px;">
+          <!-- Header -->
+          <div style="display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;">
+            <div style="width:48px;height:48px;border-radius:50%;background:${col}22;color:${col};display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0;">${U.esc(initial)}</div>
+            <div style="flex:1;min-width:0;">
+              <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px;">
+                <h2 style="font-size:18px;font-weight:700;color:var(--text);letter-spacing:-0.02em;">${U.esc(agent.name)}</h2>
+                ${modeKeys.map(m => `<span class="badge badge-${m==='chat'?'active':m==='task'?'processing':m==='daemon'?'waiting':'closed'}">${U.esc(m)}</span>`).join('')}
+              </div>
+              <p style="font-size:13px;color:var(--text2);">${U.esc(agent.description || '(no description)')}</p>
+            </div>
+            <div style="display:flex;gap:6px;flex-shrink:0;">
+              <button class="btn btn-ghost btn-sm" id="btn-edit-agent">Edit</button>
+              <button class="btn btn-ghost btn-sm" id="btn-reload-agent">↻</button>
+              <button class="btn btn-danger btn-sm" id="btn-delete-agent">Delete</button>
+            </div>
+          </div>
+
+          <!-- Info grid -->
+          <div class="card" style="margin-bottom:16px;padding:18px;">
+            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">
+              ${this._infoRow('Model',          agent.model)}
+              ${this._infoRow('Temperature',    agent.temperature != null ? agent.temperature : '—')}
+              ${this._infoRow('Reasoning',      agent.reasoning || '—')}
+              ${this._infoRow('Skill Discovery',agent.skillDiscovery ? 'on' : 'off')}
+              ${this._infoRow('Memory',         agent.memory?.enabled ? `on (max ${agent.memory.maxLines||'?'} lines)` : 'off')}
+              ${this._infoRow('Source',         agent.source || 'project')}
+            </div>
+            <div style="margin-top:14px;padding-top:14px;border-top:1px solid var(--border);">
+              <div class="info-label">Folder</div>
+              <code style="font-size:12px;color:var(--text2);font-family:'JetBrains Mono',monospace;">${U.esc(agent.agentFolder || '—')}</code>
+            </div>
+          </div>
+
+          <!-- Quick actions -->
+          <div class="card" style="margin-bottom:16px;padding:14px;">
+            <div style="font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;">Open with agent</div>
+            <div style="display:flex;gap:8px;flex-wrap:wrap;">
+              ${modeKeys.includes('chat') ? `<button class="btn btn-secondary btn-sm" onclick="window.Veil.state.currentAgent='${U.esc(agent.name)}';window.Veil.navigate('chat')">💬 Chat</button>` : ''}
+              ${modeKeys.includes('task') ? `<button class="btn btn-secondary btn-sm" onclick="window.Veil.state.currentAgent='${U.esc(agent.name)}';window.Veil.navigate('tasks')">📋 Tasks</button>` : ''}
+              <button class="btn btn-secondary btn-sm" onclick="window.Veil.state.currentAgent='${U.esc(agent.name)}';window.Veil.navigate('sessions')">📝 Sessions</button>
+              <button class="btn btn-secondary btn-sm" id="btn-skills-${U.esc(agent.name)}">🔧 Skills</button>
+              <button class="btn btn-secondary btn-sm" onclick="window.Veil.state.currentAgent='${U.esc(agent.name)}';window.Veil.navigate('memory')">🧠 Memory</button>
+            </div>
+          </div>
+        </div>`;
+
+      document.getElementById('btn-edit-agent').addEventListener('click',   () => this._showEditModal(agent));
+      document.getElementById('btn-reload-agent').addEventListener('click', () => this._reloadAgent(name));
+      document.getElementById('btn-delete-agent').addEventListener('click', () => this._confirmDelete(name));
+      document.getElementById(`btn-skills-${name}`)?.addEventListener('click', () => this._showSkills(name));
+    } catch (err) {
+      if (el) el.innerHTML = `<div style="padding:16px;color:var(--red);font-size:13px;">Error loading agent: ${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  _infoRow(label, value) {
+    return `<div>
+      <div class="info-label">${label}</div>
+      <div class="info-value">${value}</div>
+    </div>`;
+  },
+
+  _renderMode(modeKey, modeConf) {
+    const U = window.Veil.utils;
+    const details = [];
+    if (modeConf.maxIterations)       details.push(`max ${modeConf.maxIterations} iter`);
+    if (modeConf.maxDurationSeconds)  details.push(`${modeConf.maxDurationSeconds}s limit`);
+    if (modeConf.tools && modeConf.tools.length) details.push(`tools: ${modeConf.tools.join(', ')}`);
+    if (modeConf.schedule)            details.push(`cron: ${modeConf.schedule}`);
+    return `<div style="margin-bottom:8px;">
+      <span class="badge badge-${modeKey==='chat'?'active':modeKey==='task'?'processing':modeKey==='daemon'?'waiting':'closed'}" style="margin-right:6px;">${U.esc(modeKey)}</span>
+      ${details.length ? `<span style="font-size:12px;color:var(--text2);">${U.esc(details.join(' · '))}</span>` : ''}
+    </div>`;
+  },
+
+  async _reloadAgent(name) {
+    const btn = document.getElementById('btn-reload-agent');
+    if (btn) { btn.disabled = true; btn.textContent = '↻ …'; }
+    try {
+      await window.Veil.state.api.reloadAgent(name);
+      window.Veil.utils.toast(`Agent "${name}" reloaded`, 'success');
+      this._loadDetail(name);
+    } catch (err) {
+      window.Veil.utils.toast('Reload failed: ' + err.message, 'error');
+      if (btn) { btn.disabled = false; btn.textContent = '↻ Reload'; }
+    }
+  },
+
+  async _confirmDelete(name) {
+    window.Veil.modal.show(`
+      <div>
+        <h3 style="font-size:16px;font-weight:700;color:var(--red);margin-bottom:12px;">Delete agent "${window.Veil.utils.esc(name)}"?</h3>
+        <p style="font-size:13px;color:var(--text2);margin-bottom:20px;">This permanently removes the agent folder and all its contents from disk. This cannot be undone.</p>
+        <div style="display:flex;gap:10px;justify-content:flex-end;">
+          <button class="btn btn-secondary" onclick="window.Veil.modal.hide()">Cancel</button>
+          <button class="btn btn-danger" id="modal-confirm-del">Delete permanently</button>
+        </div>
+      </div>`);
+    document.getElementById('modal-confirm-del').addEventListener('click', async () => {
+      try {
+        await window.Veil.state.api.deleteAgent(name);
+        window.Veil.modal.hide();
+        window.Veil.utils.toast(`Agent "${name}" deleted`, 'success');
+        this._selected = null;
+        document.getElementById('agent-detail').innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13.5px;">Agent deleted</div>`;
+        await this._loadList();
+      } catch (err) {
+        window.Veil.utils.toast('Delete failed: ' + err.message, 'error');
+        window.Veil.modal.hide();
+      }
+    });
+  },
+
+  _showCreateModal() {
+    const U = window.Veil.utils;
+    window.Veil.modal.show(`
+      <div>
+        <h3 style="font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px;">Create Agent</h3>
+        <div id="create-agent-err" style="display:none;background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,0.3);border-radius:7px;padding:8px 12px;margin-bottom:12px;font-size:13px;"></div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;">
+          <div>
+            <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">Name *</label>
+            <input id="ca-name" class="input" placeholder="my-agent" />
+          </div>
+          <div>
+            <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">Level</label>
+            <select id="ca-level" class="input" style="cursor:pointer;">
+              <option value="project">project</option>
+              <option value="global">global</option>
+            </select>
+          </div>
+        </div>
+        <div style="margin-bottom:12px;">
+          <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">Model *</label>
+          <input id="ca-model" class="input" placeholder="anthropic/claude-sonnet-4-5" />
+        </div>
+        <div style="margin-bottom:12px;">
+          <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">Description</label>
+          <input id="ca-desc" class="input" placeholder="(optional)" />
+        </div>
+        <div style="margin-bottom:12px;">
+          <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">Enable Modes</label>
+          <div style="display:flex;gap:14px;flex-wrap:wrap;">
+            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;"><input type="checkbox" id="ca-chat" checked> chat</label>
+            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;"><input type="checkbox" id="ca-task"> task</label>
+            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;"><input type="checkbox" id="ca-daemon"> daemon</label>
+            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;"><input type="checkbox" id="ca-subagent"> subagent</label>
+          </div>
+        </div>
+        <div style="margin-bottom:20px;">
+          <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">AGENT.md content</label>
+          <textarea id="ca-agentmd" class="input mono" rows="4" placeholder="System prompt / instructions for the agent…" style="resize:vertical;"></textarea>
+        </div>
+        <div style="display:flex;gap:10px;justify-content:flex-end;">
+          <button class="btn btn-secondary" onclick="window.Veil.modal.hide()">Cancel</button>
+          <button class="btn btn-primary" id="ca-submit">Create Agent</button>
+        </div>
+      </div>`);
+
+    document.getElementById('ca-submit').addEventListener('click', async () => {
+      const name   = document.getElementById('ca-name').value.trim();
+      const model  = document.getElementById('ca-model').value.trim();
+      const level  = document.getElementById('ca-level').value;
+      const desc   = document.getElementById('ca-desc').value.trim();
+      const agentMd = document.getElementById('ca-agentmd').value;
+      const errEl  = document.getElementById('create-agent-err');
+
+      if (!name)  { errEl.textContent = 'Name is required'; errEl.style.display='block'; return; }
+      if (!model) { errEl.textContent = 'Model is required'; errEl.style.display='block'; return; }
+
+      const modes = {};
+      if (document.getElementById('ca-chat').checked)     modes.chat     = { enabled: true };
+      if (document.getElementById('ca-task').checked)     modes.task     = { enabled: true };
+      if (document.getElementById('ca-daemon').checked)   modes.daemon   = { enabled: true };
+      if (document.getElementById('ca-subagent').checked) modes.subagent = { enabled: true };
+
+      const config = { model };
+      if (desc)  config.description = desc;
+      if (Object.keys(modes).length) config.modes = modes;
+
+      const body = { name, level, config };
+      if (agentMd.trim()) body.agentMd = agentMd;
+
+      const btn = document.getElementById('ca-submit');
+      btn.disabled = true; btn.innerHTML = U.spinner() + ' Creating…';
+      try {
+        await window.Veil.state.api.createAgent(body);
+        window.Veil.modal.hide();
+        window.Veil.utils.toast(`Agent "${name}" created`, 'success');
+        this._selected = name;
+        await this._loadList();
+      } catch (err) {
+        btn.disabled = false; btn.textContent = 'Create Agent';
+        errEl.textContent = err.message; errEl.style.display = 'block';
+      }
+    });
+  },
+
+  _showEditModal(agent) {
+    const U = window.Veil.utils;
+    const configCopy = Object.assign({}, agent);
+    delete configCopy.agentFolder; delete configCopy.name;
+    window.Veil.modal.show(`
+      <div>
+        <h3 style="font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px;">Edit agent: ${U.esc(agent.name)}</h3>
+        <p style="font-size:13px;color:var(--text2);margin-bottom:16px;">Edit the JSON config below (merged with existing) and/or update AGENT.md.</p>
+        <div id="edit-agent-err" style="display:none;background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,0.3);border-radius:7px;padding:8px 12px;margin-bottom:12px;font-size:13px;"></div>
+        <div style="margin-bottom:12px;">
+          <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">Config JSON (shallow-merged)</label>
+          <textarea id="ea-config" class="input mono" rows="10" style="resize:vertical;">${U.esc(JSON.stringify(configCopy, null, 2))}</textarea>
+        </div>
+        <div style="margin-bottom:20px;">
+          <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;">AGENT.md <span style="color:var(--text3);font-weight:400;text-transform:none;">(leave blank to keep)</span></label>
+          <textarea id="ea-agentmd" class="input mono" rows="5" placeholder="Optional: new AGENT.md content" style="resize:vertical;"></textarea>
+        </div>
+        <div style="display:flex;gap:10px;justify-content:flex-end;">
+          <button class="btn btn-secondary" onclick="window.Veil.modal.hide()">Cancel</button>
+          <button class="btn btn-primary" id="ea-submit">Save Changes</button>
+        </div>
+      </div>`);
+
+    document.getElementById('ea-submit').addEventListener('click', async () => {
+      const errEl = document.getElementById('edit-agent-err');
+      const btn   = document.getElementById('ea-submit');
+      let config;
+      try {
+        config = JSON.parse(document.getElementById('ea-config').value);
+      } catch {
+        errEl.textContent = 'Invalid JSON in config field'; errEl.style.display = 'block'; return;
+      }
+      const body = { config };
+      const agentMd = document.getElementById('ea-agentmd').value;
+      if (agentMd.trim()) body.agentMd = agentMd;
+      btn.disabled = true; btn.innerHTML = U.spinner() + ' Saving…';
+      try {
+        await window.Veil.state.api.updateAgent(agent.name, body);
+        window.Veil.modal.hide();
+        window.Veil.utils.toast('Agent updated', 'success');
+        this._loadDetail(agent.name);
+      } catch (err) {
+        btn.disabled = false; btn.textContent = 'Save Changes';
+        errEl.textContent = err.message; errEl.style.display = 'block';
+      }
+    });
+  },
+
+  async _showSkills(name) {
+    window.Veil.modal.show(`<div style="color:var(--text2);padding:12px;">${window.Veil.utils.spinner()} Loading skills…</div>`);
+    try {
+      const data = await window.Veil.state.api.getAgentSkills(name);
+      const U = window.Veil.utils;
+      const skills = data.skills || [];
+      const tools  = data.customTools || [];
+      window.Veil.modal.show(`
+        <div>
+          <h3 style="font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px;">Skills — ${U.esc(name)}</h3>
+          ${skills.length === 0 && tools.length === 0 ? '<p style="color:var(--text3);font-size:13.5px;">No skills or custom tools configured.</p>' : ''}
+          ${skills.length ? `<div style="margin-bottom:14px;">
+            <div class="panel-header" style="border:none;padding:0 0 8px;">Skills</div>
+            ${skills.map(s => `<div style="display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);">
+              <span style="color:${s.loaded ? 'var(--green)' : 'var(--red)'}">${s.loaded ? '✓' : '✗'}</span>
+              <span style="font-size:13px;color:var(--text);">${U.esc(s.name)}</span>
+              <span style="font-size:12px;color:var(--text3);">${U.esc(s.source || '')}</span>
+              ${s.error ? `<span style="font-size:12px;color:var(--red);">${U.esc(s.error)}</span>` : ''}
+            </div>`).join('')}
+          </div>` : ''}
+          ${tools.length ? `<div>
+            <div class="panel-header" style="border:none;padding:0 0 8px;">Custom Tools</div>
+            ${tools.map(t => `<div style="padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);">${U.esc(t.name)} <span style="color:var(--text3);">${U.esc(t.source||'')}</span></div>`).join('')}
+          </div>` : ''}
+          <div style="margin-top:16px;text-align:right;"><button class="btn btn-secondary" onclick="window.Veil.modal.hide()">Close</button></div>
+        </div>`);
+    } catch (err) {
+      window.Veil.modal.show(`<div style="color:var(--red);padding:12px;">${window.Veil.utils.esc(err.message)}<br><br><button class="btn btn-secondary btn-sm" onclick="window.Veil.modal.hide()">Close</button></div>`);
+    }
+  },
+};