{% extends "base.html" %}

{% block title %}{{ form_title|capitalize }} - Memorizz{% endblock %}
{% block head %}<script src="/static/js/local-models.js?v=1"></script>
<script src="/static/js/page-dialogs.js?v=1"></script>
<link rel="stylesheet" href="/static/css/components/dialogs.css?v=2">{% endblock %}

{% block content %}
{% macro section_summary(key, title, description) %}
        <summary>
            <span class="builder-section-heading">
                <span class="builder-section-title">{{ title }}</span>
                <span class="builder-section-desc">{{ description }}</span>
            </span>
            <span class="builder-section-status" data-section-status="{{ key }}"></span>
        </summary>
{% endmacro %}
{% 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, 'Instructions, model, memory, tools and runtime. Every setting here has a Python SDK equivalent.', 'Agents', back=form_back) %}
    <span class="panel-meta">Agent ID</span>{{ id_chip(agent_id|string, 40) }}
{% endcall %}
{% else %}
{{ page_header(form_title|capitalize, 'Instructions, model, memory, tools and runtime. Every setting here has a Python SDK equivalent.', 'Agents', back=form_back) }}
{% endif %}

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

{% if template_notice %}
<div class="success-message" role="status">{{ template_notice }}</div>
{% endif %}

{% if not is_edit and agent_templates %}
<section class="panel agent-templates" id="agent-templates" aria-labelledby="agent-templates-title">
    <div class="panel-header">
        <h2 class="panel-title" id="agent-templates-title">Start from a template</h2>
        <span class="panel-meta">Fills in the form below. Review it, then save the agent.</span>
    </div>
    <div class="agent-template-grid">
        {% for template in agent_templates %}
        <article class="agent-template-card" data-template-card="{{ template.key }}">
            <div class="agent-template-card-head">
                <span class="agent-template-category">{{ template.category }}</span>
                {% if not template.builtin %}<span class="agent-template-yours">Yours</span>{% endif %}
            </div>
            <h3 class="agent-template-title">{{ template.title }}</h3>
            {% if template.summary %}<p class="agent-template-summary" title="{{ template.summary }}">{{ template.summary }}</p>{% endif %}
            {% if template.chips %}
            <ul class="agent-template-chips">
                {% for chip in template.chips %}<li>{{ chip }}</li>{% endfor %}
            </ul>
            {% endif %}
            <div class="agent-template-actions">
                <button type="button" class="btn btn-sm btn-primary" data-use-template="{{ template.key }}" aria-pressed="false">Use template</button>
                {% if not template.builtin %}
                <form method="post" action="/agents/templates/{{ template.key|urlencode }}/delete" data-delete-template="{{ template.title }}">
                    <button type="submit" class="btn btn-sm">Delete</button>
                </form>
                {% endif %}
            </div>
        </article>
        {% endfor %}
    </div>
    <p class="form-hint">Make your own: set up the form, then use <strong>Save as template</strong> at the bottom. An agent's edit page has it too.</p>
</section>
<script>
    window.AGENT_FORM_TEMPLATES = {{ agent_templates|tojson }};
    window.AGENT_FORM_APPLY_TEMPLATE = {{ (apply_template|default(''))|tojson }};
</script>
{% endif %}

