Add Phase 1 command execution: SSE streaming + Execute button with safety checks

app.js

@@ -1,4 +1,4 @@
-// Plain Vanilla Chat Frontend with Copy Button
+// Plain Vanilla Chat Frontend with Copy Button, SSE Streaming, and Command Execution
 (function () {
   "use strict";
 
@@ -24,12 +24,10 @@
     btn.textContent = "Copy";
     btn.onclick = async () => {
       try {
-        // Try modern clipboard API first
         await navigator.clipboard.writeText(code);
         btn.textContent = "Copied!";
         setTimeout(() => { btn.textContent = "Copy"; }, 2000);
       } catch (err) {
-        // Fallback for non-secure contexts
         const textarea = document.createElement("textarea");
         textarea.value = code;
         textarea.style.position = "fixed";
@@ -50,53 +48,140 @@
     return btn;
   }
 
+  function createExecuteButton(command, output) {
+    const btn = document.createElement("button");
+    btn.className = "execute-btn";
+    btn.textContent = "Execute";
+    btn.onclick = async () => {
+      btn.disabled = true;
+      btn.textContent = "Executing...";
+      
+      try {
+        const response = await fetch("/chat/execute", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ command }),
+        });
+
+        const result = await response.json();
+        
+        if (result.success) {
+          const outputText = result.stdout || result.stderr || "(no output)";
+          appendMessage(output, "Command Output", `Exit Code: ${result.exit_code}\n\n${outputText}`, false);
+          btn.textContent = "✓ Executed";
+          btn.style.background = "#22c55e";
+        } else {
+          appendMessage(output, "Execution Error", result.error || "Unknown error", false);
+          btn.textContent = "✗ Failed";
+          btn.style.background = "#ef4444";
+        }
+      } catch (err) {
+        appendMessage(output, "Error", `Failed to execute: ${err.message}`, false);
+        btn.textContent = "✗ Error";
+        btn.style.background = "#ef4444";
+      }
+      
+      setTimeout(() => {
+        btn.disabled = false;
+        btn.textContent = "Execute";
+        btn.style.background = "";
+      }, 3000);
+    };
+    return btn;
+  }
+
+  function extractExecuteTags(text) {
+    const regex = /<execute>(.*?)<\/execute>/gs;
+    const commands = [];
+    let match;
+    
+    while ((match = regex.exec(text)) !== null) {
+      commands.push(match[1].trim());
+    }
+    
+    return commands;
+  }
+
   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;
