Fix app.js: align frontend with backend (/run-agent + prompt)

app.js

@@ -1,50 +1,58 @@
-document.getElementById("chat-form").addEventListener("submit", async (e) => {
-  e.preventDefault();
-  const input = document.getElementById("chat-input");
-  const output = document.getElementById("chat-output");
-  const userMessage = input.value.trim();
-
-  if (!userMessage) return;
-
-  // Show user message
-  const userDiv = document.createElement("div");
-  userDiv.className = "message";
-  userDiv.innerHTML = `<strong>User:</strong><br>${userMessage}`;
-  output.appendChild(userDiv);
-
-  // Clear input
-  input.value = "";
-
-  // Fetch response from backend
-  try {
-    const resp = await fetch("/chat", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ message: userMessage })
-    });
-
-    const data = await resp.json();
-
-    const botDiv = document.createElement("div");
-    botDiv.className = "message";
-
-    if (data.response) {
-      // Wrap output into Prism-compatible code block
-      botDiv.innerHTML = `<strong>Deepshell:</strong><br>
-        <pre><code class="language-bash">${data.response}</code></pre>`;
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('chat-form');
+  const input = document.getElementById('chat-input');
+  const output = document.getElementById('chat-output');
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const command = input.value.trim();
+    if (!command) return;
+
+    appendMessage('User', command);
+    input.value = '';
+    try {
+      const response = await fetch('/run-agent', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: command }),   // ✅ backend expects `prompt`
+      });
+      if (!response.ok) {
+        appendMessage('Error', `Server error: ${response.statusText}`);
+        return;
+      }
+      const data = await response.json();
+      appendMessage('Deepshell', data.output || 'No response');
+      Prism.highlightAll(); // Highlight newly added code blocks
+    } catch (err) {
+      appendMessage('Error', `Network error: ${err.message}`);
+    }
+  });
+
+  function appendMessage(sender, message) {
+    const msgDiv = document.createElement('div');
+    msgDiv.classList.add('message');
+
+    // Detect code block markdown ```lang ... ```
+    const codeBlockMatch = message.match(/```(\w+)?\n([\s\S]*?)```/);
+    if (codeBlockMatch) {
+      const lang = codeBlockMatch[1] || 'bash';
+      const code = codeBlockMatch[2];
+      msgDiv.innerHTML = `<strong>${sender}:</strong><pre><code class="language-${lang}">${escapeHtml(code)}</code></pre>`;
     } else {
-      botDiv.innerHTML = `<strong>Error:</strong><br>Server error: ${data.error || "Unknown error"}`;
+      msgDiv.innerHTML = `<strong>${sender}:</strong> <pre>${escapeHtml(message)}</pre>`;
     }
 
-    output.appendChild(botDiv);
+    output.appendChild(msgDiv);
     output.scrollTop = output.scrollHeight;
+  }
 
-    // Highlight with Prism and attach Copy buttons
-    Prism.highlightAll();
-  } catch (err) {
-    const botDiv = document.createElement("div");
-    botDiv.className = "message";
-    botDiv.innerHTML = `<strong>Error:</strong><br>Could not connect to server`;
-    output.appendChild(botDiv);
+  function escapeHtml(text) {
+    return text.replace(/[&<>"']/g, (m) => ({
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;',
+    })[m]);
   }
 });