<div class="agent-builder">
<div class="agent-builder-main">
<form method="post" action="{{ form_action }}" class="agent-form"{% if is_edit %} data-is-edit="1"{% endif %}>
    <input type="hidden" id="template_key" name="template_key" value="{{ template_key|default('') }}">
    {% if is_edit %}<input type="hidden" name="source_agent_id" value="{{ agent_id }}">{% endif %}
    {% if not is_edit %}
    <div class="panel agent-template-banner" id="agent-template-banner" role="status" hidden>
        <div class="agent-template-banner-head">
            <p><strong>Using the <span data-template-title></span> template.</strong> Review the fields below, then save the agent.</p>
            <button type="button" class="btn btn-sm" data-clear-template>Start blank</button>
        </div>
        <p class="form-hint" data-template-connections hidden>Saving also attaches <span data-template-connection-list></span> over MCP; you then sign in to each one on MCP connections. Changes such as drafts or Notion edits wait for your approval.</p>
        <div data-template-google hidden>
            <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>. 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="google_client_id">Google OAuth client ID (optional)</label><input id="google_client_id" name="google_client_id" autocomplete="off"></div>
                <div class="form-group"><label for="google_client_secret">Google OAuth client secret (optional)</label><input id="google_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>
        </div>
    </div>
    {% endif %}
    <!-- Identity -->
    <details class="panel agent-form-section builder-section" id="section-identity" open>
        {{ section_summary('identity', 'Identity', 'What the agent is called and the instruction it always follows.') }}
        <div class="section-body">
            <div class="form-group">
                <label for="agent_name">Agent name</label>
                <input id="agent_name" name="agent_name" type="text" value="{{ agent_name }}" placeholder="e.g. Support agent" autocomplete="off">
            </div>
            <div class="form-group">
                <label for="instruction">System instruction</label>
                <textarea id="instruction" name="instruction" rows="8" spellcheck="true">{{ instruction }}</textarea>
                <p class="form-hint">Sent with every request, ahead of memory and the conversation. Keep it to the agent's job, rules and tone.</p>
            </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>
                    <p class="form-hint">Sets the default memory types. Assistant keeps conversations, a persona and entity facts; Workflow keeps tool workflows; Deep research keeps a shared research memory.</p>
                </div>
            </div>
        </div>
    </details>

    <!-- LLM Configuration — collapsible -->
    <details class="panel agent-form-section builder-section" id="section-model" open>
        {{ section_summary('model', 'Model', 'The model that answers, and an optional cheaper background model for summaries, compaction and consolidation.') }}
        <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 class="form-grid" id="background-model">
                <div class="form-group">
                    <label for="background_provider">Background model</label>
                    <select id="background_provider" onchange="syncBackgroundModel(true)">
                        <option value="">Same as the chat model</option>
                        <option value="openai">OpenAI</option>
                        <option value="anthropic">Anthropic</option>
                        <option value="azure">Azure OpenAI</option>
                        <option value="ollama">Ollama (Local)</option>
                        <option value="huggingface">HuggingFace</option>
                        <option value="mlx">MLX (Apple Silicon)</option>
                        <option value="local-openai">Local OpenAI-compatible</option>
                    </select>
                </div>
                <div class="form-group" id="background_model_group">
                    <label for="background_model_name">Background model name</label>
                    <input id="background_model_name" type="text" list="background_model_options" autocomplete="off" oninput="syncBackgroundModel(false)" placeholder="e.g. qwen2.5:7b">
                    <datalist id="background_model_options"></datalist>
                </div>
            </div>
            <input type="hidden" id="background_model" name="background_model" value="{{ background_model|default('') }}">
            <p class="form-hint">Summaries, context compaction, reflection, skill distillation and memory consolidation run on this model; replies keep the chat model. A smaller, cheaper model is usually enough.</p>
        </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, banner-only (the shared
    // widget in static/js/local-models.js; pull/delete UI stays in Settings
    // → Local models). The point is that users don't save an agent pointing
    // at an Ollama tag they never pulled (which 404s mid-chat).
    (function () {
        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 '';
        }

        const preflight = window.MemorizzLocalModels.mount({
            statusId: 'llm_model_status',
            provider: currentProvider,
            model: currentModel,
            refreshAttr: 'data-preflight-refresh',
            hostFallback: 'localhost:11434',
            copy: {
                warningPrefix: 'Pre-flight: ',
                refreshText: 'refresh',
                ollamaMissing: 'Saving this agent is fine, but the first chat will fail with a 404. Run {pull}, pull from <a href="/settings#local-models">Settings → Local models</a>, or {browse}. Then {refresh}.',
                huggingfaceUnavailable: 'Install it with <code>pip install memorizz[huggingface]</code>, then {refresh}.',
                huggingfaceMissing: 'First chat will trigger a multi-GB download and may stall. Pre-download with {download}, pull from <a href="/settings#local-models">Settings → Local models</a>, or {card}. Then {refresh}.',
            },
        });

        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')) {
                preflight.check();
            }
        });
        document.addEventListener('input', function (e) {
            if (e.target && e.target.id === 'llm_model_custom') {
                preflight.schedule();
            }
        });
        document.addEventListener('DOMContentLoaded', preflight.check);
        // DOMContentLoaded may have already fired by the time this script runs.
        preflight.check();
    })();
    </script>

    <!-- Persona — collapsible -->
    <details class="panel agent-form-section builder-section" id="section-persona" {% if persona_name %}open{% endif %}>
        {{ section_summary('persona', 'Persona', 'The name, role, goals and background the agent speaks from. Optional.') }}
        <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 -->
    <details class="panel agent-form-section builder-section" id="section-memory" {% if memory_ids_raw or sealed_conversations|default(false) or memory_consolidation|default(false) %}open{% endif %}>
        {{ section_summary('memory', 'Memory', 'What the agent remembers, who can see it, and how it is kept tidy.') }}
        <div class="section-body">
            <div class="form-group">
                <label for="memory_ids">Memory IDs <span class="optional">optional</span></label>
                <input id="memory_ids" name="memory_ids" type="text" value="{{ memory_ids_raw }}" autocomplete="off" spellcheck="false">
                <p class="form-hint">Comma or newline separated. Blank gives the agent a memory of its own when it first runs; share an ID to let agents share a memory.</p>
            </div>
            <div class="form-grid">
            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" name="enable_entity_memory" {% if enable_entity_memory %}checked{% endif %}>
                    Enable entity memory
                </label>
                <p class="form-hint">Facts about people, places and things, recalled when relevant.</p>
            </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>
                <p class="form-hint">Records multi-step tool workflows so the agent can reuse them.</p>
            </div>
            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" name="semantic_cache" {% if semantic_cache %}checked{% endif %}>
                    Enable semantic cache
                </label>
                <p class="form-hint">Reuses an earlier answer to a near-identical question.</p>
            </div>
            </div>
            <details class="builder-subsection" id="memory-upkeep" {% if sealed_conversations|default(false) or memory_consolidation|default(false) or entity_scope|default('memory') != 'memory' %}open{% endif %}>
                <summary>Conversation privacy and memory upkeep<span class="builder-subsection-desc">Sealed conversations, where entity facts live, background consolidation</span></summary>
                <div class="section-body">
                    <div class="form-group checkbox-group">
                        <label>
                            <input type="checkbox" id="sealed_conversations" name="sealed_conversations" value="on" {% if sealed_conversations|default(false) %}checked{% endif %} onchange="syncEntityScope()">
                            Seal each conversation
                        </label>
                        <p class="form-hint">Nothing a user says in one conversation reaches another: recall, entity facts and cached answers stay in their conversation, and the shared persona can't be changed from one. Knowledge bases stay shared.</p>
                    </div>
                    <div class="form-group">
                        <label for="entity_scope">Entity facts</label>
                        <select id="entity_scope" name="entity_scope">
                            <option value="memory" {% if entity_scope|default('memory') == 'memory' %}selected{% endif %}>Shared by the conversations of a memory (default)</option>
                            <option value="thread" {% if entity_scope|default('memory') == 'thread' %}selected{% endif %}>Kept to each conversation</option>
                            <option value="disabled" {% if entity_scope|default('memory') == 'disabled' %}selected{% endif %}>Not recalled automatically (the entity tools still work)</option>
                        </select>
                        <p class="form-hint">Where the facts the agent stores about people and things live. A sealed conversation keeps them to itself.</p>
                    </div>
                    <div class="form-group checkbox-group">
                        <label>
                            <input type="checkbox" name="memory_consolidation" value="on" {% if memory_consolidation|default(false) %}checked{% endif %}>
                            Consolidate memory in the background
                        </label>
                        <p class="form-hint">Merges duplicate entities and summaries, retires facts stored twice or replaced by newer ones, and adds facts the user stated that were never saved. Nothing is deleted; every change can be undone with <code>memorizz learning consolidation-restore</code>.</p>
                    </div>
                    <div class="form-grid">
                        <div class="form-group">
                            <label for="consolidation_every_n_turns">Every this many turns</label>
                            <input id="consolidation_every_n_turns" type="number" min="1" step="1" name="consolidation_every_n_turns" value="{{ consolidation_every_n_turns|default(20) }}">
                        </div>
                        <div class="form-group checkbox-group">
                            <label>
                                <input type="checkbox" name="consolidation_auto_apply" value="on" {% if consolidation_auto_apply|default(true) %}checked{% endif %}>
                                Apply changes automatically
                            </label>
                            <p class="form-hint">Off leaves each plan waiting for review on the learning control plane.</p>
                        </div>
                    </div>
                </div>
            </details>
            {% set fg = forgetting if forgetting is defined and forgetting else {} %}
            <details class="builder-subsection" id="forgetting-overrides">
                <summary>Forgetting (per-agent overrides)<span class="builder-subsection-desc">How memories are ranked and when unused ones are hidden</span></summary>
                <div class="section-body">
                <p class="form-hint">Memories are ranked by recency since last use, importance and relevance (Generative Agents). Blank fields inherit the global defaults from Settings → Forgetting mechanism.</p>
                <div class="form-grid">
                    <label>Recency decay per hour<input type="number" step="0.0001" min="0.5" max="1" name="forgetting_scoring_recency_decay_per_hour" value="{{ fg.get('scoring_recency_decay_per_hour', '') }}" placeholder="0.995"></label>
                    <label>Recency anchor
                        <select name="forgetting_scoring_recency_anchor">
                            <option value="" {% if not fg.get('scoring_recency_anchor') %}selected{% endif %}>Inherit</option>
                            <option value="last_accessed" {% if fg.get('scoring_recency_anchor') == 'last_accessed' %}selected{% endif %}>Last access (paper)</option>
                            <option value="created" {% if fg.get('scoring_recency_anchor') == 'created' %}selected{% endif %}>Creation time</option>
                        </select>
                    </label>
                    <label>Weight: recency<input type="number" step="0.1" min="0" name="forgetting_scoring_alpha_recency" value="{{ fg.get('scoring_alpha_recency', '') }}" placeholder="1"></label>
                    <label>Weight: importance<input type="number" step="0.1" min="0" name="forgetting_scoring_alpha_importance" value="{{ fg.get('scoring_alpha_importance', '') }}" placeholder="1"></label>
                    <label>Weight: relevance<input type="number" step="0.1" min="0" name="forgetting_scoring_alpha_relevance" value="{{ fg.get('scoring_alpha_relevance', '') }}" placeholder="1"></label>
                    <label>Suppression planner
                        <select name="forgetting_retention_enabled">
                            <option value="" {% if not fg.get('retention_enabled') %}selected{% endif %}>Inherit</option>
                            <option value="on" {% if fg.get('retention_enabled') == 'on' %}selected{% endif %}>Enabled</option>
                            <option value="off" {% if fg.get('retention_enabled') == 'off' %}selected{% endif %}>Disabled</option>
                        </select>
                    </label>
                    <label>Minimum retention score<input type="number" step="0.01" min="0" max="1" name="forgetting_retention_min_retention" value="{{ fg.get('retention_min_retention', '') }}" placeholder="0.15"></label>
                    <label>Grace period (days)<input type="number" step="1" min="0" name="forgetting_retention_grace_days" value="{{ fg.get('retention_grace_days', '') }}" placeholder="30"></label>
                </div>
                <p class="form-hint">Suppression only ever hides a memory from retrieval after an approved dry run on the learning control-plane page; nothing is deleted and every suppression can be restored.</p>
                </div>
            </details>
        </div>
    </details>

    <!-- Learning -->
    <details class="panel agent-form-section builder-section" id="section-learning" {% if continual_learning or learning_control_plane %}open{% endif %}>
        {{ section_summary('learning', 'Learning', 'Turn repeated successful work into skills, under review.') }}
        <div class="section-body">
            <div class="form-grid">
            <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>
        </div>
    </details>

    <!-- Tools and integrations -->
    <details class="panel agent-form-section builder-section" id="section-tools" {% if internet_provider or sandbox_provider or browser_control_provider or skills_marketplace_provider %}open{% endif %}>
        {{ section_summary('tools', 'Tools & integrations', 'Web search, code execution, browser control, skills and connected services.') }}
        <div class="section-body">
            <div class="form-grid">
            <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="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">
                <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 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 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 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>
            <p class="form-hint">MCP servers such as Notion, Gmail, Google Calendar and GitHub are attached on <a href="/mcp{% if agent_id %}?agent_id={{ agent_id|urlencode }}{% endif %}">MCP connections</a>{% if not is_edit %} once the agent is saved{% endif %}. Every change they make waits for approval.</p>
            {% if agent_tools %}
            <details class="builder-subsection">
                <summary>Registered tools <span class="summary-count">{{ agent_tools|length }}</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>
    </details>

    <!-- Runtime and orchestration -->
    <details class="panel agent-form-section builder-section" id="section-runtime" {% if meta_harness_mode or delegate_ids or self_aware %}open{% endif %}>
        {{ section_summary('runtime', 'Runtime & orchestration', 'Tool-call limits, coding harnesses, delegates and access to a codebase.') }}
        <div class="section-body">
            <div class="form-grid">
            <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>
            <details class="builder-subsection" id="harness-settings" {% if meta_harness_mode %}open{% endif %}>
                <summary>Agent harness runtime<span class="builder-subsection-desc">Codex, Claude Code and other coding agents</span></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>
            <details class="builder-subsection agent-delegates" id="delegates-settings" {% if delegate_ids %}open{% endif %}>
                <summary>Delegates{% if delegate_ids %} <span class="summary-count">{{ delegate_ids|length }}</span>{% endif %}<span class="builder-subsection-desc">Other agents this one hands work to</span></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>
            <details class="builder-subsection" id="self-aware-settings" {% if self_aware or self_aware_root_paths %}open{% endif %}>
                <summary>Codebase access<span class="builder-subsection-desc">Read files and run allowlisted commands</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>
        </div>
    </details>

    <!-- Automations and channels -->
    <details class="panel agent-form-section builder-section" id="section-channels" {% if whatsapp_enabled or default_timezone or not automations_enabled %}open{% endif %}>
        {{ section_summary('channels', 'Automations & channels', 'Scheduled jobs and the channels people can reach the agent on.') }}
        <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 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>

    <div class="form-actions builder-actions">
        <button type="submit" class="btn btn-primary">Save agent</button>
        <button type="button" class="btn" id="save-template-toggle" aria-expanded="false" aria-controls="save-template-panel">Save as template</button>
        <a href="{% if is_edit %}/agents/{{ agent_id }}/playground{% else %}/agents{% endif %}" class="btn">Cancel</a>
    </div>
    <section class="panel save-template-panel" id="save-template-panel" aria-labelledby="save-template-title" hidden>
        <h2 class="panel-title" id="save-template-title">Save as a template</h2>
        <p class="form-hint">Keeps the instructions, persona, model, and the memory, tool and runtime settings above, to start new agents from. Connections made from the Notion, Gmail and Google Calendar presets carry over without their sign-ins. Memory IDs, delegates, file paths, WhatsApp, other MCP servers and any key or token in the LLM config are left out.{% if is_edit %} This agent isn't changed.{% endif %} Saving under an existing template name replaces that template.</p>
        <div class="form-grid">
            <div class="form-group">
                <label for="template_title">Template name</label>
                <input id="template_title" name="template_title" maxlength="80" autocomplete="off" placeholder="e.g. Weekly planner">
            </div>
            <div class="form-group">
                <label for="template_summary">Description <span class="optional">optional</span></label>
                <input id="template_summary" name="template_summary" maxlength="240" autocomplete="off" placeholder="What agents made from it are for">
            </div>
        </div>
        <div class="save-template-actions">
            <button type="button" class="btn btn-primary" id="save-template-submit">Save template</button>
            <span class="form-hint" id="save-template-status" role="status" aria-live="polite"></span>
        </div>
    </section>