-
-    if (codeBlockMatch) {
-      const lang = codeBlockMatch[1] || "bash";
-      const code = codeBlockMatch[2];
+    // Check for execute tags
+    const commands = extractExecuteTags(message);
+    
+    if (commands.length > 0) {
+      // Remove execute tags from display
+      let displayText = message.replace(/<execute>.*?<\/execute>/gs, "");
       
-      const codeWrapper = document.createElement("div");
-      codeWrapper.className = "code-wrapper";
+      msgDiv.innerHTML = `<strong>${sender}:</strong>${useMarkdown ? renderMarkdown(displayText) : `<pre>${escapeHtml(displayText)}</pre>`}`;
       
-      const pre = document.createElement("pre");
-      const codeEl = document.createElement("code");
-      codeEl.className = `language-${lang}`;
-      codeEl.textContent = code;
-      pre.appendChild(codeEl);
-      
-      const copyBtn = createCopyButton(code);
-      
-      codeWrapper.appendChild(copyBtn);
-      codeWrapper.appendChild(pre);
-      
-      msgDiv.innerHTML = `<strong>${sender}:</strong>`;
-      msgDiv.appendChild(codeWrapper);
-    } else if (useMarkdown) {
-      msgDiv.innerHTML = `<strong>${sender}:</strong>${renderMarkdown(String(message))}`;
-      
-      // Add copy buttons to any code blocks in markdown
-      msgDiv.querySelectorAll("pre code").forEach((codeEl) => {
-        const code = codeEl.textContent;
-        const pre = codeEl.parentElement;
-        const wrapper = document.createElement("div");
-        wrapper.className = "code-wrapper";
+      // Add execute buttons for each command
+      commands.forEach(cmd => {
+        const cmdWrapper = document.createElement("div");
+        cmdWrapper.className = "command-wrapper";
         
-        const copyBtn = createCopyButton(code);
+        const cmdPre = document.createElement("pre");
+        cmdPre.className = "command-block";
+        cmdPre.textContent = cmd;
+        
+        const btnContainer = document.createElement("div");
+        btnContainer.className = "command-buttons";
         
-        pre.parentNode.insertBefore(wrapper, pre);
-        wrapper.appendChild(copyBtn);
-        wrapper.appendChild(pre);
+        const executeBtn = createExecuteButton(cmd, container);
+        const copyBtn = createCopyButton(cmd);
+        
+        btnContainer.appendChild(executeBtn);
+        btnContainer.appendChild(copyBtn);
+        
+        cmdWrapper.appendChild(cmdPre);
+        cmdWrapper.appendChild(btnContainer);
+        msgDiv.appendChild(cmdWrapper);
       });
     } else {
-      msgDiv.innerHTML = `<strong>${sender}:</strong> <pre>${escapeHtml(String(message))}</pre>`;
+      // Regular message handling
+      const codeBlockMatch =
+        typeof message === "string"
+          ? message.match(/```(\w+)?\n([\s\S]*?)```/)
+          : null;
+
+      if (codeBlockMatch) {
+        const lang = codeBlockMatch[1] || "bash";
+        const code = codeBlockMatch[2];
+
+        const codeWrapper = document.createElement("div");
+        codeWrapper.className = "code-wrapper";
+
+        const pre = document.createElement("pre");
+        const codeEl = document.createElement("code");
+        codeEl.className = `language-${lang}`;
+        codeEl.textContent = code;
+        pre.appendChild(codeEl);
+
+        const copyBtn = createCopyButton(code);
+
+        codeWrapper.appendChild(copyBtn);
+        codeWrapper.appendChild(pre);
+
+        msgDiv.innerHTML = `<strong>${sender}:</strong>`;
+        msgDiv.appendChild(codeWrapper);
+      } else if (useMarkdown) {
+        msgDiv.innerHTML = `<strong>${sender}:</strong>${renderMarkdown(String(message))}`;
+
+        msgDiv.querySelectorAll("pre code").forEach((codeEl) => {
+          const code = codeEl.textContent;
+          const pre = codeEl.parentElement;
+          const wrapper = document.createElement("div");
+          wrapper.className = "code-wrapper";
+
+          const copyBtn = createCopyButton(code);
+
+          pre.parentNode.insertBefore(wrapper, pre);
+          wrapper.appendChild(copyBtn);
+          wrapper.appendChild(pre);
+        });
+      } else {
+        msgDiv.innerHTML = `<strong>${sender}:</strong> <pre>${escapeHtml(String(message))}</pre>`;
+      }
     }
 
     container.appendChild(msgDiv);
@@ -105,9 +190,102 @@
     if (window.Prism) {
       try {
         Prism.highlightAllUnder(container);
-      } catch (_) {
-        // no-op if Prism not available
+      } catch (_) {}
+    }
+
+    return msgDiv;
+  }
+
+  // ---------- Streaming UI ----------
+  function createStreamingMessage(container, sender) {
+    const msgDiv = document.createElement("div");
+    msgDiv.classList.add("message");
+    msgDiv.innerHTML = `<strong>${sender}:</strong> <span class="streaming-content"></span>`;
+    
+    const contentSpan = msgDiv.querySelector(".streaming-content");
+    
+    container.appendChild(msgDiv);
+    container.scrollTop = container.scrollHeight;
+
+    return {
+      msgDiv,
+      contentSpan,
+      updateContent: (text) => {
+        contentSpan.textContent = text;
+        container.scrollTop = container.scrollHeight;
+      },
+      finalize: (text) => {
+        // Replace with properly formatted message
+        msgDiv.remove();
+        appendMessage(container, sender, text, true);
       }
+    };
+  }
+
+  // ---------- SSE Streaming ----------
+  async function sendPromptStreaming(prompt, output, sendBtn, input) {
+    const streamUI = createStreamingMessage(output, "DeepShell");
+    let fullText = "";
+
+    try {
+      const response = await fetch("/chat/run-agent-stream", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Server error: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder("utf-8");
+      let buffer = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        
+        // SSE format: "data: {json}\n\n"
+        const lines = buffer.split("\n\n");
+        buffer = lines.pop(); // Keep incomplete data in buffer
+
+        for (const line of lines) {
+          if (!line.trim() || !line.startsWith("data: ")) continue;
+
+          const jsonStr = line.substring(6); // Remove "data: " prefix
+          
+          try {
+            const data = JSON.parse(jsonStr);
+            
+            if (data.type === "token") {
+              fullText += data.text;
+              streamUI.updateContent(fullText);
+            } else if (data.type === "done") {
+              streamUI.finalize(fullText);
+              return;
+            } else if (data.type === "error") {
+              throw new Error(data.message);
+            }
+          } catch (e) {
+            console.warn("Failed to parse SSE data:", jsonStr, e);
+          }
+        }
+      }
+
+      // Finalize with whatever we got
+      if (fullText) {
+        streamUI.finalize(fullText);
+      }
+    } catch (err) {
+      streamUI.msgDiv.remove();
+      appendMessage(output, "Error", `${err.message}`);
+      console.error("Streaming error:", err);
+    } finally {
+      if (sendBtn) sendBtn.disabled = false;
+      input.focus();
     }
   }
 
@@ -123,44 +301,6 @@
       return;
     }
 
-    async function sendPrompt(prompt) {
-      try {
-        const response = await fetch("/chat/run-agent", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ prompt }),
-        });
-
-        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;
-          }
-          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();
-      }
-    }
-
     form.addEventListener("submit", (e) => {
       e.preventDefault();
       const prompt = input.value.trim();
@@ -170,7 +310,8 @@
       input.value = "";
       if (sendBtn) sendBtn.disabled = true;
 
-      sendPrompt(prompt);
+      // Use streaming
+      sendPromptStreaming(prompt, output, sendBtn, input);
     });
 
     if (sendBtn) {

deepshell-backend/deepshell/__main__.py

@@ -1,12 +1,17 @@
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, JSONResponse, StreamingResponse
 from pydantic import BaseModel
 import os
 from pathlib import Path
+import asyncio
+import json
+import subprocess
+import shlex
+from typing import Any, List
 
-from .llm import get_global_client  # LLM enabled
+from .llm import get_global_client
 
 REPO_ROOT = Path(__file__).resolve().parents[2]
 INDEX_PATH = REPO_ROOT / "index.html"
@@ -35,6 +40,9 @@ app.mount("/static", StaticFiles(directory=str(STATIC_ROOT), html=False), name="
 class ChatRequest(BaseModel):
     prompt: str
 
+class ExecuteRequest(BaseModel):
+    command: str
+
 @app.get("/")
 def root_page():
     if INDEX_PATH.exists():
@@ -81,6 +89,202 @@ def run_agent(req: ChatRequest):
         text = str(resp)
     return {"answer": text}
 
+# ============================================
+# Command Execution Safety
+# ============================================
+
+# Whitelist of allowed command prefixes
+ALLOWED_COMMANDS = [
+    "docker", "kubectl", "ls", "cat", "echo", "pwd", "whoami",
+    "df", "du", "ps", "top", "free", "uname", "date", "uptime",
+    "curl", "wget", "ping", "netstat", "ss", "ip", "ifconfig",
+    "git", "grep", "find", "head", "tail", "wc", "sort", "uniq"
+]
+
+# Dangerous patterns to block
+DANGEROUS_PATTERNS = [
+    "rm -rf", "rm -fr", "dd if=", "> /dev/", "mkfs", "fdisk",
+    "shutdown", "reboot", "init 0", "init 6", "halt", "poweroff",
+    ":(){ :|:& };:", "chmod -R 777", "chown -R"
+]
+
+def is_command_safe(command: str) -> tuple[bool, str]:
+    """Check if command is safe to execute."""
+    cmd_lower = command.lower().strip()
+    
+    # Check for dangerous patterns
+    for pattern in DANGEROUS_PATTERNS:
+        if pattern.lower() in cmd_lower:
+            return False, f"Dangerous pattern detected: {pattern}"
+    
+    # Extract first word (command name)
+    try:
+        parts = shlex.split(command)
+        if not parts:
+            return False, "Empty command"
+        
+        cmd_name = parts[0].split("/")[-1]  # Handle /usr/bin/docker -> docker
+        
+        # Check if command is in whitelist
+        if cmd_name not in ALLOWED_COMMANDS:
+            return False, f"Command '{cmd_name}' is not in the allowed list"
+        
+        return True, "OK"
+    except Exception as e:
+        return False, f"Failed to parse command: {str(e)}"
+
+def execute_command_safe(command: str, timeout: int = 30) -> dict:
+    """Execute command safely with timeout."""
+    try:
+        result = subprocess.run(
+            command,
+            shell=True,
+            capture_output=True,
+            text=True,
+            timeout=timeout,
+            cwd=os.getcwd(),
+        )
+        
+        return {
+            "success": True,
+            "stdout": result.stdout,
+            "stderr": result.stderr,
+            "exit_code": result.returncode,
+        }
+    except subprocess.TimeoutExpired:
+        return {
+            "success": False,
+            "error": f"Command timed out after {timeout} seconds",
+            "stdout": "",
+            "stderr": "",
+            "exit_code": -1,
+        }
+    except Exception as e:
+        return {
+            "success": False,
+            "error": str(e),
+            "stdout": "",
+            "stderr": "",
+            "exit_code": -1,
+        }
+
+# ============================================
+# Execute Endpoint
+# ============================================
+
+@app.post("/chat/execute")
+def execute_command(req: ExecuteRequest):
+    """Execute a command with safety checks."""
+    command = (req.command or "").strip()
+    if not command:
+        return JSONResponse(
+            {"success": False, "error": "Command is required"},
+            status_code=400
+        )
+    
+    # Safety check
+    is_safe, reason = is_command_safe(command)
+    if not is_safe:
+        return JSONResponse(
+            {"success": False, "error": f"Command blocked: {reason}"},
+            status_code=403
+        )
+    
+    # Execute
+    result = execute_command_safe(command)
+    return result
+
+# ============================================
+# SSE Streaming Endpoint
+# ============================================
+
+def _extract_text_from_chunk(chunk: Any) -> str:
+    """Extract text from streaming chunk - handles various LLM formats."""
+    try:
+        # Handle dict responses (OpenAI-like)
+        if isinstance(chunk, dict):
+            if "choices" in chunk and chunk["choices"]:
+                delta = chunk["choices"][0].get("delta", {})
+                return delta.get("content", "") or ""
+            return chunk.get("content", "") or chunk.get("text", "") or ""
+        
+        # Handle object responses (SDK objects)
+        if hasattr(chunk, "choices") and chunk.choices:
+            choice = chunk.choices[0]
+            if hasattr(choice, "delta") and hasattr(choice.delta, "content"):
+                return choice.delta.content or ""
+            if hasattr(choice, "message") and hasattr(choice.message, "content"):
+                return choice.message.content or ""
+        
+        return ""
+    except Exception:
+        return ""
+
+async def _sse_generator(prompt: str):
+    """
+    SSE format generator: data: {json}\n\n
+    """
+    # Send start event
+    yield f"data: {json.dumps({'type': 'start'})}\n\n"
+    
+    try:
+        client = get_global_client(os.getenv("PROVIDER", "groq"))
+    except Exception as e:
+        yield f"data: {json.dumps({'type': 'error', 'message': str(e)})}\n\n"
+        yield f"data: {json.dumps({'type': 'done'})}\n\n"
+        return
+    
+    try:
+        # Try streaming with stream=True
+        try:
+            response = client.chat(prompt, max_tokens=1024, temperature=0.2, stream=True)
+            
+            # Handle streaming response
+            if hasattr(response, "__iter__"):
+                for chunk in response:
+                    text = _extract_text_from_chunk(chunk)
+                    if text:
+                        yield f"data: {json.dumps({'type': 'token', 'text': text})}\n\n"
+                    await asyncio.sleep(0)  # Yield control to event loop
+            else:
+                # Not iterable, treat as single response
+                text = _extract_text_from_chunk(response)
+                if text:
+                    yield f"data: {json.dumps({'type': 'token', 'text': text})}\n\n"
+        
+        except TypeError:
+            # stream=True not supported, fallback to non-streaming
+            response = client.chat(prompt, max_tokens=1024, temperature=0.2)
+            try:
+                text = response.choices[0].message.content
+            except Exception:
+                text = str(response)
+            
+            if text:
+                yield f"data: {json.dumps({'type': 'token', 'text': text})}\n\n"
+    
+    except Exception as e:
+        yield f"data: {json.dumps({'type': 'error', 'message': str(e)})}\n\n"
+    
+    # Send done event
+    yield f"data: {json.dumps({'type': 'done'})}\n\n"
+
+@app.post("/chat/run-agent-stream")
+async def run_agent_stream(req: ChatRequest):
+    prompt = (req.prompt or "").strip()
+    if not prompt:
+        return JSONResponse({"error": "prompt is required"}, status_code=400)
+    
+    return StreamingResponse(
+        _sse_generator(prompt),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no",
+        }
+    )
+
 if __name__ == "__main__":
     import uvicorn
     port = int(os.getenv("PORT", "8001"))

deepshell-backend/deepshell/llm.py

@@ -1,11 +1,30 @@
 import os
-from typing import Any
+from typing import Any, Optional
 
 # Minimal Groq client wrapper.
 from groq import Groq
 
 _singleton = {"client": None, "provider": None}
 
+DEEPSHELL_SYSTEM_PROMPT = """You are DeepShell, an AI assistant that helps users with Docker, Kubernetes, and system administration tasks.
+
+When you recommend a command for the user to execute, wrap it in XML tags like this:
+<execute>docker ps</execute>
+
+Rules:
+1. Only suggest commands that are safe and relevant
+2. Explain what the command does before or after the execute tag
+3. One command per execute tag
+4. Use full command syntax (no placeholders like <container-id>)
+5. For multi-step tasks, provide commands one at a time
+
+Example responses:
+- "To see running containers, use: <execute>docker ps</execute>"
+- "Let me check the disk usage: <execute>df -h</execute>"
+- "Here's how to list all images: <execute>docker images</execute>"
+
+Be helpful, concise, and always prioritize user safety."""
+
 def get_global_client(provider: str = "groq") -> Any:
     provider = (provider or "groq").lower()
     if _singleton["client"] and _singleton["provider"] == provider:
@@ -21,13 +40,33 @@ def get_global_client(provider: str = "groq") -> Any:
     client = Groq(api_key=api_key)
 
     class Wrapper:
-        def chat(self, prompt: str, max_tokens: int = 1024, temperature: float = 0.2):
+        def chat(
+            self, 
+            prompt: str, 
+            max_tokens: int = 1024, 
+            temperature: float = 0.2,
+            stream: bool = False,
+            system_prompt: Optional[str] = None
+        ):
             model = os.getenv("GROQ_MODEL", "llama-3.3-70b-versatile")
+            
+            messages = []
+            
+            # Add system prompt if provided, otherwise use default
+            if system_prompt is not None:
+                if system_prompt:  # Only add if not empty string
+                    messages.append({"role": "system", "content": system_prompt})
+            else:
+                messages.append({"role": "system", "content": DEEPSHELL_SYSTEM_PROMPT})
+            
+            messages.append({"role": "user", "content": prompt})
+            
             response = client.chat.completions.create(
                 model=model,
-                messages=[{"role": "user", "content": prompt}],
+                messages=messages,
                 max_tokens=max_tokens,
                 temperature=temperature,
+                stream=stream,
             )
             return response
 

index.html

@@ -122,7 +122,7 @@
     }
     a { color: var(--accent); text-decoration: none; }
     a:hover { text-decoration: underline; }
