{% extends "base.html" %}

{% block title %}{{ form_title }} - Memorizz{% endblock %}

{% block content %}
<div class="page-header">
    <a href="{% if is_edit %}/agents/{{ agent_id }}/playground{% else %}/agents{% endif %}" class="back-link">← Back to Agents</a>
    <h1>{{ form_title }}</h1>
    <p>Configure how this agent behaves and runs.</p>
</div>

{% if error %}
<div class="error-message">
    <span>!</span> {{ error }}
</div>
{% endif %}

<form method="post" action="{{ form_action }}" class="agent-form">
    {% if is_edit %}
    <div class="detail-section">
        <h2>Agent ID</h2>
        <div class="form-group">
            <code class="agent-id-display">{{ agent_id }}</code>
        </div>
    </div>
    {% endif %}

    <!-- Basics — always visible -->
    <div class="detail-section">
        <h2>Basics</h2>
        <div class="form-group">
            <label for="agent_name">Agent Name</label>
            <input id="agent_name" name="agent_name" type="text" value="{{ agent_name }}" placeholder="Agent name shown in the UI">
        </div>
        <div class="form-group">
            <label for="instruction">System Instruction</label>
            <textarea id="instruction" name="instruction" rows="5">{{ instruction }}</textarea>
        </div>
        <div class="form-grid">
            <div class="form-group">
                <label for="application_mode">Application Mode</label>
                <select id="application_mode" name="application_mode">
                    <option value="assistant" {% if application_mode == 'assistant' %}selected{% endif %}>Assistant</option>
                    <option value="workflow" {% if application_mode == 'workflow' %}selected{% endif %}>Workflow</option>
                    <option value="deep_research" {% if application_mode == 'deep_research' %}selected{% endif %}>Deep Research</option>
                </select>
            </div>
            <div class="form-group">
                <label for="max_steps">Max Tool Iterations</label>
                <div class="form-group checkbox-group" style="margin-bottom: 8px;">
                    <label>
                        <input type="checkbox" id="continuous_mode" value="1"
                            {% if max_steps == 0 %}checked{% endif %}
                            onchange="toggleContinuousMode(this)">
                        Continuous mode (unlimited)
                    </label>
                </div>
                <input id="max_steps" name="max_steps" type="number" min="1"
                    value="{{ max_steps if max_steps != 0 else 20 }}"
                    {% if max_steps == 0 %}disabled{% endif %}>
                <p class="form-hint">Maximum tool-calling rounds per run (default: 20).</p>
                <p id="continuous-warning" class="form-hint"
                    style="color: #e67e22; display: {% if max_steps == 0 %}block{% else %}none{% endif %};">
                    Continuous mode may consume a very large number of tokens.
                    The agent will keep running tool loops until the task is complete.
                </p>
            </div>
            <div class="form-group">
                <label for="tool_access">Tool Access</label>
                <select id="tool_access" name="tool_access">
                    <option value="private" {% if tool_access == 'private' %}selected{% endif %}>Private</option>
                    <option value="public" {% if tool_access == 'public' %}selected{% endif %}>Public</option>
                    <option value="global" {% if tool_access == 'global' %}selected{% endif %}>Global</option>
                </select>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" name="semantic_cache" {% if semantic_cache %}checked{% endif %}>
                    Enable semantic cache
                </label>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" name="enable_entity_memory" {% if enable_entity_memory %}checked{% endif %}>
                    Enable entity memory
                </label>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" name="enable_workflow_memory" {% if enable_workflow_memory %}checked{% endif %}>
                    Enable workflow memory
                </label>
            </div>
        </div>
    </div>

    <!-- LLM Configuration — collapsible -->
    <details class="detail-section collapsible-section" open>
        <summary class="section-toggle">
            <h2>LLM Configuration</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="form-grid">
                <div class="form-group">
                    <label for="llm_provider">Provider</label>
                    <select id="llm_provider" name="llm_provider" onchange="syncAgentModelOptions()">
                        <option value="openai" {% if llm_provider == 'openai' %}selected{% endif %}>OpenAI</option>
                        <option value="anthropic" {% if llm_provider == 'anthropic' %}selected{% endif %}>Anthropic</option>
                        <option value="azure" {% if llm_provider == 'azure' %}selected{% endif %}>Azure OpenAI</option>
                        <option value="ollama" {% if llm_provider == 'ollama' %}selected{% endif %}>Ollama (Local)</option>
                        <option value="huggingface" {% if llm_provider == 'huggingface' %}selected{% endif %}>HuggingFace</option>
                        <option value="mlx" {% if llm_provider == 'mlx' %}selected{% endif %}>MLX (Apple Silicon)</option>
                        <option value="local-openai" {% if llm_provider == 'local-openai' %}selected{% endif %}>Local OpenAI-compatible (llama.cpp / LM Studio)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="llm_model_select">Model / Deployment</label>
                    <select id="llm_model_select"></select>
                    <input id="llm_model_custom" type="text" value="{{ llm_model }}" style="display:none; margin-top: 8px;">
                    <input id="llm_model" name="llm_model" type="hidden" value="{{ llm_model }}">
                    <!-- Pre-flight: warns when the chosen Ollama / HuggingFace model
                         isn't actually cached locally, so users discover the issue
                         at agent-creation time, not as a 404 on first chat. -->
                    <div id="llm_model_status" style="display:none; margin-top:10px;"></div>
                </div>
            </div>
            <p id="llm_provider_hint" class="form-hint" style="margin-top:8px"></p>
            <div class="form-group" id="local_openai_row" style="display:none">
                <label for="llm_base_url">Local server base URL</label>
                <input id="llm_base_url" type="text" placeholder="http://127.0.0.1:8080/v1">
                <p class="form-hint">Default <code>http://127.0.0.1:8080/v1</code> for <code>llama-server</code>. LM Studio uses <code>http://127.0.0.1:1234/v1</code>. The API key is ignored by these servers.</p>
            </div>
            <!-- Ollama-only: opt into the daemon's chain-of-thought stream.
                 Off by default because Gemma 4 (Ollama 0.22.1+) ships with
                 thinking on, and on CPU-only inference that means 30–60s of
                 silence before the reply ever starts. See OllamaLLM(think=).
                 Wired into llm_config_json on submit so the backend persists
                 it as additional_config.think. -->
            <div class="form-group" id="ollama_thinking_row" style="display:none">
                <label class="checkbox-group">
                    <input type="checkbox" id="ollama_thinking" name="ollama_thinking" value="1">
                    Enable thinking / chain-of-thought
                </label>
                <p class="form-hint">When on, Gemma 4 / DeepSeek-R1 / Qwen3-thinking emit a separate reasoning trace before the final answer (shown in the playground's trace timeline). Off by default for snappier replies — thinking can take 30–60 s before any visible content on CPU-only setups.</p>
            </div>
            <div class="form-group">
                <label for="llm_config_json">Advanced LLM Config (JSON)</label>
                <textarea id="llm_config_json" name="llm_config_json" rows="4">{{ llm_config_json }}</textarea>
                <p class="form-hint">Optional provider-specific fields (e.g. azure_endpoint, api_version, ollama host, HuggingFace settings, temperature, base_url for local-openai).</p>
            </div>
        </div>
    </details>
    <script>
    // Show contextual hints + the base_url field when the provider needs them.
    (function () {
        const GATED_HF_PREFIXES = ['google/gemma', 'meta-llama/', 'mistralai/'];
        function refreshLLMHint() {
            const provEl = document.getElementById('llm_provider');
            const modelEl = document.getElementById('llm_model');
            const hintEl = document.getElementById('llm_provider_hint');
            const baseUrlRow = document.getElementById('local_openai_row');
            if (!provEl || !hintEl) return;
            const provider = (provEl.value || '').toLowerCase();
            const model = (modelEl ? modelEl.value : '') || '';

            baseUrlRow.style.display = provider === 'local-openai' ? '' : 'none';
            const thinkingRow = document.getElementById('ollama_thinking_row');
            if (thinkingRow) thinkingRow.style.display = provider === 'ollama' ? '' : 'none';

            let hint = '';
            if (provider === 'huggingface') {
                const isGated = GATED_HF_PREFIXES.some(p => model.toLowerCase().startsWith(p));
                if (isGated) {
                    const url = 'https://huggingface.co/' + model;
                    hint = '⚠️ This is a gated repo. Accept the license once at '
                        + '<a href="' + url + '" target="_blank" rel="noopener">' + url + '</a>'
                        + ' and set <code>HF_TOKEN</code> in Settings before pulling.';
                } else {
                    hint = 'Models download to <code>~/.cache/huggingface/hub</code>. '
                        + 'Set <code>HF_TOKEN</code> in Settings for private/gated repos.';
                }
            } else if (provider === 'mlx') {
                hint = 'In-process MLX requires memorizz to run on a native arm64 '
                    + 'Apple Silicon Python — <code>pip install memorizz[mlx]</code> '
                    + 'will fail under Rosetta. If your memorizz env is x86_64, use '
                    + '<strong>Local OpenAI-compatible</strong> with an '
                    + '<code>mlx-community/*</code> model instead — it runs MLX in a '
                    + 'sidecar arm64 process and memorizz talks to it over HTTP.';
            } else if (provider === 'local-openai') {
                // Adapt the startup command to the chosen repo. mlx-community
                // models need mlx_lm.server in a native arm64 venv; GGUF
                // models need llama-server. LM Studio is a third path that
                // doesn't need a CLI command at all.
                const isMLX = model.toLowerCase().startsWith('mlx-community/');
                const isGGUF = model.toLowerCase().endsWith('-gguf')
                    || model.toLowerCase().includes('-gguf/');
                if (isMLX) {
                    hint = 'Start an MLX sidecar server in a native arm64 venv:<br>'
                        + '<code>pip install mlx-lm</code><br>'
                        + '<code>python -m mlx_lm.server --model ' + model + ' --port 8080</code><br>'
                        + 'Then leave the base URL as <code>http://127.0.0.1:8080/v1</code>.';
                } else if (isGGUF) {
                    hint = 'Start <code>llama-server</code> first:<br>'
                        + '<code>brew install llama.cpp</code><br>'
                        + '<code>llama-server -hf ' + model + ' --port 8080 --jinja</code><br>'
                        + 'Or load the model in LM Studio (default port <code>1234</code>).';
                } else {
                    hint = 'Start a local OpenAI-compatible server (llama.cpp '
                        + '<code>llama-server</code>, <code>mlx_lm.server</code>, '
                        + 'LM Studio, vLLM) and point the base URL at it.';
                }
            } else if (provider === 'ollama') {
                hint = 'Pull the model in Settings → Local models, or run <code>ollama pull '
                    + (model || 'llama3.1:8b') + '</code>.';
            }
            hintEl.innerHTML = hint;
        }
        // Wrap syncAgentModelOptions so the hint updates whenever the model
        // dropdown re-renders.
        const _origSync = window.syncAgentModelOptions;
        window.syncAgentModelOptions = function () {
            if (typeof _origSync === 'function') _origSync.apply(this, arguments);
            refreshLLMHint();
        };
        document.addEventListener('change', function (e) {
            if (e.target && (e.target.id === 'llm_model_select'
                || e.target.id === 'llm_model_custom'
                || e.target.id === 'llm_provider')) {
                refreshLLMHint();
            }
        });
        // Mirror the base_url field into llm_config_json on submit so the
        // backend `_parse_llm_config` picks it up without a new form field.
        const baseUrlEl = document.getElementById('llm_base_url');
        const cfgEl = document.getElementById('llm_config_json');
        const formEl = (baseUrlEl && baseUrlEl.form) || (cfgEl && cfgEl.form) || null;
        if (formEl && cfgEl) {
            formEl.addEventListener('submit', function () {
                let obj = {};
                try { obj = cfgEl.value.trim() ? JSON.parse(cfgEl.value) : {}; }
                catch (_) { obj = {}; }
                if (typeof obj !== 'object' || obj === null) obj = {};

                if (baseUrlEl) {
                    const url = (baseUrlEl.value || '').trim();
                    if (url) obj.base_url = url;
                }

                // Mirror the Ollama thinking checkbox into additional_config.think.
                // Only persist when the chosen provider is ollama — otherwise an
                // accidental tick on a non-ollama agent leaks `think` into a
                // config that doesn't understand it.
                const provEl = document.getElementById('llm_provider');
                const thinkEl = document.getElementById('ollama_thinking');
                if (provEl && thinkEl && (provEl.value || '').toLowerCase() === 'ollama') {
                    const inner = (typeof obj.additional_config === 'object'
                        && obj.additional_config !== null) ? obj.additional_config : {};
                    if (thinkEl.checked) {
                        inner.think = true;
                    } else {
                        delete inner.think;
                    }
                    if (Object.keys(inner).length > 0) {
                        obj.additional_config = inner;
                    } else {
                        delete obj.additional_config;
                    }
                }

                if (Object.keys(obj).length > 0) {
                    cfgEl.value = JSON.stringify(obj);
                }
            });
        }

        // Initialize the thinking checkbox from the saved llm_config JSON so
        // the form reflects the agent's persisted choice on edit.
        (function initThinkingCheckbox() {
            const thinkEl = document.getElementById('ollama_thinking');
            if (!thinkEl || !cfgEl) return;
            try {
                const parsed = cfgEl.value.trim() ? JSON.parse(cfgEl.value) : {};
                const inner = (parsed && typeof parsed.additional_config === 'object'
                    && parsed.additional_config !== null) ? parsed.additional_config : {};
                if (inner.think === true || parsed.think === true) {
                    thinkEl.checked = true;
                }
            } catch (_) { /* malformed JSON — leave default */ }
        })();
        document.addEventListener('DOMContentLoaded', refreshLLMHint);
        // Run once on initial render too — DOMContentLoaded may have already fired
        refreshLLMHint();
    })();

    // Pre-flight check for local-model providers. Mirrors playground.html's
    // playgroundCheckLocalModel() but banner-only — pull/delete UI stays in
    // Settings → Local models. The point here is just so users don't save an
    // agent pointing at an Ollama tag they never pulled (which 404s mid-chat).
    (function () {
        const REQUIRES_LOCAL = new Set(['ollama', 'huggingface', 'mlx']);
        let _seq = 0;
        let _debounce = null;

        function escapeHtml(s) {
            return String(s).replace(/[&<>"']/g, function (c) {
                return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
            });
        }

        function currentProvider() {
            const el = document.getElementById('llm_provider');
            return ((el && el.value) || '').trim().toLowerCase();
        }

        function currentModel() {
            // The hidden #llm_model is the source of truth; fall back through
            // the visible inputs in case a change handler hasn't synced yet.
            const hidden = document.getElementById('llm_model');
            const custom = document.getElementById('llm_model_custom');
            const select = document.getElementById('llm_model_select');
            const fromHidden = ((hidden && hidden.value) || '').trim();
            if (fromHidden) return fromHidden;
            const fromCustom = ((custom && custom.value) || '').trim();
            if (fromCustom) return fromCustom;
            if (select && select.value && select.value !== '__custom__') return select.value.trim();
            return '';
        }

        async function refresh() {
            const statusEl = document.getElementById('llm_model_status');
            if (!statusEl) return;
            const provider = currentProvider();
            const model = currentModel();
            if (!REQUIRES_LOCAL.has(provider) || !model) {
                statusEl.style.display = 'none';
                statusEl.innerHTML = '';
                return;
            }
            const seq = ++_seq;
            statusEl.style.display = 'block';
            let label = 'local Ollama';
            if (provider === 'huggingface') label = 'HuggingFace cache';
            if (provider === 'mlx') label = 'MLX cache (HuggingFace)';
            statusEl.innerHTML = '<p class="form-hint">Checking ' + label + '…</p>';

            const url = provider === 'ollama'
                ? '/api/ollama/installed'
                : '/api/huggingface/installed';
            let info;
            try {
                const res = await fetch(url, { cache: 'no-store' });
                info = await res.json();
            } catch (err) {
                if (seq !== _seq) return;
                statusEl.innerHTML = '<div class="warning-message"><strong>Could not reach the UI server</strong>: '
                    + escapeHtml(String(err)) + '</div>';
                return;
            }
            if (seq !== _seq) return;

            if (provider === 'ollama') {
                renderOllama(statusEl, model, info);
            } else {
                renderHF(statusEl, model, info);
            }
        }

        function renderOllama(statusEl, model, info) {
            if (!info.reachable) {
                statusEl.innerHTML = '<div class="warning-message">'
                    + '<strong>Ollama is not running</strong> at <code>'
                    + escapeHtml(info.host || 'localhost:11434') + '</code>'
                    + (info.error ? ' &mdash; ' + escapeHtml(info.error) : '')
                    + '.<br>Install it from <a href="https://ollama.com/download" target="_blank" rel="noopener">ollama.com/download</a> and start it, then '
                    + '<a href="#" data-preflight-refresh>refresh</a>.'
                    + '</div>';
                wireRefreshLink(statusEl);
                return;
            }
            // `gemma4` and `gemma4:latest` reference the same blob on disk —
            // treat them as equivalent so the banner doesn't whine about a
            // tag the user technically does have.
            const installed = (info.models || []).some(function (m) {
                return m === model || m === model + ':latest' || m + ':latest' === model;
            });
            const base = model.split(':')[0];
            const libUrl = 'https://ollama.com/library/' + encodeURIComponent(base);
            statusEl.innerHTML = installed
                ? '<div class="success-message">'
                    + '<strong><code>' + escapeHtml(model) + '</code> is available offline</strong>'
                    + ' on Ollama at <code>' + escapeHtml(info.host || 'localhost:11434') + '</code>.'
                    + '</div>'
                : '<div class="warning-message">'
                    + '<strong>Pre-flight: <code>' + escapeHtml(model) + '</code> is not installed locally.</strong><br>'
                    + 'Saving this agent is fine, but the first chat will fail with a 404. '
                    + 'Run <code>ollama pull ' + escapeHtml(model) + '</code>, '
                    + 'pull from <a href="/settings#local-models">Settings → Local models</a>, or '
                    + '<a href="' + libUrl + '" target="_blank" rel="noopener">browse <code>'
                    + escapeHtml(base) + '</code> on ollama.com</a>. Then '
                    + '<a href="#" data-preflight-refresh>refresh</a>.'
                    + '</div>';
            wireRefreshLink(statusEl);
        }

        function renderHF(statusEl, model, info) {
            if (!info.available) {
                statusEl.innerHTML = '<div class="warning-message">'
                    + '<strong>HuggingFace cache unavailable</strong>'
                    + (info.error ? ' &mdash; ' + escapeHtml(info.error) : '')
                    + '.<br>Install it with <code>pip install memorizz[huggingface]</code>, then '
                    + '<a href="#" data-preflight-refresh>refresh</a>.'
                    + '</div>';
                wireRefreshLink(statusEl);
                return;
            }
            const cached = (info.models || []).indexOf(model) !== -1;
            const repoUrl = 'https://huggingface.co/'
                + model.split('/').map(encodeURIComponent).join('/');
            const cacheLoc = info.cache_dir || 'local HF cache';
            statusEl.innerHTML = cached
                ? '<div class="success-message">'
                    + '<strong><code>' + escapeHtml(model) + '</code> is cached locally</strong> at '
                    + '<code>' + escapeHtml(cacheLoc) + '</code>.'
                    + '</div>'
                : '<div class="warning-message">'
                    + '<strong>Pre-flight: <code>' + escapeHtml(model) + '</code> is not cached locally.</strong><br>'
                    + 'First chat will trigger a multi-GB download and may stall. '
                    + 'Pre-download with <code>huggingface-cli download ' + escapeHtml(model) + '</code>, '
                    + 'pull from <a href="/settings#local-models">Settings → Local models</a>, '
                    + 'or <a href="' + repoUrl + '" target="_blank" rel="noopener">view the model card</a>. Then '
                    + '<a href="#" data-preflight-refresh>refresh</a>.'
                    + '</div>';
            wireRefreshLink(statusEl);
        }

        function wireRefreshLink(scope) {
            const link = scope.querySelector('[data-preflight-refresh]');
            if (!link) return;
            link.addEventListener('click', function (ev) {
                ev.preventDefault();
                refresh();
            });
        }

        function schedule() {
            if (_debounce) clearTimeout(_debounce);
            _debounce = setTimeout(refresh, 350);
        }

        document.addEventListener('change', function (e) {
            if (e.target && (e.target.id === 'llm_model_select'
                || e.target.id === 'llm_model_custom'
                || e.target.id === 'llm_provider')) {
                refresh();
            }
        });
        document.addEventListener('input', function (e) {
            if (e.target && e.target.id === 'llm_model_custom') {
                schedule();
            }
        });
        document.addEventListener('DOMContentLoaded', refresh);
        // DOMContentLoaded may have already fired by the time this script runs.
        refresh();
    })();
    </script>

    <!-- Persona — collapsible -->
    <details class="detail-section collapsible-section" {% if persona_name %}open{% endif %}>
        <summary class="section-toggle">
            <h2>Persona</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <input id="persona_id" name="persona_id" type="hidden" value="{{ persona_id|default('', true) }}">
            <div class="form-grid">
                <div class="form-group">
                    <label for="persona_preset_select">Load built-in preset</label>
                    <select id="persona_preset_select">
                        <option value="">— Choose a preset to pre-fill the fields —</option>
                    </select>
                    <p class="form-hint">Presets apply the role's default goals and background. Edit the fields below afterwards to customize.</p>
                </div>
                <div class="form-group">
                    <label for="persona_saved_select">Load saved persona</label>
                    <select id="persona_saved_select">
                        <option value="">— Reuse a persona from your library —</option>
                    </select>
                    <p class="form-hint">Selecting a saved persona links this agent to its evolution history. Edits become a new version when saved.</p>
                </div>
            </div>
            <div class="form-grid">
                <div class="form-group">
                    <label for="persona_name">Name</label>
                    <input id="persona_name" name="persona_name" type="text" value="{{ persona_name }}">
                </div>
                <div class="form-group">
                    <label for="persona_role">Role</label>
                    <input id="persona_role" name="persona_role" type="text" value="{{ persona_role }}">
                </div>
            </div>
            <div class="form-group">
                <label for="persona_goals">Goals</label>
                <textarea id="persona_goals" name="persona_goals" rows="3">{{ persona_goals }}</textarea>
            </div>
            <div class="form-group">
                <label for="persona_background">Background</label>
                <textarea id="persona_background" name="persona_background" rows="3">{{ persona_background }}</textarea>
            </div>
            <p class="form-hint" id="persona_version_hint" style="display: none;"></p>
            <script>
                (function() {
                    var presetSelect = document.getElementById('persona_preset_select');
                    var savedSelect = document.getElementById('persona_saved_select');
                    var personaIdInput = document.getElementById('persona_id');
                    var nameInput = document.getElementById('persona_name');
                    var roleInput = document.getElementById('persona_role');
                    var goalsInput = document.getElementById('persona_goals');
                    var backgroundInput = document.getElementById('persona_background');
                    var versionHint = document.getElementById('persona_version_hint');

                    function setField(el, value) {
                        if (!el) return;
                        el.value = value == null ? '' : value;
                    }

                    function resetVersionHint() {
                        if (!versionHint) return;
                        versionHint.style.display = 'none';
                        versionHint.textContent = '';
                    }

                    function showVersionHint(text) {
                        if (!versionHint) return;
                        versionHint.textContent = text;
                        versionHint.style.display = 'block';
                    }

                    fetch('/api/persona-presets')
                        .then(function(r) { return r.ok ? r.json() : {presets: []}; })
                        .then(function(data) {
                            (data.presets || []).forEach(function(preset) {
                                var opt = document.createElement('option');
                                opt.value = preset.key;
                                opt.textContent = preset.role;
                                opt.dataset.role = preset.role || '';
                                opt.dataset.goals = preset.goals || '';
                                opt.dataset.background = preset.background || '';
                                presetSelect.appendChild(opt);
                            });
                        })
                        .catch(function() { /* presets endpoint optional */ });

                    fetch('/api/personas')
                        .then(function(r) { return r.ok ? r.json() : {personas: []}; })
                        .then(function(data) {
                            (data.personas || []).forEach(function(persona) {
                                if (!persona.id) return;
                                var opt = document.createElement('option');
                                opt.value = persona.id;
                                var suffix = persona.role ? ' — ' + persona.role : '';
                                var version = persona.version ? ' (v' + persona.version + ')' : '';
                                opt.textContent = (persona.name || '(unnamed)') + suffix + version;
                                opt.dataset.name = persona.name || '';
                                opt.dataset.role = persona.role || '';
                                opt.dataset.goals = persona.goals || '';
                                opt.dataset.background = persona.background || '';
                                opt.dataset.version = persona.version || 1;
                                opt.dataset.historyCount = persona.history_count || 0;
                                if (personaIdInput && personaIdInput.value && personaIdInput.value === persona.id) {
                                    opt.selected = true;
                                    showVersionHint(
                                        'Linked to saved persona v' + persona.version +
                                        ' (' + persona.history_count + ' evolution entries). ' +
                                        'Editing any field will create a new version when saved.'
                                    );
                                }
                                savedSelect.appendChild(opt);
                            });
                        })
                        .catch(function() { /* personas endpoint optional */ });

                    presetSelect.addEventListener('change', function() {
                        var opt = presetSelect.options[presetSelect.selectedIndex];
                        if (!opt || !opt.value) return;
                        // Applying a preset severs the link to any saved persona — this will
                        // create a new persona on save rather than a new version of the old one.
                        setField(personaIdInput, '');
                        if (savedSelect) savedSelect.value = '';
                        setField(roleInput, opt.dataset.role || '');
                        setField(goalsInput, opt.dataset.goals || '');
                        setField(backgroundInput, opt.dataset.background || '');
                        resetVersionHint();
                    });

                    savedSelect.addEventListener('change', function() {
                        var opt = savedSelect.options[savedSelect.selectedIndex];
                        if (!opt || !opt.value) {
                            setField(personaIdInput, '');
                            resetVersionHint();
                            return;
                        }
                        setField(personaIdInput, opt.value);
                        setField(nameInput, opt.dataset.name || '');
                        setField(roleInput, opt.dataset.role || '');
                        setField(goalsInput, opt.dataset.goals || '');
                        setField(backgroundInput, opt.dataset.background || '');
                        if (presetSelect) presetSelect.value = '';
                        showVersionHint(
                            'Linked to saved persona v' + (opt.dataset.version || '1') +
                            ' (' + (opt.dataset.historyCount || 0) + ' evolution entries). ' +
                            'Editing any field will create a new version when saved.'
                        );
                    });
                })();
            </script>
        </div>
    </details>

    <!-- Memory — collapsible -->
    <details class="detail-section collapsible-section" {% if memory_ids_raw %}open{% endif %}>
        <summary class="section-toggle">
            <h2>Memory</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="form-group">
                <label for="memory_ids">Memory IDs</label>
                <input id="memory_ids" name="memory_ids" type="text" value="{{ memory_ids_raw }}">
                <p class="form-hint">Comma or newline separated memory IDs.</p>
            </div>
        </div>
    </details>

    <!-- Sandbox — collapsible -->
    <details class="detail-section collapsible-section" {% if sandbox_provider %}open{% endif %}>
        <summary class="section-toggle">
            <h2>Sandbox</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="form-group">
                <label for="sandbox_provider">Sandbox Provider</label>
                <select id="sandbox_provider" name="sandbox_provider">
                    <option value="" {% if not sandbox_provider %}selected{% endif %}>None (disabled)</option>
                    <option value="e2b" {% if sandbox_provider == 'e2b' %}selected{% endif %}>E2B (Cloud — Firecracker microVMs)</option>
                    <option value="daytona" {% if sandbox_provider == 'daytona' %}selected{% endif %}>Daytona (Cloud — Full dev environments)</option>
                    <option value="graalpy" {% if sandbox_provider == 'graalpy' %}selected{% endif %}>GraalPy (Local — No cloud required)</option>
                </select>
                <p class="form-hint">Enable code execution in a secure sandbox. Requires the corresponding API key in Settings (E2B, Daytona) or GraalPy installed locally.</p>
            </div>
        </div>
    </details>

    <!-- Internet Access — collapsible -->
    <details class="detail-section collapsible-section" {% if internet_provider %}open{% endif %}>
        <summary class="section-toggle">
            <h2>Internet Access</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="form-group">
                <label for="internet_provider">Internet Provider</label>
                <select id="internet_provider" name="internet_provider">
                    <option value="" {% if not internet_provider %}selected{% endif %}>None (disabled)</option>
                    <option value="tavily" {% if internet_provider == 'tavily' %}selected{% endif %}>Tavily (Search + extract)</option>
                    <option value="firecrawl" {% if internet_provider == 'firecrawl' %}selected{% endif %}>Firecrawl (Search + crawl)</option>
                    <option value="offline" {% if internet_provider == 'offline' %}selected{% endif %}>Offline (placeholder provider)</option>
                </select>
                <p class="form-hint">When enabled, the agent gets `internet_search` and `open_web_page` tools. Configure API keys in Settings.</p>
            </div>
        </div>
    </details>

    <!-- Automations — collapsible -->
    <details class="detail-section collapsible-section" {% if default_timezone or not automations_enabled %}open{% endif %}>
        <summary class="section-toggle">
            <h2>Automations</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="form-grid">
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="automations_enabled" value="1" {% if automations_enabled %}checked{% endif %}>
                        Enable automations tools
                    </label>
                    <p class="form-hint">When enabled (and Oracle is connected), the agent can create durable scheduled jobs from chat.</p>
                </div>
                <div class="form-group">
                    <label for="default_timezone">Default Timezone</label>
                    <input id="default_timezone" name="default_timezone" type="text" value="{{ default_timezone }}" placeholder="America/New_York" list="memorizz-timezones" autocomplete="off" spellcheck="false">
                    <p class="form-hint">IANA timezone name used when timezone is omitted for automations.</p>
                </div>
            </div>
        </div>
    </details>

    <!-- WhatsApp Chat — collapsible -->
    <details class="detail-section collapsible-section" {% if whatsapp_enabled %}open{% endif %}>
        <summary class="section-toggle">
            <h2>WhatsApp Chat</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="form-grid">
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="whatsapp_enabled" value="1" {% if whatsapp_enabled %}checked{% endif %}>
                        Enable WhatsApp chat for this agent
                    </label>
                    <p class="form-hint">When enabled, this agent can be set as the active WhatsApp communicator. Users can then chat with this agent via WhatsApp.</p>
                </div>
                <div class="form-group">
                    <label for="whatsapp_welcome_message">Welcome Message (Optional)</label>
                    <textarea
                        id="whatsapp_welcome_message"
                        name="whatsapp_welcome_message"
                        rows="3"
                        placeholder="Hi! I'm your AI assistant. How can I help you today?">{{ whatsapp_welcome_message }}</textarea>
                    <p class="form-hint">This message will be sent when a user first contacts the agent via WhatsApp (feature coming soon).</p>
                </div>
            </div>
        </div>
    </details>

    <!-- Self-Awareness — collapsible -->
    <details
        class="detail-section collapsible-section"
        {% if self_aware or self_aware_root_paths or self_aware_allow_writes or self_aware_allow_deletes %}open{% endif %}
    >
        <summary class="section-toggle">
            <h2>Self-Awareness</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="form-grid">
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="self_aware" value="1" {% if self_aware %}checked{% endif %}>
                        Enable host codebase awareness tools
                    </label>
                    <p class="form-hint">When enabled, the agent can inspect files and run allowlisted commands within configured roots.</p>
                </div>
                <div class="form-group">
                    <label for="self_aware_root_paths">Allowed Root Paths</label>
                    <textarea id="self_aware_root_paths" name="self_aware_root_paths" rows="4" placeholder="/path/to/project&#10;./relative/path">{{ self_aware_root_paths }}</textarea>
                    <p class="form-hint">One path per line (or comma-separated). Empty uses the current working directory.</p>
                </div>
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="self_aware_allow_writes" value="1" {% if self_aware_allow_writes %}checked{% endif %}>
                        Allow writes
                    </label>
                    <p class="form-hint">Disabled by default. Enables file creation and edits under allowed roots.</p>
                </div>
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="self_aware_allow_deletes" value="1" {% if self_aware_allow_deletes %}checked{% endif %}>
                        Allow deletes
                    </label>
                    <p class="form-hint">Deletes require writes and remain guarded by root and wildcard protections.</p>
                </div>
            </div>
        </div>
    </details>

    <!-- Skills Marketplace — collapsible -->
    <details class="detail-section collapsible-section" {% if skills_marketplace_provider %}open{% endif %}>
        <summary class="section-toggle">
            <h2>Skills Marketplace</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="form-group">
                <label for="skills_marketplace_provider">Marketplace Provider</label>
                <select id="skills_marketplace_provider" name="skills_marketplace_provider">
                    <option value="" {% if not skills_marketplace_provider %}selected{% endif %}>None (disabled)</option>
                    <option value="skillsmp" {% if skills_marketplace_provider == 'skillsmp' %}selected{% endif %}>SkillsMP (skillsmp.com)</option>
                    <option value="vercel" {% if skills_marketplace_provider == 'vercel' %}selected{% endif %}>Vercel Agent Skills (skills.sh)</option>
                </select>
                <p class="form-hint" id="skills-marketplace-hint">
                    {% if skills_marketplace_provider == 'vercel' %}
                    Agent gets <code>vercel_skills_search</code> and <code>vercel_skill_fetch</code> tools to search and use skills from the open Vercel ecosystem. A <code>GITHUB_TOKEN</code> is required for search (raises rate limits from 60 to 5,000/hr).
                    {% elif skills_marketplace_provider == 'skillsmp' %}
                    Agent gets the <code>skills_marketplace_search</code> tool. Configure <code>SKILLSMP_API_KEY</code> in Settings.
                    {% else %}
                    When enabled, the agent gets marketplace search tools. SkillsMP requires <code>SKILLSMP_API_KEY</code>. Vercel Skills requires <code>GITHUB_TOKEN</code> for search.
                    {% endif %}
                </p>
                <p class="form-hint sandbox-error-hint" id="skills-marketplace-token-warning" style="display:none;">
                    Vercel Agent Skills is selected but <code>GITHUB_TOKEN</code> is not set. Skill search will fail (HTTP 401) until you add a token in
                    <a href="/settings#GITHUB_TOKEN">Settings</a>, or create one at
                    <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer">github.com/settings/tokens</a>
                    (no scopes required) — see the
                    <a href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens" target="_blank" rel="noopener noreferrer">GitHub docs</a>.
                </p>
                <script>
                    (function() {
                        var select = document.getElementById('skills_marketplace_provider');
                        var hint = document.getElementById('skills-marketplace-hint');
                        var warning = document.getElementById('skills-marketplace-token-warning');
                        var githubTokenPresent = null;

                        function renderHint() {
                            if (select.value === 'vercel') {
                                hint.innerHTML = 'Agent gets <code>vercel_skills_search</code> and <code>vercel_skill_fetch</code> tools to search and use skills from the open Vercel ecosystem. A <code>GITHUB_TOKEN</code> is required for search (raises rate limits from 60 to 5,000/hr).';
                            } else if (select.value === 'skillsmp') {
                                hint.innerHTML = 'Agent gets the <code>skills_marketplace_search</code> tool. Configure <code>SKILLSMP_API_KEY</code> in Settings.';
                            } else {
                                hint.innerHTML = 'When enabled, the agent gets marketplace search tools. SkillsMP requires <code>SKILLSMP_API_KEY</code>. Vercel Skills requires <code>GITHUB_TOKEN</code> for search.';
                            }
                        }

                        function renderWarning() {
                            if (select.value === 'vercel' && githubTokenPresent === false) {
                                warning.style.display = '';
                            } else {
                                warning.style.display = 'none';
                            }
                        }

                        function refreshTokenStatus() {
                            fetch('/vercel-skills/api/token-status')
                                .then(function(r) { return r.json(); })
                                .then(function(data) {
                                    githubTokenPresent = !!(data && data.github_token_present);
                                    renderWarning();
                                })
                                .catch(function() { /* ignore — warning stays hidden */ });
                        }

                        select.addEventListener('change', function() {
                            renderHint();
                            renderWarning();
                        });

                        renderHint();
                        refreshTokenStatus();
                    })();
                </script>
            </div>
        </div>
    </details>

    <!-- Tools — collapsible, read-only -->
    {% if agent_tools %}
    <details class="detail-section collapsible-section">
        <summary class="section-toggle">
            <h2>Tools ({{ agent_tools|length }})</h2>
            <span class="toggle-caret">▾</span>
        </summary>
        <div class="section-body">
            <div class="config-tools-list">
                {% for tool in agent_tools %}
                <div class="config-tool-item">
                    <span class="config-tool-name">{{ tool.name }}</span>
                    {% if tool.description %}
                    <span class="config-tool-desc">{{ tool.description }}</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            <p class="form-hint">Tools are registered programmatically via the Python SDK. This list is read-only.</p>
        </div>
    </details>
    {% endif %}

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save Agent</button>
        <a href="{% if is_edit %}/agents/{{ agent_id }}/playground{% else %}/agents{% endif %}" class="btn">Cancel</a>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
const AGENT_FORM_MODEL_CATALOG = {{ llm_model_catalog|default({}, true)|tojson }};
const AGENT_FORM_DEFAULT_MODELS = {{ default_llm_model_by_provider|default({}, true)|tojson }};
const AGENT_FORM_CUSTOM = '__custom__';

function syncAgentModelOptions() {
    const providerSelect = document.getElementById('llm_provider');
    const modelSelect = document.getElementById('llm_model_select');
    const modelCustom = document.getElementById('llm_model_custom');
    const modelHidden = document.getElementById('llm_model');
    if (!providerSelect || !modelSelect || !modelCustom || !modelHidden) return;

    const provider = (providerSelect.value || 'openai').trim().toLowerCase();
    const models = Array.isArray(AGENT_FORM_MODEL_CATALOG[provider])
        ? AGENT_FORM_MODEL_CATALOG[provider]
        : [];
    const currentValue = (modelHidden.value || modelCustom.value || '').trim();
    const fallback = (AGENT_FORM_DEFAULT_MODELS[provider] || '').trim();

    modelSelect.innerHTML = '';
    const grouped = {};
    models.forEach(function(model) {
        const group = model.group || 'Models';
        if (!grouped[group]) grouped[group] = [];
        grouped[group].push(model);
    });

    Object.keys(grouped).forEach(function(group) {
        const optgroup = document.createElement('optgroup');
        optgroup.label = group;
        grouped[group].forEach(function(model) {
            const option = document.createElement('option');
            option.value = model.value;
            option.textContent = model.label;
            optgroup.appendChild(option);
        });
        modelSelect.appendChild(optgroup);
    });

    const customOption = document.createElement('option');
    customOption.value = AGENT_FORM_CUSTOM;
    customOption.textContent = 'Custom model / deployment';
    modelSelect.appendChild(customOption);

    const inCatalog = models.some(function(model) { return model.value === currentValue; });

    if (currentValue && inCatalog) {
        modelSelect.value = currentValue;
        modelCustom.value = currentValue;
        modelCustom.style.display = 'none';
        modelHidden.value = currentValue;
        return;
    }

    if (currentValue) {
        modelSelect.value = AGENT_FORM_CUSTOM;
        modelCustom.value = currentValue;
        modelCustom.style.display = '';
        modelHidden.value = currentValue;
        return;
    }

    if (fallback && models.some(function(model) { return model.value === fallback; })) {
        modelSelect.value = fallback;
        modelCustom.value = fallback;
        modelCustom.style.display = 'none';
        modelHidden.value = fallback;
        return;
    }

    if (models.length) {
        modelSelect.value = models[0].value;
        modelCustom.value = models[0].value;
        modelCustom.style.display = 'none';
        modelHidden.value = models[0].value;
        return;
    }

    modelSelect.value = AGENT_FORM_CUSTOM;
    modelCustom.value = fallback;
    modelCustom.style.display = '';
    modelHidden.value = fallback;
}

document.addEventListener('DOMContentLoaded', function() {
    const modelSelect = document.getElementById('llm_model_select');
    const modelCustom = document.getElementById('llm_model_custom');
    const modelHidden = document.getElementById('llm_model');
    if (!modelSelect || !modelCustom || !modelHidden) return;

    modelSelect.addEventListener('change', function() {
        if (modelSelect.value === AGENT_FORM_CUSTOM) {
            modelCustom.style.display = '';
            modelHidden.value = modelCustom.value.trim();
            modelCustom.focus();
            return;
        }
        modelCustom.style.display = 'none';
        modelCustom.value = modelSelect.value;
        modelHidden.value = modelSelect.value;
    });

    modelCustom.addEventListener('input', function() {
        if (modelSelect.value === AGENT_FORM_CUSTOM) {
            modelHidden.value = modelCustom.value.trim();
        }
    });

    syncAgentModelOptions();

    // Continuous mode: on form submit, send max_steps=0
    var agentForm = document.querySelector('.agent-form');
    if (agentForm) {
        agentForm.addEventListener('submit', function() {
            var checkbox = document.getElementById('continuous_mode');
            var maxStepsInput = document.getElementById('max_steps');
            if (checkbox && checkbox.checked && maxStepsInput) {
                maxStepsInput.disabled = false;
                maxStepsInput.value = '0';
            }
        });
    }
});

function toggleContinuousMode(checkbox) {
    var maxStepsInput = document.getElementById('max_steps');
    var warning = document.getElementById('continuous-warning');
    if (checkbox.checked) {
        maxStepsInput.disabled = true;
        maxStepsInput.value = '20';
        warning.style.display = 'block';
    } else {
        maxStepsInput.disabled = false;
        warning.style.display = 'none';
    }
}
</script>
{% endblock %}