import gradio as gr

import os
import sqlite3
import json
from typing import List, Dict, Any
from huggingface_hub import InferenceClient
import requests
from datetime import datetime
import hashlib

# Persistent memory setup using HF Spaces /data mount
MEMORY_DB = "/data/memory.db"

def init_memory():
"""Initialize persistent SQLite memory database"""
os.makedirs(os.path.dirname(MEMORY_DB), exist_ok=True)
conn = sqlite3.connect(MEMORY_DB)
conn.execute("""
CREATE TABLE IF NOT EXISTS conversations (
id INTEGER PRIMARY KEY AUTOINCREMENT,
session_id TEXT,
role TEXT,
content TEXT,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
embedding_hash TEXT
)
""")
conn.commit()
conn.close()

def save_memory(session_id: str, role: str, content: str):
"""Save conversation to persistent memory"""
content_hash = hashlib.md5(content.encode()).hexdigest()
conn = sqlite3.connect(MEMORY_DB)
conn.execute(
"INSERT INTO conversations (session_id, role, content, embedding_hash) VALUES (?, ?, ?, ?)",
(session_id, role, content, content_hash)
)
conn.commit()
conn.close()

def load_memory(session_id: str, limit: int = 10) -> List[Dict[str, str]]:
"""Load recent conversation history from persistent memory"""
conn = sqlite3.connect(MEMORY_DB)
cursor = conn.execute(
"SELECT role, content FROM conversations WHERE session_id = ? ORDER BY timestamp DESC LIMIT ?",
(session_id, limit)
)
history = [{"role": row[0], "content": row[1]} for row in cursor.fetchall()]
conn.close()
return list(reversed(history)) # Return oldest first

# Uncensored web search tool (Tavily API - get free key at tavily.com)
TAVILY_API_KEY = os.getenv("TAVILY_API_KEY", "your-tavily-key-here")

async def web_search(query: str) -> str:
"""Uncensored web search with full content extraction"""
if not TAVILY_API_KEY or TAVILY_API_KEY == "your-tavily-key-here":
return "Web search unavailable - add TAVILY_API_KEY to Space secrets"

