Initial commit: AI Code Debugger with multi-provider fallback and professional UI

.gitignore

@@ -0,0 +1,8 @@
+.env
+venv/
+__pycache__/
+*.pyc
+debugger_logs.db
+test_out.txt
+test.py
+t.py

agent.py

@@ -0,0 +1,161 @@
+import os
+import time
+from dotenv import load_dotenv
+from langchain_groq import ChatGroq
+from langchain_google_genai import ChatGoogleGenerativeAI
+from langchain.schema import HumanMessage, SystemMessage
+from database import init_db, save_log
+
+load_dotenv()
+init_db()
+
+# ── ALL Models ───────────────────────────────────────────────────
+ALL_MODELS = [
+    {"provider": "groq",   "model": "gemma2-9b-it"},
+    {"provider": "groq",   "model": "llama-3.1-8b-instant"},
+    {"provider": "groq",   "model": "mixtral-8x7b-32768"},
+    {"provider": "groq",   "model": "llama3-8b-8192"},
+    {"provider": "groq",   "model": "llama-3.3-70b-versatile"},
+    {"provider": "gemini", "model": "gemini-2.0-flash"},
+    {"provider": "gemini", "model": "gemini-1.5-flash"},
+]
+
+
+def get_working_llm():
+    for entry in ALL_MODELS:
+        provider = entry["provider"]
+        model    = entry["model"]
+        try:
+            print(f"🔄 Trying [{provider}] {model}...")
+
+            if provider == "groq":
+                llm = ChatGroq(
+                    model=model,
+                    groq_api_key=os.getenv("GROQ_API_KEY"),
+                    temperature=0
+                )
+            else:
+                llm = ChatGoogleGenerativeAI(
+                    model=model,
+                    google_api_key=os.getenv("GEMINI_API_KEY"),
+                    temperature=0
+                )
+
+            # Quick test
+            llm.invoke("Say OK")
+            print(f"✅ Working: [{provider}] {model}")
+            return llm, provider, model
+
+        except Exception as e:
+            err = str(e)
+            if any(x in err for x in ["429", "rate_limit", "quota", "decommission"]):
+                print(f"⚠️  [{provider}] {model} rate limited, trying next...")
+                time.sleep(0.3)
+                continue
+            else:
+                print(f"❌  [{provider}] {model} error: {err[:80]}")
+                continue
+
+    return None, None, None
+
+
+def debug_code(broken_code: str, error_message: str, language: str = "Python"):
+    """
+    Direct LLM call — no agent, no tools, no iteration limit.
+    Fast, reliable, works on ALL free models.
+    """
+    start = time.time()
+
+    # Get working model
+    llm, provider, model_name = get_working_llm()
+
+    if llm is None:
+        return (
+            "⏳ All models rate limited.\n\nWait 10-60 mins and try again.",
+            "_All providers exhausted._"
+        )
+
+    # Build messages
+    system_msg = SystemMessage(content="""You are an expert Python debugging assistant.
+When given broken code and an error message:
+1. Identify exactly what is wrong
+2. Fix the code
+3. Explain the fix clearly
+
+Always respond in this format:
+
+FIXED CODE:
+```python
+[the complete fixed code here]
+```
+
+EXPLANATION:
+[clear explanation of what was wrong and how you fixed it]""")
+
+    user_msg = HumanMessage(content=f"""Please fix this broken {language} code.
+
+BROKEN CODE:
+```{language.lower()}
+{broken_code}
+```
+
+ERROR MESSAGE:
+{error_message}
+
+Give me the fixed code and explain what was wrong.""")
+
+    # Thinking log
+    thinking = f"""### 🧠 Agent Thinking Process
+
+**Step 1 — 🔍 Model Selected**
+- Provider: `{provider}`
+- Model: `{model_name}`
+
+**Step 2 — 📋 Analyzing Error**
+- Error: `{error_message}`
+- Language: `{language}`
+
+**Step 3 — 🔧 Generating Fix**
+- Sending to LLM for direct analysis...
+
+**Step 4 — ✅ Response Received**
+- Fix generated successfully!
+"""
+
+    try:
+        print(f"🔧 Debugging with [{provider}] {model_name}...")
+        response = llm.invoke([system_msg, user_msg])
+        fixed_code = response.content
+        time_taken = time.time() - start
+
+        print(f"✅ Fixed in {round(time_taken, 2)}s")
+
+        save_log(
+            broken_code=broken_code,
+            error_msg=error_message,
+            fixed_code=fixed_code,
+            status="success",
+            time_taken=round(time_taken, 2)
+        )
+
+        return fixed_code, thinking
+
+    except Exception as e:
+        time_taken = time.time() - start
+        err_msg = str(e)
+
+        save_log(
+            broken_code=broken_code,
+            error_msg=error_message,
+            fixed_code=None,
+            status="failed",
+            time_taken=round(time_taken, 2)
+        )
+
+        if "429" in err_msg or "rate_limit" in err_msg or "quota" in err_msg:
+            return (
+                "⏳ Rate limit reached.\nWait 10-60 minutes and try again.",
+                "_Rate limit hit during generation._"
+            )
+
+        return f"❌ Error:\n{err_msg}", thinking