</form>
</div>
<aside class="agent-builder-aside" aria-label="Agent overview">
    <nav class="panel builder-nav" aria-label="Form sections">
        <p class="builder-aside-title">Sections</p>
        <ol>
            {% for key, title in [('identity', 'Identity'), ('model', 'Model'), ('persona', 'Persona'), ('memory', 'Memory'), ('learning', 'Learning'), ('tools', 'Tools & integrations'), ('runtime', 'Runtime & orchestration'), ('channels', 'Automations & channels')] %}
            <li><a href="#section-{{ key }}" data-nav="{{ key }}"><span>{{ title }}</span><span class="builder-nav-status" data-nav-status="{{ key }}"></span></a></li>
            {% endfor %}
        </ol>
    </nav>
    <section class="panel builder-summary" aria-labelledby="builder-summary-title">
        <p class="builder-aside-title" id="builder-summary-title">Configuration</p>
        <dl class="builder-summary-list" id="builder-summary"></dl>
    </section>
    <section class="panel builder-code" aria-labelledby="builder-code-title">
        <div class="builder-code-head">
            <p class="builder-aside-title" id="builder-code-title">Python SDK</p>
            <span class="builder-code-buttons">
                <button type="button" class="btn btn-sm" id="builder-code-expand" aria-haspopup="dialog">Expand</button>
                <button type="button" class="btn btn-sm" id="builder-code-copy">Copy</button>
            </span>
        </div>
        <pre class="builder-code-block" tabindex="0"><code id="builder-code"></code></pre>
        <p class="form-hint">The same agent in code. API keys come from the environment, never from here.</p>
    </section>
    <dialog class="builder-code-dialog" id="builder-code-dialog" aria-labelledby="builder-code-dialog-title">
        <div class="builder-code-head">
            <p class="builder-aside-title" id="builder-code-dialog-title">Python SDK</p>
            <span class="builder-code-buttons">
                <button type="button" class="btn btn-sm" id="builder-code-dialog-copy">Copy</button>
                <button type="button" class="btn btn-sm" id="builder-code-dialog-close">Close</button>
            </span>
        </div>
        <pre class="builder-code-block" tabindex="0"><code id="builder-code-full"></code></pre>
    </dialog>
