feat: Polish free version - Export, Clear, Loading indicators

README.md

@@ -5,184 +5,235 @@
 ![FastAPI](https://img.shields.io/badge/FastAPI-async-green.svg)
 ![License](https://img.shields.io/badge/license-MIT-purple.svg)
 
-A lightweight web UI + backend for DeepShell — an infra‑only assistant for Linux SysAdmin, DevOps, IaC, Cloud, and Linux scripting tasks.
+A modern, lightweight web UI for **DeepShell** — an AI-powered assistant specialized in Linux SysAdmin, DevOps, Docker, Kubernetes, IaC, and Cloud operations.
 
-DeepShell intentionally rejects out‑of‑domain queries. It focuses on actionable commands, troubleshooting steps, automation snippets, and config examples for real‑world ops.
+**Real-time streaming responses** • **Session context** • **Copy-to-clipboard** • **Clean, professional UI**
 
 ---
 
 ## 🚀 What is DeepShell ModUI?
 
-DeepShell ModUI is a minimal, fast web application:
-- Frontend: a clean chat interface served by the backend itself
-- Backend: FastAPI service with pluggable LLM client (default: Groq) and guardrails
+DeepShell ModUI is a fast, minimal web application that brings AI assistance to your infrastructure workflows:
 
-Current default mode is “hard‑block” (demo/safe mode): any prompt returns an admin‑only scope message. This keeps the UI responsive while preventing unintended LLM usage. You can re‑enable LLM calls later with a one‑line change in deepshell-backend/deepshell/main.py.
+- **Frontend**: Clean, responsive chat interface with real-time streaming
+- **Backend**: FastAPI service with SSE (Server-Sent Events) support
+- **LLM Provider**: Groq (llama-3.3-70b-versatile)
+- **Smart Context**: Maintains conversation history for better responses
+
+Perfect for DevOps engineers, SysAdmins, and Cloud architects who need quick, accurate commands and scripts.
 
 ---
 
 ## ✨ Features
 
-- Simple, single‑page chat UI
-- FastAPI backend serves UI assets (index.html, app.js, CSS)
-- Health/readiness endpoint
-- Polite block message for non‑admin use cases
-- Ready to wire Groq LLM for infra answers (opt‑in)
-- Works locally or over LAN
+### **Current (Free Version)**
+- ✅ **Real-time streaming responses** via SSE
+- ✅ **Session context/history** - AI remembers your conversation
+- ✅ **Copy buttons** on all code blocks
+- ✅ **Markdown rendering** with syntax highlighting
+- ✅ **Clean, professional UI** with dark theme
+- ✅ **Health/readiness endpoints** for monitoring
+- ✅ **Works locally or over LAN**
+
+### **Coming Soon (Paid Version)** 💎
+- 🔜 One-click command execution with approval flow
+- 🔜 Persistent chat history across sessions
+- 🔜 Export conversations (Markdown/PDF)
+- 🔜 Multi-host support (remote server connections)
+- 🔜 Workflow automation and command chaining
 
 ---
 
 ## 🛠️ Tech Stack
 
-- Frontend: HTML, CSS, Vanilla JS
-- Backend: FastAPI, Uvicorn
-- LLM Client: Groq (via deepshell-backend/deepshell/llm.py)
-- Python: 3.9+
+- **Frontend**: HTML5, CSS3, Vanilla JavaScript (no frameworks!)
+- **Backend**: FastAPI, Uvicorn, SSE
+- **LLM**: Groq API (llama-3.3-70b-versatile)
+- **Python**: 3.9+
 
 ---
 
 ## 🖼️ Preview
 
-Example screen (demo mode blocks general trivia; encourages admin/DevOps prompts).
-
 ![DeepShell UI Screenshot](docs/screenshot.png)
 
+*Clean interface with real-time streaming and copy buttons on every code block*
+
 ---
 
 ## ⚡ Quick Start
 
-Prerequisites
+### **Prerequisites**
 - Python 3.9+
 - Git
-- Network: open TCP 8001 if accessing from another machine
+- Groq API key ([Get one free](https://console.groq.com))
 
-Clone and install
+### **1. Clone and Install**
 
 ```bash
 git clone https://github.com/muralipala1504/deepshell_modui.git
 cd deepshell_modui
 
-# Install backend deps and package
+# Install backend dependencies
 pip install -r deepshell-backend/requirements.txt
 pip install -e deepshell-backend/
 
-Run the app
-
-```bash
-
-python run_deepshell.py
-
 ```
 
-Open in your browser
-
-    Local: http://localhost:8001
-    Remote/LAN: http://:8001
+2. Set Your Groq API Key
 
-Linux firewall (if remote access needed)
+Linux/macOS:
 
 ```bash
 
-sudo firewall-cmd --add-port=8001/tcp --permanent
-sudo firewall-cmd --reload
+export GROQ_API_KEY="your_groq_api_key_here"
 
 ```
 
-Stop
+Windows PowerShell:
 
-    Ctrl + C in the terminal that’s running the server.
-
-
-🔌 LLM Provider: Groq (optional)
-
-By default, the app is in “hard‑block” mode and does not call any LLM. When you’re ready to enable responses:
+```pshell
 
-    Set your Groq API key in the environment
+$env:GROQ_API_KEY="your_groq_api_key_here"
 
-    Linux/macOS:
+```
 
+3. Run the App
 
 ```bash
 
-export GROQ_API_KEY="your_groq_api_key"
+python run_deepshell.py
 
 ```
 
-    Windows PowerShell
+4. Open in Browser
 
-```pshell
+    Local: http://localhost:8001
+    Remote/LAN: http://:8001
 
-$env:GROQ_API_KEY="your_groq_api_key"
+5. Allow Firewall (if accessing remotely)
 
-```
+```bash
 
-	Enable LLM in the backend
+sudo firewall-cmd --add-port=8001/tcp --permanent
+sudo firewall-cmd --reload
 
-    	Edit deepshell-backend/deepshell/main.py
-    	In run_agent(), replace the hard‑block return with the provided LLM call        (commented in the file).
-    
-	Restart the server.
+```
 
-	The LLM client code lives in:
+6. Stop the Server
 
-    	deepshell-backend/deepshell/llm.py (get_global_client / provider wiring)
+Press Ctrl + C in the terminal.
 
 
-🔧 Project Layout
+🔧 Project Structure
 
 deepshell_modui/  
-├── app.js                         # Frontend script  
-├── index.html                     # Frontend page  
+├── app.js                         # Frontend JavaScript (SSE, markdown, copy buttons)  
+├── index.html                     # Main UI page  
 ├── services.css                   # Styling  
 ├── run_deepshell.py               # Convenience launcher  
 ├── deepshell-backend/  
 │   ├── deepshell/  
 │   │   ├── __init__.py  
-│   │   ├── main.py               # FastAPI app (entrypoint)  
-│   │   ├── __main__.py           # Shim: python -m deepshell → main.main()  
-│   │   ├── llm.py                # LLM provider wiring (Groq)  
-│   │   ├── handlers/             # Routers/handlers (extensible)  
+│   │   ├── __main__.py           # FastAPI app with SSE endpoints  
+│   │   ├── llm.py                # Groq LLM client wrapper  
 │   │   └── utils.py              # Helpers  
 │   ├── requirements.txt  
 │   └── setup.py  
-└── docs/  
-    └── screenshot.png  
+├── docs/  
+│   └── screenshot.png  
+└── README.md
+
+🎯 What DeepShell Excels At
 
-How to run (alternatives)
+DeepShell is specialized for:
 
-    python run_deepshell.py
-    python -m deepshell # via main shim
-    python -m deepshell.main
-    uvicorn deepshell.main:app --host 0.0.0.0 --port 8001
+    🐳 Docker: Container management, Dockerfile optimization, compose files
+    ☸️ Kubernetes: kubectl commands, YAML manifests, troubleshooting
+    🔧 Linux SysAdmin: System commands, log analysis, performance tuning
+    🏗️ IaC: Terraform, Ansible, CloudFormation scripts
+    ☁️ Cloud: AWS/GCP/Azure CLI commands and best practices
+    📜 Scripting: Bash, Python automation for ops tasks
 
 
-🔒 Scope and Guardrails
+🔒 Security & Safety
 
-DeepShell is for:
+    	No automatic execution: All commands are displayed with copy buttons
+    
+	User control: You decide what to run on your system
+    
+	Session isolation: Each browser session has independent context
+    
+	No data persistence: Conversations are in-memory only (free version)
 
-    Linux SysAdmin commands and troubleshooting
-    DevOps tooling (Docker, Kubernetes, Helm, etc.)
-    IaC (Terraform, Ansible, CloudFormation)
-    Cloud CLIs and services (AWS/GCP/Azure)
-    Bash/Python scripting for ops
 
-Out‑of‑scope prompts are politely declined.
+🚀 Alternative Run Methods
+
+
+```bash
+
+# Method 1: Convenience script
+python run_deepshell.py
+
+# Method 2: Python module
+python -m deepshell
 
+# Method 3: Direct uvicorn
+uvicorn deepshell.__main__:app --host 0.0.0.0 --port 8001
+
+```
 
 🛣️ Roadmap
+Phase 1: Polish Free Version (Current)
+
+    SSE streaming responses
+    Session context/history
+    Copy buttons on code blocks
+    Clear chat button
+    Export chat history
+    Dark/Light theme toggle
+    Better error handling
 
-    Optional “allow‑list” mode for infra keywords
-    Persistent chat history
-    Export responses
-    More helper modules (cloud/infra recipes)
-    Multi‑LLM support via provider switch
+Phase 2: Paid Features 💎
 
+    One-click command execution
+    Command approval flow
+    Persistent history (database)
+    Multi-session management
+    Workflow automation
+
+Phase 3: Advanced Features
+
+    File upload (analyze logs, configs)
+    Multi-host support
+    Kubernetes dashboard integration
+    Custom prompt templates
 
 🤝 Contributing
 
-Issues and PRs are welcome. Please keep contributions focused on infra/DevOps/IaC use cases and simple, maintainable code.
+Contributions are welcome! Please:
+
+    Keep code simple and maintainable
+    Focus on DevOps/SysAdmin/IaC use cases
+    Follow existing code style
+    Test thoroughly before submitting PRs
 
+📝 License
 
-📜 License
+MIT License. See LICENSE for details.
+🙏 Acknowledgments
 
-MIT. See LICENSE for details.
+    Groq for blazing-fast LLM inference
+    FastAPI for the excellent async framework
+    marked.js for markdown rendering
+    highlight.js for syntax highlighting
+
+📧 Contact
+
+Maintainer: @muralipala1504
+
+Issues: GitHub Issues
+
+Built with ❤️ for DevOps engineers who value speed, accuracy, and control.
+
+---

app.js

@@ -1,4 +1,4 @@
-// Plain Vanilla Chat Frontend with Copy Button, SSE Streaming, and Command Execution
+// Plain Vanilla Chat Frontend with Copy Button, SSE Streaming, Export, and Clear
 (function () {
   "use strict";
 
@@ -102,51 +102,42 @@
     return commands;
   }
 
-  // NEW: Add copy buttons to all code blocks in a container
+  // Add copy buttons to all code blocks in a container
   function addCopyButtonsToCodeBlocks(container) {
-    // Find all <pre> elements that don't already have a copy button
     container.querySelectorAll("pre").forEach((pre) => {
-      // Skip if already has a copy button wrapper
       if (pre.parentElement && pre.parentElement.classList.contains("code-wrapper")) {
         return;
       }
 
-      // Get the code content
       const codeEl = pre.querySelector("code");
       const code = codeEl ? codeEl.textContent : pre.textContent;
 
       if (!code || !code.trim()) return;
 
-      // Create wrapper
       const wrapper = document.createElement("div");
       wrapper.className = "code-wrapper";
 
-      // Create copy button
       const copyBtn = createCopyButton(code);
 
-      // Insert wrapper before pre
       pre.parentNode.insertBefore(wrapper, pre);
-      
-      // Move pre into wrapper and add button
+
       wrapper.appendChild(copyBtn);
       wrapper.appendChild(pre);
     });
   }
 
-  function appendMessage(container, sender, message, useMarkdown = false) {
+  function appendMessage(container, sender, message, useMarkdown = false, isError = false) {
     const msgDiv = document.createElement("div");
     msgDiv.classList.add("message");
+    if (isError) msgDiv.classList.add("error");
 
-    // Check for execute tags
     const commands = extractExecuteTags(message);
 
     if (commands.length > 0) {
-      // Remove execute tags from display
       let displayText = message.replace(/<execute>.*?<\/execute>/gs, "");
 
       msgDiv.innerHTML = `<strong>${sender}:</strong>${useMarkdown ? renderMarkdown(displayText) : `<pre>${escapeHtml(displayText)}</pre>`}`;
 
-      // Add execute buttons for each command
       commands.forEach(cmd => {
         const cmdWrapper = document.createElement("div");
         cmdWrapper.className = "command-wrapper";
@@ -169,20 +160,15 @@
         msgDiv.appendChild(cmdWrapper);
       });
     } else if (useMarkdown) {
-      // Render markdown first
       msgDiv.innerHTML = `<strong>${sender}:</strong><div class="markdown-content">${renderMarkdown(String(message))}</div>`;
-      
-      // Add copy buttons to all code blocks
       addCopyButtonsToCodeBlocks(msgDiv);
     } else {
-      // Plain text message
       msgDiv.innerHTML = `<strong>${sender}:</strong> <pre>${escapeHtml(String(message))}</pre>`;
     }
 
     container.appendChild(msgDiv);
     container.scrollTop = container.scrollHeight;
 
-    // Syntax highlighting
     if (window.Prism) {
       try {
         Prism.highlightAllUnder(msgDiv);
@@ -195,8 +181,8 @@
   // ---------- 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>`;
+    msgDiv.classList.add("message", "loading");
+    msgDiv.innerHTML = `<strong>${sender}:</strong> <span class="streaming-content"></span><span class="spinner"></span>`;
 
     const contentSpan = msgDiv.querySelector(".streaming-content");
 
@@ -211,7 +197,6 @@
         container.scrollTop = container.scrollHeight;
       },
       finalize: (text) => {
-        // Replace with properly formatted message
         msgDiv.remove();
         appendMessage(container, sender, text, true);
       }
@@ -244,14 +229,13 @@
 
         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
+        buffer = lines.pop();
 
         for (const line of lines) {
           if (!line.trim() || !line.startsWith("data: ")) continue;
 
-          const jsonStr = line.substring(6); // Remove "data: " prefix
+          const jsonStr = line.substring(6);
 
           try {
             const data = JSON.parse(jsonStr);
@@ -271,13 +255,12 @@
         }
       }
 
-      // Finalize with whatever we got
       if (fullText) {
         streamUI.finalize(fullText);
       }
     } catch (err) {
       streamUI.msgDiv.remove();
-      appendMessage(output, "Error", `${err.message}`);
+      appendMessage(output, "Error", `${err.message}`, false, true);
       console.error("Streaming error:", err);
     } finally {
       if (sendBtn) sendBtn.disabled = false;
@@ -285,18 +268,80 @@
     }
   }
 
+  // ---------- Clear Chat ----------
+  async function clearChat(output) {
+    if (!confirm("Clear conversation history? This cannot be undone.")) {
+      return;
+    }
+
+    try {
+      const response = await fetch("/chat/clear", {
+        method: "POST",
+      });
+
+      if (response.ok) {
+        output.innerHTML = "";
+        appendMessage(output, "System", "Chat cleared. Session history reset.", false);
+      } else {
+        throw new Error("Failed to clear chat");
+      }
+    } catch (err) {
+      appendMessage(output, "Error", `Failed to clear chat: ${err.message}`, false, true);
+    }
+  }
+
+  // ---------- Export Chat ----------
+  function exportChat(output) {
+    const messages = output.querySelectorAll(".message");
+    if (messages.length === 0) {
+      alert("No messages to export!");
+      return;
+    }
+
+    let markdown = "# DeepShell Chat Export\n\n";
+    markdown += `**Exported:** ${new Date().toLocaleString()}\n\n---\n\n`;
+
+    messages.forEach((msg) => {
+      const sender = msg.querySelector("strong")?.textContent.replace(":", "") || "Unknown";
+      
+      // Get text content, excluding buttons
+      const clone = msg.cloneNode(true);
+      clone.querySelectorAll("button").forEach(btn => btn.remove());
+      
+      const content = clone.textContent
+        .replace(sender + ":", "")
+        .trim();
+
+      markdown += `## ${sender}\n\n${content}\n\n---\n\n`;
+    });
+
+    // Create download
+    const blob = new Blob([markdown], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `deepshell-chat-${Date.now()}.md`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
   // ---------- 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 clearBtn = document.getElementById("clear-btn");
+    const exportBtn = document.getElementById("export-btn");
 
     if (!form || !input || !output) {
       console.warn("Chat elements not found (chat-form/chat-input/chat-output).");
       return;
     }
 
+    // Send message
     form.addEventListener("submit", (e) => {
       e.preventDefault();
       const prompt = input.value.trim();
@@ -306,7 +351,6 @@
       input.value = "";
       if (sendBtn) sendBtn.disabled = true;
 
-      // Use streaming
       sendPromptStreaming(prompt, output, sendBtn, input);
     });
 
@@ -316,5 +360,27 @@
         form.requestSubmit();
       });
     }
