@newsails/veil-cli 1.0.1

package/ui/views/chat.js

@@ -0,0 +1,610 @@
+'use strict';
+window.Veil = window.Veil || {};
+window.Veil.views = window.Veil.views || {};
+
+window.Veil.views.chat = {
+  _sessionId:         null,
+  _streaming:         false,
+  _agent:             null,
+  _currentStreamEl:   null,   /* .msg-assistant div being streamed into */
+  _currentStreamText: '',     /* accumulated text for the current LLM iteration */
+  _lastMsgAgent:      null,   /* agent name of the last appended assistant bubble */
+  _autoScroll:        true,   /* false when user scrolls up during streaming */
+
+  render() {
+    return `
+      <div style="display:flex;flex-direction:column;height:100%;">
+
+        <!-- Top bar -->
+        <div style="flex-shrink:0;padding:10px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);">
+          <div style="display:flex;align-items:center;gap:8px;">
+            <span style="font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;">Agent</span>
+            <select id="chat-agent-sel" class="input" style="width:auto;padding:4px 10px;font-size:13px;background:var(--surface2);"></select>
+          </div>
+          <div style="width:1px;height:18px;background:var(--border);"></div>
+          <div style="display:flex;align-items:center;gap:6px;">
+            <span style="font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;">Session</span>
+            <code id="chat-session-id" style="font-size:11.5px;color:var(--text2);font-family:'JetBrains Mono',monospace;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:2px 8px;">(new)</code>
+          </div>
+          <div style="display:flex;gap:6px;">
+            <button class="btn btn-ghost btn-sm" id="btn-new-session">+ New</button>
+            <button class="btn btn-ghost btn-sm" id="btn-resume-session">Resume…</button>
+          </div>
+          <div style="margin-left:auto;display:flex;align-items:center;gap:10px;">
+            <div id="chat-usage" style="font-size:11.5px;color:var(--text3);"></div>
+            <div id="chat-ctx-ring"></div>
+          </div>
+        </div>
+
+        <!-- Messages -->
+        <div id="chat-messages" style="flex:1;overflow-y:auto;padding:28px 0;display:flex;flex-direction:column;gap:0;"></div>
+
+        <!-- Input area -->
+        <div style="flex-shrink:0;padding:10px 16px 14px;background:var(--bg);">
+          <div style="background:var(--surface);border:1px solid var(--border2);border-radius:12px;display:flex;align-items:flex-end;gap:4px;padding:5px 6px 5px 14px;transition:border-color 0.15s;" id="chat-input-wrap">
+            <textarea id="chat-input" rows="1"
+              placeholder="Message the agent… (Shift+Enter for newline)"
+              style="background:transparent;border:none;outline:none;resize:none;padding:7px 0;font-size:14px;color:var(--text);font-family:inherit;line-height:1.55;flex:1;overflow-y:auto;max-height:40vh;"></textarea>
+            <button id="chat-send" class="btn btn-primary btn-sm" style="padding:5px 12px;flex-shrink:0;margin-bottom:2px;">↵</button>
+          </div>
+        </div>
+      </div>`;
+  },
+
+  async mount(params) {
+    params = params || {};
+    this._sessionId         = null;
+    this._streaming         = false;
+    this._currentStreamEl   = null;
+    this._currentStreamText = '';
+    this._lastMsgAgent      = null;
+
+    await this._populateAgentSelector(params.agentName);
+
+    /* Apply params from navigate() — e.g. Resume from Sessions view */
+    if (params.sessionId) {
+      this._sessionId = params.sessionId;
+      const sidEl = document.getElementById('chat-session-id');
+      if (sidEl) sidEl.textContent = params.sessionId.slice(0, 22) + (params.sessionId.length > 22 ? '…' : '');
+      window.Veil.utils.toast('Resumed session', 'success');
+      await this._loadHistory(params.sessionId);
+    }
+
+    const inputWrap = document.getElementById('chat-input-wrap');
+    const inputEl   = document.getElementById('chat-input');
+
+    /* Auto-grow textarea */
+    const _growInput = () => {
+      inputEl.style.height = 'auto';
+      inputEl.style.height = inputEl.scrollHeight + 'px';
+    };
+    inputEl.addEventListener('input', _growInput);
+
+    /* Focus ring */
+    inputEl.addEventListener('focus', () => { if (inputWrap) inputWrap.style.borderColor = 'var(--accent)'; });
+    inputEl.addEventListener('blur',  () => { if (inputWrap) inputWrap.style.borderColor = 'var(--border2)'; });
+
+    /* Smart auto-scroll: stop following when user scrolls up during streaming */
+    const msgsEl = document.getElementById('chat-messages');
+    if (msgsEl) {
+      msgsEl.addEventListener('scroll', () => {
+        if (!this._streaming) return;
+        const gap = msgsEl.scrollHeight - msgsEl.scrollTop - msgsEl.clientHeight;
+        this._autoScroll = gap < 80;
+      });
+    }
+
+    document.getElementById('btn-new-session').addEventListener('click', () => {
+      this._sessionId    = null;
+      this._lastMsgAgent = null;
+      this._autoScroll   = true;
+      const sidEl = document.getElementById('chat-session-id');
+      if (sidEl) sidEl.textContent = '(new)';
+      document.getElementById('chat-messages').innerHTML = '';
+      document.getElementById('chat-usage').textContent = '';
+      window.Veil.utils.toast('New session started', 'success');
+    });
+
+    document.getElementById('btn-resume-session').addEventListener('click', async () => {
+      const id = prompt('Paste session ID to resume:');
+      if (id && id.trim()) {
+        this._sessionId    = id.trim();
+        this._lastMsgAgent = null;
+        const sidEl = document.getElementById('chat-session-id');
+        if (sidEl) sidEl.textContent = id.trim().slice(0, 22) + (id.trim().length > 22 ? '…' : '');
+        document.getElementById('chat-messages').innerHTML = '';
+        window.Veil.utils.toast('Resuming session', 'success');
+        await this._loadHistory(id.trim());
+      }
+    });
+
+    document.getElementById('chat-send').addEventListener('click', () => this._sendMessage());
+
+    document.getElementById('chat-input').addEventListener('keydown', e => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this._sendMessage();
+      }
+    });
+  },
+
+  unmount() {
+    this._streaming    = false;
+    this._agent        = null;
+    this._lastMsgAgent = null;
+  },
+
+  async _populateAgentSelector(preferredAgent) {
+    const sel = document.getElementById('chat-agent-sel');
+    if (!sel) return;
+    try {
+      const data = await window.Veil.state.api.listAgents();
+      const agents = (data.agents || []).filter(a => a.modes && a.modes.includes('chat'));
+      if (agents.length === 0) {
+        sel.innerHTML = '<option value="">No chat-enabled agents</option>';
+      } else {
+        const preferred = preferredAgent || window.Veil.state.currentAgent;
+        sel.innerHTML = agents.map(a =>
+          `<option value="${window.Veil.utils.esc(a.name)}" ${a.name === preferred ? 'selected' : ''}>${window.Veil.utils.esc(a.name)}</option>`
+        ).join('');
+      }
+      this._agent = sel.value;
+      sel.addEventListener('change', () => {
+        this._agent        = sel.value;
+        this._sessionId    = null;
+        this._lastMsgAgent = null;
+        document.getElementById('chat-session-id').textContent = '(new)';
+        document.getElementById('chat-messages').innerHTML = '';
+      });
+    } catch (err) {
+      sel.innerHTML = `<option value="">Error loading agents</option>`;
+    }
+  },
+
+  async _sendMessage() {
+    const input    = document.getElementById('chat-input');
+    const sendBtn  = document.getElementById('chat-send');
+    const agentSel = document.getElementById('chat-agent-sel');
+    if (!input || this._streaming) return;
+
+    const message = input.value.trim();
+    if (!message) return;
+
+    const agentName = agentSel?.value || this._agent;
+    if (!agentName) { window.Veil.utils.toast('Select an agent first', 'warn'); return; }
+    this._agent = agentName;
+
+    input.value = '';
+    input.style.height = 'auto'; /* reset input height after clear */
+    this._streaming         = true;
+    this._autoScroll        = true; /* always follow on new send */
+    this._currentStreamEl   = null;
+    this._currentStreamText = '';
+    sendBtn.disabled = true;
+    sendBtn.innerHTML = window.Veil.utils.spinner() + ' …';
+
+    this._appendUserMessage(message);
+
+    /* Create bubble immediately with thinking indicator */
+    this._currentStreamEl = this._createAssistantBubble();
+    const thinkEl = this._currentStreamEl?.querySelector('.msg-text');
+    if (thinkEl) thinkEl.innerHTML = '<span class="thinking-dots">Thinking</span>';
+
+    const body = { message };
+    if (this._sessionId) body.sessionId = this._sessionId;
+
+    const done = () => {
+      /* clean up any leftover streaming cursor */
+      if (this._currentStreamEl) {
+        this._currentStreamEl.querySelector('.msg-text')?.classList.remove('streaming');
+        this._currentStreamEl = null;
+      }
+      this._streaming = false;
+      if (sendBtn) { sendBtn.disabled = false; sendBtn.textContent = '↵ Send'; }
+      this._scrollToBottom();
+    };
+
+    await window.Veil.state.api.chatStream(agentName, body, {
+
+      /* inference.chunk — streaming token fragment */
+      onChunk: (data) => {
+        /* bubble already created before send; clear thinking indicator on first chunk */
+        if (!this._currentStreamEl) this._currentStreamEl = this._createAssistantBubble();
+        this._currentStreamText += (data.content || '');
+        const textEl = this._currentStreamEl.querySelector('.msg-text');
+        if (textEl) {
+          /* render markdown in real-time — marked handles partial text gracefully */
+          this._renderMarkdown(textEl, this._currentStreamText);
+          textEl.classList.add('streaming');
+        }
+        this._scrollToBottom();
+      },
+
+      /* inference.tool — tool name known early, before args are ready */
+      onToolName: (data) => {
+        /* bubble already created; clear thinking indicator if still showing */
+        if (!this._currentStreamEl) this._currentStreamEl = this._createAssistantBubble();
+        const textEl = this._currentStreamEl.querySelector('.msg-text');
+        if (textEl?.querySelector('.thinking-dots')) { textEl.innerHTML = ''; textEl.style.display = 'none'; }
+        const toolsEl = this._currentStreamEl.querySelector('.msg-tools');
+        if (!toolsEl) return;
+        const ind = document.createElement('div');
+        ind.className = 'tool-loading';
+        ind.dataset.toolName = data.name || '';
+        ind.style.cssText = 'display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12.5px;color:var(--yellow);';
+        ind.innerHTML = `<span class="spin" style="display:inline-block;width:10px;height:10px;border:2px solid var(--yellow-dim);border-top-color:var(--yellow);border-radius:50%;"></span>⚙ ${window.Veil.utils.esc(data.name)}…`;
+        toolsEl.appendChild(ind);
+        this._scrollToBottom();
+      },
+
+      /* message — canonical session-API-compatible message object */
+      onMessage: (data) => {
+        const U = window.Veil.utils;
+
+        if (data.role === 'assistant') {
+          /* Finalize (or create) the assistant bubble */
+          if (!this._currentStreamEl) this._currentStreamEl = this._createAssistantBubble();
+          const textEl  = this._currentStreamEl.querySelector('.msg-text');
+          const toolsEl = this._currentStreamEl.querySelector('.msg-tools');
+
+          /* Stop streaming cursor and render as markdown */
+          if (textEl) {
+            textEl.classList.remove('streaming');
+            if (data.content) {
+              this._renderMarkdown(textEl, data.content);
+              /* store raw md on parent wrap for copy button */
+              const wrap = this._currentStreamEl.closest('.msg-bubble-wrap');
+              if (wrap) wrap.dataset.md = data.content;
+            } else if (!this._currentStreamText) {
+              /* tool-call turn with no prose — hide the empty text area */
+              textEl.style.display = 'none';
+            }
+          }
+
+          /* Replace loading indicators with real tool-call blocks */
+          if (toolsEl) {
+            toolsEl.querySelectorAll('.tool-loading').forEach(e => e.remove());
+            if (data.tool_calls && data.tool_calls.length) {
+              data.tool_calls.forEach(tc => {
+                const name = tc.function?.name || tc.name || '?';
+                let argsStr = '';
+                try {
+                  const args = tc.function?.arguments ? JSON.parse(tc.function.arguments) : null;
+                  argsStr = args ? JSON.stringify(args, null, 2) : (tc.function?.arguments || '');
+                } catch { argsStr = tc.function?.arguments || ''; }
+
+                const block = document.createElement('div');
+                block.className = 'tool-block';
+                block.dataset.callId = tc.id || '';
+                block.style.cssText = 'padding:7px 10px;margin-top:6px;';
+                block.innerHTML = `
+                  <div class="tool-header" style="display:flex;align-items:center;gap:8px;cursor:pointer;">
+                    <span style="color:var(--yellow);font-weight:600;font-size:13px;">⚙ ${U.esc(name)}</span>
+                    <span class="tool-toggle" style="color:var(--text3);font-size:11.5px;margin-left:auto;">▸ show</span>
+                  </div>
+                  <div class="tool-body" style="display:none;margin-top:6px;">
+                    ${argsStr ? `<pre style="color:var(--text2);font-size:12px;padding:6px 8px;background:var(--bg);border-radius:5px;overflow-x:auto;">${U.esc(argsStr.slice(0, 800))}</pre>` : ''}
+                    <div class="tool-result" style="display:none;margin-top:5px;">
+                      <pre class="tool-result-pre" style="color:var(--green);font-size:12px;padding:6px 8px;background:var(--bg);border-radius:5px;overflow-x:auto;"></pre>
+                    </div>
+                  </div>`;
+                block.querySelector('.tool-header').addEventListener('click', () => {
+                  const body = block.querySelector('.tool-body');
+                  const tog  = block.querySelector('.tool-toggle');
+                  const open = body.style.display === 'none';
+                  body.style.display = open ? 'block' : 'none';
+                  tog.textContent    = open ? '▾ hide' : '▸ show';
+                });
+                toolsEl.appendChild(block);
+              });
+            }
+          }
+
+          /* Per-iteration token usage footer */
+          if (data.tokenUsage) {
+            const footer = document.createElement('div');
+            footer.style.cssText = 'font-size:11.5px;color:var(--text3);margin-top:6px;';
+            footer.textContent = U.fmtTokens(data.tokenUsage.input, data.tokenUsage.output, data.tokenUsage.cost);
+            this._currentStreamEl.appendChild(footer);
+          }
+
+          this._currentStreamEl   = null;
+          this._currentStreamText = '';
+          this._scrollToBottom();
+
+        } else if (data.role === 'tool') {
+          /* Match to the tool-call block by tool_call_id */
+          const callId   = data.tool_call_id || '';
+          const msgBlock = document.getElementById('chat-messages');
+          let matched    = callId ? msgBlock?.querySelector(`[data-call-id="${CSS.escape(callId)}"]`) : null;
+
+          if (matched) {
+            /* Inject result but keep block collapsed — user can expand */
+            const resultDiv = matched.querySelector('.tool-result');
+            const resultPre = matched.querySelector('.tool-result-pre');
+            const tog       = matched.querySelector('.tool-toggle');
+            if (resultDiv) resultDiv.style.display = 'block';
+            if (resultPre) resultPre.textContent    = (data.content || '').slice(0, 2000);
+            /* update toggle label to signal result is ready */
+            if (tog) tog.textContent = '▸ result';
+          } else {
+            /* No matching block — render as standalone tool result */
+            const U   = window.Veil.utils;
+            const el  = document.getElementById('chat-messages');
+            if (el) {
+              const wrap = document.createElement('div');
+              wrap.style.cssText = 'max-width:82%;';
+              wrap.innerHTML = `
+                <div class="msg-tool" style="padding:8px 12px;">
+                  <div style="font-size:11.5px;color:var(--yellow);margin-bottom:5px;font-weight:600;">tool result</div>
+                  <pre style="font-size:12.5px;color:var(--green);">${U.esc((data.content || '').slice(0, 2000))}</pre>
+                </div>`;
+              el.appendChild(wrap);
+            }
+          }
+          this._scrollToBottom();
+        }
+      },
+
+      /* done — turn complete */
+      onDone: (data) => {
+        /* Update session ID from done.session.id */
+        if (data.session?.id) {
+          this._sessionId = data.session.id;
+          const sidEl = document.getElementById('chat-session-id');
+          if (sidEl) {
+            const sid = data.session.id;
+            sidEl.textContent = sid.slice(0, 22) + (sid.length > 22 ? '…' : '');
+          }
+        }
+        /* Update turn-level usage in the top bar */
+        const usageEl = document.getElementById('chat-usage');
+        if (usageEl && data.tokenUsage) {
+          const U = window.Veil.utils;
+          const u = data.tokenUsage;
+          const parts = [U.fmtTokens(u.input, u.output, u.cost)];
+          if (data.iterations) parts.push(data.iterations + ' iter');
+          if (data.durationMs) parts.push(U.formatMs(data.durationMs));
+          usageEl.textContent = parts.join(' · ');
+        }
+        /* Refresh context ring from live session data */
+        if (this._sessionId) this._updateContextRing(this._sessionId);
+        done();
+      },
+
+      /* error */
+      onError: (data) => {
+        if (!this._currentStreamEl) this._currentStreamEl = this._createAssistantBubble();
+        const textEl = this._currentStreamEl.querySelector('.msg-text');
+        if (textEl) {
+          textEl.classList.remove('streaming');
+          textEl.style.display  = '';
+          textEl.style.color    = 'var(--red)';
+          textEl.textContent    = 'Error: ' + (data.error || JSON.stringify(data));
+        }
+        this._currentStreamEl = null;
+        done();
+      },
+    });
+  },
+
+  _scrollToBottom(force) {
+    const el = document.getElementById('chat-messages');
+    if (!el) return;
+    if (force || this._autoScroll) el.scrollTop = el.scrollHeight;
+  },
+
+  /* Render markdown into a text element */
+  _renderMarkdown(el, text) {
+    if (window.marked && window.DOMPurify) {
+      el.className = 'msg-text msg-md';
+      el.style.whiteSpace = '';
+      el.innerHTML = DOMPurify.sanitize(marked.parse(text));
+    } else {
+      el.className = 'msg-text';
+      el.style.whiteSpace = 'pre-wrap';
+      el.textContent = text;
+    }
+  },
+
+  /* Fetch session and update context ring in the top bar */
+  async _updateContextRing(sessionId) {
+    if (!sessionId) return;
+    try {
+      const data = await window.Veil.state.api.getSession(sessionId);
+      const sess = data.session;
+      const el   = document.getElementById('chat-ctx-ring');
+      if (!el || !sess) return;
+      const U = window.Veil.utils;
+      const tip = [
+        { label: 'Context',       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: 'Total cached',  value: (sess.total_cache_tokens  || 0).toLocaleString() + ' tokens' },
+        { label: 'Session cost',  value: U.formatCost(sess.cost) || '$0' },
+        { label: 'Messages',      value: sess.message_count || 0 },
+      ];
+      el.innerHTML = U.contextRing(sess.context_size, sess.context_size_limit, tip);
+    } catch {}
+  },
+
+  /* Load session history and render messages for resumed sessions */
+  async _loadHistory(sessionId) {
+    if (!sessionId) return;
+    const msgsEl = document.getElementById('chat-messages');
+    if (!msgsEl) return;
+    msgsEl.innerHTML = `<div style="padding:20px;color:var(--text3);display:flex;align-items:center;gap:8px;">${window.Veil.utils.spinner()} Loading history…</div>`;
+    try {
+      const data = await window.Veil.state.api.getSessionMessages(sessionId, { limit: 100 });
+      const msgs = data.messages || [];
+      msgsEl.innerHTML = '';
+      this._lastMsgAgent = null;
+      for (const msg of msgs) {
+        if (msg.role === 'system') continue;  /* skip system prompt */
+        this._renderHistoricalMessage(msg);
+      }
+      /* Also update the context ring */
+      this._updateContextRing(sessionId);
+      this._scrollToBottom();
+    } catch (err) {
+      msgsEl.innerHTML = `<div style="padding:20px;color:var(--red);font-size:13px;">Failed to load history: ${window.Veil.utils.esc(err.message)}</div>`;
+    }
+  },
+
+  /* Render a single historical message into the chat */
+  _renderHistoricalMessage(msg) {
+    const U = window.Veil.utils;
+    if (msg.role === 'user') {
+      this._appendUserMessage(msg.content || '');
+    } else if (msg.role === 'assistant') {
+      const inner = this._createAssistantBubble();
+      if (!inner) return;
+      const textEl  = inner.querySelector('.msg-text');
+      const toolsEl = inner.querySelector('.msg-tools');
+      if (msg.content && textEl) {
+        this._renderMarkdown(textEl, msg.content);
+        const wrap = inner.closest('.msg-bubble-wrap');
+        if (wrap) wrap.dataset.md = msg.content;
+      } else if (textEl) {
+        textEl.style.display = 'none';
+      }
+      /* Render tool calls compactly */
+      if (msg.tool_calls && toolsEl) {
+        const calls = typeof msg.tool_calls === 'string' ? JSON.parse(msg.tool_calls) : msg.tool_calls;
+        calls.forEach(tc => {
+          const name = tc.function?.name || tc.name || '?';
+          let argsStr = '';
+          try {
+            const a = tc.function?.arguments ? JSON.parse(tc.function.arguments) : null;
+            argsStr = a ? JSON.stringify(a, null, 2) : (tc.function?.arguments || '');
+          } catch { argsStr = tc.function?.arguments || ''; }
+          const block = document.createElement('div');
+          block.className = 'tool-block';
+          block.dataset.callId = tc.id || '';
+          block.style.cssText = 'padding:7px 10px;margin-top:6px;';
+          block.innerHTML = `
+            <div class="tool-header" style="display:flex;align-items:center;gap:8px;cursor:pointer;">
+              <span style="color:var(--yellow);font-weight:600;font-size:13px;">⚙ ${U.esc(name)}</span>
+              <span class="tool-toggle" style="color:var(--text3);font-size:11.5px;margin-left:auto;">▸ show</span>
+            </div>
+            <div class="tool-body" style="display:none;margin-top:6px;">
+              ${argsStr ? `<pre style="color:var(--text2);font-size:12px;padding:6px 8px;background:var(--bg);border-radius:5px;overflow-x:auto;">${U.esc(argsStr.slice(0, 800))}</pre>` : ''}
+            </div>`;
+          block.querySelector('.tool-header').addEventListener('click', () => {
+            const b = block.querySelector('.tool-body');
+            const t = block.querySelector('.tool-toggle');
+            const open = b.style.display === 'none';
+            b.style.display = open ? 'block' : 'none';
+            t.textContent   = open ? '▾ hide' : '▸ show';
+          });
+          toolsEl.appendChild(block);
+        });
+      }
+      /* Token footer */
+      if (msg.input_tokens || msg.output_tokens) {
+        const footer = document.createElement('div');
+        footer.style.cssText = 'font-size:11.5px;color:var(--text3);margin-top:6px;';
+        footer.textContent = U.fmtTokens(msg.input_tokens, msg.output_tokens, msg.cost);
+        if (msg.model_key) footer.textContent += '  ·  ' + msg.model_key.split('/').pop();
+        inner.appendChild(footer);
+      }
+    } else if (msg.role === 'tool') {
+      /* Compact tool result — try to match to last open call block, otherwise standalone */
+      const msgsEl = document.getElementById('chat-messages');
+      const callId = msg.tool_call_id || '';
+      const matched = callId ? msgsEl?.querySelector(`[data-call-id="${CSS.escape(callId)}"]`) : null;
+      if (matched) {
+        const resultDiv = matched.querySelector('.tool-result') || (() => {
+          const d = document.createElement('div');
+          d.className = 'tool-result';
+          d.style.marginTop = '5px';
+          matched.querySelector('.tool-body')?.appendChild(d);
+          return d;
+        })();
+        const resultPre = matched.querySelector('.tool-result-pre') || (() => {
+          const p = document.createElement('pre');
+          p.className = 'tool-result-pre';
+          p.style.cssText = 'color:var(--green);font-size:12px;padding:6px 8px;background:var(--bg);border-radius:5px;overflow-x:auto;';
+          resultDiv.appendChild(p);
+          return p;
+        })();
+        resultDiv.style.display = 'block';
+        resultPre.textContent   = (msg.content || '').slice(0, 2000);
+        const tog = matched.querySelector('.tool-toggle');
+        if (tog) tog.textContent = '▸ result';
+      }
+    }
+  },
+
+  /* Create a new assistant bubble — Claude-style: avatar + plain text, no box */
+  _createAssistantBubble() {
+    const el = document.getElementById('chat-messages');
+    if (!el) return null;
+    const U    = window.Veil.utils;
+    const name = this._agent || 'assistant';
+    const initial = name.slice(0, 2).toUpperCase();
+    const isConsecutive = this._lastMsgAgent === name;
+    this._lastMsgAgent = name;
+
+    const wrap = document.createElement('div');
+    wrap.className = 'fade-in msg-bubble-wrap';
+    wrap.style.cssText = 'padding:' + (isConsecutive ? '4px 24px 14px' : '14px 24px') + ';';
+
+    if (isConsecutive) {
+      wrap.innerHTML = `
+        <div style="padding-left:40px;">
+          <div class="msg-inner" style="flex:1;min-width:0;">
+            <div class="msg-text" style="font-size:14px;line-height:1.65;color:var(--text);white-space:pre-wrap;word-break:break-word;"></div>
+            <div class="msg-tools" style="margin-top:8px;"></div>
+          </div>
+        </div>
+        <button class="msg-copy-btn" title="Copy">Copy</button>`;
+    } else {
+      wrap.innerHTML = `
+        <div style="display:flex;gap:12px;align-items:flex-start;">
+          <div class="avatar avatar-accent" style="margin-top:2px;flex-shrink:0;">${U.esc(initial)}</div>
+          <div class="msg-inner" style="flex:1;min-width:0;">
+            <div style="font-size:12px;font-weight:600;color:var(--accent);margin-bottom:7px;letter-spacing:0.01em;">${U.esc(name)}</div>
+            <div class="msg-text" style="font-size:14px;line-height:1.65;color:var(--text);white-space:pre-wrap;word-break:break-word;"></div>
+            <div class="msg-tools" style="margin-top:8px;"></div>
+          </div>
+        </div>
+        <button class="msg-copy-btn" title="Copy">Copy</button>`;
+    }
+
+    wrap.querySelector('.msg-copy-btn').addEventListener('click', () => {
+      const md = wrap.dataset.md || wrap.querySelector('.msg-text')?.textContent || '';
+      navigator.clipboard.writeText(md).then(() => {
+        const btn = wrap.querySelector('.msg-copy-btn');
+        if (btn) { btn.textContent = '✓ Copied'; setTimeout(() => { btn.textContent = 'Copy'; }, 1500); }
+      });
+    });
+
+    el.appendChild(wrap);
+    this._scrollToBottom();
+    return wrap.querySelector('.msg-inner');
+  },
+
+  _appendUserMessage(text) {
+    const el = document.getElementById('chat-messages');
+    if (!el) return;
+    const U   = window.Veil.utils;
+    const div = document.createElement('div');
+    div.className = 'fade-in msg-bubble-wrap';
+    div.style.cssText = 'display:flex;justify-content:flex-end;padding:10px 24px;';
+    div.innerHTML = `
+      <div class="msg-user" style="max-width:70%;padding:12px 16px;position:relative;">
+        <div style="font-size:14px;line-height:1.65;color:var(--text);white-space:pre-wrap;word-break:break-word;">${U.esc(text)}</div>
+      </div>
+      <button class="msg-copy-btn" title="Copy">Copy</button>`;
+    div.querySelector('.msg-copy-btn').addEventListener('click', () => {
+      navigator.clipboard.writeText(text).then(() => {
+        const btn = div.querySelector('.msg-copy-btn');
+        if (btn) { btn.textContent = '✓ Copied'; setTimeout(() => { btn.textContent = 'Copy'; }, 1500); }
+      });
+    });
+    el.appendChild(div);
+    this._lastMsgAgent = null;  /* reset consecutive tracking after user message */
+    this._scrollToBottom();
+  },
+};