@newsails/veil-cli 1.0.1

package/ui/views/memory.js

@@ -0,0 +1,263 @@
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.memory = {
+  _tab:       'agent',
+  _agent:     null,
+  _file:      null,
+  _content:   '',
+
+  render() {
+    return `
+      <div style="display:flex;height:100%;">
+        <!-- Left: agent/file selector -->
+        <div style="width:260px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;">
+          <!-- Tab strip -->
+          <div style="display:flex;border-bottom:1px solid var(--border);">
+            <button id="mem-tab-agent"  class="btn btn-secondary" style="flex:1;border-radius:0;border:none;border-bottom:2px solid ${this._tab==='agent'?'var(--accent)':'transparent'};padding:9px;font-size:13px;">Agent</button>
+            <button id="mem-tab-global" class="btn btn-secondary" style="flex:1;border-radius:0;border:none;border-bottom:2px solid ${this._tab==='global'?'var(--accent)':'transparent'};padding:9px;font-size:13px;">Global</button>
+          </div>
+          <!-- Agent selector (agent tab only) -->
+          <div id="mem-agent-sel-wrap" style="${this._tab==='agent'?'':'display:none;'}padding:10px 12px;border-bottom:1px solid var(--border);">
+            <select id="mem-agent-sel" class="input" style="padding:5px 10px;font-size:13px;cursor:pointer;"></select>
+          </div>
+          <!-- File list -->
+          <div id="mem-file-list" style="flex:1;overflow-y:auto;">
+            <div style="padding:16px;text-align:center;color:var(--text3);font-size:13px;">${window.Veil.utils.spinner()}</div>
+          </div>
+          <!-- New file button -->
+          <div style="padding:10px 12px;border-top:1px solid var(--border);">
+            <button id="btn-mem-newfile" class="btn btn-secondary" style="width:100%;justify-content:center;">+ New File</button>
+          </div>
+        </div>
+        <!-- Right: editor -->
+        <div id="mem-editor-panel" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
+          <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13.5px;">
+            Select a file to edit
+          </div>
+        </div>
+      </div>`;
+  },
+
+  async mount() {
+    await this._populateAgentSel();
+    if (this._tab === 'agent') await this._loadFiles();
+
+    document.getElementById('mem-tab-agent').addEventListener('click', async () => {
+      this._tab = 'agent'; this._file = null; this._content = '';
+      this._updateTabs();
+      document.getElementById('mem-agent-sel-wrap').style.display = '';
+      await this._loadFiles();
+      this._showEditorPlaceholder();
+    });
+    document.getElementById('mem-tab-global').addEventListener('click', async () => {
+      this._tab = 'global'; this._file = null; this._content = '';
+      this._updateTabs();
+      document.getElementById('mem-agent-sel-wrap').style.display = 'none';
+      await this._loadFiles();
+      this._showEditorPlaceholder();
+    });
+    document.getElementById('mem-agent-sel').addEventListener('change', async (e) => {
+      this._agent = e.target.value;
+      this._file = null;
+      await this._loadFiles();
+      this._showEditorPlaceholder();
+    });
+    document.getElementById('btn-mem-newfile').addEventListener('click', () => this._showNewFileModal());
+  },
+
+  unmount() {},
+
+  _updateTabs() {
+    const agentBtn  = document.getElementById('mem-tab-agent');
+    const globalBtn = document.getElementById('mem-tab-global');
+    if (agentBtn)  agentBtn.style.borderBottomColor  = this._tab === 'agent'  ? 'var(--accent)' : 'transparent';
+    if (globalBtn) globalBtn.style.borderBottomColor = this._tab === 'global' ? 'var(--accent)' : 'transparent';
+  },
+
+  async _populateAgentSel() {
+    const sel = document.getElementById('mem-agent-sel');
+    if (!sel) return;
+    try {
+      const data = await window.Veil.state.api.listAgents();
+      const preferred = window.Veil.state.currentAgent || this._agent;
+      sel.innerHTML = (data.agents || []).map(a =>
+        `<option value="${window.Veil.utils.esc(a.name)}" ${a.name === preferred ? 'selected' : ''}>${window.Veil.utils.esc(a.name)}</option>`
+      ).join('') || '<option value="">No agents</option>';
+      this._agent = sel.value;
+    } catch {}
+  },
+
+  async _loadFiles() {
+    const el = document.getElementById('mem-file-list');
+    if (!el) return;
+    el.innerHTML = `<div style="padding:14px;text-align:center;color:var(--text3);">${window.Veil.utils.spinner()}</div>`;
+    try {
+      let files = [];
+      if (this._tab === 'agent') {
+        if (!this._agent) { el.innerHTML = `<div style="padding:14px;color:var(--text3);font-size:13px;">Select an agent</div>`; return; }
+        const data = await window.Veil.state.api.getAgentMemory(this._agent);
+        files = data.files || [];
+      } else {
+        const data = await window.Veil.state.api.listMemory();
+        files = data.files || [];
+      }
+      if (files.length === 0) {
+        el.innerHTML = `<div style="padding:16px;text-align:center;color:var(--text3);font-size:13px;">No memory files.<br>Use <b>+ New File</b> to create one.</div>`;
+        return;
+      }
+      const U = window.Veil.utils;
+      el.innerHTML = files.map(f => `
+        <div class="list-item ${this._file === f.name ? 'selected' : ''}" data-mem-file="${U.esc(f.name)}">
+          <div style="font-size:13.5px;color:var(--text);font-weight:500;">${U.esc(f.name)}</div>
+          <div style="font-size:12px;color:var(--text3);margin-top:2px;">${Math.ceil((f.size || 0) / 1024 * 10) / 10} KB · ${U.relTime(f.modified)}</div>
+        </div>`).join('');
+      el.querySelectorAll('[data-mem-file]').forEach(row => {
+        row.addEventListener('click', () => {
+          const name = row.getAttribute('data-mem-file');
+          el.querySelectorAll('.list-item').forEach(r => r.classList.remove('selected'));
+          row.classList.add('selected');
+          this._file = name;
+          this._openFile(name);
+        });
+      });
+    } catch (err) {
+      if (el) el.innerHTML = `<div style="padding:14px;color:var(--red);font-size:13px;">${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  async _openFile(name) {
+    const el = document.getElementById('mem-editor-panel');
+    if (!el) return;
+    el.innerHTML = `<div style="padding:20px;color:var(--text3);">${window.Veil.utils.spinner()} Loading…</div>`;
+    try {
+      let content = '';
+      if (this._tab === 'agent') {
+        const data = await window.Veil.state.api.getAgentMemoryFile(this._agent, name);
+        content = data.content || '';
+      } else {
+        const data = await window.Veil.state.api.getMemoryFile(name);
+        content = data.content || '';
+      }
+      this._content = content;
+      this._renderEditor(name, content);
+    } catch (err) {
+      if (el) el.innerHTML = `<div style="padding:14px;color:var(--red);font-size:13px;">${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  _renderEditor(name, content) {
+    const el = document.getElementById('mem-editor-panel');
+    if (!el) return;
+    const U = window.Veil.utils;
+    el.innerHTML = `
+      <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;">
+        <span style="font-weight:600;font-size:14px;color:var(--text);">${U.esc(name)}</span>
+        <span style="font-size:12px;color:var(--text3);">${this._tab === 'agent' ? U.esc(this._agent) : 'global'}</span>
+        <div style="margin-left:auto;display:flex;gap:8px;">
+          <button class="btn btn-success btn-sm" id="btn-mem-save">Save</button>
+          <button class="btn btn-danger btn-sm"  id="btn-mem-delete">Delete</button>
+        </div>
+      </div>
+      <div style="flex:1;overflow:hidden;display:flex;flex-direction:column;">
+        <textarea id="mem-editor-area" class="input mono" style="flex:1;border:none;border-radius:0;resize:none;padding:14px 16px;font-size:13px;line-height:1.6;background:var(--bg);"></textarea>
+      </div>
+      <div style="padding:8px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--text3);display:flex;justify-content:space-between;">
+        <span id="mem-save-status"></span>
+        <span>Markdown file · changes take effect on next session</span>
+      </div>`;
+
+    document.getElementById('btn-mem-save').addEventListener('click', async () => {
+      const textarea = document.getElementById('mem-editor-area');
+      if (!textarea) return;
+      const newContent = textarea.value;
+      const statusEl   = document.getElementById('mem-save-status');
+      const btn = document.getElementById('btn-mem-save');
+      btn.disabled = true; btn.innerHTML = U.spinner() + ' Saving…';
+      try {
+        if (this._tab === 'agent') {
+          await window.Veil.state.api.putAgentMemoryFile(this._agent, name, newContent);
+        } else {
+          await window.Veil.state.api.putMemoryFile(name, newContent);
+        }
+        if (statusEl) { statusEl.textContent = 'Saved ✓'; statusEl.style.color = 'var(--green)'; }
+        window.Veil.utils.toast('Memory file saved', 'success');
+        this._content = newContent;
+        btn.disabled = false; btn.textContent = 'Save';
+        this._loadFiles();
+      } catch (err) {
+        btn.disabled = false; btn.textContent = 'Save';
+        if (statusEl) { statusEl.textContent = 'Error: ' + err.message; statusEl.style.color = 'var(--red)'; }
+        window.Veil.utils.toast('Save failed: ' + err.message, 'error');
+      }
+    });
+
+    document.getElementById('btn-mem-delete').addEventListener('click', async () => {
+      if (!confirm(`Delete "${name}"?`)) return;
+      try {
+        if (this._tab === 'agent') {
+          await window.Veil.state.api.deleteAgentMemoryFile(this._agent, name);
+        } else {
+          await window.Veil.state.api.deleteMemoryFile(name);
+        }
+        window.Veil.utils.toast('File deleted', 'success');
+        this._file = null;
+        this._showEditorPlaceholder();
+        await this._loadFiles();
+      } catch (err) { window.Veil.utils.toast('Delete failed: ' + err.message, 'error'); }
+    });
+  },
+
+  _showEditorPlaceholder() {
+    const el = document.getElementById('mem-editor-panel');
+    if (el) el.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13.5px;">Select a memory file to edit</div>`;
+  },
+
+  _showNewFileModal() {
+    window.Veil.modal.show(`
+      <div>
+        <h3 style="font-size:1rem;font-weight:700;color:var(--text);margin-bottom:16px;">New Memory File</h3>
+        <div id="nm-err" style="display:none;background:var(--red-dim);color:var(--red);border:1px solid var(--surface2);border-radius:6px;padding:8px 12px;margin-bottom:12px;font-size:13px;"></div>
+        <div style="margin-bottom:12px;">
+          <label style="display:block;font-size:12.5px;color:var(--text2);margin-bottom:5px;">Filename <span style="color:var(--text3);">(e.g. MEMORY.md)</span></label>
+          <input id="nm-filename" class="input" placeholder="MEMORY.md" />
+        </div>
+        <div style="margin-bottom:20px;">
+          <label style="display:block;font-size:12.5px;color:var(--text2);margin-bottom:5px;">Initial content</label>
+          <textarea id="nm-content" class="input mono" rows="6" placeholder="## Notes\n\n" 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="nm-submit">Create</button>
+        </div>
+      </div>`);
+
+    document.getElementById('nm-submit').addEventListener('click', async () => {
+      const filename = document.getElementById('nm-filename').value.trim();
+      const content  = document.getElementById('nm-content').value;
+      const errEl    = document.getElementById('nm-err');
+      if (!filename) { errEl.textContent = 'Filename is required'; errEl.style.display = 'block'; return; }
+      if (!filename.match(/^[a-zA-Z0-9_-]+\.md$/)) {
+        errEl.textContent = 'Filename must match [a-z0-9A-Z_-]+.md'; errEl.style.display = 'block'; return;
+      }
+      const btn = document.getElementById('nm-submit');
+      btn.disabled = true;
+      try {
+        if (this._tab === 'agent' && this._agent) {
+          await window.Veil.state.api.putAgentMemoryFile(this._agent, filename, content);
+        } else {
+          await window.Veil.state.api.putMemoryFile(filename, content);
+        }
+        window.Veil.modal.hide();
+        window.Veil.utils.toast('File created', 'success');
+        this._file = filename;
+        await this._loadFiles();
+        this._openFile(filename);
+      } catch (err) {
+        btn.disabled = false;
+        errEl.textContent = err.message; errEl.style.display = 'block';
+      }
+    });
+  },
+};

package/ui/views/models.js

@@ -0,0 +1,146 @@
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.models = {
+  _models:  [],
+  _filter:  '',
+
+  render() {
+    return `
+      <div style="padding:20px;max-width:1100px;">
+        <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;">
+          <h1 style="font-size:16px;font-weight:700;color:var(--text);flex:none;">Models</h1>
+          <input id="models-search" class="input" style="flex:1;min-width:200px;max-width:360px;padding:6px 12px;" placeholder="Search by name or provider…" value="${window.Veil.utils.esc(this._filter)}" />
+          <button id="btn-refresh-models" class="btn btn-secondary btn-sm" style="flex:none;">↻ Refresh from OpenRouter</button>
+          <span id="models-count" style="font-size:12.5px;color:var(--text3);flex:none;"></span>
+        </div>
+        <div id="models-table-wrap">
+          <div style="text-align:center;padding:40px;color:var(--text3);">${window.Veil.utils.spinner()}</div>
+        </div>
+      </div>`;
+  },
+
+  async mount() {
+    document.getElementById('models-search').addEventListener('input', (e) => {
+      this._filter = e.target.value;
+      this._renderTable();
+    });
+    document.getElementById('btn-refresh-models').addEventListener('click', () => this._refresh());
+    await this._load();
+  },
+
+  unmount() {},
+
+  async _load() {
+    const wrap = document.getElementById('models-table-wrap');
+    if (!wrap) return;
+    try {
+      const data    = await window.Veil.state.api.listModels();
+      this._models  = data.models || [];
+      this._renderTable();
+      const updated = data.updated_at ? `Updated: ${window.Veil.utils.relTime(data.updated_at)}` : '';
+      const cnt = document.getElementById('models-count');
+      if (cnt) cnt.textContent = `${this._models.length} models · ${updated}`;
+    } catch (err) {
+      if (wrap) wrap.innerHTML = `<div style="color:var(--red);font-size:13px;">${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  _renderTable() {
+    const wrap = document.getElementById('models-table-wrap');
+    if (!wrap) return;
+    const U = window.Veil.utils;
+    const q = (this._filter || '').toLowerCase();
+    const models = q
+      ? this._models.filter(m => m.id.toLowerCase().includes(q) || (m.name||'').toLowerCase().includes(q))
+      : this._models;
+
+    if (models.length === 0) {
+      wrap.innerHTML = `<div style="text-align:center;padding:30px;color:var(--text3);font-size:13.5px;">${q ? 'No models match "' + U.esc(q) + '"' : 'No models loaded'}</div>`;
+      return;
+    }
+
+    const cnt = document.getElementById('models-count');
+    if (cnt && q) cnt.textContent = `${models.length} / ${this._models.length} models shown`;
+
+    wrap.innerHTML = `
+      <div style="overflow-x:auto;">
+        <table style="width:100%;border-collapse:collapse;font-size:13px;">
+          <thead>
+            <tr style="border-bottom:1px solid var(--border);">
+              <th style="text-align:left;padding:8px 12px;color:var(--text3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;">Model ID</th>
+              <th style="text-align:left;padding:8px 12px;color:var(--text3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;">Name</th>
+              <th style="text-align:right;padding:8px 12px;color:var(--text3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;">Context</th>
+              <th style="text-align:right;padding:8px 12px;color:var(--text3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;">Input $/M</th>
+              <th style="text-align:right;padding:8px 12px;color:var(--text3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;">Output $/M</th>
+              <th style="text-align:left;padding:8px 12px;color:var(--text3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;">Modalities</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${models.map(m => `
+              <tr class="model-row" data-model-id="${U.esc(m.id)}" style="border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s;">
+                <td style="padding:8px 12px;font-family:monospace;font-size:12.5px;color:var(--accent);">${U.esc(m.id)}</td>
+                <td style="padding:8px 12px;color:var(--text);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${U.esc(m.name || '')}</td>
+                <td style="padding:8px 12px;text-align:right;color:var(--text2);">${m.context_length ? (m.context_length/1000).toFixed(0) + 'k' : '—'}</td>
+                <td style="padding:8px 12px;text-align:right;color:var(--text2);">${m.pricing?.prompt != null ? '$' + (m.pricing.prompt * 1e6).toFixed(2) : '—'}</td>
+                <td style="padding:8px 12px;text-align:right;color:var(--text2);">${m.pricing?.completion != null ? '$' + (m.pricing.completion * 1e6).toFixed(2) : '—'}</td>
+                <td style="padding:8px 12px;color:var(--text3);font-size:12px;">${(m.input_modalities||[]).join('+') || '—'}</td>
+              </tr>`).join('')}
+          </tbody>
+        </table>
+      </div>`;
+
+    wrap.querySelectorAll('.model-row').forEach(row => {
+      row.addEventListener('mouseenter', () => row.style.background = 'var(--surface2)');
+      row.addEventListener('mouseleave', () => row.style.background = '');
+      row.addEventListener('click', () => {
+        const id = row.getAttribute('data-model-id');
+        const m  = this._models.find(x => x.id === id);
+        if (m) this._showDetail(m);
+      });
+    });
+  },
+
+  _showDetail(m) {
+    const U = window.Veil.utils;
+    window.Veil.modal.show(`
+      <div>
+        <h3 style="font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;">${U.esc(m.name || m.id)}</h3>
+        <div style="display:flex;align-items:center;gap:6px;">
+          <code style="font-size:12.5px;color:var(--accent);">${U.esc(m.id)}</code>
+          <button onclick="navigator.clipboard.writeText('${U.esc(m.id)}');this.textContent='✓';setTimeout(()=>this.textContent='⎘',1000)" style="background:none;border:none;color:white;cursor:pointer;font-size:14px;padding:2px 4px;" title="Copy model ID">⎘</button>
+        </div>
+        <p style="font-size:13px;color:var(--text2);margin:8px 0 12px 0;">${U.esc(m.description || '(no description)')}</p>
+        <hr class="divider" style="margin:16px 0;">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
+          <div><div style="font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;">Context Length</div><div style="color:var(--text);">${m.context_length ? m.context_length.toLocaleString() + ' tokens' : '—'}</div></div>
+          <div><div style="font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;">Max Completion</div><div style="color:var(--text);">${m.max_completion_tokens ? m.max_completion_tokens.toLocaleString() + ' tokens' : '—'}</div></div>
+          <div><div style="font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;">Input ($/M tokens)</div><div style="color:var(--text);">${m.pricing?.prompt != null ? '$' + (m.pricing.prompt * 1e6).toFixed(4) : '—'}</div></div>
+          <div><div style="font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;">Output ($/M tokens)</div><div style="color:var(--text);">${m.pricing?.completion != null ? '$' + (m.pricing.completion * 1e6).toFixed(4) : '—'}</div></div>
+          <div><div style="font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;">Cache Read ($/M)</div><div style="color:var(--text);">${m.pricing?.cache_read != null ? '$' + (m.pricing.cache_read * 1e6).toFixed(4) : '—'}</div></div>
+          <div><div style="font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;">Cache Write ($/M)</div><div style="color:var(--text);">${m.pricing?.cache_write != null ? '$' + (m.pricing.cache_write * 1e6).toFixed(4) : '—'}</div></div>
+          <div><div style="font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;">Input Modalities</div><div style="color:var(--text);">${(m.input_modalities||[]).join(', ') || '—'}</div></div>
+          <div><div style="font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;">Output Modalities</div><div style="color:var(--text);">${(m.output_modalities||[]).join(', ') || '—'}</div></div>
+        </div>
+        <div style="text-align:right;"><button class="btn btn-secondary" onclick="window.Veil.modal.hide()">Close</button></div>
+      </div>`);
+  },
+
+  async _refresh() {
+    const btn = document.getElementById('btn-refresh-models');
+    if (btn) { btn.disabled = true; btn.innerHTML = window.Veil.utils.spinner() + ' Refreshing…'; }
+    try {
+      const data   = await window.Veil.state.api.refreshModels();
+      this._models = data.models || [];
+      this._renderTable();
+      window.Veil.utils.toast(`Models refreshed: ${this._models.length} loaded`, 'success');
+      const cnt = document.getElementById('models-count');
+      if (cnt) cnt.textContent = `${this._models.length} models · Updated just now`;
+    } catch (err) {
+      window.Veil.utils.toast('Refresh failed: ' + err.message, 'error');
+    } finally {
+      if (btn) { btn.disabled = false; btn.textContent = '↻ Refresh from OpenRouter'; }
+    }
+  },
+};