feat: wire Groq and serve UI from backend

app.js

@@ -1,228 +1,129 @@
-// =====================
-// 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';
-  if (p.includes('postgres') || p.includes('psql')) return 'postgresql';
-  if (p.includes('httpd') || p.includes('apache')) return 'apache';
-  return 'auto';
-}
-function humanSize(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-// =====================
-// Chat (default tab)
-// =====================
-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) => {
-    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 }),
-      });
-
-      if (!response.ok) {
-        appendMessage('Error', `Server error: ${response.status} ${response.statusText}`);
-        return;
-      }
+// Plain Vanilla Chat Frontend
+// - One textarea, one Send button, one output area
+// - POSTs to /chat/run-agent with { prompt }
+// - Renders answer or error; optional Markdown if window.marked is available
+
+(function () {
+  "use strict";
+
+  // ---------- Utilities ----------
+  function escapeHtml(text) {
+    return String(text).replace(/[&<>"']/g, (m) => ({
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+    })[m]);
+  }
 
-      const data = await response.json();
-      appendMessage('Deepshell', data.output || 'No response', true);
-      Prism.highlightAll();
-    } catch (err) {
-      appendMessage('Error', `Network error: ${err.message}`);
-    }
-  });
+  function renderMarkdown(md) {
+    if (window.marked) return marked.parse(md);
+    return `<pre>${escapeHtml(md)}</pre>`;
+  }
 
