document deletion and improve tenant ID management

backend/api/mcp_clients/rag_client.py

@@ -10,7 +10,9 @@ class RAGClient:
     """
 
     def __init__(self):
-        self.base_url = os.getenv("RAG_MCP_URL")
+        self.base_url = os.getenv("RAG_MCP_URL", "http://localhost:8001")
+        if not self.base_url:
+            raise ValueError("RAG_MCP_URL environment variable is not set")
         self.search_endpoint = f"{self.base_url}/search"
         self.ingest_endpoint = f"{self.base_url}/ingest"
 
@@ -89,3 +91,65 @@ class RAGClient:
         except Exception as e:
             print("RAG List Error:", e)
             return {"documents": [], "total": 0, "limit": limit, "offset": offset}
+
+    async def delete_document(self, tenant_id: str, document_id: int):
+        """
+        Delete a specific document by ID for a tenant.
+        """
+        try:
+            async with httpx.AsyncClient(timeout=30.0) as client:
+                response = await client.delete(
+                    f"{self.base_url}/delete/{document_id}",
+                    params={"tenant_id": tenant_id}
+                )
+
+            if response.status_code == 404:
+                return {"error": f"Document {document_id} not found or access denied"}
+            if response.status_code != 200:
+                error_text = response.text
+                try:
+                    error_json = response.json()
+                    error_text = error_json.get("detail", error_text)
+                except:
+                    pass
+                return {"error": f"HTTP {response.status_code}: {error_text}"}
+
+            data = response.json()
+            return data
+
+        except httpx.ConnectError as e:
+            print(f"RAG Delete Error: Cannot connect to RAG MCP server at {self.base_url}")
+            return {"error": f"Cannot connect to RAG MCP server. Is it running at {self.base_url}?"}
+        except Exception as e:
+            print(f"RAG Delete Error: {e}")
+            return {"error": str(e)}
+
+    async def delete_all_documents(self, tenant_id: str):
+        """
+        Delete all documents for a tenant.
+        """
+        try:
+            async with httpx.AsyncClient(timeout=30.0) as client:
+                response = await client.delete(
+                    f"{self.base_url}/delete-all",
+                    params={"tenant_id": tenant_id}
+                )
+
+            if response.status_code != 200:
+                error_text = response.text
+                try:
+                    error_json = response.json()
+                    error_text = error_json.get("detail", error_text)
+                except:
+                    pass
+                return {"error": f"HTTP {response.status_code}: {error_text}"}
+
+            data = response.json()
+            return data
+
+        except httpx.ConnectError as e:
+            print(f"RAG Delete All Error: Cannot connect to RAG MCP server at {self.base_url}")
+            return {"error": f"Cannot connect to RAG MCP server. Is it running at {self.base_url}?"}
+        except Exception as e:
+            print(f"RAG Delete All Error: {e}")
+            return {"error": str(e)}

backend/api/routes/rag.py

@@ -220,3 +220,53 @@ async def rag_list(
         return result
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.delete("/delete/{document_id}")
+async def rag_delete(
+    document_id: int,
+    x_tenant_id: str = Header(None)
+):
+    """
+    Delete a specific document by ID from tenant knowledge base.
+    """
+    if not x_tenant_id:
+        raise HTTPException(status_code=400, detail="Missing tenant ID")
+
+    try:
+        result = await rag_client.delete_document(x_tenant_id, document_id)
+        if "error" in result:
+            # Check if it's a connection error (500) or not found (404)
+            error_msg = result["error"]
+            if "Cannot connect" in error_msg:
+                raise HTTPException(status_code=503, detail=error_msg)
+            elif "not found" in error_msg.lower() or "access denied" in error_msg.lower():
+                raise HTTPException(status_code=404, detail=error_msg)
+            else:
+                raise HTTPException(status_code=500, detail=error_msg)
+        return result
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.delete("/delete-all")
+async def rag_delete_all(
+    x_tenant_id: str = Header(None)
+):
+    """
+    Delete all documents for a tenant.
+    """
+    if not x_tenant_id:
+        raise HTTPException(status_code=400, detail="Missing tenant ID")
+
+    try:
+        result = await rag_client.delete_all_documents(x_tenant_id)
+        if "error" in result:
+            raise HTTPException(status_code=500, detail=result["error"])
+        return result
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

backend/mcp_servers/database.py

@@ -228,6 +228,65 @@ def list_all_documents(tenant_id: str, limit: int = 1000, offset: int = 0) -> Di
         return {"documents": [], "total": 0, "limit": limit, "offset": offset}
 
 
+def delete_document(tenant_id: str, document_id: int) -> bool:
+    """
+    Delete a specific document by ID for a tenant.
+    Returns True if document was deleted, False otherwise.
+    """
+    try:
+        conn = get_connection()
+        cur = conn.cursor()
+
+        # Delete the document (tenant_id check ensures tenant isolation)
+        cur.execute(
+            """
+            DELETE FROM documents
+            WHERE id = %s AND tenant_id = %s;
+            """,
+            (document_id, tenant_id)
+        )
+
+        deleted = cur.rowcount > 0
+        conn.commit()
+        cur.close()
+        conn.close()
+
+        return deleted
+
+    except Exception as e:
+        print("DB DELETE ERROR:", e)
+        return False
+
+
+def delete_all_documents(tenant_id: str) -> int:
+    """
+    Delete all documents for a tenant.
+    Returns the number of documents deleted.
+    """
+    try:
+        conn = get_connection()
+        cur = conn.cursor()
+
+        cur.execute(
+            """
+            DELETE FROM documents
+            WHERE tenant_id = %s;
+            """,
+            (tenant_id,)
+        )
+
+        deleted_count = cur.rowcount
+        conn.commit()
+        cur.close()
+        conn.close()
+
+        return deleted_count
+
+    except Exception as e:
+        print("DB DELETE ALL ERROR:", e)
+        return 0
+
+
 # -----------------------------------
 # Supabase Client (for REST operations)
 # -----------------------------------

backend/mcp_servers/main.py

@@ -21,7 +21,7 @@ sys.path.insert(0, os.path.join(parent_dir, "api"))  # For utils
 # --------------------------------------------------------
 
 from embeddings import embed_text
-from database import insert_document_chunks, search_vectors, list_all_documents, initialize_database
+from database import insert_document_chunks, search_vectors, list_all_documents, initialize_database, delete_document, delete_all_documents
 from utils.text_extractor import extract_text
 
 
@@ -168,6 +168,49 @@ def list_documents(tenant_id: str, limit: int = 1000, offset: int = 0):
         raise HTTPException(status_code=500, detail=str(e))
 
 
+# --------------------------------------------------------
+# Delete Document Route
+# --------------------------------------------------------
+
+@app.delete("/delete/{document_id}")
+def delete_doc(document_id: int, tenant_id: str):
+    """
+    Delete a specific document by ID for a tenant.
+    """
+    try:
+        deleted = delete_document(tenant_id, document_id)
+        if not deleted:
+            raise HTTPException(status_code=404, detail="Document not found or access denied")
+        
+        return {
+            "status": "ok",
+            "tenant_id": tenant_id,
+            "document_id": document_id,
+            "message": "Document deleted successfully"
+        }
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.delete("/delete-all")
+def delete_all_docs(tenant_id: str):
+    """
+    Delete all documents for a tenant.
+    """
+    try:
+        deleted_count = delete_all_documents(tenant_id)
+        return {
+            "status": "ok",
+            "tenant_id": tenant_id,
+            "deleted_count": deleted_count,
+            "message": f"Deleted {deleted_count} document(s)"
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 # --------------------------------------------------------
 # Allow "python main.py" to start server
 # --------------------------------------------------------

frontend/app/admin-rules/page.tsx

@@ -1,9 +1,128 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
 import Link from "next/link";
 
 import { AdminRulesPanel } from "@/components/admin-rules-panel";
 import { Footer } from "@/components/footer";
+import { useTenant } from "@/contexts/TenantContext";
+import { TenantSelector } from "@/components/tenant-selector";
+
+const BACKEND_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL ?? "http://localhost:8000";
+
+type StatusState = { tone: "info" | "success" | "error"; message: string } | null;
 
 export default function AdminRulesPage() {
+  const { tenantId } = useTenant();
+  const [rulesInput, setRulesInput] = useState("");
+  const [deleteInput, setDeleteInput] = useState("");
+  const [rules, setRules] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [status, setStatus] = useState<StatusState>(null);
+
+  const headers = useMemo(() => {
+    if (!tenantId.trim()) return undefined;
+    return {
+      "Content-Type": "application/json",
+      "x-tenant-id": tenantId.trim(),
+    };
+  }, [tenantId]);
+
+  const requireTenant = useCallback(() => {
+    if (!tenantId.trim()) {
+      setStatus({ tone: "error", message: "Enter a tenant ID in the navbar first." });
+      return false;
+    }
+    return true;
+  }, [tenantId]);
+
+  const handleRefresh = useCallback(async () => {
+    if (!requireTenant()) return;
+    try {
+      setLoading(true);
+      setStatus({ tone: "info", message: "Loading rules..." });
+      const response = await fetch(`${BACKEND_BASE_URL}/admin/rules`, {
+        method: "GET",
+        headers,
+      });
+      if (!response.ok) {
+        throw new Error(`Backend error ${response.status}`);
+      }
+      const data = await response.json();
+      setRules(data.rules ?? []);
+      setStatus({ tone: "success", message: "Rules synced." });
+    } catch (error: any) {
+      setStatus({ tone: "error", message: error.message || "Failed to fetch rules" });
+    } finally {
+      setLoading(false);
+    }
+  }, [headers, requireTenant]);
+
+  const handleUpload = useCallback(async () => {
+    if (!requireTenant()) return;
+    const lines = rulesInput
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean);
+
+    if (!lines.length) {
+      setStatus({ tone: "error", message: "Add at least one rule to upload." });
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setStatus({ tone: "info", message: "Uploading rules..." });
+      const response = await fetch(`${BACKEND_BASE_URL}/admin/rules/bulk`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ rules: lines }),
+      });
+      if (!response.ok) {
+        const details = await response.text();
+        throw new Error(details || `Backend error ${response.status}`);
+      }
+      await handleRefresh();
+      setRulesInput("");
+      setStatus({ tone: "success", message: "Rules uploaded successfully." });
+    } catch (error: any) {
+      setStatus({ tone: "error", message: error.message || "Failed to upload rules" });
+    } finally {
+      setLoading(false);
+    }
+  }, [handleRefresh, headers, requireTenant, rulesInput]);
+
+  const handleDelete = useCallback(async () => {
+    if (!requireTenant()) return;
+    if (!deleteInput.trim()) {
+      setStatus({ tone: "error", message: "Enter the rule text you want to delete." });
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setStatus({ tone: "info", message: "Deleting rule..." });
+      const response = await fetch(
+        `${BACKEND_BASE_URL}/admin/rules/${encodeURIComponent(deleteInput.trim())}`,
+        {
+          method: "DELETE",
+          headers,
+        }
+      );
+      if (!response.ok) {
+        const details = await response.text();
+        throw new Error(details || `Backend error ${response.status}`);
+      }
+      await handleRefresh();
+      setDeleteInput("");
+      setStatus({ tone: "success", message: "Rule deleted." });
+    } catch (error: any) {
+      setStatus({ tone: "error", message: error.message || "Failed to delete rule" });
+    } finally {
+      setLoading(false);
+    }
+  }, [deleteInput, handleRefresh, headers, requireTenant]);
+
   return (
     <main className="mx-auto flex min-h-screen max-w-5xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
       <header className="flex flex-col gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">
@@ -14,9 +133,12 @@ export default function AdminRulesPage() {
             </span>
             IntegraChat · Admin Rule Ingestion
           </div>
-          <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
-            ← Back Home
-          </Link>
+          <div className="flex items-center gap-4">
+            <TenantSelector />
+            <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
+              ← Back Home
+            </Link>
+          </div>
         </div>
         <p className="text-sm text-slate-300">
           Push governance policies, compliance workflows, and red-flag patterns to the backend&apos;s persistent rules
@@ -25,6 +147,107 @@ export default function AdminRulesPage() {
       </header>
 
       <AdminRulesPanel />
+
+      <section className="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-2xl shadow-slate-950/40">
+        <div className="flex flex-col gap-6">
+          <div className="flex items-center justify-end gap-3">
+            <button
+              onClick={handleRefresh}
+              disabled={loading}
+              className="flex-1 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 px-6 py-3 text-sm font-semibold text-slate-950 shadow-lg shadow-cyan-500/30 disabled:opacity-60"
+            >
+              Refresh Rules
+            </button>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <label className="flex flex-col gap-2 text-sm font-semibold text-slate-200">
+              Bulk Upload Rules (one per line)
+              <textarea
+                value={rulesInput}
+                onChange={(e) => setRulesInput(e.target.value)}
+                placeholder="Disallow sharing salaries\nBlock deleting production data"
+                rows={6}
+                className="rounded-2xl border border-white/10 bg-slate-900/50 px-4 py-3 text-base text-white outline-none ring-0 focus:border-cyan-400"
+              />
+            </label>
+            <label className="flex flex-col gap-2 text-sm font-semibold text-slate-200">
+              Delete Rule (exact text match)
+              <textarea
+                value={deleteInput}
+                onChange={(e) => setDeleteInput(e.target.value)}
+                placeholder="Enter the exact rule text to remove..."
+                rows={6}
+                className="rounded-2xl border border-white/10 bg-slate-900/50 px-4 py-3 text-base text-white outline-none ring-0 focus:border-cyan-400"
+              />
+            </label>
+          </div>
+
+          <div className="flex flex-wrap gap-3">
+            <button
+              onClick={handleUpload}
+              disabled={loading}
+              className="rounded-full bg-gradient-to-r from-emerald-400 to-lime-400 px-6 py-3 text-sm font-semibold text-slate-900 shadow-lg shadow-emerald-500/30 disabled:opacity-60"
+            >
+              Upload / Append Rules
+            </button>
+            <button
+              onClick={handleDelete}
+              disabled={loading}
+              className="rounded-full border border-rose-500 px-6 py-3 text-sm font-semibold text-rose-300 transition hover:bg-rose-500/10 disabled:opacity-60"
+            >
+              Delete Rule
+            </button>
+          </div>
+
+          {status && (
+            <div
+              className={`rounded-2xl border px-4 py-3 text-sm ${
+                status.tone === "error"
+                  ? "border-rose-500/40 bg-rose-500/10 text-rose-200"
+                  : status.tone === "success"
+                    ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-200"
+                    : "border-cyan-500/40 bg-cyan-500/10 text-cyan-200"
+              }`}
+            >
+              {status.message}
+            </div>
+          )}
+
+          <div className="rounded-2xl border border-white/10 bg-slate-950/40">
+            <div className="flex items-center justify-between border-b border-white/5 px-5 py-3 text-xs uppercase tracking-[0.3em] text-slate-400">
+              <span>Rule Set</span>
+              <span>{rules.length} entries</span>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left text-sm text-slate-200">
+                <thead className="bg-white/5 text-xs uppercase tracking-[0.2em] text-slate-400">
+                  <tr>
+                    <th className="px-4 py-3">#</th>
+                    <th className="px-4 py-3">Rule</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rules.length === 0 && (
+                    <tr>
+                      <td colSpan={2} className="px-4 py-6 text-center text-slate-500">
+                        No rules loaded. Use the refresh button above.
+                      </td>
+                    </tr>
+                  )}
+                  {rules.map((rule, idx) => (
+                    <tr key={`${rule}-${idx}`} className="border-t border-white/5">
+                      <td className="px-4 py-3 text-slate-400">{idx + 1}</td>
+                      <td className="px-4 py-3">{rule}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <Footer />
     </main>
   );

frontend/app/analytics/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { AnalyticsPanel } from "@/components/analytics-panel";
 import { Footer } from "@/components/footer";
+import { TenantSelector } from "@/components/tenant-selector";
 
 export default function AnalyticsPage() {
   return (
@@ -14,9 +15,12 @@ export default function AnalyticsPage() {
             </span>
             IntegraChat · Analytics
           </div>
-          <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
-            ← Back Home
-          </Link>
+          <div className="flex items-center gap-4">
+            <TenantSelector />
+            <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
+              ← Back Home
+            </Link>
+          </div>
         </div>
         <p className="text-sm text-slate-300">
           Inspect tenant-wide metrics including tool usage, red-flag violations, and overall activity—all powered by the

frontend/app/chat/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { ChatPanel } from "@/components/chat-panel";
 import { Footer } from "@/components/footer";
+import { TenantSelector } from "@/components/tenant-selector";
 
 export default function ChatPage() {
   return (
@@ -14,9 +15,12 @@ export default function ChatPage() {
             </span>
             IntegraChat · Chat Bot
           </div>
-          <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
-            ← Back Home
-          </Link>
+          <div className="flex items-center gap-4">
+            <TenantSelector />
+            <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
+              ← Back Home
+            </Link>
+          </div>
         </div>
         <p className="text-sm text-slate-300">
           Experience the MCP agent orchestration layer with multi-tool reasoning, tenant isolation, and red-flag aware

frontend/app/ingestion/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { KnowledgeBasePanel } from "@/components/knowledge-base-panel";
 import { Footer } from "@/components/footer";
+import { TenantSelector } from "@/components/tenant-selector";
 
 export default function IngestionPage() {
   return (
@@ -14,9 +15,12 @@ export default function IngestionPage() {
             </span>
             IntegraChat · Data Ingestion
           </div>
-          <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
-            ← Back Home
-          </Link>
+          <div className="flex items-center gap-4">
+            <TenantSelector />
+            <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
+              ← Back Home
+            </Link>
+          </div>
         </div>
         <p className="text-sm text-slate-300">
           Upload raw text, URLs, or documents to feed the tenant-specific RAG index. All inputs flow into the FastAPI +

frontend/app/knowledge-base/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import Link from "next/link";
+import { useTenant } from "@/contexts/TenantContext";
 
 type Document = {
   id: number;
@@ -20,15 +21,24 @@ const API_BASE =
   process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, "") || "http://localhost:8000";
 
 export default function KnowledgeBasePage() {
-  const [tenantId, setTenantId] = useState("tenant123");
+  const { tenantId, isLoading: tenantLoading } = useTenant();
   const [documents, setDocuments] = useState<Document[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [searchFilter, setSearchFilter] = useState("");
   const [filterType, setFilterType] = useState<"all" | "pdf" | "text" | "faq" | "link">("all");
+  const [isDeleting, setIsDeleting] = useState<number | null>(null);
+  const [isDeletingAll, setIsDeletingAll] = useState(false);
 
   async function loadDocuments() {
+    // Guard against empty tenant ID
+    if (!tenantId || !tenantId.trim()) {
+      setError("Please enter a tenant ID");
+      setLoading(false);
+      return;
+    }
+
     setLoading(true);
     setError(null);
 
@@ -43,7 +53,18 @@ export default function KnowledgeBasePage() {
       );
 
       if (!response.ok) {
-        throw new Error(`Failed to load documents: ${response.status}`);
+        const errorData = await response.json().catch(() => ({}));
+        const errorMsg = errorData.detail || errorData.message || `Failed to load documents (${response.status})`;
+        
+        if (response.status === 400) {
+          throw new Error(errorMsg.includes("tenant") 
+            ? "Missing tenant ID. Please enter a tenant ID in the navbar."
+            : errorMsg);
+        } else if (response.status === 503) {
+          throw new Error("Cannot connect to RAG MCP server. Please ensure the RAG server is running.");
+        } else {
+          throw new Error(errorMsg);
+        }
       }
 
       const data: DocumentListResponse = await response.json();
@@ -54,7 +75,7 @@ export default function KnowledgeBasePage() {
       setError(
         err instanceof Error
           ? err.message
-          : "Failed to load knowledge base. Is the RAG MCP server running?",
+          : "Failed to load knowledge base. Please check if the backend services are running.",
       );
     } finally {
       setLoading(false);
@@ -62,8 +83,11 @@ export default function KnowledgeBasePage() {
   }
 
   useEffect(() => {
-    loadDocuments();
-  }, [tenantId]);
+    // Wait for tenant context to finish loading, then load documents if tenant ID is available
+    if (!tenantLoading && tenantId && tenantId.trim()) {
+      loadDocuments();
+    }
+  }, [tenantId, tenantLoading]);
 
   // Filter documents based on search and type
   const filteredDocuments = documents.filter((doc) => {
@@ -122,6 +146,75 @@ export default function KnowledgeBasePage() {
     }
   };
 
+  async function handleDeleteDocument(documentId: number) {
+    if (!tenantId.trim() || isDeleting !== null) return;
+    setIsDeleting(documentId);
+
+    try {
+      const response = await fetch(`${API_BASE}/rag/delete/${documentId}`, {
+        method: "DELETE",
+        headers: {
+          "x-tenant-id": tenantId,
+        },
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const errorMsg = errorData.detail || `Failed to delete document: ${response.status}`;
+        throw new Error(errorMsg);
+      }
+
+      // Remove from local state and update total
+      setDocuments(docs => docs.filter(doc => doc.id !== documentId));
+      setTotal(prev => Math.max(0, prev - 1));
+    } catch (err) {
+      console.error(err);
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Failed to delete document",
+      );
+    } finally {
+      setIsDeleting(null);
+    }
+  }
+
+  async function handleDeleteAll() {
+    if (!tenantId.trim() || isDeletingAll) return;
+    
+    if (!confirm("Are you sure you want to delete ALL documents for this tenant? This action cannot be undone.")) {
+      return;
+    }
+
+    setIsDeletingAll(true);
+
+    try {
+      const response = await fetch(`${API_BASE}/rag/delete-all`, {
+        method: "DELETE",
+        headers: {
+          "x-tenant-id": tenantId,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to delete all documents: ${response.status}`);
+      }
+
+      const data = await response.json();
+      setDocuments([]);
+      setTotal(0);
+    } catch (err) {
+      console.error(err);
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Failed to delete all documents",
+      );
+    } finally {
+      setIsDeletingAll(false);
+    }
+  }
+
   return (
     <main className="mx-auto flex min-h-screen max-w-7xl flex-col gap-8 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
       {/* Header */}
@@ -141,12 +234,15 @@ export default function KnowledgeBasePage() {
           </div>
         </div>
         <div className="flex items-center gap-3">
-          <input
-            value={tenantId}
-            onChange={(e) => setTenantId(e.target.value)}
-            placeholder="Tenant ID"
-            className="rounded-full border border-white/15 bg-white/10 px-4 py-1.5 text-sm text-white outline-none focus:border-cyan-300"
-          />
+          {documents.length > 0 && (
+            <button
+              onClick={handleDeleteAll}
+              disabled={isDeletingAll}
+              className="rounded-full border border-red-500/50 bg-red-500/10 px-5 py-2 text-sm font-semibold text-red-300 transition hover:bg-red-500/20 disabled:opacity-60"
+            >
+              {isDeletingAll ? "Deleting…" : "Delete All"}
+            </button>
+          )}
           <button
             onClick={loadDocuments}
             disabled={loading}
@@ -205,8 +301,17 @@ export default function KnowledgeBasePage() {
       {/* Error Message */}
       {error && (
         <div className="rounded-2xl border border-red-500/40 bg-red-500/10 px-6 py-4 text-red-200">
-          <p className="font-semibold">Error loading knowledge base</p>
+          <p className="font-semibold">⚠️ Error loading knowledge base</p>
           <p className="mt-1 text-sm">{error}</p>
+          <button
+            onClick={() => {
+              setError(null);
+              loadDocuments();
+            }}
+            className="mt-3 rounded-lg border border-red-500/50 bg-red-500/20 px-4 py-2 text-sm font-semibold text-red-200 transition hover:bg-red-500/30"
+          >
+            Try Again
+          </button>
         </div>
       )}
 
@@ -254,10 +359,19 @@ export default function KnowledgeBasePage() {
                 <p className="text-sm leading-relaxed text-slate-200 line-clamp-6">
                   {preview}
                 </p>
-                <div className="mt-4 flex items-center gap-2 text-xs text-slate-400">
-                  <span>ID: {doc.id}</span>
-                  <span>•</span>
-                  <span>{doc.text.length} chars</span>
+                <div className="mt-4 flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-xs text-slate-400">
+                    <span>ID: {doc.id}</span>
+                    <span>•</span>
+                    <span>{doc.text.length} chars</span>
+                  </div>
+                  <button
+                    onClick={() => handleDeleteDocument(doc.id)}
+                    disabled={isDeleting === doc.id}
+                    className="rounded-lg border border-red-500/50 bg-red-500/10 px-3 py-1 text-xs font-semibold text-red-300 transition hover:bg-red-500/20 disabled:opacity-60"
+                  >
+                    {isDeleting === doc.id ? "Deleting…" : "Delete"}
+                  </button>
                 </div>
               </div>
             );

frontend/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { TenantProvider } from "@/contexts/TenantContext";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,7 +29,9 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <TenantProvider>
+          {children}
+        </TenantProvider>
       </body>
     </html>
   );

frontend/app/page.tsx

@@ -7,6 +7,7 @@ import { FeatureGrid } from "@/components/feature-grid";
 import { Footer } from "@/components/footer";
 import { Hero } from "@/components/hero";
 import { KnowledgeBasePanel } from "@/components/knowledge-base-panel";
+import { TenantSelector } from "@/components/tenant-selector";
 
 const navItems = [
   { label: "Data Ingestion", href: "/ingestion" },
@@ -20,42 +21,45 @@ export default function Home() {
     <main className="mx-auto flex min-h-screen max-w-6xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
       <header className="flex flex-col gap-6 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">
         <div className="flex flex-wrap items-center justify-between gap-3 text-sm">
-          <div className="flex items-center gap-3 text-base font-semibold">
-            <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
-              IC
-            </span>
-            IntegraChat Operator Console
-          </div>
-          <div className="flex flex-wrap items-center gap-3 text-xs uppercase tracking-[0.4em] text-slate-400">
-            FastAPI · MCP Servers · Celery · Next.js
-          </div>
+        <div className="flex items-center gap-3 text-base font-semibold">
+          <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
+            IC
+          </span>
+          IntegraChat Operator Console
+        </div>
+        <div className="flex flex-wrap items-center gap-3 text-xs uppercase tracking-[0.4em] text-slate-400">
+          FastAPI · MCP Servers · Celery · Next.js
+        </div>
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <nav className="flex flex-wrap gap-2">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="rounded-full border border-white/15 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-cyan-400 hover:text-white"
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+          <TenantSelector />
         </div>
-        <nav className="flex flex-wrap gap-2">
-          {navItems.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="rounded-full border border-white/15 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-cyan-400 hover:text-white"
-            >
-              {item.label}
-            </Link>
-          ))}
-        </nav>
       </header>
 
       <Hero />
       <FeatureGrid />
 
       <section id="data-ingestion" className="scroll-mt-28">
-        <KnowledgeBasePanel />
+      <KnowledgeBasePanel />
       </section>
 
       <section id="chat-bot" className="scroll-mt-28">
-        <ChatPanel />
+      <ChatPanel />
       </section>
 
       <section id="analytics" className="scroll-mt-28">
-        <AnalyticsPanel />
+      <AnalyticsPanel />
       </section>
 
       <section id="admin-rules" className="scroll-mt-28">

frontend/components/analytics-panel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTenant } from "@/contexts/TenantContext";
 
 type AnalyticsOverview = {
   overview: {
@@ -15,7 +16,7 @@ const API_BASE =
   process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, "") || "http://localhost:8000";
 
 export function AnalyticsPanel() {
-  const [tenantId, setTenantId] = useState("tenant123");
+  const { tenantId } = useTenant();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [data, setData] = useState<AnalyticsOverview["overview"] | null>(null);
@@ -58,16 +59,6 @@ export function AnalyticsPanel() {
           </p>
           <h2 className="mt-2 text-3xl font-semibold">Analytics snapshot</h2>
         </div>
-        <div className="flex flex-col gap-2 text-sm text-slate-200">
-          <label className="text-xs uppercase tracking-widest text-slate-400">
-            Tenant ID
-          </label>
-          <input
-            value={tenantId}
-            onChange={(e) => setTenantId(e.target.value)}
-            className="rounded-full border border-white/15 bg-white/10 px-4 py-1.5 text-sm text-white outline-none focus:border-cyan-300"
-          />
-        </div>
         <button
           onClick={fetchAnalytics}
           disabled={loading}

frontend/components/chat-panel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import { useTenant } from "@/contexts/TenantContext";
 
 type Message = {
   role: "user" | "assistant" | "system";
@@ -12,7 +13,7 @@ const API_BASE =
   process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, "") || "http://localhost:8000";
 
 export function ChatPanel() {
-  const [tenantId, setTenantId] = useState("tenant123");
+  const { tenantId } = useTenant();
   const [message, setMessage] = useState("");
   const [isSending, setIsSending] = useState(false);
   const [history, setHistory] = useState<Message[]>([
@@ -106,25 +107,13 @@ export function ChatPanel() {
       className="gradient-border relative rounded-[28px] p-1 text-white"
     >
       <div className="glass-panel relative rounded-[26px] p-6">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div>
-            <p className="text-sm uppercase tracking-[0.5em] text-cyan-200/70">
-              Orchestrator Console
-            </p>
-            <h2 className="mt-2 text-3xl font-semibold">
-              Talk to your enterprise agent
-            </h2>
-          </div>
-          <div className="flex flex-col gap-2 text-sm text-slate-200">
-            <label className="text-xs uppercase tracking-widest text-slate-400">
-              Tenant ID
-            </label>
-            <input
-              value={tenantId}
-              onChange={(e) => setTenantId(e.target.value)}
-              className="rounded-full border border-white/15 bg-white/10 px-4 py-1.5 text-sm text-white outline-none focus:border-cyan-300"
-            />
-          </div>
+        <div>
+          <p className="text-sm uppercase tracking-[0.5em] text-cyan-200/70">
+            Orchestrator Console
+          </p>
+          <h2 className="mt-2 text-3xl font-semibold">
+            Talk to your enterprise agent
+          </h2>
         </div>
         <div className="mt-6 h-[360px] space-y-3 overflow-y-auto rounded-2xl border border-white/10 bg-slate-950/40 p-4 scrollArea">
           {history.map((msg, idx) => (

frontend/components/knowledge-base-panel.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import Link from "next/link";
+import { useTenant } from "@/contexts/TenantContext";
 
 type SearchResult = {
   text: string;
@@ -9,13 +10,19 @@ type SearchResult = {
   relevance?: number;
 };
 
+type Document = {
+  id: number;
+  text: string;
+  created_at?: string;
+};
+
 type SourceType = "raw_text" | "url" | "pdf" | "docx" | "txt" | "markdown";
 
 const API_BASE =
   process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, "") || "http://localhost:8000";
 
 export function KnowledgeBasePanel() {
-  const [tenantId, setTenantId] = useState("tenant123");
+  const { tenantId, isLoading: tenantLoading } = useTenant();
   const [searchQuery, setSearchQuery] = useState("");
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const [isSearching, setIsSearching] = useState(false);
@@ -26,6 +33,10 @@ export function KnowledgeBasePanel() {
   const [isIngesting, setIsIngesting] = useState(false);
   const [ingestStatus, setIngestStatus] = useState<string | null>(null);
   const [searchError, setSearchError] = useState<string | null>(null);
+  const [documents, setDocuments] = useState<Document[]>([]);
+  const [isLoadingDocs, setIsLoadingDocs] = useState(false);
+  const [isDeleting, setIsDeleting] = useState<number | null>(null);
+  const [isDeletingAll, setIsDeletingAll] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   async function handleSearch() {
@@ -123,6 +134,8 @@ export function KnowledgeBasePanel() {
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
+      // Reload documents after successful ingestion
+      loadDocuments();
     } catch (err) {
       console.error(err);
       setIngestStatus(
@@ -186,6 +199,8 @@ export function KnowledgeBasePanel() {
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
+      // Reload documents after successful ingestion
+      loadDocuments();
     } catch (err) {
       console.error(err);
       setIngestStatus(
@@ -198,6 +213,125 @@ export function KnowledgeBasePanel() {
     }
   }
 
+  async function loadDocuments() {
+    // Guard against empty tenant ID
+    if (!tenantId || !tenantId.trim() || isLoadingDocs) return;
+    setIsLoadingDocs(true);
+
+    try {
+      const response = await fetch(`${API_BASE}/rag/list?limit=10&offset=0`, {
+        method: "GET",
+        headers: {
+          "x-tenant-id": tenantId,
+        },
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const errorMsg = errorData.detail || errorData.message || `Failed to load documents (${response.status})`;
+        
+        if (response.status === 400) {
+          // Missing tenant ID - silently fail, user will see empty list
+          console.warn("Cannot load documents: Missing tenant ID");
+          setDocuments([]);
+          return;
+        } else if (response.status === 503) {
+          console.error("Cannot connect to RAG MCP server");
+          setDocuments([]);
+          return;
+        } else {
+          throw new Error(errorMsg);
+        }
+      }
+
+      const data = await response.json();
+      setDocuments(data.documents || []);
+    } catch (err) {
+      console.error(err);
+      setDocuments([]);
+      // Don't show error in status for document loading - it's not critical
+    } finally {
+      setIsLoadingDocs(false);
+    }
+  }
+
+  async function handleDeleteDocument(documentId: number) {
+    if (!tenantId.trim() || isDeleting !== null) return;
+    setIsDeleting(documentId);
+
+    try {
+      const response = await fetch(`${API_BASE}/rag/delete/${documentId}`, {
+        method: "DELETE",
+        headers: {
+          "x-tenant-id": tenantId,
+        },
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const errorMsg = errorData.detail || `Failed to delete document: ${response.status}`;
+        throw new Error(errorMsg);
+      }
+
+      // Remove from local state
+      setDocuments(docs => docs.filter(doc => doc.id !== documentId));
+      setIngestStatus("✅ Document deleted successfully");
+    } catch (err) {
+      console.error(err);
+      setIngestStatus(
+        err instanceof Error
+          ? `❌ Error: ${err.message}`
+          : "Failed to delete document",
+      );
+    } finally {
+      setIsDeleting(null);
+    }
+  }
+
+  async function handleDeleteAll() {
+    if (!tenantId.trim() || isDeletingAll) return;
+    
+    if (!confirm("Are you sure you want to delete ALL documents for this tenant? This action cannot be undone.")) {
+      return;
+    }
+
+    setIsDeletingAll(true);
+
+    try {
+      const response = await fetch(`${API_BASE}/rag/delete-all`, {
+        method: "DELETE",
+        headers: {
+          "x-tenant-id": tenantId,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to delete all documents: ${response.status}`);
+      }
+
+      const data = await response.json();
+      setDocuments([]);
+      setIngestStatus(`✅ Deleted ${data.deleted_count || 0} document(s)`);
+    } catch (err) {
+      console.error(err);
+      setIngestStatus(
+        err instanceof Error
+          ? `❌ Error: ${err.message}`
+          : "Failed to delete all documents",
+      );
+    } finally {
+      setIsDeletingAll(false);
+    }
+  }
+
+  // Load documents on mount and when tenant changes
+  useEffect(() => {
+    // Wait for tenant context to finish loading, then load documents if tenant ID is available
+    if (!tenantLoading && tenantId && tenantId.trim()) {
+      loadDocuments();
+    }
+  }, [tenantId, tenantLoading]);
+
   return (
     <section
       id="knowledge-base"
@@ -219,16 +353,6 @@ export function KnowledgeBasePanel() {
           >
             View All Documents →
           </Link>
-          <div className="flex flex-col gap-2 text-sm text-slate-200">
-            <label className="text-xs uppercase tracking-widest text-slate-400">
-              Tenant ID
-            </label>
-            <input
-              value={tenantId}
-              onChange={(e) => setTenantId(e.target.value)}
-              className="rounded-full border border-white/15 bg-white/10 px-4 py-1.5 text-sm text-white outline-none focus:border-cyan-300"
-            />
-          </div>
         </div>
 
         {/* Search Section */}
@@ -387,6 +511,84 @@ export function KnowledgeBasePanel() {
             )}
           </div>
         </div>
+
+        {/* Manage Documents Section */}
+        <div className="mt-8 rounded-2xl border border-white/10 bg-slate-950/40 p-4">
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <p className="text-sm uppercase tracking-[0.5em] text-slate-400">
+                Manage Documents
+              </p>
+              <p className="mt-2 text-sm text-slate-300">
+                View and delete your ingested documents
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={loadDocuments}
+                disabled={isLoadingDocs}
+                className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs font-semibold text-slate-300 transition hover:bg-white/10 disabled:opacity-60"
+              >
+                {isLoadingDocs ? "Loading…" : "Refresh"}
+              </button>
+              {documents.length > 0 && (
+                <button
+                  onClick={handleDeleteAll}
+                  disabled={isDeletingAll}
+                  className="rounded-full border border-red-500/50 bg-red-500/10 px-4 py-2 text-xs font-semibold text-red-300 transition hover:bg-red-500/20 disabled:opacity-60"
+                >
+                  {isDeletingAll ? "Deleting…" : "Delete All"}
+                </button>
+              )}
+            </div>
+          </div>
+
+          {documents.length === 0 && !isLoadingDocs && (
+            <p className="text-sm text-slate-400 text-center py-4">
+              No documents found. Ingest some content to get started.
+            </p>
+          )}
+
+          {isLoadingDocs && (
+            <p className="text-sm text-slate-400 text-center py-4">
+              Loading documents…
+            </p>
+          )}
+
+          {documents.length > 0 && (
+            <div className="space-y-2 max-h-96 overflow-y-auto">
+              {documents.map((doc) => (
+                <div
+                  key={doc.id}
+                  className="flex items-start justify-between gap-3 rounded-xl border border-white/10 bg-white/5 p-3"
+                >
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs text-slate-400 mb-1">
+                      ID: {doc.id}
+                      {doc.created_at && (
+                        <span className="ml-2">
+                          • {new Date(doc.created_at).toLocaleDateString()}
+                        </span>
+                      )}
+                    </p>
+                    <p className="text-sm text-slate-200 line-clamp-2">
+                      {doc.text.length > 150
+                        ? `${doc.text.substring(0, 150)}...`
+                        : doc.text}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => handleDeleteDocument(doc.id)}
+                    disabled={isDeleting === doc.id}
+                    className="flex-shrink-0 rounded-lg border border-red-500/50 bg-red-500/10 px-3 py-1.5 text-xs font-semibold text-red-300 transition hover:bg-red-500/20 disabled:opacity-60"
+                  >
+                    {isDeleting === doc.id ? "Deleting…" : "Delete"}
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     </section>
   );

frontend/components/tenant-selector.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useTenant } from "@/contexts/TenantContext";
+
+export function TenantSelector() {
+  const { tenantId, setTenantId } = useTenant();
+
+  return (
+    <div className="flex items-center gap-3">
+      <label className="text-sm font-semibold text-slate-200">Tenant ID:</label>
+      <input
+        value={tenantId}
+        onChange={(e) => setTenantId(e.target.value)}
+        placeholder="Enter tenant ID"
+        className="rounded-xl border border-white/10 bg-slate-900/50 px-4 py-2 text-sm text-white outline-none focus:border-cyan-400 min-w-[150px]"
+      />
+    </div>
+  );
+}
+

frontend/contexts/TenantContext.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { DEFAULT_TENANT_ID, TENANT_STORAGE_KEY } from "@/lib/constants";
+
+type TenantContextType = {
+  tenantId: string;
+  setTenantId: (id: string) => void;
+  isLoading: boolean;
+};
+
+const TenantContext = createContext<TenantContextType | undefined>(undefined);
+
+export function TenantProvider({ children }: { children: ReactNode }) {
+  const [tenantId, setTenantIdState] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load from localStorage on mount
+  useEffect(() => {
+    const saved = localStorage.getItem(TENANT_STORAGE_KEY);
+    setTenantIdState(saved || DEFAULT_TENANT_ID);
+    setIsLoading(false);
+  }, []);
+
+  const setTenantId = (id: string) => {
+    const trimmed = id.trim();
+    setTenantIdState(trimmed);
+    if (trimmed) {
+      localStorage.setItem(TENANT_STORAGE_KEY, trimmed);
+    } else {
+      localStorage.removeItem(TENANT_STORAGE_KEY);
+    }
+  };
+
+  return (
+    <TenantContext.Provider value={{ tenantId, setTenantId, isLoading }}>
+      {children}
+    </TenantContext.Provider>
+  );
+}
+
+export function useTenant() {
+  const context = useContext(TenantContext);
+  if (!context) {
+    throw new Error("useTenant must be used within TenantProvider");
+  }
+  return context;
+}
+

frontend/lib/constants.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_TENANT_ID = "tenant123";
+export const TENANT_STORAGE_KEY = "integrachat_tenant_id";
+