Add ui.py — complete Gradio UI with 6 tabs

multeclaw/ui.py

@@ -0,0 +1,562 @@
+"""
+Multeclaw Gradio UI — complete multi-tab interface with chat, settings, status, and tools.
+"""
+
+import json
+import time
+import os
+from datetime import datetime
+
+import gradio as gr
+
+from multeclaw.config import MODEL_REGISTRY, SYSTEM_PROMPTS, BUILT_IN_TOOLS, Provider
+from multeclaw.agent import MulteclawAgent, TaskRouter
+
+# ─── Global Agent Instance ─────────────────────────────────────────────────────
+agent = MulteclawAgent()
+
+# ─── CSS ───────────────────────────────────────────────────────────────────────
+CSS = """
+/* Layout */
+.gradio-container { max-width: 1500px !important; margin: auto; }
+
+/* Header */
+.header-banner {
+    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+    border-radius: 16px;
+    padding: 24px 32px;
+    margin-bottom: 16px;
+    color: white;
+    text-align: center;
+}
+.header-banner h1 { margin: 0; font-size: 2em; }
+.header-banner p { margin: 4px 0 0 0; opacity: 0.8; font-size: 0.95em; }
+
+/* Model badge */
+.model-badge {
+    display: inline-block;
+    padding: 2px 10px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+
+/* Status indicators */
+.status-ok { color: #4ade80 !important; }
+.status-err { color: #f87171 !important; }
+.status-warn { color: #fbbf24 !important; }
+
+/* Chatbot tweaks */
+#main-chatbot { min-height: 520px; }
+#main-chatbot .message { max-width: 85% !important; }
+
+/* Settings cards */
+.settings-card {
+    border: 1px solid var(--border-color-primary);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 12px;
+}
+
+/* Footer */
+.footer-text { text-align: center; opacity: 0.5; font-size: 0.8em; margin-top: 16px; }
+"""
+
+# ─── JS ────────────────────────────────────────────────────────────────────────
+HEAD_JS = """
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    document.title = 'Multeclaw — AI Agent System';
+});
+</script>
+"""
+
+
+# ─── Chat Handler ──────────────────────────────────────────────────────────────
+def chat_respond(
+    message: str,
+    history: list[dict],
+    model_name: str,
+    persona: str,
+    custom_system_prompt: str,
+    temperature: float,
+    max_tokens: int,
+    enable_tools: bool,
+    enable_planning: bool,
+):
+    """
+    Main chat function. Streams responses from the agent.
+    """
+    if not message.strip():
+        yield ""
+        return
+
+    # Resolve system prompt
+    if persona == "Custom":
+        system_prompt = custom_system_prompt
+    else:
+        system_prompt = SYSTEM_PROMPTS.get(persona, SYSTEM_PROMPTS["Multeclaw Agent"])
+
+    # Stream the response
+    partial = ""
+    try:
+        for chunk in agent.chat_stream(
+            message=message,
+            history=history,
+            model_name=model_name,
+            system_prompt=system_prompt,
+            temperature=temperature,
+            max_tokens=int(max_tokens),
+            enable_tools=enable_tools,
+            enable_planning=enable_planning,
+        ):
+            partial += chunk
+            yield partial
+    except Exception as e:
+        error_msg = f"\n\n❌ **Error**: {type(e).__name__}: {str(e)}"
+        yield partial + error_msg
+
+
+# ─── Settings Handlers ─────────────────────────────────────────────────────────
+def save_api_keys(openai_key, anthropic_key, hf_key, groq_key, ollama_url):
+    """Save API keys to the agent's client."""
+    results = []
+    if openai_key:
+        agent.client.set_api_key("openai", openai_key)
+        results.append("✅ OpenAI key saved")
+    if anthropic_key:
+        agent.client.set_api_key("anthropic", anthropic_key)
+        results.append("✅ Anthropic key saved")
+    if hf_key:
+        agent.client.set_api_key("huggingface", hf_key)
+        results.append("✅ HuggingFace key saved")
+    if groq_key:
+        agent.client.set_api_key("groq", groq_key)
+        results.append("✅ Groq key saved")
+    if ollama_url:
+        agent.client.set_ollama_url(ollama_url)
+        results.append(f"✅ Ollama URL set to {ollama_url}")
+
+    if not results:
+        return "⚠️ No keys provided.", get_available_models()
+
+    return "\n".join(results), get_available_models()
+
+
+def test_connections():
+    """Test all configured API connections."""
+    results = agent.client.check_connections()
+    return json.dumps(results, indent=2)
+
+
+def get_available_models():
+    """Return list of available model names based on configured keys."""
+    return gr.update(choices=agent.client.get_available_models())
+
+
+# ─── Status Handlers ───────────────────────────────────────────────────────────
+def get_status():
+    """Get current agent status."""
+    available = agent.client.get_available_models()
+    mem = agent.memory
+    status = {
+        "available_models": available,
+        "total_models_configured": len(available),
+        "conversation_messages": len(mem.conversation),
+        "tool_calls_made": len(mem.tool_results),
+        "plans_executed": len(mem.task_plans),
+        "session_started": mem.conversation[0]["timestamp"] if mem.conversation else "N/A",
+    }
+    return json.dumps(status, indent=2)
+
+
+def get_agent_logs():
+    return agent.get_logs(100)
+
+
+def clear_all():
+    agent.clear_memory()
+    return "🗑️ All memory and logs cleared."
+
+
+def get_model_info(model_name: str):
+    """Get detailed info about a model."""
+    if model_name not in MODEL_REGISTRY:
+        return "Select a model to see details."
+    m = MODEL_REGISTRY[model_name]
+    return f"""### {m.display_name}
+| Property | Value |
+|----------|-------|
+| **Provider** | {m.provider.value.title()} |
+| **Model ID** | `{m.model_id}` |
+| **Tier** | {m.tier.title()} |
+| **Context Window** | {m.context_window:,} tokens |
+| **Max Output** | {m.max_tokens:,} tokens |
+| **Streaming** | {'✅' if m.supports_streaming else '❌'} |
+| **Tool Use** | {'✅' if m.supports_tools else '❌'} |
+
+{m.description}"""
+
+
+# ─── Build the UI ──────────────────────────────────────────────────────────────
+THEME = gr.themes.Soft(
+    primary_hue=gr.themes.colors.indigo,
+    secondary_hue=gr.themes.colors.purple,
+    neutral_hue=gr.themes.colors.slate,
+    font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
+)
+
+
+def build_ui() -> gr.Blocks:
+    with gr.Blocks(
+        title="Multeclaw — AI Agent System",
+        fill_height=True,
+    ) as demo:
+
+        # ─── Header ───────────────────────────────────────────────────────
+        gr.HTML("""
+        <div class="header-banner">
+            <h1>🦅 Multeclaw</h1>
+            <p>Multi-Model AI Agent System — GPT · Claude · Llama · Mistral · Qwen · Groq · Ollama</p>
+        </div>
+        """)
+
+        # ─── Main Tabs ────────────────────────────────────────────────────
+        with gr.Tabs(selected="chat") as tabs:
+
+            # ═══════════════════════════════════════════════════════════════
+            # TAB 1: CHAT
+            # ═══════════════════════════════════════════════════════════════
+            with gr.Tab("💬 Chat", id="chat"):
+                with gr.Row():
+                    # Left sidebar — controls
+                    with gr.Column(scale=1, min_width=280):
+                        gr.Markdown("### 🤖 Model")
+                        model_selector = gr.Dropdown(
+                            choices=list(MODEL_REGISTRY.keys()),
+                            value="GPT-4o Mini",
+                            label="Select Model",
+                            interactive=True,
+                            elem_id="model-selector",
+                        )
+                        model_info_display = gr.Markdown(
+                            value=get_model_info("GPT-4o Mini"),
+                            elem_id="model-info",
+                        )
+                        model_selector.change(
+                            fn=get_model_info,
+                            inputs=[model_selector],
+                            outputs=[model_info_display],
+                        )
+
+                        gr.Markdown("### 🎭 Persona")
+                        persona_selector = gr.Dropdown(
+                            choices=list(SYSTEM_PROMPTS.keys()),
+                            value="Multeclaw Agent",
+                            label="System Persona",
+                            interactive=True,
+                        )
+                        custom_prompt = gr.Textbox(
+                            label="Custom System Prompt",
+                            placeholder="Enter your custom system prompt here...",
+                            lines=3,
+                            visible=False,
+                        )
+                        persona_selector.change(
+                            fn=lambda p: gr.update(visible=(p == "Custom")),
+                            inputs=[persona_selector],
+                            outputs=[custom_prompt],
+                        )
+
+                        gr.Markdown("### ⚙️ Parameters")
+                        temperature = gr.Slider(
+                            minimum=0.0, maximum=2.0, value=0.7, step=0.05,
+                            label="Temperature",
+                            info="0 = deterministic, 2 = very creative",
+                        )
+                        max_tokens = gr.Slider(
+                            minimum=256, maximum=16384, value=4096, step=256,
+                            label="Max Tokens",
+                        )
+
+                        gr.Markdown("### 🛠️ Agent Features")
+                        enable_tools = gr.Checkbox(
+                            value=True, label="Enable Tools",
+                            info="Calculator, code execution, file I/O",
+                        )
+                        enable_planning = gr.Checkbox(
+                            value=True, label="Enable Planning",
+                            info="Auto-decompose complex tasks into steps",
+                        )
+
+                    # Right side — chat
+                    with gr.Column(scale=3):
+                        chat_interface = gr.ChatInterface(
+                            fn=chat_respond,
+                            chatbot=gr.Chatbot(
+                                elem_id="main-chatbot",
+                                height=580,
+                                placeholder="🦅 **Multeclaw is ready.** Select a model, configure your settings, and start chatting.\n\nI support GPT, Claude, Llama, Mistral, Qwen, Groq, and Ollama models.",
+                            ),
+                            additional_inputs=[
+                                model_selector,
+                                persona_selector,
+                                custom_prompt,
+                                temperature,
+                                max_tokens,
+                                enable_tools,
+                                enable_planning,
+                            ],
+                            examples=[
+                                ["Explain quantum computing in simple terms"],
+                                ["Write a Python function to find all prime numbers up to n"],
+                                ["Calculate the compound interest on $10,000 at 7% for 20 years"],
+                                ["Step by step, analyze the pros and cons of microservices vs monolith"],
+                                ["Create a complete REST API design for a task management app"],
+                            ],
+                            save_history=True,
+                            editable=True,
+                            concurrency_limit=5,
+                        )
+
+            # ═══════════════════════════════════════════════════════════════
+            # TAB 2: API KEYS & SETTINGS
+            # ═══════════════════════════════════════════════════════════════
+            with gr.Tab("🔑 Settings", id="settings"):
+                gr.Markdown("### API Key Configuration")
+                gr.Markdown("Enter your API keys below. Keys are stored in-memory only — they are **never** saved to disk.")
+
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("#### Cloud Providers")
+                        openai_key = gr.Textbox(
+                            label="OpenAI API Key",
+                            type="password",
+                            placeholder="sk-...",
+                            info="For GPT-4o, GPT-4o Mini, GPT-4 Turbo",
+                        )
+                        anthropic_key = gr.Textbox(
+                            label="Anthropic API Key",
+                            type="password",
+                            placeholder="sk-ant-...",
+                            info="For Claude 4 Opus, Sonnet, Haiku",
+                        )
+                        hf_key = gr.Textbox(
+                            label="HuggingFace Token",
+                            type="password",
+                            placeholder="hf_...",
+                            info="For Llama, Qwen, Mistral via HF Inference",
+                        )
+                        groq_key = gr.Textbox(
+                            label="Groq API Key",
+                            type="password",
+                            placeholder="gsk_...",
+                            info="For ultra-fast Llama 3, Mixtral inference",
+                        )
+
+                    with gr.Column():
+                        gr.Markdown("#### Local Models")
+                        ollama_url = gr.Textbox(
+                            label="Ollama Server URL",
+                            value="http://localhost:11434",
+                            info="URL of your local Ollama instance",
+                        )
+
+                        gr.Markdown("#### Actions")
+                        with gr.Row():
+                            save_btn = gr.Button("💾 Save Keys", variant="primary", size="lg")
+                            test_btn = gr.Button("🔌 Test Connections", variant="secondary", size="lg")
+
+                        save_status = gr.Textbox(label="Status", interactive=False, lines=5)
+                        connection_results = gr.Code(label="Connection Test Results", language="json", lines=10)
+
+                save_btn.click(
+                    fn=save_api_keys,
+                    inputs=[openai_key, anthropic_key, hf_key, groq_key, ollama_url],
+                    outputs=[save_status, model_selector],
+                )
+                test_btn.click(
+                    fn=test_connections,
+                    inputs=[],
+                    outputs=[connection_results],
+                )
+
+            # ═══════════════════════════════════════════════════════════════
+            # TAB 3: MODELS
+            # ═══════════════════════════════════════════════════════════════
+            with gr.Tab("📦 Models", id="models"):
+                gr.Markdown("### Model Registry")
+                gr.Markdown("All supported models and their capabilities.")
+
+                # Build model table
+                model_rows = []
+                for name, m in MODEL_REGISTRY.items():
+                    model_rows.append([
+                        name,
+                        m.provider.value.title(),
+                        m.tier.title(),
+                        f"{m.context_window:,}",
+                        "✅" if m.supports_streaming else "❌",
+                        "✅" if m.supports_tools else "❌",
+                        m.description,
+                    ])
+
+                gr.Dataframe(
+                    value=model_rows,
+                    headers=["Model", "Provider", "Tier", "Context", "Streaming", "Tools", "Description"],
+                    datatype=["str", "str", "str", "str", "str", "str", "str"],
+                    interactive=False,
+                    wrap=True,
+                )
+
+            # ═══════════════════════════════════════════════════════════════
+            # TAB 4: TOOLS
+            # ═══════════════════════════════════════════════════════════════
+            with gr.Tab("🛠️ Tools", id="tools"):
+                gr.Markdown("### Built-in Agent Tools")
+                gr.Markdown("These tools are available when **Enable Tools** is checked in Chat settings.")
+
+                for name, tool in BUILT_IN_TOOLS.items():
+                    with gr.Accordion(f"🔧 {name}", open=False):
+                        gr.Markdown(f"**Description:** {tool['description']}")
+                        params = tool["parameters"]["properties"]
+                        required = tool["parameters"].get("required", [])
+                        param_text = ""
+                        for pname, pdef in params.items():
+                            req = " *(required)*" if pname in required else ""
+                            param_text += f"- `{pname}` ({pdef['type']}): {pdef.get('description', '')}{req}\n"
+                        gr.Markdown(f"**Parameters:**\n{param_text}")
+
+                gr.Markdown("---")
+                gr.Markdown("### Quick Tool Test")
+                with gr.Row():
+                    test_tool_name = gr.Dropdown(
+                        choices=list(BUILT_IN_TOOLS.keys()),
+                        value="calculator",
+                        label="Tool",
+                    )
+                    test_tool_input = gr.Textbox(
+                        label="Input (JSON arguments)",
+                        value='{"expression": "2**10 + sqrt(144)"}',
+                        lines=2,
+                    )
+                test_tool_btn = gr.Button("▶️ Run Tool", variant="primary")
+                test_tool_output = gr.Code(label="Result", language="json")
+
+                def run_tool_test(tool_name, input_json):
+                    try:
+                        args = json.loads(input_json)
+                        result = agent.tools.execute(tool_name, args)
+                        return json.dumps(result, indent=2)
+                    except json.JSONDecodeError as e:
+                        return json.dumps({"error": f"Invalid JSON: {str(e)}"}, indent=2)
+                    except Exception as e:
+                        return json.dumps({"error": str(e)}, indent=2)
+
+                test_tool_btn.click(
+                    fn=run_tool_test,
+                    inputs=[test_tool_name, test_tool_input],
+                    outputs=[test_tool_output],
+                )
+
+            # ═══════════════════════════════════════════════════════════════
+            # TAB 5: STATUS & LOGS
+            # ═══════════════════════════════════════════════════════════════
+            with gr.Tab("📊 Status", id="status"):
+                gr.Markdown("### Agent Status & Monitoring")
+
+                with gr.Row():
+                    with gr.Column():
+                        status_display = gr.Code(label="Agent Status", language="json", lines=12)
+                        refresh_status_btn = gr.Button("🔄 Refresh Status", variant="secondary")
+                        refresh_status_btn.click(fn=get_status, outputs=[status_display])
+
+                    with gr.Column():
+                        logs_display = gr.Textbox(
+                            label="Agent Logs",
+                            lines=15,
+                            interactive=False,
+                        )
+                        with gr.Row():
+                            refresh_logs_btn = gr.Button("🔄 Refresh Logs")
+                            clear_btn = gr.Button("🗑️ Clear All", variant="stop")
+
+                        refresh_logs_btn.click(fn=get_agent_logs, outputs=[logs_display])
+                        clear_btn.click(fn=clear_all, outputs=[logs_display])
+
+            # ═══════════════════════════════════════════════════════════════
+            # TAB 6: ABOUT
+            # ═══════════════════════════════════════════════════════════════
+            with gr.Tab("ℹ️ About", id="about"):
+                gr.Markdown("""
+### 🦅 Multeclaw — Multi-Model AI Agent System
+
+**Multeclaw** is a complete AI agent framework that connects to multiple LLM providers through a single interface.
+
+---
+
+#### 🏗️ Architecture
+
+| Component | Role |
+|-----------|------|
+| **Router** | Classifies tasks → direct, tool-assisted, multi-step, code, analysis |
+| **Planner** | Decomposes complex objectives into executable step sequences |
+| **Executor** | Runs LLM completions and tool calls with streaming |
+| **Memory** | Tracks conversation history, tool results, and session context |
+| **Tool System** | Sandboxed calculator, code execution, file I/O, web search |
+| **Safety Layer** | Input/output content filtering |
+| **Repair Loop** | Retries failed tool calls with error context |
+
+#### 🤖 Supported Providers
+
+| Provider | Models | Key Feature |
+|----------|--------|-------------|
+| **OpenAI** | GPT-4o, GPT-4o Mini, GPT-4 Turbo | Strong reasoning, tool calling |
+| **Anthropic** | Claude 4 Opus, Sonnet, 3.5 Haiku | Deep analysis, long context |
+| **HuggingFace** | Llama 3, Qwen 2.5, Mistral | Open models via inference API |
+| **Groq** | Llama 3 70B, Mixtral 8x7B | Ultra-fast inference |
+| **Ollama** | Any local model | Privacy, offline use |
+
+#### 🔄 Agent Loops
+
+1. **Reasoning Loop** — LLM processes the request with full context
+2. **Tool Loop** — LLM decides to call tools, results fed back iteratively
+3. **Planning Loop** — Complex tasks decomposed into steps, executed sequentially
+4. **Repair Loop** — Failed operations retried with error context
+
+#### 🛡️ Safety
+
+- Input content filtering blocks harmful requests
+- Code execution is sandboxed with timeout limits
+- API keys stored in-memory only, never persisted to disk
+- File operations restricted to safe paths
+
+---
+
+*Built with Gradio, OpenAI SDK, Anthropic SDK, HuggingFace Hub, and LiteLLM.*
+                """)
+
+        # Footer
+        gr.HTML('<p class="footer-text">Multeclaw v1.0 — Multi-Model AI Agent System</p>')
+
+    return demo
+
+
+# ─── Entry Point ───────────────────────────────────────────────────────────────
+def main():
+    demo = build_ui()
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        show_error=True,
+        theme=THEME,
+        css=CSS,
+        head=HEAD_JS,
+    )
+
+
+if __name__ == "__main__":
+    main()