app.py

@@ -0,0 +1,4 @@
+# HuggingFace Spaces entry point
+from gradio_app import app
+
+app.launch()

database.py

@@ -0,0 +1,123 @@
+import sqlite3
+from datetime import datetime
+
+DB_NAME = "debugger_logs.db"
+
+def init_db():
+    """
+    Creates the database and table if not exists
+    Run this once at app startup
+    """
+    conn = sqlite3.connect(DB_NAME)
+    cursor = conn.cursor()
+
+    cursor.execute("""
+        CREATE TABLE IF NOT EXISTS debug_logs (
+            id          INTEGER PRIMARY KEY AUTOINCREMENT,
+            timestamp   TEXT NOT NULL,
+            broken_code TEXT NOT NULL,
+            error_msg   TEXT NOT NULL,
+            fixed_code  TEXT,
+            status      TEXT,
+            time_taken  REAL
+        )
+    """)
+
+    conn.commit()
+    conn.close()
+    print("✅ Database ready!")
+
+
+def save_log(broken_code, error_msg, fixed_code, status, time_taken):
+    """
+    Saves every debug session to database
+    """
+    conn = sqlite3.connect(DB_NAME)
+    cursor = conn.cursor()
+
+    cursor.execute("""
+        INSERT INTO debug_logs
+        (timestamp, broken_code, error_msg, fixed_code, status, time_taken)
+        VALUES (?, ?, ?, ?, ?, ?)
+    """, (
+        datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+        broken_code,
+        error_msg,
+        fixed_code,
+        status,
+        time_taken
+    ))
+
+    conn.commit()
+    conn.close()
+
+
+def get_all_logs():
+    """
+    Returns all past debug sessions
+    """
+    conn = sqlite3.connect(DB_NAME)
+    cursor = conn.cursor()
+
+    cursor.execute("""
+        SELECT id, timestamp, error_msg, status, time_taken
+        FROM debug_logs
+        ORDER BY id DESC
+        LIMIT 20
+    """)
+
+    logs = cursor.fetchall()
+    conn.close()
+    return logs
+
+
+def get_stats():
+    """
+    Returns total sessions, success rate, avg time
+    """
+    conn = sqlite3.connect(DB_NAME)
+    cursor = conn.cursor()
+
+    cursor.execute("SELECT COUNT(*) FROM debug_logs")
+    total = cursor.fetchone()[0]
+
+    cursor.execute("SELECT COUNT(*) FROM debug_logs WHERE status='success'")
+    success = cursor.fetchone()[0]
+
+    cursor.execute("SELECT AVG(time_taken) FROM debug_logs")
+    avg_time = cursor.fetchone()[0] or 0
+
+    conn.close()
+
+    return {
+        "total": total,
+        "success": success,
+        "failed": total - success,
+        "success_rate": f"{(success/total*100):.1f}%" if total > 0 else "0%",
+        "avg_time": f"{avg_time:.1f}s"
+    }
+
+
+def clear_history():
+    """
+    Clears all past debug sessions
+    """
+    conn = sqlite3.connect(DB_NAME)
+    cursor = conn.cursor()
+    cursor.execute("DELETE FROM debug_logs")
+    conn.commit()
+    conn.close()
+
+
+# Test database
+if __name__ == "__main__":
+    init_db()
+    save_log(
+        broken_code="print(undefined_var)",
+        error_msg="NameError: undefined_var",
+        fixed_code="undefined_var = 'hello'\\nprint(undefined_var)",
+        status="success",
+        time_taken=4.2
+    )
+    print("Logs:", get_all_logs())
+    print("Stats:", get_stats())

executor.py

@@ -0,0 +1,53 @@
+import subprocess
+import sys
+
+def execute_code(code: str) -> dict:
+    """
+    Safely runs Python code in isolated subprocess
+    """
+    try:
+        result = subprocess.run(
+            [sys.executable, "-c", code],
+            capture_output=True,
+            text=True,
+            timeout=10
+        )
+
+        if result.returncode == 0:
+            return {
+                "status": "success",
+                "output": result.stdout,
+                "error": None
+            }
+        else:
+            return {
+                "status": "error",
+                "output": None,
+                "error": result.stderr
+            }
+
+    except subprocess.TimeoutExpired:
+        return {
+            "status": "timeout",
+            "output": None,
+            "error": "Code took too long (10s limit)"
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "output": None,
+            "error": str(e)
+        }
+
+
+# Test it
+if __name__ == "__main__":
+    print("Testing executor...")
+
+    # Test 1 - Working code
+    r1 = execute_code("print('Hello World')")
+    print("Test 1:", r1)
+
+    # Test 2 - Broken code
+    r2 = execute_code("print(undefined_variable)")
+    print("Test 2:", r2)

