{% extends "base.html" %}

{% block title %}Playground - {{ agent.persona.name if agent and agent.persona and agent.persona.name else 'Agent' }} - Memorizz{% endblock %}

{% block head %}
<!-- marked.js for markdown rendering -->
<script src="https://cdn.jsdelivr.net/npm/marked@14.0.0/marked.min.js"></script>
<style>
    /* Local-model manager widget styles are shared in styles.css
       (.local-model-status .model-manager etc). Below: page-specific rules.
       When the manage panel takes over selection, hide the redundant
       dropdown + custom input on the playground config form. */
    .config-field#cfg-llm-model-field.is-local-provider #cfg-llm-model,
    .config-field#cfg-llm-model-field.is-local-provider #cfg-llm-model-custom {
        display: none !important;
    }

    /* Markdown rendered content styles */
    .pg-message-text.md-rendered {
        line-height: 1.6;
    }
    .pg-message-text.md-rendered p {
        margin: 0.4em 0;
    }
    .pg-message-text.md-rendered p:first-child {
        margin-top: 0;
    }
    .pg-message-text.md-rendered p:last-child {
        margin-bottom: 0;
    }
    .pg-message-text.md-rendered pre {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 6px;
        padding: 12px 14px;
        overflow-x: auto;
        margin: 0.6em 0;
        font-size: 0.88em;
    }
    .pg-message-text.md-rendered code {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 3px;
        padding: 2px 5px;
        font-size: 0.9em;
        font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    }
    .pg-message-text.md-rendered pre code {
        background: none;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
    }
    .pg-message-text.md-rendered ul,
    .pg-message-text.md-rendered ol {
        margin: 0.4em 0;
        padding-left: 1.6em;
    }
    .pg-message-text.md-rendered li {
        margin: 0.2em 0;
    }
    .pg-message-text.md-rendered blockquote {
        border-left: 3px solid rgba(0, 217, 255, 0.4);
        margin: 0.5em 0;
        padding: 0.3em 0.8em;
        color: rgba(255, 255, 255, 0.75);
    }
    .pg-message-text.md-rendered h1,
    .pg-message-text.md-rendered h2,
    .pg-message-text.md-rendered h3,
    .pg-message-text.md-rendered h4 {
        margin: 0.6em 0 0.3em 0;
        font-weight: 600;
    }
    .pg-message-text.md-rendered h1 { font-size: 1.3em; }
    .pg-message-text.md-rendered h2 { font-size: 1.15em; }
    .pg-message-text.md-rendered h3 { font-size: 1.05em; }
    .pg-message-text.md-rendered table {
        border-collapse: collapse;
        margin: 0.5em 0;
        width: 100%;
        font-size: 0.92em;
    }
    .pg-message-text.md-rendered th,
    .pg-message-text.md-rendered td {
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 6px 10px;
        text-align: left;
    }
    .pg-message-text.md-rendered th {
        background: rgba(255, 255, 255, 0.05);
        font-weight: 600;
    }
    .pg-message-text.md-rendered a {
        color: #00d9ff;
        text-decoration: underline;
    }
    .pg-message-text.md-rendered hr {
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0.8em 0;
    }
    .pg-message-text.md-rendered img {
        max-width: 100%;
        border-radius: 6px;
    }

    .pg-approval-card {
        margin-top: 12px;
        padding: 12px;
        border: 1px solid rgba(255, 184, 77, 0.45);
        border-radius: 8px;
        background: rgba(255, 184, 77, 0.08);
    }
    .pg-approval-card-title {
        color: #ffc46b;
        font-weight: 650;
        margin-bottom: 6px;
    }
    .pg-approval-card code,
    .pg-approval-card pre {
        font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    }
    .pg-approval-card pre {
        max-height: 180px;
        overflow: auto;
        white-space: pre-wrap;
        padding: 8px;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.25);
    }
    .pg-approval-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
    }
    .pg-approval-status {
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Compact button styles */
    .compact-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        font-size: 0.78em;
        border: 1px solid rgba(0, 217, 255, 0.3);
        border-radius: 6px;
        background: rgba(0, 217, 255, 0.08);
        color: rgba(255, 255, 255, 0.85);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .compact-btn:hover {
        background: rgba(0, 217, 255, 0.18);
        border-color: rgba(0, 217, 255, 0.5);
    }
    .compact-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .compact-btn .compact-icon {
        font-size: 1.1em;
    }
    .auto-compact-badge {
        display: inline-block;
        font-size: 0.7em;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(0, 255, 136, 0.12);
        color: rgba(0, 255, 136, 0.85);
        border: 1px solid rgba(0, 255, 136, 0.2);
        margin-left: 6px;
        vertical-align: middle;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header page-header--agent">
    {% set agent_is_favorite = agent.is_favorite if agent and agent.is_favorite is not none else false %}
    <a href="/agents" class="back-link">← Back to Agents</a>
    <h1>
        Playground
        <span class="playground-agent-name">
            {% if agent and agent.persona and agent.persona.name %}
                — {{ agent.persona.name }}
            {% endif %}
        </span>
    </h1>
    {% if agent %}
    <form method="post" action="/agents/{{ agent.agent_id }}/favorite" class="playground-favorite-form">
        <input type="hidden" name="redirect_to" value="/agents/{{ agent.agent_id }}/playground">
        <input type="hidden" name="is_favorite" value="{% if agent_is_favorite %}0{% else %}1{% endif %}">
        <button
            type="submit"
            class="favorite-toggle favorite-toggle--playground {% if agent_is_favorite %}is-active{% endif %}"
            title="{% if agent_is_favorite %}Remove from favorites{% else %}Add to favorites{% endif %}"
            aria-label="{% if agent_is_favorite %}Remove from favorites{% else %}Add to favorites{% endif %}"
        >
            <span aria-hidden="true">★</span>
            <span>{% if agent_is_favorite %}Favorited{% else %}Favorite{% endif %}</span>
        </button>
    </form>
    {% endif %}
    {% if agent %}
    <div class="page-actions" style="margin-top: 12px;">
        <a href="/automations?agent_id={{ agent.agent_id }}" class="btn btn-sm">View Automations</a>
        <a href="/automations/new?agent_id={{ agent.agent_id }}" class="btn btn-sm">Create Automation</a>
    </div>
    {% endif %}
    {% if agent and agent.persona and agent.persona.role %}
    <p>{{ agent.persona.role }}</p>
    {% endif %}
</div>

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

{% if agent %}
<!-- Collapsible Agent Config Panel -->
<details class="playground-config">
    <summary class="playground-config-toggle">
        <span class="config-icon">⚙️</span>
        <span>Agent Configuration</span>
        <span class="config-caret">▾</span>
    </summary>
    <form method="post" action="/agents/{{ agent.agent_id }}/playground/config" class="playground-config-form">
        <div class="config-grid">
            <div class="config-field">
                <label for="cfg-llm-provider">LLM Provider</label>
                <select id="cfg-llm-provider" name="llm_provider" onchange="onProviderChange()">
                    <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="config-field" id="cfg-llm-model-field">
                <label for="cfg-llm-model">Model</label>
                <select id="cfg-llm-model" name="llm_model" {% if llm_provider == 'azure' %}style="display:none"{% endif %}>
                </select>
                <input id="cfg-llm-model-custom" type="text" value="{{ llm_model }}"
                       placeholder="Deployment name" {% if llm_provider != 'azure' %}style="display:none"{% endif %}>
                <!-- Pre-flight + manage panel for local providers (Ollama / HF).
                     Populated by playgroundCheckLocalModel() so users see at
                     send time whether the chosen model is actually available
                     offline, instead of finding out from a 404 mid-chat. -->
                <div id="cfg-local-model-status" class="local-model-status" style="display:none; margin-top:10px;"></div>
            </div>
            <div class="config-field">
                <label for="cfg-max-steps">Max Tool Iterations</label>
                <input id="cfg-max-steps" name="max_steps" type="number" value="{{ max_steps }}" min="1" max="100">
                <p class="form-hint">Maximum tool-calling rounds per run (default: 20).</p>
            </div>
            <div class="config-field config-field--toggle">
                <label for="cfg-enable-entity-memory">Entity Memory</label>
                <label class="config-toggle-option">
                    <input id="cfg-enable-entity-memory" name="enable_entity_memory" type="checkbox" value="1" {% if enable_entity_memory %}checked{% endif %}>
                    <span>Enable structured entity memory tools</span>
                </label>
                {% if entity_memory_status_error %}
                <p class="form-hint sandbox-error-hint">{{ entity_memory_status_error }}</p>
                {% endif %}
            </div>
            <div class="config-field config-field--toggle">
                <label for="cfg-enable-workflow-memory">Workflow Memory</label>
                <label class="config-toggle-option">
                    <input id="cfg-enable-workflow-memory" name="enable_workflow_memory" type="checkbox" value="1" {% if enable_workflow_memory %}checked{% endif %}>
                    <span>Enable workflow trace and step memory</span>
                </label>
            </div>
            <div class="config-field config-field--toggle">
                <label for="cfg-self-aware">Self-Awareness</label>
                <label class="config-toggle-option">
                    <input id="cfg-self-aware" name="self_aware" type="checkbox" value="1" {% if self_aware %}checked{% endif %}>
                    <span>Enable host codebase inspection tools</span>
                </label>
            </div>
            <div class="config-field config-field--toggle">
                <label for="cfg-self-aware-writes">Self-Aware Writes</label>
                <label class="config-toggle-option">
                    <input id="cfg-self-aware-writes" name="self_aware_allow_writes" type="checkbox" value="1" {% if self_aware_allow_writes %}checked{% endif %}>
                    <span>Allow write operations</span>
                </label>
            </div>
            <div class="config-field config-field--toggle">
                <label for="cfg-self-aware-deletes">Self-Aware Deletes</label>
                <label class="config-toggle-option">
                    <input id="cfg-self-aware-deletes" name="self_aware_allow_deletes" type="checkbox" value="1" {% if self_aware_allow_deletes %}checked{% endif %}>
                    <span>Allow delete operations (requires writes)</span>
                </label>
            </div>
            <div class="config-field config-field--wide">
                <label for="cfg-self-aware-roots">Self-Aware Root Paths</label>
                <textarea id="cfg-self-aware-roots" name="self_aware_root_paths" rows="3" 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 current working directory.</p>
            </div>
            <div class="config-field config-field--toggle">
                <label for="cfg-automations-enabled">Automations</label>
                <label class="config-toggle-option">
                    <input id="cfg-automations-enabled" name="automations_enabled" type="checkbox" value="1" {% if automations_enabled %}checked{% endif %}>
                    <span>Enable automation scheduling tools</span>
                </label>
            </div>
            <div class="config-field">
                <label for="cfg-default-timezone">Default Timezone</label>
                <input id="cfg-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">Optional IANA timezone name used when an automation does not specify timezone.</p>
            </div>
            <div class="config-field">
                <label for="cfg-sandbox-provider">Sandbox Provider</label>
                <select id="cfg-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)</option>
                    <option value="daytona" {% if sandbox_provider == 'daytona' %}selected{% endif %}>Daytona (Cloud)</option>
                    <option value="graalpy" {% if sandbox_provider == 'graalpy' %}selected{% endif %}>GraalPy (Local)</option>
                </select>
                {% if sandbox_status_error %}
                <p class="form-hint sandbox-error-hint">{{ sandbox_status_error }}</p>
                {% endif %}
            </div>
            <div class="config-field">
                <label for="cfg-internet-provider">Internet Provider</label>
                <select id="cfg-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</option>
                    <option value="firecrawl" {% if internet_provider == 'firecrawl' %}selected{% endif %}>Firecrawl</option>
                    <option value="offline" {% if internet_provider == 'offline' %}selected{% endif %}>Offline</option>
                </select>
                {% if internet_status_error %}
                <p class="form-hint sandbox-error-hint">{{ internet_status_error }}</p>
                {% endif %}
            </div>
            <div class="config-field">
                <label for="cfg-browser-control-provider">Browser Control</label>
                <select id="cfg-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>
                {% if browser_control_status_error %}
                <p class="form-hint sandbox-error-hint">{{ browser_control_status_error }}</p>
                {% endif %}
                <p class="form-hint">Model calls pause for durable operator approval before browser execution.</p>
            </div>
            <div class="config-field">
                <label for="cfg-skills-marketplace-provider">Skills Marketplace</label>
                <select id="cfg-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>
                {% if skills_marketplace_status_error %}
                <p class="form-hint sandbox-error-hint">{{ skills_marketplace_status_error }}</p>
                {% endif %}
                <p class="form-hint sandbox-error-hint" id="cfg-skills-marketplace-token-warning" style="display:none;">
                    Vercel Agent Skills is selected but <code>GITHUB_TOKEN</code> is not set. Skill search will fail (HTTP 401) until you add a token in
                    <a href="/settings#GITHUB_TOKEN">Settings</a>, or create one at
                    <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer">github.com/settings/tokens</a>
                    (no scopes required) — see the
                    <a href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens" target="_blank" rel="noopener noreferrer">GitHub docs</a>.
                </p>
                <script>
                    (function() {
                        var select = document.getElementById('cfg-skills-marketplace-provider');
                        var warning = document.getElementById('cfg-skills-marketplace-token-warning');
                        if (!select || !warning) return;
                        var githubTokenPresent = null;

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

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

                        select.addEventListener('change', renderWarning);
                    })();
                </script>
            </div>
            <div class="config-field">
                <label for="cfg-persona-name">Persona Name</label>
                <input id="cfg-persona-name" name="persona_name" type="text" value="{{ persona_name }}" placeholder="Agent name">
            </div>
            <div class="config-field">
                <label for="cfg-persona-role">Persona Role</label>
                <input id="cfg-persona-role" name="persona_role" type="text" value="{{ persona_role }}" placeholder="e.g. assistant, researcher">
            </div>
            <div class="config-field config-field--wide">
                <label for="cfg-persona-goals">Persona Goals</label>
                <textarea id="cfg-persona-goals" name="persona_goals" rows="2" placeholder="What should the agent aim to achieve?">{{ persona_goals }}</textarea>
            </div>
            <div class="config-field config-field--wide">
                <label for="cfg-persona-background">Persona Background</label>
                <textarea id="cfg-persona-background" name="persona_background" rows="2" placeholder="Relevant experience, expertise, context...">{{ persona_background }}</textarea>
            </div>
            <div class="config-field config-field--wide">
                <label for="cfg-instruction">System Instruction</label>
                <textarea id="cfg-instruction" name="instruction" rows="3" placeholder="System instruction...">{{ instruction }}</textarea>
            </div>
            <div class="config-field config-field--wide">
                <label>Skills (.skills.md / SKILL.md)</label>
                <input id="cfg-skill-paths-json" type="hidden" name="skill_paths_json" value="[]">
                <div id="cfg-skill-path-rows" class="config-dynamic-list"></div>
                <div class="config-dynamic-actions">
                    <button type="button" class="btn btn-sm" onclick="addSkillPathRow()">Add Skill File</button>
                </div>
                <p class="form-hint">Use absolute or repo-relative paths. Skill code is executed only in sandbox via skill tools.</p>
            </div>
            <div class="config-field config-field--wide">
                <label>MCP Servers</label>
                <p class="form-hint">MCP connections, encrypted credentials, OAuth, and tool permissions are managed on the dedicated connections page.</p>
                <div class="config-dynamic-actions">
                    <a class="btn btn-sm" href="/mcp?agent_id={{ active_agent_id }}">Manage MCP Connections</a>
                </div>
            </div>

            {% if agent_tools %}
            <div class="config-field config-field--wide">
                <label>Registered Tools ({{ agent_tools|length }})</label>
                <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>
            </div>
            {% endif %}
        </div>
        <div class="config-actions">
            <button type="submit" class="btn btn-primary btn-sm">Save Config</button>
        </div>
    </form>
</details>

<section class="playground-threads">
    <div class="playground-threads-header">
        <h2>Threads</h2>
        <div class="playground-threads-actions">
            <button type="button" class="btn btn-sm" onclick="startNewThread()">Start New Thread</button>
        </div>
    </div>
    {% if threads %}
    <div class="playground-thread-tabs" id="playground-thread-tabs">
        {% for thread in threads %}
        <button
            type="button"
            class="playground-thread-tab {% if thread.memory_id == default_memory_id %}is-active{% endif %}"
            data-memory-id="{{ thread.memory_id }}"
            title="{{ thread.memory_id }} • {{ thread.message_count }} messages • {{ thread.last_activity }}"
            onclick='useThreadMemoryId({{ thread.memory_id|tojson }})'
        >
            <span class="thread-tab-title">Thread {{ loop.index }}</span>
            <span class="thread-tab-meta">{{ thread.message_count }} msg{% if thread.message_count != 1 %}s{% endif %}</span>
            <code>{{ thread.memory_id }}</code>
        </button>
        {% endfor %}
    </div>
    {% else %}
    <p class="form-hint">No thread memory IDs yet. Use "Start New Thread" or send your first message.</p>
    {% endif %}

    <div class="playground-threads-header" style="margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06);">
        <h2>Automations</h2>
        <div class="playground-threads-actions">
            {% if agent %}
            <a href="/automations/new?agent_id={{ agent.agent_id }}" class="btn btn-sm">Create</a>
            <a href="/automations?agent_id={{ agent.agent_id }}" class="btn btn-sm">View All</a>
            {% endif %}
        </div>
    </div>
    <div class="playground-thread-tabs" id="playground-automation-tabs">
        <p class="form-hint" id="automation-tabs-empty">Loading automation runs...</p>
    </div>
</section>

<script>
(function() {
    var AGENT_ID = {{ (agent.agent_id if agent else '')|tojson }};
    if (!AGENT_ID) return;

    function fmtTs(v) {
        if (!v) return '';
        return String(v).replace('T', ' ').replace(/\.\d+.*$/, '').substring(0, 16);
    }

    function escHtml(s) {
        var d = document.createElement('div');
        d.textContent = s || '';
        return d.innerHTML;
    }

    function renderJobs(container, jobs) {
        for (var i = 0; i < jobs.length; i++) {
            var job = jobs[i];
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'playground-thread-tab';
            btn.title = job.schedule || '';
            btn.addEventListener('click', (function(jid) {
                return function() { window.location.href = '/automations/' + encodeURIComponent(jid); };
            })(job.job_id));

            var titleSpan = document.createElement('span');
            titleSpan.className = 'thread-tab-title';
            titleSpan.textContent = job.name;

            var metaSpan = document.createElement('span');
            metaSpan.className = 'thread-tab-meta';
            var statusClass = job.enabled ? 'badge-success' : '';
            var statusLabel = job.enabled ? 'enabled' : 'paused';
            metaSpan.innerHTML = '<span class="badge ' + statusClass + '" style="font-size:0.65rem;padding:1px 5px;">'
                + escHtml(statusLabel) + '</span> '
                + escHtml(job.schedule)
                + (job.next_run_at ? ' &middot; next: ' + escHtml(fmtTs(job.next_run_at)) : '');

            btn.appendChild(titleSpan);
            btn.appendChild(metaSpan);
            container.appendChild(btn);
        }
    }

    function renderRuns(container, runs) {
        for (var i = 0; i < runs.length; i++) {
            var run = runs[i];
            var memId = run.memory_id || '';
            var statusClass = run.status === 'succeeded' ? 'badge-success'
                : run.status === 'failed' ? 'badge-warning' : '';

            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'playground-thread-tab';
            btn.title = run.response_snippet || '';
            if (memId) {
                btn.dataset.memoryId = memId;
                btn.addEventListener('click', (function(mid) {
                    return function() { useThreadMemoryId(mid); };
                })(memId));
            }

            var titleSpan = document.createElement('span');
            titleSpan.className = 'thread-tab-title';
            titleSpan.textContent = run.job_name;

            var metaSpan = document.createElement('span');
            metaSpan.className = 'thread-tab-meta';
            var runDate = run.finished_at || run.scheduled_for || '';
            metaSpan.innerHTML = '<span class="badge ' + statusClass + '" style="font-size:0.65rem;padding:1px 5px;">'
                + escHtml(run.status) + '</span> ' + escHtml(fmtTs(runDate));

            btn.appendChild(titleSpan);
            btn.appendChild(metaSpan);
            if (memId) {
                var codeEl = document.createElement('code');
                codeEl.textContent = memId;
                btn.appendChild(codeEl);
            }
            container.appendChild(btn);
        }
    }

    function loadAutomationRuns() {
        fetch('/api/agents/' + encodeURIComponent(AGENT_ID) + '/automation-runs')
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(data) {
                if (!data) return;
                var container = document.getElementById('playground-automation-tabs');
                var emptyMsg = document.getElementById('automation-tabs-empty');
                if (!container) return;

                var jobs = data.jobs || [];
                var runs = data.runs || [];

                if (jobs.length === 0 && runs.length === 0) {
                    if (emptyMsg) emptyMsg.textContent = 'No automations yet.';
                    return;
                }

                container.innerHTML = '';

                if (jobs.length > 0) {
                    renderJobs(container, jobs);
                }

                if (runs.length > 0) {
                    var runsHeader = document.createElement('p');
                    runsHeader.className = 'form-hint';
                    runsHeader.style.marginTop = '10px';
                    runsHeader.textContent = 'Recent Runs';
                    container.appendChild(runsHeader);
                    renderRuns(container, runs);
                }
            })
            .catch(function() {
                var emptyMsg = document.getElementById('automation-tabs-empty');
                if (emptyMsg) emptyMsg.textContent = 'Could not load automations.';
            });
    }

    document.addEventListener('DOMContentLoaded', loadAutomationRuns);
})();
</script>

<!-- Playground Workbench: Chat + Context Panel -->
<div class="playground-workbench">
    <!-- Chat Area (left) -->
    <div class="playground-chat" id="playground-chat">
        <!-- Drag-and-drop overlay: revealed when files are dragged over the chat area -->
        <div class="pg-dropzone" id="pg-dropzone" aria-hidden="true">
            <div class="pg-dropzone-inner">
                <div class="pg-dropzone-icon" aria-hidden="true">📥</div>
                <div class="pg-dropzone-title">Drop file(s) to ingest</div>
                <div class="pg-dropzone-hint">Each file is chunked, embedded, and attached to this agent's knowledge base.</div>
            </div>
        </div>

        <input id="pg-memory-id" type="hidden" value="{{ default_memory_id }}">
        <div class="playground-messages" id="playground-messages">
            {% if context_window %}
                {% for msg in context_window %}
                <div class="pg-message pg-message--{{ msg.role or 'system' }}">
                    <div class="pg-message-avatar">
                        {% if msg.role == 'user' %}👤{% elif msg.role == 'assistant' %}🤖{% elif msg.role == 'tool' %}🔧{% else %}📝{% endif %}
                    </div>
                    <div class="pg-message-body">
                        <div class="pg-message-role">{{ msg.role|default('Unknown')|title }}</div>
                        <div class="pg-message-text{% if msg.role == 'assistant' %} md-rendered{% endif %}" {% if msg.role == 'assistant' %}data-md-raw="{{ (msg.content or msg.get('text', '')) | e }}"{% endif %}>{{ msg.content or msg.get('text', '') }}</div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
            <div class="pg-empty">
                <div class="pg-empty-icon">💬</div>
                <p>Start a conversation with this agent</p>
                <p class="pg-empty-hint">Messages will stream in real-time</p>
            </div>
            {% endif %}
        </div>

        <!-- Composer -->
        <div class="playground-composer" id="playground-composer">
            <div class="composer-input">
                <label for="pg-query" class="sr-only">Message</label>
                <textarea id="pg-query" rows="2" placeholder="Type your message... (Enter to send, Shift+Enter for newline)" autofocus></textarea>
            </div>
            <div class="composer-row">
                <button type="button" id="pg-attach-btn" class="btn" onclick="document.getElementById('pg-kb-file-input').click()" title="Upload file(s) to knowledge base">
                    <span id="pg-attach-icon">📎</span>
                    <span id="pg-attach-label">Attach</span>
                </button>
                <input id="pg-kb-file-input" type="file" multiple style="display:none;" onchange="uploadKbFiles(this.files)">
                <button type="button" id="pg-send-btn" class="btn btn-primary" onclick="sendMessage()">
                    <span id="pg-send-text">Send</span>
                    <span id="pg-send-spinner" class="spinner" style="display:none;"></span>
                </button>
                <button type="button" id="pg-stop-btn" class="btn" onclick="stopStreaming()" style="display:none;">
                    <span>⏹ Stop</span>
                </button>
            </div>
            <div id="pg-kb-chips" class="pg-kb-chips" style="display:none;"></div>
            <div id="pg-kb-upload-status" class="pg-kb-upload-status" style="display:none;"></div>
        </div>
    </div>

    <!-- Context Panel (right) -->
    <aside class="playground-context-panel" id="playground-context-panel">
        <button class="context-panel-toggle" id="context-panel-toggle" onclick="toggleContextPanel()" title="Toggle context panel">◀</button>

        <div class="context-panel-inner">
            {% if token_stats %}
            <div class="token-utilization" id="token-utilization-card">
                <div class="token-header">
                    <h3>Context Utilization</h3>
                    <span class="token-summary" id="token-summary">{{ token_stats.total_tokens|default(0) }} / {{ token_stats.context_window_tokens|default(128000) }} tokens</span>
                </div>
                <div class="token-bar-wrapper" id="token-bar-wrapper" tabindex="0" role="button" aria-expanded="false" aria-label="Show token composition">
                    <div class="token-bar-container">
                        <div class="token-bar" id="token-bar-fill" style="width: {{ [token_stats.percentage_used|default(0), 100]|min }}%"></div>
                    </div>
                </div>
                <div class="token-composition-tooltip" id="token-composition-tooltip">
                    <div class="composition-title">Token Composition</div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot instruction"></span> System Instruction</span>
                        <span class="composition-value" id="token-comp-instruction">{{ token_stats.composition.instruction|default(0) }} tokens</span>
                    </div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot persona"></span> Persona</span>
                        <span class="composition-value" id="token-comp-persona">{{ token_stats.composition.persona|default(0) }} tokens</span>
                    </div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot tools"></span> Tools</span>
                        <span class="composition-value" id="token-comp-tools">{{ token_stats.composition.tools|default(0) }} tokens</span>
                    </div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot toolbox-memory"></span> Toolbox Memory</span>
                        <span class="composition-value" id="token-comp-toolbox-memory">{{ token_stats.composition.toolbox_memory|default(0) }} tokens</span>
                    </div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot workflow-memory"></span> Workflow Memory</span>
                        <span class="composition-value" id="token-comp-workflow-memory">{{ token_stats.composition.workflow_memory|default(0) }} tokens</span>
                    </div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot entity-memory"></span> Entity Memory</span>
                        <span class="composition-value" id="token-comp-entity-memory">{{ token_stats.composition.entity_memory|default(0) }} tokens</span>
                    </div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot summary-memory"></span> Summary Memory</span>
                        <span class="composition-value" id="token-comp-summary-memory">{{ token_stats.composition.summary_memory|default(0) }} tokens</span>
                    </div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot history"></span> Conversation History</span>
                        <span class="composition-value" id="token-comp-history">{{ token_stats.composition.history|default(0) }} tokens</span>
                    </div>
                </div>
                <div class="token-details">
                    <span class="token-percentage" id="token-percentage">{{ token_stats.percentage_used|default(0) }}% used</span>
                    <span class="token-messages" id="token-messages">{{ token_stats.message_count|default(0) }} messages</span>
                </div>
                <div style="margin-top: 8px; display: flex; align-items: center; gap: 6px;">
                    <button type="button" class="compact-btn" id="compact-context-btn" onclick="compactContextWindow()" title="Summarize and compact the context window to free up tokens">
                        <span class="compact-icon">🗜️</span>
                        <span>Compact</span>
                    </button>
                    <span class="auto-compact-badge" title="Context window auto-compacts at 80% utilization">Auto @ 80%</span>
                </div>
            </div>
            {% endif %}

            <div class="context-card">
                <div class="context-card-header">
                    <div class="context-card-title">
                        <h3>Context Window</h3>
                        <span class="context-card-subtitle" id="context-window-count">{{ context_window|length }} messages</span>
                    </div>
                </div>
                <div class="context-card-body">
                    {% if agent.instruction %}
                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">System Instruction</summary>
                        <div class="context-block-body">
                            <pre class="instruction-text">{{ agent.instruction }}</pre>
                        </div>
                    </details>
                    {% endif %}

                    <details id="full-system-prompt-details" class="context-block context-block-collapsible" data-agent-id="{{ agent.agent_id }}">
                        <summary class="context-block-title">Full System Prompt (preview)</summary>
                        <div class="context-block-body">
                            <p class="form-hint">This is the full prompt assembled at inference time (base + memory + instruction + persona + tools + ...). Fetched on demand.</p>
                            <div id="full-system-prompt-meta" class="form-hint" style="display: none;"></div>
                            <pre id="full-system-prompt-text" class="instruction-text" style="white-space: pre-wrap; max-height: 480px; overflow:auto;">Loading…</pre>
                            <div class="form-actions" style="margin-top: 8px;">
                                <button type="button" id="full-system-prompt-refresh" class="btn">Refresh</button>
                                <button type="button" id="full-system-prompt-copy" class="btn">Copy</button>
                            </div>
                        </div>
                    </details>
                    <script>
                        (function() {
                            var details = document.getElementById('full-system-prompt-details');
                            if (!details) return;
                            var agentId = details.dataset.agentId;
                            if (!agentId) return;
                            var textEl = document.getElementById('full-system-prompt-text');
                            var metaEl = document.getElementById('full-system-prompt-meta');
                            var refreshBtn = document.getElementById('full-system-prompt-refresh');
                            var copyBtn = document.getElementById('full-system-prompt-copy');
                            var loaded = false;
                            var inflight = false;

                            function formatMeta(data) {
                                var parts = [];
                                parts.push(data.length + ' chars');
                                if (data.persona) {
                                    var p = data.persona;
                                    var name = p.name || '(unnamed)';
                                    parts.push('persona: ' + name + ' v' + (p.version || 1) + ' (' + (p.history_count || 0) + ' history)');
                                }
                                if (Array.isArray(data.tools)) {
                                    parts.push(data.tools.length + ' tools');
                                    if (data.persona_tools_registered) {
                                        parts.push('update_persona: registered');
                                    } else {
                                        parts.push('update_persona: NOT registered');
                                    }
                                }
                                return parts.join(' · ');
                            }

                            function load() {
                                if (inflight) return;
                                inflight = true;
                                textEl.textContent = 'Loading…';
                                if (metaEl) { metaEl.style.display = 'none'; metaEl.textContent = ''; }
                                fetch('/api/agents/' + encodeURIComponent(agentId) + '/system-prompt')
                                    .then(function(r) {
                                        if (!r.ok) throw new Error('HTTP ' + r.status);
                                        return r.json();
                                    })
                                    .then(function(data) {
                                        textEl.textContent = data.system_prompt || '(empty)';
                                        if (metaEl) {
                                            metaEl.textContent = formatMeta(data);
                                            metaEl.style.display = 'block';
                                        }
                                        loaded = true;
                                    })
                                    .catch(function(err) {
                                        textEl.textContent = 'Failed to load system prompt: ' + err.message;
                                    })
                                    .finally(function() { inflight = false; });
                            }

                            details.addEventListener('toggle', function() {
                                if (details.open && !loaded) load();
                            });

                            if (refreshBtn) {
                                refreshBtn.addEventListener('click', function() {
                                    loaded = false;
                                    load();
                                });
                            }
                            if (copyBtn) {
                                copyBtn.addEventListener('click', function() {
                                    var text = textEl.textContent || '';
                                    if (!text) return;
                                    if (navigator.clipboard && navigator.clipboard.writeText) {
                                        navigator.clipboard.writeText(text).then(function() {
                                            copyBtn.textContent = 'Copied';
                                            setTimeout(function() { copyBtn.textContent = 'Copy'; }, 1500);
                                        });
                                    }
                                });
                            }
                        })();
                    </script>

                    {% if agent.persona %}
                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Persona</summary>
                        <div class="context-block-body">
                            {% if agent.persona.name %}
                            <div class="context-item">
                                <span class="item-label">Name:</span>
                                <span class="item-value">{{ agent.persona.name }}</span>
                            </div>
                            {% endif %}
                            {% if agent.persona.role %}
                            <div class="context-item">
                                <span class="item-label">Role:</span>
                                <span class="item-value">{{ agent.persona.role }}</span>
                            </div>
                            {% endif %}
                            {% if agent.persona.background %}
                            <div class="context-item">
                                <span class="item-label">Background:</span>
                                <span class="item-value">{{ agent.persona.background }}</span>
                            </div>
                            {% endif %}
                            {% if agent.persona.goals %}
                            <div class="context-item">
                                <span class="item-label">Goals:</span>
                                <ul class="goals-list">
                                {% if agent.persona.goals is iterable and agent.persona.goals is not string %}
                                    {% for goal in agent.persona.goals %}
                                    <li>{{ goal }}</li>
                                    {% endfor %}
                                {% else %}
                                    <li>{{ agent.persona.goals }}</li>
                                {% endif %}
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                    </details>
                    {% endif %}

                    {% if agent.tools %}
                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Tools ({{ agent.tools|length }})</summary>
                        <div class="context-block-body">
                            <div class="tools-list">
                                {% for tool in agent.tools %}
                                <div class="tool-item">
                                    <span class="tool-name">{{ tool.name if tool.name else tool.get('function', {}).get('name', 'Unknown') }}</span>
                                    <span class="tool-desc">{{ tool.description if tool.description else tool.get('function', {}).get('description', '') }}</span>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </details>
                    {% endif %}

                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Toolbox Memory</summary>
                        <div id="context-toolbox-container">
                        {% if toolbox_memory %}
                        <div class="context-toolbox-list">
                            {% for item in toolbox_memory %}
                            <div class="context-toolbox-item">
                                <div class="context-toolbox-header">
                                    <span class="context-toolbox-name">{{ item.name }}</span>
                                    <span class="context-toolbox-type">{{ item.tool_type }}</span>
                                </div>
                                {% if item.timestamp %}
                                <div class="context-toolbox-time">{{ item.timestamp }}</div>
                                {% endif %}
                                {% if item.description %}
                                <div class="context-toolbox-description">{{ item.description }}</div>
                                {% endif %}
                                {% if item.signature %}
                                <code class="context-toolbox-signature">{{ item.signature }}</code>
                                {% endif %}
                                {% if item.value_preview %}
                                <pre class="context-toolbox-value">{{ item.value_preview }}</pre>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="context-log-empty">No toolbox memory found for this thread.</div>
                        {% endif %}
                        </div>
                    </details>

                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Workflow Memory</summary>
                        <div id="context-workflow-container">
                        {% if workflow_memory %}
                        <div class="context-workflow-list">
                            {% for item in workflow_memory %}
                            <div class="context-workflow-item">
                                <div class="context-workflow-header">
                                    <span class="context-workflow-name">{{ item.name }}</span>
                                    <span class="context-workflow-meta">{{ item.step_count }} steps</span>
                                </div>
                                {% if item.timestamp %}
                                <div class="context-workflow-time">{{ item.timestamp }}</div>
                                {% endif %}
                                {% if item.status or item.outcome %}
                                <div class="context-workflow-state">
                                    {% if item.status %}<span>Status: {{ item.status }}</span>{% endif %}
                                    {% if item.outcome %}<span>Outcome: {{ item.outcome }}</span>{% endif %}
                                </div>
                                {% endif %}
                                {% if item.user_query %}
                                <div class="context-workflow-query">{{ item.user_query }}</div>
                                {% elif item.description %}
                                <div class="context-workflow-query">{{ item.description }}</div>
                                {% endif %}
                                {% if item.step_names_preview %}
                                <div class="context-workflow-steps">
                                    {{ item.step_names_preview | join(', ') }}
                                </div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="context-log-empty">No workflow memory found for this thread.</div>
                        {% endif %}
                        </div>
                    </details>

                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Learned Skills</summary>
                        <div id="context-skills-container">
                        {% if skill_memory %}
                        <div class="context-workflow-list">
                            {% for item in skill_memory %}
                            <div class="context-workflow-item">
                                <div class="context-workflow-header">
                                    <span class="context-workflow-name">{{ item.name }}</span>
                                    <span class="context-workflow-meta">{{ item.status }} · {{ item.injection_role }} authority{% if item.version %} · v{{ item.version }}{% endif %}</span>
                                </div>
                                {% if item.description %}
                                <div class="context-workflow-query">{{ item.description }}</div>
                                {% endif %}
                                <div class="context-workflow-state">
                                    <span>Activations: {{ item.activations }}</span>
                                    <span>Successes: {{ item.successes }}</span>
                                    <span>Failures: {{ item.failures }}</span>
                                    <span>Deviations: {{ item.deviations }}</span>
                                </div>
                                {% if item.demotion_reason %}
                                <div class="context-workflow-steps">Demoted: {{ item.demotion_reason }}</div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="context-log-empty">No learned skills yet for this agent.</div>
                        {% endif %}
                        </div>
                    </details>

                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Entity Memory</summary>
                        <div id="context-entity-container">
                        {% if entity_memory %}
                        <div class="context-entity-list">
                            {% for item in entity_memory %}
                            <div class="context-entity-item">
                                <div class="context-entity-header">
                                    <span class="context-entity-name">{{ item.name }}</span>
                                    {% if item.entity_type %}
                                    <span class="context-entity-type">{{ item.entity_type }}</span>
                                    {% endif %}
                                </div>
                                {% if item.timestamp %}
                                <div class="context-entity-time">{{ item.timestamp }}</div>
                                {% endif %}
                                {% if item.attributes_preview %}
                                <div class="context-entity-attributes">{{ item.attributes_preview }}</div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="context-log-empty">No entity memory found for this thread.</div>
                        {% endif %}
                        </div>
                    </details>

                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Summary Memory</summary>
                        <div id="context-summary-container">
                        {% if summary_memory %}
                        <div class="context-summary-list">
                            {% for item in summary_memory %}
                            <div class="context-summary-item">
                                <div class="context-summary-header">
                                    <span class="context-summary-type">{{ item.summary_type }}</span>
                                    {% if item.timestamp %}
                                    <span class="context-summary-time">{{ item.timestamp }}</span>
                                    {% endif %}
                                </div>
                                {% if item.content %}
                                <div class="context-summary-content">{{ item.content }}</div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="context-log-empty">No summary memory found for this thread.</div>
                        {% endif %}
                        </div>
                    </details>

                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Knowledge Base</summary>
                        <div id="context-knowledge-base-container">
                        {% if knowledge_base_memory %}
                        <div class="context-summary-list">
                            {% for item in knowledge_base_memory %}
                            <div class="context-summary-item">
                                <div class="context-summary-header">
                                    <span class="context-summary-type">{{ item.namespace or 'knowledge' }}</span>
                                    {% if item.timestamp %}
                                    <span class="context-summary-time">{{ item.timestamp }}</span>
                                    {% endif %}
                                </div>
                                {% if item.content_preview %}
                                <div class="context-summary-content">{{ item.content_preview }}</div>
                                {% endif %}
                                {% if item.content_length %}
                                <div class="context-toolbox-time">{{ item.content_length }} chars · id {{ item.knowledge_base_id[:8] }}</div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="context-log-empty">No knowledge base entries attached to this agent.</div>
                        {% endif %}
                        </div>
                    </details>

                    <details class="context-block context-block-collapsible">
                        <summary class="context-block-title">Tool Logs</summary>
                        <div id="context-tool-log-container">
                        {% if tool_log_memory %}
                        <div class="context-toolbox-list">
                            {% for item in tool_log_memory %}
                            <div class="context-toolbox-item">
                                <div class="context-toolbox-header">
                                    <span class="context-toolbox-name">{{ item.tool_name }}</span>
                                    <span class="context-toolbox-type">{% if item.success %}✓{% else %}✗{% endif %}</span>
                                </div>
                                {% if item.timestamp %}
                                <div class="context-toolbox-time">{{ item.timestamp }}</div>
                                {% endif %}
                                {% if item.arguments %}
                                <div class="context-toolbox-description" style="font-size:0.82em;opacity:0.7;">Args: {{ item.arguments[:120] }}{% if item.arguments|length > 120 %}...{% endif %}</div>
                                {% endif %}
                                {% if item.result_preview %}
                                <pre class="context-toolbox-value">{{ item.result_preview }}</pre>
                                {% endif %}
                                {% if item.error %}
                                <div style="color: #ff6b6b; font-size: 0.82em;">Error: {{ item.error }}</div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="context-log-empty">No tool logs for this thread. Tool outputs are offloaded here to save context window space.</div>
                        {% endif %}
                        </div>
                    </details>

                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Conversation</summary>
                        <div id="context-conversation-container">
                        {% if context_window %}
                        <div class="context-log">
                            {% for msg in context_window %}
                            <div class="context-log-item">
                                <div class="context-log-meta">
                                    <span class="context-log-role">{{ msg.role|default('unknown')|upper }}</span>
                                    {% if msg.timestamp %}
                                    <span class="context-log-time">{{ msg.timestamp }}</span>
                                    {% endif %}
                                </div>
                                <div class="context-log-text">{{ msg.content or msg.get('text', 'No content') }}</div>
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="context-log-empty">No conversation history.</div>
                        {% endif %}
                        </div>
                    </details>
                </div>
            </div>
        </div>
    </aside>
</div>

{% else %}
<div class="empty-state">
    <div class="empty-icon">❓</div>
    <h3>Agent Not Found</h3>
    <p>The requested agent could not be found.</p>
    <a href="/agents" class="btn btn-primary">Back to Agents</a>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
const AGENT_ID = "{{ agent.agent_id }}";
const CURRENT_MODEL = "{{ llm_model }}";
const INITIAL_SKILL_PATHS = {{ skill_paths|default([], true)|tojson }};
const INITIAL_MCP_SERVERS = {{ mcp_servers|default([], true)|tojson }};
let isStreaming = false;
let currentAbortController = null;
let threadLoadSequence = 0;

// --- Provider / Model mapping ---
const PROVIDER_MODELS = {{ llm_model_catalog|default({}, true)|tojson }};
const DEFAULT_MODELS_BY_PROVIDER = {{ default_llm_model_by_provider|default({}, true)|tojson }};
const CUSTOM_MODEL_VALUE = '__custom__';

function syncPlaygroundModelInputMode() {
    const select = document.getElementById('cfg-llm-model');
    const customInput = document.getElementById('cfg-llm-model-custom');
    if (!select || !customInput) return;

    if (select.style.display === 'none') {
        select.name = '';
        customInput.style.display = '';
        customInput.name = 'llm_model';
        return;
    }

    const useCustom = select.value === CUSTOM_MODEL_VALUE;
    customInput.style.display = useCustom ? '' : 'none';
    customInput.name = useCustom ? 'llm_model' : '';
    select.name = useCustom ? '' : 'llm_model';
    if (!useCustom && select.value) {
        customInput.value = select.value;
    }
}

function populateModelSelect(provider) {
    const select = document.getElementById('cfg-llm-model');
    const customInput = document.getElementById('cfg-llm-model-custom');
    const models = Array.isArray(PROVIDER_MODELS[provider]) ? PROVIDER_MODELS[provider] : [];
    const currentModel = ((customInput.value || CURRENT_MODEL || '').trim());

    if (models.length === 0) {
        // No predefined catalog: use free-text model/deployment input.
        select.style.display = 'none';
        if (!customInput.value.trim()) {
            customInput.value = (DEFAULT_MODELS_BY_PROVIDER[provider] || currentModel || '').trim();
        }
        syncPlaygroundModelInputMode();
        return;
    }

    // Catalog available: show select with optional custom entry.
    select.style.display = '';
    select.innerHTML = '';

    const groups = {};
    models.forEach(function(m) {
        const g = m.group || 'Models';
        if (!groups[g]) groups[g] = [];
        groups[g].push(m);
    });

    Object.keys(groups).forEach(function(groupName) {
        const optgroup = document.createElement('optgroup');
        optgroup.label = groupName;
        groups[groupName].forEach(function(m) {
            const opt = document.createElement('option');
            opt.value = m.value;
            opt.textContent = m.label;
            if (m.value === CURRENT_MODEL) opt.selected = true;
            optgroup.appendChild(opt);
        });
        select.appendChild(optgroup);
    });

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

    const inList = models.some(function(model) {
        return model.value === currentModel;
    });

    if (currentModel && inList) {
        select.value = currentModel;
        syncPlaygroundModelInputMode();
        return;
    }

    if (currentModel) {
        select.value = CUSTOM_MODEL_VALUE;
        customInput.value = currentModel;
        syncPlaygroundModelInputMode();
        return;
    }

    const fallback = (DEFAULT_MODELS_BY_PROVIDER[provider] || '').trim();
    if (fallback && models.some(function(model) { return model.value === fallback; })) {
        select.value = fallback;
        syncPlaygroundModelInputMode();
        return;
    }

    select.selectedIndex = 0;
    syncPlaygroundModelInputMode();
}

function onProviderChange() {
    const provider = document.getElementById('cfg-llm-provider').value;
    populateModelSelect(provider);
    playgroundCheckLocalModel();
}

// =====================================================================
// Local model pre-flight + manage panel for the Playground.
// Mirrors the logic in settings.html so users see the same Available
// Offline / Available to Download list (with select + trash + download
// buttons), and so they're warned *before* sending a chat that the
// chosen model isn't actually present locally.
// =====================================================================

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

function pgCurrentModel() {
    const customInput = document.getElementById('cfg-llm-model-custom');
    const select = document.getElementById('cfg-llm-model');
    const fromCustom = (customInput && customInput.value || '').trim();
    if (fromCustom) return fromCustom;
    if (select && select.value && select.value !== CUSTOM_MODEL_VALUE) return select.value.trim();
    return '';
}

function pgSelectModel(value) {
    // Set the value on the form so Save persists it. Route through the
    // custom input + select.value=CUSTOM_MODEL_VALUE so off-catalog
    // values (e.g. nomic-embed-text:latest) round-trip cleanly.
    const select = document.getElementById('cfg-llm-model');
    const customInput = document.getElementById('cfg-llm-model-custom');
    if (!select || !customInput) return;
    customInput.value = value;
    if (select.style.display !== 'none') {
        const inCatalog = Array.from(select.options).some(function(opt) {
            return opt.value === value;
        });
        select.value = inCatalog ? value : CUSTOM_MODEL_VALUE;
    }
    syncPlaygroundModelInputMode();
    playgroundCheckLocalModel();
}

let _pgLocalCheckSeq = 0;
let _pgLocalCheckDebounce = null;

function pgScheduleLocalCheck() {
    if (_pgLocalCheckDebounce) clearTimeout(_pgLocalCheckDebounce);
    _pgLocalCheckDebounce = setTimeout(playgroundCheckLocalModel, 350);
}

async function playgroundCheckLocalModel() {
    const statusEl = document.getElementById('cfg-local-model-status');
    const fieldEl = document.getElementById('cfg-llm-model-field');
    if (!statusEl || !fieldEl) return;

    const provider = (document.getElementById('cfg-llm-provider').value || '').trim();
    const model = pgCurrentModel();

    // MLX uses the same HF cache directory as `huggingface_hub`, so the
    // /api/huggingface/installed endpoint already covers it.
    const usesHFCache = provider === 'huggingface' || provider === 'mlx';
    if (provider !== 'ollama' && !usesHFCache || !model) {
        statusEl.style.display = 'none';
        statusEl.innerHTML = '';
        fieldEl.classList.remove('is-local-provider');
        return;
    }

    const seq = ++_pgLocalCheckSeq;
    statusEl.style.display = 'block';
    let providerLabel = 'local Ollama';
    if (provider === 'huggingface') providerLabel = 'HuggingFace cache';
    if (provider === 'mlx') providerLabel = 'MLX cache (HuggingFace)';
    statusEl.innerHTML = '<p class="form-hint">Checking ' + providerLabel + '…</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 !== _pgLocalCheckSeq) return;
        statusEl.innerHTML = '<div class="warning-message"><strong>Could not reach the UI server</strong>: '
            + pgEscapeHtml(String(err)) + '</div>';
        return;
    }
    if (seq !== _pgLocalCheckSeq) return;

    if (provider === 'ollama') {
        pgRenderOllama(statusEl, model, info);
    } else {
        // MLX shares the HF cache; the same renderer applies.
        pgRenderHuggingFace(statusEl, model, info);
    }
    pgSyncFieldClass();
}

