app.js index.html did changes to suite for current changes

app.js

@@ -1,3 +1,24 @@
+// =====================
+// Utilities
+// =====================
+function escapeHtml(text) {
+  return String(text).replace(/[&<>"']/g, (m) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  })[m]);
+}
+function renderMarkdown(md) {
+  if (window.marked) return marked.parse(md);
+  return `<pre>${escapeHtml(md)}</pre>`;
+}
+function detectServiceFromPaste(paste) {
+  const p = (paste || '').toLowerCase();
+  if (p.includes('nginx')) return 'nginx';
+  if (p.includes('sshd') || p.includes('ssh')) return 'sshd';
+  if (p.includes('docker')) return 'docker';
+  if (p.includes('systemd') || p.includes('unit')) return 'systemd';
+  return 'auto';
+}
+
 // =====================
 // Chat (default tab)
 // =====================
@@ -5,7 +26,6 @@ document.addEventListener('DOMContentLoaded', () => {
   const form = document.getElementById('chat-form');
   const input = document.getElementById('chat-input');
   const output = document.getElementById('chat-output');
-
   if (!form || !input || !output) return;
 
   form.addEventListener('submit', async (e) => {
@@ -29,18 +49,17 @@ document.addEventListener('DOMContentLoaded', () => {
       }
 
       const data = await response.json();
-      appendMessage('Deepshell', data.output || 'No response');
+      appendMessage('Deepshell', data.output || 'No response', true);
       Prism.highlightAll();
     } catch (err) {
       appendMessage('Error', `Network error: ${err.message}`);
     }
   });
 
-  function appendMessage(sender, message) {
+  function appendMessage(sender, message, tryMarkdown = false) {
     const msgDiv = document.createElement('div');
     msgDiv.classList.add('message');
 
-    // Detect fenced code block ```lang\n...\n```
     const codeBlockMatch = typeof message === 'string'
       ? message.match(/```(\w+)?\n([\s\S]*?)```/)
       : null;
@@ -48,7 +67,12 @@ document.addEventListener('DOMContentLoaded', () => {
     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>`;
+      msgDiv.innerHTML = `
+        <strong>${sender}:</strong>
+        <pre><code class="language-${lang}">${escapeHtml(code)}</code></pre>
+      `;
+    } else if (tryMarkdown) {
+      msgDiv.innerHTML = `<strong>${sender}:</strong>${renderMarkdown(String(message))}`;
     } else {
       msgDiv.innerHTML = `<strong>${sender}:</strong> <pre>${escapeHtml(String(message))}</pre>`;
     }
@@ -56,16 +80,6 @@ document.addEventListener('DOMContentLoaded', () => {
     output.appendChild(msgDiv);
     output.scrollTop = output.scrollHeight;
   }
-
-  function escapeHtml(text) {
-    return text.replace(/[&<>"']/g, (m) => ({
-      '&': '&amp;',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      "'": '&#39;',
-    })[m]);
-  }
 });
 
 // =====================
@@ -97,11 +111,13 @@ document.addEventListener('DOMContentLoaded', () => {
   runBtn.addEventListener('click', async () => {
     const paste = document.getElementById('clinic-input').value.trim();
     const osName = document.getElementById('clinic-os').value;
-    const service = document.getElementById('clinic-service').value;
+    let service = document.getElementById('clinic-service').value;
     const context = document.getElementById('clinic-context').value;
     const filesInput = document.getElementById('clinic-files');
     const files = filesInput ? filesInput.files : [];
 
+    if (service === 'auto' && paste) service = detectServiceFromPaste(paste);
+
     if (!paste && (!files || files.length === 0)) {
       out.innerHTML = '<div class="message"><strong>Clinic:</strong> <pre>Please paste logs or attach files.</pre></div>';
       return;
@@ -109,7 +125,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
     const formData = new FormData();
     formData.append('paste', paste);
-    // IMPORTANT: backend expects os_name (not os)
     formData.append('os_name', osName);
     formData.append('service', service);
     formData.append('context', context);
@@ -123,7 +138,7 @@ document.addEventListener('DOMContentLoaded', () => {
       let data;
       try {
         data = await res.json();
-      } catch (jsonErr) {
+      } catch {
         out.innerHTML = `<div class="message"><strong>Error:</strong> <pre>Bad JSON response (${res.status} ${res.statusText})</pre></div>`;
         return;
       }
@@ -135,21 +150,10 @@ document.addEventListener('DOMContentLoaded', () => {
       }
 
       const message = data.markdown || data.output || 'No response';
-      // If you add marked.js, you can render markdown. For now, show preformatted text.
-      out.innerHTML = `<div class="message"><strong>Clinic:</strong>\n<pre>${escapeHtml(message)}</pre></div>`;
+      out.innerHTML = `<div class="message"><strong>Clinic:</strong>${renderMarkdown(message)}</div>`;
       Prism.highlightAll();
     } catch (e) {
       out.innerHTML = `<div class="message"><strong>Error:</strong> <pre>${escapeHtml(e.message)}</pre></div>`;
     }
   });
-
-  function escapeHtml(text) {
-    return text.replace(/[&<>"']/g, (m) => ({
-      '&': '&amp;',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      "'": '&#39;',
-    })[m]);
-  }
 });

index.html

@@ -2,56 +2,82 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Deepshell Chat UI</title>
-  <link rel="stylesheet" href="/static/services.css" />
-  <link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Deepshell UI</title>
+
+  <!-- Prism (syntax highlighting) -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
+
+  <!-- Marked (markdown renderer) -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
+
   <style>
-    .tabs { display:flex; gap:10px; margin:12px 0; }
-    .tab { padding:8px 12px; border-radius:6px; background:#e5e7eb; cursor:pointer; font-weight:600; }
-    .tab.active { background:#2563eb; color:white; }
-    .panel { display:none; }
+    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#fafafa; margin:0; }
+    .container { max-width: 960px; margin: 24px auto; padding: 0 16px; }
+    h1 { font-size: 22px; margin: 0 0 12px; }
+    .tabs { display: flex; gap: 8px; margin-bottom: 12px; }
+    .tab { background:#eee; border:1px solid #ddd; padding:8px 12px; border-radius:8px; cursor:pointer; }
+    .tab.active { background:#2563eb; color:#fff; border-color:#2563eb; }
+    .panel { display:none; background:#fff; border:1px solid #e5e7eb; border-radius: 10px; padding:14px; }
     .panel.active { display:block; }
-    .clinic-controls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
-    textarea#clinic-input { width:100%; height:200px; font-family:ui-monospace,monospace; }
-    #clinic-output { margin-top:10px; }
-    .muted { color:#6b7280; font-size:0.9rem; }
+    textarea { width:100%; min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 14px; }
+    .message { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px; margin:12px 0; white-space: normal; }
+    pre { background:#0b1021; color:#e4e7f0; padding:10px; border-radius:8px; overflow:auto; }
+    .controls { display:flex; gap:8px; align-items:center; margin: 8px 0; }
+    .btn { background:#2563eb; color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; }
+    .btn:disabled { opacity: 0.6; cursor: default; }
+    select { padding:6px 8px; border-radius:8px; border:1px solid #e5e7eb; }
+
+    /* Copy button style tweak */
+    .copy-btn {
+      background: #eef2ff;
+      color: #1f3fd1;
+      border: 1px solid #c7d2fe;
+      border-radius: 6px;
+      padding: 4px 8px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+    .copy-btn:hover { background: #e0e7ff; border-color: #a5b4fc; }
+    .copy-btn:active { transform: translateY(1px); }
+    .message .copy-btn { float: right; margin: 6px 0 6px 8px; }
   </style>
 </head>
 <body>
-  <div class="navbar">💻 Deepshell Chat UI</div>
-
   <div class="container">
-    <!-- Tabs -->
+    <h1>Deepshell UI</h1>
+
     <div class="tabs">
-      <div class="tab active" data-target="chat-panel">Chat</div>
-      <div class="tab" data-target="clinic-panel">Clinic</div>
+      <div class="tab active" data-target="chat">Chat</div>
+      <div class="tab" data-target="clinic">Clinic</div>
     </div>
 
-    <!-- Chat Panel (existing) -->
-    <div id="chat-panel" class="panel active">
-      <div id="chat-output"></div>
-      <form id="chat-form">
-        <input type="text" id="chat-input" placeholder="Enter command..." autocomplete="off" required />
-        <button type="submit">Send</button>
+    <!-- Chat Panel -->
+    <div id="chat" class="panel active">
+      <form id="chat-form" class="controls">
+        <input id="chat-input" type="text" placeholder="Describe your infra task..." style="flex:1; padding:8px; border:1px solid #e5e7eb; border-radius:8px;" />
+        <button class="btn" type="submit">Run</button>
       </form>
+      <div id="chat-output"></div>
     </div>
 
-    <!-- Clinic Panel (new) -->
-    <div id="clinic-panel" class="panel">
-      <div class="clinic-controls">
+    <!-- Clinic Panel -->
+    <div id="clinic" class="panel">
+      <div class="controls" style="flex-wrap: wrap;">
         <label>OS:
           <select id="clinic-os">
-            <option value="">auto</option>
-            <option value="ubuntu">Ubuntu/Debian</option>
-            <option value="rhel">RHEL/CentOS</option>
-            <option value="alpine">Alpine</option>
+            <option value="auto" selected>auto</option>
+            <option value="rhel">rhel</option>
+            <option value="ubuntu">ubuntu</option>
+            <option value="debian">debian</option>
           </select>
         </label>
         <label>Service:
           <select id="clinic-service">
-            <option value="">auto</option>
+            <option value="auto" selected>auto</option>
             <option value="nginx">nginx</option>
             <option value="sshd">sshd</option>
             <option value="docker">docker</option>
@@ -60,31 +86,30 @@
         </label>
         <label>Context:
           <select id="clinic-context">
-            <option value="dev">dev</option>
-            <option value="stage">stage</option>
+            <option value="dev" selected>dev</option>
             <option value="prod">prod</option>
           </select>
         </label>
-        <label>
-          Attach files
-          <input type="file" id="clinic-files" multiple />
+      </div>
+
+      <div class="controls">
+        <label>Attach files
+          <input id="clinic-files" type="file" multiple />
         </label>
       </div>
 
-      <textarea id="clinic-input" placeholder="Paste logs, errors, config snippets here..."></textarea>
-      <div>
-        <button id="clinic-run">Diagnose</button>
-        <span class="muted">Deepshell Clinic analyzes the paste/files and returns diagnosis, fixes, and verification steps.</span>
+      <textarea id="clinic-input" placeholder="Paste logs or config snippets here..."></textarea>
+
+      <div class="controls">
+        <button id="clinic-run" class="btn" type="button">Diagnose</button>
+        <span style="color:#6b7280;">Deepshell Clinic analyzes the paste/files and returns diagnosis, fixes, and verification steps.</span>
       </div>
 
-      <div id="clinic-output"></div>
+      <div id="clinic-output" style="margin-top:12px;"></div>
     </div>
   </div>
 
+  <!-- Your application script -->
   <script src="/static/app.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
 </body>
 </html>