1 line
64 KiB
JSON
1 line
64 KiB
JSON
{"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 <token></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"}}}} |