function pgSyncFieldClass() {
    const fieldEl = document.getElementById('cfg-llm-model-field');
    if (!fieldEl) return;
    const hasManageList = !!document.querySelector('#cfg-local-model-status .model-manager');
    fieldEl.classList.toggle('is-local-provider', hasManageList);
}

function pgRenderOllama(statusEl, model, info) {
    if (!info.reachable) {
        statusEl.innerHTML = '<div class="warning-message">'
            + '<strong>Ollama is not running</strong> at <code>'
            + pgEscapeHtml(info.host) + '</code>'
            + (info.error ? ' &mdash; ' + pgEscapeHtml(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-pg-refresh>refresh this check</a>.'
            + '</div>';
        pgWireRefresh(statusEl);
        return;
    }
    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);
    const banner = installed
        ? '<div class="success-message">'
            + '<strong><code>' + pgEscapeHtml(model) + '</code> is available offline</strong>'
            + ' on Ollama at <code>' + pgEscapeHtml(info.host) + '</code>.'
            + '</div>'
        : '<div class="warning-message">'
            + '<strong>Pre-flight: <code>' + pgEscapeHtml(model) + '</code> is not installed locally.</strong><br>'
            + 'Sending a message will fail with a 404. Run <code>ollama pull '
            + pgEscapeHtml(model) + '</code>, click the download icon below, or '
            + '<a href="' + libUrl + '" target="_blank" rel="noopener">browse <code>'
            + pgEscapeHtml(base) + '</code> on ollama.com</a>. Then '
            + '<a href="#" data-pg-refresh>refresh</a>.'
            + '</div>';
    statusEl.innerHTML = banner + pgManageListHtml(info.models, 'ollama', 'Ollama');
    pgWireRefresh(statusEl);
}

function pgRenderHuggingFace(statusEl, model, info) {
    if (!info.available) {
        statusEl.innerHTML = '<div class="warning-message">'
            + '<strong>HuggingFace cache unavailable</strong>'
            + (info.error ? ' &mdash; ' + pgEscapeHtml(info.error) : '')
            + '.<br>Install it with <code>pip install memorizz[huggingface]</code>, then '
            + '<a href="#" data-pg-refresh>refresh</a>.'
            + '</div>';
        pgWireRefresh(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';
    const banner = cached
        ? '<div class="success-message">'
            + '<strong><code>' + pgEscapeHtml(model) + '</code> is cached locally</strong> at '
            + '<code>' + pgEscapeHtml(cacheLoc) + '</code>.'
            + '</div>'
        : '<div class="warning-message">'
            + '<strong>Pre-flight: <code>' + pgEscapeHtml(model) + '</code> is not cached locally.</strong><br>'
            + 'Sending a message will trigger a download (a few hundred MB to several GB) and may stall. '
            + 'Click the download icon below, or pre-download with '
            + '<code>huggingface-cli download ' + pgEscapeHtml(model) + '</code>, '
            + 'or <a href="' + repoUrl + '" target="_blank" rel="noopener">view the model card</a>. Then '
            + '<a href="#" data-pg-refresh>refresh</a>.'
            + '</div>';
    statusEl.innerHTML = banner + pgManageListHtml(info.models, 'huggingface', 'HuggingFace');
    pgWireRefresh(statusEl);
}

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

function pgManageListHtml(installedModels, provider, label) {
    const installed = (installedModels || []).filter(Boolean);
    const installedSet = new Set(installed);
    const isInstalled = function(val) {
        if (installedSet.has(val)) return true;
        if (provider === 'ollama') {
            if (installedSet.has(val + ':latest')) return true;
            if (val.endsWith(':latest') && installedSet.has(val.slice(0, -7))) return true;
        }
        return false;
    };
    const catalog = (PROVIDER_MODELS[provider] || []);
    const catalogValueSet = new Set(catalog.map(function(m) { return m.value; }));
    const catalogInstalled = catalog.filter(function(m) { return isInstalled(m.value); });
    const catalogMissing = catalog.filter(function(m) { return !isInstalled(m.value); });
    const extras = installed.filter(function(name) {
        if (catalogValueSet.has(name)) return false;
        if (provider === 'ollama' && name.endsWith(':latest')) {
            if (catalogValueSet.has(name.slice(0, -7))) return false;
        }
        return true;
    });
    const totalInstalled = catalogInstalled.length + extras.length;
    if (totalInstalled === 0 && catalogMissing.length === 0) return '';

    const rows = [];
    if (totalInstalled > 0) {
        rows.push('<div class="model-list-section">Available offline (' + totalInstalled + ')</div>');
        catalogInstalled.forEach(function(m) {
            rows.push(pgModelRow(m.value, m.label, provider, 'delete'));
        });
        extras.forEach(function(name) {
            rows.push(pgModelRow(name, name, provider, 'delete'));
        });
    }
    if (catalogMissing.length > 0) {
        rows.push('<div class="model-list-section">Available to download (' + catalogMissing.length + ')</div>');
        catalogMissing.forEach(function(m) {
            rows.push(pgModelRow(m.value, m.label, provider, 'pull'));
        });
    }
    return '<details class="model-manager" open>'
        + '<summary>Manage ' + pgEscapeHtml(label) + ' models</summary>'
        + '<div class="model-list">' + rows.join('') + '</div>'
        + '</details>';
}

function pgModelRow(value, label, provider, action) {
    const icon = action === 'delete' ? pgTrashIconSvg() : pgDownloadIconSvg();
    const title = action === 'delete' ? 'Remove from local cache' : 'Download to local cache';
    const aria = action === 'delete' ? ('Remove ' + value) : ('Download ' + value);
    const labelHtml = (label && label !== value)
        ? '<span class="model-row-label"> &mdash; ' + pgEscapeHtml(label) + '</span>'
        : '';
    const isSelectable = action === 'delete';
    const isSelected = isSelectable && pgCurrentModel() === value;
    const inner = '<code>' + pgEscapeHtml(value) + '</code>' + labelHtml;
    const textHtml = isSelectable
        ? '<button type="button" class="model-row-select"'
            + ' data-pg-select-model="' + pgEscapeHtml(value) + '"'
            + ' aria-pressed="' + (isSelected ? 'true' : 'false') + '"'
            + ' title="Use this model in the playground">'
            + (isSelected ? '<span class="model-row-check" aria-hidden="true">✓</span>' : '')
            + inner
            + '</button>'
        : '<div class="model-row-text">' + inner + '</div>';
    return '<div class="model-row" data-row-action="' + action + '"'
        + (isSelected ? ' data-selected="true"' : '')
        + '>'
        + textHtml
        + '<button type="button" class="model-action-btn"'
        + ' data-pg-action="' + action + '"'
        + ' data-pg-provider="' + pgEscapeHtml(provider) + '"'
        + ' data-pg-model="' + pgEscapeHtml(value) + '"'
        + ' title="' + pgEscapeHtml(title) + '"'
        + ' aria-label="' + pgEscapeHtml(aria) + '">'
        + icon + '</button>'
        + '</div>';
}

function pgTrashIconSvg() {
    return '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
        + '<polyline points="3 6 5 6 21 6"></polyline>'
        + '<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>'
        + '<path d="M10 11v6"></path><path d="M14 11v6"></path>'
        + '<path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path>'
        + '</svg>';
}
function pgDownloadIconSvg() {
    return '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
        + '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>'
        + '<polyline points="7 10 12 15 17 10"></polyline>'
        + '<line x1="12" y1="15" x2="12" y2="3"></line>'
        + '</svg>';
}

// Pull/delete plumbing lives in the shared handleLocalModelAction()
// (static/js/app.js); this wrapper just maps the playground's data
// attributes onto it and refreshes the pre-flight status afterwards.
async function pgHandleActionClick(button) {
    await handleLocalModelAction(
        button,
        button.dataset.pgAction,
        button.dataset.pgProvider,
        button.dataset.pgModel,
        playgroundCheckLocalModel
    );
}

document.addEventListener('click', function(ev) {
    const btn = ev.target.closest && ev.target.closest('.model-action-btn[data-pg-action]');
    if (!btn) return;
    ev.preventDefault();
    pgHandleActionClick(btn);
});
document.addEventListener('click', function(ev) {
    const sel = ev.target.closest && ev.target.closest('[data-pg-select-model]');
    if (!sel) return;
    ev.preventDefault();
    pgSelectModel(sel.getAttribute('data-pg-select-model'));
});

// Re-check on dropdown / custom-input changes so the banner updates live.
(function wirePgModelChangeListeners() {
    const select = document.getElementById('cfg-llm-model');
    const customInput = document.getElementById('cfg-llm-model-custom');
    if (select) select.addEventListener('change', playgroundCheckLocalModel);
    if (customInput) customInput.addEventListener('input', pgScheduleLocalCheck);
})();

function removeDynamicRow(buttonEl) {
    const row = buttonEl.closest('.config-dynamic-row');
    if (row) {
        row.remove();
    }
}

function addSkillPathRow(pathValue = '') {
    const container = document.getElementById('cfg-skill-path-rows');
    if (!container) return;

    const row = document.createElement('div');
    row.className = 'config-dynamic-row';

    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'config-dynamic-input cfg-skill-path-input';
    input.placeholder = 'skills/my-agent.skills.md';
    input.value = pathValue || '';

    const removeButton = document.createElement('button');
    removeButton.type = 'button';
    removeButton.className = 'btn btn-sm';
    removeButton.textContent = 'Remove';
    removeButton.addEventListener('click', function() {
        removeDynamicRow(removeButton);
    });

    row.appendChild(input);
    row.appendChild(removeButton);
    container.appendChild(row);
}

function addMcpServerRow(server = {}) {
    const container = document.getElementById('cfg-mcp-server-rows');
    if (!container) return;

    const row = document.createElement('div');
    row.className = 'config-dynamic-row config-dynamic-row--stacked';

    const topRow = document.createElement('div');
    topRow.className = 'config-mcp-top-row';

    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.placeholder = 'Server name';
    nameInput.className = 'config-dynamic-input cfg-mcp-name';
    nameInput.value = server.name || '';

    const transportSelect = document.createElement('select');
    transportSelect.className = 'config-dynamic-input cfg-mcp-transport';
    const stdioOption = document.createElement('option');
    stdioOption.value = 'stdio';
    stdioOption.textContent = 'stdio';
    const httpOption = document.createElement('option');
    httpOption.value = 'http';
    httpOption.textContent = 'http';
    transportSelect.appendChild(stdioOption);
    transportSelect.appendChild(httpOption);
    transportSelect.value = server.transport || 'stdio';

    const timeoutInput = document.createElement('input');
    timeoutInput.type = 'number';
    timeoutInput.min = '1';
    timeoutInput.max = '300';
    timeoutInput.className = 'config-dynamic-input cfg-mcp-timeout';
    timeoutInput.placeholder = 'Timeout';
    timeoutInput.value = String(server.timeout || 30);

    const removeButton = document.createElement('button');
    removeButton.type = 'button';
    removeButton.className = 'btn btn-sm';
    removeButton.textContent = 'Remove';
    removeButton.addEventListener('click', function() {
        removeDynamicRow(removeButton);
    });

    topRow.appendChild(nameInput);
    topRow.appendChild(transportSelect);
    topRow.appendChild(timeoutInput);
    topRow.appendChild(removeButton);

    const stdioRow = document.createElement('div');
    stdioRow.className = 'config-mcp-stdio-row';

    const commandInput = document.createElement('input');
    commandInput.type = 'text';
    commandInput.className = 'config-dynamic-input cfg-mcp-command';
    commandInput.placeholder = 'Command (e.g. npx)';
    commandInput.value = server.command || '';

    const argsInput = document.createElement('input');
    argsInput.type = 'text';
    argsInput.className = 'config-dynamic-input cfg-mcp-args';
    argsInput.placeholder = 'Args JSON (e.g. ["-y","@pkg/server"])';
    argsInput.value = server.args && server.args.length ? JSON.stringify(server.args) : '';

    const envInput = document.createElement('input');
    envInput.type = 'text';
    envInput.className = 'config-dynamic-input cfg-mcp-env';
    envInput.placeholder = 'Env JSON (e.g. {"API_KEY":"..."} )';
    envInput.value = server.env && Object.keys(server.env).length ? JSON.stringify(server.env) : '';

    stdioRow.appendChild(commandInput);
    stdioRow.appendChild(argsInput);
    stdioRow.appendChild(envInput);

    const httpRow = document.createElement('div');
    httpRow.className = 'config-mcp-http-row';

    const urlInput = document.createElement('input');
    urlInput.type = 'text';
    urlInput.className = 'config-dynamic-input cfg-mcp-url';
    urlInput.placeholder = 'HTTP URL (e.g. https://host/mcp)';
    urlInput.value = server.url || '';
    httpRow.appendChild(urlInput);

    function syncTransportVisibility() {
        const isStdio = transportSelect.value === 'stdio';
        stdioRow.style.display = isStdio ? '' : 'none';
        httpRow.style.display = isStdio ? 'none' : '';
    }
    transportSelect.addEventListener('change', syncTransportVisibility);
    syncTransportVisibility();

    row.appendChild(topRow);
    row.appendChild(stdioRow);
    row.appendChild(httpRow);
    container.appendChild(row);
}

function collectSkillPaths() {
    const inputs = document.querySelectorAll('.cfg-skill-path-input');
    const values = [];
    inputs.forEach(function(input) {
        const value = (input.value || '').trim();
        if (value && !values.includes(value)) values.push(value);
    });
    return values;
}

function parseJsonField(raw, fallback, label) {
    const text = (raw || '').trim();
    if (!text) return fallback;
    try {
        return JSON.parse(text);
    } catch (err) {
        throw new Error(`Invalid ${label} JSON: ${err.message}`);
    }
}

function collectMcpServers() {
    const rows = document.querySelectorAll('#cfg-mcp-server-rows .config-dynamic-row');
    const servers = [];
    const seen = new Set();

    rows.forEach(function(row) {
        const name = ((row.querySelector('.cfg-mcp-name') || {}).value || '').trim();
        if (!name || seen.has(name)) return;
        const transport = ((row.querySelector('.cfg-mcp-transport') || {}).value || 'stdio').trim();
        const timeoutRaw = ((row.querySelector('.cfg-mcp-timeout') || {}).value || '30').trim();
        let timeout = parseInt(timeoutRaw, 10);
        if (isNaN(timeout) || timeout <= 0) timeout = 30;

        const entry = { name: name, transport: transport, timeout: timeout };
        if (transport === 'stdio') {
            entry.command = ((row.querySelector('.cfg-mcp-command') || {}).value || '').trim();
            entry.args = parseJsonField((row.querySelector('.cfg-mcp-args') || {}).value, [], `${name} args`);
            entry.env = parseJsonField((row.querySelector('.cfg-mcp-env') || {}).value, {}, `${name} env`);
        } else {
            entry.url = ((row.querySelector('.cfg-mcp-url') || {}).value || '').trim();
        }
        servers.push(entry);
        seen.add(name);
    });

    return servers;
}

function serializeConfigCollections() {
    const skillPathsHidden = document.getElementById('cfg-skill-paths-json');
    const mcpServersHidden = document.getElementById('cfg-mcp-servers-json');
    if (!skillPathsHidden) return true;

    try {
        skillPathsHidden.value = JSON.stringify(collectSkillPaths());
        if (mcpServersHidden) {
            mcpServersHidden.value = JSON.stringify(collectMcpServers());
        }
        return true;
    } catch (err) {
        alert(err.message);
        return false;
    }
}

function initConfigCollections() {
    if (Array.isArray(INITIAL_SKILL_PATHS) && INITIAL_SKILL_PATHS.length) {
        INITIAL_SKILL_PATHS.forEach(function(pathValue) {
            addSkillPathRow(pathValue);
        });
    }

    if (Array.isArray(INITIAL_MCP_SERVERS) && INITIAL_MCP_SERVERS.length) {
        INITIAL_MCP_SERVERS.forEach(function(server) {
            addMcpServerRow(server || {});
        });
    }

    const form = document.querySelector('.playground-config-form');
    if (form) {
        form.addEventListener('submit', function(event) {
            if (!serializeConfigCollections()) {
                event.preventDefault();
            }
        });
    }

    serializeConfigCollections();
}

// Initialise on page load
populateModelSelect("{{ llm_provider }}");
playgroundCheckLocalModel();
const playgroundModelSelect = document.getElementById('cfg-llm-model');
const playgroundModelCustom = document.getElementById('cfg-llm-model-custom');
if (playgroundModelSelect) {
    playgroundModelSelect.addEventListener('change', function() {
        syncPlaygroundModelInputMode();
    });
}
if (playgroundModelCustom) {
    playgroundModelCustom.addEventListener('input', function() {
        if (playgroundModelSelect && playgroundModelSelect.value === CUSTOM_MODEL_VALUE) {
            playgroundModelCustom.name = 'llm_model';
        }
    });
}
initConfigCollections();

function toggleContextPanel() {
    const panel = document.getElementById('playground-context-panel');
    const btn = document.getElementById('context-panel-toggle');
    panel.classList.toggle('collapsed');
    btn.textContent = panel.classList.contains('collapsed') ? '▶' : '◀';
}

function generateThreadId() {
    if (window.crypto && typeof window.crypto.randomUUID === 'function') {
        return window.crypto.randomUUID();
    }
    return 'thread-' + Math.random().toString(36).slice(2, 10) + '-' + Date.now();
}

function setActiveThreadTab(memoryId) {
    const tabs = document.querySelectorAll('.playground-thread-tab');
    tabs.forEach(function(tab) {
        const isActive = (tab.dataset.memoryId || '') === (memoryId || '');
        tab.classList.toggle('is-active', isActive);
    });
}

function ensureThreadTabsContainer() {
    let tabsContainer = document.getElementById('playground-thread-tabs');
    if (tabsContainer) return tabsContainer;

    const section = document.querySelector('.playground-threads');
    if (!section) return null;

    const hint = section.querySelector('.form-hint');
    if (hint) hint.remove();

    tabsContainer = document.createElement('div');
    tabsContainer.id = 'playground-thread-tabs';
    tabsContainer.className = 'playground-thread-tabs';

    const header = section.querySelector('.playground-threads-header');
    if (header && header.nextSibling) {
        section.insertBefore(tabsContainer, header.nextSibling);
    } else {
        section.appendChild(tabsContainer);
    }
    return tabsContainer;
}

function createThreadTab(memoryId, messageCount = 0) {
    const tabsContainer = ensureThreadTabsContainer();
    if (!tabsContainer || !memoryId) return null;

    const existing = Array.from(tabsContainer.querySelectorAll('.playground-thread-tab')).find(
        function(tab) { return (tab.dataset.memoryId || '') === memoryId; }
    );
    if (existing) return existing;

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'playground-thread-tab';
    btn.dataset.memoryId = memoryId;
    btn.title = `${memoryId} • ${messageCount} messages`;

    const titleEl = document.createElement('span');
    titleEl.className = 'thread-tab-title';
    titleEl.textContent = 'New Thread';

    const metaEl = document.createElement('span');
    metaEl.className = 'thread-tab-meta';
    metaEl.textContent = `${messageCount} msgs`;

    const codeEl = document.createElement('code');
    codeEl.textContent = memoryId;

    btn.appendChild(titleEl);
    btn.appendChild(metaEl);
    btn.appendChild(codeEl);
    btn.addEventListener('click', function() {
        useThreadMemoryId(memoryId);
    });

    tabsContainer.prepend(btn);
    return btn;
}

function renderThreadEmptyState(memoryId) {
    const container = document.getElementById('playground-messages');
    if (!container) return;
    const safeThread = escapeHtml(memoryId || 'new');
    container.innerHTML = `
        <div class="pg-empty">
            <div class="pg-empty-icon">💬</div>
            <p>Start a conversation in this thread</p>
            <p class="pg-empty-hint">Thread: ${safeThread}</p>
        </div>
    `;
}

function renderThreadMessages(messages, memoryId) {
    const container = document.getElementById('playground-messages');
    if (!container) return;
    container.innerHTML = '';

    if (!Array.isArray(messages) || messages.length === 0) {
        renderThreadEmptyState(memoryId);
        return;
    }

    const avatars = { user: '👤', assistant: '🤖', tool: '🔧', system: '📝' };
    messages.forEach(function(msg) {
        if (
            msg
            && msg.message_type === 'trace_bundle'
            && Array.isArray(msg.trace_events)
        ) {
            const traceMessage = document.createElement('div');
            traceMessage.className = 'pg-message pg-message--tool';

            const traceRows = msg.trace_events.map(function(event) {
                const traceKind = ((event && event.trace_kind) ? String(event.trace_kind) : 'trace').toLowerCase();
                const traceKindClass = traceKind.replace(/[^a-z0-9_-]/g, '-');
                const title = event && event.title ? String(event.title) : 'Trace';
                const content = event && event.content ? String(event.content) : '';
                return `
                    <div class="pg-trace-item pg-trace-item--${traceKindClass}">
                        <div class="pg-trace-title">${escapeHtml(title)}</div>
                        <div class="pg-trace-content">${escapeHtml(content)}</div>
                    </div>
                `;
            }).join('');

            traceMessage.innerHTML = `
                <div class="pg-message-avatar">${avatars.tool}</div>
                <div class="pg-message-body">
                    <div class="pg-message-role">Agent Trace</div>
                    <div class="pg-trace-timeline">${traceRows}</div>
                </div>
            `;
            container.appendChild(traceMessage);
            return;
        }

        const role = ((msg && msg.role) ? String(msg.role) : 'system').toLowerCase();
        const roleLabel = role.charAt(0).toUpperCase() + role.slice(1);
        const content = msg && (msg.content ?? msg.text) ? String(msg.content ?? msg.text) : '';
        const useMarkdown = (role === 'assistant' || role === 'system');
        const renderedContent = useMarkdown ? renderMarkdown(content) : escapeHtml(content);
        const mdClass = useMarkdown ? ' md-rendered' : '';
        const div = document.createElement('div');
        div.className = `pg-message pg-message--${role}`;
        div.innerHTML = `
            <div class="pg-message-avatar">${avatars[role] || '📝'}</div>
            <div class="pg-message-body">
                <div class="pg-message-role">${escapeHtml(roleLabel)}</div>
                <div class="pg-message-text${mdClass}">${renderedContent}</div>
            </div>
        `;
        container.appendChild(div);
    });
    scrollToBottom();
}

function renderContextConversation(messages) {
    const container = document.getElementById('context-conversation-container');
    if (!container) return;

    if (!Array.isArray(messages) || messages.length === 0) {
        container.innerHTML = '<div class="context-log-empty">No conversation history.</div>';
        return;
    }

    const rows = messages.map(function(msg) {
        const role = ((msg && msg.role) ? String(msg.role) : 'unknown').toUpperCase();
        const timestamp = msg && msg.timestamp ? String(msg.timestamp) : '';
        const content = msg && (msg.content ?? msg.text) ? String(msg.content ?? msg.text) : 'No content';
        return `
            <div class="context-log-item">
                <div class="context-log-meta">
                    <span class="context-log-role">${escapeHtml(role)}</span>
                    ${timestamp ? `<span class="context-log-time">${escapeHtml(timestamp)}</span>` : ''}
                </div>
                <div class="context-log-text">${escapeHtml(content)}</div>
            </div>
        `;
    }).join('');

    container.innerHTML = `<div class="context-log">${rows}</div>`;
}

function renderContextToolbox(entries) {
    const container = document.getElementById('context-toolbox-container');
    if (!container) return;

    if (!Array.isArray(entries) || entries.length === 0) {
        container.innerHTML = '<div class="context-log-empty">No toolbox memory found for this thread.</div>';
        return;
    }

    const rows = entries.map(function(entry) {
        const name = entry && entry.name ? String(entry.name) : 'unnamed_toolbox_item';
        const toolType = entry && entry.tool_type ? String(entry.tool_type) : 'toolbox_item';
        const timestamp = entry && entry.timestamp ? String(entry.timestamp) : '';
        const description = entry && entry.description ? String(entry.description) : '';
        const signature = entry && entry.signature ? String(entry.signature) : '';
        const valuePreview = entry && entry.value_preview ? String(entry.value_preview) : '';
        return `
            <div class="context-toolbox-item">
                <div class="context-toolbox-header">
                    <span class="context-toolbox-name">${escapeHtml(name)}</span>
                    <span class="context-toolbox-type">${escapeHtml(toolType)}</span>
                </div>
                ${timestamp ? `<div class="context-toolbox-time">${escapeHtml(timestamp)}</div>` : ''}
                ${description ? `<div class="context-toolbox-description">${escapeHtml(description)}</div>` : ''}
                ${signature ? `<code class="context-toolbox-signature">${escapeHtml(signature)}</code>` : ''}
                ${valuePreview ? `<pre class="context-toolbox-value">${escapeHtml(valuePreview)}</pre>` : ''}
            </div>
        `;
    }).join('');

    container.innerHTML = `<div class="context-toolbox-list">${rows}</div>`;
}

function renderContextWorkflows(entries) {
    const container = document.getElementById('context-workflow-container');
    if (!container) return;

    if (!Array.isArray(entries) || entries.length === 0) {
        container.innerHTML = '<div class="context-log-empty">No workflow memory found for this thread.</div>';
        return;
    }

    const rows = entries.map(function(entry) {
        const name = entry && entry.name ? String(entry.name) : 'unnamed_workflow';
        const timestamp = entry && entry.timestamp ? String(entry.timestamp) : '';
        const status = entry && entry.status ? String(entry.status) : '';
        const injectionRole = entry && entry.injection_role ? String(entry.injection_role) : 'user';
        const outcome = entry && entry.outcome ? String(entry.outcome) : '';
        const stepCount = entry && Number.isFinite(Number(entry.step_count)) ? Number(entry.step_count) : 0;
        const userQuery = entry && entry.user_query ? String(entry.user_query) : '';
        const description = entry && entry.description ? String(entry.description) : '';
        const stepNames = entry && Array.isArray(entry.step_names_preview)
            ? entry.step_names_preview.map(function(item) { return String(item); }).filter(Boolean)
            : [];
        const stateParts = [];
        if (status) stateParts.push(`Status: ${status}`);
        if (outcome) stateParts.push(`Outcome: ${outcome}`);
        const summaryText = userQuery || description;

        return `
            <div class="context-workflow-item">
                <div class="context-workflow-header">
                    <span class="context-workflow-name">${escapeHtml(name)}</span>
                    <span class="context-workflow-meta">${stepCount} step${stepCount === 1 ? '' : 's'}</span>
                </div>
                ${timestamp ? `<div class="context-workflow-time">${escapeHtml(timestamp)}</div>` : ''}
                ${stateParts.length ? `<div class="context-workflow-state">${escapeHtml(stateParts.join(' • '))}</div>` : ''}
                ${summaryText ? `<div class="context-workflow-query">${escapeHtml(summaryText)}</div>` : ''}
                ${stepNames.length ? `<div class="context-workflow-steps">${escapeHtml(stepNames.join(', '))}</div>` : ''}
            </div>
        `;
    }).join('');

    container.innerHTML = `<div class="context-workflow-list">${rows}</div>`;
}

function renderContextSkills(entries) {
    const container = document.getElementById('context-skills-container');
    if (!container) return;

    if (!Array.isArray(entries) || entries.length === 0) {
        container.innerHTML = '<div class="context-log-empty">No learned skills yet for this agent.</div>';
        return;
    }

    const rows = entries.map(function(entry) {
        const name = entry && entry.name ? String(entry.name) : 'unnamed_skill';
        const status = entry && entry.status ? String(entry.status) : '';
        const version = entry && entry.version != null ? String(entry.version) : '';
        const description = entry && entry.description ? String(entry.description) : '';
        const demotionReason = entry && entry.demotion_reason ? String(entry.demotion_reason) : '';
        const activations = entry && Number.isFinite(Number(entry.activations)) ? Number(entry.activations) : 0;
        const successes = entry && Number.isFinite(Number(entry.successes)) ? Number(entry.successes) : 0;
        const failures = entry && Number.isFinite(Number(entry.failures)) ? Number(entry.failures) : 0;
        const deviations = entry && Number.isFinite(Number(entry.deviations)) ? Number(entry.deviations) : 0;
        const metaText = status + ` · ${injectionRole} authority` + (version ? ` · v${version}` : '');
        const statParts = [
            `Activations: ${activations}`,
            `Successes: ${successes}`,
            `Failures: ${failures}`,
            `Deviations: ${deviations}`,
        ];

        return `
            <div class="context-workflow-item">
                <div class="context-workflow-header">
                    <span class="context-workflow-name">${escapeHtml(name)}</span>
                    <span class="context-workflow-meta">${escapeHtml(metaText)}</span>
                </div>
                ${description ? `<div class="context-workflow-query">${escapeHtml(description)}</div>` : ''}
                <div class="context-workflow-state">${escapeHtml(statParts.join(' • '))}</div>
                ${demotionReason ? `<div class="context-workflow-steps">${escapeHtml(`Demoted: ${demotionReason}`)}</div>` : ''}
            </div>
        `;
    }).join('');

    container.innerHTML = `<div class="context-workflow-list">${rows}</div>`;
}

function renderContextEntities(entries) {
    const container = document.getElementById('context-entity-container');
    if (!container) return;

    if (!Array.isArray(entries) || entries.length === 0) {
        container.innerHTML = '<div class="context-log-empty">No entity memory found for this thread.</div>';
        return;
    }

    const rows = entries.map(function(entry) {
        const name = entry && entry.name ? String(entry.name) : 'unnamed_entity';
        const entityType = entry && entry.entity_type ? String(entry.entity_type) : '';
        const timestamp = entry && entry.timestamp ? String(entry.timestamp) : '';
        const attributesPreview = entry && entry.attributes_preview ? String(entry.attributes_preview) : '';
        return `
            <div class="context-entity-item">
                <div class="context-entity-header">
                    <span class="context-entity-name">${escapeHtml(name)}</span>
                    ${entityType ? `<span class="context-entity-type">${escapeHtml(entityType)}</span>` : ''}
                </div>
                ${timestamp ? `<div class="context-entity-time">${escapeHtml(timestamp)}</div>` : ''}
                ${attributesPreview ? `<div class="context-entity-attributes">${escapeHtml(attributesPreview)}</div>` : ''}
            </div>
        `;
    }).join('');

    container.innerHTML = `<div class="context-entity-list">${rows}</div>`;
}

function renderContextSummaries(entries) {
    const container = document.getElementById('context-summary-container');
    if (!container) return;

    if (!Array.isArray(entries) || entries.length === 0) {
        container.innerHTML = '<div class="context-log-empty">No summary memory found for this thread.</div>';
        return;
    }

    const rows = entries.map(function(entry) {
        const summaryType = entry && entry.summary_type ? String(entry.summary_type) : 'summary';
        const timestamp = entry && entry.timestamp ? String(entry.timestamp) : '';
        const content = entry && entry.content ? String(entry.content) : '';
        return `
            <div class="context-summary-item">
                <div class="context-summary-header">
                    <span class="context-summary-type">${escapeHtml(summaryType)}</span>
                    ${timestamp ? `<span class="context-summary-time">${escapeHtml(timestamp)}</span>` : ''}
                </div>
                ${content ? `<div class="context-summary-content">${escapeHtml(content)}</div>` : ''}
            </div>
        `;
    }).join('');

    container.innerHTML = `<div class="context-summary-list">${rows}</div>`;
}

function renderContextToolLogs(entries) {
    const container = document.getElementById('context-tool-log-container');
    if (!container) return;

    if (!Array.isArray(entries) || entries.length === 0) {
        container.innerHTML = '<div class="context-log-empty">No tool logs for this thread. Tool outputs are offloaded here to save context window space.</div>';
        return;
    }

    const rows = entries.map(function(entry) {
        const toolName = entry && entry.tool_name ? String(entry.tool_name) : 'unknown_tool';
        const success = entry && entry.success;
        const timestamp = entry && entry.timestamp ? String(entry.timestamp) : '';
        const args = entry && entry.arguments ? String(entry.arguments) : '';
        const resultPreview = entry && entry.result_preview ? String(entry.result_preview) : '';
        const error = entry && entry.error ? String(entry.error) : '';
        const argsPreview = args.length > 120 ? args.substring(0, 120) + '...' : args;
        return `
            <div class="context-toolbox-item">
                <div class="context-toolbox-header">
                    <span class="context-toolbox-name">${escapeHtml(toolName)}</span>
                    <span class="context-toolbox-type">${success ? '✓' : '✗'}</span>
                </div>
                ${timestamp ? `<div class="context-toolbox-time">${escapeHtml(timestamp)}</div>` : ''}
                ${argsPreview ? `<div class="context-toolbox-description" style="font-size:0.82em;opacity:0.7;">Args: ${escapeHtml(argsPreview)}</div>` : ''}
                ${resultPreview ? `<pre class="context-toolbox-value">${escapeHtml(resultPreview)}</pre>` : ''}
                ${error ? `<div style="color: #ff6b6b; font-size: 0.82em;">Error: ${escapeHtml(error)}</div>` : ''}
            </div>
        `;
    }).join('');

    container.innerHTML = `<div class="context-toolbox-list">${rows}</div>`;
}

function updateContextWindowCount(messageCount) {
    const countEl = document.getElementById('context-window-count');
    if (!countEl) return;
    const count = Number(messageCount) || 0;
    countEl.textContent = `${count} message${count === 1 ? '' : 's'}`;
}

function applyTokenStats(stats) {
    if (!stats) return;

    const totalTokens = Number(stats.total_tokens) || 0;
    const contextWindowTokens = Number(stats.context_window_tokens) || 128000;
    const percentageUsed = Math.max(0, Math.min(100, Number(stats.percentage_used) || 0));
    const messageCount = Number(stats.message_count) || 0;
    const composition = (stats && stats.composition) ? stats.composition : {};

    const tokenSummary = document.getElementById('token-summary');
    const tokenBarFill = document.getElementById('token-bar-fill');
    const tokenPercentage = document.getElementById('token-percentage');
    const tokenMessages = document.getElementById('token-messages');
    const compInstruction = document.getElementById('token-comp-instruction');
    const compPersona = document.getElementById('token-comp-persona');
    const compTools = document.getElementById('token-comp-tools');
    const compToolboxMemory = document.getElementById('token-comp-toolbox-memory');
    const compWorkflowMemory = document.getElementById('token-comp-workflow-memory');
    const compEntityMemory = document.getElementById('token-comp-entity-memory');
    const compSummaryMemory = document.getElementById('token-comp-summary-memory');
    const compHistory = document.getElementById('token-comp-history');

    if (tokenSummary) tokenSummary.textContent = `${totalTokens} / ${contextWindowTokens} tokens`;
    if (tokenBarFill) tokenBarFill.style.width = `${percentageUsed}%`;
    if (tokenPercentage) tokenPercentage.textContent = `${percentageUsed.toFixed(2)}% used`;
    if (tokenMessages) tokenMessages.textContent = `${messageCount} message${messageCount === 1 ? '' : 's'}`;
    if (compInstruction) compInstruction.textContent = `${Number(composition.instruction) || 0} tokens`;
    if (compPersona) compPersona.textContent = `${Number(composition.persona) || 0} tokens`;
    if (compTools) compTools.textContent = `${Number(composition.tools) || 0} tokens`;
    if (compToolboxMemory) compToolboxMemory.textContent = `${Number(composition.toolbox_memory) || 0} tokens`;
    if (compWorkflowMemory) compWorkflowMemory.textContent = `${Number(composition.workflow_memory) || 0} tokens`;
    if (compEntityMemory) compEntityMemory.textContent = `${Number(composition.entity_memory) || 0} tokens`;
    if (compSummaryMemory) compSummaryMemory.textContent = `${Number(composition.summary_memory) || 0} tokens`;
    if (compHistory) compHistory.textContent = `${Number(composition.history) || 0} tokens`;
}

function updateThreadTabMeta(memoryId, messageCount, lastActivity) {
    const normalized = (memoryId || '').trim();
    if (!normalized) return;
    const tabs = document.querySelectorAll('.playground-thread-tab');
    tabs.forEach(function(tab) {
        if ((tab.dataset.memoryId || '') !== normalized) return;
        const count = Number(messageCount) || 0;
        const metaEl = tab.querySelector('.thread-tab-meta');
        if (metaEl) {
            metaEl.textContent = `${count} msg${count === 1 ? '' : 's'}`;
        }
        const titleParts = [normalized, `${count} messages`];
        const activityText = (lastActivity || '').trim();
        if (activityText && activityText !== '—') titleParts.push(activityText);
        tab.title = titleParts.join(' • ');
    });
}

async function loadThreadMessages(memoryId, options = {}) {
    const normalized = (memoryId || '').trim();
    const requestSeq = ++threadLoadSequence;
    const renderChat = options.renderChat !== false;

    if (!normalized) {
        if (renderChat) {
            renderThreadEmptyState('');
        }
        renderContextConversation([]);
        renderContextToolbox([]);
        renderContextWorkflows([]);
        renderContextSkills([]);
        renderContextEntities([]);
        renderContextSummaries([]);
        renderContextToolLogs([]);
        updateContextWindowCount(0);
        return;
    }

    try {
        const response = await fetch(
            `/agents/${AGENT_ID}/playground/thread?memory_id=${encodeURIComponent(normalized)}`
        );
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        const payload = await response.json();
        if (requestSeq !== threadLoadSequence) return;
        const messages = Array.isArray(payload.messages) ? payload.messages : [];
        console.debug('[playground] Thread data loaded:', {
            memory_id: normalized,
            messages: messages.length,
            toolbox: (payload.toolbox_memory || []).length,
            workflow: (payload.workflow_memory || []).length,
            entity: (payload.entity_memory || []).length,
            summary: (payload.summary_memory || []).length,
            tool_logs: (payload.tool_log_memory || []).length,
        });
        if (renderChat) {
            renderThreadMessages(messages, normalized);
        }
        renderContextConversation(messages);
        renderContextToolbox(Array.isArray(payload.toolbox_memory) ? payload.toolbox_memory : []);
        renderContextWorkflows(Array.isArray(payload.workflow_memory) ? payload.workflow_memory : []);
        renderContextSkills(Array.isArray(payload.skill_memory) ? payload.skill_memory : []);
        renderContextEntities(Array.isArray(payload.entity_memory) ? payload.entity_memory : []);
        renderContextSummaries(Array.isArray(payload.summary_memory) ? payload.summary_memory : []);
        renderContextToolLogs(Array.isArray(payload.tool_log_memory) ? payload.tool_log_memory : []);
        updateContextWindowCount(messages.length);
        applyTokenStats(payload.token_stats || null);
        updateThreadTabMeta(
            normalized,
            payload.message_count != null ? payload.message_count : messages.length,
            payload.last_activity || ''
        );
    } catch (err) {
        if (requestSeq !== threadLoadSequence) return;
        console.error('[playground] Failed to load thread data:', err);
        if (!renderChat) return;
        const container = document.getElementById('playground-messages');
        if (!container) return;
        container.innerHTML = `
            <div class="pg-empty">
                <div class="pg-empty-icon">⚠️</div>
                <p>Could not load thread history</p>
                <p class="pg-empty-hint">${escapeHtml(String(err.message || err))}</p>
            </div>
        `;
    }
}

function useThreadMemoryId(memoryId, createIfMissing = false) {
    const memoryEl = document.getElementById('pg-memory-id');
    if (!memoryEl) return;
    const normalized = (memoryId || '').trim();
    memoryEl.value = normalized;
    if (createIfMissing && normalized) {
        createThreadTab(normalized, 0);
    }
    setActiveThreadTab(normalized);
    renderThreadEmptyState(normalized);
    void loadThreadMessages(normalized);
    const queryEl = document.getElementById('pg-query');
    if (queryEl) queryEl.focus();
}

function startNewThread() {
    useThreadMemoryId(generateThreadId(), true);
}

function initThreadTabs() {
    const memoryEl = document.getElementById('pg-memory-id');
    if (!memoryEl) return;

    const currentMemoryId = (memoryEl.value || '').trim();
    setActiveThreadTab(currentMemoryId);
    void loadThreadMessages(currentMemoryId);
}

function scrollToBottom() {
    const container = document.getElementById('playground-messages');
    if (!container) return;
    container.scrollTop = container.scrollHeight;
}

function appendMessage(role, content) {
    const container = document.getElementById('playground-messages');
    if (!container) return null;
    const emptyState = container.querySelector('.pg-empty');
    if (emptyState) emptyState.remove();

    const avatars = { user: '👤', assistant: '🤖', tool: '🔧', system: '📝' };
    const useMarkdown = (role === 'assistant' || role === 'system');
    const renderedContent = useMarkdown ? renderMarkdown(content) : escapeHtml(content);
    const mdClass = useMarkdown ? ' md-rendered' : '';
    const div = document.createElement('div');
    div.className = `pg-message pg-message--${role}`;
    div.innerHTML = `
        <div class="pg-message-avatar">${avatars[role] || '📝'}</div>
        <div class="pg-message-body">
            <div class="pg-message-role">${role.charAt(0).toUpperCase() + role.slice(1)}</div>
            <div class="pg-message-text${mdClass}">${renderedContent}</div>
        </div>
    `;
    container.appendChild(div);
    scrollToBottom();
    return div;
}

function createStreamingMessage() {
    const container = document.getElementById('playground-messages');
    if (!container) return null;
    const emptyState = container.querySelector('.pg-empty');
    if (emptyState) emptyState.remove();

    const div = document.createElement('div');
    div.className = 'pg-message pg-message--assistant';
    div.innerHTML = `
        <div class="pg-message-avatar">🤖</div>
        <div class="pg-message-body">
            <div class="pg-message-role">Assistant</div>
            <div class="pg-trace-timeline"></div>
            <div class="pg-message-text"><span class="streaming-cursor"></span></div>
        </div>
    `;
    container.appendChild(div);
    scrollToBottom();
    return {
        container: div,
        textElement: div.querySelector('.pg-message-text'),
        traceTimeline: div.querySelector('.pg-trace-timeline'),
    };
}

function renderApprovalCard(messageContainer, payload) {
    const proposal = payload && payload.proposal;
    const body = messageContainer && messageContainer.querySelector('.pg-message-body');
    if (!proposal || !body) return;

    const card = document.createElement('div');
    card.className = 'pg-approval-card';
    const argsText = JSON.stringify(proposal.arguments || {}, null, 2);
    card.innerHTML = `
        <div class="pg-approval-card-title">Human approval required</div>
        <div><strong>Tool:</strong> <code>${escapeHtml(String(proposal.tool_name || 'unknown'))}</code></div>
        <div><strong>Policy:</strong> ${escapeHtml(String(proposal.policy_reason || 'Host approval required'))}</div>
        <div><strong>Expires:</strong> ${escapeHtml(String(proposal.expires_at || 'unknown'))}</div>
        <details>
            <summary>Exact arguments and digest</summary>
            <pre>${escapeHtml(argsText)}</pre>
            <div><code>${escapeHtml(String(proposal.argument_hash || ''))}</code></div>
        </details>
        <div class="pg-approval-actions">
            <button type="button" class="btn btn-primary pg-approval-approve">Approve &amp; resume</button>
            <button type="button" class="btn btn-secondary pg-approval-reject">Reject</button>
        </div>
        <div class="pg-approval-status" aria-live="polite"></div>
    `;
    body.appendChild(card);

    const approveButton = card.querySelector('.pg-approval-approve');
    const rejectButton = card.querySelector('.pg-approval-reject');
    const status = card.querySelector('.pg-approval-status');
    const proposalId = String(proposal.proposal_id || '');

    async function decide(action) {
        const approverId = window.prompt('Approver identity (email or operator ID):', 'local-ui');
        if (!approverId || !approverId.trim()) return;
        approveButton.disabled = true;
        rejectButton.disabled = true;
        status.textContent = action === 'approve' ? 'Recording approval…' : 'Rejecting…';
        try {
            const decisionResponse = await fetch(
                `/api/agents/${encodeURIComponent(AGENT_ID)}/approvals/${encodeURIComponent(proposalId)}/${action}`,
                {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ approver_id: approverId.trim() }),
                },
            );
            const decision = await decisionResponse.json();
            if (!decisionResponse.ok) {
                throw new Error(decision.detail || `HTTP ${decisionResponse.status}`);
            }
            if (action === 'reject') {
                status.textContent = `Rejected by ${approverId.trim()}. No tool was executed.`;
                return;
            }

            status.textContent = 'Approved. Resuming the saved checkpoint…';
            const resumeResponse = await fetch(
                `/api/agents/${encodeURIComponent(AGENT_ID)}/approvals/${encodeURIComponent(proposalId)}/resume`,
                { method: 'POST' },
            );
            const resumed = await resumeResponse.json();
            if (!resumeResponse.ok) {
                throw new Error(resumed.detail || `HTTP ${resumeResponse.status}`);
            }
            status.textContent = `Approved and consumed by ${approverId.trim()}.`;
            const evidence = resumed.result;
            const resultValue = evidence && typeof evidence === 'object'
                ? (evidence.assistant_response ?? evidence.tool_result ?? evidence)
                : evidence;
            const resultText = typeof resultValue === 'string'
                ? resultValue
                : JSON.stringify(resultValue, null, 2);
            appendMessage('assistant', resultText || 'The approved action completed.');
        } catch (err) {
            status.textContent = `Approval action failed: ${err.message}`;
            approveButton.disabled = false;
            rejectButton.disabled = false;
        }
    }

    approveButton.addEventListener('click', () => decide('approve'));
    rejectButton.addEventListener('click', () => decide('reject'));
}

function closeTokenTooltip() {
    const tokenCard = document.getElementById('token-utilization-card');
    const wrapper = document.getElementById('token-bar-wrapper');
    if (!tokenCard || !wrapper) return;
    tokenCard.dataset.tooltipPinned = '0';
    tokenCard.classList.remove('tooltip-open');
    tokenCard.classList.remove('tooltip-pinned');
    wrapper.setAttribute('aria-expanded', 'false');
}

function openTokenTooltip(pinned = false) {
    const tokenCard = document.getElementById('token-utilization-card');
    const wrapper = document.getElementById('token-bar-wrapper');
    if (!tokenCard || !wrapper) return;
    tokenCard.dataset.tooltipPinned = pinned ? '1' : tokenCard.dataset.tooltipPinned || '0';
    tokenCard.classList.add('tooltip-open');
    tokenCard.classList.toggle('tooltip-pinned', tokenCard.dataset.tooltipPinned === '1');
    wrapper.setAttribute('aria-expanded', 'true');
}

function initTokenTooltip() {
    const tokenCard = document.getElementById('token-utilization-card');
    const wrapper = document.getElementById('token-bar-wrapper');
    if (!tokenCard || !wrapper) return;

    tokenCard.dataset.tooltipPinned = '0';

    wrapper.addEventListener('mouseenter', function() {
        if (tokenCard.dataset.tooltipPinned !== '1') {
            openTokenTooltip(false);
        }
    });
    wrapper.addEventListener('mouseleave', function() {
        if (tokenCard.dataset.tooltipPinned !== '1') {
            closeTokenTooltip();
        }
    });
    wrapper.addEventListener('focus', function() {
        if (tokenCard.dataset.tooltipPinned !== '1') {
            openTokenTooltip(false);
        }
    });
    wrapper.addEventListener('blur', function() {
        if (tokenCard.dataset.tooltipPinned !== '1') {
            closeTokenTooltip();
        }
    });

    wrapper.addEventListener('click', function(event) {
        event.preventDefault();
        if (tokenCard.dataset.tooltipPinned === '1') {
            closeTokenTooltip();
        } else {
            openTokenTooltip(true);
        }
    });

    document.addEventListener('click', function(event) {
        if (!tokenCard.contains(event.target)) {
            closeTokenTooltip();
        }
    });

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') closeTokenTooltip();
    });
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function renderMarkdown(text) {
    if (typeof marked === 'undefined' || !text || !text.trim()) {
        return escapeHtml(text || '');
    }
    try {
        marked.setOptions({
            breaks: true,
            gfm: true,
            headerIds: false,
            mangle: false,
        });
        return marked.parse(text);
    } catch (e) {
        return escapeHtml(text);
    }
}

