{% extends "base.html" %}

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

{% block content %}
{% from '_ui.html' import page_header, id_chip %}
{% set form_back = ('/agents/' ~ agent_id ~ '/playground', 'Agent playground') if is_edit else ('/agents', 'All agents') %}
{% if is_edit %}
{% call page_header(form_title|capitalize, 'Configure how this agent behaves and runs.', 'Agents', back=form_back) %}
    <span class="panel-meta">Agent ID</span>{{ id_chip(agent_id|string, 40) }}
{% endcall %}
{% else %}
{{ page_header(form_title|capitalize, 'Configure how this agent behaves and runs.', 'Agents', back=form_back) }}
{% endif %}

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

{% if not is_edit and agent_templates %}
{% for template in agent_templates %}
<details class="panel agent-template" id="agent-template-{{ template.key }}">
    <summary><span>Start from a template: {{ template.title }}</span><span class="agent-template-meta">{{ template.summary }}</span></summary>
    <form method="post" action="/agents/templates/{{ template.key }}" class="agent-template-form">
        <p class="form-hint">Creates the agent with instructions, a persona and memory for people and projects, and attaches {{ template.connections|join(', ') }} over MCP. You then sign in to each one on MCP connections. Changes such as drafts or Notion edits wait for your approval.</p>
        <p class="form-hint">Gmail and Google Calendar are Google Developer Previews and need a Google OAuth client (Web application) with the redirect URI <code data-callback-url>/api/mcp/oauth/callback</code>. You can add it now or later with Edit on MCP connections. <a href="https://developers.google.com/workspace/gmail/api/guides/configure-mcp-server" target="_blank" rel="noopener noreferrer">Google setup guide</a>.</p>
        <div class="form-grid">
            <div class="form-group"><label for="tpl-{{ template.key }}-client-id">Google OAuth client ID (optional)</label><input id="tpl-{{ template.key }}-client-id" name="google_client_id" autocomplete="off"></div>
            <div class="form-group"><label for="tpl-{{ template.key }}-client-secret">Google OAuth client secret (optional)</label><input id="tpl-{{ template.key }}-client-secret" name="google_client_secret" type="password" autocomplete="new-password"><small class="form-hint">Encrypted at rest; never stored in the agent record.</small></div>
        </div>
        <p class="form-hint">Uses the default model ({{ llm_provider }} · {{ llm_model }}). Change it later in the playground.</p>
        <button type="submit" class="btn btn-primary">Create {{ template.persona.name }}</button>
    </form>
</details>
{% endfor %}
<script>
    document.querySelectorAll('[data-callback-url]').forEach(function(el) { el.textContent = window.location.origin + '/api/mcp/oauth/callback'; });
</script>
{% endif %}

