@newsails/veil-cli 1.0.1

package/ui/app.js

@@ -0,0 +1,281 @@
+'use strict';
+
+window.Veil = window.Veil || {};
+const KB = window.Veil;
+
+KB.state = {
+  connected:    false,
+  serverUrl:    '',
+  secret:       '',
+  api:          null,
+  currentAgent: null,
+};
+
+/* ── Utilities ──────────────────────────────────────────────────────── */
+KB.utils = {
+  esc(s) {
+    if (s == null) return '';
+    return String(s)
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;')
+      .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  },
+
+  relTime(dateStr) {
+    if (!dateStr) return '—';
+    const diff = Date.now() - new Date(dateStr).getTime();
+    if (isNaN(diff)) return dateStr;
+    const s = Math.floor(diff / 1000);
+    if (s < 5)    return 'just now';
+    if (s < 60)   return s + 's ago';
+    const m = Math.floor(s / 60);
+    if (m < 60)   return m + 'm ago';
+    const h = Math.floor(m / 60);
+    if (h < 24)   return h + 'h ago';
+    const d = Math.floor(h / 24);
+    return d + 'd ago';
+  },
+
+  formatMs(ms) {
+    if (ms == null || ms < 0) return '—';
+    if (ms < 1000)  return ms + 'ms';
+    if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
+    return Math.floor(ms / 60000) + 'm ' + Math.floor((ms % 60000) / 1000) + 's';
+  },
+
+  formatCost(cost) {
+    if (cost == null || cost === 0) return '';
+    if (cost < 0.001) return '$' + cost.toFixed(6);
+    return '$' + cost.toFixed(4);
+  },
+
+  badge(status) {
+    return `<span class="badge badge-${KB.utils.esc(status)}">${KB.utils.esc(status)}</span>`;
+  },
+
+  spinner() {
+    return `<span class="spin" style="display:inline-block;width:13px;height:13px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;"></span>`;
+  },
+
+  shortId(id) {
+    if (!id) return '—';
+    return id.length > 18 ? id.slice(0, 18) + '…' : id;
+  },
+
+  truncate(s, n) {
+    if (!s) return '';
+    s = String(s);
+    return s.length > n ? s.slice(0, n) + '…' : s;
+  },
+
+  toast(msg, type) {
+    const c = document.getElementById('toast-container');
+    if (!c) return;
+    const el = document.createElement('div');
+    const [bg, col, bc] =
+      type === 'error' ? ['var(--surface)', 'var(--red)',    'rgba(239,68,68,0.3)'] :
+      type === 'warn'  ? ['var(--surface)', 'var(--yellow)', 'rgba(234,179,8,0.3)'] :
+                         ['var(--surface)', 'var(--green)',  'rgba(34,197,94,0.3)'];
+    el.style.cssText = `background:${bg};color:${col};border:1px solid ${bc};padding:10px 16px;border-radius:10px;font-size:13px;font-weight:500;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,0.5);animation:fadeIn 0.18s ease both;max-width:320px;`;
+    el.textContent = msg;
+    c.appendChild(el);
+    setTimeout(() => { if (el.parentNode) el.parentNode.removeChild(el); }, 3500);
+  },
+
+  fmtDate(d) {
+    if (!d) return '—';
+    return new Date(d).toLocaleString();
+  },
+
+  fmtTokens(inp, out, cost) {
+    const parts = [];
+    if (inp)  parts.push(inp.toLocaleString() + ' in');
+    if (out)  parts.push(out.toLocaleString() + ' out');
+    if (cost) parts.push(KB.utils.formatCost(cost));
+    return parts.join(' / ');
+  },
+
+  /* SVG circular context-window ring.
+     size = current context tokens, limit = model max (0/null = unknown).
+     tooltipLines = array of {label, value} for the hover tooltip. */
+  contextRing(size, limit, tooltipLines) {
+    if (!size) return '';
+    const R = 14, STROKE = 3, C = 2 * Math.PI * R;
+    const pct   = limit ? Math.min(size / limit, 1) : 0;
+    const color = pct > 0.85 ? 'var(--red)' : pct > 0.60 ? 'var(--yellow)' : 'var(--green)';
+    const used  = limit ? Math.round(pct * 100) + '%' : '?';
+    const dash  = C * (1 - pct);
+    const dim   = (R + STROKE) * 2;
+    const lines = (tooltipLines || []).map(l =>
+      `<div><strong>${KB.utils.esc(l.label)}:</strong> ${KB.utils.esc(String(l.value))}</div>`
+    ).join('');
+    return `<span class="ctx-ring-wrap">
+      <svg width="${dim}" height="${dim}" viewBox="0 0 ${dim} ${dim}" style="transform:rotate(-90deg);">
+        <circle cx="${R+STROKE}" cy="${R+STROKE}" r="${R}" fill="none"
+          stroke="var(--border2)" stroke-width="${STROKE}"/>
+        <circle cx="${R+STROKE}" cy="${R+STROKE}" r="${R}" fill="none"
+          stroke="${color}" stroke-width="${STROKE}"
+          stroke-dasharray="${C}" stroke-dashoffset="${dash}"
+          stroke-linecap="round" style="transition:stroke-dashoffset 0.4s ease,stroke 0.4s ease;"/>
+      </svg>
+      <span style="position:absolute;font-size:8px;font-weight:700;color:${color};pointer-events:none;">${used}</span>
+      <span class="ctx-tooltip">${lines || '<div>No data</div>'}</span>
+    </span>`;
+  },
+};
+
+/* ── Modal ──────────────────────────────────────────────────────────── */
+KB.modal = {
+  show(html) {
+    document.getElementById('modal-box').innerHTML = html;
+    const o = document.getElementById('modal-overlay');
+    o.style.display = 'flex';
+  },
+  hide() {
+    document.getElementById('modal-overlay').style.display = 'none';
+    document.getElementById('modal-box').innerHTML = '';
+  },
+  onOverlayClick(e) {
+    if (e.target === document.getElementById('modal-overlay')) KB.modal.hide();
+  },
+};
+
+/* ── Connection management ──────────────────────────────────────────── */
+KB.loadConnection = function() {
+  KB.state.serverUrl = window.__VEIL_API__    || localStorage.getItem('veil_url')    || '';
+  KB.state.secret    = window.__VEIL_SECRET__ || localStorage.getItem('veil_secret') || '';
+};
+
+KB.saveConnection = function(url, secret) {
+  KB.state.serverUrl = url;
+  KB.state.secret    = secret;
+  localStorage.setItem('veil_url',    url);
+  localStorage.setItem('veil_secret', secret);
+};
+
+KB.clearConnection = function() {
+  KB.state.connected = false;
+  KB.state.serverUrl = '';
+  KB.state.secret    = '';
+  KB.state.api       = null;
+  KB.state.currentAgent = null;
+  localStorage.removeItem('veil_url');
+  localStorage.removeItem('veil_secret');
+  KB._updateIndicator();
+  document.getElementById('sidebar').style.display = 'none';
+  KB.navigate('connection');
+};
+
+KB._updateIndicator = function() {
+  const dot  = document.getElementById('conn-dot');
+  const text = document.getElementById('conn-text');
+  if (!dot || !text) return;
+  if (KB.state.connected) {
+    dot.style.background = 'var(--green)';
+    dot.style.boxShadow  = '0 0 6px var(--green)';
+    const short = KB.state.serverUrl.replace(/^https?:\/\//, '');
+    text.style.display = 'flex';
+    text.style.alignItems = 'center';
+    text.style.gap = '4px';
+    text.innerHTML = `<span style="color:var(--text2);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;">${KB.utils.esc(short)}</span>`
+      + `<button onclick="window.Veil.clearConnection()" style="flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--text3);font-size:14px;line-height:1;padding:0 2px;font-family:inherit;" title="Disconnect" onmouseover="this.style.color='var(--red)'" onmouseout="this.style.color='var(--text3)'">⎋</button>`;
+  } else {
+    dot.style.background = 'var(--border2)';
+    dot.style.boxShadow  = 'none';
+    text.style.display = '';
+    text.textContent = 'Not connected';
+  }
+};
+
+/* ── Router ─────────────────────────────────────────────────────────── */
+let _currentView = null;
+
+KB.navigate = function(route, params) {
+  params = params || {};
+  if (_currentView && _currentView.unmount) {
+    try { _currentView.unmount(); } catch {}
+  }
+  const view = KB.views[route];
+  if (!view) {
+    KB.navigate('connection');
+    return;
+  }
+  /* update nav highlight */
+  document.querySelectorAll('.nav-link').forEach(el => {
+    if (el.getAttribute('data-route') === route) {
+      el.classList.add('nav-active');
+    } else {
+      el.classList.remove('nav-active');
+    }
+  });
+  const main = document.getElementById('main-content');
+  main.innerHTML = view.render(params);
+  if (view.mount) view.mount(params);
+  _currentView = view;
+  /* update hash without triggering another hashchange */
+  if (route !== 'connection') {
+    history.replaceState(null, '', '#' + route);
+  }
+};
+
+window.addEventListener('hashchange', () => {
+  if (!KB.state.connected) return;
+  const route = location.hash.slice(1) || 'agents';
+  if (KB.views[route]) KB.navigate(route);
+});
+
+/* ── Bootstrap ──────────────────────────────────────────────────────── */
+KB.loadConnection();
+
+if (KB.state.serverUrl) {
+  KB.state.api = new KB.API(KB.state.serverUrl, KB.state.secret);
+  KB.state.api.health()
+    .then(() => {
+      KB.state.connected = true;
+      KB._updateIndicator();
+      document.getElementById('sidebar').style.display = 'flex';
+      const route = location.hash.slice(1) || 'agents';
+      KB.navigate(KB.views[route] ? route : 'agents');
+    })
+    .catch(() => {
+      KB.state.connected = false;
+      KB.navigate('connection');
+    });
+} else {
+  KB.navigate('connection');
+}
+
+/* ── Electron embedded titlebar ─────────────────────────────────────── */
+(function () {
+  if (typeof window === 'undefined' || !window.electronWin) return;
+
+  const bar = document.getElementById('electron-titlebar');
+  if (!bar) return;
+
+  bar.style.display = 'flex';
+  document.body.style.paddingTop = '34px';
+
+  const logo = document.getElementById('sidebar-logo');
+  if (logo) logo.style.display = 'none';
+
+  const titleEl = document.getElementById('tb-title');
+  const apiUrl = window.__VEIL_API__ || KB.state.serverUrl;
+  if (titleEl && apiUrl) {
+    const secret = window.__VEIL_SECRET__ || KB.state.secret || '';
+    fetch(apiUrl.replace(/\/$/, '') + '/status', {
+      headers: secret ? { 'X-Veil-Secret': secret } : {},
+    })
+      .then(r => r.json())
+      .then(data => {
+        if (data.cwd) {
+          const parts = data.cwd.replace(/\\/g, '/').split('/').filter(Boolean);
+          const name = parts[parts.length - 1] || data.cwd;
+          titleEl.textContent = 'VeilCLI\u2002|\u2002' + name;
+        }
+      })
+      .catch(() => {});
+  }
+
+  document.getElementById('tb-min').onclick   = () => window.electronWin.minimize();
+  document.getElementById('tb-max').onclick   = () => window.electronWin.maximize();
+  document.getElementById('tb-close').onclick = () => window.electronWin.close();
+}());

package/ui/index.html

@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VeilCLI</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
+  <style>
+    :root {
+      --bg:          #0C0C10;
+      --surface:     #13131A;
+      --surface2:    #1A1A23;
+      --surface3:    #22222E;
+      --border:      #24242F;
+      --border2:     #2E2E3C;
+      --text:        #E2E2EE;
+      --text2:       #8080A0;
+      --text3:       #44445A;
+      --accent:      #7C6AF0;
+      --accent-h:    #6B5ADF;
+      --accent-glow: rgba(124,106,240,0.18);
+      --green:       #22C55E;
+      --green-dim:   rgba(34,197,94,0.12);
+      --red:         #EF4444;
+      --red-dim:     rgba(239,68,68,0.12);
+      --yellow:      #EAB308;
+      --yellow-dim:  rgba(234,179,8,0.12);
+      --blue:        #3B82F6;
+      --blue-dim:    rgba(59,130,246,0.12);
+      --radius:      10px;
+      --radius-sm:   7px;
+      --radius-lg:   14px;
+      --bg-alt:      #09090D;
+      --bg-task:     rgba(59,130,246,0.08);
+      --bg-chat:     rgba(34,197,94,0.08);
+      --bg-daemon:   rgba(234,179,8,0.08);
+    }
+
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 13.5px;
+      line-height: 1.55;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* ── Scrollbars ───────────────────────────────────── */
+    ::-webkit-scrollbar { width: 4px; height: 4px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--text3); }
+
+    /* ── Streaming cursor ─────────────────────────────── */
+    .streaming::after {
+      content: '│';
+      animation: cur-blink 1s step-start infinite;
+      color: var(--accent);
+      font-weight: 300;
+    }
+    @keyframes cur-blink { 50% { opacity: 0; } }
+
+    /* ── Nav ──────────────────────────────────────────── */
+    .nav-link {
+      display: flex; align-items: center; gap: 9px;
+      padding: 8px 10px; border-radius: var(--radius-sm);
+      font-size: 13px; font-weight: 450; color: var(--text2);
+      text-decoration: none; cursor: pointer;
+      transition: background 0.12s, color 0.12s;
+      user-select: none; margin: 1px 0;
+    }
+    .nav-link:hover { background: var(--surface2); color: var(--text); }
+    .nav-active { background: var(--accent-glow) !important; color: var(--text) !important; }
+    .nav-active .ni { color: var(--accent); }
+
+    /* ── Buttons ──────────────────────────────────────── */
+    .btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+      padding: 7px 14px; border-radius: var(--radius-sm);
+      font-size: 13px; font-weight: 500; font-family: inherit;
+      cursor: pointer; border: 1px solid transparent;
+      transition: background 0.12s, border-color 0.12s, opacity 0.12s, box-shadow 0.12s;
+      white-space: nowrap; user-select: none; outline: none;
+    }
+    .btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
+    .btn-primary   { background: var(--accent);    color: #fff; border-color: var(--accent); }
+    .btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); box-shadow: 0 0 0 3px var(--accent-glow); }
+    .btn-secondary { background: var(--surface2);  color: var(--text); border-color: var(--border2); }
+    .btn-secondary:hover { background: var(--surface3); border-color: var(--border2); }
+    .btn-ghost     { background: transparent; color: var(--text2); border-color: transparent; }
+    .btn-ghost:hover { background: var(--surface2); color: var(--text); }
+    .btn-danger    { background: var(--red-dim);  color: var(--red);   border-color: rgba(239,68,68,0.25); }
+    .btn-danger:hover  { background: rgba(239,68,68,0.2); }
+    .btn-success   { background: var(--green-dim); color: var(--green); border-color: rgba(34,197,94,0.25); }
+    .btn-success:hover { background: rgba(34,197,94,0.2); }
+    .btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
+    .btn-xs { padding: 2px 7px;  font-size: 11px; border-radius: 5px; }
+
+    /* ── Inputs ───────────────────────────────────────── */
+    .input {
+      background: var(--surface2); border: 1px solid var(--border2);
+      border-radius: var(--radius-sm); padding: 8px 12px;
+      font-size: 13.5px; color: var(--text); font-family: inherit;
+      width: 100%; outline: none;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+    .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
+    .input::placeholder { color: var(--text3); }
+    select.input { cursor: pointer; }
+    textarea.input { resize: vertical; }
+    textarea.mono  { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 12.5px; line-height: 1.6; }
+
+    /* ── Cards ────────────────────────────────────────── */
+    .card  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
+    .card2 { background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); }
+
+    /* ── Badges ───────────────────────────────────────── */
+    .badge {
+      display: inline-flex; align-items: center;
+      padding: 2px 8px; border-radius: 999px;
+      font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
+    }
+    .badge-pending    { background: rgba(128,128,160,0.14); color: #9090B8; }
+    .badge-processing { background: var(--blue-dim);        color: #60A5FA; }
+    .badge-finished   { background: var(--green-dim);       color: #4ADE80; }
+    .badge-failed     { background: var(--red-dim);         color: #F87171; }
+    .badge-waiting    { background: var(--yellow-dim);      color: #FCD34D; }
+    .badge-canceled   { background: rgba(68,68,90,0.18);    color: #6868A0; }
+    .badge-active     { background: var(--green-dim);       color: #4ADE80; }
+    .badge-closed     { background: rgba(68,68,90,0.18);    color: #6868A0; }
+
+    /* ── Messages ─────────────────────────────────────── */
+    .msg-user      { background: var(--surface3); border-radius: 16px 16px 4px 16px; }
+    .msg-system    { background: rgba(68,68,90,0.12); border: 1px solid var(--border); border-radius: 8px; color: var(--text2); font-size: 12px; }
+    .msg-tool      { background: var(--bg); border: 1px solid var(--border2); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
+
+    /* ── Tool block ───────────────────────────────────── */
+    .tool-block { background: var(--bg); border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
+
+    /* ── List items ───────────────────────────────────── */
+    .list-item { padding: 9px 12px; border-radius: var(--radius-sm); margin: 1px 4px; cursor: pointer; transition: background 0.1s; }
+    .list-item:hover { background: var(--surface2); }
+    .list-item.selected { background: var(--accent-glow); }
+
+    /* ── Panel header ─────────────────────────────────── */
+    .panel-header { padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
+
+    /* ── Timeline dot ──────────────────────────────────── */
+    .timeline-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
+
+    /* ── Divider ──────────────────────────────────────── */
+    hr, .divider { border: none; border-top: 1px solid var(--border); }
+
+    /* ── Spinner ──────────────────────────────────────── */
+    .spin { animation: spin 0.7s linear infinite; display: inline-block; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ── Animations ───────────────────────────────────── */
+    .fade-in { animation: fadeIn 0.18s ease both; }
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; } }
+
+    /* ── Code / pre ───────────────────────────────────── */
+    pre { white-space: pre-wrap; word-break: break-all; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
+
+    /* ── Markdown prose ────────────────────────────────── */
+    .msg-md { font-size: 14px; line-height: 1.65; color: var(--text); word-break: break-word; }
+    .msg-md p  { margin: 0 0 10px; }
+    .msg-md p:last-child { margin-bottom: 0; }
+    .msg-md h1,.msg-md h2,.msg-md h3,.msg-md h4 { font-weight: 700; margin: 16px 0 8px; color: var(--text); line-height: 1.3; }
+    .msg-md h1 { font-size: 18px; } .msg-md h2 { font-size: 16px; } .msg-md h3 { font-size: 14.5px; } .msg-md h4 { font-size: 13.5px; }
+    .msg-md ul,.msg-md ol { margin: 6px 0 10px 20px; padding: 0; }
+    .msg-md li { margin: 3px 0; }
+    .msg-md code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 5px; color: var(--accent); }
+    .msg-md pre { background: var(--bg); border: 1px solid var(--border2); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 8px 0; }
+    .msg-md pre code { background: none; border: none; padding: 0; color: var(--text2); font-size: 12.5px; }
+    .msg-md blockquote { border-left: 3px solid var(--border2); margin: 8px 0; padding: 4px 12px; color: var(--text2); }
+    .msg-md table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
+    .msg-md th { background: var(--surface2); font-weight: 600; }
+    .msg-md th, .msg-md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
+    .msg-md a { color: var(--accent); text-decoration: none; } .msg-md a:hover { text-decoration: underline; }
+    .msg-md hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
+    .msg-md strong { color: var(--text); font-weight: 600; }
+
+    /* ── Copy button ────────────────────────────────────── */
+    .msg-bubble-wrap { position: relative; }
+    .msg-copy-btn {
+      position: absolute; bottom: -10px; left: 65px;
+      opacity: 0; transition: opacity 0.15s;
+      background: var(--surface2); border: 1px solid var(--border2);
+      color: var(--text3); border-radius: 6px;
+      padding: 3px 8px; font-size: 11.5px; cursor: pointer;
+      font-family: inherit;
+    }
+    .msg-bubble-wrap:hover .msg-copy-btn { opacity: 1; }
+    .msg-copy-btn:hover { background: var(--surface3); color: var(--text); }
+
+    /* ── Context ring ───────────────────────────────────── */
+    .ctx-ring-wrap {
+      position: relative; display: inline-flex; align-items: center; justify-content: center;
+      cursor: default; flex-shrink: 0;
+    }
+    .ctx-ring-wrap svg { display: block; }
+    .ctx-tooltip {
+      display: none; position: absolute; top: calc(100% + 8px); right: 0;
+      background: var(--surface2); border: 1px solid var(--border2);
+      border-radius: 8px; padding: 10px 13px; min-width: 200px;
+      font-size: 12px; color: var(--text2); line-height: 1.7;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 200; white-space: nowrap;
+    }
+    .ctx-tooltip strong { color: var(--text); }
+    .ctx-ring-wrap:hover .ctx-tooltip { display: block; }
+
+    /* ── Thinking dots ──────────────────────────────────── */
+    .thinking-dots { color: var(--text3); font-size: 13.5px; font-style: italic; }
+    .thinking-dots::after {
+      content: '';
+      animation: thinkDots 1.2s steps(4, end) infinite;
+    }
+    @keyframes thinkDots {
+      0%   { content: ''; }
+      25%  { content: '.'; }
+      50%  { content: '..'; }
+      75%  { content: '...'; }
+      100% { content: ''; }
+    }
+
+    /* ── Avatar ───────────────────────────────────────── */
+    .avatar {
+      width: 28px; height: 28px; border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 11px; font-weight: 700; flex-shrink: 0;
+      text-transform: uppercase; letter-spacing: 0;
+    }
+    .avatar-accent  { background: var(--accent-glow); color: var(--accent); }
+    .avatar-surface { background: var(--surface3);     color: var(--text2); }
+
+    /* ── Info row ─────────────────────────────────────── */
+    .info-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); margin-bottom: 3px; }
+    .info-value { font-size: 13.5px; color: var(--text); }
+
+    /* ── Electron embedded titlebar ─────────────────────── */
+    #electron-titlebar {
+      display: none;
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      height: 34px;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      -webkit-app-region: drag;
+      user-select: none;
+      z-index: 10000;
+      align-items: center;
+      padding: 0 6px 0 0;
+    }
+    .tb-win-btn {
+      -webkit-app-region: no-drag;
+      width: 28px; height: 28px;
+      border-radius: 6px;
+      border: none; cursor: pointer;
+      font-size: 14px; line-height: 1;
+      display: flex; align-items: center; justify-content: center;
+      background: transparent; color: var(--text3);
+      transition: background 0.12s, color 0.12s;
+      font-family: inherit;
+    }
+    .tb-win-btn:hover { background: var(--surface2); color: var(--text); }
+    #tb-close:hover   { background: var(--red-dim);  color: var(--red);  }
+
+    /* ── Tab bar ──────────────────────────────────────── */
+    .tab-btn {
+      padding: 8px 14px; font-size: 13px; font-weight: 500;
+      color: var(--text2); background: none; border: none;
+      border-bottom: 2px solid transparent; cursor: pointer;
+      transition: color 0.12s, border-color 0.12s; font-family: inherit;
+    }
+    .tab-btn:hover { color: var(--text); }
+    .tab-active { color: var(--text) !important; border-bottom-color: var(--accent) !important; }
+  </style>
+</head>
+<body style="height:100vh;overflow:hidden;display:flex;">
+
+  <!-- Electron embedded titlebar — hidden in browser, shown when inside Veil Desktop -->
+  <div id="electron-titlebar">
+    <div style="flex:1;padding-left:10px;display:flex;align-items:center;gap:7px;-webkit-app-region:drag;pointer-events:none;">
+      <div style="width:20px;height:20px;background:linear-gradient(135deg,var(--accent),#5B8AF0);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+      </div>
+      <span id="tb-title" style="font-size:13px;font-weight:600;color:var(--text);letter-spacing:-0.01em;">VeilCLI</span>
+    </div>
+    <div style="-webkit-app-region:no-drag;display:flex;gap:2px;align-items:center;">
+      <button id="tb-min"   class="tb-win-btn" title="Minimize">&#x2013;</button>
+      <button id="tb-max"   class="tb-win-btn" title="Maximize">&#x25a1;</button>
+      <button id="tb-close" class="tb-win-btn" title="Close">&#x2715;</button>
+    </div>
+  </div>
+
+  <!-- Sidebar -->
+  <nav id="sidebar" style="display:none;width:210px;background:var(--surface);border-right:1px solid var(--border);flex-shrink:0;flex-direction:column;overflow:hidden;">
+    <!-- Logo -->
+    <div id="sidebar-logo" style="padding:13px 12px 11px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;flex-shrink:0;">
+      <div style="width:28px;height:28px;background:linear-gradient(135deg,var(--accent),#5B8AF0);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px var(--accent-glow);">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+      </div>
+      <span style="font-weight:700;font-size:14px;letter-spacing:-0.02em;">Veil DashBoard</span>
+    </div>
+    <!-- Nav links -->
+    <div style="flex:1;overflow-y:auto;padding:8px;">
+      <a href="#chat" data-route="chat" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+        Chat
+      </a>
+      <a href="#sessions" data-route="sessions" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+        Sessions
+      </a>
+      <a href="#agents" data-route="agents" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path><line x1="8" y1="16" x2="8" y2="16"></line><line x1="16" y1="16" x2="16" y2="16"></line></svg>
+        Agents
+      </a>
+      <a href="#tasks" data-route="tasks" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"></path><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+        Tasks
+      </a>
+      <a href="#daemons" data-route="daemons" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+        Daemons
+      </a>
+      <a href="#memory" data-route="memory" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"></rect><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="14" x2="20" y2="14"></line><line x1="9" y1="4" x2="9" y2="20"></line><line x1="15" y1="4" x2="15" y2="20"></line></svg>
+        Memory
+      </a>
+      <a href="#settings" data-route="settings" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+        Settings
+      </a>
+      <a href="#models" data-route="models" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+        Models
+      </a>
+      <a href="#feed" data-route="feed" class="nav-link">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"></path><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"></path><circle cx="12" cy="12" r="2"></circle><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"></path><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"></path></svg>
+        Live Feed
+      </a>
+    </div>
+    <!-- Connection status -->
+    <div id="connection-indicator" style="padding:10px 12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-shrink:0;">
+      <span id="conn-dot" style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--border2);transition:background 0.3s;flex-shrink:0;"></span>
+      <span id="conn-text" style="font-size:12px;color:var(--text3);flex:1;min-width:0;">Not connected</span>
+    </div>
+  </nav>
+
+  <!-- Main -->
+  <main id="main-content" style="flex:1;overflow:auto;background:var(--bg);"></main>
+
+  <!-- Toasts -->
+  <div id="toast-container" style="position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;"></div>
+
+  <!-- Modal -->
+  <div id="modal-overlay" style="display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);align-items:center;justify-content:center;" onclick="window.Veil.modal.onOverlayClick(event)">
+    <div id="modal-box" class="card fade-in" style="max-width:600px;width:90%;max-height:88vh;overflow:auto;padding:28px;border-radius:16px;border-color:var(--border2);"></div>
+  </div>
+
+  <script src="api.js"></script>
+  <script src="views/connection.js"></script>
+  <script src="views/agents.js"></script>
+  <script src="views/chat.js"></script>
+  <script src="views/tasks.js"></script>
+  <script src="views/sessions.js"></script>
+  <script src="views/daemons.js"></script>
+  <script src="views/memory.js"></script>
+  <script src="views/settings.js"></script>
+  <script src="views/models.js"></script>
+  <script src="views/feed.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>