async function compactContextWindow() {
    const btn = document.getElementById('compact-context-btn');
    if (!btn || btn.disabled) return;

    btn.disabled = true;
    btn.innerHTML = '<span class="compact-icon">⏳</span><span>Compacting...</span>';

    try {
        const memoryEl = document.getElementById('pg-memory-id');
        const memoryId = memoryEl ? memoryEl.value.trim() : '';

        const formData = new FormData();
        formData.append('query', '__compact_context_window__');
        if (memoryId) formData.append('memory_id', memoryId);

        const response = await fetch(`/agents/${AGENT_ID}/playground/compact`, {
            method: 'POST',
            body: formData,
        });

        if (!response.ok) throw new Error(`HTTP ${response.status}`);

        const result = await response.json();

        if (result.ok) {
            appendMessage('system', `Context compacted: ${result.summary_count || 0} summaries generated. ${result.message || ''}`);
            // Refresh thread to show updated context
            if (memoryId) {
                await loadThreadMessages(memoryId, { renderChat: false });
            }
        } else {
            appendMessage('system', `Compact failed: ${result.error || 'Unknown error'}`);
        }
    } catch (err) {
        appendMessage('system', `Compact error: ${err.message}`);
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<span class="compact-icon">🗜️</span><span>Compact</span>';
    }
}