</aside>
</div>
{% 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__';

// Background model: a provider and a model name, sent as "provider:model".
function syncBackgroundModel(providerChanged) {
    const provider = document.getElementById('background_provider').value;
    const nameInput = document.getElementById('background_model_name');
    const hidden = document.getElementById('background_model');
    const list = document.getElementById('background_model_options');
    document.getElementById('background_model_group').style.display = provider ? '' : 'none';
    const models = Array.isArray(AGENT_FORM_MODEL_CATALOG[provider]) ? AGENT_FORM_MODEL_CATALOG[provider] : [];
    list.innerHTML = models.map(function(model) {
        return '<option value="' + escapeHtml(model.value) + '">' + escapeHtml(model.label || model.value) + '</option>';
    }).join('');
    if (providerChanged && provider && !nameInput.value.trim()) {
        nameInput.value = (AGENT_FORM_DEFAULT_MODELS[provider] || (models[0] || {}).value || '');
    }
    const name = nameInput.value.trim();
    hidden.value = provider && name ? provider + ':' + name : '';
}

// Show the hidden "provider:model" value in the background model picker.
function loadBackgroundModel() {
    const background = (document.getElementById('background_model').value || '').trim();
    const split = background.indexOf(':');
    const knownProviders = Array.from(document.getElementById('background_provider').options).map(function(o) { return o.value; });
    const head = split > 0 ? background.slice(0, split) : '';
    document.getElementById('background_provider').value = !background ? '' : (knownProviders.includes(head) ? head : (document.getElementById('llm_provider').value || ''));
    document.getElementById('background_model_name').value = !background ? '' : (knownProviders.includes(head) ? background.slice(split + 1) : background);
    syncBackgroundModel(false);
}

// A sealed conversation keeps its entity facts to itself.
function syncEntityScope() {
    const sealed = document.getElementById('sealed_conversations');
    const scope = document.getElementById('entity_scope');
    if (!sealed || !scope) return;
    if (sealed.checked) scope.value = 'thread';
    scope.disabled = sealed.checked;
}

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();
    syncEntityScope();
    loadBackgroundModel();

    // 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>
<script>
    window.AGENT_BUILDER = {{ builder_context|default({}, true)|tojson }};
</script>
<script src="/static/js/agent-templates.js?v=2"></script>
<script src="/static/js/agent-builder.js?v=4"></script>
{% endblock %}