+
+    // Clear chat button
+    if (clearBtn) {
+      clearBtn.addEventListener("click", () => {
+        clearChat(output);
+      });
+    }
+
+    // Export chat button
+    if (exportBtn) {
+      exportBtn.addEventListener("click", () => {
+        exportChat(output);
+      });
+    }
+
+    // Enter to send, Shift+Enter for newline
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        form.requestSubmit();
+      }
+    });
   });
 })();

index.html

@@ -50,6 +50,22 @@
       font-size: 12px;
       color: var(--muted);
     }
+    .header-btn {
+      padding: 6px 12px;
+      font-size: 12px;
+      background: #1e293b;
+      color: var(--text);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: 600;
+      transition: all 0.2s;
+    }
+    .header-btn:hover {
+      background: #334155;
+      border-color: #475569;
+      transform: translateY(-1px);
+    }
     .panel {
       background: var(--panel);
       border: 1px solid var(--border);
@@ -77,6 +93,20 @@
       color: var(--accent-2);
       margin-bottom: 6px;
     }
+    .message.error {
+      border-color: #ef4444;
+      background: #1a0f0f;
+    }
+    .message.error strong {
+      color: #ef4444;
+    }
+    .message.loading {
+      border-color: #f59e0b;
+      background: #1a1508;
+    }
+    .message.loading strong {
+      color: #f59e0b;
+    }
     pre {
       margin: 6px 0 0;
       white-space: pre-wrap;
@@ -111,10 +141,16 @@
       border-radius: 8px;
       cursor: pointer;
       font-weight: 600;
+      transition: all 0.2s;
     }