function appendTraceBox(traceTimeline, traceEvent) {
    if (!traceTimeline || !traceEvent || typeof traceEvent !== 'object') return;

    const traceKind = String(traceEvent.trace_kind || traceEvent.kind || 'trace').toLowerCase();
    const title = String(traceEvent.title || 'Trace');
    const content = String(traceEvent.content || traceEvent.message || '').trim();
    const traceId = String(traceEvent.trace_id || '').trim();
    const appendMode = Boolean(traceEvent.append);

    if (!content && !appendMode) return;

    let item = null;
    if (traceId) {
        item = Array.from(traceTimeline.querySelectorAll('.pg-trace-item')).find(function(node) {
            return (node.dataset.traceId || '') === traceId;
        }) || null;
    }

    if (appendMode && item) {
        const contentEl = item.querySelector('.pg-trace-content');
        if (content && contentEl) {
            contentEl.textContent += content;
        }
        if (traceEvent.complete) {
            item.classList.add('is-complete');
        }
        scrollToBottom();
        return;
    }

    item = document.createElement('div');
    item.className = `pg-trace-item pg-trace-item--${traceKind}`;
    if (traceId) item.dataset.traceId = traceId;
    item.innerHTML = `
        <div class="pg-trace-title">${escapeHtml(title)}</div>
        <div class="pg-trace-content">${escapeHtml(content)}</div>
    `;
    traceTimeline.appendChild(item);
    scrollToBottom();
}

