imporvement in the UI in app.py

README.md

@@ -75,12 +75,31 @@ This platform showcases how MCP can power intelligent, governed, multi-tenant AI
 
 The Gradio UI exposes four tabs once you launch `app.py`:
 
-1. **Chat** – enter your Tenant ID, ask questions, and see multi-tool MCP responses.
+1. **Chat** – enter your Tenant ID, ask questions, and see multi-tool MCP responses with autonomous tool orchestration.
+
 2. **Document Ingestion** – toggle between Raw Text, URL, or File Upload to populate the tenant RAG index. View and manage your ingested documents with delete functionality.
-3. **Admin Analytics** – click "Fetch Analytics Snapshot" to view overview/tool-usage/red-flag/activity metrics.
-4. **Admin Rules & Compliance** – upload/delete governance rules that are stored via the backend `/admin/rules` API.
 
-**Tip:** Every action requires a tenant ID. The tenant ID is now managed centrally and persists across page refreshes.
+3. **Knowledge Base Library** – comprehensive document management interface with:
+   - **Statistics Dashboard**: Visual cards showing total documents, document types (Text, PDF, FAQ, Link), and average length
+   - **Interactive Charts**: Plotly pie chart displaying document type distribution
+   - **Semantic Search**: Search your knowledge base with relevance scoring
+   - **Type Filtering**: Filter documents by type (all, text, pdf, faq, link)
+   - **Document Management**: View all documents in a table with preview, delete individual documents, or delete all at once
+   - **Auto-refresh**: Document lists automatically update after ingestion or deletion
+
+4. **Admin Analytics** – comprehensive analytics dashboard with visualizations:
+   - **Statistics Cards**: Total queries, active users, red flags, and RAG searches
+   - **Interactive Bar Charts**: 
+     - Tool Usage Count (RAG, Web, Admin tools)
+     - Average Tool Latency (performance metrics)
+     - RAG Quality Metrics (hits, scores, recall indicators)
+   - **Tool Usage Table**: Detailed breakdown of tool performance with counts, latency, success/error rates, and token usage
+   - **Formatted Summary**: Key metrics displayed in an easy-to-read format
+   - Click "🔄 Fetch Analytics Snapshot" to load the latest data
+
+5. **Admin Rules & Compliance** – upload/delete governance rules that are stored via the backend `/admin/rules` API.
+
+**Tip:** Every action requires a tenant ID. The tenant ID is now managed centrally and persists across page refreshes. The Knowledge Base Library and Admin Analytics tabs feature beautiful, modern UI with dark theme styling and interactive Plotly visualizations.
 
 ### Frontend (Next.js) Operator Console
 
@@ -234,7 +253,8 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 ## Technical Stack
 
 - **Backend**: FastAPI with async/await for high-performance MCP orchestration
-- **Frontend**: Gradio interface + Next.js operator console
+- **Frontend**: Gradio interface with Plotly visualizations + Next.js operator console
+- **UI Libraries**: Plotly for interactive charts, Gradio for web interface
 - **LLM Integration**: Ollama (local) or Groq (cloud) via configurable backend
 - **Vector Store**: pgvector (via Supabase) or SQLite embeddings
 - **Analytics**: SQLite with indexed queries for fast analytics
@@ -261,10 +281,30 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - **Response wrapping**: Standardized response format with automatic unwrapping in clients
 - **Error handling**: Comprehensive error responses with detailed messages for debugging
 