<form method="post" action="{{ form_action }}" class="agent-form">
    <!-- Basics — always visible -->
    <section class="panel agent-form-section" aria-labelledby="agent-form-basics-title">
        <div class="panel-header"><h2 class="panel-title" id="agent-form-basics-title">Basics</h2></div>
        <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: var(--accent-warning); 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="tool_cache" {% if tool_cache %}checked{% endif %}>
                    Enable tool call cache
                </label>
                <small class="form-hint">Reuse results of repeated calls to tools marked cacheable, and MCP tools their server marks read-only and idempotent. Results stay fresh for 5 minutes.</small>
            </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 class="form-group checkbox-group">
                <label>
                    <input type="checkbox" name="continual_learning" {% if continual_learning %}checked{% endif %}>
                    Enable continual learning (promote repeated successful workflows into learned skills)
                </label>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" name="learning_control_plane" {% if learning_control_plane %}checked{% endif %}>
                    Enable the learning control plane (bounded evidence, compilation, and reversible forgetting)
                </label>
                <p class="form-hint">Continual learning enables this automatically unless you explicitly turn it off.</p>
            </div>
            <div class="form-group">
                <label for="skill_injection_role">Authority for newly learned skills</label>
                <select id="skill_injection_role" name="skill_injection_role"
                    onchange="syncSkillAuthorityReview()">
                    <option value="user" {% if skill_injection_role == 'user' %}selected{% endif %}>
                        User context (default)
                    </option>
                    <option value="developer" {% if skill_injection_role == 'developer' %}selected{% endif %}>
                        Developer instructions (review required)
                    </option>
                </select>
                <p class="form-hint">
                    User authority treats a retrieved skill as optional task context.
                    Developer authority gives an activated skill application-instruction
                    priority below system policy. OpenAI receives a developer message;
                    Anthropic receives the same reviewed instructions in its top-level
                    system parameter.
                </p>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input id="continual_learning_require_shadow" type="checkbox"
                        name="continual_learning_require_shadow"
                        {% if continual_learning_require_shadow %}checked{% endif %}>
                    Require shadow review before activation
                </label>
                <p class="form-hint">
                    Required for developer authority so generated skills cannot gain
                    application-level authority without an explicit activation review.
                    Existing skills keep the authority stored on their own record.
                </p>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input id="continual_learning_shadow_evaluation" type="checkbox"
                        name="continual_learning_shadow_evaluation"
                        {% if continual_learning_shadow_evaluation %}checked{% endif %}>
                    Passively evaluate shadow skills on new workflows
                </label>
                <p class="form-hint">
                    Runs deterministic comparisons in a background queue after
                    the response is stored. Shadow skills are not injected, and
                    no LLM judge or tool is called by this evaluator. Semantic
                    retrieval may use the configured embedding provider.
                    Readiness remains advisory; activation is always explicit.
                </p>
            </div>
        </div>
    </section>

    <!-- LLM Configuration — collapsible -->
    <details class="panel agent-form-section" open>
        <summary>LLM configuration</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 or 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 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="panel agent-form-section" {% if persona_name %}open{% endif %}>
        <summary>Persona</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="panel agent-form-section" {% if memory_ids_raw %}open{% endif %}>
        <summary>Memory</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>

    <!-- Meta-harness — collapsible -->
    <details class="panel agent-form-section" {% if meta_harness_mode %}open{% endif %}>
        <summary>Agent harness runtime</summary>
        <div class="section-body">
            <div class="form-grid">
                <div class="form-group">
                    <label for="meta_harness_mode">Mode</label>
                    <select id="meta_harness_mode" name="meta_harness_mode">
                        <option value="" {% if not meta_harness_mode %}selected{% endif %}>Disabled</option>
                        <option value="delegate" {% if meta_harness_mode == 'delegate' %}selected{% endif %}>Delegate specialist tasks</option>
                        <option value="runtime" {% if meta_harness_mode == 'runtime' %}selected{% endif %}>Run complete turns on a harness</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="default_harness">Default harness</label>
                    <select id="default_harness" name="default_harness">
                        <option value="auto" {% if default_harness == 'auto' %}selected{% endif %}>Auto route</option>
                        <option value="codex" {% if default_harness == 'codex' %}selected{% endif %}>Codex</option>
                        <option value="claude-code" {% if default_harness == 'claude-code' %}selected{% endif %}>Claude Code</option>
                        <option value="openhands" {% if default_harness == 'openhands' %}selected{% endif %}>OpenHands</option>
                        <option value="deepseek" {% if default_harness == 'deepseek' %}selected{% endif %}>DeepSeek (Claude Code runtime)</option>
                        <option value="pi" {% if default_harness == 'pi' %}selected{% endif %}>pi</option>
                        <option value="hermes" {% if default_harness == 'hermes' %}selected{% endif %}>Hermes Agent</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="harness_model_select">Harness model <span class="optional">optional</span></label>
                    <select id="harness_model_select" class="harness-model-select" aria-describedby="harness_model_hint">
                        <option value="{{ harness_model|default('') }}" selected>{% if harness_model %}{{ harness_model }}{% else %}Harness default{% endif %}</option>
                    </select>
                    <input id="harness_model" name="harness_model" value="{{ harness_model|default('') }}" placeholder="Type a model name" autocomplete="off" spellcheck="false" hidden>
                    <p class="form-hint" id="harness_model_hint">The model the harness runs. Blank uses the harness's own default.</p>
                </div>
                <div class="form-group">
                    <label for="harness_workspace">Default workspace <span class="optional">optional</span></label>
                    <input id="harness_workspace" name="harness_workspace" value="{{ harness_workspace }}" placeholder="/absolute/path/to/project">
                </div>
            </div>
            <p class="form-hint">MemoRizz remains the memory, approval, observability, and verification control plane. Runtime mode routes the complete turn externally; delegate mode gives the native MemAgent bounded harness tools. Risky run envelopes require host approval.</p>
            <p class="form-hint"><a href="/harnesses">Open the Agent Harnesses console</a> to probe adapters and inspect durable runs.</p>
        </div>
    </details>

    <!-- Delegates — collapsible -->
    <details class="panel agent-form-section agent-delegates" {% if delegate_ids %}open{% endif %}>
        <summary>Delegates{% if delegate_ids %} <span class="summary-count">{{ delegate_ids|length }}</span>{% endif %}</summary>
        <div class="section-body">
            <input type="hidden" name="delegation_form" value="1">
            <p class="form-hint">Delegates are other saved agents this agent hands parts of a request to. The agent's model splits each request among them, each delegate works on its part as a subagent, and the agent combines their results. In harness runs each delegate shows as a subagent in the trace. Every delegate makes its own model calls, so delegated requests cost more.</p>
            <fieldset class="delegate-list" id="delegate-list">
                <legend>Agents to delegate to</legend>
                {% for choice in delegate_choices %}
                <label class="delegate-choice{% if choice.runs_on %} delegate-choice--harness{% endif %}">
                    <input type="checkbox" name="delegate_ids" value="{{ choice.id }}" {% if choice.selected %}checked{% endif %}>
                    <span class="delegate-name">{{ choice.name }}</span>
                    <span class="delegate-meta mono">{% if choice.runs_on %}<span class="delegate-runs-on">runs on {{ choice.runs_on.label }}{% if choice.runs_on.model %} · {{ choice.runs_on.model }}{% endif %}</span> · {% endif %}{{ choice.id[:8] }}{% if choice.model and not choice.runs_on %} · {{ choice.model }}{% endif %}{% if choice.has_delegates %} · has its own delegates{% endif %}</span>
                </label>
                {% else %}
                <p class="form-hint delegate-empty">There are no other saved agents yet. Add a harness below, or create the agents you want to delegate to first, then pick them here.</p>
                {% endfor %}
            </fieldset>
            {% if not ui_read_only %}
            <div class="harness-delegate-add" id="harness-delegate-add" hidden>
                <p class="harness-delegate-title">Add a harness as a delegate</p>
                <div class="harness-delegate-row">
                    <div class="form-group">
                        <label for="harness_delegate_harness">Harness</label>
                        <select id="harness_delegate_harness"></select>
                    </div>
                    <div class="form-group">
                        <label for="harness_delegate_model_select">Model</label>
                        <select id="harness_delegate_model_select" class="harness-model-select"></select>
                        <input id="harness_delegate_model" placeholder="Type a model name" autocomplete="off" spellcheck="false" hidden>
                    </div>
                    <div class="form-group">
                        <label for="harness_delegate_name">Name <span class="optional">optional</span></label>
                        <input id="harness_delegate_name" placeholder="Codex delegate" maxlength="80" autocomplete="off">
                    </div>
                    <button type="button" class="btn btn-sm" id="harness_delegate_add">Add delegate</button>
                </div>
                <p class="form-hint harness-delegate-status" id="harness_delegate_status" aria-live="polite"></p>
                <p class="form-hint">A harness delegate runs its part on that harness, with the harness's own tools and sandbox. On Agent Harnesses it works in that run's workspace; in the playground it uses the workspace set on the delegate (its agent harness settings), or else the folder the UI runs in. Agent delegates run on their own models with MemoRizz's tools. Mixing both works well: send code and file work to a harness, research and writing to an agent.</p>
            </div>
            {% endif %}
            <div class="form-grid">
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="delegation_enabled" value="1" {% if delegation_enabled %}checked{% endif %}>
                        Delegate requests
                    </label>
                    <p class="form-hint">Off keeps the delegates saved but the agent answers every request itself.</p>
                </div>
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="delegation_root_fallback" value="1" {% if delegation_root_fallback %}checked{% endif %}>
                        Answer itself when a request can't be split
                    </label>
                    <p class="form-hint">Off makes such a request fail instead.</p>
                </div>
                <div class="form-group">
                    <label for="delegation_consolidation">Combine results</label>
                    <select id="delegation_consolidation" name="delegation_consolidation">
                        {% for value, label in delegation_consolidations.items() %}
                        <option value="{{ value }}" {% if delegation_consolidation == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                    <p class="form-hint">Listing them skips one model call.</p>
                </div>
                <div class="form-group">
                    <label for="delegation_max_workers">Delegates working at once <span class="optional">optional</span></label>
                    <input id="delegation_max_workers" name="delegation_max_workers" type="number" min="1" max="8" step="1" value="{{ delegation_max_workers }}" placeholder="All of them">
                </div>
            </div>
            {% if delegation_has_plan %}
            <p class="form-hint">This agent follows a fixed plan set in code. The plan is kept as it is; these settings choose which agents it can use and how their results are combined.</p>
            {% endif %}
        </div>
    </details>

    <!-- Sandbox — collapsible -->
    <details class="panel agent-form-section" {% if sandbox_provider %}open{% endif %}>
        <summary>Sandbox</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>

    <!-- Browser Control — collapsible -->
    <details class="panel agent-form-section" {% if browser_control_provider %}open{% endif %}>
        <summary>Browser control</summary>
        <div class="section-body">
            <div class="form-group">
                <label for="browser_control_provider">Browser control provider</label>
                <select id="browser_control_provider" name="browser_control_provider">
                    <option value="" {% if not browser_control_provider %}selected{% endif %}>None (disabled)</option>
                    <option value="browseruse" {% if browser_control_provider == 'browseruse' %}selected{% endif %}>Browser Use (isolated tool)</option>
                </select>
                <p class="form-hint">Adds the <code>browser_control</code> tool. Every model-initiated task is treated as side-effecting and pauses for durable operator approval. Runtime, model, domain allowlist, headless mode, step limit, and timeout are configured with the <code>MEMORIZZ_BROWSER_USE_*</code> settings.</p>
            </div>
        </div>
    </details>

    <!-- Internet Access — collapsible -->
    <details class="panel agent-form-section" {% if internet_provider %}open{% endif %}>
        <summary>Internet access</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="panel agent-form-section" {% if default_timezone or not automations_enabled %}open{% endif %}>
        <summary>Automations</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="panel agent-form-section" {% if whatsapp_enabled %}open{% endif %}>
        <summary>WhatsApp chat</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 <span class="optional">optional</span></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="panel agent-form-section"
        {% if self_aware or self_aware_root_paths or self_aware_allow_writes or self_aware_allow_deletes %}open{% endif %}
    >
        <summary>Self-awareness</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="panel agent-form-section" {% if skills_marketplace_provider %}open{% endif %}>
        <summary>Skills marketplace</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"></p>
                <script>
                    (function() {
                        var select = document.getElementById('skills_marketplace_provider');
                        var hint = document.getElementById('skills-marketplace-hint');
                        var HINTS = {
                            vercel: 'Agent gets <code>vercel_skills_search</code> and <code>vercel_skill_fetch</code> to search skills.sh and read skills from GitHub. No token needed; a <code>GITHUB_TOKEN</code> only raises GitHub rate limits.',
                            skillsmp: 'Agent gets the <code>skills_marketplace_search</code> tool. Configure <code>SKILLSMP_API_KEY</code> in Settings.',
                            '': 'When enabled, the agent can search a marketplace for skills itself. To pin specific skills instead, attach them on the <a href="/vercel-skills">Skills</a> page.'
                        };
                        function renderHint() { hint.innerHTML = HINTS[select.value] || HINTS['']; }
                        select.addEventListener('change', renderHint);
                        renderHint();
                    })();
                </script>
            </div>
        </div>
    </details>

    <!-- Tools — collapsible, read-only -->
    {% if agent_tools %}
    <details class="panel agent-form-section">
        <summary>Tools ({{ agent_tools|length }})</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';
    }
}