function setLoading(loading) {
    isStreaming = loading;
    const btn = document.getElementById('pg-send-btn');
    const text = document.getElementById('pg-send-text');
    const spinner = document.getElementById('pg-send-spinner');
    const stopBtn = document.getElementById('pg-stop-btn');
    const textarea = document.getElementById('pg-query');

    if (loading) {
        btn.disabled = true;
        text.textContent = 'Streaming...';
        spinner.style.display = 'inline-block';
        stopBtn.style.display = 'inline-block';
        textarea.disabled = true;
    } else {
        btn.disabled = false;
        text.textContent = 'Send';
        spinner.style.display = 'none';
        stopBtn.style.display = 'none';
        textarea.disabled = false;
        textarea.focus();
    }
}

function stopStreaming() {
    if (currentAbortController) {
        currentAbortController.abort();
        currentAbortController = null;
    }
    setLoading(false);
}

// --- Drag-and-drop files onto the chat area ---
function initKbDragAndDrop() {
    const chat = document.getElementById('playground-chat');
    const overlay = document.getElementById('pg-dropzone');
    if (!chat || !overlay) return;

    // Counter to handle dragenter/leave firing for every child element.
    // Incrementing on enter and decrementing on leave keeps the overlay
    // stable until the cursor truly exits the chat area.
    let dragDepth = 0;

    const containsFiles = (ev) => {
        const types = ev.dataTransfer && ev.dataTransfer.types;
        if (!types) return false;
        for (let i = 0; i < types.length; i++) {
            if (types[i] === 'Files') return true;
        }
        return false;
    };

    chat.addEventListener('dragenter', (ev) => {
        if (!containsFiles(ev)) return;
        ev.preventDefault();
        dragDepth += 1;
        overlay.classList.add('is-active');
    });

    chat.addEventListener('dragover', (ev) => {
        if (!containsFiles(ev)) return;
        ev.preventDefault();
        // 'copy' cursor = "we'll add this" (vs move/link)
        if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'copy';
    });

    chat.addEventListener('dragleave', (ev) => {
        if (!containsFiles(ev)) return;
        dragDepth = Math.max(0, dragDepth - 1);
        if (dragDepth === 0) overlay.classList.remove('is-active');
    });

    chat.addEventListener('drop', (ev) => {
        if (!containsFiles(ev)) return;
        ev.preventDefault();
        dragDepth = 0;
        overlay.classList.remove('is-active');
        const files = ev.dataTransfer && ev.dataTransfer.files;
        if (files && files.length > 0) {
            uploadKbFiles(files);
        }
    });

    // Prevent the browser from navigating away if the drop misses the zone
    // (e.g. lands on the context panel). Without this, dropping a file
    // anywhere else in the window navigates to it.
    ['dragover', 'drop'].forEach(evt => {
        window.addEventListener(evt, (ev) => {
            if (ev.target === chat || chat.contains(ev.target)) return;
            if (containsFiles(ev)) ev.preventDefault();
        });
    });
}