url = "https://api.tavily.com/search"
payload = {
"api_key": TAVILY_API_KEY,
"query": query,
"search_depth": "advanced",
"include_answer": True,
"include_raw_content": True,
"max_results": 5
}
try:
response = requests.post(url, json=payload, timeout=10)
data = response.json()
results = []
for result in data.get("results", []):
results.append(f"**{result['title']}**
{result['content'][:500]}...
{result['url']}")
return "

".join(results)
except Exception as e:
return f"Search error: {str(e)}"

# Document upload processing (RAG-style)
from PyPDF2 import PdfReader
import docx

def process_document(file_path: str) -> str:
"""Extract text from uploaded documents"""
text = ""
try:
if file_path.endswith('.pdf'):
reader = PdfReader(file_path)
for page in reader.pages:
text += page.extract_text() + "
"
elif file_path.endswith('.docx'):
doc = docx.Document(file_path)
for para in doc.paragraphs:
text += para.text + "
"
elif file_path.endswith(('.txt', '.md')):
with open(file_path, 'r', encoding='utf-8') as f:
text = f.read()
return text[:4000] # Truncate for context
except:
return "Could not process document"

# Monaco Editor Component for code generation
def create_monaco_editor():
"""Monaco editor HTML/JS component for vibe-coding"""
return gr.HTML("""
<div id="monaco-container" style="height: 400px; border: 1px solid #ccc;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script>
<script>
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' } });
require(['vs/editor/editor.main'], function() {
const editor = monaco.editor.create(document.getElementById('monaco-container'), {
value: '// AI-generated code will appear here\
// Start coding your vibe...',
language: 'python',
theme: 'vs-dark',
automaticLayout: true
});
window.monacoEditor = editor;
});
</script>
""")

# Main agent response function with tools
def agent_respond(
message: str,
history: List[Dict[str, str]],
system_message: str,
session_id: str,
documents: List[str],
max_tokens: int,
temperature: float,
top_p: float,
hf_token: gr.OAuthToken,
use_editor: bool = False
):
init_memory()

# Load persistent memory
memory_history = load_memory(session_id)
full_history = memory_history + history

# Process uploaded documents
doc_context = ""
for doc_file in documents:
if doc_file:
doc_context += process_document(doc_file) + "
"

# Enhanced system prompt with tools
tools_prompt = """
You are an advanced AI agent with these tools:
1. **web_search(query)** - Search web (uncensored, any content)
2. **process_docs** - Analyze uploaded documents
3. **code_editor** - Generate/edit code in Monaco editor

Format tool calls as: [TOOL_NAME: parameter="value"]

Available context:
""" + doc_context

enhanced_system = system_message + tools_prompt
messages = [{"role": "system", "content": enhanced_system}]
messages.extend(full_history)
messages.append({"role": "user", "content": message})

client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")

# First pass: tool detection and execution
tool_response = ""

for chunk in client.chat_completion(
messages,
max_tokens=512,
stream=True,
temperature=0.1, # Low temp for tool detection
top_p=0.9,
):
if len(chunk.choices) and chunk.choices[0].delta.content:
tool_response += chunk.choices[0].delta.content

# Parse and execute tools
final_message = tool_response
if "[web_search:" in tool_response:
query_start = tool_response.find("[web_search:") + 12
query_end = tool_response.find("]", query_start)
query = tool_response[query_start:query_end].strip().strip('"')
search_results = gr.try_async(web_search)(query)
final_message = f"🔍 Web search results for '{query}':
{search_results}

"

if use_editor and "code" in tool_response.lower():
final_message += "
💻 Code generated - check Monaco editor below!"

# Save to persistent memory
save_memory(session_id, "user", message)
save_memory(session_id, "assistant", final_message)

# Second pass: generate final response with tool results
messages[-1]["content"] = message + "

" + final_message
response = ""

for chunk in client.chat_completion(
messages,
max_tokens=max_tokens,
stream=True,
temperature=temperature,
top_p=top_p,
):
if len(chunk.choices) and chunk.choices[0].delta.content:
token = chunk.choices[0].delta.content
response += token
yield response

# Gradio interface with all features
with gr.Blocks(title="AI Agent Workspace") as demo:
gr.Markdown("# 🚀 Advanced AI Agent with Tools & Persistent Memory")

with gr.Row():
with gr.Column(scale=2):
chatbot = gr.Chatbot(height=500)

with gr.Row():
msg = gr.Textbox(placeholder="Message your AI Agent...", scale=3)
submit = gr.Button("Send", variant="primary")

# Session management
with gr.Row():
session_id = gr.Textbox("session_001", label="Session ID", interactive=True)
clear_memory = gr.Button("🧹 Clear Session Memory")

with gr.Row():
with gr.Column(scale=1):
gr.Markdown("### 📚 Document Upload (RAG)")
doc_upload = gr.File(
file_count="multiple",
file_types=[".pdf", ".docx", ".txt", ".md"],
label="Upload documents for analysis"
)
process_docs = gr.Button("Process Documents")

with gr.Column(scale=2):
gr.Markdown("### 🔍 Tools & Settings")
system_msg = gr.Textbox(
value="You are an advanced AI agent. Use tools when needed.",
label="System Prompt",
lines=3
)
use_editor_cb = gr.Checkbox(label="Enable Code Editor", value=True)

with gr.Row():
max_tokens = gr.Slider(1, 2048, 512, step=1, label="Max Tokens")
temperature = gr.Slider(0.1, 4.0, 0.7, step=0.1, label="Temperature")
top_p = gr.Slider(0.1, 1.0, 0.95, step=0.05, label="Top-p")

# Monaco Code Editor
if use_editor_cb.value:
code_editor = create_monaco_editor()

# Event handlers
def process_and_respond(message, history, session_id, documents):
for response in agent_respond(
message, history, system_msg.value,
session_id, documents, max_tokens.value,
temperature.value, top_p.value, gr.State({}),
use_editor_cb.value
):
yield response, history + [{"role": "user", "content": message}, {"role": "assistant", "content": response}]

submit.click(
process_and_respond,
inputs=[msg, chatbot, session_id, doc_upload],
outputs=[msg, chatbot]
)

clear_memory.click(
lambda: [], outputs=chatbot
).then(
lambda sid: [], inputs=[session_id], outputs=[chatbot]
)

# Sidebar auth
with gr.Sidebar():
gr.Markdown("### 🔑 Setup Instructions")
gr.Markdown("""
1. Add **TAVILY_API_KEY** to Space secrets (free tier available)
2. Upgrade to **Persistent Storage** in Settings → survives restarts
3. Enable **Public** for sharing or **Private** for exclusive use
4. HF_TOKE

README.md

@@ -1,10 +1,13 @@
 ---
-title: Synapse Coder Studio
-emoji: 📉
+title: Synapse Coder Studio 🤖
 colorFrom: yellow
-colorTo: green
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/chat-interface.js

@@ -0,0 +1,236 @@
+class CustomChatInterface extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;
+                    position: relative;
+                }
+                .chat-history {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: 1.5rem;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1.5rem;
+                }
+                .message {
+                    display: flex;
+                    gap: 1rem;
+                    max-width: 85%;
+                    animation: fadeIn 0.3s ease-out;
+                }
+                .message.user {
+                    align-self: flex-end;
+                    flex-direction: row-reverse;
+                }
+                .message.ai {
+                    align-self: flex-start;
+                }
+                .avatar {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 0.5rem;
+                    flex-shrink: 0;
+                }
+                .msg-bubble {
+                    padding: 1rem;
+                    border-radius: 1rem;
+                    font-size: 0.95rem;
+                    line-height: 1.5;
+                    position: relative;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                }
+                .user .msg-bubble {
+                    background: #6366f1;
+                    color: white;
+                    border-bottom-right-radius: 0.25rem;
+                }
+                .ai .msg-bubble {
+                    background: #1e293b;
+                    color: #e2e8f0;
+                    border: 1px solid #334155;
+                    border-bottom-left-radius: 0.25rem;
+                }
+                .input-area {
+                    padding: 1.5rem;
+                    background: #0f172a;
+                    border-top: 1px solid #334155;
+                    display: flex;
+                    gap: 1rem;
+                    align-items: flex-end;
+                }
+                textarea {
+                    flex: 1;
+                    background: #1e293b;
+                    border: 1px solid #334155;
+                    color: white;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    resize: none;
+                    height: 50px;
+                    min-height: 50px;
+                    max-height: 150px;
+                    font-family: inherit;
+                }
+                textarea:focus {
+                    outline: none;
+                    border-color: #6366f1;
+                }
+                .send-btn {
+                    background: #6366f1;
+                    color: white;
+                    border: none;
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 0.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: background 0.2s;
+                }
+                .send-btn:hover {
+                    background: #4f46e5;
+                }
+                .send-btn:disabled {
+                    background: #334155;
+                    cursor: not-allowed;
+                }
+                @keyframes fadeIn {
+                    from { opacity: 0; transform: translateY(10px); }
+                    to { opacity: 1; transform: translateY(0); }
+                }
+                .typing-indicator span {
+                    display: inline-block;
+                    width: 6px;
+                    height: 6px;
+                    background-color: #94a3b8;
+                    border-radius: 50%;
+                    animation: typing 0.6s infinite;
+                    margin: 0 2px;
+                }
+                @keyframes typing {
+                    0%, 100% { transform: translateY(0); }
+                    50% { transform: translateY(-3px); }
+                }
+            </style>
+
+            <div class="chat-history" id="chat-history">
+                <!-- Messages will be injected here -->
+                <div class="message ai">
+                    <img src="http://static.photos/technology/200x200/5" class="avatar" alt="AI">
+                    <div class="msg-bubble">
+                        Hello! I am Synapse, your AI coding assistant. I can help you search the web, analyze documents, or generate code. What's on your mind today?
+                    </div>
+                </div>
+            </div>
+            
+            <div class="input-area">
+                <textarea id="msg-input" placeholder="Type a message... (Shift+Enter for new line)"></textarea>
+                <button id="send-btn" class="send-btn">
+                    <i data-feather="send"></i>
+                </button>
+            </div>
+        `;
+
+        const chatHistory = this.shadowRoot.getElementById('chat-history');
+        const msgInput = this.shadowRoot.getElementById('msg-input');
+        const sendBtn = this.shadowRoot.getElementById('send-btn');
+        let isProcessing = false;
+
+        const addMessage = (role, text) => {
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `message ${role}`;
+            
+            const avatarUrl = role === 'user' 
+                ? 'http://static.photos/people/200x200/12' 
+                : 'http://static.photos/technology/200x200/5';
+
+            // Simple markdown-like parsing for bold/newlines
+            const formattedText = text
+                .replace(/\n/g, '<br>')
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>');
+
+            msgDiv.innerHTML = `
+                <img src="${avatarUrl}" class="avatar" alt="${role}">
+                <div class="msg-bubble message-content">${formattedText}</div>
+            `;
+            chatHistory.appendChild(msgDiv);
+            chatHistory.scrollTop = chatHistory.scrollHeight;
+        };
+
+        const showTyping = () => {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'message ai typing-msg';
+            typingDiv.innerHTML = `
+                <img src="http://static.photos/technology/200x200/5" class="avatar" alt="AI">
+                <div class="msg-bubble typing-indicator">
+                    <span></span><span></span><span></span>
+                </div>
+            `;
+            chatHistory.appendChild(typingDiv);
+            chatHistory.scrollTop = chatHistory.scrollHeight;
+            return typingDiv;
+        };
+
+        const handleSend = async () => {
+            const text = msgInput.value.trim();
+            if (!text || isProcessing) return;
+
+            addMessage('user', text);
+            msgInput.value = '';
+            msgInput.style.height = '50px'; // Reset height
+            isProcessing = true;
+            sendBtn.disabled = true;
+
+            // Save to Memory
+            if(window.MemoryDB) window.MemoryDB.save('user', text);
+
+            // Show typing indicator
+            const typingEl = showTyping();
+
+            // Get Response
+            try {
+                const response = await window.Agent.respond(text);
+                typingEl.remove();
+                addMessage('ai', response);
+                if(window.MemoryDB) window.MemoryDB.save('assistant', response);
+            } catch (error) {
+                typingEl.remove();
+                addMessage('ai', "Sorry, I encountered an error connecting to the neural net.");
+            }
+
+            isProcessing = false;
+            sendBtn.disabled = false;
+            msgInput.focus();
+        };
+
+        sendBtn.addEventListener('click', handleSend);
+        msgInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        });
+
+        // Auto-resize textarea
+        msgInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
+        
+        // Listen for clear memory event
+        window.appEvents.addEventListener('memory-cleared', () => {
+             chatHistory.innerHTML = '';
+             addMessage('ai', 'Session memory cleared. Ready for a new topic.');
+        });
+
+        feather.replace();
+    }
+}
+customElements.define('custom-chat-interface', CustomChatInterface);

components/navbar.js

@@ -0,0 +1,65 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 1.5rem;
+                    height: 100%;
+                    background: rgba(15, 23, 42, 0.9);
+                    border-bottom: 1px solid #334155;
+                }
+                .logo {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    color: #6366f1; /* Indigo-500 */
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    text-decoration: none;
+                }
+                .user-profile {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                }
+                .avatar {
+                    width: 36px;
+                    height: 36px;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    border: 2px solid #6366f1;
+                }
+                .status-badge {
+                    font-size: 0.75rem;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 999px;
+                    background: rgba(16, 185, 129, 0.2);
+                    color: #34d399;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                }
+                .status-dot {
+                    width: 6px;
+                    height: 6px;
+                    background: #34d399;
+                    border-radius: 50%;
+                }
+            </style>
+            <a href="#" class="logo">
+                <i data-feather="cpu"></i> Synapse Studio
+            </a>
+            <div class="user-profile">
+                <div class="status-badge">
+                    <span class="status-dot"></span> Online
+                </div>
+                <img src="http://static.photos/people/200x200/12" alt="User" class="avatar">
+            </div>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/sidebar.js

@@ -0,0 +1,133 @@
+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: flex;
+                    flex-direction: column;
+                    padding: 1.5rem;
+                    gap: 2rem;
+                    overflow-y: auto;
+                    background: rgba(30, 41, 59, 0.5);
+                }
+                h3 {
+                    font-size: 0.875rem;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    color: #94a3b8;
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                .control-group {
+                    margin-bottom: 1.5rem;
+                }
+                label {
+                    display: block;
+                    font-size: 0.75rem;
+                    margin-bottom: 0.5rem;
+                    color: #cbd5e1;
+                }
+                input[type="text"], textarea, select {
+                    width: 100%;
+                    background: #0f172a;
+                    border: 1px solid #334155;
+                    color: white;
+                    padding: 0.5rem;
+                    border-radius: 0.375rem;
+                    font-size: 0.875rem;
+                    margin-bottom: 0.5rem;
+                    box-sizing: border-box;
+                }
+                input[type="text"]:focus, textarea:focus, select:focus {
+                    outline: none;
+                    border-color: #6366f1;
+                    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+                }
+                input[type="range"] {
+                    width: 100%;
+                    accent-color: #6366f1;
+                }
+                .range-value {
+                    font-size: 0.75rem;
+                    float: right;
+                    color: #6366f1;
+                }
+                button.btn-block {
+                    width: 100%;
+                    padding: 0.5rem;
+                    background: #334155;
+                    color: white;
+                    border: none;
+                    border-radius: 0.375rem;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                button.btn-block:hover {
+                    background: #475569;
+                }
+                button.btn-danger {
+                    background: rgba(239, 68, 68, 0.1);
+                    color: #f87171;
+                    border: 1px solid rgba(239, 68, 68, 0.2);
+                }
+                button.btn-danger:hover {
+                    background: rgba(239, 68, 68, 0.2);
+                }
+            </style>
+
+            <div class="control-group">
+                <h3><i data-feather="database"></i> Session</h3>
+                <label>Session ID</label>
+                <input type="text" id="session-id" value="session_001">
+            </div>
+
+            <div class="control-group">
+                <h3><i data-feather="terminal"></i> Agent Settings</h3>
+                <label>System Prompt</label>
+                <textarea id="system-prompt" rows="3">You are an advanced AI agent. Use tools when needed.</textarea>
+                
+                <label>Max Tokens <span class="range-value" id="tokens-val">512</span></label>
+                <input type="range" min="128" max="2048" value="512" id="max-tokens">
+
+                <label>Temperature <span class="range-value" id="temp-val">0.7</span></label>
+                <input type="range" min="0" max="1" step="0.1" value="0.7" id="temperature">
+                
+                <label>Top-p <span class="range-value" id="topp-val">0.95</span></label>
+                <input type="range" min="0" max="1" step="0.05" value="0.95" id="top-p">
+            </div>
+
+            <div class="control-group" style="margin-top: auto;">
+                <button id="clear-mem" class="btn-block btn-danger">
+                    <i data-feather="trash-2"></i> Clear Memory
+                </button>
+            </div>
+        `;
+
+        // Event Listeners for Range Sliders
+        this.shadowRoot.getElementById('max-tokens').addEventListener('input', (e) => {
+            this.shadowRoot.getElementById('tokens-val').textContent = e.target.value;
+        });
+        this.shadowRoot.getElementById('temperature').addEventListener('input', (e) => {
+            this.shadowRoot.getElementById('temp-val').textContent = e.target.value;
+        });
+        this.shadowRoot.getElementById('top-p').addEventListener('input', (e) => {
+            this.shadowRoot.getElementById('topp-val').textContent = e.target.value;
+        });
+
+        // Clear Memory Logic
+        this.shadowRoot.getElementById('clear-mem').addEventListener('click', () => {
+            if(window.MemoryDB) window.MemoryDB.clear();
+        });
+
+        // Replace Icons
+        feather.replace();
+    }
+}
+customElements.define('custom-sidebar', CustomSidebar);

components/tools-panel.js

@@ -0,0 +1,233 @@
+class CustomToolsPanel extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;
+                    background: rgba(15, 23, 42, 0.5);
+                }
+                .tabs {
+                    display: flex;
+                    border-bottom: 1px solid #334155;
+                }
+                .tab-btn {
+                    flex: 1;
+                    background: transparent;
+                    border: none;
+                    color: #94a3b8;
+                    padding: 1rem;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 0.5rem;
+                    transition: all 0.2s;
+                }
+                .tab-btn:hover {
+                    background: rgba(255, 255, 255, 0.05);
+                    color: #e2e8f0;
+                }
+                .tab-btn.active {
+                    color: #6366f1;
+                    border-bottom: 2px solid #6366f1;
+                    background: rgba(99, 102, 241, 0.05);
+                }
+                .panel-content {
+                    flex: 1;
+                    overflow: hidden;
+                    display: none;
+                    flex-direction: column;
+                }
+                .panel-content.active {
+                    display: flex;
+                }
+                .upload-area {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 2rem;
+                    border: 2px dashed #334155;
+                    margin: 1rem;
+                    border-radius: 0.5rem;
+                    text-align: center;
+                    color: #94a3b8;
+                    cursor: pointer;
+                    transition: border-color 0.2s;
+                }
+                .upload-area:hover {
+                    border-color: #6366f1;
+                    color: #818cf8;
+                }
+                #monaco-container {
+                    width: 100%;
+                    height: 100%;
+                    padding: 1rem;
+                    box-sizing: border-box;
+                }
+                .file-list {
+                    padding: 0 1rem;
+                    overflow-y: auto;
+                }
+                .file-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem;
+                    background: #1e293b;
+                    margin-bottom: 0.5rem;
+                    border-radius: 0.25rem;
+                    font-size: 0.875rem;
+                }
+            </style>
+
+            <div class="tabs">
+                <button class="tab-btn active" data-tab="0">
+                    <i data-feather="file-text"></i> Docs
+                </button>
+                <button class="tab-btn" data-tab="1">
+                    <i data-feather="code"></i> Code
+                </button>
+            </div>
+
+            <div id="panel-0" class="panel-content active">
+                <div class="upload-area" id="drop-zone">
+                    <i data-feather="upload-cloud" style="width: 48px; height: 48px; margin-bottom: 1rem;"></i>
+                    <p>Drag & Drop PDF/Docx/Txt</p>
+                    <p style="font-size: 0.75rem; margin-top: 0.5rem;">or click to browse</p>
+                    <input type="file" id="file-input" multiple style="display: none;">
+                </div>
+                <div class="file-list" id="file-list">
+                    <!-- Uploaded files appear here -->
+                </div>
+            </div>
+
+            <div id="panel-1" class="panel-content">
+                <div id="monaco-container"></div>
+            </div>
+        `;
+
+        // Tab Logic
+        const tabs = this.shadowRoot.querySelectorAll('.tab-btn');
+        const panels = this.shadowRoot.querySelectorAll('.panel-content');
+        
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                tabs.forEach(t => t.classList.remove('active'));
+                panels.forEach(p => p.classList.remove('active'));
+                
+                tab.classList.add('active');
+                this.shadowRoot.getElementById(`panel-${tab.dataset.tab}`).classList.add('active');
+                
+                // Resize Monaco if code tab is active
+                if(tab.dataset.tab === "1" && window.monacoEditor) {
+                    window.monacoEditor.layout();
+                }
+            });
+        });
+
+        // File Upload Logic (Mock)
+        const dropZone = this.shadowRoot.getElementById('drop-zone');
+        const fileInput = this.shadowRoot.getElementById('file-input');
+        const fileList = this.shadowRoot.getElementById('file-list');
+
+        const handleFiles = (files) => {
+            Array.from(files).forEach(file => {
+                const item = document.createElement('div');
+                item.className = 'file-item';
+                item.innerHTML = `
+                    <i data-feather="file"></i>
+                    <span style="flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${file.name}</span>
+                    <i data-feather="check-circle" style="color: #34d399; width: 16px;"></i>
+                `;
+                fileList.prepend(item);
+                feather.replace();
+            });
+        };
+
+        dropZone.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', (e) => handleFiles(e.target.files));
+        
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.style.borderColor = '#6366f1';
+        });
+        
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.style.borderColor = '#334155';
+        });
+        
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.style.borderColor = '#334155';
+            handleFiles(e.dataTransfer.files);
+        });
+
+        // Monaco Editor Loader
+        this.loadMonaco();
+
+        // Listen for Switch Tab Event (from Script.js when code is generated)
+        window.appEvents.addEventListener('switch-tab', (e) => {
+            const index = e.detail.index;
+            tabs[index].click();
+        });
+
+        // Listen for Code Update
+        window.appEvents.addEventListener('update-code', (e) => {
+            if(window.monacoEditor) {
+                window.monacoEditor.setValue(e.detail.code);
+            }
+        });
+        
+        feather.replace();
+    }
+
+    loadMonaco() {
+        if (document.getElementById('monaco-script')) return; // Already loaded
+
+        const script = document.createElement('script');
+        script.id = 'monaco-script';
+        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js';
+        script.onload = () => {
+            require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' } });
+            require(['vs/editor/editor.main'], function() {
+                // Delay slightly to ensure container is rendered and has dimensions
+                setTimeout(() => {
+                    if(document.getElementById('monaco-container')) {
+                        // Access shadow root container
+                        const container = this.shadowRoot.getElementById('monaco-container'); 
+                        // Actually, the require callback scope 'this' might be lost, but standard monaco usage usually targets global or ID
+                        // We need to be careful with Shadow DOM and Monaco. 
+                        // Monaco appends to the body by default for overlays, but we want it inside our component.
+                        // Simplest way for this demo: Target by ID inside ShadowDOM
+                        
+                        // Because Monaco is a bit complex with ShadowDOM encapsulation (styles/events), 
+                        // we might need to use global or trick it. 
+                        // For this demo, let's attach to the specific ID if possible, or use window.monacoEditor for control.
+                        
+                        // Note: Monaco doesn't fully support ShadowDOM out of the box easily without configuration tweaks.
+                        // We will try to render it. If it fails, it might be due to the shadow root encapsulation blocking some global styles/events needed by Monaco's widget logic.
+                        // To make it robust, we often put the monaco container *outside* or pass specific options.
+                        
+                        // Let's try standard initialization on the element found in the shadowRoot of the custom element.
+                        const host = document.querySelector('custom-tools-panel').shadowRoot.getElementById('monaco-container');
+                        
+                        window.monacoEditor = monaco.editor.create(host, {
+                            value: '# AI-generated code will appear here\n# Start coding your vibe...',
+                            language: 'python',
+                            theme: 'vs-dark',
+                            automaticLayout: true,
+                            minimap: { enabled: false }
+                        });
+                    }
+                }, 500);
+            }.bind(this));
+        };
+        document.head.appendChild(script);
+    }
+}
+customElements.define('custom-tools-panel', CustomToolsPanel);

index.html

@@ -1,19 +1,66 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Synapse Coder Studio</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1', // Indigo 500
+                        secondary: '#1e293b', // Slate 800
+                        darkbg: '#0f172a', // Slate 900
+                        surface: '#1e293b', // Slate 800
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-darkbg text-slate-200 font-sans h-screen flex flex-col overflow-hidden">
+
+    <!-- Navbar -->
+    <custom-navbar class="h-16 flex-shrink-0 border-b border-slate-700 bg-slate-900/80 backdrop-blur-md z-20"></custom-navbar>
+
+    <!-- Main Layout -->
+    <div class="flex flex-1 overflow-hidden">
+        
+        <!-- Sidebar (Settings & Session) -->
+        <custom-sidebar class="w-80 hidden md:flex flex-col border-r border-slate-700 bg-slate-800/50 backdrop-blur-sm z-10 transition-all duration-300 transform -translate-x-full md:translate-x-0 absolute md:relative h-full" id="sidebar">
+        </custom-sidebar>
+
+        <!-- Mobile Toggle for Sidebar -->
+        <button id="sidebar-toggle" class="md:hidden fixed bottom-4 left-4 z-50 bg-primary p-3 rounded-full shadow-lg text-white">
+            <i data-feather="settings"></i>
+        </button>
+
+        <!-- Chat Area -->
+        <main class="flex-1 flex flex-col relative min-w-0 bg-darkbg">
+            <custom-chat-interface class="flex flex-col h-full w-full"></custom-chat-interface>
+        </main>
+
+        <!-- Tools Panel (Docs & Editor) -->
+        <custom-tools-panel class="w-96 hidden lg:flex flex-col border-l border-slate-700 bg-slate-800/30 backdrop-blur-sm relative transition-all duration-300" id="tools-panel">
+        </custom-tools-panel>
+    </div>
+
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/chat-interface.js"></script>
+    <script src="components/tools-panel.js"></script>
+
+    <!-- Main Logic -->
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,81 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Toggle Sidebar on Mobile
+    const toggleBtn = document.getElementById('sidebar-toggle');
+    const sidebar = document.getElementById('sidebar');
+    
+    if(toggleBtn && sidebar) {
+        toggleBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('-translate-x-full');
+        });
+    }
+
+    // Simulate Global Event Bus for Components
+    window.appEvents = new EventTarget();
+
+    // Mock API Keys (In real app, these would be env vars)
+    window.API_KEYS = {
+        TAVILY: 'tvly-XXXXXXXXX',
+        HUGGINGFACE: 'hf_XXXXXXXXX'
+    };
+
+    // Mock Memory (LocalStorage)
+    const MEMORY_KEY = 'synapse_memory_db';
+    
+    window.MemoryDB = {
+        save: (role, content) => {
+            const history = JSON.parse(localStorage.getItem(MEMORY_KEY) || '[]');
+            history.push({ role, content, timestamp: new Date().toISOString() });
+            localStorage.setItem(MEMORY_KEY, JSON.stringify(history));
+        },
+        load: () => {
+            return JSON.parse(localStorage.getItem(MEMORY_KEY) || '[]');
+        },
+        clear: () => {
+            localStorage.removeItem(MEMORY_KEY);
+            const event = new Event('memory-cleared');
+            window.appEvents.dispatchEvent(event);
+        }
+    };
+
+    // AI Simulation Logic
+    window.Agent = {
+        respond: async (message, context = {}) => {
+            return new Promise((resolve) => {
+                // Determine if it needs tools (mock)
+                const lowerMsg = message.toLowerCase();
+                let response = "";
+                let toolUsed = null;
+
+                if (lowerMsg.includes('search') || lowerMsg.includes('find')) {
+                    toolUsed = 'web_search';
+                    response = `I've searched the web for "${message}".\n\n**Found:**\n- *Latest AI Trends 2024* - The rise of multimodal agents is reshaping interfaces...\n- *Quantum Computing* - Breakthrough in error correction...\n\nSource: https://tech-news.daily/ai-trends`;
+                } else if (lowerMsg.includes('code') || lowerMsg.includes('function') || lowerMsg.includes('python')) {
+                    toolUsed = 'code_editor';
+                    response = `I've generated the Python code you requested. Check the code editor panel.\n\nHere is a summary of the logic:\n1. Initialize the class.\n2. Define the main loop.\n3. Handle exceptions gracefully.`;
+                    // Trigger code injection event
+                    setTimeout(() => {
+                        const codeEvent = new CustomEvent('update-code', { 
+                            detail: { 
+                                code: `import os\n\nclass Agent:\n    def __init__(self, name):\n        self.name = name\n        print(f"Agent {name} initialized")\n\n    def run(self):\n        print("Running logic...")\n\nif __name__ == "__main__":\n    agent = Agent("Synapse")\n    agent.run()` 
+                            } 
+                        });
+                        window.appEvents.dispatchEvent(codeEvent);
+                        
+                        // Trigger tab switch
+                        const switchTabEvent = new CustomEvent('switch-tab', { detail: { index: 1 } });
+                        window.appEvents.dispatchEvent(switchTabEvent);
+                    }, 1000);
+                } else if (lowerMsg.includes('doc') || lowerMsg.includes('file')) {
+                    response = "I've analyzed the uploaded documents. It appears to be a specification sheet for the API integration. Key points include the endpoint structure and authentication method.";
+                } else {
+                    response = `I understand. You said: "${message}".\n\nAs an AI Agent, I can help you search the web, analyze documents, or write code. How would you like to proceed?`;
+                }
+
+                // Simulate Network Delay
+                setTimeout(() => {
+                    resolve(response);
+                }, 1500);
+            });
+        }
+    };
+});

style.css

@@ -1,28 +1,84 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #0f172a; 
+}
+::-webkit-scrollbar-thumb {
+    background: #334155; 
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #475569; 
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); }
+    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes typing {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-3px); }
+    100% { transform: translateY(0); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.animate-fade-in {
+    animation: fadeIn 0.3s ease-out forwards;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.message-content code {
+    background-color: #1e293b;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Courier New', Courier, monospace;
+    color: #e2e8f0;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.message-content pre {
+    background-color: #0f172a;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    border: 1px solid #334155;
+    margin: 0.5rem 0;
 }
+
+.message-content pre code {
+    background-color: transparent;
+    padding: 0;
+    border: none;
+    color: #a5b4fc;
+}
+
+/* Loader */
+.typing-indicator span {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background-color: #6366f1;
+    border-radius: 50%;
+    animation: typing 0.6s infinite;
+    margin: 0 2px;
+}
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.1s;
+}
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.2s;
+}
+
+/* Monaco Editor Container Fixes */
+#monaco-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}