@newsails/veil-cli 1.0.1

package/ui/views/connection.js

@@ -0,0 +1,96 @@
+/* eslint-disable */
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.connection = {
+  render() {
+    const url    = localStorage.getItem('veil_url')    || 'http://localhost:5050';
+    const secret = localStorage.getItem('veil_secret') || '';
+    const U = window.Veil.utils;
+    return `
+      <div style="display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:var(--bg);">
+        <div style="width:100%;max-width:400px;">
+
+          <!-- Logo -->
+          <div style="text-align:center;margin-bottom:40px;">
+            <div style="display:inline-flex;width:56px;height:56px;background:linear-gradient(135deg,var(--accent),#5B8AF0);border-radius:16px;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px var(--accent-glow);margin-bottom:16px;">⚡</div>
+            <h1 style="font-size:22px;font-weight:700;letter-spacing:-0.03em;color:var(--text);margin-bottom:6px;">VeilCLI</h1>
+            <p style="font-size:13px;color:var(--text3);">Connect to your agent runtime</p>
+          </div>
+
+          <!-- Card -->
+          <div style="background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;">
+
+            <!-- Error -->
+            <div id="conn-error" style="display:none;background:var(--red-dim);border:1px solid rgba(239,68,68,0.3);border-radius:8px;padding:10px 14px;margin-bottom:20px;font-size:13px;color:var(--red);"></div>
+
+            <div style="margin-bottom:16px;">
+              <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:7px;">Server URL</label>
+              <input id="conn-url" class="input" type="text" value="${U.esc(url)}"
+                placeholder="http://localhost:5050" autocomplete="off" spellcheck="false"
+                style="font-family:monospace;font-size:13px;" />
+            </div>
+
+            <div style="margin-bottom:24px;">
+              <label style="display:block;font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:7px;">
+                Secret Token <span style="color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0;">(optional)</span>
+              </label>
+              <input id="conn-secret" class="input" type="password" value="${U.esc(secret)}"
+                placeholder="Leave empty if auth is disabled" autocomplete="off" />
+            </div>
+
+            <button id="conn-btn" class="btn btn-primary" style="width:100%;justify-content:center;padding:10px 14px;font-size:14px;border-radius:9px;">
+              Connect
+            </button>
+          </div>
+
+          <p style="font-size:12px;color:var(--text3);text-align:center;margin-top:20px;">
+            Credentials saved in <code style="color:var(--text2);">localStorage</code> · auto-reconnects on reload
+          </p>
+        </div>
+      </div>`;
+  },
+
+  mount() {
+    const btn    = document.getElementById('conn-btn');
+    const urlEl  = document.getElementById('conn-url');
+    const secEl  = document.getElementById('conn-secret');
+    const errEl  = document.getElementById('conn-error');
+
+    const connect = async () => {
+      const url    = urlEl.value.trim();
+      const secret = secEl.value.trim();
+      if (!url) { showErr('Server URL is required.'); return; }
+      btn.disabled = true;
+      btn.innerHTML = `${window.Veil.utils.spinner()} Connecting…`;
+      errEl.style.display = 'none';
+      const api = new window.Veil.API(url, secret);
+      try {
+        const data = await api.health();
+        window.Veil.saveConnection(url, secret);
+        window.Veil.state.api       = api;
+        window.Veil.state.connected = true;
+        window.Veil._updateIndicator();
+        document.getElementById('sidebar').style.display = 'flex';
+        window.Veil.utils.toast(`Connected to Veil v${data.version || '?'}`, 'success');
+        window.Veil.navigate('agents');
+      } catch (err) {
+        btn.disabled = false;
+        btn.textContent = 'Connect';
+        showErr(err.message || 'Connection failed');
+      }
+    };
+
+    const showErr = (msg) => {
+      errEl.textContent = msg;
+      errEl.style.display = 'block';
+    };
+
+    btn.addEventListener('click', connect);
+    urlEl.addEventListener('keydown', e => { if (e.key === 'Enter') connect(); });
+    secEl.addEventListener('keydown', e => { if (e.key === 'Enter') connect(); });
+  },
+
+  unmount() {},
+};

