@farazirfan/costar-server-executor 1.7.4 → 1.7.7

package/public/index.html

@@ -509,6 +509,146 @@
       flex: 1;
     }
 
+    /* ─── Chat Tool Cards ──────────────────────────── */
+    .tool-card {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      margin: 8px 0;
+      font-size: 13px;
+      overflow: hidden;
+    }
+
+    .tool-card-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      cursor: pointer;
+      user-select: none;
+      transition: background 0.15s;
+    }
+
+    .tool-card-header:hover {
+      background: var(--bg-hover);
+    }
+
+    .tool-icon {
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .tool-icon.running {
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    .tool-name {
+      font-weight: 600;
+      color: var(--accent);
+      font-family: var(--mono);
+      font-size: 12px;
+    }
+
+    .tool-status {
+      margin-left: auto;
+      font-size: 11px;
+      font-family: var(--mono);
+      color: var(--text-muted);
+    }
+
+    .tool-status.success {
+      color: var(--green);
+    }
+
+    .tool-status.error {
+      color: var(--red);
+    }
+
+    .tool-chevron {
+      font-size: 10px;
+      color: var(--text-muted);
+      transition: transform 0.2s;
+    }
+
+    .tool-card.expanded .tool-chevron {
+      transform: rotate(90deg);
+    }
+
+    .tool-card-body {
+      display: none;
+      border-top: 1px solid var(--border);
+    }
+
+    .tool-card.expanded .tool-card-body {
+      display: block;
+    }
+
+    .tool-section {
+      padding: 8px 12px;
+    }
+
+    .tool-section + .tool-section {
+      border-top: 1px solid var(--border);
+    }
+
+    .tool-section-label {
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+      margin-bottom: 4px;
+    }
+
+    .tool-section pre {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-secondary);
+      white-space: pre-wrap;
+      word-break: break-all;
+      max-height: 200px;
+      overflow-y: auto;
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    /* Streaming cursor */
+    .streaming-cursor::after {
+      content: "";
+      display: inline-block;
+      width: 8px;
+      height: 16px;
+      background: var(--accent);
+      margin-left: 2px;
+      animation: blink 0.8s step-end infinite;
+      vertical-align: text-bottom;
+    }
+
+    @keyframes blink {
+      50% { opacity: 0; }
+    }
+
+    /* Chat metadata bar */
+    .chat-meta {
+      display: flex;
+      gap: 12px;
+      padding: 6px 0;
+      font-size: 11px;
+      color: var(--text-muted);
+      font-family: var(--mono);
+    }
+
+    .chat-meta span {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
     /* ─── Logs ─────────────────────────────────────── */
     .log-toolbar {
       display: flex;
@@ -1253,7 +1393,9 @@
       return `${m}m`;
     }
 
-    // ─── Chat ────────────────────────────────────────
+    // ─── Chat (Real-time Streaming) ─────────────────
+    let chatStreaming = false;
+
     async function initChat() {
       if (!chatSessionId) {
         try {
@@ -1268,7 +1410,7 @@
     async function sendMessage() {
       const input = document.getElementById('chat-input');
       const msg = input.value.trim();
-      if (!msg) return;
+      if (!msg || chatStreaming) return;
 
       if (!chatSessionId) await initChat();
 
@@ -1280,41 +1422,265 @@
       if (emptyState) emptyState.remove();
 
       // Add user message
-      messagesEl.innerHTML += chatMsgHTML('user', msg);
-      messagesEl.scrollTop = messagesEl.scrollHeight;
-
-      // Add loading
-      const loadingId = 'loading-' + Date.now();
-      messagesEl.innerHTML += `<div id="${loadingId}" class="chat-msg assistant"><div class="avatar">C</div><div class="msg-content"><div class="msg-role">CoStar</div><div class="spinner"></div></div></div>`;
-      messagesEl.scrollTop = messagesEl.scrollHeight;
+      messagesEl.insertAdjacentHTML('beforeend', chatMsgHTML('user', msg));
+      scrollChat();
+
+      // Create streaming assistant message container
+      const streamId = 'stream-' + Date.now();
+      messagesEl.insertAdjacentHTML('beforeend', `
+        <div id="${streamId}" class="chat-msg assistant">
+          <div class="avatar">C</div>
+          <div class="msg-content">
+            <div class="msg-role">CoStar</div>
+            <div id="${streamId}-tools"></div>
+            <div id="${streamId}-text" class="streaming-cursor"></div>
+            <div id="${streamId}-meta" class="chat-meta" style="display:none;"></div>
+          </div>
+        </div>
+      `);
+      scrollChat();
 
       // Disable send
       const sendBtn = document.getElementById('chat-send-btn');
       sendBtn.disabled = true;
-      sendBtn.textContent = '...';
+      sendBtn.textContent = 'Thinking...';
+      chatStreaming = true;
 
       try {
-        const res = await api(`/api/sessions/${chatSessionId}/messages`, {
-          method: 'POST',
-          body: JSON.stringify({ message: msg }),
-        });
-
-        document.getElementById(loadingId).remove();
-        messagesEl.innerHTML += chatMsgHTML('assistant', res.content);
-        messagesEl.scrollTop = messagesEl.scrollHeight;
+        await streamChat(chatSessionId, msg, streamId);
       } catch (err) {
-        document.getElementById(loadingId).remove();
-        messagesEl.innerHTML += chatMsgHTML('assistant', `Error: ${err.message}`);
+        const textEl = document.getElementById(`${streamId}-text`);
+        if (textEl) {
+          textEl.classList.remove('streaming-cursor');
+          textEl.innerHTML = `<span style="color:var(--red);">Error: ${esc(err.message)}</span>`;
+        }
       } finally {
         sendBtn.disabled = false;
         sendBtn.textContent = 'Send';
+        chatStreaming = false;
+        // Remove streaming cursor
+        const textEl = document.getElementById(`${streamId}-text`);
+        if (textEl) textEl.classList.remove('streaming-cursor');
       }
     }
 
+    function streamChat(sessionId, message, streamId) {
+      return new Promise((resolve, reject) => {
+        const textEl = document.getElementById(`${streamId}-text`);
+        const toolsEl = document.getElementById(`${streamId}-tools`);
+        const metaEl = document.getElementById(`${streamId}-meta`);
+        let fullText = '';
+        let toolCount = 0;
+
+        // Use fetch + ReadableStream for POST-based SSE
+        fetch(`/api/sessions/${sessionId}/messages/stream`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ message }),
+        }).then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+          }
+
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = '';
+
+          function processChunk(chunk) {
+            buffer += chunk;
+            const lines = buffer.split('\n');
+            buffer = lines.pop() || '';
+
+            let eventType = '';
+            let eventData = '';
+
+            for (const line of lines) {
+              if (line.startsWith('event: ')) {
+                eventType = line.slice(7).trim();
+              } else if (line.startsWith('data: ')) {
+                eventData = line.slice(6);
+                if (eventType && eventData) {
+                  handleSSEEvent(eventType, eventData, textEl, toolsEl, metaEl, streamId, {
+                    fullText: () => fullText,
+                    setFullText: (t) => { fullText = t; },
+                    toolCount: () => toolCount,
+                    incToolCount: () => { toolCount++; },
+                  });
+                  eventType = '';
+                  eventData = '';
+                }
+              } else if (line === '') {
+                eventType = '';
+                eventData = '';
+              }
+            }
+          }
+
+          function pump() {
+            return reader.read().then(({ done, value }) => {
+              if (done) {
+                if (buffer.trim()) processChunk('\n');
+                resolve();
+                return;
+              }
+              processChunk(decoder.decode(value, { stream: true }));
+              return pump();
+            });
+          }
+
+          return pump();
+        }).catch(reject);
+      });
+    }
+
+    function handleSSEEvent(type, dataStr, textEl, toolsEl, metaEl, streamId, state) {
+      let data;
+      try { data = JSON.parse(dataStr); } catch { return; }
+
+      switch (type) {
+        case 'connected':
+          break;
+
+        case 'text_delta':
+          if (data.text && textEl) {
+            state.setFullText(state.fullText() + data.text);
+            textEl.innerHTML = formatMessage(state.fullText());
+            scrollChat();
+          }
+          break;
+
+        case 'tool_start':
+          if (toolsEl) {
+            state.incToolCount();
+            const cardId = `${streamId}-tool-${data.toolCallId || state.toolCount()}`;
+            const argsStr = data.args ? JSON.stringify(data.args, null, 2) : '{}';
+            const shortArgs = argsStr.length > 100 ? argsStr.slice(0, 100) + '...' : argsStr;
+
+            toolsEl.insertAdjacentHTML('beforeend', `
+              <div class="tool-card" id="${cardId}" onclick="toggleToolCard('${cardId}')">
+                <div class="tool-card-header">
+                  <span class="tool-icon running">&#9881;</span>
+                  <span class="tool-name">${esc(data.name || 'tool')}</span>
+                  <span class="tool-status">running...</span>
+                  <span class="tool-chevron">&#9654;</span>
+                </div>
+                <div class="tool-card-body">
+                  <div class="tool-section">
+                    <div class="tool-section-label">Arguments</div>
+                    <pre>${esc(argsStr)}</pre>
+                  </div>
+                  <div class="tool-section" id="${cardId}-result" style="display:none;">
+                    <div class="tool-section-label">Result</div>
+                    <pre></pre>
+                  </div>
+                </div>
+              </div>
+            `);
+            scrollChat();
+
+            // Update send button with tool count
+            const sendBtn = document.getElementById('chat-send-btn');
+            sendBtn.textContent = `Tool ${state.toolCount()}...`;
+          }
+          break;
+
+        case 'tool_end':
+          if (toolsEl) {
+            const cardId = `${streamId}-tool-${data.toolCallId || state.toolCount()}`;
+            const card = document.getElementById(cardId);
+            if (card) {
+              // Update icon — stop spinning
+              const icon = card.querySelector('.tool-icon');
+              if (icon) {
+                icon.classList.remove('running');
+                icon.innerHTML = data.isError ? '&#10060;' : '&#9989;';
+              }
+
+              // Update status
+              const status = card.querySelector('.tool-status');
+              if (status) {
+                const durationStr = data.durationMs ? ` (${formatDurationShort(data.durationMs)})` : '';
+                status.textContent = data.isError ? `error${durationStr}` : `done${durationStr}`;
+                status.className = `tool-status ${data.isError ? 'error' : 'success'}`;
+              }
+
+              // Show result
+              const resultSection = document.getElementById(`${cardId}-result`);
+              if (resultSection && data.result) {
+                resultSection.style.display = '';
+                resultSection.querySelector('pre').textContent = data.result;
+              }
+            }
+            scrollChat();
+          }
+          break;
+
+        case 'done':
+          if (textEl) {
+            textEl.classList.remove('streaming-cursor');
+            // Ensure final text is rendered
+            if (data.response) {
+              textEl.innerHTML = formatMessage(data.response);
+            }
+          }
+          if (metaEl && (data.toolCalls > 0 || data.inputTokens > 0)) {
+            metaEl.style.display = '';
+            let metaHTML = '';
+            if (data.toolCalls > 0) metaHTML += `<span>&#128295; ${data.toolCalls} tool${data.toolCalls > 1 ? 's' : ''}</span>`;
+            if (data.inputTokens > 0) metaHTML += `<span>&#8594; ${data.inputTokens.toLocaleString()} in</span>`;
+            if (data.outputTokens > 0) metaHTML += `<span>&#8592; ${data.outputTokens.toLocaleString()} out</span>`;
+            metaEl.innerHTML = metaHTML;
+          }
+          break;
+
+        case 'error':
+          if (textEl) {
+            textEl.classList.remove('streaming-cursor');
+            const errorMsg = data.message || 'Unknown error';
+            const currentText = state.fullText();
+            textEl.innerHTML = (currentText ? formatMessage(currentText) + '<br><br>' : '') +
+              `<span style="color:var(--red);">Error: ${esc(errorMsg)}</span>`;
+          }
+          break;
+      }
+    }
+
+    function toggleToolCard(cardId) {
+      const card = document.getElementById(cardId);
+      if (card) card.classList.toggle('expanded');
+    }
+
+    function formatDurationShort(ms) {
+      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`;
+    }
+
+    function formatMessage(text) {
+      if (!text) return '';
+      // Simple markdown-ish formatting
+      let html = esc(text);
+      // Code blocks: ```...```
+      html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre style="background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin:8px 0;overflow-x:auto;font-family:var(--mono);font-size:12px;">$2</pre>');
+      // Inline code: `...`
+      html = html.replace(/`([^`]+)`/g, '<code style="background:var(--bg-primary);padding:2px 6px;border-radius:4px;font-family:var(--mono);font-size:12px;">$1</code>');
+      // Bold: **...**
+      html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+      // Newlines
+      html = html.replace(/\n/g, '<br>');
+      return html;
+    }
+
+    function scrollChat() {
+      const el = document.getElementById('chat-messages');
+      if (el) el.scrollTop = el.scrollHeight;
+    }
+
     function chatMsgHTML(role, content) {
       const avatar = role === 'user' ? 'U' : 'C';
       const label = role === 'user' ? 'You' : 'CoStar';
-      return `<div class="chat-msg ${role}"><div class="avatar">${avatar}</div><div class="msg-content"><div class="msg-role">${label}</div><div>${esc(content)}</div></div></div>`;
+      const formattedContent = role === 'user' ? esc(content) : formatMessage(content);
+      return `<div class="chat-msg ${role}"><div class="avatar">${avatar}</div><div class="msg-content"><div class="msg-role">${label}</div><div>${formattedContent}</div></div></div>`;
     }
 
     // ─── Cron ────────────────────────────────────────