-    #chat-send:hover {
+    #chat-send:hover:not(:disabled) {
       border-color: #334155;
     }
+    #chat-send:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      background: #1a1a1a;
+    }
     .hint {
       margin-top: 8px;
       color: var(--muted);
@@ -147,6 +183,21 @@
       border-color: #475569;
     }
 
+    /* Loading spinner */
+    .spinner {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--border);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin-left: 8px;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
     /* Command execution styles */
     .command-wrapper {
       margin: 10px 0;
@@ -193,7 +244,15 @@
   <div class="container">
     <header>
       <div class="brand">DeepShell Chat</div>
-      <div class="status">Backend: <span id="status">checking…</span></div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <button id="export-btn" class="header-btn" title="Export chat as Markdown">
+          📥 Export
+        </button>
+        <button id="clear-btn" class="header-btn" title="Clear conversation">
+          🗑️ Clear
+        </button>
+        <div class="status">Backend: <span id="status">checking…</span></div>
+      </div>
     </header>
 
     <div class="panel">
@@ -205,7 +264,7 @@
       </form>
 
       <div class="hint">
-        Tip: Commands will appear with Execute buttons. Click to run them safely.
+        Tip: All code blocks have copy buttons. Click to copy commands to your clipboard.
       </div>
     </div>
   </div>