function syncSkillAuthorityReview() {
    var roleSelect = document.getElementById('skill_injection_role');
    var reviewCheckbox = document.getElementById(
        'continual_learning_require_shadow'
    );
    if (roleSelect && reviewCheckbox && roleSelect.value === 'developer') {
        reviewCheckbox.checked = true;
    }
}
</script>
<script>
// Harness models and harness delegates. Options load after the page so the
// form never waits on harness probes.
(function () {
    const OTHER = '__other__';
    const coordinatorId = {{ (agent_id or '')|tojson }};
    let options = {harnesses: [], models: {}};
    const esc = escapeHtml; // base.html

    // A model dropdown for one harness: its default, its providers' newest
    // models, and "Other model…" to type any name into the input behind it.
    function fillModels(select, input, harness) {
        if (!select || !input) return;
        const info = options.models[harness] || {};
        const groups = info.groups || [];
        const current = input.value.trim();
        select.innerHTML = '';
        const add = (parent, value, label) => { const o = document.createElement('option'); o.value = value; o.textContent = label; parent.append(o); return o; };
        add(select, '', info.default ? 'Default (' + info.default + ')' : 'Harness default');
        groups.forEach(group => {
            const g = document.createElement('optgroup');
            g.label = group.label;
            group.models.forEach(model => add(g, model, model));
            select.append(g);
        });
        add(select, OTHER, 'Other model…');
        const known = groups.some(group => group.models.includes(current));
        select.value = !current ? (select.dataset.other ? OTHER : '') : (known ? current : OTHER);
        input.hidden = select.value !== OTHER;
    }
    function bindModels(select, input) {
        if (!select || !input) return;
        select.addEventListener('change', () => {
            const other = select.value === OTHER;
            select.dataset.other = other ? '1' : '';
            input.hidden = !other;
            if (other) { input.value = ''; input.focus(); } else { input.value = select.value; }
        });
    }

    // The agent's own harness model follows its default harness.
    const harnessSelect = document.getElementById('default_harness');
    const modelSelect = document.getElementById('harness_model_select');
    const modelInput = document.getElementById('harness_model');
    bindModels(modelSelect, modelInput);
    const syncOwnModel = () => fillModels(modelSelect, modelInput, harnessSelect ? harnessSelect.value : 'auto');
    harnessSelect?.addEventListener('change', () => {
        // A model picked for one harness rarely runs on another.
        if (modelSelect && modelSelect.value !== OTHER) modelInput.value = '';
        syncOwnModel();
    });

    // Add a harness as a delegate.
    const panel = document.getElementById('harness-delegate-add');
    const pick = document.getElementById('harness_delegate_harness');
    const pickModel = document.getElementById('harness_delegate_model_select');
    const pickModelInput = document.getElementById('harness_delegate_model');
    const pickName = document.getElementById('harness_delegate_name');
    const addButton = document.getElementById('harness_delegate_add');
    const status = document.getElementById('harness_delegate_status');
    const list = document.getElementById('delegate-list');
    bindModels(pickModel, pickModelInput);
    const syncPick = () => {
        fillModels(pickModel, pickModelInput, pick.value);
        const row = options.harnesses.find(h => h.name === pick.value);
        pickName.placeholder = (row ? row.label : 'Harness') + ' delegate';
    };
    pick?.addEventListener('change', () => { pickModelInput.value = ''; pickModel.dataset.other = ''; syncPick(); });

    const addChoice = (agent) => {
        list.querySelector('.delegate-empty')?.remove();
        const label = document.createElement('label');
        label.className = 'delegate-choice delegate-choice--harness';
        const runsOn = agent.runs_on || {};
        const box = document.createElement('input');
        box.type = 'checkbox';
        box.name = 'delegate_ids';
        box.value = agent.id;
        box.checked = true;
        label.append(box);
        label.insertAdjacentHTML('beforeend', '<span class="delegate-name">' + esc(agent.name) + '</span>'
            + '<span class="delegate-meta mono"><span class="delegate-runs-on">runs on ' + esc(runsOn.label || runsOn.harness) + (runsOn.model ? ' · ' + esc(runsOn.model) : '') + '</span> · ' + esc(String(agent.id).slice(0, 8)) + '</span>');
        list.append(label);
        const count = list.querySelectorAll('input[name=delegate_ids]:checked').length;
        const summary = list.closest('details')?.querySelector('summary');
        if (summary) {
            let badge = summary.querySelector('.summary-count');
            if (!badge) { badge = document.createElement('span'); badge.className = 'summary-count'; summary.append(' ', badge); }
            badge.textContent = count;
        }
    };
    addButton?.addEventListener('click', async () => {
        const model = (pickModel.value === OTHER ? pickModelInput.value : pickModel.value).trim();
        addButton.disabled = true;
        status.classList.remove('is-bad');
        status.textContent = 'Adding…';
        try {
            const response = await fetch('/api/harness-delegates', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', Accept: 'application/json'},
                body: JSON.stringify({harness: pick.value, model, name: pickName.value.trim(), coordinator_id: coordinatorId}),
            });
            const body = await response.json().catch(() => ({}));
            if (!response.ok) throw new Error(body.detail || 'Could not add the delegate');
            addChoice(body.agent);
            pickName.value = '';
            status.textContent = body.agent.name + ' was saved and ticked. Save this form to keep it as a delegate.';
        } catch (error) {
            status.classList.add('is-bad');
            status.textContent = error.message;
        } finally {
            addButton.disabled = false;
        }
    });

    fetch('/api/harness-delegates/options', {headers: {Accept: 'application/json'}})
        .then(response => response.ok ? response.json() : null)
        .then(data => {
            if (!data) return;
            options = {harnesses: data.harnesses || [], models: data.models || {}};
            syncOwnModel();
            if (!pick || !options.harnesses.length) return;
            pick.innerHTML = '';
            options.harnesses.forEach(h => {
                const o = document.createElement('option');
                o.value = h.name;
                o.textContent = h.label + (h.ready ? '' : ' · not ready');
                o.disabled = !h.ready;
                pick.append(o);
            });
            const first = options.harnesses.find(h => h.ready);
            if (!first) return;
            pick.value = first.name;
            syncPick();
            panel.hidden = false;
        })
        .catch(() => {});
})();
</script>
{% endblock %}