package/ui/views/daemons.js

@@ -0,0 +1,129 @@
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.daemons = {
+  _refreshTimer: null,
+
+  render() {
+    return `
+      <div style="padding:20px;">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
+          <h1 style="font-size:16px;font-weight:700;color:var(--text);">Daemon Schedulers</h1>
+          <button id="btn-refresh-daemons" class="btn btn-secondary btn-sm">↻ Refresh</button>
+        </div>
+        <div id="daemon-list">
+          <div style="text-align:center;padding:30px;color:var(--text3);">${window.Veil.utils.spinner()}</div>
+        </div>
+      </div>`;
+  },
+
+  async mount() {
+    await this._load();
+    document.getElementById('btn-refresh-daemons')?.addEventListener('click', () => this._load());
+    this._refreshTimer = setInterval(() => this._load(), 15000);
+  },
+
+  unmount() {
+    if (this._refreshTimer) { clearInterval(this._refreshTimer); this._refreshTimer = null; }
+  },
+
+  async _load() {
+    const el = document.getElementById('daemon-list');
+    if (!el) return;
+    try {
+      const [daemonData, agentData] = await Promise.all([
+        window.Veil.state.api.listDaemons(),
+        window.Veil.state.api.listAgents(),
+      ]);
+      const daemons     = daemonData.daemons || [];
+      const allAgents   = (agentData.agents || []).filter(a => a.modes && a.modes.includes('daemon'));
+      const activeNames = new Set(daemons.map(d => d.agentName));
+      const U = window.Veil.utils;
+
+      if (allAgents.length === 0 && daemons.length === 0) {
+        el.innerHTML = `<div class="card" style="padding:24px;text-align:center;color:var(--text3);font-size:13.5px;">No daemon-enabled agents found.<br><br>Add <code>modes.daemon.enabled: true</code> to an agent's config.</div>`;
+        return;
+      }
+
+      const rows = allAgents.map(a => {
+        const d = daemons.find(x => x.agentName === a.name);
+        const isActive = !!d;
+        return `
+          <div class="card" style="padding:16px;margin-bottom:12px;" id="daemon-row-${U.esc(a.name)}">
+            <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
+              <div style="flex:1;">
+                <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
+                  <span style="font-weight:600;font-size:14px;color:var(--text);">${U.esc(a.name)}</span>
+                  ${isActive
+                    ? `<span class="badge badge-active">active</span>`
+                    : `<span class="badge badge-closed">stopped</span>`}
+                </div>
+                <div style="font-size:12.5px;color:var(--text2);display:flex;gap:16px;flex-wrap:wrap;">
+                  ${d?.schedule ? `<span>⏱ ${U.esc(d.schedule)}</span>` : ''}
+                  ${d?.lastTick ? `<span>Last: ${U.relTime(d.lastTick)}</span>` : ''}
+                  ${d?.nextTick ? `<span>Next: ${U.relTime(d.nextTick)}</span>` : ''}
+                </div>
+              </div>
+              <div style="display:flex;gap:8px;flex-shrink:0;">
+                ${!isActive
+                  ? `<button class="btn btn-success btn-sm" data-daemon-start="${U.esc(a.name)}">▶ Start</button>`
+                  : `<button class="btn btn-danger btn-sm"   data-daemon-stop="${U.esc(a.name)}">■ Stop</button>`}
+                <button class="btn btn-secondary btn-sm" data-daemon-trigger="${U.esc(a.name)}">⚡ Trigger</button>
+              </div>
+            </div>
+            <div id="daemon-result-${U.esc(a.name)}" style="margin-top:10px;display:none;font-size:13px;"></div>
+          </div>`;
+      });
+      el.innerHTML = rows.join('');
+
+      el.querySelectorAll('[data-daemon-start]').forEach(btn => {
+        btn.addEventListener('click', () => this._startDaemon(btn.getAttribute('data-daemon-start')));
+      });
+      el.querySelectorAll('[data-daemon-stop]').forEach(btn => {
+        btn.addEventListener('click', () => this._stopDaemon(btn.getAttribute('data-daemon-stop')));
+      });
+      el.querySelectorAll('[data-daemon-trigger]').forEach(btn => {
+        btn.addEventListener('click', () => this._triggerDaemon(btn.getAttribute('data-daemon-trigger')));
+      });
+    } catch (err) {
+      if (el) el.innerHTML = `<div class="card" style="padding:16px;color:var(--red);font-size:13px;">${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  async _startDaemon(name) {
+    try {
+      await window.Veil.state.api.startDaemon(name);
+      window.Veil.utils.toast(`Daemon "${name}" started`, 'success');
+      this._load();
+    } catch (err) { window.Veil.utils.toast('Start failed: ' + err.message, 'error'); }
+  },
+
+  async _stopDaemon(name) {
+    try {
+      await window.Veil.state.api.stopDaemon(name);
+      window.Veil.utils.toast(`Daemon "${name}" stopped`, 'success');
+      this._load();
+    } catch (err) { window.Veil.utils.toast('Stop failed: ' + err.message, 'error'); }
+  },
+
+  async _triggerDaemon(name) {
+    const resultEl = document.getElementById('daemon-result-' + name);
+    try {
+      const data = await window.Veil.state.api.triggerDaemon(name);
+      window.Veil.utils.toast(`Daemon "${name}" triggered`, 'success');
+      if (resultEl) {
+        resultEl.style.display = 'block';
+        resultEl.style.color   = 'var(--green)';
+        resultEl.textContent   = 'Triggered — status: ' + (data.status || 'triggered');
+      }
+    } catch (err) {
+      window.Veil.utils.toast('Trigger failed: ' + err.message, 'error');
+      if (resultEl) {
+        resultEl.style.display = 'block';
+        resultEl.style.color   = 'var(--red)';
+        resultEl.textContent   = 'Error: ' + err.message;
+      }
+    }
+  },
+};

package/ui/views/feed.js

@@ -0,0 +1,194 @@
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.feed = {
+  _ws:        null,
+  _paused:    false,
+  _autoScroll: true,
+  _events:    [],
+  _filters:   { task: true, chat: true, daemon: true, system: true },
+
+  render() {
+    return `
+      <div style="display:flex;flex-direction:column;height:100%;">
+        <!-- Toolbar -->
+        <div style="flex-shrink:0;padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
+          <div style="display:flex;align-items:center;gap:8px;">
+            <span id="feed-status-dot" style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--border2);"></span>
+            <span id="feed-status-text" style="font-size:12.5px;color:var(--text3);">Disconnected</span>
+          </div>
+          <button id="btn-feed-connect" class="btn btn-primary btn-sm">Connect</button>
+          <button id="btn-feed-pause"   class="btn btn-secondary btn-sm">⏸ Pause</button>
+          <button id="btn-feed-clear"   class="btn btn-secondary btn-sm">Clear</button>
+          <div style="width:1px;height:20px;background:var(--border);margin:0 4px;"></div>
+          <div style="display:flex;align-items:center;gap:10px;font-size:12.5px;">
+            <label style="display:flex;align-items:center;gap:4px;cursor:pointer;"><input type="checkbox" id="filter-task"   ${this._filters.task   ?'checked':''}> task</label>
+            <label style="display:flex;align-items:center;gap:4px;cursor:pointer;"><input type="checkbox" id="filter-chat"   ${this._filters.chat   ?'checked':''}> chat</label>
+            <label style="display:flex;align-items:center;gap:4px;cursor:pointer;"><input type="checkbox" id="filter-daemon" ${this._filters.daemon ?'checked':''}> daemon</label>
+            <label style="display:flex;align-items:center;gap:4px;cursor:pointer;"><input type="checkbox" id="filter-system" ${this._filters.system ?'checked':''}> system</label>
+          </div>
+          <div style="margin-left:auto;display:flex;align-items:center;gap:8px;">
+            <label style="display:flex;align-items:center;gap:4px;font-size:12.5px;cursor:pointer;">
+              <input type="checkbox" id="feed-autoscroll" ${this._autoScroll ? 'checked' : ''}> Auto-scroll
+            </label>
+            <span id="feed-event-count" style="font-size:12px;color:var(--text3);">0 events</span>
+          </div>
+        </div>
+        <!-- Event log -->
+        <div id="feed-log" style="flex:1;overflow-y:auto;font-family:monospace;font-size:12.5px;padding:8px 0;background:var(--bg-alt);"></div>
+      </div>`;
+  },
+
+  mount() {
+    document.getElementById('btn-feed-connect').addEventListener('click', () => this._toggle());
+    document.getElementById('btn-feed-pause').addEventListener('click',   () => this._togglePause());
+    document.getElementById('btn-feed-clear').addEventListener('click',   () => this._clear());
+    document.getElementById('feed-autoscroll').addEventListener('change', (e) => {
+      this._autoScroll = e.target.checked;
+    });
+
+    ['task','chat','daemon','system'].forEach(type => {
+      document.getElementById('filter-' + type)?.addEventListener('change', (e) => {
+        this._filters[type] = e.target.checked;
+        this._reRender();
+      });
+    });
+
+    document.getElementById('feed-log')?.addEventListener('scroll', (e) => {
+      const el = e.target;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+      if (!atBottom && this._autoScroll) {
+        const cb = document.getElementById('feed-autoscroll');
+        if (cb) { cb.checked = false; this._autoScroll = false; }
+      }
+    });
+
+    this._connect();
+  },
+
+  unmount() {
+    if (this._ws) {
+      try { this._ws.close(); } catch {}
+      this._ws = null;
+    }
+  },
+
+  _connect() {
+    if (this._ws) {
+      try { this._ws.close(); } catch {}
+      this._ws = null;
+    }
+    this._setStatus('connecting', 'Connecting…', 'var(--yellow)');
+    this._ws = window.Veil.state.api.connectWS(
+      (msg)  => this._onMessage(msg),
+      ()     => this._setStatus('connected', 'Connected', 'var(--green)'),
+      ()     => {
+        this._setStatus('disconnected', 'Disconnected', 'var(--red)');
+        const btn = document.getElementById('btn-feed-connect');
+        if (btn) btn.textContent = 'Reconnect';
+      },
+    );
+    const btn = document.getElementById('btn-feed-connect');
+    if (btn) btn.textContent = 'Disconnect';
+  },
+
+  _toggle() {
+    if (this._ws && this._ws.readyState <= 1) {
+      this._ws.close();
+      this._ws = null;
+      this._setStatus('disconnected', 'Disconnected', 'var(--border2)');
+      const btn = document.getElementById('btn-feed-connect');
+      if (btn) btn.textContent = 'Connect';
+    } else {
+      this._connect();
+    }
+  },
+
+  _togglePause() {
+    this._paused = !this._paused;
+    const btn = document.getElementById('btn-feed-pause');
+    if (btn) btn.textContent = this._paused ? '▶ Resume' : '⏸ Pause';
+    if (!this._paused) this._reRender();
+  },
+
+  _clear() {
+    this._events = [];
+    const el = document.getElementById('feed-log');
+    if (el) el.innerHTML = '';
+    this._updateCount();
+  },
+
+  _setStatus(state, text, color) {
+    const dot  = document.getElementById('feed-status-dot');
+    const txt  = document.getElementById('feed-status-text');
+    if (dot) dot.style.background = color;
+    if (txt) { txt.textContent = text; txt.style.color = color; }
+  },
+
+  _onMessage(msg) {
+    if (this._paused) { this._events.push(msg); return; }
+    this._events.push(msg);
+    const type = (msg.type || '').split('.')[0];
+    if (!this._filters[type] && !(type === 'connected' && this._filters.system)) return;
+    this._appendEvent(msg);
+    this._updateCount();
+  },
+
+  _reRender() {
+    const el = document.getElementById('feed-log');
+    if (!el) return;
+    el.innerHTML = '';
+    this._events.forEach(ev => {
+      const type = (ev.type || '').split('.')[0];
+      const show = this._filters[type] || (ev.type === 'connected' && this._filters.system);
+      if (show) this._appendEvent(ev);
+    });
+    this._updateCount();
+  },
+
+  _appendEvent(ev) {
+    const el = document.getElementById('feed-log');
+    if (!el) return;
+    const U   = window.Veil.utils;
+    const row = document.createElement('div');
+    const now = new Date().toISOString().slice(11, 23);
+
+    const { typeColor, typeBg } = this._typeStyle(ev.type);
+    const agentPart   = ev.agentName  ? `<span style="color:var(--accent);">${U.esc(ev.agentName)}</span> ` : '';
+    const taskPart    = ev.taskId     ? `<span style="color:var(--text3);font-size:0.72rem;">${U.esc(U.shortId(ev.taskId))}</span> ` : '';
+    const sessionPart = ev.sessionId  ? `<span style="color:var(--text3);font-size:0.72rem;">${U.esc(U.shortId(ev.sessionId))}</span> ` : '';
+
+    let dataPart = '';
+    if (ev.event && typeof ev.event === 'object') {
+      const e = ev.event;
+      if (e.status)   dataPart = `<span style="color:var(--text);">status: ${U.esc(e.status)}</span>`;
+      else if (e.type === 'tool.start') dataPart = `<span style="color:var(--yellow);">⚙ ${U.esc(e.toolName)}</span>`;
+      else if (e.type === 'tool.end')   dataPart = `<span style="color:var(--green);">✓ ${U.esc(e.toolName)} ${U.formatMs(e.durationMs)}</span>`;
+      else if (e.content) dataPart = `<span style="color:var(--text2);">${U.esc(U.truncate(e.content, 80))}</span>`;
+      else dataPart = `<span style="color:var(--text3);">${U.esc(JSON.stringify(e).slice(0, 100))}</span>`;
+    }
+
+    row.style.cssText = 'padding:4px 16px;border-bottom:1px solid var(--bg);display:flex;align-items:baseline;gap:8px;';
+    row.innerHTML = `
+      <span style="color:var(--text3);flex-shrink:0;">${now}</span>
+      <span style="background:${typeBg};color:${typeColor};padding:1px 6px;border-radius:3px;font-size:0.7rem;font-weight:600;flex-shrink:0;">${U.esc(ev.type || 'unknown')}</span>
+      <span style="flex:1;">${agentPart}${taskPart}${sessionPart}${dataPart}</span>`;
+
+    el.appendChild(row);
+    if (this._autoScroll) el.scrollTop = el.scrollHeight;
+  },
+
+  _typeStyle(type) {
+    const t = (type || '').split('.')[0];
+    if (t === 'task')    return { typeColor: 'var(--accent)', typeBg: 'var(--bg-task)' };
+    if (t === 'chat')    return { typeColor: 'var(--green)', typeBg: 'var(--bg-chat)' };
+    if (t === 'daemon')  return { typeColor: 'var(--yellow)', typeBg: 'var(--bg-daemon)' };
+    return                      { typeColor: 'var(--text2)', typeBg: 'var(--border)' };
+  },
+
+  _updateCount() {
+    const el = document.getElementById('feed-event-count');
+    if (el) el.textContent = this._events.length + ' events';
+  },
+};