// Initialize once the DOM is ready (the script is at end-of-body so elements exist)
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initKbDragAndDrop);
} else {
    initKbDragAndDrop();
}

// --- Knowledge base file upload (per-file chips with cancel/undo) ---
// Each dropped/selected file gets its own chip. Upload proceeds one
// request per file so we can update chip state independently and support
// cancel (abort) before completion and delete (server-side) after.

const KB_CHIP_REGISTRY = new Map();  // chipId -> {controller, state, kbId, filename}
let _kbChipCounter = 0;

function fmtBytes(n) {
    if (n < 1024) return `${n} B`;
    if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
    return `${(n / (1024 * 1024)).toFixed(1)} MB`;
}

function kbChipsContainer() {
    const el = document.getElementById('pg-kb-chips');
    el.style.display = KB_CHIP_REGISTRY.size === 0 ? 'none' : 'flex';
    return el;
}

function renderChip(chipId, data) {
    const { filename, bytes, state, error } = data;
    const chip = document.createElement('div');
    chip.className = `pg-kb-chip pg-kb-chip--${state}`;
    chip.id = chipId;
    const titleByState = {
        queued: 'Waiting…',
        uploading: 'Ingesting…',
        done: 'Ingested — click × to remove from knowledge base',
        error: error || 'Failed',
    };
    chip.title = titleByState[state];

    // Uploading state gets a real CSS spinner; other states use a glyph
    // (static, so no rotation artifacts).
    let iconMarkup;
    if (state === 'uploading') {
        iconMarkup = `<span class="pg-kb-chip-spinner" aria-hidden="true"></span>`;
    } else {
        const glyphByState = { queued: '⏳', done: '✓', error: '✗' };
        iconMarkup = `<span class="pg-kb-chip-icon">${glyphByState[state]}</span>`;
    }

    chip.innerHTML = `
        ${iconMarkup}
        <span class="pg-kb-chip-name">${escapeChipHtml(filename)}</span>
        <span class="pg-kb-chip-size">${bytes != null ? fmtBytes(bytes) : ''}</span>
        <button type="button" class="pg-kb-chip-remove" aria-label="Remove">×</button>
    `;
    chip.querySelector('.pg-kb-chip-remove').addEventListener('click', () => {
        removeChip(chipId);
    });
    return chip;
}

