@newsails/veil-cli 1.0.1

package/ui/views/sessions.js

@@ -0,0 +1,314 @@
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.sessions = {
+  _selected: null,
+  _msgOffset: 0,
+  _msgLimit: 50,
+
+  render() {
+    return `
+      <div style="display:flex;height:100%;">
+        <!-- List -->
+        <div style="width:280px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface);">
+          <div style="padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;">
+            <span style="font-weight:600;font-size:13px;color:var(--text);flex:1;">Sessions</span>
+            <button id="btn-refresh-sessions" class="btn btn-secondary btn-sm" title="Refresh">↻</button>
+          </div>
+          <div style="padding:8px 14px;border-bottom:1px solid var(--border);display:flex;gap:6px;">
+            <select id="sess-filter-status" class="input" style="flex:1;padding:4px 8px;font-size:12px;cursor:pointer;">
+              <option value="">All</option>
+              <option value="active">active</option>
+              <option value="closed">closed</option>
+            </select>
+            <select id="sess-filter-agent" class="input" style="flex:1;padding:4px 8px;font-size:12px;cursor:pointer;">
+              <option value="">All agents</option>
+            </select>
+          </div>
+          <div id="sess-list" style="flex:1;overflow-y:auto;"></div>
+        </div>
+        <!-- Detail -->
+        <div id="sess-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 a session to view its messages
+          </div>
+        </div>
+      </div>`;
+  },
+
+  async mount(params) {
+    params = params || {};
+    await this._populateAgentFilter();
+    await this._loadList();
+    document.getElementById('btn-refresh-sessions').addEventListener('click', () => this._loadList());
+    document.getElementById('sess-filter-status').addEventListener('change', () => this._loadList());
+    document.getElementById('sess-filter-agent').addEventListener('change', () => this._loadList());
+    /* Navigate here directly with a session pre-selected (e.g. from Tasks) */
+    if (params.sessionId) {
+      this._selected = params.sessionId;
+      this._msgOffset = 0;
+      this._loadDetail(params.sessionId);
+    }
+  },
+
+  unmount() { this._selected = null; },
+
+  async _populateAgentFilter() {
+    const sel = document.getElementById('sess-filter-agent');
+    if (!sel) return;
+    try {
+      const data = await window.Veil.state.api.listAgents();
+      const preferred = window.Veil.state.currentAgent;
+      (data.agents || []).forEach(a => {
+        const opt = document.createElement('option');
+        opt.value = a.name; opt.textContent = a.name;
+        if (a.name === preferred) opt.selected = true;
+        sel.appendChild(opt);
+      });
+    } catch {}
+  },
+
+  async _loadList() {
+    const el = document.getElementById('sess-list');
+    if (!el) return;
+    el.innerHTML = `<div style="padding:16px;text-align:center;color:var(--text3);">${window.Veil.utils.spinner()}</div>`;
+    const params = { limit: 50 };
+    const status = document.getElementById('sess-filter-status')?.value;
+    const agent  = document.getElementById('sess-filter-agent')?.value;
+    if (status) params.status    = status;
+    if (agent)  params.agentName = agent;
+    try {
+      const data     = await window.Veil.state.api.listSessions(params);
+      const sessions = data.sessions || [];
+      if (sessions.length === 0) {
+        el.innerHTML = `<div style="padding:20px;text-align:center;color:var(--text3);font-size:13px;">No sessions found</div>`;
+        return;
+      }
+      const U = window.Veil.utils;
+      el.innerHTML = sessions.map(s => `
+        <div class="list-item ${this._selected === s.id ? 'selected' : ''}" data-sess-id="${U.esc(s.id)}">
+          <div style="display:flex;align-items:center;gap:6px;margin-bottom:3px;">
+            ${U.badge(s.status)}
+            <span class="badge badge-closed">${U.esc(s.mode || 'chat')}</span>
+            <span style="font-size:12px;color:var(--text3);margin-left:auto;">${U.relTime(s.created_at)}</span>
+          </div>
+          <div style="font-size:12.5px;color:var(--text2);margin-bottom:2px;">${U.esc(s.agent_name)}</div>
+          <div style="font-size:12px;color:var(--text3);">${s.message_count || 0} messages · ${U.esc(s.model || '').split('/').pop()}</div>
+        </div>`).join('');
+      el.querySelectorAll('[data-sess-id]').forEach(row => {
+        row.addEventListener('click', () => {
+          const id = row.getAttribute('data-sess-id');
+          el.querySelectorAll('.list-item').forEach(r => r.classList.remove('selected'));
+          row.classList.add('selected');
+          this._selected = id;
+          this._msgOffset = 0;
+          this._loadDetail(id);
+        });
+      });
+    } catch (err) {
+      if (el) el.innerHTML = `<div style="padding:14px;color:var(--red);font-size:13px;">${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  async _loadDetail(id) {
+    const el = document.getElementById('sess-detail');
+    if (!el) return;
+    el.innerHTML = `<div style="padding:20px;color:var(--text3);">${window.Veil.utils.spinner()} Loading…</div>`;
+    try {
+      const [sessData, msgData] = await Promise.all([
+        window.Veil.state.api.getSession(id),
+        window.Veil.state.api.getSessionMessages(id, { limit: this._msgLimit, offset: this._msgOffset }),
+      ]);
+      const sess = sessData.session;
+      const msgs = msgData.messages || [];
+      const U = window.Veil.utils;
+
+      const ctxRingHtml = U.contextRing(sess.context_size, sess.context_size_limit, [
+        { label: 'Context now',   value: (sess.context_size || 0).toLocaleString() + (sess.context_size_limit ? ' / ' + sess.context_size_limit.toLocaleString() : '') + ' tokens' },
+        { label: 'Total in',      value: (sess.total_input_tokens  || 0).toLocaleString() + ' tokens' },
+        { label: 'Total out',     value: (sess.total_output_tokens || 0).toLocaleString() + ' tokens' },
+        { label: 'Cached',        value: (sess.total_cache_tokens  || 0).toLocaleString() + ' tokens' },
+        { label: 'Total cost',    value: U.formatCost(sess.cost) || '$0' },
+      ]);
+      el.innerHTML = `
+        <div style="padding:14px 20px;border-bottom:1px solid var(--border);">
+          <!-- Row 1: badges + actions + ring -->
+          <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
+            ${U.badge(sess.status)}
+            <span class="badge badge-closed">${U.esc(sess.mode)}</span>
+            ${sess.title ? `<span style="font-size:13px;font-weight:600;color:var(--text);">${U.esc(sess.title)}</span>` : ''}
+            <code style="font-size:11.5px;color:var(--text3);font-family:'JetBrains Mono',monospace;">${U.esc(sess.id)}</code>
+            <div style="margin-left:auto;display:flex;align-items:center;gap:8px;">
+              ${ctxRingHtml}
+              <button class="btn btn-primary btn-sm" id="btn-resume-chat-sess">→ Chat</button>
+              ${sess.status === 'active' ? `<button class="btn btn-secondary btn-sm" id="btn-reset-sess">↺ Reset</button>` : ''}
+              <button class="btn btn-secondary btn-sm" id="btn-close-sess">${sess.status === 'active' ? 'Close' : 'Delete'}</button>
+              ${sess.status !== 'active' ? `<button class="btn btn-danger btn-sm" id="btn-hard-del-sess">Hard Delete</button>` : ''}
+            </div>
+          </div>
+          <!-- Row 2: token stats grid -->
+          <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 14px;">
+            <div><div class="info-label">Agent</div><div style="font-size:13px;color:var(--text);">${U.esc(sess.agent_name)}</div></div>
+            <div><div class="info-label">Model</div><div style="font-size:12.5px;color:var(--text2);word-break:break-all;">${U.esc(sess.model || '—')}</div></div>
+            <div><div class="info-label">Messages</div><div style="font-size:13px;color:var(--text);">${sess.message_count || 0}</div></div>
+            <div><div class="info-label">Total cost</div><div style="font-size:13px;color:var(--text);">${U.formatCost(sess.cost) || '—'}</div></div>
+            <div><div class="info-label">Tokens in</div><div style="font-size:13px;color:var(--text);">${(sess.total_input_tokens || 0).toLocaleString()}</div></div>
+            <div><div class="info-label">Tokens out</div><div style="font-size:13px;color:var(--text);">${(sess.total_output_tokens || 0).toLocaleString()}</div></div>
+            <div><div class="info-label">Cached</div><div style="font-size:13px;color:var(--text);">${(sess.total_cache_tokens || 0).toLocaleString()}</div></div>
+            <div><div class="info-label">Created</div><div style="font-size:12px;color:var(--text2);">${U.relTime(sess.created_at)}</div></div>
+            <div><div class="info-label">Updated</div><div style="font-size:12px;color:var(--text2);">${U.relTime(sess.updated_at)}</div></div>
+            ${sess.model_thinking ? `<div><div class="info-label">Thinking</div><div style="font-size:12px;color:var(--accent);">enabled</div></div>` : ''}
+          </div>
+        </div>
+        <div id="sess-messages" style="padding:16px;display:flex;flex-direction:column;gap:10px;"></div>
+        ${msgs.length >= this._msgLimit ? `
+          <div style="padding:12px 20px;text-align:center;border-top:1px solid var(--border);">
+            <button class="btn btn-secondary btn-sm" id="btn-load-more-msgs">Load more messages</button>
+          </div>` : ''}`;
+
+      const msgsEl = document.getElementById('sess-messages');
+      if (msgsEl) msgsEl.innerHTML = msgs.map(m => this._renderMessage(m, U)).join('');
+
+      document.getElementById('btn-resume-chat-sess')?.addEventListener('click', () => {
+        window.Veil.navigate('chat', { sessionId: sess.id, agentName: sess.agent_name });
+      });
+
+      document.getElementById('btn-reset-sess')?.addEventListener('click', async () => {
+        if (!confirm('Reset this session? All messages will be cleared.')) return;
+        try {
+          await window.Veil.state.api.resetSession(id);
+          window.Veil.utils.toast('Session reset', 'success');
+          this._loadDetail(id);
+        } catch (err) { window.Veil.utils.toast('Reset failed: ' + err.message, 'error'); }
+      });
+
+      document.getElementById('btn-close-sess')?.addEventListener('click', async () => {
+        try {
+          await window.Veil.state.api.deleteSession(id, false);
+          window.Veil.utils.toast('Session closed', 'success');
+          this._selected = null;
+          el.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13.5px;">Session closed</div>`;
+          this._loadList();
+        } catch (err) { window.Veil.utils.toast('Failed: ' + err.message, 'error'); }
+      });
+
+      document.getElementById('btn-hard-del-sess')?.addEventListener('click', async () => {
+        if (!confirm('Hard delete this session and all its messages? This is permanent.')) return;
+        try {
+          await window.Veil.state.api.deleteSession(id, true);
+          window.Veil.utils.toast('Session deleted', 'success');
+          this._selected = null;
+          el.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13.5px;">Session deleted</div>`;
+          this._loadList();
+        } catch (err) { window.Veil.utils.toast('Delete failed: ' + err.message, 'error'); }
+      });
+
+      document.getElementById('btn-load-more-msgs')?.addEventListener('click', async () => {
+        this._msgOffset += this._msgLimit;
+        const more = await window.Veil.state.api.getSessionMessages(id, { limit: this._msgLimit, offset: this._msgOffset });
+        const newMsgs = more.messages || [];
+        if (msgsEl) msgsEl.innerHTML += newMsgs.map(m => this._renderMessage(m, U)).join('');
+        if (newMsgs.length < this._msgLimit) {
+          document.getElementById('btn-load-more-msgs')?.remove();
+        }
+      });
+    } catch (err) {
+      if (el) el.innerHTML = `<div style="padding:14px;color:var(--red);font-size:13px;">${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  _renderMessage(msg, U) {
+    const role = msg.role;
+    let cls = '', label = '', labelColor = 'var(--text2)';
+    if      (role === 'system')    { cls = 'msg-system';    label = 'system';    labelColor = 'var(--text3)'; }
+    else if (role === 'user')      { cls = 'msg-user';      label = 'you';       labelColor = 'var(--accent)'; }
+    else if (role === 'assistant') { cls = 'msg-assistant'; label = 'assistant'; labelColor = 'var(--text2)'; }
+    else if (role === 'tool')      { cls = 'msg-tool';      label = 'tool';      labelColor = 'var(--yellow)'; }
+
+    /* Collapsible tool_calls blocks — matching chat style */
+    let toolCallsHtml = '';
+    if (msg.tool_calls) {
+      try {
+        const calls = typeof msg.tool_calls === 'string' ? JSON.parse(msg.tool_calls) : msg.tool_calls;
+        toolCallsHtml = `<div style="margin-top:6px;">${calls.map(c => {
+          const name = c.function?.name || c.name || '?';
+          let argsStr = '';
+          try {
+            const a = c.function?.arguments ? JSON.parse(c.function.arguments) : null;
+            argsStr = a ? JSON.stringify(a, null, 2) : (c.function?.arguments || '');
+          } catch { argsStr = c.function?.arguments || ''; }
+          const cid = 'tc-' + (c.id || Math.random().toString(36).slice(2));
+          return `<div class="tool-block" style="padding:6px 10px;margin-top:4px;">
+            <div style="display:flex;align-items:center;gap:8px;cursor:pointer;" onclick="(function(){
+              var b=document.getElementById('${cid}-body');
+              var t=document.getElementById('${cid}-tog');
+              var open=b.style.display==='none';
+              b.style.display=open?'block':'none';
+              t.textContent=open?'▾ hide':'▸ show';
+            })()">
+              <span style="color:var(--yellow);font-weight:600;font-size:13px;">⚙ ${U.esc(name)}</span>
+              <span id="${cid}-tog" style="color:var(--text3);font-size:11.5px;margin-left:auto;">▸ show</span>
+            </div>
+            <div id="${cid}-body" style="display:none;margin-top:5px;">
+              ${argsStr ? `<pre style="color:var(--text2);font-size:12px;padding:5px 8px;background:var(--bg);border-radius:5px;overflow-x:auto;">${U.esc(argsStr.slice(0, 800))}</pre>` : ''}
+            </div>
+          </div>`;
+        }).join('')}</div>`;
+      } catch {}
+    }
+
+    /* Token info including cache + model key */
+    const tokenParts = [];
+    if (msg.input_tokens)  tokenParts.push(msg.input_tokens.toLocaleString() + ' in');
+    if (msg.output_tokens) tokenParts.push(msg.output_tokens.toLocaleString() + ' out');
+    if (msg.cache_tokens)  tokenParts.push(msg.cache_tokens.toLocaleString() + ' cached');
+    if (msg.cost)          tokenParts.push(U.formatCost(msg.cost));
+    if (msg.model_key)     tokenParts.push(msg.model_key.split('/').pop());
+    const tokenInfo = tokenParts.length
+      ? `<span style="font-size:11px;color:var(--text3);margin-left:8px;">${U.esc(tokenParts.join(' / '))}</span>`
+      : '';
+
+    /* Collapse long messages — system always, others when > 400 chars */
+    const THRESHOLD = 400;
+    const content   = msg.content || '';
+    const shouldCollapse = role === 'system' || content.length > THRESHOLD;
+    const msgId     = 'msg-' + (msg.id || Math.random().toString(36).slice(2));
+
+    let contentHtml = '';
+    if (content) {
+      if (shouldCollapse) {
+        const preview = U.esc(content.slice(0, 200)) + (content.length > 200 ? '…' : '');
+        contentHtml = `
+          <div class="sess-msg-body" id="${msgId}-body" style="font-size:13.5px;white-space:pre-wrap;line-height:1.5;word-break:break-word;display:none;">${U.esc(content)}</div>
+          <div class="sess-msg-preview" id="${msgId}-preview" style="font-size:13.5px;white-space:pre-wrap;line-height:1.5;word-break:break-word;color:var(--text2);">${preview}</div>
+          <button onclick="(function(){
+            var b=document.getElementById('${msgId}-body');
+            var p=document.getElementById('${msgId}-preview');
+            var t=document.getElementById('${msgId}-tog');
+            var open=b.style.display==='none';
+            b.style.display=open?'block':'none';
+            p.style.display=open?'none':'block';
+            t.textContent=open?'▾ Show less':'▸ Show more';
+          })()" id="${msgId}-tog"
+            style="margin-top:6px;background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;padding:0;font-family:inherit;">▸ Show more</button>`;
+      } else {
+        contentHtml = `<div style="font-size:13.5px;white-space:pre-wrap;line-height:1.5;word-break:break-word;">${U.esc(content)}</div>`;
+      }
+    }
+
+    const isRight = role === 'user';
+    return `
+      <div style="${isRight ? 'display:flex;justify-content:flex-end;' : ''}">
+        <div class="${cls}" style="max-width:80%;padding:10px 14px;">
+          <div style="font-size:12px;font-weight:600;color:${labelColor};margin-bottom:5px;display:flex;align-items:center;gap:6px;">
+            ${U.esc(label)}${tokenInfo}
+            <span style="font-size:12px;color:var(--border2);margin-left:auto;">${U.relTime(msg.created_at)}</span>
+          </div>
+          ${contentHtml}
+          ${toolCallsHtml}
+          ${role === 'tool' && msg.tool_call_id ? `<div style="font-size:11px;color:var(--text3);margin-top:4px;">call_id: ${U.esc(msg.tool_call_id)}</div>` : ''}
+        </div>
+      </div>`;
+  },
+};

package/ui/views/settings.js

@@ -0,0 +1,142 @@
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.settings = {
+  _level:    'merged',
+  _settings: null,
+  _editing:  false,
+
+  render() {
+    return `
+      <div style="padding:20px;">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;">
+          <h1 style="font-size:16px;font-weight:700;color:var(--text);">Settings</h1>
+          <div style="display:flex;gap:6px;flex-wrap:wrap;">
+            ${['merged','project','global','local'].map(l => `
+              <button class="btn btn-${this._level===l?'primary':'secondary'} btn-sm" data-settings-level="${l}">${l}</button>
+            `).join('')}
+          </div>
+        </div>
+        <div id="settings-content">
+          <div style="text-align:center;padding:30px;color:var(--text3);">${window.Veil.utils.spinner()}</div>
+        </div>
+      </div>`;
+  },
+
+  async mount() {
+    document.querySelectorAll('[data-settings-level]').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        this._level   = btn.getAttribute('data-settings-level');
+        this._editing = false;
+        document.querySelectorAll('[data-settings-level]').forEach(b => {
+          b.className = `btn btn-${b.getAttribute('data-settings-level') === this._level ? 'primary' : 'secondary'} btn-sm`;
+        });
+        await this._load();
+      });
+    });
+    await this._load();
+  },
+
+  unmount() { this._editing = false; },
+
+  async _load() {
+    const el = document.getElementById('settings-content');
+    if (!el) return;
+    el.innerHTML = `<div style="text-align:center;padding:30px;color:var(--text3);">${window.Veil.utils.spinner()}</div>`;
+    try {
+      const data = await window.Veil.state.api.getSettings(this._level);
+      this._settings = data.settings;
+      this._render(data);
+    } catch (err) {
+      if (el) el.innerHTML = `<div style="color:var(--red);font-size:13px;padding:12px;">${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  _render(data) {
+    const el = document.getElementById('settings-content');
+    if (!el) return;
+    const U = window.Veil.utils;
+    const isEditable = this._level !== 'merged';
+    const settingsJson = JSON.stringify(this._redact(this._settings), null, 2);
+
+    el.innerHTML = `
+      <div class="card" style="margin-bottom:14px;">
+        <div class="panel-header" style="display:flex;align-items:center;justify-content:space-between;">
+          <span>
+            ${U.esc(this._level)} settings
+            ${data.path ? `<code style="font-size:11px;color:var(--text3);margin-left:8px;">${U.esc(data.path)}</code>` : ''}
+          </span>
+          ${isEditable && !this._editing
+            ? `<button class="btn btn-secondary btn-sm" id="btn-edit-settings">Edit</button>`
+            : ''}
+          ${this._editing
+            ? `<div style="display:flex;gap:8px;">
+                <button class="btn btn-success btn-sm" id="btn-save-settings">Save</button>
+                <button class="btn btn-secondary btn-sm" id="btn-cancel-settings">Cancel</button>
+               </div>`
+            : ''}
+        </div>
+        <div style="padding:4px;">
+          ${this._editing
+            ? `<textarea id="settings-editor" class="input mono" rows="28" style="border:none;border-radius:0;width:100%;resize:vertical;background:var(--bg);padding:14px 16px;line-height:1.6;">${U.esc(settingsJson)}</textarea>`
+            : `<pre style="padding:14px 16px;font-family:monospace;font-size:13px;line-height:1.6;color:var(--text);overflow-x:auto;">${U.esc(settingsJson)}</pre>`}
+        </div>
+      </div>
+      <div id="settings-err" style="display:none;background:var(--red-dim);color:var(--red);border:1px solid var(--border);border-radius:6px;padding:10px 14px;font-size:13px;margin-bottom:12px;"></div>
+      ${this._level === 'merged'
+        ? `<div style="font-size:12.5px;color:var(--text3);padding:4px;">Read-only merged view. Switch to project/global/local to edit.</div>`
+        : ''}
+      ${!isEditable
+        ? ''
+        : `<div style="font-size:12px;color:var(--text3);padding:4px;">API keys shown redacted. Edit to see/change the actual file at <code>${U.esc(data.path || '?')}</code></div>`}
+    `;
+
+    document.getElementById('btn-edit-settings')?.addEventListener('click', () => {
+      this._editing = true;
+      this._render(data);
+    });
+    document.getElementById('btn-cancel-settings')?.addEventListener('click', () => {
+      this._editing = false;
+      this._render(data);
+    });
+    document.getElementById('btn-save-settings')?.addEventListener('click', async () => {
+      const textarea = document.getElementById('settings-editor');
+      const errEl    = document.getElementById('settings-err');
+      const btn      = document.getElementById('btn-save-settings');
+      if (!textarea) return;
+      let parsed;
+      try { parsed = JSON.parse(textarea.value); }
+      catch { errEl.textContent = 'Invalid JSON'; errEl.style.display = 'block'; return; }
+      btn.disabled = true; btn.innerHTML = window.Veil.utils.spinner() + ' Saving…';
+      errEl.style.display = 'none';
+      try {
+        const res = await window.Veil.state.api.putSettings(parsed, this._level);
+        this._settings = res.settings;
+        this._editing  = false;
+        window.Veil.utils.toast('Settings saved', 'success');
+        await this._load();
+      } catch (err) {
+        btn.disabled = false; btn.textContent = 'Save';
+        errEl.textContent = err.message; errEl.style.display = 'block';
+      }
+    });
+  },
+
+  _redact(obj, path) {
+    if (!obj || typeof obj !== 'object') return obj;
+    path = path || '';
+    const out = Array.isArray(obj) ? [] : {};
+    for (const key of Object.keys(obj)) {
+      const childPath = path ? path + '.' + key : key;
+      if (typeof obj[key] === 'string' && childPath.toLowerCase().includes('api_key') && obj[key].length > 4) {
+        out[key] = obj[key].slice(0, 3) + '…' + obj[key].slice(-4);
+      } else if (typeof obj[key] === 'object' && obj[key] !== null) {
+        out[key] = this._redact(obj[key], childPath);
+      } else {
+        out[key] = obj[key];
+      }
+    }
+    return out;
+  },
+};