-  function appendMessage(sender, message, tryMarkdown = false) {
-    const msgDiv = document.createElement('div');
-    msgDiv.classList.add('message');
+  function appendMessage(container, sender, message, useMarkdown = false) {
+    const msgDiv = document.createElement("div");
+    msgDiv.classList.add("message");
 
-    const codeBlockMatch = typeof message === 'string'
-      ? message.match(/```(\w+)?\n([\s\S]*?)```/)
-      : null;
+    const codeBlockMatch =
+      typeof message === "string"
+        ? message.match(/```(\w+)?\n([\s\S]*?)```/)
+        : null;
 
     if (codeBlockMatch) {
-      const lang = codeBlockMatch[1] || 'bash';
+      const lang = codeBlockMatch[1] || "bash";
       const code = codeBlockMatch[2];
       msgDiv.innerHTML = `
         <strong>${sender}:</strong>
         <pre><code class="language-${lang}">${escapeHtml(code)}</code></pre>
       `;
-    } else if (tryMarkdown) {
+    } else if (useMarkdown) {
       msgDiv.innerHTML = `<strong>${sender}:</strong>${renderMarkdown(String(message))}`;
     } else {
       msgDiv.innerHTML = `<strong>${sender}:</strong> <pre>${escapeHtml(String(message))}</pre>`;
     }
 
-    output.appendChild(msgDiv);
-    output.scrollTop = output.scrollHeight;
-  }
-});
-
-// =====================
-// Tabs
-// =====================
-document.addEventListener('DOMContentLoaded', () => {
-  const tabs = document.querySelectorAll('.tab');
-  const panels = document.querySelectorAll('.panel');
-  if (!tabs.length || !panels.length) return;
-
-  tabs.forEach(tab => {
-    tab.addEventListener('click', () => {
-      tabs.forEach(t => t.classList.remove('active'));
-      panels.forEach(p => p.classList.remove('active'));
-      tab.classList.add('active');
-      document.getElementById(tab.dataset.target).classList.add('active');
-    });
-  });
-});
-
-// =====================
-// Clinic
-// =====================
-document.addEventListener('DOMContentLoaded', () => {
-  const runBtn = document.getElementById('clinic-run');
-  const out = document.getElementById('clinic-output');
-  if (!runBtn || !out) return;
-
-  runBtn.addEventListener('click', async () => {
-    const paste = document.getElementById('clinic-input').value.trim();
-    const osName = document.getElementById('clinic-os').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;
-    }
+    container.appendChild(msgDiv);
+    container.scrollTop = container.scrollHeight;
 
-    const formData = new FormData();
-    formData.append('paste', paste);
-    formData.append('os_name', osName);
-    formData.append('service', service);
-    formData.append('context', context);
-    for (let i = 0; i < files.length; i++) formData.append('files', files[i]);
-
-    out.innerHTML = '<div class="message"><strong>Clinic:</strong> <pre>Analyzing…</pre></div>';
-
-    try {
-      const res = await fetch('/clinic/diagnose', { method: 'POST', body: formData });
-      let data;
-      try { data = await res.json(); } catch {
-        out.innerHTML = `<div class="message"><strong>Error:</strong> <pre>Bad JSON response (${res.status} ${res.statusText})</pre></div>`;
-        return;
+    if (window.Prism) {
+      try {
+        Prism.highlightAllUnder(container);
+      } catch (_) {
+        // no-op if Prism not available
       }
+    }
+  }
 
-      if (!res.ok || data.success === false) {
-        const errText = (data && (data.error || data.detail)) || `${res.status} ${res.statusText}`;
-        out.innerHTML = `<div class="message"><strong>Error:</strong> <pre>${escapeHtml(errText)}</pre></div>`;
-        return;
-      }
+  // ---------- Chat wiring ----------
+  document.addEventListener("DOMContentLoaded", () => {
+    const form = document.getElementById("chat-form");
+    const input = document.getElementById("chat-input");
+    const output = document.getElementById("chat-output");
+    const sendBtn = document.getElementById("chat-send");
 
-      const message = data.markdown || data.output || 'No response';
-      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>`;
+    if (!form || !input || !output) {
+      console.warn("Chat elements not found (chat-form/chat-input/chat-output).");
+      return;
     }
-  });
-});
-
-// =====================
-// Cases
-// =====================
-document.addEventListener('DOMContentLoaded', () => {
-  const listEl = document.getElementById('cases-list');
-  const refreshBtn = document.getElementById('cases-refresh');
-  const viewer = document.getElementById('case-viewer');
-  const titleEl = document.getElementById('case-title');
-  const contentEl = document.getElementById('case-content');
-
-  if (!listEl || !refreshBtn) return;
-
-  async function loadCases() {
-    listEl.innerHTML = '<div class="message"><strong>Cases:</strong> Loading…</div>';
-    try {
-      const res = await fetch('/clinic/cases');
-      const data = await res.json();
-      const cases = (data && data.cases) || [];
-      if (!cases.length) {
-        listEl.innerHTML = '<div class="message"><strong>Cases:</strong> No cases yet.</div>';
-        return;
-      }
-      listEl.innerHTML = '';
-      cases.forEach(c => {
-        const row = document.createElement('div');
-        row.className = 'case-row';
-        row.innerHTML = `
-          <div><strong>${c.id}</strong> <span style="color:#6b7280;">(${humanSize(c.size)})</span></div>
-          <div class="case-actions">
-            <button class="btn btn-view" data-id="${c.id}">View</button>
-            <a class="btn" href="/clinic/cases/${c.id}" download="${c.id}.md">Download</a>
-          </div>
-        `;
-        listEl.appendChild(row);
-      });
 
-      // Wire view buttons
-      listEl.querySelectorAll('.btn-view').forEach(btn => {
-        btn.addEventListener('click', async () => {
-          const id = btn.getAttribute('data-id');
-          titleEl.textContent = `Case ${id}`;
-          viewer.style.display = 'block';
-          contentEl.innerHTML = '<div class="message">Loading…</div>';
-          const res = await fetch(`/clinic/cases/${id}`);
-          if (!res.ok) {
-            contentEl.innerHTML = `<div class="message"><strong>Error:</strong> <pre>${res.status} ${res.statusText}</pre></div>`;
+    async function sendPrompt(prompt) {
+      try {
+        const response = await fetch("/chat/run-agent", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ prompt }),
+        });
+
+        // Try JSON; if it fails, show raw text to help debugging
+        let data = null;
+        let rawText = "";
+        try {
+          rawText = await response.clone().text();
+          data = JSON.parse(rawText);
+        } catch {
+          if (!response.ok) {
+            appendMessage(output, "Error", `Server error: ${response.status} ${response.statusText}\n${rawText || "(no body)"}`);
             return;
           }
-          const md = await res.text();
-          contentEl.innerHTML = renderMarkdown(md);
-          Prism.highlightAll();
-        });
-      });
-    } catch (e) {
-      listEl.innerHTML = `<div class="message"><strong>Error:</strong> <pre>${escapeHtml(e.message)}</pre></div>`;
+          appendMessage(output, "Error", `Bad JSON response (${response.status} ${response.statusText})`);
+          return;
+        }
+
+        if (!response.ok || data.error) {
+          const errText = data.error || `${response.status} ${response.statusText}`;
+          appendMessage(output, "Error", errText);
+          return;
+        }
+
+        const text = data.answer ?? data.output ?? "No response";
+        appendMessage(output, "DeepShell", text, true);
+      } catch (err) {
+        appendMessage(output, "Error", `Network error: ${err.message}`);
+      } finally {
+        if (sendBtn) sendBtn.disabled = false;
+        input.focus();
+      }
     }
-  }
 
-  refreshBtn.addEventListener('click', loadCases);
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const prompt = input.value.trim();
+      if (!prompt) return;
+
+      appendMessage(output, "You", prompt);
+      input.value = "";
+      if (sendBtn) sendBtn.disabled = true;
+
+      sendPrompt(prompt);
+    });
 
-  // Auto-load when tab becomes active
-  const casesTab = document.querySelector('.tab[data-target="cases"]');
-  casesTab.addEventListener('click', loadCases);
-});
+    if (sendBtn) {
+      sendBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        form.requestSubmit();
+      });
+    }
+  });
+})();

deepshell-backend/deepshell/__main__.py

@@ -1,12 +1,105 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+import os
+from pathlib import Path
 
-"""
-Entry point for running DeepShell as a module.
+from .llm import get_global_client
 
-Usage:
-    python -m deepshell [OPTIONS] [PROMPT]
-"""
+# Resolve paths
+# This file is at: deepshell-backend/deepshell/__main__.py
+# Repo root is two levels up from here
+REPO_ROOT = Path(__file__).resolve().parents[2]  # deepshell_modui/
+INDEX_PATH = REPO_ROOT / "index.html"
+STATIC_ROOT = REPO_ROOT  # serve app.js, services.css, etc. from repo root
 
-from .cli import app
+app = FastAPI(title="DeepShell Backend + UI")
+
+# CORS (kept minimal; mostly redundant when same-origin)
+default_origins = [
+    "http://localhost",
+    "http://localhost:8001",
+    "http://127.0.0.1",
+    "http://127.0.0.1:8001",
+]
+env_origins = os.getenv("CORS_ORIGINS", "")
+extra_origins = [o.strip() for o in env_origins.split(",") if o.strip()]
+allowed_origins = default_origins + extra_origins
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=allowed_origins,
+    allow_credentials=True,
+    allow_methods=["GET", "POST", "OPTIONS"],
+    allow_headers=["*"],
+)
+
+# Mount static files from repo root at /static (and also expose top-level files)
+# We’ll explicitly serve index.html at /, and expose other files at their names.
+# Primary mount so /app.js, /services.css, etc. work:
+app.mount("/static", StaticFiles(directory=str(STATIC_ROOT), html=False), name="static")
+
+class ChatRequest(BaseModel):
+    prompt: str
+
+# Serve index.html at /
+@app.get("/")
+def root_page():
+    if INDEX_PATH.exists():
+        return FileResponse(str(INDEX_PATH))
+    return {
+        "name": "DeepShell Backend",
+        "status": "ok",
+        "endpoints": ["/chat/ready", "/chat/run-agent"],
+        "note": f"index.html not found at {INDEX_PATH}",
+    }
+
+# Convenience routes to serve common top-level assets directly
+# so your <script src="./app.js"> works without /static prefix.
+@app.get("/app.js")
+def get_app_js():
+    path = STATIC_ROOT / "app.js"
+    if path.exists():
+        return FileResponse(str(path), media_type="application/javascript")
+    return {"detail": "Not Found"}, 404
+
+@app.get("/services.css")
+def get_css():
+    path = STATIC_ROOT / "services.css"
+    if path.exists():
+        return FileResponse(str(path), media_type="text/css")
+    return {"detail": "Not Found"}, 404
+
+@app.get("/chat/ready")
+def chat_ready():
+    try:
+        _ = get_global_client(os.getenv("PROVIDER", "groq"))
+        return {"status": "ok"}
+    except Exception as e:
+        return {"status": "error", "detail": str(e)}
+
+@app.post("/chat/run-agent")
+def run_agent(req: ChatRequest):
+    prompt = (req.prompt or "").strip()
+    if not prompt:
+        return {"error": "prompt is required"}
+
+    client = get_global_client(os.getenv("PROVIDER", "groq"))
+    resp = client.chat(prompt, max_tokens=1024, temperature=0.1)
+
+    if not hasattr(resp, "choices") or not resp.choices:
+        try:
+            text = resp.choices[0].message.content
+        except Exception:
+            text = str(resp)
+        return {"error": text}
+
+    text = resp.choices[0].message.content
+    return {"answer": text}
 
 if __name__ == "__main__":
-    app()
+    import uvicorn
+    port = int(os.getenv("PORT", "8001"))
+    uvicorn.run("deepshell.__main__:app", host="0.0.0.0", port=port, reload=False)

deepshell-backend/deepshell/llm.py

@@ -1,7 +1,7 @@
 """
-OpenAI LLM client integration using LiteLLM.
+OpenAI and Groq LLM client integration using LiteLLM and Groq SDK.
 
-This module provides a unified interface for interacting with OpenAI language models.
+This module provides a unified interface for interacting with language models.
 """
 
 import json
@@ -12,6 +12,7 @@ from abc import ABC, abstractmethod
 
 import litellm
 from litellm import completion
+from groq import Groq
 from rich.console import Console
 
 from .config import config
@@ -224,32 +225,109 @@ class OpenAIClient(BaseLLMClient):
         return "gpt-3.5-turbo"
 
 
-# Provider registry (OpenAI only)
+class GroqClient(BaseLLMClient):
+    """Groq LLM client (OpenAI-compatible chat.completions)."""
+
+    def __init__(self, api_key: Optional[str] = None, **kwargs):
+        super().__init__(api_key, **kwargs)
+        # Prefer explicit key, then config, then env
+        self.api_key = api_key or config.get("GROQ_API_KEY") or os.getenv("GROQ_API_KEY")
+        if not self.api_key:
+            raise ValueError(
+                "Groq API key is required. Set GROQ_API_KEY in env or config."
+            )
+        # The Groq SDK handles its own base
+        self.client = Groq(api_key=self.api_key)
+        # Default model as per CLI tests
+        self.default_model = config.get("LLM_MODEL") or os.getenv("LLM_MODEL", "llama-3.3-70b-versatile")
+
+    def get_model_prefix(self) -> str:
+        return "groq/"
+
+    def get_available_models(self) -> List[str]:
+        return [
+            "llama-3.3-70b-versatile",
+            "llama-3.1-8b-instant",
+        ]
+
+    def get_default_model(self) -> str:
+        return self.default_model
+
+    def complete(
+        self,
+        messages: List[Dict[str, str]],
+        model: Optional[str] = None,
+        temperature: float = 0.0,
+        top_p: float = 1.0,
+        max_tokens: Optional[int] = None,
+        stream: bool = False,
+        functions: Optional[List[Dict[str, Any]]] = None,
+        **kwargs
+    ) -> Union[Any, Generator[str, None, None]]:
+        """
+        Override complete to call Groq SDK directly, keeping the same shape as BaseLLMClient expects.
+        """
+        model_name = model or self.get_default_model()
+        try:
+            if stream:
+                # Groq stream returns an iterator of chunks
+                response = self.client.chat.completions.create(
+                    model=model_name,
+                    messages=messages,
+                    temperature=temperature,
+                    max_tokens=max_tokens,
+                    stream=True,
+                )
+                # Return the iterator directly; BaseLLMClient._stream_completion expects an iterator
+                return response
+            else:
+                response = self.client.chat.completions.create(
+                    model=model_name,
+                    messages=messages,
+                    temperature=temperature,
+                    max_tokens=max_tokens,
+                    stream=False,
+                )
+                return response
+        except Exception as e:
+            return self._create_error_response(str(e))
+
+
+# Provider registry (OpenAI and Groq)
 PROVIDERS = {
     "openai": OpenAIClient,
+    "groq": GroqClient,
 }
 
 
 def get_client(provider: Optional[str] = None) -> BaseLLMClient:
-    """Get LLM client for OpenAI."""
-    provider_name = provider or config.get("PROVIDER", "openai")
-    if provider_name != "openai":
-        raise ValueError("Only 'openai' provider is supported in this version.")
+    """Get LLM client (OpenAI or Groq)."""
+    provider_name = provider or config.get("PROVIDER") or os.getenv("PROVIDER", "groq")
+    if provider_name not in PROVIDERS:
+        raise ValueError(f"Unsupported provider '{provider_name}'. Use one of: {list(PROVIDERS.keys())}")
     client_class = PROVIDERS[provider_name]
+    
+    # Determine which API key to use based on provider
+    if provider_name == "groq":
+        api_key = config.get("GROQ_API_KEY") or os.getenv("GROQ_API_KEY")
+    else:
+        api_key = config.get("OPENAI_API_KEY") or os.getenv("OPENAI_API_KEY")
+    
     return client_class(
+        api_key=api_key,
         timeout=config.get("REQUEST_TIMEOUT", 60),
         max_retries=config.get("MAX_RETRIES", 3),
     )
 
 
 def get_available_providers() -> List[str]:
-    """Get list of available providers (OpenAI only)."""
-    return ["openai"]
+    """Get list of available providers."""
+    return list(PROVIDERS.keys())
 
 
 def validate_provider(provider: str) -> bool:
-    """Validate if provider is available (OpenAI only)."""
-    return provider == "openai"
+    """Validate if provider is available."""
+    return provider in PROVIDERS
 
 
 # Global client instance
@@ -260,9 +338,9 @@ _current_provider: Optional[str] = None
 def get_global_client(provider: Optional[str] = None) -> BaseLLMClient:
     """Get or create global client instance."""
     global _client, _current_provider
-    provider_name = provider or config.get("PROVIDER", "openai")
-    if provider_name != "openai":
-        raise ValueError("Only 'openai' provider is supported in this version.")
+    provider_name = provider or config.get("PROVIDER") or os.getenv("PROVIDER", "groq")
+    if provider_name not in PROVIDERS:
+        raise ValueError(f"Unsupported provider '{provider_name}'. Use one of: {list(PROVIDERS.keys())}")
     if _client is None or _current_provider != provider_name:
         _client = get_client(provider_name)
         _current_provider = provider_name

deepshell-backend/requirements.txt

@@ -1,3 +1,4 @@
+groq>=0.9.0
 typer>=0.9.0
 rich>=13.0.0
 litellm==1.74.9.post1

index.html

@@ -3,113 +3,161 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Deepshell UI</title>
+  <title>DeepShell Chat</title>
 
+  <!-- Optional: Prism for code highlighting inside responses -->
   <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>
+
+  <!-- Optional: marked for Markdown rendering -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
 
   <style>
-    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; }
-
-    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; }
-
-    .cases-list { border-top: 1px solid #e5e7eb; margin-top: 8px; }
-    .case-row { display:flex; justify-content: space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f0f0f0; font-family: ui-monospace, monospace; }
-    .case-actions button { margin-left: 8px; }
-    .case-viewer { margin-top: 12px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px; }
+    :root {
+      --bg: #0b1220;
+      --panel: #0f172a;
+      --border: #1e293b;
+      --text: #e5e7eb;
+      --muted: #94a3b8;
+      --accent: #22c55e;
+      --accent-2: #3b82f6;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--text);
+      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+    }
+    .container {
+      max-width: 900px;
+      margin: 24px auto;
+      padding: 0 16px;
+    }
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+    .brand {
+      font-weight: 700;
+      font-size: 18px;
+      letter-spacing: 0.4px;
+    }
+    .status {
+      font-size: 12px;
+      color: var(--muted);
+    }
+    .panel {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 12px;
+    }
+    #chat-output {
+      height: 55vh;
+      overflow-y: auto;
+      padding: 8px;
+      background: #0b1220;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+    }
+    .message {
+      margin: 10px 0;
+      padding: 8px 10px;
+      background: #0b1220;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      line-height: 1.5;
+    }
+    .message strong {
+      display: inline-block;
+      color: var(--accent-2);
+      margin-bottom: 6px;
+    }
+    pre {
+      margin: 6px 0 0;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .composer {
+      margin-top: 12px;
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 8px;
+      align-items: start;
+    }
+    #chat-input {
+      width: 100%;
+      resize: vertical;
+      min-height: 80px;
+      max-height: 240px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      background: #0b1220;
+      color: var(--text);
+      font-family: inherit;
+      font-size: 14px;
+    }
+    #chat-send {
+      height: 40px;
+      padding: 0 14px;
+      border: 1px solid var(--border);
+      background: linear-gradient(180deg, #1f2937, #111827);
+      color: var(--text);
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: 600;
+    }
+    #chat-send:hover {
+      border-color: #334155;
+    }
+    .hint {
+      margin-top: 8px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
   </style>
 </head>
 <body>
   <div class="container">
-    <h1>Deepshell UI</h1>
+    <header>
+      <div class="brand">DeepShell Chat</div>
+      <div class="status">Backend: <span id="status">checking…</span></div>
+    </header>
 
-    <div class="tabs">
-      <div class="tab active" data-target="chat">Chat</div>
-      <div class="tab" data-target="clinic">Clinic</div>
-      <div class="tab" data-target="cases">Cases</div>
-    </div>
+    <div class="panel">
+      <div id="chat-output" class="panel"></div>
 
-    <!-- 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 id="chat-form" class="composer" autocomplete="off">
+        <textarea id="chat-input" placeholder="Type your prompt… e.g., Reply with exactly one word: pong."></textarea>
+        <button id="chat-send" type="submit">Send</button>
       </form>
-      <div id="chat-output"></div>
-    </div>
-
-    <!-- Clinic Panel -->
-    <div id="clinic" class="panel">
-      <div class="controls" style="flex-wrap: wrap;">
-        <label>OS:
-          <select id="clinic-os">
-            <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" selected>auto</option>
-            <option value="nginx">nginx</option>
-            <option value="sshd">sshd</option>
-            <option value="docker">docker</option>
-            <option value="systemd">systemd</option>
-          </select>
-        </label>
-        <label>Context:
-          <select id="clinic-context">
-            <option value="dev" selected>dev</option>
-            <option value="prod">prod</option>
-          </select>
-        </label>
-      </div>
 
-      <div class="controls">
-        <label>Attach files
-          <input id="clinic-files" type="file" multiple />
-        </label>
-      </div>
-
-      <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" style="margin-top:12px;"></div>
-    </div>
-
-    <!-- Cases Panel -->
-    <div id="cases" class="panel">
-      <div class="controls">
-        <button id="cases-refresh" class="btn" type="button">Refresh</button>
-      </div>
-      <div id="cases-list" class="cases-list"></div>
-      <div id="case-viewer" class="case-viewer" style="display:none;">
-        <h3 id="case-title" style="margin-top:0;">Case</h3>
-        <div id="case-content"></div>
+      <div class="hint">
+        Tip: Backend endpoints are /chat/ready and /chat/run-agent on the same origin/port.
       </div>
     </div>
   </div>
 
-  <script src="/static/app.js"></script>
+  <script src="./app.js"></script>
+  <script>
+    // simple readiness check
+    (async () => {
+      const el = document.getElementById('status');
+      try {
+        const r = await fetch('/chat/ready');
+        const j = await r.json().catch(() => ({}));
+        el.textContent = (r.ok && j.status === 'ok') ? 'ok' : 'error';
+      } catch {
+        el.textContent = 'offline';
+      }
+    })();
+  </script>
 </body>
 </html>

run_deepshell.py

@@ -4,8 +4,14 @@ import os
 import signal
 
 def start_backend():
-    cmd = [sys.executable, os.path.join("deepshell-backend", "wrapper.py")]
-    process = subprocess.Popen(cmd)
+    env = os.environ.copy()
+    # Ensure backend path is on PYTHONPATH
+    backend_dir = os.path.join(os.getcwd(), "deepshell-backend")
+    env["PYTHONPATH"] = backend_dir + os.pathsep + env.get("PYTHONPATH", "")
+    # Respect env vars already set in shell (PROVIDER, GROQ_API_KEY, LLM_MODEL, PORT)
+    # Run the deepshell package (__main__.py) which exposes the FastAPI app
+    cmd = [sys.executable, "-m", "deepshell"]
+    process = subprocess.Popen(cmd, env=env, cwd=backend_dir)
     print(f"DeepShell backend started with PID {process.pid}")
     return process