// --- Chat bubbles for ingest events ---
// Transient system-style bubbles — not saved to conversation memory.
// Keyed by bubbleId so we can update a single bubble across the
// uploading → done/error transition.
function kbBubbleAppend(bubbleId, text, variant) {
    const container = document.getElementById('playground-messages');
    if (!container) return;
    // Clear the "start a conversation" empty state if present.
    const empty = container.querySelector('.pg-empty');
    if (empty) empty.remove();

    let node = document.getElementById(bubbleId);
    if (!node) {
        node = document.createElement('div');
        node.id = bubbleId;
        node.className = 'pg-message pg-message--system pg-kb-event';
        node.innerHTML = `
            <div class="pg-message-avatar">📎</div>
            <div class="pg-message-body">
                <div class="pg-message-role">Knowledge base</div>
                <div class="pg-message-text pg-kb-event-text"></div>
            </div>
        `;
        container.appendChild(node);
    }
    node.classList.toggle('pg-kb-event--error', variant === 'error');
    node.classList.toggle('pg-kb-event--done', variant === 'done');
    node.classList.toggle('pg-kb-event--uploading', variant === 'uploading');
    const textEl = node.querySelector('.pg-kb-event-text');
    if (textEl) textEl.textContent = text;
    container.scrollTop = container.scrollHeight;
}

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