-    
+
     /* Copy button styles */
     .code-wrapper {
       position: relative;
@@ -146,6 +146,47 @@
       background: #334155;
       border-color: #475569;
     }
+
+    /* Command execution styles */
+    .command-wrapper {
+      margin: 10px 0;
+      background: #0b1220;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+    }
+    .command-block {
+      background: #1e293b;
+      padding: 12px;
+      border-radius: 6px;
+      margin: 0 0 8px 0;
+      font-family: 'Courier New', monospace;
+      color: #22c55e;
+      border-left: 3px solid #22c55e;
+    }
+    .command-buttons {
+      display: flex;
+      gap: 8px;
+    }
+    .execute-btn {
+      padding: 6px 16px;
+      font-size: 13px;
+      background: linear-gradient(180deg, #22c55e, #16a34a);
+      color: white;
+      border: 1px solid #16a34a;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: 600;
+      transition: all 0.2s;
+    }
+    .execute-btn:hover:not(:disabled) {
+      background: linear-gradient(180deg, #16a34a, #15803d);
+      transform: translateY(-1px);
+    }
+    .execute-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
   </style>
 </head>
 <body>
@@ -159,12 +200,12 @@
       <div id="chat-output" class="panel"></div>
 
       <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>
+        <textarea id="chat-input" placeholder="Type your prompt… e.g., Show me all running Docker containers."></textarea>
         <button id="chat-send" type="submit">Send</button>
       </form>
 
       <div class="hint">
-        Tip: Backend endpoints are /chat/ready and /chat/run-agent on the same origin/port.
+        Tip: Commands will appear with Execute buttons. Click to run them safely.
       </div>
     </div>
   </div>