@longshot/cli 0.0.1

package/dist/views/chat.js

@@ -0,0 +1,386 @@
+import { marked } from "marked";
+import { layout } from "./layout.js";
+function renderMessage(msg) {
+    const isUser = msg.role === "user";
+    const rendered = marked.parse(msg.content, { async: false });
+    return `<div class="message ${isUser ? "message-user" : "message-assistant"}">
+    <div class="message-role">${isUser ? "You" : "Claude"}</div>
+    <div class="message-content">${rendered}</div>
+  </div>`;
+}
+function typeIcon(type) {
+    switch (type) {
+        case "task_created": return "\u{1F4DD}";
+        case "task_complete": return "\u2705";
+        case "agent_spawn": return "\u{1F916}";
+        case "agent_complete": return "\u{1F3C1}";
+        case "checkpoint": return "\u{1F4BE}";
+        case "rejection": return "\u274C";
+        case "spec_update": return "\u{1F4C4}";
+        default: return "\u26A1";
+    }
+}
+function relativeTime(timestamp) {
+    const diff = Date.now() - new Date(timestamp).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1)
+        return "just now";
+    if (mins < 60)
+        return `${mins}m ago`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+}
+function renderActivityFeed(entries) {
+    if (entries.length === 0)
+        return "";
+    const items = entries.map((e) => {
+        const icon = typeIcon(e.type);
+        const time = relativeTime(e.timestamp);
+        let link = "";
+        const details = e.details || "";
+        // Extract taskId from details like "taskId:5" or summary like "Task #5"
+        const taskMatch = e.summary.match(/#(\d+)/) || details.match(/taskId:(\d+)/);
+        const runMatch = details.match(/runId:([\w-]+)/);
+        if (taskMatch) {
+            link = `/tasks/${taskMatch[1]}`;
+        }
+        if (runMatch) {
+            link = `/run/${runMatch[1]}`;
+        }
+        const summary = link
+            ? `<a href="${link}" class="activity-link">${e.summary}</a>`
+            : e.summary;
+        return `<div class="activity-item"><span class="activity-icon">${icon}</span><span class="activity-summary">${summary}</span><span class="activity-time">${time}</span></div>`;
+    }).join("\n");
+    return `<details class="activity-feed">
+    <summary class="activity-header">Recent Activity</summary>
+    <div class="activity-list">${items}</div>
+  </details>`;
+}
+export function chatPage(messages, _pendingDiffs, agentRunning, currentRunId, chatPending = false, queuedCount = 0, services = [], historyEntries = []) {
+    // Filter out agent messages (those with runId) — display-only filtering
+    const filteredMessages = messages.filter((m) => !m.runId);
+    const messageHtml = filteredMessages.map(renderMessage).join("\n");
+    const queueSuffix = queuedCount > 0 ? ` ${queuedCount} queued` : "";
+    const bannerHtml = agentRunning && currentRunId
+        ? `<a href="/agent/${currentRunId}" class="agent-banner">Agent working...${queueSuffix} tap to view progress</a>`
+        : "";
+    const thinkingHtml = chatPending
+        ? `<div class="message message-assistant" id="thinking-indicator">
+        <div class="message-role">Claude</div>
+        <div class="message-content"><em>Thinking...</em></div>
+      </div>`
+        : "";
+    const activityHtml = renderActivityFeed(historyEntries);
+    const body = `
+    <div class="chat-container">
+      ${bannerHtml}
+      ${activityHtml}
+      <div class="messages" id="messages">
+        ${messageHtml}
+        ${thinkingHtml}
+      </div>
+      ${services.length ? `<div class="service-status-bar" id="service-bar">
+        ${services.map((s) => {
+        const color = s.status === "running" ? "var(--accent-green)" : s.status === "crashed" ? "var(--accent-red)" : "var(--text-muted)";
+        return `<button class="service-toggle" data-id="${s.id}" data-status="${s.status}" onclick="toggleService('${s.id}', '${s.status}')">
+            <span class="service-dot" style="background:${color}"></span>
+            ${s.name}
+          </button>`;
+    }).join("\n")}
+      </div>` : ""}
+      <div class="chat-input-area">
+        <form class="chat-input" id="chat-form">
+          <textarea
+            name="message"
+            id="message-input"
+            placeholder="Ask Claude or describe what you want..."
+            rows="2"
+            autofocus
+          ></textarea>
+          <button type="submit" id="send-btn">Send</button>
+        </form>
+        <div class="chat-action-buttons">
+          <button class="draft-task-btn" id="draft-task-btn">Draft Task</button>
+          <button class="draft-task-btn" id="add-service-btn" style="border-color:var(--accent-green);color:var(--accent-green)">Add Service</button>
+        </div>
+      </div>
+    </div>
+    <script>
+      const form = document.getElementById('chat-form');
+      const input = document.getElementById('message-input');
+      const messagesEl = document.getElementById('messages');
+      const sendBtn = document.getElementById('send-btn');
+      const draftBtn = document.getElementById('draft-task-btn');
+      let messageCount = ${filteredMessages.length};
+      let polling = ${chatPending ? "true" : "false"};
+
+      function scrollToBottom() {
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+      scrollToBottom();
+
+      function escapeHtml(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+      }
+
+      input.addEventListener('input', () => {
+        input.style.height = 'auto';
+        input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+      });
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          form.dispatchEvent(new Event('submit'));
+        }
+      });
+
+      function showThinking() {
+        let indicator = document.getElementById('thinking-indicator');
+        if (!indicator) {
+          indicator = document.createElement('div');
+          indicator.id = 'thinking-indicator';
+          indicator.className = 'message message-assistant';
+          indicator.innerHTML = '<div class="message-role">Claude</div><div class="message-content"><em>Thinking...</em></div>';
+          messagesEl.appendChild(indicator);
+        }
+        scrollToBottom();
+      }
+
+      function removeThinking() {
+        const indicator = document.getElementById('thinking-indicator');
+        if (indicator) indicator.remove();
+      }
+
+      async function pollForResponse() {
+        if (polling) return; // already polling
+        polling = true;
+        showThinking();
+
+        const poll = async () => {
+          try {
+            const resp = await fetch('/api/chat/messages?after=' + messageCount);
+            const data = await resp.json();
+
+            if (data.messages.length > 0) {
+              removeThinking();
+              for (const msg of data.messages) {
+                const div = document.createElement('div');
+                div.className = 'message ' + (msg.role === 'user' ? 'message-user' : 'message-assistant');
+                div.innerHTML = '<div class="message-role">' + (msg.role === 'user' ? 'You' : 'Claude') + '</div><div class="message-content">' + (msg.html || msg.content) + '</div>';
+                messagesEl.appendChild(div);
+              }
+              messageCount = data.total;
+              scrollToBottom();
+            }
+
+            if (data.pending) {
+              showThinking();
+              setTimeout(poll, 2000);
+            } else {
+              removeThinking();
+              polling = false;
+              sendBtn.disabled = false;
+              sendBtn.textContent = 'Send';
+              refreshServiceBar();
+            }
+          } catch {
+            polling = false;
+            removeThinking();
+            sendBtn.disabled = false;
+            sendBtn.textContent = 'Send';
+          }
+        };
+
+        setTimeout(poll, 2000);
+      }
+
+      // If already pending on page load, start polling
+      if (polling) {
+        polling = false; // reset so pollForResponse can set it
+        pollForResponse();
+      }
+
+      form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const message = input.value.trim();
+        if (!message || polling) return;
+
+        // Append user message to DOM immediately
+        const userDiv = document.createElement('div');
+        userDiv.className = 'message message-user';
+        userDiv.innerHTML = '<div class="message-role">You</div><div class="message-content">' + escapeHtml(message) + '</div>';
+        messagesEl.appendChild(userDiv);
+
+        input.value = '';
+        input.style.height = 'auto';
+        sendBtn.disabled = true;
+        sendBtn.textContent = '...';
+        scrollToBottom();
+
+        try {
+          const resp = await fetch('/api/chat/send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message }),
+          });
+          const data = await resp.json();
+
+          if (resp.ok) {
+            messageCount++; // user message was saved server-side
+            pollForResponse();
+          } else {
+            sendBtn.disabled = false;
+            sendBtn.textContent = 'Send';
+            if (data.error) {
+              const errDiv = document.createElement('div');
+              errDiv.className = 'error';
+              errDiv.textContent = data.error;
+              messagesEl.appendChild(errDiv);
+            }
+          }
+        } catch (err) {
+          sendBtn.disabled = false;
+          sendBtn.textContent = 'Send';
+          const errDiv = document.createElement('div');
+          errDiv.className = 'error';
+          errDiv.textContent = 'Failed to send message';
+          messagesEl.appendChild(errDiv);
+        }
+
+        input.focus();
+      });
+
+      // Service controls
+      async function toggleService(id, status) {
+        const action = status === 'running' ? 'stop' : 'start';
+        await fetch('/api/services/' + id + '/' + action, { method: 'POST' });
+        // Refresh service bar
+        refreshServiceBar();
+      }
+
+      async function refreshServiceBar() {
+        try {
+          const resp = await fetch('/api/services');
+          const services = await resp.json();
+          const bar = document.getElementById('service-bar');
+          if (!bar && services.length === 0) return;
+          if (!bar && services.length > 0) {
+            location.reload();
+            return;
+          }
+          if (bar) {
+            bar.innerHTML = services.map(s => {
+              const color = s.status === 'running' ? 'var(--accent-green)' : s.status === 'crashed' ? 'var(--accent-red)' : 'var(--text-muted)';
+              return '<button class="service-toggle" data-id="' + s.id + '" data-status="' + s.status + '" onclick="toggleService(\\'' + s.id + '\\', \\'' + s.status + '\\')">' +
+                '<span class="service-dot" style="background:' + color + '"></span>' + s.name + '</button>';
+            }).join('');
+          }
+        } catch {}
+      }
+
+      // Poll service status
+      setInterval(refreshServiceBar, 5000);
+
+      const addServiceBtn = document.getElementById('add-service-btn');
+      addServiceBtn.addEventListener('click', async () => {
+        const message = input.value.trim();
+        if (!message || polling) return;
+
+        // Show user message in DOM immediately
+        const userDiv = document.createElement('div');
+        userDiv.className = 'message message-user';
+        userDiv.innerHTML = '<div class="message-role">You</div><div class="message-content">' + escapeHtml(message) + '</div>';
+        messagesEl.appendChild(userDiv);
+
+        input.value = '';
+        input.style.height = 'auto';
+        sendBtn.disabled = true;
+        sendBtn.textContent = '...';
+        scrollToBottom();
+
+        try {
+          const resp = await fetch('/api/chat/add-service', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message }),
+          });
+          const data = await resp.json();
+
+          if (resp.ok) {
+            messageCount++;
+            pollForResponse();
+          } else {
+            sendBtn.disabled = false;
+            sendBtn.textContent = 'Send';
+            if (data.error) {
+              const errDiv = document.createElement('div');
+              errDiv.className = 'error';
+              errDiv.textContent = data.error;
+              messagesEl.appendChild(errDiv);
+            }
+          }
+        } catch (err) {
+          sendBtn.disabled = false;
+          sendBtn.textContent = 'Send';
+          const errDiv = document.createElement('div');
+          errDiv.className = 'error';
+          errDiv.textContent = 'Failed to send message';
+          messagesEl.appendChild(errDiv);
+        }
+
+        input.focus();
+      });
+
+      // Make functions available globally for onclick handlers
+      window.toggleService = toggleService;
+
+      draftBtn.addEventListener('click', async () => {
+        draftBtn.disabled = true;
+        draftBtn.textContent = 'Queuing...';
+        try {
+          const message = input.value.trim();
+          if (!message) {
+            draftBtn.disabled = false;
+            draftBtn.textContent = 'Draft Task';
+            return;
+          }
+          // Save to chat history and show in DOM
+          const userDiv = document.createElement('div');
+          userDiv.className = 'message message-user';
+          userDiv.innerHTML = '<div class="message-role">You</div><div class="message-content">' + escapeHtml(message) + '</div>';
+          messagesEl.appendChild(userDiv);
+          input.value = '';
+          input.style.height = 'auto';
+          await fetch('/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message }),
+          });
+          // Enqueue draft task
+          const resp = await fetch('/agent/draft-task', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message }),
+          });
+          const data = await resp.json();
+          if (data.ok) {
+            window.location.href = '/tasks';
+          } else {
+            draftBtn.disabled = false;
+            draftBtn.textContent = 'Draft Task';
+          }
+        } catch (err) {
+          draftBtn.disabled = false;
+          draftBtn.textContent = 'Draft Task';
+        }
+      });
+    </script>`;
+    return layout("Chat", "chat", body);
+}