function updateChip(chipId, patch) {
    const entry = KB_CHIP_REGISTRY.get(chipId);
    if (!entry) return;
    Object.assign(entry, patch);
    const oldEl = document.getElementById(chipId);
    if (!oldEl) return;
    const newEl = renderChip(chipId, entry);
    oldEl.replaceWith(newEl);
}

async function removeChip(chipId) {
    const entry = KB_CHIP_REGISTRY.get(chipId);
    if (!entry) return;

    // In-flight → abort and drop the chip
    if (entry.state === 'queued' || entry.state === 'uploading') {
        if (entry.controller) entry.controller.abort();
        dropChip(chipId);
        return;
    }

    // Ingested → ask server to delete before dropping
    if (entry.state === 'done' && entry.kbId) {
        updateChip(chipId, { state: 'uploading' });  // spinner during delete
        try {
            await fetch(
                `/api/agents/${encodeURIComponent(AGENT_ID)}/knowledge-base/${encodeURIComponent(entry.kbId)}`,
                { method: 'DELETE' }
            );
        } catch (_) {
            // Network error — still drop the chip; user can refresh to see real state.
        }
        dropChip(chipId);
        return;
    }

    // Error / unknown → just drop
    dropChip(chipId);
}

function dropChip(chipId) {
    KB_CHIP_REGISTRY.delete(chipId);
    const el = document.getElementById(chipId);
    if (el) el.remove();
    kbChipsContainer();  // toggle visibility
    // When every chip is gone, reload so the Knowledge Base panel reflects
    // the new server state (unless the user is mid-conversation — debounce a bit).
    if (KB_CHIP_REGISTRY.size === 0) {
        scheduleKbPanelRefresh();
    }
}

// --- In-place refresh of the Knowledge Base panel (no full page reload) ---
// Debounce so a batch of fast ingests/deletes coalesces into one fetch.
let _kbRefreshTimer = null;
function scheduleKbPanelRefresh(delayMs = 400) {
    if (_kbRefreshTimer) clearTimeout(_kbRefreshTimer);
    _kbRefreshTimer = setTimeout(() => refreshKnowledgeBasePanel(), delayMs);
}

async function refreshKnowledgeBasePanel() {
    const container = document.getElementById('context-knowledge-base-container');
    if (!container) return;
    try {
        const res = await fetch(
            `/api/agents/${encodeURIComponent(AGENT_ID)}/knowledge-base`,
            { cache: 'no-store' },
        );
        if (!res.ok) return;
        const data = await res.json();
        renderKnowledgeBasePanel(container, data.entries || []);
    } catch (e) {
        // Network blip — leave the panel as-is; user can manually reload.
        console.warn('KB panel refresh failed:', e);
    }
}

function renderKnowledgeBasePanel(container, entries) {
    if (!entries.length) {
        container.innerHTML = '<div class="context-log-empty">No knowledge base entries attached to this agent.</div>';
        return;
    }
    const items = entries.map(item => {
        const ns = escapeChipHtml(item.namespace || 'knowledge');
        const ts = item.timestamp
            ? `<span class="context-summary-time">${escapeChipHtml(String(item.timestamp))}</span>`
            : '';
        const preview = item.content_preview
            ? `<div class="context-summary-content">${escapeChipHtml(item.content_preview)}</div>`
            : '';
        const idSuffix = item.knowledge_base_id ? String(item.knowledge_base_id).slice(0, 8) : '';
        const meta = item.content_length
            ? `<div class="context-toolbox-time">${item.content_length} chars · id ${escapeChipHtml(idSuffix)}</div>`
            : '';
        return `
            <div class="context-summary-item">
                <div class="context-summary-header">
                    <span class="context-summary-type">${ns}</span>
                    ${ts}
                </div>
                ${preview}
                ${meta}
            </div>
        `;
    }).join('');
    container.innerHTML = `<div class="context-summary-list">${items}</div>`;
}

async function uploadKbFiles(fileList) {
    if (!fileList || fileList.length === 0) return;
    const container = kbChipsContainer();
    const fileInput = document.getElementById('pg-kb-file-input');

    // Create chips immediately (before any network work) so the user sees
    // their files as "pending" right away.
    const pending = [];
    for (const f of Array.from(fileList)) {
        const chipId = `kb-chip-${++_kbChipCounter}`;
        const entry = {
            filename: f.name,
            bytes: f.size,
            state: 'queued',
            controller: new AbortController(),
            kbId: null,
            error: null,
        };
        KB_CHIP_REGISTRY.set(chipId, entry);
        container.appendChild(renderChip(chipId, entry));
        pending.push({ chipId, file: f, controller: entry.controller });
    }
    kbChipsContainer();
    if (fileInput) fileInput.value = '';  // allow re-selecting the same file

    // Upload sequentially — one request per file so each chip updates
    // independently and cancel-before-completion is meaningful.
    for (const { chipId, file, controller } of pending) {
        // Chip may have been removed while we were waiting our turn.
        if (!KB_CHIP_REGISTRY.has(chipId)) continue;
        updateChip(chipId, { state: 'uploading' });

        const bubbleId = `kb-bubble-${chipId}`;
        kbBubbleAppend(bubbleId, `Ingesting "${file.name}"…`, 'uploading');

        const fd = new FormData();
        fd.append('files', file, file.name);
        fd.append('chunking_strategy', 'fixed');
        fd.append('chunk_size', '1000');
        fd.append('chunk_overlap', '100');

        try {
            const res = await fetch(
                `/api/agents/${encodeURIComponent(AGENT_ID)}/knowledge-base/ingest`,
                { method: 'POST', body: fd, signal: controller.signal }
            );
            const data = await res.json();
            const row = (data.results || [])[0] || {};
            if (res.ok && row.ok) {
                updateChip(chipId, {
                    state: 'done',
                    kbId: row.knowledge_base_id,
                    error: null,
                });
                const chunkSuffix = row.chunk_count
                    ? ` (${row.chunk_count} chunk${row.chunk_count === 1 ? '' : 's'})`
                    : '';
                kbBubbleAppend(
                    bubbleId,
                    `✓ Added "${file.name}" to knowledge base${chunkSuffix}. You can reference it in your next message.`,
                    'done',
                );
                // Refresh the side panel immediately so the user sees the new
                // entry without reloading the page. Debounced so a multi-file
                // upload only fetches once at the end of the batch.
                scheduleKbPanelRefresh();
            } else {
                const msg = row.error || data.detail || `HTTP ${res.status}`;
                updateChip(chipId, { state: 'error', error: msg });
                kbBubbleAppend(bubbleId, `✗ "${file.name}" failed: ${msg}`, 'error');
            }
        } catch (e) {
            if (e.name === 'AbortError') {
                // User hit × — chip was already dropped in removeChip().
                const node = document.getElementById(bubbleId);
                if (node) node.remove();
                continue;
            }
            updateChip(chipId, { state: 'error', error: String(e) });
            kbBubbleAppend(bubbleId, `✗ "${file.name}" failed: ${e}`, 'error');
        }
    }
}

async function sendMessage() {
    if (isStreaming) return;

    const queryEl = document.getElementById('pg-query');
    const memoryEl = document.getElementById('pg-memory-id');
    if (!queryEl || !memoryEl) return;
    const query = queryEl.value.trim();

    if (!query) return;

    if (!memoryEl.value.trim()) {
        const newMemoryId = generateThreadId();
        memoryEl.value = newMemoryId;
        createThreadTab(newMemoryId, 0);
        setActiveThreadTab(newMemoryId);
    }

    appendMessage('user', query);
    queryEl.value = '';
    setLoading(true);

    const streamMessage = createStreamingMessage();
    if (!streamMessage || !streamMessage.textElement) {
        setLoading(false);
        return;
    }
    const streamTarget = streamMessage.textElement;
    const streamTraceTimeline = streamMessage.traceTimeline;
    let fullText = '';

    try {
        const modelSelect = document.getElementById('cfg-llm-model');
        const modelCustom = document.getElementById('cfg-llm-model-custom');
        const instructionInput = document.getElementById('cfg-instruction');

        // Read model from whichever input is active.
        let modelValue = '';
        if (modelSelect.style.display !== 'none') {
            modelValue = modelSelect.value === CUSTOM_MODEL_VALUE
                ? modelCustom.value
                : modelSelect.value;
        } else {
            modelValue = modelCustom.value;
        }

        const formData = new FormData();
        formData.append('query', query);
        if (memoryEl.value.trim()) {
            formData.append('memory_id', memoryEl.value.trim());
        }
        if (modelValue.trim()) {
            formData.append('llm_model', modelValue.trim());
        }
        if (instructionInput && instructionInput.value.trim()) {
            formData.append('instruction', instructionInput.value.trim());
        }

        // Create AbortController for this request
        currentAbortController = new AbortController();

        const response = await fetch(`/agents/${AGENT_ID}/playground/stream`, {
            method: 'POST',
            body: formData,
            signal: currentAbortController.signal,
        });

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        // SSE plumbing lives in the shared readSseStream() (static/js/app.js).
        await readSseStream(response, (payload) => {
            if (payload === '[DONE]') {
                const cursor = streamTarget.querySelector('.streaming-cursor');
                if (cursor) cursor.remove();
                return;
            }

            try {
                const parsed = JSON.parse(payload);

                if (typeof parsed === 'string') {
                    fullText += parsed;
                    streamTarget.textContent = fullText;
                    scrollToBottom();
                    return;
                }

                if (parsed && typeof parsed === 'object') {
                    const eventType = String(parsed.type || '').toLowerCase();

                    if (String(parsed.status || '').toLowerCase() === 'approval_required') {
                        fullText = String(
                            parsed.message || 'Execution is paused for human approval.'
                        );
                        streamTarget.textContent = fullText;
                        renderApprovalCard(streamMessage.container, parsed);
                        scrollToBottom();
                        return;
                    }

                    if (eventType === 'trace' || eventType === 'reasoning') {
                        appendTraceBox(streamTraceTimeline, parsed);
                        return;
                    }

                    if (eventType === 'warning') {
                        appendTraceBox(streamTraceTimeline, {
                            trace_kind: parsed.scope || 'warning',
                            title: 'Warning',
                            content: parsed.message || parsed.content || '',
                        });
                        return;
                    }

                    if (eventType === 'content') {
                        const textChunk = String(parsed.content || parsed.text || '');
                        if (textChunk) {
                            fullText += textChunk;
                            streamTarget.textContent = fullText;
                            scrollToBottom();
                        }
                        return;
                    }
                }
            } catch (e) {}
        });

        const cursor = streamTarget.querySelector('.streaming-cursor');
        if (cursor) cursor.remove();
        if (fullText) {
            streamTarget.innerHTML = renderMarkdown(fullText);
            streamTarget.classList.add('md-rendered');
        }

    } catch (err) {
        if (err.name === 'AbortError') {
            streamTarget.textContent = '[Streaming stopped by user]';
            streamTarget.classList.add('pg-message-system');
        } else {
            streamTarget.textContent = `Error: ${err.message}`;
            streamTarget.classList.add('pg-message-error');
        }
    } finally {
        currentAbortController = null;
        setLoading(false);
        const activeMemoryId = (memoryEl.value || '').trim();
        if (activeMemoryId) {
            await loadThreadMessages(activeMemoryId, { renderChat: false });
        }
        scrollToBottom();
    }
}

// Enter to send, Shift+Enter for newline
document.getElementById('pg-query').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});

initThreadTabs();
initTokenTooltip();

// Render markdown for server-rendered assistant messages
document.querySelectorAll('.pg-message-text[data-md-raw]').forEach(function(el) {
    const raw = el.getAttribute('data-md-raw');
    if (raw) {
        el.innerHTML = renderMarkdown(raw);
    }
});

scrollToBottom();
</script>
{% endblock %}