Refactor: Enhanced UI (Tabs/Explorer) and Modular Components

app.py

@@ -18,337 +18,8 @@ st.set_page_config(page_title="Code Chatbot", page_icon="💻", layout="wide", i
 logging.basicConfig(level=logging.INFO)
 
 # --- Custom CSS for Premium Slate UI ---
-import base64
-def get_base64_logo():
-    try:
-        with open("assets/logo.png", "rb") as f:
-            data = f.read()
-        return base64.b64encode(data).decode()
-    except:
-        return ""
-
-logo_b64 = get_base64_logo()
-
-css = """
-<style>
-    /* -------------------------------------------------------------------------- */
-    /*                               CORE ANIMATIONS                              */
-    /* -------------------------------------------------------------------------- */
-    @keyframes gradient-xy {
-        0% { background-position: 0% 50%; }
-        50% { background-position: 100% 50%; }
-        100% { background-position: 0% 50%; }
-    }
-    
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-
-    /* -------------------------------------------------------------------------- */
-    /*                            GLOBAL THEME ENGINE                             */
-    /* -------------------------------------------------------------------------- */
-    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
-    
-    :root {
-        --primary-glow: 56, 189, 248; /* Sky Blue */
-        --secondary-glow: 139, 92, 246; /* Violet */
-        --bg-deep: #050608;
-        --glass-border: rgba(255, 255, 255, 0.08);
-        --glass-bg: rgba(15, 23, 42, 0.6);
-    }
-
-    .stApp {
-        background: radial-gradient(circle at 10% 20%, rgba(13, 17, 28, 1) 0%, rgba(5, 6, 8, 1) 90%);
-        font-family: 'Outfit', sans-serif;
-    }
-
-    /* BACKGROUND WATERMARK */
-    .stApp::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 70vh; /* Slightly smaller to fit nicely */
-        height: 70vh;
-        background-image: url("data:image/png;base64,LOGO_BASE64_PLACEHOLDER");
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        opacity: 0.08; /* Subtle but visible color */
-        pointer-events: none;
-        z-index: 0;
-        border-radius: 50%; /* Force Circular Shape */
-    }
-    
-    /* Sidebar Logo - Standard Shape */
-    [data-testid="stSidebar"] img {
-        border-radius: 12px; /* Slight rounded corners for better aesthetics, but not circular */
-        box-shadow: 0 0 20px rgba(56, 189, 248, 0.3); /* Neon Glow */
-        border: 1px solid rgba(56, 189, 248, 0.5);
-    }
-    
-    /* Global Text Override */
-    p, div, span, label, h1, h2, h3, h4, h5, h6, .stMarkdown {
-        color: #E2E8F0 !important;
-        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
-    }
-
-    /* -------------------------------------------------------------------------- */
-    /*                                   SIDEBAR                                  */
-    /* -------------------------------------------------------------------------- */
-    section[data-testid="stSidebar"] {
-        background: rgba(11, 12, 16, 0.85);
-        backdrop-filter: blur(20px);
-        -webkit-backdrop-filter: blur(20px);
-        border-right: 1px solid var(--glass-border);
-        box-shadow: 5px 0 30px rgba(0,0,0,0.5);
-    }
-    
-    section[data-testid="stSidebar"] h1 {
-        background: linear-gradient(to right, #38BDF8, #8B5CF6);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        font-weight: 800;
-        font-size: 2rem !important;
-        padding-bottom: 0.5rem;
-    }
-
-    /* -------------------------------------------------------------------------- */
-    /*                                INPUTS & FORMS                              */
-    /* -------------------------------------------------------------------------- */
-    .stTextInput input, .stSelectbox div[data-baseweb="select"], .stTextArea textarea {
-        background-color: rgba(30, 41, 59, 0.5) !important;
-        border: 1px solid var(--glass-border) !important;
-        color: #F8FAFC !important;
-        border-radius: 12px !important;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        backdrop-filter: blur(10px);
-    }
-    
-    .stTextInput input:focus, .stTextArea textarea:focus, .stSelectbox div[data-baseweb="select"]:focus-within {
-        border-color: #38BDF8 !important;
-        box-shadow: 0 0 15px rgba(var(--primary-glow), 0.3);
-        transform: translateY(-1px);
-    }
-
-    /* -------------------------------------------------------------------------- */
-    /*                                MEDIA UPLOADS                               */
-    /* -------------------------------------------------------------------------- */
-    [data-testid="stFileUploader"] {
-        background-color: rgba(30, 41, 59, 0.4);
-        border: 1px dashed var(--glass-border);
-        border-radius: 12px;
-        padding: 20px;
-    }
-    
-    /* FORCE TEXT COLOR FOR FILE UPLOADER */
-    [data-testid="stFileUploader"] section > div, 
-    [data-testid="stFileUploader"] section > div > span,
-    [data-testid="stFileUploader"] section > div > small,
-    [data-testid="stFileUploader"] div[data-testid="stMarkdownContainer"] p {
-        color: #E2E8F0 !important; /* Bright Slate */
-        opacity: 1 !important;
-        -webkit-text-fill-color: #E2E8F0 !important;
-    }
-
-    [data-testid="stFileUploader"] button {
-        background: rgba(56, 189, 248, 0.2);
-        color: #38BDF8 !important;
-        border: 1px solid #38BDF8;
-    }
-
-    /* -------------------------------------------------------------------------- */
-    /*                             DROPDOWN & SELECT                              */
-    /* -------------------------------------------------------------------------- */
-    
-    /* 1. The Box Itself */
-    .stSelectbox div[data-baseweb="select"] {
-        background-color: #1E293B !important; /* Solid Slate-800 for contrast */
-        border: 1px solid #475569 !important;
-        color: white !important;
-    }
-
-    /* 2. The Text INSIDE the Box (Critical Fix) */
-    .stSelectbox div[data-baseweb="select"] div[data-testid="stMarkdownContainer"] > p {
-        color: #F8FAFC !important; /* White */
-        font-weight: 500 !important;
-    }
-    
-    /* 3. The Dropdown Menu (Popup) */
-    div[data-baseweb="popover"], div[data-baseweb="menu"], ul[data-baseweb="menu"] {
-        background-color: #0F172A !important;
-        border: 1px solid #334155 !important;
-    }
-    
-    /* 4. Options in the Menu */
-    li[data-baseweb="option"], div[data-baseweb="option"] {
-        color: #CBD5E1 !important; /* Light Slate */
-    }
-    
-    /* 5. Start/Icons in Menu */
-    li[data-baseweb="option"] *, div[data-baseweb="option"] * {
-        color: #CBD5E1 !important; 
-    }
-
-    /* 6. Selected/Hovered Option */
-    li[data-baseweb="option"][aria-selected="true"],
-    li[data-baseweb="option"]:hover,
-    div[data-baseweb="option"]:hover {
-        background-color: #38BDF8 !important;
-        color: white !important;
-    }
-    
-    /* 7. SVG Arrow Icon */
-    .stSelectbox svg {
-        fill: #94A3B8 !important;
-    }
-
-    /* -------------------------------------------------------------------------- */
-    /*                                   BUTTONS                                  */
-    /* -------------------------------------------------------------------------- */
-    .stButton button {
-        background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%);
-        color: white !important;
-        border: none;
-        border-radius: 12px;
-        padding: 0.75rem 1.5rem;
-        font-weight: 600;
-        letter-spacing: 0.5px;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
-        text-transform: uppercase;
-        font-size: 0.85rem;
-    }
-    
-    .stButton button:hover {
-        transform: translateY(-2px) scale(1.02);
-        box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
-    }
-    .stButton button:active {
-        transform: translateY(0);
-    }
-
-    /* -------------------------------------------------------------------------- */
-    /*                                CHAT BUBBLES                                */
-    /* -------------------------------------------------------------------------- */
-    .stChatMessage {
-        background: var(--glass-bg);
-        border: 1px solid var(--glass-border);
-        border-radius: 16px;
-        backdrop-filter: blur(10px);
-        margin-bottom: 1rem;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        animation: fadeInUp 0.4s ease-out forwards;
-    }
-    
-    .stChatMessage[data-testid="stChatMessage"]:nth-child(even) {
-        border-left: 3px solid #38BDF8;
-        background: linear-gradient(90deg, rgba(56, 189, 248, 0.05) 0%, rgba(15, 23, 42, 0.6) 100%);
-    }
-    
-    /* -------------------------------------------------------------------------- */
-    /*                                CODE & CHIPS                                */
-    /* -------------------------------------------------------------------------- */
-    code {
-        font-family: 'JetBrains Mono', monospace !important;
-        background: #0B0E14 !important;
-        border: 1px solid #1E293B;
-        border-radius: 6px;
-        color: #7DD3FC !important;
-    }
-    
-    /* Source Chips with Glow */
-    .source-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-bottom: 16px;
-        padding-bottom: 12px;
-        border-bottom: 1px solid rgba(255,255,255,0.05);
-    }
-    
-    .source-chip {
-        background: rgba(30, 41, 59, 0.6);
-        border: 1px solid rgba(56, 189, 248, 0.2);
-        border-radius: 20px;
-        padding: 6px 14px;
-        font-size: 0.8rem;
-        color: #94A3B8;
-        display: flex;
-        align-items: center;
-        transition: all 0.3s ease;
-        cursor: pointer;
-        backdrop-filter: blur(5px);
-    }
-    
-    .source-chip:hover {
-        background: rgba(56, 189, 248, 0.15);
-        border-color: #38BDF8;
-        color: #38BDF8;
-        box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
-        transform: translateY(-1px);
-    }
-    
-    .source-icon {
-        margin-right: 8px;
-        opacity: 0.7;
-    }
-    
-    /* Hiding Streamlit Branding */
-    #MainMenu {visibility: hidden;}
-    footer {visibility: hidden;}
-    header {visibility: hidden;}
-    
-    /* -------------------------------------------------------------------------- */
-    /*                         IDE-STYLE PANEL LAYOUT                            */
-    /* -------------------------------------------------------------------------- */
-    
-    /* Main content area - fixed height */
-    .main .block-container {
-        max-height: calc(100vh - 80px);
-        overflow: hidden;
-        padding-top: 1rem;
-    }
-    
-    /* Make columns scrollable independently */
-    [data-testid="column"] {
-        max-height: calc(100vh - 120px);
-        overflow-y: auto;
-        overflow-x: hidden;
-        scrollbar-width: thin;
-        scrollbar-color: #475569 transparent;
-    }
-    
-    /* Custom scrollbar for webkit browsers */
-    [data-testid="column"]::-webkit-scrollbar {
-        width: 6px;
-    }
-    
-    [data-testid="column"]::-webkit-scrollbar-track {
-        background: transparent;
-    }
-    
-    [data-testid="column"]::-webkit-scrollbar-thumb {
-        background: #475569;
-        border-radius: 3px;
-    }
-    
-    [data-testid="column"]::-webkit-scrollbar-thumb:hover {
-        background: #64748b;
-    }
-    
-    /* Code viewer specific - scrollable code block */
-    .stCode {
-        max-height: 60vh;
-        overflow-y: auto !important;
-    }
-    
-</style>
-"""
-
-st.markdown(css.replace("LOGO_BASE64_PLACEHOLDER", logo_b64), unsafe_allow_html=True)
+from components import style
+style.apply_custom_css()
 
 # Session State
 if "messages" not in st.session_state:
@@ -358,132 +29,18 @@ if "chat_engine" not in st.session_state:
 if "processed_files" not in st.session_state:
     st.session_state.processed_files = False
 
-# Sidebar
-with st.sidebar:
-    # Logo
-    if os.path.exists("assets/logo.png"):
-        st.image("assets/logo.png", use_column_width=True)
-    
-    st.title("🔧 Configuration")
-    
-    # Provider Selection (Gemini & Groq only as requested)
-    provider = st.radio("LLM Provider", ["gemini", "groq"])
-    
-    # Model Selection for Gemini
-    gemini_model = None
-    if provider == "gemini":
-        gemini_model = st.selectbox(
-            "Gemini Model",
-            [
-                "gemini-2.5-flash",  # This one was working!
-                "gemini-2.0-flash",
-                "gemini-1.5-pro",
-            ],
-            index=0,  # Default to 2.5 Flash (confirmed working)
-            help="""**Gemini 2.5 Flash** (Recommended): Latest, confirmed working
-**Gemini 2.0 Flash**: Newer model
-**Gemini 1.5 Pro**: More stable for complex tasks"""
-        )
-        st.caption(f"✨ Using {gemini_model}")
-    
-    # Agentic Mode Toggle
-    use_agent = st.checkbox("Enable Agentic Reasoning 🤖", value=True, help="Allows the AI to browse files and reason multiple steps.")
-    
-    # Determine Env Key Name
-    if provider == "gemini":
-        env_key_name = "GOOGLE_API_KEY"
-    elif provider == "groq":
-        env_key_name = "GROQ_API_KEY"
-        
-    env_key = os.getenv(env_key_name)
-    api_key = env_key
-    
-    if env_key:
-        st.success(f"✅ {env_key_name} loaded from environment.")
-    else:
-        # API Key Input
-        api_key_label = f"{provider.capitalize()} API Key"
-        api_key_input = st.text_input(api_key_label, type="password")
-        if api_key_input:
-            api_key = api_key_input
-            os.environ[env_key_name] = api_key
-
-    # Vector Database Selection
-    vector_db_type = st.selectbox("Vector Database", ["faiss", "chroma", "qdrant"])
-    
-    if vector_db_type == "qdrant":
-        st.caption("☁️ connect to a hosted Qdrant cluster")
-        qdrant_url = st.text_input("Qdrant URL", placeholder="https://xyz.qdrant.io:6333", value=os.getenv("QDRANT_URL", ""))
-        qdrant_key = st.text_input("Qdrant API Key", type="password", value=os.getenv("QDRANT_API_KEY", ""))
-        
-        if qdrant_url:
-            os.environ["QDRANT_URL"] = qdrant_url
-        if qdrant_key:
-            os.environ["QDRANT_API_KEY"] = qdrant_key
-
-    # For Groq, we need an embedding provider
-    # Use LOCAL embeddings by default - NO RATE LIMITS!
-    embedding_provider = "local"  # Use local HuggingFace embeddings
-    embedding_api_key = api_key
-    
-    if provider == "groq":
-        st.info(f"ℹ️ {provider.capitalize()} is used for Chat. Using LOCAL embeddings (no rate limits!).")
-        embedding_provider = "local"  # Use local embeddings for Groq too
-        
-        # Check Embedding Key for Gemini (not needed for local)
-        emb_env_key = os.getenv("GOOGLE_API_KEY")
-        if not emb_env_key and provider != "gemini":
-             embedding_api_key = emb_env_key  # Optional now
-        else:
-             embedding_api_key = emb_env_key
-
-    st.divider()
-    
-    # Ingestion moved to main area
-
-    if st.session_state.processed_files:
-        st.success(f"✅ Codebase Ready ({provider}) + AST 🧠")
-        
-        # Show usage statistics if available
-        if st.session_state.chat_engine:
-            try:
-                from code_chatbot.rate_limiter import get_rate_limiter
-                limiter = get_rate_limiter(provider)
-                stats = limiter.get_usage_stats()
-                
-                st.divider()
-                st.subheader("📊 API Usage")
-                col1, col2 = st.columns(2)
-                with col1:
-                    st.metric("Requests/min", stats['requests_last_minute'])
-                    st.metric("Cache Hits", stats['cache_size'])
-                with col2:
-                    st.metric("Total Tokens", f"{stats['total_tokens']:,}")
-                    rpm_limit = 15 if provider == "gemini" else 30
-                    usage_pct = (stats['requests_last_minute'] / rpm_limit) * 100
-                    st.progress(usage_pct / 100, text=f"{usage_pct:.0f}% of limit")
-            except Exception as e:
-                pass  # Stats are optional
-        
-        st.divider()
-        if st.button("🗑️ Clear Chat History"):
-            st.session_state.messages = []
-            st.rerun()
-        
-        if st.button("Reset"):
-            # Clear disk data for a true reset
-            try:
-                if os.path.exists("chroma_db"):
-                    shutil.rmtree("chroma_db")
-                if os.path.exists("data"):
-                    shutil.rmtree("data")
-            except Exception as e:
-                st.error(f"Error clearing data: {e}")
-                
-            st.session_state.processed_files = False
-            st.session_state.messages = []
-            st.session_state.chat_engine = None
-            st.rerun()
+# --- Sidebar Configuration ---
+from components import sidebar
+config = sidebar.render_sidebar()
+
+# Extract config values for easy access in main app
+provider = config["provider"]
+api_key = config["api_key"]
+gemini_model = config["gemini_model"]
+use_agent = config["use_agent"]
+vector_db_type = config["vector_db_type"]
+embedding_provider = config["embedding_provider"]
+embedding_api_key = config["embedding_api_key"]
 
 # ============================================================================
 # MAIN 3-PANEL LAYOUT

code_chatbot/db_connection.py

@@ -0,0 +1,117 @@
+import os
+import shutil
+import logging
+from typing import Optional
+
+logger = logging.getLogger(__name__)
+
+# Vector database fallback priority order
+VECTOR_DB_FALLBACK_ORDER = ["chroma", "faiss"]
+
+# Track which vector DB is currently active (for automatic fallback)
+_active_vector_db = {"type": "chroma", "fallback_count": 0}
+
+def get_active_vector_db() -> str:
+    """Get the currently active vector database type."""
+    return _active_vector_db["type"]
+
+def set_active_vector_db(db_type: str):
+    """Set the active vector database type."""
+    _active_vector_db["type"] = db_type
+    logger.info(f"Active vector database set to: {db_type}")
+
+def get_next_fallback_db(current_db: str) -> Optional[str]:
+    """Get the next fallback vector database in the priority order."""
+    try:
+        current_idx = VECTOR_DB_FALLBACK_ORDER.index(current_db)
+        if current_idx + 1 < len(VECTOR_DB_FALLBACK_ORDER):
+            return VECTOR_DB_FALLBACK_ORDER[current_idx + 1]
+    except ValueError:
+        pass
+    return None
+
+# Global ChromaDB client cache to avoid "different settings" error
+_chroma_clients = {}
+
+def reset_chroma_clients():
+    """Reset all cached ChromaDB clients. Call when database corruption is detected."""
+    global _chroma_clients
+    _chroma_clients = {}
+    logger.info("Reset ChromaDB client cache")
+
+def get_chroma_client(persist_directory: str):
+    """Get or create a shared ChromaDB client for a given path.
+    
+    Includes automatic recovery for common ChromaDB errors:
+    - tenant default_tenant connection errors
+    - Database corruption
+    - Version mismatch issues
+    """
+    global _chroma_clients
+    
+    # Ensure directory exists
+    os.makedirs(persist_directory, exist_ok=True)
+    
+    if persist_directory not in _chroma_clients:
+        import chromadb
+        from chromadb.config import Settings
+        
+        def create_client():
+            """Helper to create a new ChromaDB client."""
+            return chromadb.PersistentClient(
+                path=persist_directory,
+                settings=Settings(
+                    anonymized_telemetry=False,
+                    allow_reset=True
+                )
+            )
+        
+        def clear_and_recreate():
+            """Clear corrupted database and create fresh client."""
+            logger.warning(f"Clearing corrupted ChromaDB at {persist_directory} and recreating...")
+            if os.path.exists(persist_directory):
+                shutil.rmtree(persist_directory)
+            os.makedirs(persist_directory, exist_ok=True)
+            return create_client()
+        
+        def is_corruption_error(error: Exception) -> bool:
+            """Check if error indicates database corruption."""
+            error_str = str(error).lower()
+            corruption_indicators = [
+                'tenant',           # "Could not connect to tenant default_tenant"
+                'default_tenant',
+                'sqlite',           # SQLite database issues
+                'database',
+                'corrupt',
+                'no such table',
+                'disk i/o error',
+                'malformed',
+                'locked',
+            ]
+            return any(indicator in error_str for indicator in corruption_indicators)
+        
+        try:
+            _chroma_clients[persist_directory] = create_client()
+            # Verify the client works by attempting a simple operation
+            try:
+                _chroma_clients[persist_directory].heartbeat()
+            except Exception as verify_error:
+                if is_corruption_error(verify_error):
+                    logger.error(f"ChromaDB verification failed: {verify_error}")
+                    del _chroma_clients[persist_directory]
+                    _chroma_clients[persist_directory] = clear_and_recreate()
+                else:
+                    raise
+        except Exception as e:
+            logger.error(f"Failed to create ChromaDB client: {e}")
+            if is_corruption_error(e):
+                _chroma_clients[persist_directory] = clear_and_recreate()
+            else:
+                # For non-corruption errors, still try to recover
+                try:
+                    _chroma_clients[persist_directory] = clear_and_recreate()
+                except Exception as recovery_error:
+                    logger.error(f"Recovery also failed: {recovery_error}")
+                    raise recovery_error
+    
+    return _chroma_clients[persist_directory]

code_chatbot/indexer.py

@@ -13,125 +13,13 @@ import logging
 
 logger = logging.getLogger(__name__)
 
-# Vector database fallback priority order
-# When primary DB fails, automatically try the next in list
-VECTOR_DB_FALLBACK_ORDER = ["chroma", "faiss"]
-
-# Track which vector DB is currently active (for automatic fallback)
-_active_vector_db = {"type": "chroma", "fallback_count": 0}
-
-def get_active_vector_db() -> str:
-    """Get the currently active vector database type."""
-    return _active_vector_db["type"]
-
-def set_active_vector_db(db_type: str):
-    """Set the active vector database type."""
-    _active_vector_db["type"] = db_type
-    logger.info(f"Active vector database set to: {db_type}")
-
-def get_next_fallback_db(current_db: str) -> Optional[str]:
-    """Get the next fallback vector database in the priority order.
-    
-    Args:
-        current_db: Current vector database type that failed
-        
-    Returns:
-        Next vector database type to try, or None if no more fallbacks
-    """
-    try:
-        current_idx = VECTOR_DB_FALLBACK_ORDER.index(current_db)
-        if current_idx + 1 < len(VECTOR_DB_FALLBACK_ORDER):
-            return VECTOR_DB_FALLBACK_ORDER[current_idx + 1]
-    except ValueError:
-        pass
-    return None
-
-# Global ChromaDB client cache to avoid "different settings" error
-_chroma_clients = {}
-
-def reset_chroma_clients():
-    """Reset all cached ChromaDB clients. Call when database corruption is detected."""
-    global _chroma_clients
-    _chroma_clients = {}
-    logger.info("Reset ChromaDB client cache")
-
-def get_chroma_client(persist_directory: str):
-    """Get or create a shared ChromaDB client for a given path.
-    
-    Includes automatic recovery for common ChromaDB errors:
-    - tenant default_tenant connection errors
-    - Database corruption
-    - Version mismatch issues
-    """
-    global _chroma_clients
-    
-    # Ensure directory exists
-    os.makedirs(persist_directory, exist_ok=True)
-    
-    if persist_directory not in _chroma_clients:
-        import chromadb
-        from chromadb.config import Settings
-        
-        def create_client():
-            """Helper to create a new ChromaDB client."""
-            return chromadb.PersistentClient(
-                path=persist_directory,
-                settings=Settings(
-                    anonymized_telemetry=False,
-                    allow_reset=True
-                )
-            )
-        
-        def clear_and_recreate():
-            """Clear corrupted database and create fresh client."""
-            logger.warning(f"Clearing corrupted ChromaDB at {persist_directory} and recreating...")
-            import shutil
-            if os.path.exists(persist_directory):
-                shutil.rmtree(persist_directory)
-            os.makedirs(persist_directory, exist_ok=True)
-            return create_client()
-        
-        def is_corruption_error(error: Exception) -> bool:
-            """Check if error indicates database corruption."""
-            error_str = str(error).lower()
-            corruption_indicators = [
-                'tenant',           # "Could not connect to tenant default_tenant"
-                'default_tenant',
-                'sqlite',           # SQLite database issues
-                'database',
-                'corrupt',
-                'no such table',
-                'disk i/o error',
-                'malformed',
-                'locked',
-            ]
-            return any(indicator in error_str for indicator in corruption_indicators)
-        
-        try:
-            _chroma_clients[persist_directory] = create_client()
-            # Verify the client works by attempting a simple operation
-            try:
-                _chroma_clients[persist_directory].heartbeat()
-            except Exception as verify_error:
-                if is_corruption_error(verify_error):
-                    logger.error(f"ChromaDB verification failed: {verify_error}")
-                    del _chroma_clients[persist_directory]
-                    _chroma_clients[persist_directory] = clear_and_recreate()
-                else:
-                    raise
-        except Exception as e:
-            logger.error(f"Failed to create ChromaDB client: {e}")
-            if is_corruption_error(e):
-                _chroma_clients[persist_directory] = clear_and_recreate()
-            else:
-                # For non-corruption errors, still try to recover
-                try:
-                    _chroma_clients[persist_directory] = clear_and_recreate()
-                except Exception as recovery_error:
-                    logger.error(f"Recovery also failed: {recovery_error}")
-                    raise recovery_error
-    
-    return _chroma_clients[persist_directory]
+from code_chatbot.db_connection import (
+    get_chroma_client, 
+    reset_chroma_clients, 
+    set_active_vector_db, 
+    get_next_fallback_db,
+    VECTOR_DB_FALLBACK_ORDER
+)
 
 
 class Indexer:

code_chatbot/prompts.py

@@ -33,7 +33,7 @@ SYSTEM_PROMPT_AGENT = """You are an expert software engineer pair-programming wi
   - Briefly explain *why* it fits the existing patterns.
 
 **CRITICAL RULES**:
-1. **NO HTML**: Use only Markdown.
+1. **NO HTML**: Use only Markdown. Do NOT generate HTML tags like <div> or <span>. Do NOT render "source chips".
 2. **NO HALLUCINATION**: Only cite files that exist in the retrieved context.
 3. **NO LECTURES**: Don't explain general programming concepts unless asked.
 """
@@ -56,7 +56,7 @@ SYSTEM_PROMPT_LINEAR_RAG = """You are an expert pair-programmer analyzing the co
 
 **CRITICAL RULES**:
 - **NO HALLUCINATION**: Only use code from the context above.
-- **NO HTML**: Use standard Markdown only.
+- **NO HTML**: Use standard Markdown only. Do NOT generate <div> tags.
 - **Keep it Short**: If a 2-sentence answer suffices, do not write a paragraph.
 """
 

code_chatbot/rag.py

@@ -319,6 +319,15 @@ class ChatEngine:
                     else:
                         answer = raw_content
                     
+                    # CLEANING: Remove hallucinated source chips
+                    import re
+                    # Remove the specific div block structure
+                    answer = re.sub(r'<div class="source-chip">.*?</div>\s*</div>', '', answer, flags=re.DOTALL)
+                    # Remove standalone chips if any remain
+                    answer = re.sub(r'<div class="source-chip">.*?</div>', '', answer, flags=re.DOTALL)
+                    # Clean up leading whitespace/newlines left behind
+                    answer = answer.strip()
+
                     # Update history
                     self.chat_history.append(HumanMessage(content=question))
                     self.chat_history.append(AIMessage(content=answer))

components/file_explorer.py

@@ -56,33 +56,7 @@ def render_file_tree(indexed_files: List[str], base_path: str = ""):
         return
     
     # Custom CSS for tree styling
-    st.markdown("""
-    <style>
-    .tree-item {
-        padding: 2px 0;
-        cursor: pointer;
-        font-size: 13px;
-        font-family: 'Segoe UI', sans-serif;
-        color: #ccc;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .tree-item:hover {
-        background: rgba(255,255,255,0.1);
-    }
-    .tree-dir {
-        font-weight: 500;
-    }
-    .tree-file {
-        font-weight: 400;
-    }
-    .tree-selected {
-        background: rgba(56, 189, 248, 0.2) !important;
-        color: #38bdf8;
-    }
-    </style>
-    """, unsafe_allow_html=True)
+    # Styles are now handled globally in components/style.py for modularity
     
     st.markdown(f"**📁 Files** ({len(indexed_files)})")
     
@@ -136,7 +110,7 @@ def render_tree_items(tree: Dict, depth: int):
             
             # Render children if expanded
             if is_expanded:
-                children = {k: v for k, v in node.items() if not k.startswith("_")}
+                children = node.get("_children", {})
                 render_tree_items(children, depth + 1)
 
 

components/sidebar.py

@@ -0,0 +1,158 @@
+import streamlit as st
+import os
+import shutil
+from dotenv import load_dotenv
+
+# Load Env
+load_dotenv()
+
+def render_sidebar():
+    """
+    Renders the sidebar configuration panel.
+    Returns:
+        dict: A dictionary containing the configuration settings:
+            - api_key (str)
+            - provider (str)
+            - gemini_model (str)
+            - use_agent (bool)
+            - vector_db_type (str)
+            - embedding_provider (str)
+            - embedding_api_key (str)
+    """
+    config = {}
+    
+    with st.sidebar:
+        # Logo
+        if os.path.exists("assets/logo.png"):
+            st.image("assets/logo.png", use_column_width=True)
+        
+        st.title("🔧 Configuration")
+        
+        # Provider Selection (Gemini & Groq only as requested)
+        provider = st.radio("LLM Provider", ["gemini", "groq"])
+        config["provider"] = provider
+        
+        # Model Selection for Gemini
+        gemini_model = None
+        if provider == "gemini":
+            gemini_model = st.selectbox(
+                "Gemini Model",
+                [
+                    "gemini-2.5-flash",  # This one was working!
+                    "gemini-2.0-flash",
+                    "gemini-1.5-pro",
+                ],
+                index=0,  # Default to 2.5 Flash (confirmed working)
+                help="""**Gemini 2.5 Flash** (Recommended): Latest, confirmed working
+**Gemini 2.0 Flash**: Newer model
+**Gemini 1.5 Pro**: More stable for complex tasks"""
+            )
+            st.caption(f"✨ Using {gemini_model}")
+        config["gemini_model"] = gemini_model
+        
+        # Agentic Mode Toggle
+        use_agent = st.checkbox("Enable Agentic Reasoning 🤖", value=True, help="Allows the AI to browse files and reason multiple steps.")
+        config["use_agent"] = use_agent
+        
+        # Determine Env Key Name
+        if provider == "gemini":
+            env_key_name = "GOOGLE_API_KEY"
+        elif provider == "groq":
+            env_key_name = "GROQ_API_KEY"
+            
+        env_key = os.getenv(env_key_name)
+        api_key = env_key
+        
+        if env_key:
+            st.success(f"✅ {env_key_name} loaded from environment.")
+        else:
+            # API Key Input
+            api_key_label = f"{provider.capitalize()} API Key"
+            api_key_input = st.text_input(api_key_label, type="password")
+            if api_key_input:
+                api_key = api_key_input
+                os.environ[env_key_name] = api_key
+        config["api_key"] = api_key
+    
+        # Vector Database Selection
+        vector_db_type = st.selectbox("Vector Database", ["faiss", "chroma", "qdrant"])
+        config["vector_db_type"] = vector_db_type
+        
+        if vector_db_type == "qdrant":
+            st.caption("☁️ connect to a hosted Qdrant cluster")
+            qdrant_url = st.text_input("Qdrant URL", placeholder="https://xyz.qdrant.io:6333", value=os.getenv("QDRANT_URL", ""))
+            qdrant_key = st.text_input("Qdrant API Key", type="password", value=os.getenv("QDRANT_API_KEY", ""))
+            
+            if qdrant_url:
+                os.environ["QDRANT_URL"] = qdrant_url
+            if qdrant_key:
+                os.environ["QDRANT_API_KEY"] = qdrant_key
+    
+        # For Groq, we need an embedding provider
+        # Use LOCAL embeddings by default - NO RATE LIMITS!
+        embedding_provider = "local"  # Use local HuggingFace embeddings
+        embedding_api_key = api_key
+        
+        if provider == "groq":
+            st.info(f"ℹ️ {provider.capitalize()} is used for Chat. Using LOCAL embeddings (no rate limits!).")
+            embedding_provider = "local"  # Use local embeddings for Groq too
+            
+            # Check Embedding Key for Gemini (not needed for local)
+            emb_env_key = os.getenv("GOOGLE_API_KEY")
+            if not emb_env_key and provider != "gemini":
+                 embedding_api_key = emb_env_key  # Optional now
+            else:
+                 embedding_api_key = emb_env_key
+                 
+        config["embedding_provider"] = embedding_provider
+        config["embedding_api_key"] = embedding_api_key
+    
+        st.divider()
+        
+        # Ingestion moved to main area
+    
+        if st.session_state.processed_files:
+            st.success(f"✅ Codebase Ready ({provider}) + AST 🧠")
+            
+            # Show usage statistics if available
+            if st.session_state.chat_engine:
+                try:
+                    from code_chatbot.rate_limiter import get_rate_limiter
+                    limiter = get_rate_limiter(provider)
+                    stats = limiter.get_usage_stats()
+                    
+                    st.divider()
+                    st.subheader("📊 API Usage")
+                    col1, col2 = st.columns(2)
+                    with col1:
+                        st.metric("Requests/min", stats['requests_last_minute'])
+                        st.metric("Cache Hits", stats['cache_size'])
+                    with col2:
+                        st.metric("Total Tokens", f"{stats['total_tokens']:,}")
+                        rpm_limit = 15 if provider == "gemini" else 30
+                        usage_pct = (stats['requests_last_minute'] / rpm_limit) * 100
+                        st.progress(usage_pct / 100, text=f"{usage_pct:.0f}% of limit")
+                except Exception as e:
+                    pass  # Stats are optional
+            
+            st.divider()
+            if st.button("🗑️ Clear Chat History"):
+                st.session_state.messages = []
+                st.rerun()
+            
+            if st.button("Reset"):
+                # Clear disk data for a true reset
+                try:
+                    if os.path.exists("chroma_db"):
+                        shutil.rmtree("chroma_db")
+                    if os.path.exists("data"):
+                        shutil.rmtree("data")
+                except Exception as e:
+                    st.error(f"Error clearing data: {e}")
+                    
+                st.session_state.processed_files = False
+                st.session_state.messages = []
+                st.session_state.chat_engine = None
+                st.rerun()
+                
+    return config

components/style.py

@@ -14,110 +14,394 @@ def apply_custom_css():
 
     st.markdown("""
     <style>
+        /* -------------------------------------------------------------------------- */
+        /*                               CORE ANIMATIONS                              */
+        /* -------------------------------------------------------------------------- */
+        @keyframes gradient-xy {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* -------------------------------------------------------------------------- */
+        /*                            GLOBAL THEME ENGINE                             */
+        /* -------------------------------------------------------------------------- */
+        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
+        
         :root {
-            --glass-bg: rgba(30, 41, 59, 0.7);
-            --glass-border: rgba(255, 255, 255, 0.1);
+            --primary-glow: 56, 189, 248; /* Sky Blue */
+            --secondary-glow: 139, 92, 246; /* Violet */
+            --bg-deep: #050608;
+            --glass-border: rgba(255, 255, 255, 0.08);
+            --glass-bg: rgba(15, 23, 42, 0.6);
+        }
+
+        .stApp {
+            background: radial-gradient(circle at 10% 20%, rgba(13, 17, 28, 1) 0%, rgba(5, 6, 8, 1) 90%);
+            font-family: 'Outfit', sans-serif;
+        }
+
+        /* BACKGROUND WATERMARK */
+        .stApp::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70vh; /* Slightly smaller to fit nicely */
+            height: 70vh;
+            background-image: url("data:image/png;base64,LOGO_BASE64_PLACEHOLDER");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: contain;
+            opacity: 0.08; /* Subtle but visible color */
+            pointer-events: none;
+            z-index: 0;
+            border-radius: 50%; /* Force Circular Shape */
+        }
+        
+        /* Sidebar Logo - Standard Shape */
+        [data-testid="stSidebar"] img {
+            border-radius: 12px; /* Slight rounded corners for better aesthetics, but not circular */
+            box-shadow: 0 0 20px rgba(56, 189, 248, 0.3); /* Neon Glow */
+            border: 1px solid rgba(56, 189, 248, 0.5);
         }
         
-        /* Global Text */
+        /* Global Text Override */
         p, div, span, label, h1, h2, h3, h4, h5, h6, .stMarkdown {
             color: #E2E8F0 !important;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
         }
-        
-        /* Sidebar */
+
+        /* -------------------------------------------------------------------------- */
+        /*                                   SIDEBAR                                  */
+        /* -------------------------------------------------------------------------- */
         section[data-testid="stSidebar"] {
-            background: rgba(11, 12, 16, 0.95);
+            background: rgba(11, 12, 16, 0.85);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
             border-right: 1px solid var(--glass-border);
+            box-shadow: 5px 0 30px rgba(0,0,0,0.5);
+        }
+        
+        section[data-testid="stSidebar"] h1 {
+            background: linear-gradient(to right, #38BDF8, #8B5CF6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: 800;
+            font-size: 2rem !important;
+            padding-bottom: 0.5rem;
+        }
+
+        /* -------------------------------------------------------------------------- */
+        /*                                INPUTS & FORMS                              */
+        /* -------------------------------------------------------------------------- */
+        .stTextInput input, .stSelectbox div[data-baseweb="select"], .stTextArea textarea {
+            background-color: rgba(30, 41, 59, 0.5) !important;
+            border: 1px solid var(--glass-border) !important;
+            color: #F8FAFC !important;
+            border-radius: 12px !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            backdrop-filter: blur(10px);
+        }
+        
+        .stTextInput input:focus, .stTextArea textarea:focus, .stSelectbox div[data-baseweb="select"]:focus-within {
+            border-color: #38BDF8 !important;
+            box-shadow: 0 0 15px rgba(var(--primary-glow), 0.3);
+            transform: translateY(-1px);
+        }
+
+        /* -------------------------------------------------------------------------- */
+        /*                                MEDIA UPLOADS                               */
+        /* -------------------------------------------------------------------------- */
+        [data-testid="stFileUploader"] {
+            background-color: rgba(30, 41, 59, 0.4);
+            border: 1px dashed var(--glass-border);
+            border-radius: 12px;
+            padding: 20px;
+        }
+        
+        /* FORCE TEXT COLOR FOR FILE UPLOADER */
+        [data-testid="stFileUploader"] section > div, 
+        [data-testid="stFileUploader"] section > div > span,
+        [data-testid="stFileUploader"] section > div > small,
+        [data-testid="stFileUploader"] div[data-testid="stMarkdownContainer"] p {
+            color: #E2E8F0 !important; /* Bright Slate */
+            opacity: 1 !important;
+            -webkit-text-fill-color: #E2E8F0 !important;
+        }
+
+        [data-testid="stFileUploader"] button {
+            background: rgba(56, 189, 248, 0.2);
+            color: #38BDF8 !important;
+            border: 1px solid #38BDF8;
+        }
+
+        /* -------------------------------------------------------------------------- */
+        /*                             DROPDOWN & SELECT                              */
+        /* -------------------------------------------------------------------------- */
+        
+        /* 1. The Box Itself */
+        .stSelectbox div[data-baseweb="select"] {
+            background-color: #1E293B !important; /* Solid Slate-800 for contrast */
+            border: 1px solid #475569 !important;
+            color: white !important;
+        }
+
+        /* 2. The Text INSIDE the Box (Critical Fix) */
+        .stSelectbox div[data-baseweb="select"] div[data-testid="stMarkdownContainer"] > p {
+            color: #F8FAFC !important; /* White */
+            font-weight: 500 !important;
+        }
+        
+        /* 3. The Dropdown Menu (Popup) */
+        div[data-baseweb="popover"], div[data-baseweb="menu"], ul[data-baseweb="menu"] {
+            background-color: #0F172A !important;
+            border: 1px solid #334155 !important;
+        }
+        
+        /* 4. Options in the Menu */
+        li[data-baseweb="option"], div[data-baseweb="option"] {
+            color: #CBD5E1 !important; /* Light Slate */
+        }
+        
+        /* 5. Start/Icons in Menu */
+        li[data-baseweb="option"] *, div[data-baseweb="option"] * {
+            color: #CBD5E1 !important; 
+        }
+
+        /* 6. Selected/Hovered Option */
+        li[data-baseweb="option"][aria-selected="true"],
+        li[data-baseweb="option"]:hover,
+        div[data-baseweb="option"]:hover {
+            background-color: #38BDF8 !important;
+            color: white !important;
         }
         
-        /* Buttons */
-        .stButton button {
+        /* 7. SVG Arrow Icon */
+        .stSelectbox svg {
+            fill: #94A3B8 !important;
+        }
+
+        /* -------------------------------------------------------------------------- */
+        /*                                   BUTTONS                                  */
+        /* -------------------------------------------------------------------------- */
+    /* -------------------------------------------------------------------------- */
+        /*                                   BUTTONS                                  */
+        /* -------------------------------------------------------------------------- */
+        
+        /* Primary Actions (Gradient) */
+        .stButton button[kind="primary"] {
             background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%);
             color: white !important;
             border: none;
             border-radius: 8px;
+            padding: 0.6rem 1.2rem;
             font-weight: 600;
+            letter-spacing: 0.5px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
+            text-transform: uppercase;
+            font-size: 0.85rem;
         }
-        .stButton button:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+        
+        /* Secondary Actions (File Explorer Items) */
+        .stButton button[kind="secondary"] {
+            background: transparent !important;
+            border: 1px solid transparent !important;
+            color: #94A3B8 !important; /* Slate 400 */
+            text-align: left !important;
+            display: flex !important;
+            justify-content: flex-start !important;
+            padding: 8px 12px !important; /* Bigger padding */
+            font-size: 15px !important; /* Bigger Font */
+            font-family: 'JetBrains Mono', monospace !important; /* Monospace for files */
+            transition: all 0.2s ease;
+            box-shadow: none !important;
+        }
+
+        .stButton button[kind="secondary"]:hover {
+            background: rgba(56, 189, 248, 0.1) !important;
+            color: #38BDF8 !important;
+            transform: translateX(4px); /* Slide effect */
         }
         
-        /* Chat Messages */
+        /* Generic overrides if kind is not caught */
+        .stButton button:hover {
+             /* Handled by specific kinds above */
+        }
+        .stButton button:active {
+            transform: translateY(0);
+        }
+
+        /* -------------------------------------------------------------------------- */
+        /*                                CHAT BUBBLES                                */
+        /* -------------------------------------------------------------------------- */
         .stChatMessage {
             background: var(--glass-bg);
             border: 1px solid var(--glass-border);
-            border-radius: 12px;
+            border-radius: 16px;
+            backdrop-filter: blur(10px);
+            margin-bottom: 1rem;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            animation: fadeInUp 0.4s ease-out forwards;
         }
+        
         .stChatMessage[data-testid="stChatMessage"]:nth-child(even) {
             border-left: 3px solid #38BDF8;
             background: linear-gradient(90deg, rgba(56, 189, 248, 0.05) 0%, rgba(15, 23, 42, 0.6) 100%);
         }
         
-        /* IDE Layout & Scrolling */
-        .main .block-container {
-            max-width: 100% !important;
-            padding-top: 1rem !important; /* Minimized top padding */
-            padding-left: 1rem !important;
-            padding-right: 1rem !important;
-            max-height: 100vh;
-            overflow: hidden;
+        /* -------------------------------------------------------------------------- */
+        /*                                CODE & CHIPS                                */
+        /* -------------------------------------------------------------------------- */
+        code {
+            font-family: 'JetBrains Mono', monospace !important;
+            background: #0B0E14 !important;
+            border: 1px solid #1E293B;
+            border-radius: 6px;
+            color: #7DD3FC !important;
         }
         
-        /* Align Tabs with Editor */
-        .stTabs [data-baseweb="tab-list"] {
-            gap: 2px;
-            background-color: transparent;
+        /* Source Chips with Glow */
+        .source-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-bottom: 16px;
+            padding-bottom: 12px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
         }
-        .stTabs [data-baseweb="tab"] {
-            height: 50px;
-            white-space: pre-wrap;
-            border-radius: 4px 4px 0px 0px;
-            gap: 2px;
-            padding-top: 0px;
-            padding-bottom: 0px;
-            color: #f8fafc !important; /* Force white text */
-            font-weight: 600;
+        
+        .source-chip {
+            background: rgba(30, 41, 59, 0.6);
+            border: 1px solid rgba(56, 189, 248, 0.2);
+            border-radius: 20px;
+            padding: 6px 14px;
+            font-size: 0.8rem;
+            color: #94A3B8;
+            display: flex;
+            align-items: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            backdrop-filter: blur(5px);
+        }
+        
+        .source-chip:hover {
+            background: rgba(56, 189, 248, 0.15);
+            border-color: #38BDF8;
+            color: #38BDF8;
+            box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
+            transform: translateY(-1px);
         }
         
-        div[data-testid="column"] {
-            max-height: calc(100vh - 60px);
+        .source-icon {
+            margin-right: 8px;
+            opacity: 0.7;
+        }
+        
+        /* Hiding Streamlit Branding */
+        #MainMenu {visibility: hidden;}
+        footer {visibility: hidden;}
+        header {visibility: hidden;}
+        
+        /* -------------------------------------------------------------------------- */
+        /*                         IDE-STYLE PANEL LAYOUT                            */
+        /* -------------------------------------------------------------------------- */
+        
+        /* Main content area - fixed height */
+        .main .block-container {
+            max-height: calc(100vh - 80px);
+            overflow: hidden;
+            padding-top: 1rem;
+        }
+        
+        /* Make columns scrollable independently */
+        [data-testid="column"] {
+            max-height: calc(100vh - 120px);
             overflow-y: auto;
             overflow-x: hidden;
             scrollbar-width: thin;
+            scrollbar-color: #475569 transparent;
         }
         
-        .stCode {
-            max-height: 75vh !important;
-            overflow-y: auto !important;
-        }
-        
-        /* Scrollbar styling */
-        ::-webkit-scrollbar {
+        /* Custom scrollbar for webkit browsers */
+        [data-testid="column"]::-webkit-scrollbar {
             width: 6px;
-            height: 6px;
         }
-        ::-webkit-scrollbar-track {
+        
+        [data-testid="column"]::-webkit-scrollbar-track {
             background: transparent;
         }
-        ::-webkit-scrollbar-thumb {
+        
+        [data-testid="column"]::-webkit-scrollbar-thumb {
             background: #475569;
             border-radius: 3px;
         }
         
-        /* Source Chips */
-        .source-chip {
-            background: rgba(30, 41, 59, 0.4);
-            border: 1px solid rgba(148, 163, 184, 0.2);
+        [data-testid="column"]::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+        
+        /* Code viewer specific - scrollable code block */
+        .stCode {
+            max-height: 60vh;
+            overflow-y: auto !important;
+        }
+
+        /* -------------------------------------------------------------------------- */
+        /*                            HORIZONTAL TABS                                 */
+        /* -------------------------------------------------------------------------- */
+        /* -------------------------------------------------------------------------- */
+        /*                            HORIZONTAL TABS                                 */
+        /* -------------------------------------------------------------------------- */
+        
+        /* Tab List Container */
+        .stTabs [data-baseweb="tab-list"] {
+            gap: 8px;
+            background-color: transparent;
+            padding-bottom: 4px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* Individual Tab (Inactive) */
+        .stTabs [data-baseweb="tab"] {
+            height: 40px;
+            white-space: pre-wrap;
             border-radius: 6px;
-            padding: 4px 10px;
-            font-size: 0.85em;
-            color: #cbd5e1;
-            display: inline-flex;
-            align-items: center;
             gap: 6px;
-            margin-right: 8px;
-            margin-bottom: 8px;
+            padding: 0px 16px;
+            color: #94A3B8 !important; /* Slate 400 */
+            font-weight: 500;
+            background: transparent;
+            border: 1px solid transparent;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* Tab Hover State */
+        .stTabs [data-baseweb="tab"]:hover {
+            background: rgba(255, 255, 255, 0.05);
+            color: #E2E8F0 !important;
         }
+
+        /* Active Tab (Selected) */
+        .stTabs [data-baseweb="tab"][aria-selected="true"] {
+            background: rgba(56, 189, 248, 0.15) !important;
+            color: #38BDF8 !important; /* Sky Blue */
+            border: 1px solid rgba(56, 189, 248, 0.3);
+            font-weight: 600;
+            box-shadow: 0 0 10px rgba(56, 189, 248, 0.1);
+        }
+        
+        /* Tab Icons styling fix */
+        .stTabs [data-baseweb="tab"] p {
+            font-size: 0.95rem;
+        }
+        
     </style>
-    """, unsafe_allow_html=True)
+    """.replace("LOGO_BASE64_PLACEHOLDER", logo_b64), unsafe_allow_html=True)