gradio_app.py

@@ -0,0 +1,658 @@
+import gradio as gr
+from agent import debug_code
+from database import get_all_logs, get_stats, clear_history
+
+# ═══════════════════════════════════════════════════════════════════
+#  DESIGN: Terminal-Noir × Premium SaaS
+#  Deep blacks · Electric cyan · Monospaced precision
+#  Feels like: Vercel × Linear × VSCode had a baby
+# ═══════════════════════════════════════════════════════════════════
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Bricolage+Grotesque:wght@400;500;600;700;800&display=swap');
+
+:root {
+  /* LIGHT: Clean Glass Light Blue */
+  --bg0:       #f0f9ff;
+  --bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
+  --bg1:       rgba(255, 255, 255, 0.7);
+  --bg2:       rgba(255, 255, 255, 0.5);
+  --bg3:       rgba(255, 255, 255, 0.8);
+  --border:    rgba(255, 255, 255, 0.6);
+  --border2:   rgba(14, 165, 233, 0.15);
+  --cyan:      #0284c7;
+  --cyan-dim:  rgba(2, 132, 199, 0.10);
+  --cyan-glow: rgba(2, 132, 199, 0.22);
+  --green:     #16a34a;
+  --green-dim: rgba(22, 163, 74, 0.09);
+  --red:       #ef4444;
+  --text:      #0f172a;
+  --text2:     #334155;
+  --text3:     #475569;
+  --mono:      'DM Mono', monospace;
+  --sans:      'Bricolage Grotesque', sans-serif;
+  --r:         12px;
+  --r2:        16px;
+  --glass-blur: blur(16px);
+}
+
+.dark {
+  /* DARK: Not too dark (Slate Mode) */
+  --bg0:       #0f172a;
+  --bg-gradient: none;
+  --bg1:       #1e293b;
+  --bg2:       #334155;
+  --bg3:       #475569;
+  --border:    rgba(255,255,255,0.08);
+  --border2:   rgba(255,255,255,0.12);
+  --cyan:      #38bdf8;
+  --cyan-dim:  rgba(56, 189, 248, 0.10);
+  --cyan-glow: rgba(56, 189, 248, 0.22);
+  --green:     #34d399;
+  --green-dim: rgba(52, 211, 153, 0.09);
+  --red:       #f87171;
+  --text:      #f8fafc;
+  --text2:     #cbd5e1;
+  --text3:     #94a3b8;
+  --glass-blur: none;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+html, body { 
+  background-color: var(--bg0) !important;
+  background-image: var(--bg-gradient) !important;
+  background-attachment: fixed !important;
+}
+footer, .svelte-1ipelgc { display: none !important; }
+
+.gradio-container {
+  background: transparent !important;
+  font-family: var(--sans) !important;
+  max-width: 100% !important;
+  padding: 0 !important;
+  overflow-x: hidden !important;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
+
+/* ── Topbar ── */
+.topbar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 32px; height: 56px;
+  background: var(--bg1); border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 100; 
+  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
+}
+.logo { display: flex; align-items: center; gap: 10px; }
+.logo-mark {
+  width: 28px; height: 28px; background: var(--cyan);
+  border-radius: 6px; display: flex; align-items: center; justify-content: center;
+  font-family: var(--mono); font-size: 11px; font-weight: 500; color: #fff;
+  box-shadow: 0 2px 8px var(--cyan-glow);
+}
+.logo-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
+.topbar-right { display: flex; align-items: center; gap: 16px; }
+.pill-green {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--green-dim); border: 1px solid rgba(0,255,136,0.18);
+  border-radius: 100px; padding: 5px 12px;
+  font-family: var(--mono); font-size: 11px; color: var(--green); font-weight: 500;
+}
+.dot-green {
+  width: 6px; height: 6px; background: var(--green);
+  border-radius: 50%; animation: blink 2.2s ease-in-out infinite; box-shadow: 0 0 6px var(--green);
+}
+@keyframes blink {
+  0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)}
+}
+.ver { font-family: var(--mono); font-size: 11px; color: var(--text3); }
+
+/* ── Hero ── */
+.hero {
+  padding: 50px 32px 40px; background: transparent;
+  position: relative; overflow: hidden;
+}
+.eyebrow {
+  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
+  text-transform: uppercase; color: var(--cyan); margin-bottom: 16px; font-weight: 600;
+}
+.h1 {
+  font-size: 48px; font-weight: 800; line-height: 1.05;
+  letter-spacing: -.03em; color: var(--text); margin-bottom: 16px;
+}
+.h1 em { font-style: normal; color: var(--cyan); }
+.hdesc { font-size: 16px; color: var(--text2); line-height: 1.6; max-width: 540px; }
+.steps { display: flex; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
+.chip {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--bg1); border: 1px solid var(--border);
+  border-radius: 100px; padding: 6px 14px;
+  font-family: var(--mono); font-size: 11px; color: var(--text2);
+  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
+}
+.chip-n {
+  width: 16px; height: 16px; background: var(--cyan-dim); border-radius: 50%;
+  display:flex; align-items:center; justify-content:center;
+  font-size: 10px; color: var(--cyan); font-weight: 600;
+}
+.arr { color: var(--text3); font-size: 12px; }
+
+/* ── Tabs ── */
+div.tabs > div.tab-nav {
+  background: transparent !important; border-bottom: 1px solid var(--border2) !important;
+  padding: 0 32px !important; gap: 0 !important;
+}
+div.tabs > div.tab-nav > button {
+  font-family: var(--sans) !important; font-size: 14px !important;
+  font-weight: 600 !important; color: var(--text3) !important;
+  padding: 14px 20px !important; border: none !important;
+  border-bottom: 2px solid transparent !important;
+  background: transparent !important; border-radius: 0 !important;
+  margin: 0 !important; transition: all .2s !important;
+}
+div.tabs > div.tab-nav > button:hover { color: var(--text2) !important; }
+div.tabs > div.tab-nav > button.selected {
+  color: var(--cyan) !important; border-bottom-color: var(--cyan) !important;
+}
+
+/* ── Tab Body ── */
+.tabitem { background: transparent !important; padding: 32px !important; }
+
+/* ── Section Divider ── */
+.sdiv {
+  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
+}
+.slbl {
+  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
+  text-transform: uppercase; color: var(--text3); white-space: nowrap; font-weight: 600;
+}
+.sline { flex: 1; height: 1px; background: var(--border2); }
+
+/* ── Form Elements ── */
+.block { background: transparent !important; }
+.block > label > span {
+  font-family: var(--mono) !important; font-size: 11px !important;
+  font-weight: 600 !important; letter-spacing: .1em !important;
+  text-transform: uppercase !important; color: var(--text3) !important;
+  margin-bottom: 8px !important; display: block !important;
+}
+textarea, input[type="text"], .wrap-inner {
+  background: var(--bg1) !important; border: 1px solid var(--border) !important;
+  border-radius: var(--r) !important; color: var(--text) !important;
+  font-family: var(--mono) !important; font-size: 13.5px !important;
+  line-height: 1.7 !important; padding: 16px !important;
+  transition: all .2s !important;
+  caret-color: var(--cyan) !important;
+  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
+  position: relative; z-index: 10;
+}
+textarea:focus, input[type="text"]:focus {
+  border-color: var(--cyan) !important;
+  box-shadow: 0 0 0 3px var(--cyan-dim) !important;
+  outline: none !important; background: var(--bg1) !important;
+}
+textarea::placeholder { color: var(--text3) !important; font-size: 13px !important; }
+.wrap { background: transparent !important; }
+
+/* ── Buttons ── */
+button.primary, button.lg {
+  background: var(--cyan) !important; color: #fff !important;
+  border: none !important; border-radius: var(--r) !important;
+  font-family: var(--sans) !important; font-weight: 700 !important;
+  font-size: 15px !important; letter-spacing: -.01em !important;
+  padding: 16px 32px !important; cursor: pointer !important;
+  transition: all .2s !important;
+  box-shadow: 0 4px 14px var(--cyan-glow) !important;
+  width: 100% !important;
+}
+button.primary:hover {
+  filter: brightness(1.1) !important;
+  box-shadow: 0 6px 20px rgba(2,132,199,.3) !important;
+  transform: translateY(-2px) !important;
+}
+button.primary:active { transform: translateY(0) !important; }
+
+button.secondary {
+  background: var(--bg1) !important; border: 1px solid var(--border) !important;
+  border-radius: var(--r) !important; color: var(--text2) !important;
+  font-family: var(--sans) !important; font-weight: 600 !important; font-size: 14px !important;
+  transition: all .2s !important;
+  backdrop-filter: var(--glass-blur);
+}
+button.secondary:hover {
+  background: var(--bg3) !important; color: var(--text) !important;
+}
+
+/* ── Output Code ── */
+.out-code textarea {
+  background: var(--bg1) !important;
+  border-color: rgba(22, 163, 74, .3) !important;
+  color: var(--text) !important; font-size: 13.5px !important;
+  font-weight: 500 !important;
+}
+.out-code textarea:focus {
+  border-color: var(--green) !important;
+  box-shadow: 0 0 0 3px var(--green-dim) !important;
+}
+.dark .out-code textarea { color: #9dffc8 !important; border-color: rgba(0,255,136,.14) !important;}
+
+/* ── Thinking trace ── */
+.trace-box {
+  background: var(--bg1) !important; border: 1px solid var(--border) !important;
+  border-left: 4px solid var(--cyan) !important;
+  border-radius: var(--r) !important; padding: 20px !important;
+  backdrop-filter: var(--glass-blur); box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
+}
+
+/* ── Copy btn ── */
+.copy-text-button {
+  background: var(--bg3) !important; border: 1px solid var(--border2) !important;
+  border-radius: 6px !important; color: var(--text2) !important;
+}
+
+/* ── Markdown ── */
+.prose, .prose * { color: var(--text) !important; font-family: var(--sans) !important; }
+.prose h3 {
+  font-size: 11px !important; font-weight: 700 !important;
+  letter-spacing: .12em !important; text-transform: uppercase !important;
+  color: var(--text3) !important; margin: 24px 0 12px !important;
+  padding-bottom: 8px !important; border-bottom: 1px solid var(--border2) !important;
+}
+.prose h4 { font-size: 15px !important; font-weight: 800 !important; margin: 24px 0 10px !important; color: var(--text) !important; }
+.prose table { width: 100% !important; border-collapse: collapse !important; font-size: 14px !important; }
+.prose thead tr { background: var(--bg2) !important; }
+.prose th {
+  padding: 12px 18px !important; text-align: left !important;
+  font-size: 11px !important; font-weight: 700 !important;
+  letter-spacing: .1em !important; text-transform: uppercase !important;
+  color: var(--text3) !important; border-bottom: 1px solid var(--border2) !important;
+  font-family: var(--mono) !important;
+}
+
+/* ── Custom HTML Dashboard Cards ── */
+.dash-card {
+  background: var(--bg1); border: 1px solid var(--border);
+  border-radius: var(--r); padding: 20px;
+  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
+  margin-bottom: 16px; transition: transform 0.2s;
+}
+.dash-card:hover { transform: translateY(-2px); border-color: var(--cyan-dim); }
+.dash-stat-row {
+  display: flex; justify-content: space-between; padding: 12px 0;
+  border-bottom: 1px solid var(--border2);
+}
+.dash-stat-row:last-child { border-bottom: none; }
+.dash-lbl { color: var(--text2); font-size: 13px; font-weight: 500; font-family: var(--sans); }
+.dash-val { color: var(--text); font-size: 14px; font-weight: 700; font-family: var(--mono); }
+.dash-val.cyan { color: var(--cyan); }
+
+.hist-item {
+  background: var(--bg2); border: 1px solid var(--border2);
+  border-left: 3px solid var(--border2);
+  border-radius: 8px; padding: 14px 16px; margin-bottom: 10px;
+  display: flex; flex-direction: column; gap: 6px;
+}
+.hist-item.success { border-left-color: var(--green); }
+.hist-item.failed { border-left-color: var(--red); }
+.hist-top { display: flex; justify-content: space-between; align-items: center; }
+.hist-id { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--cyan); }
+.hist-time { font-family: var(--mono); font-size: 10px; color: var(--text3); }
+.hist-err { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--bg3); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+.hist-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px;}
+.hist-badge { font-size: 10px; font-family: var(--mono); font-weight: 600; padding: 2px 8px; border-radius: 100px; }
+.hist-badge.success { background: var(--green-dim); color: var(--green); }
+.hist-badge.failed { background: rgba(239, 68, 68, 0.1); color: var(--red); }
+.hist-dur { font-family: var(--mono); font-size: 10px; color: var(--text3); }
+
+.prose td {
+  padding: 14px 18px !important; border-bottom: 1px solid var(--border2) !important;
+  color: var(--text) !important; font-family: var(--mono) !important;
+  font-size: 13px !important; background: var(--bg1) !important;
+}
+.prose tr:last-child td { border-bottom: none !important; }
+.prose tr:hover td { background: var(--bg2) !important; transition: background .15s; }
+.prose code {
+  background: var(--bg2) !important; border: 1px solid var(--border) !important;
+  border-radius: 6px !important; padding: 2px 8px !important;
+  font-family: var(--mono) !important; font-size: 12.5px !important; color: var(--cyan) !important;
+}
+.prose pre {
+  background: var(--bg1) !important; border: 1px solid var(--border) !important;
+  border-radius: var(--r) !important; padding: 20px !important; overflow-x: auto !important;
+  backdrop-filter: var(--glass-blur);
+}
+.prose pre code {
+  background: none !important; border: none !important;
+  color: var(--cyan) !important; padding: 0 !important;
+}
+.dark .prose pre code { color: #a8c0ff !important; }
+
+.prose strong { color: var(--text) !important; font-weight: 800 !important; }
+.prose hr { border: none !important; border-top: 1px solid var(--border2) !important; margin: 24px 0 !important; }
+.prose p { color: var(--text2) !important; line-height: 1.7 !important; margin-bottom: 14px !important; }
+.prose em { color: var(--text2) !important; }
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.tabitem > * { animation: fadeUp .3s ease forwards; }
+"""
+
+# ── Helpers ───────────────────────────────────────────────────────
+def fix_my_code(broken_code, error_message, language):
+    if not broken_code.strip():
+        return "⚠  Please paste your broken code first.", "_Waiting for input..._", render_stats(), render_history()
+    if not error_message.strip():
+        error_message = "Unknown error — analyze and fix"
+    try:
+        result, thinking = debug_code(broken_code, error_message, language)
+        return result, thinking, render_stats(), render_history()
+    except Exception as e:
+        return f"❌  Agent error:\n\n{str(e)}", "_Agent encountered an error._", render_stats(), render_history()
+
+
+def render_stats():
+    s = get_stats()
+    return f"""
+<div class="dash-card">
+  <div class="dash-stat-row"><span class="dash-lbl">Total Sessions</span><span class="dash-val">{s['total']}</span></div>
+  <div class="dash-stat-row"><span class="dash-lbl">Successful Fixes</span><span class="dash-val">{s['success']}</span></div>
+  <div class="dash-stat-row"><span class="dash-lbl">Failed Attempts</span><span class="dash-val" style="color:var(--red);">{s['failed']}</span></div>
+  <div class="dash-stat-row"><span class="dash-lbl">Success Rate</span><span class="dash-val cyan">{s['success_rate']}</span></div>
+  <div class="dash-stat-row"><span class="dash-lbl">Avg Fix Time</span><span class="dash-val">{s['avg_time']}</span></div>
+</div>
+"""
+
+def render_history():
+    logs = get_all_logs()
+    if not logs:
+        return "<div class='dash-card' style='text-align:center; color:var(--text3);'>_No sessions yet. Run your first debug above!_</div>"
+    
+    out = ""
+    for log in logs[:10]: # Limit to 10 latest for cleaner UI
+        id_, ts, err, status, t = log
+        status_cls = "success" if status == "success" else "failed"
+        badge_text = "FIXED" if status == "success" else "FAILED"
+        
+        # Clean the error message to fit beautifully in the card
+        clean_err = str(err).replace("\\n", " ").replace("\\r", "").replace("|", "-")
+        
+        out += f"""
+        <div class="hist-item {status_cls}">
+            <div class="hist-top">
+                <span class="hist-id">Session #{id_}</span>
+                <span class="hist-time">{ts}</span>
+            </div>
+            <div class="hist-err">{clean_err}</div>
+            <div class="hist-bot">
+                <span class="hist-badge {status_cls}">{badge_text}</span>
+                <span class="hist-dur">{t}s execution</span>
+            </div>
+        </div>
+        """
+    return out
+
+
+# ── App ───────────────────────────────────────────────────────────
+with gr.Blocks(
+    title="AI Code Debugger — Autonomous Agent",
+    css=CSS,
+    theme=gr.themes.Base(
+        primary_hue="cyan",
+        neutral_hue="slate",
+        font=gr.themes.GoogleFont("Bricolage Grotesque"),
+        font_mono=gr.themes.GoogleFont("DM Mono"),
+    )
+) as app:
+
+    # ── Topbar ────────────────────────────────────────────────────
+    gr.HTML("""
+    <div class="topbar">
+      <div class="logo">
+        <div class="logo-mark">AI</div>
+        <span class="logo-name">Code Debugger Agent</span>
+      </div>
+      <div class="topbar-right">
+        <div class="pill-green"><span class="dot-green"></span>Agent Online</div>
+        <span class="ver">LLaMA 3.3 · ReAct · v1.0</span>
+      </div>
+    </div>
+    """)
+
+    # ── Hero ──────────────────────────────────────────────────────
+    gr.HTML("""
+    <div class="hero">
+      <div class="eyebrow">// Autonomous Debugging Agent</div>
+      <h1 class="h1">Break it. <em>We'll fix it.</em></h1>
+      <p class="hdesc">
+        Paste broken code and the error. The agent autonomously analyzes,
+        searches, patches, and validates — until it runs.
+      </p>
+      <div class="steps">
+        <div class="chip"><span class="chip-n">1</span>Analyze</div>
+        <span class="arr">→</span>
+        <div class="chip"><span class="chip-n">2</span>Search</div>
+        <span class="arr">→</span>
+        <div class="chip"><span class="chip-n">3</span>Patch</div>
+        <span class="arr">→</span>
+        <div class="chip"><span class="chip-n">4</span>Validate</div>
+        <span class="arr">→</span>
+        <div class="chip"><span class="chip-n">5</span>Return Fix</div>
+      </div>
+    </div>
+    """)
+
+    # ── Tabs ──────────────────────────────────────────────────────
+    with gr.Tabs():
+
+        # ──── TAB 1: DEBUGGER ────
+        with gr.Tab("⚡  Debugger"):
+            with gr.Row(equal_height=False):
+
+                with gr.Column(scale=5):
+                    gr.HTML('<div class="sdiv"><span class="slbl">Input</span><div class="sline"></div></div>')
+                    language = gr.Dropdown(
+                        choices=["Python", "JavaScript"],
+                        value="Python", label="Language"
+                    )
+                    code_input = gr.Textbox(
+                        label="Broken Code",
+                        placeholder="# Paste your broken code here…\\ndef greet():\\n    print(massage)\\n\\ngreet()",
+                        lines=13, max_lines=24,
+                    )
+                    error_input = gr.Textbox(
+                        label="Error Message",
+                        placeholder="NameError: name 'massage' is not defined",
+                        lines=3,
+                    )
+                    fix_btn = gr.Button("⚡  Start Debug Session", variant="primary", size="lg")
+
+                with gr.Column(scale=5):
+                    gr.HTML('<div class="sdiv"><span class="slbl">Solution</span><div class="sline"></div></div>')
+                    output = gr.Textbox(
+                        label="Fixed Code + Explanation",
+                        lines=13, max_lines=24,
+                        buttons=["copy"],
+                        elem_classes="out-code",
+                        placeholder="✓  Patched code appears here…",
+                        interactive=False,
+                    )
+                    gr.HTML('<div class="sdiv" style="margin-top:20px"><span class="slbl">Agent Trace</span><div class="sline"></div></div>')
+                    thinking = gr.Markdown(
+                        value="_Agent reasoning steps stream here after you click Fix..._",
+                        elem_classes="trace-box"
+                    )
+
+            gr.HTML('<div class="sdiv" style="margin-top:32px"><span class="slbl">Session Data</span><div class="sline"></div></div>')
+            with gr.Row():
+                with gr.Column(scale=2):
+                    stats_out = gr.HTML(value=render_stats())
+                with gr.Column(scale=3):
+                    history_out = gr.HTML(value=render_history())
+
+            fix_btn.click(
+                fn=fix_my_code,
+                inputs=[code_input, error_input, language],
+                outputs=[output, thinking, stats_out, history_out]
+            )
+
+        # ──── TAB 2: ANALYTICS ────
+        with gr.Tab("📊  Analytics"):
+            gr.HTML('<div class="sdiv"><span class="slbl">Performance</span><div class="sline"></div></div>')
+            with gr.Row():
+                with gr.Column(scale=2):
+                    a_stats = gr.HTML(value=render_stats())
+                with gr.Column(scale=3):
+                    a_hist = gr.HTML(value=render_history())
+            with gr.Row():
+                refresh_btn = gr.Button("↺  Refresh", variant="secondary", size="sm")
+                clear_btn = gr.Button("🗑️  Clear History", variant="secondary", size="sm")
+            
+            refresh_btn.click(fn=lambda: (render_stats(), render_history()), outputs=[a_stats, a_hist])
+            
+            def handle_clear():
+                clear_history()
+                return render_stats(), render_history(), render_stats(), render_history()
+            
+            clear_btn.click(
+                fn=handle_clear, 
+                outputs=[a_stats, a_hist, stats_out, history_out]
+            )
+
+        # ──── TAB 3: EXAMPLES ────
+        with gr.Tab("📋  Examples"):
+            gr.Markdown("""
+### Quick Start Examples
+
+---
+
+#### 01 · NameError
+```python
+def greet():
+    print(massage)
+greet()
+```
+**Error:** `NameError: name 'massage' is not defined`
+
+---
+
+#### 02 · SyntaxError
+```python
+def add(a, b):
+    return a + b
+print(add(1, 2)
+```
+**Error:** `SyntaxError: invalid syntax`
+
+---
+
+#### 03 · TypeError
+```python
+age = "25"
+result = age + 5
+print(result)
+```
+**Error:** `TypeError: can only concatenate str (not "int") to str`
+
+---
+
+#### 04 · IndexError
+```python
+fruits = ["apple", "banana"]
+print(fruits[5])
+```
+**Error:** `IndexError: list index out of range`
+
+---
+
+#### 05 · ZeroDivisionError
+```python
+def avg(total, count):
+    return total / count
+print(avg(100, 0))
+```
+**Error:** `ZeroDivisionError: division by zero`
+
+---
+
+#### 06 · JavaScript · ReferenceError
+```javascript
+function greet(name) {
+    console.log(`Hello ${usrname}`)
+}
+greet("Alice")
+```
+**Error:** `ReferenceError: usrname is not defined`
+            """)
+
+        # ──── TAB 4: DOCS ────
+        with gr.Tab("📖  Docs"):
+            gr.Markdown("""
+### How the Agent Works
+
+Uses the **ReAct (Reasoning + Acting)** pattern — same architecture powering
+production AI agents at Vercel, Linear, and top AI startups.
+
+---
+
+#### Decision Loop
+
+```
+INPUT  →  broken code + error message
+THINK  →  What error type is this?
+ACT    →  analyze_error(error_message)
+THINK  →  What fix should I search for?
+ACT    →  search_stackoverflow(query)
+THINK  →  Apply fix to the code
+ACT    →  run_python_code(fixed_code)
+CHECK  →  Did it work?
+          YES → return solution
+          NO  → loop back (max 10 attempts)
+```
+
+---
+
+#### Tech Stack
+
+| Layer | Technology |
+|---|---|
+| LLM | Groq — LLaMA 3.3 70B Versatile |
+| Agent | LangChain AgentExecutor |
+| Pattern | ReAct (Reason + Act) |
+| Search | Tavily Search API |
+| Runner | Python subprocess sandbox |
+| Memory | LangChain ConversationBufferMemory |
+| Storage | SQLite session logs |
+| UI | Gradio Blocks |
+
+---
+
+#### Why This Project Gets You Hired
+
+> Agentic AI is the **#1 most demanded skill** in AI engineering in 2026.
+> This project proves you can build autonomous systems — not just chatbots.
+> ReAct pattern + Tool use + Memory + Deployment = top 1% fresher portfolio.
+            """)
+
+    # ── Footer ────────────────────────────────────────────────────
+    gr.HTML("""
+    <div style="padding:18px 32px;border-top:1px solid var(--border);
+        display:flex;align-items:center;justify-content:space-between;background:var(--bg1);
+        backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);">
+      <span style="font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:.05em;">
+        AI Code Debugger Agent &nbsp;·&nbsp; ReAct Pattern &nbsp;·&nbsp; LangChain + Groq + Gradio
+      </span>
+      <span style="font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:.05em;">
+        Fresher Portfolio Project · 2026
+      </span>
+    </div>
+    """)
+
+
+if __name__ == "__main__":
+    app.launch(inbrowser=True)

main.py

@@ -0,0 +1,6 @@
+from gradio_app import app
+
+if __name__ == "__main__":
+    print("🚀 Starting AI Code Debugger Agent...")
+    print("Opening in browser automatically...")
+    app.launch(inbrowser=True)

requirements.txt

@@ -0,0 +1,7 @@
+langchain
+langchain-groq
+langchain-google-genai
+langchain-community
+gradio
+tavily-python
+python-dotenv

tools.py

@@ -0,0 +1,61 @@
+import os
+import subprocess
+from langchain.tools import tool
+from executor import execute_code
+from tavily import TavilyClient
+from dotenv import load_dotenv
+
+load_dotenv()
+
+tavily_client = TavilyClient(
+    api_key=os.getenv("TAVILY_API_KEY")
+)
+
+
+@tool
+def run_python_code(code: str) -> str:
+    """Run Python code to test if it works. Input must be valid Python code string."""
+    result = execute_code(code)
+    if result["status"] == "success":
+        return f"SUCCESS: Code works! Output: {result['output']}"
+    else:
+        return f"FAILED: {result['error']}"
+
+
+@tool
+def search_stackoverflow(query: str) -> str:
+    """Search web for Python error fix. Input should be the error type like 'NameError fix'."""
+    try:
+        results = tavily_client.search(
+            query=f"python {query} fix solution",
+            max_results=2
+        )
+        output = "Solutions found:\n"
+        for i, r in enumerate(results["results"], 1):
+            output += f"{i}. {r['title']}: {r['content'][:200]}\n"
+        return output
+    except Exception as e:
+        return f"Search failed: {str(e)}"
+
+
+@tool
+def analyze_error(error_message: str) -> str:
+    """Analyze Python error type and meaning. Input should be the error message."""
+    error_types = {
+        "NameError": "Variable used before being defined. Fix: define the variable first.",
+        "TypeError": "Wrong data type used. Fix: convert to correct type.",
+        "IndexError": "List index out of range. Fix: check list length before accessing.",
+        "KeyError": "Dictionary key not found. Fix: check key exists first.",
+        "SyntaxError": "Invalid Python syntax. Fix: check brackets, colons, indentation.",
+        "ImportError": "Module not found. Fix: pip install the missing module.",
+        "AttributeError": "Object missing property. Fix: check object type and available methods.",
+        "ValueError": "Wrong value passed. Fix: validate input before passing.",
+        "ZeroDivisionError": "Dividing by zero. Fix: check denominator is not zero.",
+        "IndentationError": "Wrong indentation. Fix: use consistent spaces or tabs."
+    }
+
+    for error_type, explanation in error_types.items():
+        if error_type in error_message:
+            return f"Error: {error_type}. {explanation}"
+
+    return f"Unknown error: {error_message}. Search for solution online."