{"repo": "brothergbk/agent-swarm-docker", "files": {"web/templates/settings.html": {"54b9eba9f4ecad678304d55796cd4865233a3a8b": {"t": 1785746401.8873832, "n": 63056, "h": "eb03cca3a9ef36f3", "c": "{% extends \"base.html\" %}\n\n{% block title %}Settings - AutoIT Swarm{% endblock %}\n\n{% block content %}\n<div class=\"p-8\">\n    <!-- Header -->\n    <div class=\"flex justify-between items-center mb-6\">\n        <div>\n            <h2 class=\"text-3xl font-bold\">Settings</h2>\n            <p class=\"text-slate-400 mt-1\">Configure LLM providers, system settings, and integrations</p>\n        </div>\n        <button onclick=\"saveSettings()\" class=\"btn-primary flex items-center gap-2\">\n            <i class=\"fas fa-save\"></i>\n            Save Changes\n        </button>\n    </div>\n\n    <!-- Tabs Navigation -->\n    <div class=\"mb-6 border-b border-slate-700\">\n        <div class=\"flex gap-2\">\n            <button onclick=\"switchTab('llm')\" id=\"tab-llm\" class=\"tab-btn active px-4 py-2 text-sm font-medium border-b-2 border-blue-500 text-blue-400\">\n                <i class=\"fas fa-brain mr-2\"></i>LLM Providers\n            </button>\n            <button onclick=\"switchTab('hitl')\" id=\"tab-hitl\" class=\"tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-slate-400 hover:text-slate-300\">\n                <i class=\"fas fa-user-shield mr-2\"></i>HITL\n            </button>\n            <button onclick=\"switchTab('output')\" id=\"tab-output\" class=\"tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-slate-400 hover:text-slate-300\">\n                <i class=\"fas fa-share-square mr-2\"></i>Output\n            </button>\n            <button onclick=\"switchTab('webhooks')\" id=\"tab-webhooks\" class=\"tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-slate-400 hover:text-slate-300\">\n                <i class=\"fas fa-webhook mr-2\"></i>Webhooks\n            </button>\n            <button onclick=\"switchTab('agents')\" id=\"tab-agents\" class=\"tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-slate-400 hover:text-slate-300\">\n                <i class=\"fas fa-robot mr-2\"></i>Agents\n            </button>\n            <button onclick=\"switchTab('system')\" id=\"tab-system\" class=\"tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-slate-400 hover:text-slate-300\">\n                <i class=\"fas fa-cog mr-2\"></i>System\n            </button>\n        </div>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"space-y-6\">\n        <!-- LLM Providers Tab -->\n        <div id=\"tab-content-llm\" class=\"tab-content\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n                <!-- Provider Selection -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-cloud text-blue-400\"></i>\n                        LLM Provider\n                    </h3>\n                    <div class=\"space-y-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Primary Provider\n                            </label>\n                            <select id=\"llm-provider\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white focus:outline-none focus:border-blue-500\">\n                                <option value=\"ollama\">Ollama (Local)</option>\n                                <option value=\"openai\">OpenAI</option>\n                                <option value=\"claude\">Anthropic Claude</option>\n                                <option value=\"openrouter\">OpenRouter</option>\n                                <option value=\"deepseek\">DeepSeek</option>\n                                <option value=\"qwen\">Qwen (Alibaba)</option>\n                            </select>\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Model Name\n                            </label>\n                            <input type=\"text\" id=\"llm-model\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"e.g., llama3, gpt-4, claude-3\">\n                            <p class=\"text-xs text-slate-500 mt-1\" id=\"model-hint\">Default: lfm2.5-thinking:latest (Ollama)</p>\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                API URL / Endpoint\n                            </label>\n                            <input type=\"text\" id=\"llm-url\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"http://localhost:11434\">\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                API Key\n                            </label>\n                            <input type=\"password\" id=\"llm-api-key\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"sk-...\">\n                            <p class=\"text-xs text-slate-500 mt-1\" id=\"api-key-hint\">Not required for Ollama (local)</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Model Parameters -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-sliders-h text-purple-400\"></i>\n                        Model Parameters\n                    </h3>\n                    <div class=\"space-y-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Temperature: <span id=\"temperature-value\" class=\"text-blue-400\">0.7</span>\n                            </label>\n                            <input type=\"range\" id=\"llm-temperature\" min=\"0\" max=\"2\" step=\"0.1\" class=\"w-full\">\n                            <div class=\"flex justify-between text-xs text-slate-500 mt-1\">\n                                <span>0 (Deterministic)</span>\n                                <span>2 (Very Creative)</span>\n                            </div>\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Timeout (seconds)\n                            </label>\n                            <input type=\"number\" id=\"llm-timeout\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"120\">\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Max Retries\n                            </label>\n                            <input type=\"number\" id=\"llm-retries\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"3\">\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Max Tokens\n                            </label>\n                            <input type=\"number\" id=\"llm-max-tokens\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"4096\">\n                        </div>\n                    </div>\n\n                    <!-- Test Connection -->\n                    <div class=\"mt-6 pt-6 border-t border-slate-700\">\n                        <button onclick=\"testConnection()\" class=\"bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition\">\n                            <i class=\"fas fa-plug\"></i>\n                            Test Connection\n                        </button>\n                        <div id=\"connection-status\" class=\"mt-3 hidden\">\n                            <span class=\"flex items-center gap-2\">\n                                <span id=\"connection-indicator\" class=\"w-2 h-2 rounded-full\"></span>\n                                <span id=\"connection-text\" class=\"text-sm\"></span>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Provider-specific info -->\n            <div class=\"mt-6 card p-6 bg-gradient-to-r from-blue-900/20 to-purple-900/20 border-blue-800/30\">\n                <h4 class=\"font-semibold mb-3 text-blue-400\">\n                    <i class=\"fas fa-info-circle mr-2\"></i>Provider Quick Reference\n                </h4>\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-sm\">\n                    <div>\n                        <strong class=\"text-white\">Ollama:</strong>\n                        <p class=\"text-slate-400 mt-1\">Local LLM runner. No API key needed. URL: http://localhost:11434</p>\n                    </div>\n                    <div>\n                        <strong class=\"text-white\">OpenAI:</strong>\n                        <p class=\"text-slate-400 mt-1\">GPT-4, GPT-3.5. API key required. URL: https://api.openai.com/v1</p>\n                    </div>\n                    <div>\n                        <strong class=\"text-white\">Claude:</strong>\n                        <p class=\"text-slate-400 mt-1\">Anthropic's Claude. API key required. URL: https://api.anthropic.com</p>\n                    </div>\n                    <div>\n                        <strong class=\"text-white\">OpenRouter:</strong>\n                        <p class=\"text-slate-400 mt-1\">Multi-provider gateway. API key required. URL: https://openrouter.ai/api</p>\n                    </div>\n                    <div>\n                        <strong class=\"text-white\">DeepSeek:</strong>\n                        <p class=\"text-slate-400 mt-1\">DeepSeek AI models. API key required. URL: https://api.deepseek.com</p>\n                    </div>\n                    <div>\n                        <strong class=\"text-white\">Qwen:</strong>\n                        <p class=\"text-slate-400 mt-1\">Alibaba's Qwen models. API key required. URL: https://dashscope.aliyuncs.com</p>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- HITL Tab -->\n        <div id=\"tab-content-hitl\" class=\"tab-content hidden\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n                <!-- HITL Mode -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-user-shield text-yellow-400\"></i>\n                        HITL Mode\n                    </h3>\n                    <div class=\"space-y-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Mode\n                            </label>\n                            <select id=\"hitl-mode\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\">\n                                <option value=\"cli\">CLI</option>\n                                <option value=\"web\">Web (Current)</option>\n                                <option value=\"email\">Email</option>\n                                <option value=\"webhook\">Webhook</option>\n                            </select>\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Timeout (minutes)\n                            </label>\n                            <input type=\"number\" id=\"hitl-timeout\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"30\">\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Confidence Threshold: <span id=\"confidence-value\" class=\"text-yellow-400\">0.6</span>\n                            </label>\n                            <input type=\"range\" id=\"hitl-confidence\" min=\"0\" max=\"1\" step=\"0.1\" class=\"w-full\">\n                            <div class=\"flex justify-between text-xs text-slate-500 mt-1\">\n                                <span>0 (Always escalate)</span>\n                                <span>1 (Never escalate)</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Escalation Triggers -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-exclamation-triangle text-red-400\"></i>\n                        Escalation Triggers\n                    </h3>\n                    <div class=\"space-y-3\">\n                        <label class=\"flex items-center gap-3 p-2 bg-slate-800/50 rounded-lg\">\n                            <input type=\"checkbox\" id=\"trigger-final-delivery\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Final Delivery Review</span>\n                        </label>\n                        <label class=\"flex items-center gap-3 p-2 bg-slate-800/50 rounded-lg\">\n                            <input type=\"checkbox\" id=\"trigger-no-solution\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">No Solution Found</span>\n                        </label>\n                        <label class=\"flex items-center gap-3 p-2 bg-slate-800/50 rounded-lg\">\n                            <input type=\"checkbox\" id=\"trigger-deadlock\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Deadlock Detected</span>\n                        </label>\n                        <label class=\"flex items-center gap-3 p-2 bg-slate-800/50 rounded-lg\">\n                            <input type=\"checkbox\" id=\"trigger-low-confidence\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Low Confidence</span>\n                        </label>\n                        <label class=\"flex items-center gap-3 p-2 bg-slate-800/50 rounded-lg\">\n                            <input type=\"checkbox\" id=\"trigger-security\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Security Critical</span>\n                        </label>\n                        <label class=\"flex items-center gap-3 p-2 bg-slate-800/50 rounded-lg\">\n                            <input type=\"checkbox\" id=\"trigger-ambiguous\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Ambiguous Requirements</span>\n                        </label>\n                        <label class=\"flex items-center gap-3 p-2 bg-slate-800/50 rounded-lg\">\n                            <input type=\"checkbox\" id=\"trigger-budget\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Budget Exceeded</span>\n                        </label>\n                        <label class=\"flex items-center gap-3 p-2 bg-slate-800/50 rounded-lg\">\n                            <input type=\"checkbox\" id=\"trigger-agent-error\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Agent Error</span>\n                        </label>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Output Tab -->\n        <div id=\"tab-content-output\" class=\"tab-content hidden\">\n            <p class=\"text-slate-400 text-sm mb-4\">\n                Configure where task outputs and results should be sent when completed.\n            </p>\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n                <!-- File Output -->\n                <div class=\"card p-6\">\n                    <h4 class=\"font-medium mb-3 flex items-center gap-2\">\n                        <i class=\"fas fa-file text-blue-400\"></i>\n                        File Output\n                    </h4>\n                    <div class=\"space-y-3\">\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">Output Directory</label>\n                            <input type=\"text\" id=\"output-directory\" class=\"w-full bg-slate-900 border border-slate-600 rounded p-2 text-sm text-white\" placeholder=\"./output\">\n                        </div>\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">File Format</label>\n                            <select id=\"output-format\" class=\"w-full bg-slate-900 border border-slate-600 rounded p-2 text-sm text-white\">\n                                <option value=\"json\">JSON</option>\n                                <option value=\"markdown\">Markdown</option>\n                                <option value=\"text\">Plain Text</option>\n                                <option value=\"all\">All Formats</option>\n                            </select>\n                        </div>\n                        <label class=\"flex items-center gap-2\">\n                            <input type=\"checkbox\" id=\"output-file-enabled\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Enable file output</span>\n                        </label>\n                    </div>\n                </div>\n\n                <!-- Email Output -->\n                <div class=\"card p-6\">\n                    <h4 class=\"font-medium mb-3 flex items-center gap-2\">\n                        <i class=\"fas fa-envelope text-yellow-400\"></i>\n                        Email Output\n                    </h4>\n                    <div class=\"space-y-3\">\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">SMTP Host</label>\n                            <input type=\"text\" id=\"email-smtp-host\" class=\"w-full bg-slate-900 border border-slate-600 rounded p-2 text-sm text-white\" placeholder=\"smtp.gmail.com\">\n                        </div>\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">Recipient Email</label>\n                            <input type=\"email\" id=\"email-recipient\" class=\"w-full bg-slate-900 border border-slate-600 rounded p-2 text-sm text-white\" placeholder=\"user@example.com\">\n                        </div>\n                        <label class=\"flex items-center gap-2\">\n                            <input type=\"checkbox\" id=\"output-email-enabled\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Enable email output</span>\n                        </label>\n                    </div>\n                </div>\n\n                <!-- Webhook Output -->\n                <div class=\"card p-6\">\n                    <h4 class=\"font-medium mb-3 flex items-center gap-2\">\n                        <i class=\"fas fa-bolt text-green-400\"></i>\n                        Completion Webhook\n                    </h4>\n                    <div class=\"space-y-3\">\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">Webhook URL</label>\n                            <input type=\"url\" id=\"output-webhook-url\" class=\"w-full bg-slate-900 border border-slate-600 rounded p-2 text-sm text-white\" placeholder=\"https://api.example.com/webhook\">\n                        </div>\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">Secret Token</label>\n                            <input type=\"password\" id=\"output-webhook-secret\" class=\"w-full bg-slate-900 border border-slate-600 rounded p-2 text-sm text-white\" placeholder=\"your-secret\">\n                        </div>\n                        <label class=\"flex items-center gap-2\">\n                            <input type=\"checkbox\" id=\"output-webhook-enabled\" class=\"rounded bg-slate-900 border-slate-600\">\n                            <span class=\"text-sm\">Enable on completion</span>\n                        </label>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Webhooks Tab -->\n        <div id=\"tab-content-webhooks\" class=\"tab-content hidden\">\n            <p class=\"text-slate-400 text-sm mb-4\">\n                Configure webhooks for third-party integrations.\n            </p>\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n                <!-- Outgoing Webhooks -->\n                <div class=\"card p-6\">\n                    <h4 class=\"font-medium mb-3 text-blue-400 flex items-center gap-2\">\n                        <i class=\"fas fa-arrow-up\"></i>\n                        Outgoing Webhooks (Send to External)\n                    </h4>\n                    <p class=\"text-xs text-slate-500 mb-4\">Send task events to external systems</p>\n                    <div class=\"space-y-3\">\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">Webhook URL</label>\n                            <input type=\"url\" id=\"webhook-outgoing-url\" class=\"w-full bg-slate-800 border border-slate-600 rounded p-2 text-sm text-white\" placeholder=\"https://api.example.com/webhook\">\n                        </div>\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">Secret Token (HMAC)</label>\n                            <input type=\"password\" id=\"webhook-secret\" class=\"w-full bg-slate-800 border border-slate-600 rounded p-2 text-sm text-white\" placeholder=\"your-secret-token\">\n                        </div>\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-2\">Events to Send</label>\n                            <div class=\"grid grid-cols-2 gap-2\">\n                                <label class=\"flex items-center gap-2 text-sm\">\n                                    <input type=\"checkbox\" id=\"webhook-event-task-created\" class=\"rounded bg-slate-900 border-slate-600\">\n                                    <span>Task Created</span>\n                                </label>\n                                <label class=\"flex items-center gap-2 text-sm\">\n                                    <input type=\"checkbox\" id=\"webhook-event-task-updated\" class=\"rounded bg-slate-900 border-slate-600\">\n                                    <span>Task Updated</span>\n                                </label>\n                                <label class=\"flex items-center gap-2 text-sm\">\n                                    <input type=\"checkbox\" id=\"webhook-event-task-completed\" class=\"rounded bg-slate-900 border-slate-600\">\n                                    <span>Task Completed</span>\n                                </label>\n                                <label class=\"flex items-center gap-2 text-sm\">\n                                    <input type=\"checkbox\" id=\"webhook-event-task-escalated\" class=\"rounded bg-slate-900 border-slate-600\">\n                                    <span>Task Escalated</span>\n                                </label>\n                            </div>\n                        </div>\n                        <label class=\"flex items-center gap-2 mt-3\">\n                            <input type=\"checkbox\" id=\"webhook-outgoing-enabled\" class=\"rounded bg-slate-800 border-slate-600\">\n                            <span class=\"text-sm\">Enable outgoing webhooks</span>\n                        </label>\n                    </div>\n                </div>\n\n                <!-- Incoming Webhooks -->\n                <div class=\"card p-6\">\n                    <h4 class=\"font-medium mb-3 text-green-400 flex items-center gap-2\">\n                        <i class=\"fas fa-arrow-down\"></i>\n                        Incoming Webhooks (Receive from External)\n                    </h4>\n                    <p class=\"text-xs text-slate-500 mb-4\">External systems can send events to this endpoint</p>\n                    \n                    <div class=\"bg-slate-900 rounded-lg p-4 mb-4\">\n                        <div class=\"flex items-center justify-between mb-2\">\n                            <span class=\"text-sm font-medium text-slate-300\">Your Webhook Endpoint:</span>\n                            <button onclick=\"copyWebhookUrl()\" class=\"text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded transition\">\n                                <i class=\"fas fa-copy mr-1\"></i> Copy\n                            </button>\n                        </div>\n                        <code id=\"webhook-incoming-url\" class=\"text-green-400 text-sm break-all\">http://localhost:5000/api/webhook/incoming</code>\n                    </div>\n\n                    <div class=\"space-y-3\">\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">Authentication Token</label>\n                            <input type=\"text\" id=\"webhook-incoming-token\" class=\"w-full bg-slate-800 border border-slate-600 rounded p-2 text-sm text-white\" placeholder=\"required-token-for-incoming\">\n                            <p class=\"text-xs text-slate-500 mt-1\">External systems must include: <code class=\"text-green-400\">Authorization: Bearer &lt;token&gt;</code></p>\n                        </div>\n                        <div>\n                            <label class=\"block text-xs text-slate-400 mb-1\">Default Task Assignment</label>\n                            <select id=\"webhook-default-agent\" class=\"w-full bg-slate-800 border border-slate-600 rounded p-2 text-sm text-white\">\n                                <option value=\"CEO\">CEO (Auto-route)</option>\n                                <option value=\"ProjectManager\">Project Manager</option>\n                                <option value=\"SeniorDeveloper\">Senior Developer</option>\n                                <option value=\"Support\">Support</option>\n                            </select>\n                        </div>\n                        <label class=\"flex items-center gap-2 mt-3\">\n                            <input type=\"checkbox\" id=\"webhook-incoming-enabled\" class=\"rounded bg-slate-800 border-slate-600\">\n                            <span class=\"text-sm\">Enable incoming webhooks</span>\n                        </label>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Agents Tab -->\n        <div id=\"tab-content-agents\" class=\"tab-content hidden\">\n            <div class=\"space-y-6\">\n                <!-- Agent Capabilities Summary -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-chart-pie text-blue-400\"></i>\n                        Agent Capabilities Summary\n                    </h3>\n                    <div id=\"capabilities-summary\" class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n                        <div class=\"bg-slate-800/50 rounded-lg p-4 text-center\">\n                            <p class=\"text-2xl font-bold text-blue-400\" id=\"stat-total-agents\">-</p>\n                            <p class=\"text-xs text-slate-400\">Total Agents</p>\n                        </div>\n                        <div class=\"bg-slate-800/50 rounded-lg p-4 text-center\">\n                            <p class=\"text-2xl font-bold text-green-400\" id=\"stat-internet\">-</p>\n                            <p class=\"text-xs text-slate-400\">Internet Access</p>\n                        </div>\n                        <div class=\"bg-slate-800/50 rounded-lg p-4 text-center\">\n                            <p class=\"text-2xl font-bold text-purple-400\" id=\"stat-mcp\">-</p>\n                            <p class=\"text-xs text-slate-400\">MCP Enabled</p>\n                        </div>\n                        <div class=\"bg-slate-800/50 rounded-lg p-4 text-center\">\n                            <p class=\"text-2xl font-bold text-yellow-400\" id=\"stat-docs\">-</p>\n                            <p class=\"text-xs text-slate-400\">Document Access</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Agents List -->\n                <div class=\"card p-6\">\n                    <div class=\"flex justify-between items-center mb-4\">\n                        <h3 class=\"text-xl font-semibold\">Agent Configuration</h3>\n                        <button onclick=\"showCreateAgentModal()\" class=\"btn-primary flex items-center gap-2 text-sm\">\n                            <i class=\"fas fa-plus\"></i>\n                            Create Agent\n                        </button>\n                    </div>\n                    <div id=\"agents-list\" class=\"space-y-3\">\n                        <div class=\"text-center text-slate-400 py-8\">\n                            <i class=\"fas fa-spinner fa-spin\"></i> Loading agents...\n                        </div>\n                    </div>\n                </div>\n\n                <!-- MCP Status -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-network-wired text-green-400\"></i>\n                        MCP & External Tools\n                    </h3>\n                    <div id=\"mcp-status\" class=\"space-y-3\">\n                        <div class=\"text-center text-slate-400 py-4\">\n                            <i class=\"fas fa-spinner fa-spin\"></i> Loading...\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- System Tab -->\n        <div id=\"tab-content-system\" class=\"tab-content hidden\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n                <!-- Dashboard -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-tachometer-alt text-green-400\"></i>\n                        Dashboard\n                    </h3>\n                    <div class=\"space-y-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Refresh Interval (seconds)\n                            </label>\n                            <input type=\"number\" id=\"dashboard-refresh\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"5\">\n                        </div>\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Theme\n                            </label>\n                            <select id=\"dashboard-theme\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\">\n                                <option value=\"dark\">Dark</option>\n                                <option value=\"light\">Light</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Logging -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-file-alt text-purple-400\"></i>\n                        Logging\n                    </h3>\n                    <div class=\"space-y-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Log Level\n                            </label>\n                            <select id=\"log-level\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\">\n                                <option value=\"DEBUG\">DEBUG</option>\n                                <option value=\"INFO\">INFO</option>\n                                <option value=\"WARNING\">WARNING</option>\n                                <option value=\"ERROR\">ERROR</option>\n                            </select>\n                        </div>\n                        <label class=\"flex items-center gap-2\">\n                            <input type=\"checkbox\" id=\"log-console\" class=\"rounded bg-slate-800 border-slate-600\">\n                            <span class=\"text-sm\">Enable console logging</span>\n                        </label>\n                    </div>\n                </div>\n\n                <!-- Task Timeout -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-clock text-orange-400\"></i>\n                        Task Timeout\n                    </h3>\n                    <div class=\"space-y-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium text-slate-300 mb-2\">\n                                Max Task Age (hours)\n                            </label>\n                            <input type=\"number\" id=\"task-timeout-hours\" class=\"w-full bg-slate-800 border border-slate-600 rounded-lg p-3 text-white\" placeholder=\"24\">\n                            <p class=\"text-xs text-slate-500 mt-1\">Tasks older than this will be auto-failed</p>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Environment Info -->\n                <div class=\"card p-6\">\n                    <h3 class=\"text-xl font-semibold mb-4 flex items-center gap-2\">\n                        <i class=\"fas fa-info-circle text-cyan-400\"></i>\n                        Environment Variables\n                    </h3>\n                    <p class=\"text-slate-400 text-sm mb-3\">Override settings via environment:</p>\n                    <div class=\"bg-slate-900 rounded-lg p-3 font-mono text-xs text-slate-300 overflow-x-auto\">\n                        <div class=\"space-y-1\">\n                            <div>OLLAMA_URL=http://localhost:11434</div>\n                            <div>LLM_PROVIDER=ollama</div>\n                            <div>LLM_MODEL=llama3</div>\n                            <div>LLM_API_KEY=sk-...</div>\n                            <div>HITL_MODE=web</div>\n                            <div>LOG_LEVEL=INFO</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Save Notification -->\n<div id=\"save-notification\" class=\"fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg hidden transform transition-all duration-300 z-50\">\n    <i class=\"fas fa-check-circle mr-2\"></i>\n    <span>Settings saved successfully!</span>\n</div>\n{% endblock %}\n\n{% block extra_js %}\n<script>\n    // Tab switching\n    function switchTab(tabName) {\n        // Hide all tab contents\n        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));\n        // Remove active class from all tabs\n        document.querySelectorAll('.tab-btn').forEach(btn => {\n            btn.classList.remove('active', 'border-blue-500', 'text-blue-400');\n            btn.classList.add('border-transparent', 'text-slate-400');\n        });\n        // Show selected tab content\n        document.getElementById('tab-content-' + tabName).classList.remove('hidden');\n        // Add active class to selected tab\n        const activeTab = document.getElementById('tab-' + tabName);\n        activeTab.classList.add('active', 'border-blue-500', 'text-blue-400');\n        activeTab.classList.remove('border-transparent', 'text-slate-400');\n    }\n\n    // Provider-specific hints\n    const providerHints = {\n        ollama: { model: 'Default: lfm2.5-thinking:latest', url: 'http://localhost:11434', key: 'Not required for Ollama (local)' },\n        openai: { model: 'e.g., gpt-4, gpt-4-turbo, gpt-3.5-turbo', url: 'https://api.openai.com/v1', key: 'Get from https://platform.openai.com' },\n        claude: { model: 'e.g., claude-3-opus-20240229, claude-3-sonnet', url: 'https://api.anthropic.com', key: 'Get from https://console.anthropic.com' },\n        openrouter: { model: 'e.g., openai/gpt-4, anthropic/claude-3', url: 'https://openrouter.ai/api', key: 'Get from https://openrouter.ai' },\n        deepseek: { model: 'e.g., deepseek-chat, deepseek-coder', url: 'https://api.deepseek.com', key: 'Get from DeepSeek platform' },\n        qwen: { model: 'e.g., qwen-max, qwen-plus', url: 'https://dashscope.aliyuncs.com', key: 'Get from Alibaba Cloud' }\n    };\n\n    // Update hints when provider changes\n    document.getElementById('llm-provider').addEventListener('change', (e) => {\n        const provider = e.target.value;\n        const hints = providerHints[provider];\n        document.getElementById('model-hint').textContent = hints.model;\n        document.getElementById('llm-url').value = hints.url;\n        document.getElementById('api-key-hint').textContent = hints.key;\n    });\n\n    // Temperature slider\n    const tempSlider = document.getElementById('llm-temperature');\n    const tempValue = document.getElementById('temperature-value');\n    tempSlider.addEventListener('input', (e) => {\n        tempValue.textContent = e.target.value;\n    });\n\n    // Confidence slider\n    const confSlider = document.getElementById('hitl-confidence');\n    const confValue = document.getElementById('confidence-value');\n    confSlider.addEventListener('input', (e) => {\n        confValue.textContent = e.target.value;\n    });\n\n    // Load current settings\n    async function loadSettings() {\n        try {\n            const response = await fetch('/api/settings');\n            const settings = await response.json();\n\n            // LLM settings\n            const ollama = settings.ollama || {};\n            document.getElementById('llm-provider').value = settings.llm?.provider || 'ollama';\n            document.getElementById('llm-model').value = ollama.model || 'lfm2.5-thinking:latest';\n            document.getElementById('llm-url').value = ollama.url || 'http://localhost:11434';\n            document.getElementById('llm-api-key').value = ollama.api_key || '';\n            document.getElementById('llm-timeout').value = ollama.timeout || 120;\n            document.getElementById('llm-temperature').value = ollama.temperature || 0.7;\n            document.getElementById('temperature-value').textContent = ollama.temperature || 0.7;\n            document.getElementById('llm-retries').value = ollama.max_retries || 3;\n            document.getElementById('llm-max-tokens').value = ollama.max_tokens || 4096;\n\n            // Trigger hint update\n            document.getElementById('llm-provider').dispatchEvent(new Event('change'));\n\n            // HITL settings\n            const hitl = settings.hitl || {};\n            document.getElementById('hitl-mode').value = hitl.mode || 'web';\n            document.getElementById('hitl-timeout').value = hitl.timeout?.default_minutes || 30;\n            document.getElementById('hitl-confidence').value = hitl.triggers?.confidence_threshold || 0.6;\n            document.getElementById('confidence-value').textContent = hitl.triggers?.confidence_threshold || 0.6;\n\n            // HITL triggers\n            const triggers = hitl.triggers || {};\n            document.getElementById('trigger-final-delivery').checked = triggers.final_delivery ?? true;\n            document.getElementById('trigger-no-solution').checked = triggers.no_solution_found ?? true;\n            document.getElementById('trigger-deadlock').checked = triggers.deadlock ?? true;\n            document.getElementById('trigger-low-confidence').checked = triggers.low_confidence ?? true;\n            document.getElementById('trigger-security').checked = triggers.security_critical ?? true;\n            document.getElementById('trigger-ambiguous').checked = triggers.ambiguous_requirement ?? true;\n            document.getElementById('trigger-budget').checked = triggers.budget_exceeded ?? true;\n            document.getElementById('trigger-agent-error').checked = triggers.agent_error ?? true;\n\n            // Output settings\n            const output = settings.output || {};\n            document.getElementById('output-directory').value = output.file?.directory || './output';\n            document.getElementById('output-format').value = output.file?.format || 'json';\n            document.getElementById('output-file-enabled').checked = output.file?.enabled ?? false;\n            document.getElementById('output-email-enabled').checked = output.email?.enabled ?? false;\n            document.getElementById('email-smtp-host').value = output.email?.smtp_host || '';\n            document.getElementById('email-recipient').value = output.email?.recipient || '';\n            document.getElementById('output-webhook-enabled').checked = output.webhook?.enabled ?? false;\n            document.getElementById('output-webhook-url').value = output.webhook?.url || '';\n            document.getElementById('output-webhook-secret').value = output.webhook?.secret || '';\n\n            // Webhooks\n            const webhooks = settings.webhooks || {};\n            const outgoing = webhooks.outgoing || {};\n            const incoming = webhooks.incoming || {};\n            document.getElementById('webhook-outgoing-enabled').checked = outgoing.enabled ?? false;\n            document.getElementById('webhook-outgoing-url').value = outgoing.url || '';\n            document.getElementById('webhook-secret').value = outgoing.secret || '';\n            document.getElementById('webhook-event-task-created').checked = outgoing.events?.task_created ?? true;\n            document.getElementById('webhook-event-task-updated').checked = outgoing.events?.task_updated ?? false;\n            document.getElementById('webhook-event-task-completed').checked = outgoing.events?.task_completed ?? true;\n            document.getElementById('webhook-event-task-escalated').checked = outgoing.events?.task_escalated ?? true;\n            document.getElementById('webhook-incoming-enabled').checked = incoming.enabled ?? false;\n            document.getElementById('webhook-incoming-token').value = incoming.auth_token || '';\n            document.getElementById('webhook-default-agent').value = incoming.default_agent || 'CEO';\n\n            // Dashboard settings\n            const dashboard = settings.dashboard || {};\n            document.getElementById('dashboard-refresh').value = dashboard.refresh_interval_seconds || 5;\n            document.getElementById('dashboard-theme').value = dashboard.theme || 'dark';\n\n            // Logging settings\n            const logging = settings.logging || {};\n            document.getElementById('log-level').value = logging.level || 'INFO';\n            document.getElementById('log-console').checked = logging.console_output ?? true;\n\n            // Task timeout\n            document.getElementById('task-timeout-hours').value = settings.task_timeout_hours || 24;\n        } catch (error) {\n            console.error('Error loading settings:', error);\n        }\n    }\n\n    // Test connection\n    async function testConnection() {\n        const provider = document.getElementById('llm-provider').value;\n        const url = document.getElementById('llm-url').value;\n        const apiKey = document.getElementById('llm-api-key').value;\n        const statusDiv = document.getElementById('connection-status');\n        const indicator = document.getElementById('connection-indicator');\n        const text = document.getElementById('connection-text');\n\n        statusDiv.classList.remove('hidden');\n        indicator.className = 'w-2 h-2 rounded-full bg-yellow-500 animate-pulse';\n        text.textContent = 'Testing...';\n\n        try {\n            const response = await fetch('/api/test-llm', {\n                method: 'POST',\n                headers: { 'Content-Type': 'application/json' },\n                body: JSON.stringify({ provider, url, api_key: apiKey })\n            });\n\n            const result = await response.json();\n\n            if (result.success) {\n                indicator.className = 'w-2 h-2 rounded-full bg-green-500';\n                text.textContent = result.message || 'Connection successful!';\n                text.className = 'text-sm text-green-400';\n            } else {\n                indicator.className = 'w-2 h-2 rounded-full bg-red-500';\n                text.textContent = `Failed: ${result.error}`;\n                text.className = 'text-sm text-red-400';\n            }\n        } catch (error) {\n            indicator.className = 'w-2 h-2 rounded-full bg-red-500';\n            text.textContent = `Error: ${error.message}`;\n            text.className = 'text-sm text-red-400';\n        }\n    }\n\n    // Save settings\n    async function saveSettings() {\n        const settings = {\n            llm: {\n                provider: document.getElementById('llm-provider').value,\n            },\n            ollama: {\n                url: document.getElementById('llm-url').value,\n                model: document.getElementById('llm-model').value,\n                api_key: document.getElementById('llm-api-key').value,\n                timeout: parseInt(document.getElementById('llm-timeout').value),\n                temperature: parseFloat(document.getElementById('llm-temperature').value),\n                max_retries: parseInt(document.getElementById('llm-retries').value),\n                max_tokens: parseInt(document.getElementById('llm-max-tokens').value)\n            },\n            hitl: {\n                mode: document.getElementById('hitl-mode').value,\n                timeout: {\n                    default_minutes: parseInt(document.getElementById('hitl-timeout').value)\n                },\n                triggers: {\n                    confidence_threshold: parseFloat(document.getElementById('hitl-confidence').value),\n                    final_delivery: document.getElementById('trigger-final-delivery').checked,\n                    no_solution_found: document.getElementById('trigger-no-solution').checked,\n                    deadlock: document.getElementById('trigger-deadlock').checked,\n                    low_confidence: document.getElementById('trigger-low-confidence').checked,\n                    security_critical: document.getElementById('trigger-security').checked,\n                    ambiguous_requirement: document.getElementById('trigger-ambiguous').checked,\n                    budget_exceeded: document.getElementById('trigger-budget').checked,\n                    agent_error: document.getElementById('trigger-agent-error').checked\n                }\n            },\n            output: {\n                file: {\n                    directory: document.getElementById('output-directory').value,\n                    format: document.getElementById('output-format').value,\n                    enabled: document.getElementById('output-file-enabled').checked\n                },\n                email: {\n                    smtp_host: document.getElementById('email-smtp-host').value,\n                    recipient: document.getElementById('email-recipient').value,\n                    enabled: document.getElementById('output-email-enabled').checked\n                },\n                webhook: {\n                    url: document.getElementById('output-webhook-url').value,\n                    secret: document.getElementById('output-webhook-secret').value,\n                    enabled: document.getElementById('output-webhook-enabled').checked\n                }\n            },\n            webhooks: {\n                outgoing: {\n                    enabled: document.getElementById('webhook-outgoing-enabled').checked,\n                    url: document.getElementById('webhook-outgoing-url').value,\n                    secret: document.getElementById('webhook-secret').value,\n                    events: {\n                        task_created: document.getElementById('webhook-event-task-created').checked,\n                        task_updated: document.getElementById('webhook-event-task-updated').checked,\n                        task_completed: document.getElementById('webhook-event-task-completed').checked,\n                        task_escalated: document.getElementById('webhook-event-task-escalated').checked\n                    }\n                },\n                incoming: {\n                    enabled: document.getElementById('webhook-incoming-enabled').checked,\n                    auth_token: document.getElementById('webhook-incoming-token').value,\n                    default_agent: document.getElementById('webhook-default-agent').value\n                }\n            },\n            dashboard: {\n                refresh_interval_seconds: parseInt(document.getElementById('dashboard-refresh').value),\n                theme: document.getElementById('dashboard-theme').value\n            },\n            logging: {\n                level: document.getElementById('log-level').value,\n                console_output: document.getElementById('log-console').checked\n            },\n            task_timeout_hours: parseInt(document.getElementById('task-timeout-hours').value)\n        };\n\n        try {\n            const response = await fetch('/api/settings', {\n                method: 'POST',\n                headers: { 'Content-Type': 'application/json' },\n                body: JSON.stringify(settings)\n            });\n\n            if (response.ok) {\n                const notification = document.getElementById('save-notification');\n                notification.classList.remove('hidden');\n                notification.style.transform = 'translateY(0)';\n                setTimeout(() => {\n                    notification.classList.add('hidden');\n                    notification.style.transform = 'translateY(100px)';\n                }, 3000);\n            } else {\n                alert('Failed to save settings');\n            }\n        } catch (error) {\n            console.error('Error saving settings:', error);\n            alert('Error saving settings');\n        }\n    }\n\n    // Copy webhook URL\n    function copyWebhookUrl() {\n        const url = document.getElementById('webhook-incoming-url').textContent;\n        navigator.clipboard.writeText(url).then(() => {\n            const btn = event.target.closest('button');\n            const originalText = btn.innerHTML;\n            btn.innerHTML = '<i class=\"fas fa-check mr-1\"></i> Copied!';\n            setTimeout(() => { btn.innerHTML = originalText; }, 2000);\n        });\n    }\n\n    // Load agents configuration\n    async function loadAgentsConfig() {\n        const agentsList = document.getElementById('agents-list');\n        const mcpStatus = document.getElementById('mcp-status');\n\n        // Set loading states with timeout\n        const timeout = 5000; // 5 second timeout\n\n        try {\n            // Fetch with timeout\n            const fetchWithTimeout = async (url, ms = timeout) => {\n                const controller = new AbortController();\n                const id = setTimeout(() => controller.abort(), ms);\n                try {\n                    const response = await fetch(url, { signal: controller.signal });\n                    clearTimeout(id);\n                    return await response.json();\n                } catch (e) {\n                    clearTimeout(id);\n                    console.error(`Fetch timeout/error for ${url}:`, e);\n                    return null;\n                }\n            };\n\n            // Fetch all data with individual timeouts\n            const [agents, capabilities, mcp] = await Promise.all([\n                fetchWithTimeout('/api/agents/config'),\n                fetchWithTimeout('/api/agents/capabilities'),\n                fetchWithTimeout('/api/mcp/status')\n            ]);\n\n            // Update capabilities summary (with fallbacks)\n            if (capabilities) {\n                document.getElementById('stat-total-agents').textContent = capabilities.total_agents || 0;\n                document.getElementById('stat-internet').textContent = capabilities.internet_enabled || 0;\n                document.getElementById('stat-mcp').textContent = capabilities.mcp_enabled || 0;\n                document.getElementById('stat-docs').textContent = capabilities.document_access || 0;\n            } else {\n                document.getElementById('stat-total-agents').textContent = '-';\n                document.getElementById('stat-internet').textContent = '-';\n                document.getElementById('stat-mcp').textContent = '-';\n                document.getElementById('stat-docs').textContent = '-';\n            }\n\n            // Render agents list\n            if (!agents || agents.length === 0) {\n                agentsList.innerHTML = '<p class=\"text-slate-400 text-center py-8\">No agents configured</p>';\n            } else {\n                agentsList.innerHTML = agents.map(agent => `\n                    <div class=\"bg-slate-800/50 rounded-lg p-4\">\n                        <div class=\"flex justify-between items-start mb-3\">\n                            <div class=\"flex items-center gap-3\">\n                                <div class=\"w-10 h-10 rounded-lg bg-${agent.type === 'built-in' ? 'blue' : 'purple'}-500/20 flex items-center justify-center\">\n                                    <i class=\"fas fa-${agent.type === 'built-in' ? 'robot' : 'user'} text-${agent.type === 'built-in' ? 'blue' : 'purple'}-400\"></i>\n                                </div>\n                                <div>\n                                    <h4 class=\"font-medium\">${agent.name}</h4>\n                                    <p class=\"text-xs text-slate-400\">${agent.type} agent</p>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-2\">\n                                <button onclick=\"editAgent('${agent.name}')\" class=\"text-xs bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition\">\n                                    <i class=\"fas fa-edit\"></i> Edit\n                                </button>\n                                ${agent.type === 'custom' ? `\n                                    <button onclick=\"deleteAgent('${agent.name}')\" class=\"text-xs bg-red-600 hover:bg-red-700 px-3 py-1 rounded transition\">\n                                        <i class=\"fas fa-trash\"></i>\n                                    </button>\n                                ` : ''}\n                            </div>\n                        </div>\n                        <div class=\"flex gap-2 flex-wrap\">\n                            ${agent.config?.capabilities?.internet_access ? '<span class=\"text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded\"><i class=\"fas fa-globe\"></i> Internet</span>' : ''}\n                            ${agent.config?.capabilities?.mcp ? '<span class=\"text-xs bg-purple-500/20 text-purple-400 px-2 py-1 rounded\"><i class=\"fas fa-plug\"></i> MCP</span>' : ''}\n                            ${agent.config?.capabilities?.document_access ? '<span class=\"text-xs bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded\"><i class=\"fas fa-file\"></i> Documents</span>' : ''}\n                        </div>\n                    </div>\n                `).join('');\n            }\n\n            // Render MCP status\n            if (mcp) {\n                mcpStatus.innerHTML = `\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                        <div class=\"bg-slate-800/50 rounded-lg p-4\">\n                            <h4 class=\"font-medium mb-2\">Web Search</h4>\n                            <p class=\"text-sm ${mcp.web_search_configured ? 'text-green-400' : 'text-slate-400'}\">\n                                <i class=\"fas fa-${mcp.web_search_configured ? 'check' : 'times'}-circle\"></i>\n                                ${mcp.web_search_configured ? 'Configured' : 'Not configured'}\n                            </p>\n                            <p class=\"text-xs text-slate-500 mt-1\">Provider: ${mcp.servers?.web_search?.provider || 'None'}</p>\n                        </div>\n                        <div class=\"bg-slate-800/50 rounded-lg p-4\">\n                            <h4 class=\"font-medium mb-2\">MCP Servers</h4>\n                            <p class=\"text-sm text-slate-400\">${Object.keys(mcp.servers || {}).length} server(s) configured</p>\n                            ${Object.entries(mcp.servers || {}).map(([name, server]) => `\n                                <p class=\"text-xs text-slate-500 mt-1\">• ${name}: ${server.status || 'unknown'}</p>\n                            `).join('')}\n                        </div>\n                    </div>\n                    <div class=\"mt-4 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg\">\n                        <h4 class=\"font-medium text-blue-400 mb-2\"><i class=\"fas fa-info-circle\"></i> Available Tools</h4>\n                        <div class=\"flex flex-wrap gap-2\">\n                            <span class=\"text-xs bg-slate-700 px-2 py-1 rounded\">web_search</span>\n                            <span class=\"text-xs bg-slate-700 px-2 py-1 rounded\">web_fetch</span>\n                            <span class=\"text-xs bg-slate-700 px-2 py-1 rounded\">document_search</span>\n                            <span class=\"text-xs bg-slate-700 px-2 py-1 rounded\">code_execution</span>\n                            <span class=\"text-xs bg-slate-700 px-2 py-1 rounded\">file_read</span>\n                            <span class=\"text-xs bg-slate-700 px-2 py-1 rounded\">file_write</span>\n                        </div>\n                    </div>\n                `;\n            } else {\n                mcpStatus.innerHTML = '<p class=\"text-slate-400 text-center py-4\">MCP status unavailable</p>';\n            }\n\n        } catch (error) {\n            console.error('Error loading agents config:', error);\n            agentsList.innerHTML = '<p class=\"text-red-400 text-center py-8\">Error loading agents. <button onclick=\"loadAgentsConfig()\" class=\"text-blue-400 underline\">Retry</button></p>';\n            mcpStatus.innerHTML = '<p class=\"text-slate-400 text-center py-4\">Error loading MCP status</p>';\n        }\n    }\n\n    // Edit agent\n    function editAgent(agentName) {\n        // Switch to agent edit mode\n        const modal = document.getElementById('agent-edit-modal');\n        document.getElementById('edit-agent-name').textContent = agentName;\n        modal.classList.remove('hidden');\n        modal.classList.add('flex');\n        \n        // Load agent config\n        fetch(`/api/agents/config/${agentName}`)\n            .then(r => r.json())\n            .then(data => {\n                document.getElementById('edit-internet').checked = data.config.capabilities?.internet_access || false;\n                document.getElementById('edit-mcp').checked = data.config.capabilities?.mcp || false;\n                document.getElementById('edit-documents').checked = data.config.capabilities?.document_access || false;\n            });\n    }\n\n    // Save agent edit\n    async function saveAgentEdit() {\n        const agentName = document.getElementById('edit-agent-name').textContent;\n        const data = {\n            internet_access: document.getElementById('edit-internet').checked,\n            mcp: document.getElementById('edit-mcp').checked,\n            document_access: document.getElementById('edit-documents').checked\n        };\n\n        try {\n            await fetch(`/api/agents/config/${agentName}/capabilities`, {\n                method: 'PUT',\n                headers: { 'Content-Type': 'application/json' },\n                body: JSON.stringify(data)\n            });\n            hideAgentEditModal();\n            loadAgentsConfig();\n        } catch (error) {\n            console.error('Error saving agent:', error);\n        }\n    }\n\n    // Hide agent edit modal\n    function hideAgentEditModal() {\n        const modal = document.getElementById('agent-edit-modal');\n        modal.classList.add('hidden');\n        modal.classList.remove('flex');\n    }\n\n    // Delete agent\n    async function deleteAgent(agentName) {\n        if (!confirm(`Delete agent \"${agentName}\"? This cannot be undone.`)) return;\n        \n        try {\n            // Note: You'd need to add a DELETE endpoint\n            alert('Agent deletion not yet implemented');\n        } catch (error) {\n            console.error('Error deleting agent:', error);\n        }\n    }\n\n    // Show create agent modal (reuse from agents page)\n    function showCreateAgentModal() {\n        const modal = document.getElementById('create-agent-modal');\n        if (modal) {\n            modal.classList.remove('hidden');\n            modal.classList.add('flex');\n        }\n    }\n\n    // Initial load\n    loadSettings();\n    loadAgentsConfig();\n</script>\n\n<!-- Agent Edit Modal -->\n<div id=\"agent-edit-modal\" class=\"fixed inset-0 bg-black/50 hidden items-center justify-center z-50\">\n    <div class=\"card p-6 w-full max-w-lg mx-4\">\n        <div class=\"flex justify-between items-center mb-4\">\n            <h3 class=\"text-xl font-semibold\">Edit Agent: <span id=\"edit-agent-name\" class=\"text-blue-400\"></span></h3>\n            <button onclick=\"hideAgentEditModal()\" class=\"text-slate-400 hover:text-white\">\n                <i class=\"fas fa-times\"></i>\n            </button>\n        </div>\n        <div class=\"space-y-4\">\n            <h4 class=\"font-medium text-slate-300\">Capabilities</h4>\n            <label class=\"flex items-center justify-between p-3 bg-slate-800/50 rounded-lg\">\n                <div class=\"flex items-center gap-2\">\n                    <i class=\"fas fa-globe text-green-400\"></i>\n                    <span>Internet Access (Web Search)</span>\n                </div>\n                <input type=\"checkbox\" id=\"edit-internet\" class=\"rounded bg-slate-900 border-slate-600\">\n            </label>\n            <label class=\"flex items-center justify-between p-3 bg-slate-800/50 rounded-lg\">\n                <div class=\"flex items-center gap-2\">\n                    <i class=\"fas fa-plug text-purple-400\"></i>\n                    <span>MCP (External Tools)</span>\n                </div>\n                <input type=\"checkbox\" id=\"edit-mcp\" class=\"rounded bg-slate-900 border-slate-600\">\n            </label>\n            <label class=\"flex items-center justify-between p-3 bg-slate-800/50 rounded-lg\">\n                <div class=\"flex items-center gap-2\">\n                    <i class=\"fas fa-file text-yellow-400\"></i>\n                    <span>Document Access</span>\n                </div>\n                <input type=\"checkbox\" id=\"edit-documents\" class=\"rounded bg-slate-900 border-slate-600\">\n            </label>\n            <div class=\"flex justify-end gap-3 pt-4\">\n                <button onclick=\"hideAgentEditModal()\" class=\"px-4 py-2 text-slate-400 hover:text-white\">Cancel</button>\n                <button onclick=\"saveAgentEdit()\" class=\"btn-primary\">Save Changes</button>\n            </div>\n        </div>\n    </div>\n</div>\n{% endblock %}\n"}}}}