+## UI Features
+
+### Knowledge Base Library
+- **Visual Statistics**: Real-time document counts and type distribution
+- **Interactive Charts**: Plotly pie charts for document type visualization
+- **Advanced Search**: Semantic search across all ingested documents with relevance scoring
+- **Smart Filtering**: Filter by document type (text, PDF, FAQ, link)
+- **Bulk Operations**: Delete individual documents or all documents at once
+- **Auto-refresh**: Lists automatically update after operations
+
+### Admin Analytics Dashboard
+- **Statistics Cards**: Key metrics displayed in visually appealing cards with icons
+- **Tool Usage Visualization**: Bar charts showing tool invocation counts and performance
+- **Latency Metrics**: Visual representation of tool response times
+- **RAG Quality Analysis**: Charts displaying search quality metrics (hits, scores, recall)
+- **Detailed Tables**: Comprehensive tool usage breakdown with success/error rates
+- **Dark Theme**: Modern UI with dark background and white text for better readability
+- **Real-time Updates**: Fetch latest analytics data with a single click
+
 ## Acknowledgments
 
 - Built with [Model Context Protocol (MCP)](https://modelcontextprotocol.io/)
 - Powered by [Gradio](https://gradio.app/) for the interface
+- Visualizations created with [Plotly](https://plotly.com/python/)
 - Backend built with [FastAPI](https://fastapi.tiangolo.com/)
 - Analytics and governance features inspired by enterprise AI platform requirements
 

app.py

@@ -3,6 +3,15 @@ import requests
 import json
 import os
 from pathlib import Path
+from collections import Counter
+from datetime import datetime
+
+try:
+    import plotly.graph_objects as go
+    PLOTLY_AVAILABLE = True
+except ImportError:
+    PLOTLY_AVAILABLE = False
+    go = None
 
 BACKEND_BASE_URL = os.getenv("BACKEND_BASE_URL", "http://localhost:8000")
 
@@ -295,46 +304,601 @@ def delete_rule_and_refresh(tenant_id: str, rule: str):
     return status, summary, rows
 
 
-def fetch_admin_analytics(tenant_id: str) -> str:
+def fetch_admin_analytics(tenant_id: str):
+    """Fetch analytics data and return formatted results with visualizations."""
     if not tenant_id or not tenant_id.strip():
-        return "❗ Tenant ID is required to view analytics."
+        error_msg = "❗ Tenant ID is required to view analytics."
+        return error_msg, {}, None, None, None, None
 
     tenant_id = tenant_id.strip()
     headers = {"x-tenant-id": tenant_id}
-    sections = []
-
-    endpoints = [
-        ("Overview", "/analytics/overview"),
-        ("Tool Usage", "/analytics/tool-usage"),
-        ("Red Flags", "/analytics/redflags"),
-        ("Activity", "/analytics/activity"),
-    ]
-
-    for label, path in endpoints:
+    
+    overview_data = {}
+    tool_usage_data = {}
+    redflags_data = {}
+    activity_data = {}
+    error_msg = None
+    
+    # Fetch Overview
+    try:
+        resp = requests.get(
+            f"{BACKEND_BASE_URL}/analytics/overview",
+            headers=headers,
+            timeout=30
+        )
+        if resp.status_code == 200:
+            overview_data = resp.json()
+        else:
+            error_msg = f"❌ Error fetching overview: {resp.status_code}"
+    except Exception as e:
+        error_msg = f"❌ Error: {str(e)}"
+    
+    # Fetch Tool Usage
+    try:
+        resp = requests.get(
+            f"{BACKEND_BASE_URL}/analytics/tool-usage",
+            headers=headers,
+            timeout=30
+        )
+        if resp.status_code == 200:
+            tool_usage_data = resp.json()
+    except Exception:
+        pass
+    
+    # Fetch Red Flags
+    try:
+        resp = requests.get(
+            f"{BACKEND_BASE_URL}/analytics/redflags",
+            headers=headers,
+            timeout=30
+        )
+        if resp.status_code == 200:
+            redflags_data = resp.json()
+    except Exception:
+        pass
+    
+    # Fetch Activity
+    try:
+        resp = requests.get(
+            f"{BACKEND_BASE_URL}/analytics/activity",
+            headers=headers,
+            timeout=30
+        )
+        if resp.status_code == 200:
+            activity_data = resp.json()
+    except Exception:
+        pass
+    
+    # Extract data for visualizations
+    overview = overview_data.get("overview", {})
+    tool_usage = overview.get("tool_usage", tool_usage_data.get("tool_usage", {}))
+    rag_quality = overview.get("rag_quality", {})
+    
+    # Create tool usage bar chart
+    tool_chart = None
+    if tool_usage and PLOTLY_AVAILABLE:
         try:
-            resp = requests.get(
-                f"{BACKEND_BASE_URL}{path}",
-                headers=headers,
-                timeout=30
+            tools = []
+            counts = []
+            latencies = []
+            colors_list = []
+            
+            color_map = {
+                "rag": "#3b82f6",
+                "rag.search": "#2563eb",
+                "rag.ingest": "#1d4ed8",
+                "rag.list": "#1e40af",
+                "web.search": "#06b6d4",
+                "admin": "#a855f7",
+                "llm": "#10b981"
+            }
+            
+            for tool_name, stats in tool_usage.items():
+                tools.append(tool_name.replace(".", " ").title())
+                counts.append(stats.get("count", 0))
+                latencies.append(stats.get("avg_latency_ms", 0))
+                colors_list.append(color_map.get(tool_name, "#6b7280"))
+            
+            if tools:
+                fig = go.Figure()
+                fig.add_trace(go.Bar(
+                    x=tools,
+                    y=counts,
+                    name="Usage Count",
+                    marker_color=colors_list,
+                    text=counts,
+                    textposition='outside',
+                    hovertemplate='<b>%{x}</b><br>Count: %{y}<br><extra></extra>'
+                ))
+                fig.update_layout(
+                    title={
+                        "text": "Tool Usage Count",
+                        "x": 0.5,
+                        "xanchor": "center",
+                        "font": {"size": 16, "color": "#1f2937"}
+                    },
+                    xaxis_title="Tool",
+                    yaxis_title="Count",
+                    height=380,
+                    showlegend=False,
+                    margin=dict(l=50, r=20, t=60, b=50),
+                    plot_bgcolor="rgba(0,0,0,0)",
+                    paper_bgcolor="rgba(0,0,0,0)",
+                    font=dict(color="#374151", size=12),
+                    xaxis=dict(gridcolor="rgba(0,0,0,0.1)"),
+                    yaxis=dict(gridcolor="rgba(0,0,0,0.1)")
+                )
+                tool_chart = fig
+        except Exception:
+            tool_chart = None
+    
+    # Create latency chart
+    latency_chart = None
+    if tool_usage and PLOTLY_AVAILABLE:
+        try:
+            tools = []
+            latencies = []
+            colors_list = []
+            
+            color_map = {
+                "rag": "#3b82f6",
+                "rag.search": "#2563eb",
+                "rag.ingest": "#1d4ed8",
+                "rag.list": "#1e40af",
+                "web.search": "#06b6d4",
+                "admin": "#a855f7",
+                "llm": "#10b981"
+            }
+            
+            for tool_name, stats in tool_usage.items():
+                avg_latency = stats.get("avg_latency_ms", 0)
+                if avg_latency > 0:
+                    tools.append(tool_name.replace(".", " ").title())
+                    latencies.append(round(avg_latency, 2))
+                    colors_list.append(color_map.get(tool_name, "#6b7280"))
+            
+            if tools:
+                fig = go.Figure()
+                fig.add_trace(go.Bar(
+                    x=tools,
+                    y=latencies,
+                    name="Avg Latency (ms)",
+                    marker_color=colors_list,
+                    text=[f"{l}ms" for l in latencies],
+                    textposition='outside',
+                    hovertemplate='<b>%{x}</b><br>Avg Latency: %{y}ms<extra></extra>'
+                ))
+                fig.update_layout(
+                    title={
+                        "text": "Average Tool Latency",
+                        "x": 0.5,
+                        "xanchor": "center",
+                        "font": {"size": 16, "color": "#1f2937"}
+                    },
+                    xaxis_title="Tool",
+                    yaxis_title="Latency (ms)",
+                    height=380,
+                    showlegend=False,
+                    margin=dict(l=50, r=20, t=60, b=50),
+                    plot_bgcolor="rgba(0,0,0,0)",
+                    paper_bgcolor="rgba(0,0,0,0)",
+                    font=dict(color="#374151", size=12),
+                    xaxis=dict(gridcolor="rgba(0,0,0,0.1)"),
+                    yaxis=dict(gridcolor="rgba(0,0,0,0.1)")
+                )
+                latency_chart = fig
+        except Exception:
+            latency_chart = None
+    
+    # Create RAG quality metrics visualization
+    rag_chart = None
+    if rag_quality and PLOTLY_AVAILABLE:
+        try:
+            metrics = ["Avg Hits", "Avg Score", "Avg Top Score"]
+            values = [
+                rag_quality.get("avg_hits_per_search", 0),
+                rag_quality.get("avg_score", 0) * 100,  # Convert to percentage
+                rag_quality.get("avg_top_score", 0) * 100
+            ]
+            
+            fig = go.Figure(data=[go.Bar(
+                x=metrics,
+                y=values,
+                marker_color=["#3b82f6", "#10b981", "#f59e0b"],
+                text=[f"{v:.2f}" for v in values],
+                textposition='outside',
+                hovertemplate='<b>%{x}</b><br>Value: %{y:.2f}<extra></extra>'
+            )])
+            fig.update_layout(
+                title={
+                    "text": "RAG Quality Metrics",
+                    "x": 0.5,
+                    "xanchor": "center",
+                    "font": {"size": 16, "color": "#1f2937"}
+                },
+                xaxis_title="Metric",
+                yaxis_title="Value",
+                height=350,
+                showlegend=False,
+                margin=dict(l=50, r=20, t=60, b=50),
+                plot_bgcolor="rgba(0,0,0,0)",
+                paper_bgcolor="rgba(0,0,0,0)",
+                font=dict(color="#374151", size=12),
+                xaxis=dict(gridcolor="rgba(0,0,0,0.1)"),
+                yaxis=dict(gridcolor="rgba(0,0,0,0.1)")
             )
-            if resp.status_code == 200:
-                data = resp.json()
-                pretty = json.dumps(data, indent=2)
-                sections.append(f"### {label}\n```json\n{pretty}\n```")
-            else:
-                sections.append(f"### {label}\n❌ Error {resp.status_code}: {resp.text}")
-        except requests.exceptions.ConnectionError:
-            sections.append(f"### {label}\n❌ Could not reach backend. Is the FastAPI server running?")
-        except requests.exceptions.Timeout:
-            sections.append(f"### {label}\n⏱️ Request timed out. Please try again.")
-        except Exception as exc:
-            sections.append(f"### {label}\n❌ Unexpected error: {exc}")
+            rag_chart = fig
+        except Exception:
+            rag_chart = None
+    
+    # Format summary text
+    total_queries = overview.get("total_queries", activity_data.get("activity", {}).get("total_queries", 0))
+    active_users = overview.get("active_users", activity_data.get("activity", {}).get("active_users", 0))
+    redflag_count = overview.get("redflag_count", redflags_data.get("count", 0))
+    last_query = overview.get("last_query", activity_data.get("activity", {}).get("last_query"))
+    
+    # Calculate total tool usage
+    total_tool_calls = sum(stats.get("count", 0) for stats in tool_usage.values())
+    total_success = sum(stats.get("success_count", 0) for stats in tool_usage.values())
+    total_errors = sum(stats.get("error_count", 0) for stats in tool_usage.values())
+    
+    success_rate = (total_success / total_tool_calls * 100) if total_tool_calls > 0 else 0
+    
+    summary_text = f"""
+#### 📈 Activity Metrics
+- **Total Queries:** `{total_queries}`
+- **Active Users:** `{active_users}`
+- **Red Flags:** `{redflag_count}`
+- **Last Query:** `{last_query if last_query else "N/A"}`
+
+---
+
+#### 🔧 Tool Usage Overview
+- **Total Tool Calls:** `{total_tool_calls}`
+- **Successful Calls:** `{total_success}` ✅
+- **Failed Calls:** `{total_errors}` {'⚠️' if total_errors > 0 else ''}
+- **Success Rate:** `{success_rate:.1f}%` {'🟢' if success_rate >= 95 else '🟡' if success_rate >= 80 else '🔴'}
+
+---
+
+#### 🔍 RAG Quality Metrics
+- **Total Searches:** `{rag_quality.get("total_searches", 0)}`
+- **Avg Hits per Search:** `{rag_quality.get("avg_hits_per_search", 0):.2f}`
+- **Avg Relevance Score:** `{rag_quality.get("avg_score", 0):.3f}`
+- **Avg Top Score:** `{rag_quality.get("avg_top_score", 0):.3f}`
+- **Avg Search Latency:** `{rag_quality.get("avg_latency_ms", 0):.2f}ms`
+
+---
+
+#### 📊 Tool Breakdown
+"""
+    
+    # Add individual tool stats to summary
+    for tool_name, stats in sorted(tool_usage.items(), key=lambda x: x[1].get("count", 0), reverse=True):
+        tool_display = tool_name.replace(".", " ").title()
+        count = stats.get("count", 0)
+        latency = stats.get("avg_latency_ms", 0)
+        success = stats.get("success_count", 0)
+        errors = stats.get("error_count", 0)
+        status_icon = "✅" if errors == 0 else "⚠️"
+        summary_text += f"- **{tool_display}** {status_icon}<br>  └ {count} calls • {latency:.1f}ms avg • {success} success • {errors} errors\n"
+    
+    return summary_text, tool_usage, tool_chart, latency_chart, rag_chart, error_msg
+
+
+def list_documents(tenant_id: str, limit: int = 1000, offset: int = 0):
+    """
+    List all documents for a tenant.
+    Returns a tuple of (status_message, documents_list, total_count, stats_dict, chart_fig).
+    """
+    if not tenant_id or not tenant_id.strip():
+        return "❗ Tenant ID is required.", [], 0, {}, None
+    
+    tenant_id = tenant_id.strip()
+    try:
+        response = requests.get(
+            f"{BACKEND_BASE_URL}/rag/list",
+            params={"tenant_id": tenant_id, "limit": limit, "offset": offset},
+            headers={"x-tenant-id": tenant_id},
+            timeout=30
+        )
+        
+        if response.status_code == 200:
+            data = response.json()
+            documents = data.get("documents", [])
+            total = data.get("total", 0)
+            
+            # Format documents for display and collect stats
+            formatted_docs = []
+            type_counts = Counter()
+            total_length = 0
+            
+            for doc in documents:
+                doc_id = doc.get("id", "N/A")
+                text = doc.get("text", "")
+                created_at = doc.get("created_at", "")
+                preview = text[:200] + "..." if len(text) > 200 else text
+                
+                # Detect document type
+                text_lower = text.lower()
+                if "http://" in text_lower or "https://" in text_lower or "www." in text_lower:
+                    doc_type = "link"
+                elif any(x in text_lower for x in ["q:", "question:", "faq", "frequently asked"]):
+                    doc_type = "faq"
+                elif ".pdf" in text_lower or "pdf document" in text_lower:
+                    doc_type = "pdf"
+                else:
+                    doc_type = "text"
+                
+                type_counts[doc_type] += 1
+                total_length += len(text)
+                
+                formatted_docs.append({
+                    "ID": doc_id,
+                    "Type": doc_type,
+                    "Preview": preview,
+                    "Length": len(text),
+                    "Created": created_at[:10] if created_at else "N/A"
+                })
+            
+            # Create statistics dictionary
+            stats = {
+                "total": total,
+                "types": dict(type_counts),
+                "avg_length": total_length // total if total > 0 else 0,
+                "total_chars": total_length
+            }
+            
+            # Create pie chart for document types
+            chart_fig = None
+            if type_counts and PLOTLY_AVAILABLE:
+                try:
+                    labels = list(type_counts.keys())
+                    values = list(type_counts.values())
+                    colors = {
+                        "text": "#3b82f6",  # blue
+                        "pdf": "#ef4444",    # red
+                        "faq": "#a855f7",    # purple
+                        "link": "#06b6d4"    # cyan
+                    }
+                    chart_colors = [colors.get(label, "#6b7280") for label in labels]
+                    
+                    fig = go.Figure(data=[go.Pie(
+                        labels=labels,
+                        values=values,
+                        hole=0.4,
+                        marker=dict(colors=chart_colors),
+                        textinfo='label+percent+value',
+                        textfont=dict(size=12),
+                        hovertemplate='<b>%{label}</b><br>Count: %{value}<br>Percentage: %{percent}<extra></extra>'
+                    )])
+                    fig.update_layout(
+                        title={
+                            "text": "Document Type Distribution",
+                            "x": 0.5,
+                            "xanchor": "center",
+                            "font": {"size": 16}
+                        },
+                        height=400,
+                        showlegend=True,
+                        margin=dict(l=20, r=20, t=50, b=20)
+                    )
+                    chart_fig = fig
+                except Exception:
+                    chart_fig = None
+            
+            status = f"✅ Found {total} document(s)"
+            return status, formatted_docs, total, stats, chart_fig
+        else:
+            error_msg = f"❌ Error {response.status_code}: {response.text}"
+            return error_msg, [], 0, {}, None
+    except requests.exceptions.ConnectionError:
+        return "❌ Could not reach backend. Ensure the FastAPI server is running.", [], 0, {}, None
+    except requests.exceptions.Timeout:
+        return "⏱️ Request timed out. Please try again.", [], 0, {}, None
+    except Exception as exc:
+        return f"❌ Unexpected error: {exc}", [], 0, {}, None
+
+
+def delete_document(tenant_id: str, document_id: int):
+    """Delete a specific document by ID."""
+    if not tenant_id or not tenant_id.strip():
+        return "❗ Tenant ID is required."
+    
+    if not document_id or document_id <= 0:
+        return "❗ Invalid document ID."
+    
+    tenant_id = tenant_id.strip()
+    try:
+        response = requests.delete(
+            f"{BACKEND_BASE_URL}/rag/delete/{document_id}",
+            params={"tenant_id": tenant_id},
+            headers={"x-tenant-id": tenant_id},
+            timeout=30
+        )
+        
+        if response.status_code == 200:
+            return f"✅ Document {document_id} deleted successfully."
+        elif response.status_code == 404:
+            return f"❌ Document {document_id} not found or access denied."
+        else:
+            error_data = response.json() if response.headers.get("content-type", "").startswith("application/json") else {}
+            error_msg = error_data.get("detail", error_data.get("error", response.text))
+            return f"❌ Error {response.status_code}: {error_msg}"
+    except requests.exceptions.ConnectionError:
+        return "❌ Could not reach backend. Ensure the FastAPI server is running."
+    except requests.exceptions.Timeout:
+        return "⏱️ Request timed out. Please try again."
+    except Exception as exc:
+        return f"❌ Unexpected error: {exc}"
+
+
+def delete_all_documents(tenant_id: str):
+    """Delete all documents for a tenant."""
+    if not tenant_id or not tenant_id.strip():
+        return "❗ Tenant ID is required."
+    
+    tenant_id = tenant_id.strip()
+    try:
+        response = requests.delete(
+            f"{BACKEND_BASE_URL}/rag/delete-all",
+            params={"tenant_id": tenant_id},
+            headers={"x-tenant-id": tenant_id},
+            timeout=60
+        )
+        
+        if response.status_code == 200:
+            data = response.json()
+            deleted_count = data.get("deleted_count", 0)
+            return f"✅ Deleted {deleted_count} document(s) successfully."
+        else:
+            error_data = response.json() if response.headers.get("content-type", "").startswith("application/json") else {}
+            error_msg = error_data.get("detail", error_data.get("error", response.text))
+            return f"❌ Error {response.status_code}: {error_msg}"
+    except requests.exceptions.ConnectionError:
+        return "❌ Could not reach backend. Ensure the FastAPI server is running."
+    except requests.exceptions.Timeout:
+        return "⏱️ Request timed out. Please try again."
+    except Exception as exc:
+        return f"❌ Unexpected error: {exc}"
+
 
-    return "\n\n".join(sections) if sections else "No analytics available."
+def search_knowledge_base(tenant_id: str, query: str):
+    """Search the knowledge base using RAG semantic search."""
+    if not tenant_id or not tenant_id.strip():
+        return "❗ Tenant ID is required.", []
+    
+    if not query or not query.strip():
+        return "❗ Please enter a search query.", []
+    
+    tenant_id = tenant_id.strip()
+    query = query.strip()
+    
+    try:
+        response = requests.post(
+            f"{BACKEND_BASE_URL}/rag/search",
+            json={"tenant_id": tenant_id, "query": query, "threshold": 0.3},
+            headers={"x-tenant-id": tenant_id, "Content-Type": "application/json"},
+            timeout=30
+        )
+        
+        if response.status_code == 200:
+            data = response.json()
+            results = data.get("results", [])
+            
+            formatted_results = []
+            for idx, result in enumerate(results, 1):
+                text = result.get("text", "")
+                relevance = result.get("relevance", result.get("score", 0.0))
+                formatted_results.append({
+                    "Rank": idx,
+                    "Text": text[:300] + "..." if len(text) > 300 else text,
+                    "Relevance": f"{relevance:.3f}" if relevance else "N/A"
+                })
+            
+            status = f"✅ Found {len(results)} result(s) for '{query}'"
+            return status, formatted_results
+        else:
+            error_msg = f"❌ Error {response.status_code}: {response.text}"
+            return error_msg, []
+    except requests.exceptions.ConnectionError:
+        return "❌ Could not reach backend. Ensure the FastAPI server is running.", []
+    except requests.exceptions.Timeout:
+        return "⏱️ Request timed out. Please try again.", []
+    except Exception as exc:
+        return f"❌ Unexpected error: {exc}", []
 
 
 # Create Gradio interface
-with gr.Blocks(title="IntegraChat — MCP Autonomous Agent", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(
+    title="IntegraChat — MCP Autonomous Agent", 
+    theme=gr.themes.Soft(),
+    css="""
+    .stat-card {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 20px;
+        border-radius: 12px;
+        color: white;
+        text-align: center;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        transition: transform 0.2s;
+    }
+    .stat-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    }
+    .stat-card h3 {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        opacity: 0.9;
+    }
+    .stat-card strong {
+        font-size: 24px;
+        font-weight: bold;
+    }
+    .summary-box {
+        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+        padding: 24px;
+        border-radius: 12px;
+        border: 2px solid #374151;
+        max-height: 500px;
+        overflow-y: auto;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+        color: #f9fafb;
+    }
+    .summary-box h3, .summary-box h4 {
+        margin-top: 0;
+        margin-bottom: 12px;
+        color: #ffffff;
+        font-weight: 600;
+    }
+    .summary-box h4 {
+        color: #e5e7eb;
+        font-size: 16px;
+        margin-top: 20px;
+        margin-bottom: 10px;
+    }
+    .summary-box p {
+        color: #f3f4f6;
+        margin: 8px 0;
+        line-height: 1.6;
+    }
+    .summary-box ul {
+        margin: 10px 0;
+        padding-left: 24px;
+        color: #f3f4f6;
+    }
+    .summary-box li {
+        margin: 8px 0;
+        color: #f3f4f6;
+        line-height: 1.6;
+    }
+    .summary-box code {
+        background-color: #000000;
+        color: #00ff00;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Courier New', monospace;
+        font-size: 13px;
+        border: 1px solid #374151;
+    }
+    .summary-box hr {
+        border: none;
+        border-top: 1px solid #4b5563;
+        margin: 16px 0;
+    }
+    .summary-box strong {
+        color: #ffffff;
+    }
+    .chart-title {
+        margin-bottom: 8px;
+        margin-top: 0;
+        font-weight: 600;
+        color: #1f2937;
+        text-align: center;
+    }
+    """
+) as demo:
     gr.Markdown(
         """
         # 🤖 IntegraChat — MCP Autonomous Agent
@@ -457,7 +1021,7 @@ with gr.Blocks(title="IntegraChat — MCP Autonomous Agent", theme=gr.themes.Sof
                 metadata
             ):
                 source_type = "raw_text" if mode == "Raw Text" else "url"
-                return ingest_document(
+                result = ingest_document(
                     tenant_id=tenant_id,
                     source_type=source_type,
                     content=content,
@@ -466,6 +1030,10 @@ with gr.Blocks(title="IntegraChat — MCP Autonomous Agent", theme=gr.themes.Sof
                     doc_id=doc_id_value,
                     metadata_json=metadata
                 )
+                # Add note about refreshing Knowledge Base Library
+                if "✅" in result:
+                    result += "\n\n💡 **Tip:** Go to the 'Knowledge Base Library' tab to view your ingested documents."
+                return result
             
             ingest_doc_button.click(
                 fn=handle_ingest_document,
@@ -490,7 +1058,11 @@ with gr.Blocks(title="IntegraChat — MCP Autonomous Agent", theme=gr.themes.Sof
             ingest_file_button = gr.Button("Upload & Ingest File", visible=False)
             
             def handle_file_ingestion(tenant_id, file_obj):
-                return ingest_file(tenant_id, file_obj)
+                result = ingest_file(tenant_id, file_obj)
+                # Add note about refreshing Knowledge Base Library
+                if "✅" in result:
+                    result += "\n\n💡 **Tip:** Go to the 'Knowledge Base Library' tab to view your ingested documents."
+                return result
             
             ingest_file_button.click(
                 fn=handle_file_ingestion,
@@ -528,26 +1100,312 @@ with gr.Blocks(title="IntegraChat — MCP Autonomous Agent", theme=gr.themes.Sof
                 ]
             )
         
+        with gr.Tab("Knowledge Base Library"):
+            gr.Markdown(
+                """
+                ### 📚 Knowledge Base Library
+                View, search, and manage all ingested documents for your tenant with visual analytics.
+                
+                - **📊 Statistics:** View document counts, types, and distribution
+                - **🔍 Search:** Use semantic search to find relevant documents
+                - **🔽 Filter:** Filter documents by type (text, PDF, FAQ, link)
+                - **🗑️ Delete:** Remove individual documents or delete all at once
+                """
+            )
+            
+            # Statistics Section
+            with gr.Row():
+                kb_total_docs = gr.Markdown("### 📄 Total Documents\n**0**", elem_classes=["stat-card"])
+                kb_text_docs = gr.Markdown("### 📝 Text Documents\n**0**", elem_classes=["stat-card"])
+                kb_pdf_docs = gr.Markdown("### 📄 PDF Documents\n**0**", elem_classes=["stat-card"])
+                kb_faq_docs = gr.Markdown("### ❓ FAQ Documents\n**0**", elem_classes=["stat-card"])
+                kb_link_docs = gr.Markdown("### 🔗 Link Documents\n**0**", elem_classes=["stat-card"])
+            
+            # Chart and Search Section
+            with gr.Row():
+                with gr.Column(scale=1):
+                    kb_chart = gr.Plot(label="Document Type Distribution", show_label=True)
+                    kb_refresh_button = gr.Button("🔄 Refresh Documents", variant="primary", size="lg")
+                    kb_delete_all_button = gr.Button("🗑️ Delete All Documents", variant="stop")
+                
+                with gr.Column(scale=1):
+                    kb_search_query = gr.Textbox(
+                        label="🔍 Search Knowledge Base",
+                        placeholder="Enter a search query (e.g., 'admin', 'policy', 'FAQ')...",
+                        show_label=True
+                    )
+                    kb_search_button = gr.Button("Search", variant="primary")
+                    kb_search_status = gr.Markdown("")
+                    kb_search_results = gr.Dataframe(
+                        headers=["Rank", "Text", "Relevance"],
+                        datatype=["number", "str", "str"],
+                        interactive=False,
+                        label="Search Results",
+                        wrap=True
+                    )
+            
+            # Status and Filter Section
+            kb_status = gr.Markdown("👉 Click **Refresh Documents** to load your knowledge base.")
+            
+            with gr.Row():
+                with gr.Column(scale=2):
+                    kb_filter_type = gr.Radio(
+                        ["all", "text", "pdf", "faq", "link"],
+                        value="all",
+                        label="Filter by Type",
+                        info="Filter documents by detected type"
+                    )
+                with gr.Column(scale=1):
+                    kb_avg_length = gr.Markdown("**Average Length:** 0 characters")
+            
+            # Documents Table
+            kb_documents_table = gr.Dataframe(
+                headers=["ID", "Type", "Preview", "Length", "Created"],
+                datatype=["number", "str", "str", "number", "str"],
+                interactive=False,
+                label="Documents",
+                wrap=True
+            )
+            
+            # Delete Section
+            with gr.Row():
+                kb_delete_id = gr.Number(
+                    label="Delete Document by ID",
+                    value=None,
+                    precision=0,
+                    info="Enter document ID to delete",
+                    scale=3
+                )
+                kb_delete_button = gr.Button("Delete Document", variant="stop", scale=1)
+            
+            kb_delete_status = gr.Markdown("")
+            
+            def refresh_documents(tenant_id, filter_type="all"):
+                status, docs, total, stats, chart_fig = list_documents(tenant_id)
+                
+                # Filter documents by type if not "all"
+                if filter_type != "all" and docs:
+                    filtered_docs = [doc for doc in docs if doc.get("Type", "").lower() == filter_type.lower()]
+                    docs = filtered_docs
+                    status = f"✅ Found {len(docs)} {filter_type} document(s) (out of {total} total)"
+                
+                # Update statistics cards
+                type_counts = stats.get("types", {})
+                total_md = f"### 📄 Total Documents\n**{total}**"
+                text_md = f"### 📝 Text Documents\n**{type_counts.get('text', 0)}**"
+                pdf_md = f"### 📄 PDF Documents\n**{type_counts.get('pdf', 0)}**"
+                faq_md = f"### ❓ FAQ Documents\n**{type_counts.get('faq', 0)}**"
+                link_md = f"### 🔗 Link Documents\n**{type_counts.get('link', 0)}**"
+                avg_length_md = f"**Average Length:** {stats.get('avg_length', 0):,} characters"
+                
+                status_msg = f"{status}\n\n**Total Documents:** {total} | **Total Characters:** {stats.get('total_chars', 0):,}"
+                
+                return (
+                    status_msg, docs, total_md, text_md, pdf_md, faq_md, link_md, 
+                    avg_length_md, chart_fig
+                )
+            
+            def filter_documents(tenant_id, filter_type):
+                return refresh_documents(tenant_id, filter_type)
+            
+            def search_kb(tenant_id, query):
+                status, results = search_knowledge_base(tenant_id, query)
+                return status, results
+            
+            def delete_doc(tenant_id, doc_id):
+                if doc_id is None or doc_id <= 0:
+                    return "❗ Please enter a valid document ID.", "", "", "", "", "", "", "", None
+                result = delete_document(tenant_id, int(doc_id))
+                # Refresh document list after deletion
+                return (result, *refresh_documents(tenant_id, "all"))
+            
+            def delete_all_docs(tenant_id):
+                result = delete_all_documents(tenant_id)
+                # Refresh document list after deletion
+                return (result, *refresh_documents(tenant_id, "all"))
+            
+            kb_refresh_button.click(
+                fn=refresh_documents,
+                inputs=[tenant_id_input, kb_filter_type],
+                outputs=[
+                    kb_status, kb_documents_table, kb_total_docs, kb_text_docs, 
+                    kb_pdf_docs, kb_faq_docs, kb_link_docs, kb_avg_length, kb_chart
+                ]
+            )
+            
+            kb_filter_type.change(
+                fn=filter_documents,
+                inputs=[tenant_id_input, kb_filter_type],
+                outputs=[
+                    kb_status, kb_documents_table, kb_total_docs, kb_text_docs, 
+                    kb_pdf_docs, kb_faq_docs, kb_link_docs, kb_avg_length, kb_chart
+                ]
+            )
+            
+            kb_search_button.click(
+                fn=search_kb,
+                inputs=[tenant_id_input, kb_search_query],
+                outputs=[kb_search_status, kb_search_results]
+            )
+            
+            kb_search_query.submit(
+                fn=search_kb,
+                inputs=[tenant_id_input, kb_search_query],
+                outputs=[kb_search_status, kb_search_results]
+            )
+            
+            kb_delete_button.click(
+                fn=delete_doc,
+                inputs=[tenant_id_input, kb_delete_id],
+                outputs=[
+                    kb_delete_status, kb_status, kb_documents_table, kb_total_docs, 
+                    kb_text_docs, kb_pdf_docs, kb_faq_docs, kb_link_docs, kb_avg_length, kb_chart
+                ]
+            )
+            
+            kb_delete_all_button.click(
+                fn=delete_all_docs,
+                inputs=[tenant_id_input],
+                outputs=[
+                    kb_delete_status, kb_status, kb_documents_table, kb_total_docs, 
+                    kb_text_docs, kb_pdf_docs, kb_faq_docs, kb_link_docs, kb_avg_length, kb_chart
+                ]
+            )
+        
         with gr.Tab("Admin Analytics"):
             gr.Markdown(
                 """
-                ### 📊 Admin Analytics
-                Review tenant-level analytics generated by the IntegraChat backend.
+                # 📊 Admin Analytics Dashboard
                 
-                - **Overview:** Total queries, active users, red-flag count.
-                - **Tool Usage:** How often RAG, Web, and Admin tools are invoked.
-                - **Red Flags:** Recent governance events for this tenant.
-                - **Activity:** Summary of tenant activity metrics.
+                Comprehensive tenant-level analytics with visual insights, performance metrics, and detailed tool usage statistics.
                 """
             )
             
-            analytics_refresh = gr.Button("Fetch Analytics Snapshot", variant="primary")
-            analytics_output = gr.Markdown("👉 Click the button to load analytics for the current tenant.")
+            # Refresh Button at Top
+            with gr.Row():
+                analytics_refresh = gr.Button("🔄 Fetch Analytics Snapshot", variant="primary", size="lg")
+                gr.Markdown("")
+            
+            # Statistics Cards
+            gr.Markdown("### 📈 Key Metrics")
+            with gr.Row():
+                analytics_total_queries = gr.Markdown("### 📊 Total Queries\n**0**", elem_classes=["stat-card"])
+                analytics_active_users = gr.Markdown("### 👥 Active Users\n**0**", elem_classes=["stat-card"])
+                analytics_redflags = gr.Markdown("### 🚩 Red Flags\n**0**", elem_classes=["stat-card"])
+                analytics_rag_searches = gr.Markdown("### 🔍 RAG Searches\n**0**", elem_classes=["stat-card"])
+            
+            # Charts Section
+            gr.Markdown("### 📊 Performance Charts")
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("#### 📈 Tool Usage Count", elem_classes=["chart-title"])
+                    analytics_tool_chart = gr.Plot(label="", show_label=False)
+                with gr.Column(scale=1):
+                    gr.Markdown("#### ⚡ Average Tool Latency", elem_classes=["chart-title"])
+                    analytics_latency_chart = gr.Plot(label="", show_label=False)
+            
+            # RAG Quality and Summary Section
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("#### 🔍 RAG Quality Metrics", elem_classes=["chart-title"])
+                    analytics_rag_chart = gr.Plot(label="", show_label=False)
+                
+                with gr.Column(scale=1):
+                    gr.Markdown("### 📋 Analytics Summary")
+                    analytics_summary = gr.Markdown(
+                        "👉 Click **Fetch Analytics Snapshot** to load data.",
+                        elem_classes=["summary-box"]
+                    )
+            
+            # Tool Usage Details Table
+            gr.Markdown("### 🔧 Detailed Tool Usage")
+            analytics_tool_table = gr.Dataframe(
+                headers=["Tool", "Count", "Avg Latency (ms)", "Success", "Errors", "Total Tokens"],
+                datatype=["str", "number", "number", "number", "number", "number"],
+                interactive=False,
+                label="",
+                wrap=True
+            )
+            
+            analytics_error = gr.Markdown("", visible=False)
+            
+            def format_analytics(tenant_id):
+                summary, tool_usage, tool_chart, latency_chart, rag_chart, error = fetch_admin_analytics(tenant_id)
+                
+                if error:
+                    return (
+                        error, "", "", "", "", None, None, None, []
+                    )
+                
+                # Extract overview data - fetch_admin_analytics already fetched it, but we need it again for cards
+                overview_data = {}
+                try:
+                    resp = requests.get(
+                        f"{BACKEND_BASE_URL}/analytics/overview",
+                        headers={"x-tenant-id": tenant_id},
+                        timeout=30
+                    )
+                    if resp.status_code == 200:
+                        data = resp.json()
+                        # The API returns {"overview": {...}} or direct overview object
+                        overview_data = data.get("overview", data) if isinstance(data, dict) else {}
+                        # Debug: print to see what we're getting
+                        print(f"DEBUG: Overview data keys: {overview_data.keys() if isinstance(overview_data, dict) else 'Not a dict'}")
+                except Exception as e:
+                    print(f"Error fetching overview: {e}")
+                    pass
+                
+                # Extract values with proper fallbacks - handle both nested and flat structures
+                if isinstance(overview_data, dict):
+                    total_queries = overview_data.get("total_queries", 0)
+                    active_users = overview_data.get("active_users", 0)
+                    redflag_count = overview_data.get("redflag_count", 0)
+                    rag_quality = overview_data.get("rag_quality", {})
+                    rag_searches = rag_quality.get("total_searches", 0) if isinstance(rag_quality, dict) else 0
+                else:
+                    total_queries = 0
+                    active_users = 0
+                    redflag_count = 0
+                    rag_quality = {}
+                    rag_searches = 0
+                
+                # Format statistics cards
+                queries_md = f"### 📊 Total Queries\n**{total_queries}**"
+                users_md = f"### 👥 Active Users\n**{active_users}**"
+                redflags_md = f"### 🚩 Red Flags\n**{redflag_count}**"
+                rag_md = f"### 🔍 RAG Searches\n**{rag_searches}**"
+                
+                # Format tool usage table
+                tool_table_data = []
+                for tool_name, stats in tool_usage.items():
+                    tool_table_data.append({
+                        "Tool": tool_name.replace(".", " ").title(),
+                        "Count": stats.get("count", 0),
+                        "Avg Latency (ms)": round(stats.get("avg_latency_ms", 0), 2),
+                        "Success": stats.get("success_count", 0),
+                        "Errors": stats.get("error_count", 0),
+                        "Total Tokens": stats.get("total_tokens", 0)
+                    })
+                
+                return (
+                    summary, queries_md, users_md, redflags_md, rag_md,
+                    tool_chart, latency_chart, rag_chart, tool_table_data
+                )
             
             analytics_refresh.click(
-                fn=fetch_admin_analytics,
+                fn=format_analytics,
                 inputs=[tenant_id_input],
-                outputs=analytics_output
+                outputs=[
+                    analytics_summary,
+                    analytics_total_queries,
+                    analytics_active_users,
+                    analytics_redflags,
+                    analytics_rag_searches,
+                    analytics_tool_chart,
+                    analytics_latency_chart,
+                    analytics_rag_chart,
+                    analytics_tool_table
+                ]
             )
         
         with gr.Tab("Admin Rules & Compliance"):

backend/README.md

@@ -116,6 +116,28 @@ Use the helper scripts in the repo root when validating backend changes:
 - **Enhanced tool selection** automatically triggers RAG for admin questions, fact lookups ("who is", "what is"), and internal knowledge queries
 - **Response unwrapping** in MCP client ensures orchestrator receives properly formatted results for tool scoring and prompt building
 
+### UI Enhancements (app.py)
+- **Knowledge Base Library Tab**: 
+  - Statistics cards showing document counts by type
+  - Interactive Plotly pie chart for document type distribution
+  - Semantic search with relevance scoring
+  - Type filtering (text, PDF, FAQ, link)
+  - Document management with preview and deletion
+  - Auto-refresh after operations
+
+- **Admin Analytics Tab**:
+  - Statistics cards for key metrics (queries, users, red flags, RAG searches)
+  - Interactive Plotly bar charts for tool usage, latency, and RAG quality
+  - Detailed tool usage table with performance metrics
+  - Formatted summary with dark theme styling
+  - Real-time data fetching and visualization
+
+- **Modern UI/UX**:
+  - Dark theme with white text for better readability
+  - Custom CSS styling for cards and charts
+  - Improved error handling and status messages
+  - Responsive layout with proper component scaling
+
 ## Environment Variables (excerpt)
 
 Defined in `env.example`:

frontend/README.md

@@ -10,6 +10,8 @@ It provides a polished operator console with:
 - **Document ingestion UI** for uploading PDF, DOCX, TXT files or raw text
 - **Feature grid** showcasing platform capabilities
 
+**Note:** IntegraChat also includes a Gradio-based UI (`app.py`) with interactive visualizations, statistics cards, and Plotly charts. See the root `README.md` for details on running the Gradio interface.
+
 ## Running Locally
 
 ```bash

requirements.txt

@@ -13,4 +13,5 @@ PyPDF2
 python-docx
 python-multipart
 gradio>=4.0.0
-requests>=2.31.0
+requests>=2.31.0
+plotly>=5.0.0