{% extends "base.html" %}

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

{% block body_attrs %} class="page-playground" data-sidebar-scope="playground" data-sidebar-default="collapsed"{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/css/playground.css?v=12">
<link rel="stylesheet" href="/static/css/catalog.css?v=4">
<script src="/static/js/catalog.js?v=2" defer></script>
<!-- marked.js for markdown rendering -->
<script src="https://cdn.jsdelivr.net/npm/marked@14.0.0/marked.min.js"></script>
<script src="/static/js/safe-markdown.js?v=2"></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: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 12px 14px;
        overflow-x: auto;
        margin: 0.6em 0;
        font-size: 0.88em;
    }
    .pg-message-text.md-rendered code {
        background: var(--bg-tertiary);
        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 var(--accent-primary);
        margin: 0.5em 0;
        padding: 0.3em 0.8em;
        color: var(--text-secondary);
    }
    .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 {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        margin: 0.5em 0;
        font-size: 0.92em;
    }
    .pg-message-text.md-rendered th,
    .pg-message-text.md-rendered td {
        border: 1px solid var(--border-color);
        padding: 6px 10px;
        text-align: left;
        overflow-wrap: normal;
        word-break: normal;
        min-width: 7ch;
    }
    .pg-message-text.md-rendered th {
        background: var(--bg-tertiary);
        font-weight: 600;
    }
    .pg-message-text.md-rendered a {
        color: var(--accent-primary);
        text-decoration: underline;
    }
    .pg-message-text.md-rendered hr {
        border: none;
        border-top: 1px solid var(--border-color);
        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: var(--accent-warning, #b7791f);
        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: var(--bg-tertiary);
    }
    .pg-approval-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
    }
    .pg-approval-status {
        margin-top: 8px;
        color: var(--text-secondary);
    }

    /* Compact button styles */
    .compact-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        font-size: 0.78em;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .compact-btn:hover {
        background: var(--bg-hover);
        border-color: var(--accent-primary);
    }
    .compact-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .compact-btn .compact-icon {
        font-size: 1.1em;
    }
    .auto-compact-control {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 8px;
        font-size: 0.78em;
        color: var(--text-secondary);
    }
    .auto-compact-control select {
        padding: 3px 6px;
        font: inherit;
        color: var(--text-primary);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }
    .auto-compact-hint,
    .token-measured {
        margin: 6px 0 0;
        font-size: 0.74em;
        line-height: 1.4;
        color: var(--text-muted);
    }
    .pg-compact-note {
        margin: 0 0 8px;
        padding: 6px 10px;
        font-size: 0.8em;
        color: var(--text-secondary);
        border-left: 3px solid var(--accent-primary);
        background: var(--bg-secondary);
        border-radius: 4px;
    }
</style>
{% endblock %}

{% block content %}
{% from '_ui.html' import id_chip %}
{% if agent %}
{% set agent_is_favorite = agent.is_favorite if agent and agent.is_favorite is not none else false %}
{% set agent_title = agent.name or (agent.persona.name if agent.persona and agent.persona.name else 'Agent') %}
<div class="pg-app" id="pg-app" data-agent-name="{{ agent_title }}">
    <aside class="pg-rail playground-threads" id="pg-rail" aria-label="Conversations">
        <div class="pg-rail-head playground-threads-header">
            <button type="button" class="pg-new-chat" onclick="startNewThread()"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span>New chat</span></button>
        </div>
        <div class="pg-rail-scroll">
            <h2 class="pg-rail-title">Conversations</h2>
            <div class="playground-thread-tabs" id="playground-thread-tabs">
                {% for thread in threads %}
                <div class="pg-thread-row" data-memory-id="{{ thread.memory_id }}">
                <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.title or ('Conversation ' ~ loop.index) }}</span>
                    <span class="thread-tab-meta">{{ thread.message_count }} message{% if thread.message_count != 1 %}s{% endif %}{% if thread.last_activity and thread.last_activity != '—' %} · {{ thread.last_activity[:16] }}{% endif %}</span>
                </button>
                <span class="pg-thread-actions">
                    <button type="button" class="pg-thread-action" data-thread-action="rename" aria-label="Rename conversation" title="Rename"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></button>
                    <button type="button" class="pg-thread-action is-danger" data-thread-action="delete" aria-label="Delete conversation" title="Delete"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/></svg></button>
                </span>
                </div>
                {% endfor %}
            </div>
            {% if not threads %}<p class="pg-rail-empty" id="pg-no-threads">No conversations yet. Send a message to start one.</p>{% endif %}

            <div class="pg-rail-title-row">
                <h2 class="pg-rail-title">Automations</h2>
                <a class="pg-rail-link" href="/automations/new?agent_id={{ agent.agent_id }}">New</a>
            </div>
            <div class="playground-thread-tabs pg-automation-list" id="playground-automation-tabs">
                <p class="form-hint" id="automation-tabs-empty">Loading automation runs…</p>
            </div>
            <a class="pg-rail-link pg-rail-footer-link" href="/automations?agent_id={{ agent.agent_id }}">All automations</a>
        </div>
    </aside>

    <div class="pg-scrim" onclick="pgCloseDrawers()" aria-hidden="true"></div>
    <section class="pg-main" id="playground-chat" aria-label="Chat">
        <header class="pg-topbar">
            <button type="button" class="pg-icon-btn" id="pg-rail-toggle" onclick="togglePlaygroundRail()" aria-controls="pg-rail" aria-expanded="true" title="Show or hide conversations"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M9 4.5v15"/></svg></button>
            <div class="pg-topbar-title">
                <h1>{{ agent_title }}</h1>
                <button type="button" class="pg-model-chip" onclick="openInspectorTab('settings')" title="{{ llm_provider }} / {{ llm_model }} · change the model in Settings">{{ llm_model }}</button>
            </div>
            <div class="pg-topbar-actions">
                <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="pg-icon-btn 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></button>
                </form>
                <a class="btn btn-sm" href="/traces?agent_id={{ agent.agent_id }}">Traces</a>
                <a class="btn btn-sm" href="/agents/{{ agent.agent_id }}/edit">Edit</a>
                <button type="button" class="pg-icon-btn" id="context-panel-toggle" onclick="toggleContextPanel()" aria-controls="playground-context-panel" aria-expanded="true" title="Show or hide the inspector"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><path d="M15 4.5v15"/></svg></button>
            </div>
        </header>

        {% if error %}
        <div class="error-message pg-error" role="alert">{{ error }}</div>
        {% endif %}

        <div class="pg-dropzone" id="pg-dropzone" aria-hidden="true">
            <div class="pg-dropzone-inner">
                <div class="pg-dropzone-title">Drop files to add them to the knowledge base</div>
                <div class="pg-dropzone-hint">Each file is chunked, embedded and attached to this agent.</div>
            </div>
        </div>

        <input id="pg-memory-id" type="hidden" value="{{ default_memory_id }}">
        <div class="pg-thread" id="playground-messages" aria-live="polite">
            <div class="pg-empty pg-loading">Loading conversation…</div>
        </div>

        <div class="pg-composer-wrap">
            <div class="pg-composer" id="playground-composer">
                <div id="pg-kb-chips" class="pg-kb-chips" style="display:none;"></div>
                <label for="pg-query" class="sr-only">Message</label>
                <textarea id="pg-query" rows="1" placeholder="Message {{ agent_title }}…" autofocus></textarea>
                <div class="composer-row">
                    <button type="button" id="pg-attach-btn" class="pg-icon-btn" onclick="document.getElementById('pg-kb-file-input').click()" title="Add files to the knowledge base">
                        <span id="pg-attach-icon"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 11.5l-8.2 8.2a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.4 8.4a1.7 1.7 0 0 1-2.4-2.4l7.6-7.6"/></svg></span>
                        <span id="pg-attach-label" class="sr-only">Attach files</span>
                    </button>
                    <input id="pg-kb-file-input" type="file" multiple hidden onchange="uploadKbFiles(this.files)">
                    <button type="button" class="pg-meter" id="pg-composer-meter" onclick="openInspectorTab('overview')" title="Context window used · open the inspector">
                        <span class="pg-meter-ring" aria-hidden="true"></span>
                        <span id="pg-composer-meter-label">{{ token_stats.percentage_used|default(0) if token_stats else 0 }}% context</span>
                    </button>
                    <span class="pg-meter pg-meter--cache" id="pg-composer-cache" hidden></span>
                    {% if harness_delegates %}<button type="button" class="pg-meter pg-hx-chip" id="pg-hx-chip" onclick="openInspectorTab('overview'); document.getElementById('pg-hx')?.scrollIntoView({block: 'nearest'})" title="What this agent's harness delegates may use · change it in the inspector">Delegates · fresh folder · no web</button>{% endif %}
                    <span class="composer-spacer"></span>
                    <button type="button" id="pg-stop-btn" class="pg-send pg-stop" onclick="stopStreaming()" style="display:none;" aria-label="Stop generating" title="Stop generating (Esc)"><svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="2.5" fill="currentColor"/></svg></button>
                    <button type="button" id="pg-send-btn" class="pg-send" onclick="sendMessage()" aria-label="Send message" title="Send (Enter)">
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5"/><path d="M5.5 11.5L12 5l6.5 6.5"/></svg>
                        <span id="pg-send-text" class="sr-only">Send</span>
                        <span id="pg-send-spinner" class="spinner" style="display:none;"></span>
                    </button>
                </div>
            </div>
            <p class="pg-composer-hint">Enter to send · Shift+Enter for a new line · Drop files to add them to the knowledge base</p>
        </div>
    </section>

    <aside class="pg-inspector playground-context-panel" id="playground-context-panel" aria-label="Agent inspector">
        <div class="pg-tabs" role="tablist" aria-label="Inspector views">
            <button type="button" role="tab" id="pg-tab-overview" data-tab="overview" aria-controls="pg-panel-overview" aria-selected="true">Overview</button>
            <button type="button" role="tab" id="pg-tab-context" data-tab="context" aria-controls="pg-panel-context" aria-selected="false" tabindex="-1">Context</button>
            <button type="button" role="tab" id="pg-tab-memory" data-tab="memory" aria-controls="pg-panel-memory" aria-selected="false" tabindex="-1">Memory</button>
            <button type="button" role="tab" id="pg-tab-settings" data-tab="settings" aria-controls="pg-panel-settings" aria-selected="false" tabindex="-1">Settings</button>
        </div>
        <div class="pg-tab-panel" role="tabpanel" id="pg-panel-overview" aria-labelledby="pg-tab-overview">
            {% if token_stats %}
            <div class="token-utilization" id="token-utilization-card">
                <div class="token-header">
                    <h3>Context window</h3>
                    <span class="token-summary" id="token-summary">{{ "{:,}".format(token_stats.total_tokens|default(0)|int) }} / {{ "{:,}".format(token_stats.context_window_tokens|default(128000)|int) }} 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">What the next request sends</div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot instruction"></span> System prompt</span>
                        <span class="composition-value" id="token-comp-system">{{ "{:,}".format(token_stats.composition.system_prompt|default(0)|int) }} 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">{{ "{:,}".format(token_stats.composition.tools|default(0)|int) }} tokens</span>
                    </div>
                    <div class="composition-item">
                        <span class="composition-label"><span class="composition-dot entity-memory"></span> Memory</span>
                        <span class="composition-value" id="token-comp-memory">{{ "{:,}".format(token_stats.composition.memory|default(0)|int) }} 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">{{ "{:,}".format(token_stats.composition.history|default(0)|int) }} 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) }} of {{ token_stats.thread_message_count|default(0) }} messages sent</span>
                </div>
                <p class="token-measured" id="token-measured" hidden></p>
                <p class="token-model-note" id="token-model-note"{% if not token_stats.model_context_tokens or token_stats.model_context_tokens <= token_stats.context_window_tokens %} hidden{% endif %}><code id="token-model-name">{{ token_stats.model_name or '' }}</code> supports up to <span id="token-model-max">{{ "{:,}".format(token_stats.model_context_tokens|default(0)|int) }}</span> tokens. <button type="button" onclick="pgEditContextWindow()">Change the window</button></p>
                <div class="token-actions">
                    <button type="button" class="compact-btn" id="compact-context-btn" onclick="compactContextWindow()" title="Summarize and compact the context window to free up tokens">
                        <span>Compact context</span>
                    </button>
                    <label class="auto-compact-control" for="auto-compact-at">Auto-compact at
                        <select id="auto-compact-at" data-available="{{ 'true' if token_stats.compaction_available else 'false' }}">
                            <option value="0" {% if not token_stats.compact_at %}selected{% endif %}>Off</option>
                            {% for value in [30, 40, 50, 60, 70, 80] %}<option value="{{ value }}" {% if token_stats.compact_at == value %}selected{% endif %}>{{ value }}%</option>{% endfor %}
                        </select>
                    </label>
                </div>
                <p class="auto-compact-hint" id="auto-compact-hint" data-projected="{{ token_stats.projected_percentage|default(0) }}" data-fixed="{{ token_stats.fixed_percentage|default(0) }}"></p>
            </div>
            {% endif %}
            {% if agent %}
            <div class="token-utilization pg-cache-card" id="pg-prompt-cache" aria-live="polite">
                <div class="token-header">
                    <h3>Prompt cache</h3>
                    <a class="token-summary" href="/traces/usage?agent_id={{ agent.agent_id|urlencode }}#provider-prompt-cache">Details</a>
                </div>
                <div class="pg-cache-stats">
                    <div><span>Read rate</span><strong id="pg-cache-read">—</strong></div>
                    <div><span>Hit rate</span><strong id="pg-cache-hit">—</strong></div>
                </div>
                <p class="pg-cache-note" id="pg-cache-agent-note">Loading recorded model calls…</p>
                <p class="pg-cache-note pg-cache-last" id="pg-cache-last" hidden></p>
            </div>
            {% endif %}
            <section class="pg-section">
                <h3 class="pg-section-title">Agent</h3>
                <dl class="pg-facts">
                    <div><dt>Model</dt><dd class="mono">{{ llm_provider }} / {{ llm_model }}</dd></div>
                    <div><dt>Mode</dt><dd>{{ agent.application_mode or 'assistant' }}</dd></div>
                    <div><dt>Max tool iterations</dt><dd>{{ max_steps }}</dd></div>
                    <div><dt>Conversations</dt><dd>{{ threads|length }}</dd></div>
                    <div class="pg-facts-wide"><dt>Agent ID</dt><dd>{{ id_chip(agent.agent_id|string, 36) }}</dd></div>
                </dl>
            </section>
            {% if harness_delegates %}
            <section class="pg-section pg-hx" id="pg-hx" aria-labelledby="pg-hx-title">
                <div class="pg-section-head">
                    <h3 class="pg-section-title" id="pg-hx-title">Harness delegates</h3>
                    <span class="pg-section-meta" id="pg-hx-state">Fresh folder · no web</span>
                </div>
                <p class="pg-hx-note">This agent hands parts of a request to {{ harness_delegates|join(', ') }}. They work in a folder and use only the access allowed here; each starts its own harness run, listed on <a href="/harnesses">Agent Harnesses</a>.</p>
                <div class="pg-hx-active" id="pg-hx-active" hidden>
                    <dl class="pg-facts">
                        <div class="pg-facts-wide"><dt>Folder</dt><dd class="mono" id="pg-hx-active-folder"></dd></div>
                        <div><dt>Access</dt><dd id="pg-hx-active-access"></dd></div>
                        <div><dt>Approved by</dt><dd id="pg-hx-active-approver"></dd></div>
                        <div class="pg-facts-wide"><dt>Until</dt><dd id="pg-hx-active-until"></dd></div>
                    </dl>
                    <button type="button" class="btn btn-sm" id="pg-hx-clear">Stop using this access</button>
                </div>
                <form class="pg-hx-form" id="pg-hx-form" novalidate>
                    <div class="config-field">
                        <label for="pg-hx-workspace">Folder</label>
                        <input id="pg-hx-workspace" type="text" placeholder="Blank: a fresh folder for this conversation" autocomplete="off" spellcheck="false">
                        <p class="form-hint">{% if harness_roots %}An existing folder inside {{ harness_roots|join(', ') }}.{% else %}The absolute path of an existing folder.{% endif %}</p>
                    </div>
                    <div class="config-field">
                        <label for="pg-hx-network">Network</label>
                        <select id="pg-hx-network">
                            <option value="none">No web access</option>
                            <option value="full">Full · web access</option>
                        </select>
                    </div>
                    <div class="config-field config-field--toggle">
                        <label class="config-toggle-option">
                            <input id="pg-hx-write" type="checkbox">
                            <span>Allow edits in the folder</span>
                        </label>
                    </div>
                    <div class="config-field">
                        <label for="pg-hx-approver">Approved by</label>
                        <input id="pg-hx-approver" type="text" placeholder="Your name, for web access or edits" autocomplete="name">
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary" id="pg-hx-allow">Allow</button>
                    <p class="form-hint pg-hx-message" id="pg-hx-message" aria-live="polite"></p>
                </form>
            </section>
            {% endif %}
        </div>
        <div class="pg-tab-panel" role="tabpanel" id="pg-panel-context" aria-labelledby="pg-tab-context" hidden>
            <div class="pg-section-head">
                <h3 class="pg-section-title">Sent to the model</h3>
                <span class="pg-section-meta" id="context-window-count">{{ context_window|length }} messages</span>
            </div>
                    {% 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</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">Conversation history</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')|capitalize }}</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 class="pg-tab-panel" role="tabpanel" id="pg-panel-memory" aria-labelledby="pg-tab-memory" hidden>
            <p class="pg-panel-intro">What this agent has stored for the current conversation.</p>
                    <details class="context-block context-block-collapsible" open>
                        <summary class="context-block-title">Toolbox</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">Workflows</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">Entities</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">Summaries</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>
        </div>
        <div class="pg-tab-panel" role="tabpanel" id="pg-panel-settings" aria-labelledby="pg-tab-settings" hidden>
            <p class="pg-panel-intro">Changes apply to this agent and are saved to its configuration.</p>
<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" id="cfg-context-window-field" {% if llm_provider != 'ollama' %}hidden{% endif %}>
                <label for="cfg-context-window">Context window</label>
                <select id="cfg-context-window" name="context_window_tokens" data-current="{{ llm_context_window }}" {% if llm_provider != 'ollama' %}disabled{% endif %}>
                    <option value="">Default (the model's full length when it fits in memory)</option>
                    {% if llm_context_window %}<option value="{{ llm_context_window }}" selected>{{ "{:,}".format(llm_context_window) }} tokens</option>{% endif %}
                </select>
                <p class="form-hint" id="cfg-context-window-hint">Larger windows hold more of the conversation but use more memory and run slower.</p>
            </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">Lets the agent search a marketplace itself. To pin a skill, attach it under Skills below.</p>
            </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 class="catalog" data-catalog="skills" id="cfg-skill-catalog" data-agent-id="{{ active_agent_id }}">
                    <div class="catalog-search" data-catalog-form role="search">
                        <input type="search" placeholder="Find skills on skills.sh, e.g. notion, gmail, calendar" aria-label="Search skills">
                        <button class="btn btn-sm" type="button">Search</button>
                    </div>
                    <p class="catalog-status" data-catalog-status role="status" aria-live="polite"></p>
                    <ul class="catalog-results" data-catalog-results></ul>
                </div>
            </div>
            <div class="config-field config-field--wide">
                <label>MCP Servers</label>
                <ul class="catalog-attached" id="cfg-mcp-servers">
                    {% for server in mcp_servers %}
                    <li><span><strong>{{ server.name }}</strong> <span class="catalog-meta mono">{{ server.url or server.command or server.transport }}</span></span><span class="catalog-meta">{{ {'oauth': 'Sign-in', 'bearer': 'Token'}.get((server.auth or {}).type, 'No auth') }}</span></li>
                    {% else %}
                    <li class="catalog-empty"><span class="catalog-meta">No MCP servers attached.</span></li>
                    {% endfor %}
                </ul>
                <div class="catalog" data-catalog="mcp" id="cfg-mcp-catalog" data-agent-id="{{ active_agent_id }}">
                    <div class="catalog-search" data-catalog-form role="search">
                        <input type="search" placeholder="Search the MCP Registry, e.g. linear, github, slack" aria-label="Search MCP servers">
                        <button class="btn btn-sm" type="button">Search</button>
                    </div>
                    <p class="catalog-status" data-catalog-status role="status" aria-live="polite"></p>
                    <ul class="catalog-results" data-catalog-results></ul>
                    <button class="btn btn-sm" type="button" data-catalog-more hidden>More results</button>
                </div>
                <p class="form-hint">Attached servers are saved immediately. Test them, sign in again or change tool permissions on <a href="/mcp?agent_id={{ active_agent_id }}">MCP connections</a>.</p>
            </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">
            <span class="config-dirty" id="cfg-dirty" hidden>Unsaved changes</span>
            <button type="submit" class="btn btn-primary btn-sm">Save Config</button>
        </div>
    </form>
        </div>
    </aside>
</div>

<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>

{% else %}
{% from '_ui.html' import empty_state %}
{{ empty_state('Agent not found', 'No agent with this ID exists in the connected memory provider. It may have been deleted, or it belongs to a different provider.', '/agents', 'All agents') }}
{% 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 }};
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 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();
    const dirty = document.getElementById('cfg-dirty');
    if (dirty) dirty.hidden = false;
}

let _pgLocalCheckSeq = 0;
let _pgLocalCheckDebounce = null;

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

const PG_WINDOW_SIZES = [8192, 16384, 32768, 65536, 131072, 262144];
let _pgWindowSeq = 0;

// Ollama only: the window this agent requests, up to what the model supports.
async function pgRefreshContextWindow(provider, model) {
    const field = document.getElementById('cfg-context-window-field');
    const select = document.getElementById('cfg-context-window');
    const hint = document.getElementById('cfg-context-window-hint');
    if (!field || !select) return;
    const isOllama = provider === 'ollama';
    field.hidden = !isOllama;
    select.disabled = !isOllama;  // a disabled field is not submitted
    if (!isOllama || !model) return;
    const seq = ++_pgWindowSeq;
    const chosen = select.value || select.dataset.current || '';
    let maxLength = 0, defaultSize = 0;
    try {
        const response = await fetch('/api/ollama/context-length?model=' + encodeURIComponent(model));
        const body = await response.json();
        maxLength = Number(body.context_length) || 0;
        defaultSize = Number(body.default_window) || 0;
    } catch (error) { /* leave the list unbounded */ }
    if (seq !== _pgWindowSeq) return;
    const sizes = PG_WINDOW_SIZES.filter(function(size) { return !maxLength || size <= maxLength; });
    if (maxLength && !sizes.includes(maxLength)) sizes.push(maxLength);
    if (chosen && !sizes.includes(Number(chosen))) sizes.push(Number(chosen));
    sizes.sort(function(a, b) { return a - b; });
    select.innerHTML = '';
    select.appendChild(new Option(
        defaultSize ? `Default (${defaultSize.toLocaleString()} tokens)` : "Default (the model's full length when it fits in memory)", ''));
    sizes.forEach(function(size) {
        const over = maxLength && size > maxLength;
        const option = new Option(`${size.toLocaleString()} tokens${size === maxLength ? ' (model maximum)' : ''}${over ? ' (more than the model supports)' : ''}`, String(size));
        select.appendChild(option);
    });
    select.value = chosen && sizes.includes(Number(chosen)) ? chosen : '';
    if (hint) {
        const cost = 'Larger windows hold more of the conversation but use more memory, and long prompts take longer to read.';
        let note = '';
        if (maxLength && defaultSize >= maxLength) {
            note = `${model} supports up to ${maxLength.toLocaleString()} tokens; Default uses all of it. `;
        } else if (maxLength && defaultSize) {
            note = `${model} supports up to ${maxLength.toLocaleString()} tokens; Default uses ${defaultSize.toLocaleString()}, the most that fits comfortably in this machine's memory. `;
        } else if (maxLength) {
            note = `${model} supports up to ${maxLength.toLocaleString()} tokens. `;
        }
        hint.textContent = note + cost;
    }
}

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();
    void pgRefreshContextWindow(provider, model);

    // 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>: '
            + escapeHtml(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>'
            + escapeHtml(info.host) + '</code>'
            + (info.error ? ' &mdash; ' + escapeHtml(info.error) : '')
            + '.<br>Install it from <a href="https://ollama.com/download" target="_blank" rel="noopener">ollama.com/download</a> and start it, then '
            + '<a href="#" data-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>' + escapeHtml(model) + '</code> is available offline</strong>'
            + ' on Ollama at <code>' + escapeHtml(info.host) + '</code>.'
            + '</div>'
        : '<div class="warning-message">'
            + '<strong>Pre-flight: <code>' + escapeHtml(model) + '</code> is not installed locally.</strong><br>'
            + 'Sending a message will fail with a 404. Run <code>ollama pull '
            + escapeHtml(model) + '</code>, click the download icon below, or '
            + '<a href="' + libUrl + '" target="_blank" rel="noopener">browse <code>'
            + escapeHtml(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; ' + escapeHtml(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>' + escapeHtml(model) + '</code> is cached locally</strong> at '
            + '<code>' + escapeHtml(cacheLoc) + '</code>.'
            + '</div>'
        : '<div class="warning-message">'
            + '<strong>Pre-flight: <code>' + escapeHtml(model) + '</code> is not cached locally.</strong><br>'
            + '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 ' + escapeHtml(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 ' + escapeHtml(label) + ' models</summary>'
        + '<div class="model-list">' + rows.join('') + '</div>'
        + '</details>';
}

function pgModelRow(value, label, provider, action) {
    const icon = action === 'delete' ? trashIconSvg() : downloadIconSvg();
    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; ' + escapeHtml(label) + '</span>'
        : '';
    const isSelectable = action === 'delete';
    const isSelected = isSelectable && pgCurrentModel() === value;
    const inner = '<code>' + escapeHtml(value) + '</code>' + labelHtml;
    const textHtml = isSelectable
        ? '<button type="button" class="model-row-select"'
            + ' data-pg-select-model="' + escapeHtml(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="' + escapeHtml(provider) + '"'
        + ' data-pg-model="' + escapeHtml(value) + '"'
        + ' title="' + escapeHtml(title) + '"'
        + ' aria-label="' + escapeHtml(aria) + '">'
        + icon + '</button>'
        + '</div>';
}

// 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 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 serializeConfigCollections() {
    const skillPathsHidden = document.getElementById('cfg-skill-paths-json');
    if (!skillPathsHidden) return true;

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

// Search-and-attach for skills and MCP servers; both save immediately.
function initConfigCatalogs() {
    if (!window.MemorizzCatalog) return;
    MemorizzCatalog.mount(document.getElementById('cfg-skill-catalog'), {
        onAttached: function(skill) {
            if (!collectSkillPaths().includes(skill.path)) addSkillPathRow(skill.path);
        },
    });
    MemorizzCatalog.mount(document.getElementById('cfg-mcp-catalog'), {
        onAttached: function(server) {
            const list = document.getElementById('cfg-mcp-servers');
            if (!list) return;
            list.querySelectorAll('.catalog-empty').forEach(function(el) { el.remove(); });
            const item = document.createElement('li');
            const label = document.createElement('span');
            const name = document.createElement('strong');
            name.textContent = server.name;
            const where = document.createElement('span');
            where.className = 'catalog-meta mono';
            where.textContent = ' ' + (server.url || server.command || server.transport);
            label.append(name, where);
            const auth = document.createElement('span');
            auth.className = 'catalog-meta';
            auth.textContent = { oauth: 'Sign-in', bearer: 'Token' }[(server.auth || {}).type] || 'No auth';
            item.append(label, auth);
            list.appendChild(item);
        },
    });
}
document.addEventListener('DOMContentLoaded', initConfigCatalogs);

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

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

// --- Workspace layout: conversations rail, inspector and its tabs ---------
const PG_LAYOUT_KEY = 'memorizz.playground.layout';

function pgLayoutState() {
    try {
        return JSON.parse(window.localStorage.getItem(PG_LAYOUT_KEY) || '{}') || {};
    } catch (err) {
        return {};
    }
}

function pgSaveLayout(patch) {
    try {
        window.localStorage.setItem(PG_LAYOUT_KEY, JSON.stringify(Object.assign(pgLayoutState(), patch)));
    } catch (err) {
        // Storage can be unavailable (private mode); layout still works.
    }
}

// Side panels dock beside the chat on wide screens and slide over it on narrow ones.
const PG_DOCK_QUERY = { rail: '(min-width: 1200px)', inspector: '(min-width: 1024px)' };

function pgPanelDocks(name) {
    return window.matchMedia(PG_DOCK_QUERY[name]).matches;
}

function pgSetPanel(name, open, persist = true) {
    const app = document.getElementById('pg-app');
    const toggle = document.getElementById(name === 'rail' ? 'pg-rail-toggle' : 'context-panel-toggle');
    if (!app) return;
    app.classList.toggle(name === 'rail' ? 'rail-collapsed' : 'inspector-collapsed', !open);
    if (toggle) toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    // A drawer opened over the chat is transient; only docked choices are remembered.
    if (persist && pgPanelDocks(name)) pgSaveLayout({ [name]: open });
}

function pgCloseDrawers() {
    ['rail', 'inspector'].forEach(function(name) {
        if (!pgPanelDocks(name)) pgSetPanel(name, false, false);
    });
}

function togglePlaygroundRail() {
    const app = document.getElementById('pg-app');
    if (app) pgSetPanel('rail', app.classList.contains('rail-collapsed'));
}

function toggleContextPanel() {
    const app = document.getElementById('pg-app');
    if (app) pgSetPanel('inspector', app.classList.contains('inspector-collapsed'));
}

function openInspectorTab(name, focusTab = false, reveal = true) {
    const tabs = document.querySelectorAll('.pg-tabs [role="tab"]');
    let selected = null;
    tabs.forEach(function(tab) {
        const active = tab.dataset.tab === name;
        tab.setAttribute('aria-selected', active ? 'true' : 'false');
        tab.tabIndex = active ? 0 : -1;
        const panel = document.getElementById(tab.getAttribute('aria-controls'));
        if (panel) panel.hidden = !active;
        if (active) selected = tab;
    });
    if (!selected) return;
    const app = document.getElementById('pg-app');
    if (reveal && app && app.classList.contains('inspector-collapsed')) pgSetPanel('inspector', true);
    if (focusTab) selected.focus();
    pgSaveLayout({ tab: name });
}

function initPlaygroundLayout() {
    const state = pgLayoutState();
    // Docked panels restore the saved choice; drawers on narrow screens start closed.
    ['rail', 'inspector'].forEach(function(name) {
        const docks = pgPanelDocks(name);
        pgSetPanel(name, docks && state[name] !== false, false);
    });
    openInspectorTab(state.tab || 'overview', false, false);
    document.addEventListener('keydown', function(event) {
        // While a reply streams, Esc stops it instead (see the composer handler).
        if (event.key === 'Escape' && !isStreaming) pgCloseDrawers();
    });
    const tablist = document.querySelector('.pg-tabs');
    if (tablist) {
        tablist.addEventListener('click', function(event) {
            const tab = event.target.closest('[role="tab"]');
            if (tab) openInspectorTab(tab.dataset.tab);
        });
        tablist.addEventListener('keydown', function(event) {
            if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
            const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
            const index = tabs.findIndex(function(tab) { return tab.getAttribute('aria-selected') === 'true'; });
            const next = tabs[(index + (event.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length];
            openInspectorTab(next.dataset.tab, true);
            event.preventDefault();
        });
    }
}

// Composer grows with its content up to a comfortable maximum.
function pgAutosize() {
    const textarea = document.getElementById('pg-query');
    if (!textarea) return;
    textarea.style.height = 'auto';
    textarea.style.height = Math.min(textarea.scrollHeight, 240) + 'px';
}

function pgUseSuggestion(text) {
    const textarea = document.getElementById('pg-query');
    if (!textarea) return;
    textarea.value = text;
    pgAutosize();
    textarea.focus();
}

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 chat';

    const metaEl = document.createElement('span');
    metaEl.className = 'thread-tab-meta';
    metaEl.textContent = `${messageCount} message${messageCount === 1 ? '' : 's'}`;

    btn.appendChild(titleEl);
    btn.appendChild(metaEl);
    const emptyHint = document.getElementById('pg-no-threads');
    if (emptyHint) emptyHint.remove();
    btn.addEventListener('click', function() {
        useThreadMemoryId(memoryId);
    });

    const row = document.createElement('div');
    row.className = 'pg-thread-row';
    row.dataset.memoryId = memoryId;
    row.appendChild(btn);
    row.appendChild(pgThreadActions());
    tabsContainer.prepend(row);
    return btn;
}

// ---------------------------------------------------------------------
// Rename and delete a conversation from the list.
// ---------------------------------------------------------------------

const PG_ICON_RENAME = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>';
const PG_ICON_DELETE = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/></svg>';

function pgThreadActions() {
    const actions = document.createElement('span');
    actions.className = 'pg-thread-actions';
    [['rename', 'Rename conversation', 'Rename', PG_ICON_RENAME, ''],
     ['delete', 'Delete conversation', 'Delete', PG_ICON_DELETE, ' is-danger']].forEach(function(spec) {
        const button = document.createElement('button');
        button.type = 'button';
        button.className = 'pg-thread-action' + spec[4];
        button.dataset.threadAction = spec[0];
        button.setAttribute('aria-label', spec[1]);
        button.title = spec[2];
        button.innerHTML = spec[3];
        actions.appendChild(button);
    });
    return actions;
}

function pgThreadUrl(memoryId) {
    return `/api/agents/${encodeURIComponent(AGENT_ID)}/threads/${encodeURIComponent(memoryId)}`;
}

function pgActiveMemoryId() {
    const memoryEl = document.getElementById('pg-memory-id');
    return memoryEl ? (memoryEl.value || '').trim() : '';
}

function pgStartRename(row) {
    const tab = row.querySelector('.playground-thread-tab');
    const titleEl = tab && tab.querySelector('.thread-tab-title');
    if (!titleEl || row.querySelector('.pg-thread-rename')) return;
    const original = titleEl.textContent;
    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'pg-thread-rename';
    input.value = original;
    input.maxLength = 80;
    input.setAttribute('aria-label', 'Conversation name');
    // The field sits beside the tab, not in it: a button cannot hold an input.
    tab.hidden = true;
    row.classList.add('is-renaming');
    tab.after(input);
    input.focus();
    input.select();
    let done = false;
    const finish = async function(save) {
        if (done) return;
        done = true;
        const title = input.value.trim();
        input.remove();
        tab.hidden = false;
        row.classList.remove('is-renaming');
        if (!save) tab.focus();
        if (!save || title === original) return;
        titleEl.textContent = title || original;
        try {
            const response = await fetch(pgThreadUrl(row.dataset.memoryId), {
                method: 'POST', headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({title: title}),
            });
            const body = await response.json().catch(function() { return {}; });
            if (!response.ok || body.ok === false) throw new Error(body.detail || `HTTP ${response.status}`);
            titleEl.textContent = body.title || original;
        } catch (error) {
            titleEl.textContent = original;
            pgThreadNotice(row, `Could not rename: ${error.message}`);
        }
    };
    input.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') { event.preventDefault(); finish(true); }
        else if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); finish(false); }
    });
    input.addEventListener('blur', function() { finish(true); });
}

function pgThreadNotice(row, message) {
    const notice = pgEl('p', 'pg-thread-confirm', message);
    notice.setAttribute('role', 'status');
    row.after(notice);
    setTimeout(function() { notice.remove(); }, 4000);
}

function pgConfirmDelete(row) {
    if (row.nextElementSibling && row.nextElementSibling.classList.contains('pg-thread-confirm')) return;
    const memoryId = row.dataset.memoryId;
    if (isStreaming && memoryId === pgActiveMemoryId()) {
        pgThreadNotice(row, 'Stop the reply before deleting this conversation.');
        return;
    }
    const title = (row.querySelector('.thread-tab-title') || {}).textContent || 'this conversation';
    const confirm = document.createElement('div');
    confirm.className = 'pg-thread-confirm';
    confirm.setAttribute('role', 'group');
    confirm.setAttribute('aria-label', 'Confirm delete');
    const text = document.createElement('span');
    text.textContent = `Delete “${title}” and its messages?`;
    const yes = pgEl('button', 'btn btn-sm btn-danger', 'Delete');
    yes.type = 'button';
    const no = pgEl('button', 'btn btn-sm', 'Cancel');
    no.type = 'button';
    confirm.append(text, yes, no);
    row.after(confirm);
    no.addEventListener('click', function() { confirm.remove(); });
    confirm.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') { event.stopPropagation(); confirm.remove(); }
    });
    yes.addEventListener('click', async function() {
        yes.disabled = no.disabled = true;
        yes.textContent = 'Deleting…';
        try {
            const response = await fetch(pgThreadUrl(memoryId), {method: 'DELETE'});
            const body = await response.json().catch(function() { return {}; });
            if (!response.ok || body.ok === false) throw new Error(body.detail || `HTTP ${response.status}`);
            const wasActive = memoryId === pgActiveMemoryId();
            const next = row.nextElementSibling === confirm ? confirm.nextElementSibling : row.nextElementSibling;
            const previous = row.previousElementSibling;
            confirm.remove();
            row.remove();
            if (wasActive) {
                const fallback = [next, previous].find(function(el) { return el && el.classList.contains('pg-thread-row'); });
                if (fallback) useThreadMemoryId(fallback.dataset.memoryId);
                else startNewThread();
            }
        } catch (error) {
            text.textContent = `Could not delete: ${error.message}`;
            yes.disabled = no.disabled = false;
            yes.textContent = 'Retry';
        }
    });
    yes.focus();
}

document.addEventListener('DOMContentLoaded', function() {
    const list = document.getElementById('playground-thread-tabs');
    if (!list) return;
    list.addEventListener('click', function(event) {
        const action = event.target.closest('[data-thread-action]');
        if (!action) return;
        const row = action.closest('.pg-thread-row');
        if (!row) return;
        event.stopPropagation();
        if (action.dataset.threadAction === 'rename') pgStartRename(row);
        else pgConfirmDelete(row);
    });
});

function pgAgentName() {
    const app = document.getElementById('pg-app');
    return (app && app.dataset.agentName) || 'the agent';
}

function renderThreadEmptyState(memoryId) {
    const container = document.getElementById('playground-messages');
    if (!container) return;
    const starters = [
        'What do you remember about me?',
        'Which tools can you use?',
        'Summarize our previous conversations.',
    ];
    container.innerHTML = `
        <div class="pg-empty">
            <h2 class="pg-empty-title">How can ${escapeHtml(pgAgentName())} help?</h2>
            <p class="pg-empty-hint">Messages stream live. The inspector shows what reaches the model: context use, memory and prompt-cache reuse.</p>
            <div class="pg-starters">
                ${starters.map(function(text) {
                    return `<button type="button" class="pg-starter" data-starter="${escapeHtml(text)}">${escapeHtml(text)}</button>`;
                }).join('')}
            </div>
        </div>
    `;
    container.querySelectorAll('[data-starter]').forEach(function(button) {
        button.addEventListener('click', function() { pgUseSuggestion(button.dataset.starter); });
    });
}

// One message shape for history, new messages and streams.
function pgMessageElement(role, bodyHtml, rawText) {
    const div = document.createElement('div');
    div.className = `pg-message pg-message--${role}`;
    if (role === 'user') {
        div.innerHTML = `<div class="pg-message-body">${bodyHtml}</div>`;
    } else {
        const label = role === 'assistant' ? pgAgentName() : role.charAt(0).toUpperCase() + role.slice(1);
        const initial = escapeHtml((label.trim()[0] || 'A').toUpperCase());
        div.innerHTML = `
            <div class="pg-message-head"><span class="pg-agent-mark" aria-hidden="true">${initial}</span><span class="pg-message-role">${escapeHtml(label)}</span></div>
            <div class="pg-message-body">${bodyHtml}</div>
            <div class="pg-message-actions"><button type="button" class="pg-copy" title="Copy message">Copy</button></div>
        `;
        pgBindCopy(div, rawText);
    }
    return div;
}

function pgBindCopy(messageEl, rawText) {
    const button = messageEl.querySelector('.pg-copy');
    if (!button) return;
    messageEl.dataset.raw = rawText || '';
    button.addEventListener('click', async function() {
        try {
            await navigator.clipboard.writeText(messageEl.dataset.raw || '');
            button.textContent = 'Copied';
            setTimeout(function() { button.textContent = 'Copy'; }, 1200);
        } catch (err) {
            button.textContent = 'Copy failed';
        }
    });
}

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;
    }

    // A turn's activity is recorded just before its question; show it
    // between the question and the answer.
    messages = messages.slice();
    for (let i = 0; i < messages.length - 1; i++) {
        const current = messages[i];
        const next = messages[i + 1];
        if (current && current.message_type === 'trace_bundle' && next && String(next.role || '').toLowerCase() === 'user') {
            messages[i] = next;
            messages[i + 1] = current;
            i++;
        }
    }

    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) : '';
                const outcomeMeta = traceOutcomeMeta(event);
                const outcomeBadge = outcomeMeta
                    ? `<span class="pg-trace-outcome pg-trace-outcome--${outcomeMeta.status}">${escapeHtml(outcomeMeta.label)}</span>`
                    : '';
                return `
                    <div class="pg-trace-item pg-trace-item--${traceKindClass}${outcomeMeta ? ` pg-trace-item--outcome-${outcomeMeta.status}` : ''}">
                        <div class="pg-trace-title">${escapeHtml(title)}${outcomeBadge}</div>
                        <div class="pg-trace-content">${escapeHtml(formatTraceContent(content))}</div>
                    </div>
                `;
            }).join('');

            traceMessage.innerHTML = `
                <details class="pg-activity">
                    <summary>${pgActivitySummary(msg.trace_events)}</summary>
                    <div class="pg-trace-timeline">${traceRows}</div>
                </details>
            `;
            container.appendChild(traceMessage);
            return;
        }

        const role = ((msg && msg.role) ? String(msg.role) : 'system').toLowerCase();
        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' : '';
        container.appendChild(pgMessageElement(role, `<div class="pg-message-text${mdClass}">${renderedContent}</div>`, content));
    });
    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 formatCacheCount(value) {
    return Number(value || 0).toLocaleString();
}

// Provider prompt-cache reuse for this agent, from recorded model-result traces.
async function loadAgentPromptCache() {
    const note = document.getElementById('pg-cache-agent-note');
    if (!note) return;
    const readEl = document.getElementById('pg-cache-read');
    const hitEl = document.getElementById('pg-cache-hit');
    try {
        const res = await fetch(
            `/traces/usage.json?agent_id=${encodeURIComponent(AGENT_ID)}&max_events=5000`,
            { cache: 'no-store' },
        );
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const cache = (await res.json()).prompt_cache || {};
        const measured = (cache.hit || 0) + (cache.write || 0) + (cache.no_reuse || 0);
        readEl.textContent = cache.read_percent == null ? 'Unknown' : `${cache.read_percent.toFixed(1)}%`;
        hitEl.textContent = measured ? `${((100 * cache.hit) / measured).toFixed(1)}%` : 'Unknown';
        note.textContent = measured
            ? `${cache.hit} of ${measured} recorded calls read from cache · `
                + `${formatCacheCount(cache.cached_tokens)} cached input tokens · `
                + `${formatCacheCount(cache.cache_write_tokens)} written`
                + (cache.attention && cache.warnings && cache.warnings.length
                    ? ` · ${cache.warnings[0].message}${cache.warnings[0].count > 1 ? ` (${cache.warnings[0].count}×)` : ''}`
                    : (cache.attention ? ' · needs attention, see details' : ''))
            : 'No model calls with reported cache usage yet.';
    } catch (err) {
        readEl.textContent = hitEl.textContent = '—';
        note.textContent = 'Usage analytics are unavailable.';
    }
}

// Plain-language reasons for the safe failure codes the stream reports.
const PG_TOOL_REASONS = {
    invalid_tool_invocation: 'not callable here: undisclosed, unregistered in this process, or bad arguments',
    tool_budget_exhausted: 'per-turn tool budget used up',
    duplicate_tool_call: 'same call already succeeded this turn',
    tool_not_disclosed: 'not shown to the model yet; shown now so it can retry',
    unknown_tool: 'no tool has that name',
    tool_retry_limit: 'retry limit reached',
    approval_required: 'waiting for approval',
    provider_unavailable: 'tool provider unavailable',
};

// Tool calls stream as short steps inside the reply, like chat assistants show.
function pgLiveActivity(messageEl, event) {
    const list = messageEl && messageEl.querySelector('.pg-live-activity');
    if (!list || !event.tool_name) return;
    const key = event.span_id || event.tool_name;
    let item = Array.from(list.children).find(function(li) { return li.dataset.key === key; });
    if (!item) {
        item = document.createElement('li');
        item.dataset.key = key;
        list.appendChild(item);
    }
    const done = event.type === 'tool.completed';
    // A call paused for approval has not failed; the approval card follows.
    const waiting = done && String(event.status) === 'approval_required';
    const failed = done && !waiting && event.status && !['success', 'completed', 'ok'].includes(String(event.status));
    item.className = done ? (failed ? 'is-failed' : waiting ? 'is-running' : 'is-done') : 'is-running';
    item.textContent = (done ? (failed ? 'Failed ' : waiting ? 'Waiting for approval: ' : 'Used ') : 'Using ') + event.tool_name;
    if (failed && event.reason_code) {
        const reason = document.createElement('span');
        reason.className = 'pg-live-reason';
        reason.textContent = PG_TOOL_REASONS[event.reason_code] || String(event.reason_code).replace(/_/g, ' ');
        item.appendChild(reason);
    }
    list.hidden = false;
}

// Tokens and prompt-cache reuse for the turn, shown under the reply.
function pgTurnFootnote(messageEl, usage, model) {
    if (!messageEl || !usage || !usage.calls) return;
    const parts = [
        `${model ? model + ' · ' : ''}${usage.calls} model call${usage.calls === 1 ? '' : 's'}`,
        `${formatCacheCount(usage.input_tokens)} input · ${formatCacheCount(usage.output_tokens)} output tokens`,
    ];
    if (usage.read_percent != null) parts.push(`${usage.read_percent.toFixed(1)}% from prompt cache`);
    if (usage.cache_write_tokens) parts.push(`${formatCacheCount(usage.cache_write_tokens)} cached for next time`);
    let note = messageEl.querySelector('.pg-turn-meta');
    if (!note) {
        note = document.createElement('div');
        note.className = 'pg-turn-meta';
        const actions = messageEl.querySelector('.pg-message-actions');
        (actions || messageEl).prepend(note);
    }
    note.textContent = parts.join(' · ');
}

// Per-turn summary from the stream's terminal run.done event.
function renderLastTurnCache(usage) {
    const el = document.getElementById('pg-cache-last');
    if (!el || !usage || !usage.calls) return;
    const read = usage.read_percent == null ? 'unknown' : `${usage.read_percent.toFixed(1)}%`;
    const chip = document.getElementById('pg-composer-cache');
    if (chip && usage.read_percent != null) {
        chip.textContent = `${usage.read_percent.toFixed(0)}% cached`;
        chip.title = 'Share of last turn input read from the provider prompt cache';
        chip.hidden = false;
    }
    el.textContent = `Last turn: ${usage.calls} model call${usage.calls === 1 ? '' : 's'} · `
        + `${read} of ${formatCacheCount(usage.measured_input_tokens)} input tokens read from cache · `
        + `${usage.cache_hit_calls}/${usage.cache_reported_calls} calls hit · `
        + `${formatCacheCount(usage.cache_write_tokens)} written`;
    el.hidden = false;
}

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 meter = document.getElementById('pg-composer-meter');
    const meterLabel = document.getElementById('pg-composer-meter-label');
    if (meter && meterLabel) {
        const used = Math.max(0, Math.min(100, Number(stats.percentage_used) || 0));
        meter.style.setProperty('--pg-used', used + '%');
        meter.classList.toggle('is-high', used >= 70);
        meterLabel.textContent = `${Math.round(used)}% context`;
    }

    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 sentOf = Number(stats.thread_message_count) || 0;

    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');
    if (tokenSummary) tokenSummary.textContent = `${formatCacheCount(totalTokens)} / ${formatCacheCount(contextWindowTokens)} tokens`;
    if (tokenBarFill) tokenBarFill.style.width = `${percentageUsed}%`;
    if (tokenPercentage) tokenPercentage.textContent = `${percentageUsed.toFixed(2)}% used`;
    if (tokenMessages) tokenMessages.textContent = `${messageCount} of ${sentOf} message${sentOf === 1 ? '' : 's'} sent`;
    const setComp = function(id, value) {
        const el = document.getElementById(id);
        if (el) el.textContent = `${formatCacheCount(value)} tokens`;
    };
    setComp('token-comp-system', composition.system_prompt);
    setComp('token-comp-tools', composition.tools);
    setComp('token-comp-memory', composition.memory);
    setComp('token-comp-history', composition.history);
    const hint = document.getElementById('auto-compact-hint');
    if (hint) {
        hint.dataset.projected = String(Number(stats.projected_percentage) || 0);
        hint.dataset.fixed = String(Number(stats.fixed_percentage) || 0);
    }
    const select = document.getElementById('auto-compact-at');
    if (select && stats.compaction_available !== undefined) select.dataset.available = stats.compaction_available ? 'true' : 'false';
    pgRenderCompactHint();
    const modelNote = document.getElementById('token-model-note');
    if (modelNote) {
        const modelMax = Number(stats.model_context_tokens) || 0;
        modelNote.hidden = !(modelMax > contextWindowTokens);
        const nameEl = document.getElementById('token-model-name');
        const maxEl = document.getElementById('token-model-max');
        if (nameEl) nameEl.textContent = stats.model_name || '';
        if (maxEl) maxEl.textContent = modelMax.toLocaleString();
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.playground-config-form');
    const dirty = document.getElementById('cfg-dirty');
    if (!form || !dirty) return;
    const mark = function(event) {
        // Catalog widgets save on their own; their search boxes are not edits.
        if (event.target.closest('.catalog')) return;
        dirty.hidden = false;
    };
    form.addEventListener('input', mark);
    form.addEventListener('change', mark);
    form.addEventListener('submit', function() { dirty.textContent = 'Saving…'; });
});

function pgEditContextWindow() {
    openInspectorTab('settings');
    const field = document.getElementById('cfg-context-window');
    if (field && !field.disabled) {
        field.scrollIntoView({block: 'center'});
        field.focus();
    }
}

// Auto-compaction threshold: saved on the agent; turning it on also turns on
// summary memory, which compaction writes to.
function pgRenderCompactHint() {
    const select = document.getElementById('auto-compact-at');
    const hint = document.getElementById('auto-compact-hint');
    if (!select || !hint) return;
    const value = Number(select.value) || 0;
    const projected = Number(hint.dataset.projected) || 0;
    if (!value) {
        hint.textContent = 'Off: at 80% the oldest messages are dropped without a summary.';
    } else if (select.dataset.available !== 'true') {
        hint.textContent = `Summarizes older messages at ${value}%. Summary memory will be turned on for this agent.`;
    } else {
        hint.textContent = `Summarizes older messages when the next request would pass ${value}%, keeping the newest ones word for word. With the full history it would be ${projected.toFixed(0)}% now.`;
    }
    const fixed = Number(hint.dataset.fixed) || 0;
    if (value && fixed >= value) {
        hint.textContent += ` The prompt without any history already uses ${fixed.toFixed(0)}%, so this threshold compacts in batches every few turns; ${Math.min(80, Math.ceil((fixed + 10) / 10) * 10)}% or more suits this agent.`;
    }
}

function pgShowMeasured(promptTokens) {
    const el = document.getElementById('token-measured');
    const summary = document.getElementById('token-summary');
    if (!el || !promptTokens) return;
    const windowText = summary ? summary.textContent.split('/')[1] : '';
    const windowTokens = Number(String(windowText || '').replace(/[^0-9]/g, '')) || 0;
    const share = windowTokens ? ` (${Math.round(promptTokens * 100 / windowTokens)}% of the window)` : '';
    el.textContent = `Last request: ${formatCacheCount(promptTokens)} tokens, measured${share}.`;
    el.hidden = false;
}

document.addEventListener('DOMContentLoaded', function() {
    const select = document.getElementById('auto-compact-at');
    if (!select) return;
    pgRenderCompactHint();
    let previous = select.value;
    select.addEventListener('change', async function() {
        const hint = document.getElementById('auto-compact-hint');
        select.disabled = true;
        try {
            const response = await fetch(`/api/agents/${encodeURIComponent(AGENT_ID)}/context-policy`, {
                method: 'POST', headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({compact_at: Number(select.value) || 0}),
            });
            const body = await response.json().catch(function() { return {}; });
            if (!response.ok || body.ok === false) throw new Error((body && body.detail) || 'Could not save');
            previous = select.value;
            if (body.summary_memory) select.dataset.available = 'true';
            pgRenderCompactHint();
        } catch (error) {
            select.value = previous;
            if (hint) hint.textContent = `Not saved: ${error.message}`;
        } finally {
            select.disabled = false;
        }
    });
});

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');
        const activityText = (lastActivity || '').trim();
        if (metaEl) {
            // Same "N messages · time" shape the server renders for every row.
            const previous = (metaEl.textContent.split(' · ')[1] || '').trim();
            const when = activityText && activityText !== '—' ? activityText.slice(0, 16) : previous;
            metaEl.textContent = `${count} message${count === 1 ? '' : 's'}${when ? ` · ${when}` : ''}`;
        }
        const titleParts = [normalized, `${count} messages`];
        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);
    if (window.pgHarnessAccess) window.pgHarnessAccess.render();
    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 useMarkdown = (role === 'assistant' || role === 'system');
    const renderedContent = useMarkdown ? renderMarkdown(content) : escapeHtml(content);
    const mdClass = useMarkdown ? ' md-rendered' : '';
    const div = pgMessageElement(role, `<div class="pg-message-text${mdClass}">${renderedContent}</div>`, content);
    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 = pgMessageElement(
        'assistant',
        `<ol class="pg-live-activity" hidden></ol><div class="pg-trace-timeline"></div><div class="pg-message-text"><span class="streaming-cursor"></span></div>`,
        ''
    );
    div.classList.add('is-streaming');
    container.appendChild(div);
    scrollToBottom();
    return {
        container: div,
        textElement: div.querySelector('.pg-message-text'),
        traceTimeline: div.querySelector('.pg-trace-timeline'),
    };
}

// Capability card: shown when the agent asks for a capability it lacks
// (capability.requested) or the request clearly needs one
// (capability.suggested). It reads live state each time it renders, so it
// only offers what is actually missing and reflects each change at once.
const PG_CAPABILITY_TIMEOUT_MS = 20000;

async function pgCapabilityFetch(url, options) {
    const response = await fetch(url, options);
    let body = {};
    try { body = await response.json(); } catch (_) { /* not JSON */ }
    if (!response.ok || body.ok === false) {
        const detail = body.detail;
        throw new Error((detail && (detail.message || detail.error)) || (typeof detail === 'string' ? detail : '') || body.error || `Request failed (${response.status})`);
    }
    return body;
}

function renderCapabilityCard(messageContainer, ids, options) {
    const body = messageContainer && messageContainer.querySelector('.pg-message-body');
    if (!body || !ids || !ids.length) return;
    const shown = new Set((messageContainer.dataset.capabilities || '').split(',').filter(Boolean));
    const fresh = ids.filter(function(id) { return !shown.has(id); });
    if (!fresh.length) return;
    fresh.forEach(function(id) { shown.add(id); });
    messageContainer.dataset.capabilities = Array.from(shown).join(',');

    const card = document.createElement('div');
    card.className = 'capability-card' + (options && options.suggested ? ' is-suggested' : '');
    card.setAttribute('role', 'region');
    card.setAttribute('aria-label', 'Enable a capability');
    body.appendChild(card);
    const query = (options && options.query) || '';
    pgRenderCapabilities(card, fresh, options || {}, query);
}

async function pgRenderCapabilities(card, ids, options, query) {
    let rows;
    try {
        const data = await pgCapabilityFetch(`/api/agents/${encodeURIComponent(AGENT_ID)}/capabilities?ids=${encodeURIComponent(ids.join(','))}`);
        rows = data.capabilities || [];
    } catch (error) {
        card.textContent = `Could not load the options to enable this: ${error.message}`;
        return;
    }
    card.textContent = '';
    rows.forEach(function(row) { card.appendChild(pgCapabilityRow(card, row, ids, options, query)); });
}

function pgEl(tag, className, text) {
    const el = document.createElement(tag);
    if (className) el.className = className;
    if (text != null) el.textContent = text;
    return el;
}

function pgCapabilityRow(card, row, ids, options, query) {
    const section = pgEl('div', 'capability-row');
    const rerender = function() { pgRenderCapabilities(card, ids, options, query); };
    if (row.status === 'enabled') {
        section.appendChild(pgEl('p', 'capability-title is-done', `${row.title} is on${row.via ? ` (${row.via})` : ''}.`));
        if (query) {
            const retry = pgEl('button', 'btn btn-primary btn-sm', 'Ask again');
            retry.type = 'button';
            retry.addEventListener('click', function() {
                const input = document.getElementById('pg-query');
                if (!input || isStreaming) return;
                input.value = query;
                sendMessage();
            });
            section.appendChild(retry);
        }
        return section;
    }
    const heading = row.status === 'needs_sign_in'
        ? `${row.title} is connected (${row.via}) but not signed in.`
        : options.suggested
            ? `This looks like it needs ${row.title.toLowerCase()}, which isn't enabled for this agent.`
            : `${row.title} isn't enabled for this agent.`;
    section.appendChild(pgEl('p', 'capability-title', heading));
    const actions = pgEl('div', 'capability-actions');
    const status = pgEl('p', 'capability-status');
    status.setAttribute('role', 'status');
    (row.offers || []).forEach(function(offer) {
        actions.appendChild(pgCapabilityOffer(row, offer, status, rerender));
    });
    section.append(actions, status);
    return section;
}

function pgCapabilityOffer(row, offer, status, rerender) {
    const enable = async function(payload, button) {
        if (button) button.disabled = true;
        status.textContent = 'Enabling…';
        try {
            await pgCapabilityFetch(`/api/agents/${encodeURIComponent(AGENT_ID)}/capabilities/${encodeURIComponent(row.id)}/enable`, {
                method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload),
            });
            rerender();
        } catch (error) {
            status.textContent = error.message;
            if (button) button.disabled = false;
        }
    };
    const link = function(label, href) {
        const a = pgEl('a', 'btn btn-sm', label);
        a.href = href;
        return a;
    };
    const agent = encodeURIComponent(AGENT_ID);
    if (offer.kind === 'internet_provider') {
        if (offer.key_set) {
            const button = pgEl('button', 'btn btn-primary btn-sm', `Use ${offer.title}`);
            button.type = 'button';
            button.addEventListener('click', function() { enable({kind: offer.kind, provider: offer.provider}, button); });
            return button;
        }
        const group = pgEl('div', 'capability-key');
        const input = document.createElement('input');
        input.type = 'password';
        input.autocomplete = 'new-password';
        input.placeholder = `${offer.title} API key`;
        input.setAttribute('aria-label', `${offer.title} API key`);
        const button = pgEl('button', 'btn btn-sm', `Use ${offer.title}`);
        button.type = 'button';
        button.addEventListener('click', function() {
            const key = input.value.trim();
            if (!key) { status.textContent = `Paste a ${offer.title} API key first.`; input.focus(); return; }
            enable({kind: offer.kind, provider: offer.provider, api_key: key}, button);
        });
        input.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') { event.preventDefault(); button.click(); }
        });
        const get = pgEl('a', 'capability-link', 'Get a key');
        get.href = offer.signup_url; get.target = '_blank'; get.rel = 'noopener noreferrer';
        group.append(input, button, get);
        return group;
    }
    if (offer.kind === 'mcp_preset') {
        const button = pgEl('button', 'btn btn-primary btn-sm', offer.title);
        button.type = 'button';
        button.title = offer.needs_client ? 'Needs a Google OAuth client, added on MCP connections before sign-in' : '';
        button.addEventListener('click', function() { enable({kind: offer.kind}, button); });
        return button;
    }
    if (offer.kind === 'mcp_sign_in') {
        if (offer.needs_client) {
            return link('Add OAuth client', `/mcp?agent_id=${agent}`);
        }
        const button = pgEl('button', 'btn btn-primary btn-sm', offer.title);
        button.type = 'button';
        button.addEventListener('click', async function() {
            button.disabled = true;
            status.textContent = 'Opening sign-in…';
            try {
                const body = await pgCapabilityFetch(`/api/mcp/agents/${agent}/servers/${encodeURIComponent(offer.server)}/authorize`, {
                    method: 'POST', headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({return_to: window.location.pathname}),
                });
                if (body.authorization_url) { window.location.assign(body.authorization_url); return; }
                status.textContent = body.already_authenticated ? 'Already signed in.' : (body.message || 'Sign-in did not start.');
                rerender();
            } catch (error) {
                status.textContent = error.message;
                button.disabled = false;
            }
        });
        return button;
    }
    if (offer.kind === 'mcp_search') {
        return link(offer.title, `/mcp?agent_id=${agent}&q=${encodeURIComponent(offer.query || '')}`);
    }
    if (offer.kind === 'setting') {
        return link(offer.title, `/agents/${agent}/edit`);
    }
    return pgEl('span', '', '');
}

// Coming back from sign-in started on a capability card.
document.addEventListener('DOMContentLoaded', function() {
    const params = new URLSearchParams(window.location.search);
    const outcome = params.get('oauth');
    const container = document.getElementById('playground-messages');
    if (!outcome || !container) return;
    const server = params.get('server') || 'the server';
    const notice = pgEl('div', 'capability-card', outcome === 'success'
        ? `Signed in to ${server}. Ask your question again.`
        : outcome === 'pending'
            ? `Sign-in to ${server} is still finishing. Try your question in a moment.`
            : `Sign-in to ${server} failed. Check its OAuth client on MCP connections.`);
    notice.setAttribute('role', 'status');
    container.appendChild(notice);
    params.delete('oauth'); params.delete('server');
    const rest = params.toString();
    window.history.replaceState(null, '', window.location.pathname + (rest ? `?${rest}` : ''));
});

// Plain words for the run stages the stream reports.
const PG_STAGE_LABELS = {
    preparing_agent: 'Preparing the agent…',
    agent_ready: 'Agent ready',
    context_ready: 'Gathering context…',
    tool_phase: 'Working out what to do…',
    provider_request: 'Thinking…',
    provider_first_delta: 'Thinking…',
    answer_generation: 'Writing the answer…',
    compacting_context: 'Compacting older messages…',
    mcp_tool_progress: 'Waiting for a tool…',
    provider_retry: 'Asking the model again…',
};

async function pgLoadApprovalArguments(card, proposalId) {
    const pre = card.querySelector('.pg-approval-args pre');
    const hash = card.querySelector('.pg-approval-args code');
    try {
        const response = await fetch(`/api/agents/${encodeURIComponent(AGENT_ID)}/approvals?status=pending&limit=100`);
        const body = await response.json();
        const match = (body.approvals || []).find(function(item) { return item.proposal_id === proposalId; });
        if (!match) throw new Error('not found');
        if (pre) pre.textContent = JSON.stringify(match.arguments || {}, null, 2);
        if (hash && match.argument_hash) hash.textContent = match.argument_hash;
    } catch (error) {
        if (pre) pre.textContent = 'Could not load the arguments. Check them under Approvals before approving.';
    }
}

function renderApprovalCard(messageContainer, payload) {
    // Accepts the stream event ({proposal: ...}) or the proposal itself.
    const proposal = payload && (payload.proposal || (payload.proposal_id ? payload : null));
    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 class="pg-approval-args" open>
            <summary>Exact arguments and digest</summary>
            <pre>${escapeHtml(proposal.arguments ? argsText : 'Loading…')}</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 || '');
    // The stream leaves arguments out of the event; show exactly what will be
    // sent before anyone approves it.
    if (!proposal.arguments && proposalId) void pgLoadApprovalArguments(card, proposalId);

    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();
    });
}

// Model output is untrusted: raw HTML in it shows as text (safe-markdown.js).
function renderMarkdown(text) {
    if (!window.MemorizzMarkdown || !text || !text.trim()) {
        return escapeHtml(text || '');
    }
    return window.MemorizzMarkdown.render(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>';
    }
}

// A stored tool result failed when its payload says ok: false or names an error code.
function pgToolResultFailed(traceEvent) {
    try {
        const payload = JSON.parse(String(traceEvent.content || ''));
        return Boolean(payload && typeof payload === 'object' && (payload.ok === false || payload.error_code));
    } catch (_) {
        return false;
    }
}

// Summarise a turn by what a person cares about: tools used, failures, model calls.
function pgActivitySummary(events) {
    const tools = [];
    let failed = 0;
    let modelCalls = 0;
    events.forEach(function(event) {
        const kind = String((event && event.trace_kind) || '');
        if (kind === 'model_call') modelCalls += 1;
        if (kind !== 'tool_result') return;
        const name = String(event.title || '').replace(/^Tool Result:\s*/, '') || 'tool';
        if (!tools.includes(name)) tools.push(name);
        if (pgToolResultFailed(event)) failed += 1;
    });
    const parts = [];
    if (tools.length) {
        const shown = tools.slice(0, 3).map(escapeHtml).join(', ');
        parts.push(`Used ${shown}${tools.length > 3 ? ` and ${tools.length - 3} more` : ''}`);
    } else {
        parts.push('Agent activity');
    }
    if (failed) parts.push(`<span class="pg-activity-failed">${failed} failed</span>`);
    if (modelCalls) parts.push(`${modelCalls} model call${modelCalls === 1 ? '' : 's'}`);
    return parts.join(' · ');
}

function traceOutcomeMeta(traceEvent) {
    if (!traceEvent || typeof traceEvent !== 'object') return null;
    if (!traceEvent.outcome && traceEvent.trace_kind === 'tool_result' && pgToolResultFailed(traceEvent)) {
        return { status: 'error', label: 'Failed' };
    }
    const status = String(traceEvent.outcome || '').toLowerCase();
    const labels = {
        success: 'Completed',
        empty: 'Completed · no results',
        degraded: 'Completed with limitations',
        fallback: 'Completed via fallback',
        provider_error: 'Provider error',
        error: 'Failed',
    };
    return labels[status] ? { status, label: labels[status] } : null;
}

// Trace payloads are often JSON objects; show them as readable key: value lines.
function formatTraceContent(content) {
    const text = String(content || '').trim();
    if (!text.startsWith('{')) return text;
    try {
        const value = JSON.parse(text);
        if (!value || typeof value !== 'object' || Array.isArray(value)) return text;
        return Object.entries(value).map(function(entry) {
            const item = entry[1];
            const rendered = item !== null && typeof item === 'object' ? JSON.stringify(item) : String(item);
            return entry[0].replace(/_/g, ' ') + ': ' + rendered;
        }).join('\n');
    } catch (err) {
        return text;
    }
}

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;
        btn.style.display = 'none';
        text.textContent = 'Sending';
        spinner.style.display = 'none';
        stopBtn.style.display = 'inline-flex';
        textarea.disabled = true;
    } else {
        btn.disabled = false;
        btn.style.display = '';
        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);
    document.addEventListener('DOMContentLoaded', loadAgentPromptCache);
} else {
    initKbDragAndDrop();
    loadAgentPromptCache();
}

// --- 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">${escapeHtml(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.setAttribute('role', 'status');
        node.innerHTML = `
            <div class="pg-message-body">
                <span class="pg-kb-event-label">Knowledge base</span>
                <span class="pg-message-text pg-kb-event-text"></span>
            </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 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 = escapeHtml(item.namespace || 'knowledge');
        const ts = item.timestamp
            ? `<span class="context-summary-time">${escapeHtml(String(item.timestamp))}</span>`
            : '';
        const preview = item.content_preview
            ? `<div class="context-summary-content">${escapeHtml(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 ${escapeHtml(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);
    }

    // A thread load still in flight (e.g. right after New chat) must not
    // redraw the chat over this turn; the load after the reply refreshes it.
    threadLoadSequence++;
    appendMessage('user', query);
    queryEl.value = '';
    pgAutosize();
    setLoading(true);

    const streamMessage = createStreamingMessage();
    if (!streamMessage || !streamMessage.textElement) {
        setLoading(false);
        return;
    }
    const streamTarget = streamMessage.textElement;
    let fullText = '';
    let pendingPaint = null;
    const statusElement = document.createElement('div');
    statusElement.className = 'pg-stream-status';
    statusElement.setAttribute('role', 'status');
    streamMessage.container.appendChild(statusElement);
    const showStatus = text => { statusElement.textContent = text; };
    function paint(markdown = false) {
        if (pendingPaint !== null) cancelAnimationFrame(pendingPaint);
        pendingPaint = null;
        const container = document.getElementById('playground-messages');
        const atBottom = !container || container.scrollHeight - container.scrollTop - container.clientHeight < 80;
        if (markdown && fullText) {
            streamTarget.innerHTML = renderMarkdown(fullText);
            streamTarget.classList.add('md-rendered');
        } else {
            streamTarget.textContent = fullText;
        }
        if (atBottom) scrollToBottom();
    }
    function schedulePaint() {
        if (pendingPaint === null) pendingPaint = requestAnimationFrame(() => paint());
    }

    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());
        }
        if (window.pgHarnessAccess) {
            const access = await window.pgHarnessAccess.forSend(memoryEl.value.trim());
            if (access.grant) formData.append('harness_grant', access.grant);
            if (access.workspace) formData.append('harness_workspace', access.workspace);
        }

        // 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}`);
        }

        // One ordered SDK contract; never append tool/private candidate text.
        let runId = null, sequence = 0, lastPromptTokens = 0, answeringModel = null;
        await readSseStream(response, (payload) => {
            const event = JSON.parse(payload);
            if (event.version !== 1 || (runId && event.run_id !== runId) || event.seq !== sequence + 1) {
                throw new Error('Invalid stream sequence');
            }
            runId = event.run_id; sequence = event.seq;
            if (event.memory_id) {
                if (window.pgHarnessAccess) window.pgHarnessAccess.adopt(memoryEl.value.trim(), event.memory_id);
                memoryEl.value = event.memory_id;
            }
            if (event.type === 'status' && event.scope === 'harness_access' && window.pgHarnessAccess) {
                window.pgHarnessAccess.warn(event.message, event.grant_expired);
            }
            if (event.capabilities && event.capabilities.model) answeringModel = event.capabilities.model;
            if (event.type === 'answer.delta') {
                fullText += event.delta;
                schedulePaint();
            } else if (event.type === 'answer.done') {
                paint(true);
                showStatus('Answer ready — saving conversation…');
            } else if (event.type === 'usage') {
                lastPromptTokens = Math.max(lastPromptTokens, Number((event.usage || {}).prompt_tokens) || 0);
            } else if (event.type === 'context.compacted') {
                const note = pgEl('p', 'pg-compact-note', `Compacted ${event.messages} older message${event.messages === 1 ? '' : 's'} into a summary (${formatCacheCount(event.tokens_before)} → ${formatCacheCount(event.tokens_after)} tokens of history and prompt).`);
                const body = streamMessage.container.querySelector('.pg-message-body');
                if (body) body.prepend(note);
            } else if (event.type === 'run.done') {
                pgShowMeasured(lastPromptTokens);
                paint(true);
                renderLastTurnCache(event.usage);
                pgTurnFootnote(streamMessage.container, event.usage, answeringModel);
                const failedWrites = Object.values(event.persistence || {}).includes('failed');
                showStatus(event.status === 'completed'
                    ? (failedWrites ? 'Answer complete; a state write failed.' : '')
                    : (event.status === 'approval_required' ? 'Waiting for approval.' : 'Run ' + event.status + '. Partial answer retained.'));
            } else if (event.type === 'approval.required') {
                renderApprovalCard(streamMessage.container, event.proposal || event);
                showStatus('Execution paused for approval.');
            } else if (event.type === 'status') {
                showStatus(event.message || PG_STAGE_LABELS[event.stage] || String(event.stage || '').replaceAll('_', ' '));
            } else if (event.type === 'capability.requested') {
                renderCapabilityCard(streamMessage.container, [event.capability], {query: query});
            } else if (event.type === 'capability.suggested') {
                renderCapabilityCard(streamMessage.container, event.capabilities || [], {suggested: true, query: query});
            } else if (event.type === 'tool.started' || event.type === 'tool.completed') {
                showStatus((event.type === 'tool.started' ? 'Running ' : 'Finished ') + event.tool_name);
                pgLiveActivity(streamMessage.container, event);
            } else if (event.type === 'completion.check' && !event.accepted) {
                showStatus('Checking the answer; retrying.');
            }
        });

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

    } catch (err) {
        if (err.name === 'AbortError') {
            paint(true);
            showStatus('Stopped by user. Partial answer retained.');
        } else {
            paint(true);
            showStatus(`Stream interrupted: ${err.message}. Partial answer retained.`);
        }
    } finally {
        if (pendingPaint !== null) cancelAnimationFrame(pendingPaint);
        currentAbortController = null;
        streamMessage.container.classList.remove('is-streaming');
        if (!streamMessage.container.dataset.raw) streamMessage.container.dataset.raw = fullText;
        setLoading(false);
        const activeMemoryId = (memoryEl.value || '').trim();
        if (activeMemoryId) {
            await loadThreadMessages(activeMemoryId, { renderChat: false });
        }
        loadAgentPromptCache();
    }
}

// Harness delegates: the folder and access they may use in this conversation.
// A grant (web access, edits or a chosen folder) is created once and sent with
// each message; without one, each conversation gets its own fresh folder.
window.pgHarnessAccess = document.getElementById('pg-hx') ? (function() {
    const card = document.getElementById('pg-hx');
    const form = document.getElementById('pg-hx-form');
    const message = document.getElementById('pg-hx-message');
    const approver = document.getElementById('pg-hx-approver');
    const APPROVER_KEY = 'memorizz.harness.approver';
    const keyFor = (memoryId) => 'memorizz.pg.hx.' + AGENT_ID + '.' + (memoryId || 'new');
    const memoryId = () => (document.getElementById('pg-memory-id').value || '').trim();
    const read = (memory) => { try { return JSON.parse(sessionStorage.getItem(keyFor(memory)) || 'null'); } catch (_) { return null; } };
    const write = (memory, value) => { try { if (value) sessionStorage.setItem(keyFor(memory), JSON.stringify(value)); else sessionStorage.removeItem(keyFor(memory)); } catch (_) {} };
    const say = (text, bad) => { message.textContent = text || ''; message.classList.toggle('is-bad', !!bad); };
    const describe = (permissions) => {
        const parts = [permissions.network === 'full' ? 'web access' : 'no web', permissions.workspace_mode === 'direct' ? 'edits' : 'read only'];
        return parts.join(' · ');
    };
    const shortFolder = (path) => { const parts = String(path || '').split('/').filter(Boolean); return parts.length ? '…/' + parts.slice(-2).join('/') : 'fresh folder'; };
    async function request(url, options) {
        const response = await fetch(url, Object.assign({headers: {'Content-Type': 'application/json'}}, options || {}));
        const body = await response.json().catch(() => ({}));
        if (!response.ok) throw new Error(typeof body.detail === 'string' ? body.detail : 'Request failed (' + response.status + ')');
        return body;
    }
    function render() {
        const state = read(memoryId());
        const grant = state && state.grant;
        const active = document.getElementById('pg-hx-active');
        active.hidden = !grant;
        let summary = 'Fresh folder · no web';
        if (grant) {
            document.getElementById('pg-hx-active-folder').textContent = grant.workspace;
            document.getElementById('pg-hx-active-access').textContent = describe(grant.permissions || {});
            document.getElementById('pg-hx-active-approver').textContent = grant.approver_id || '—';
            document.getElementById('pg-hx-active-until').textContent = grant.expires_at ? new Date(grant.expires_at).toLocaleString() : '—';
            summary = shortFolder(grant.workspace) + ' · ' + describe(grant.permissions || {});
        } else if (state && state.workspace) {
            summary = shortFolder(state.workspace) + ' · no web';
        }
        document.getElementById('pg-hx-state').textContent = summary;
        const chip = document.getElementById('pg-hx-chip');
        if (chip) chip.textContent = 'Delegates · ' + summary;
    }
    async function check() {
        // A grant kept from earlier may have expired since.
        const memory = memoryId();
        const state = read(memory);
        if (!state || !state.grant) return;
        try {
            const body = await request('/api/agents/' + encodeURIComponent(AGENT_ID) + '/harness-access/' + encodeURIComponent(state.grant.grant_id));
            write(memory, Object.assign({}, state, {grant: body.grant}));
        } catch (_) {
            write(memory, Object.assign({}, state, {grant: null}));
            say('The access you allowed earlier has expired. Allow it again to use it.', true);
        }
        render();
    }
    form.addEventListener('submit', async function(event) {
        event.preventDefault();
        const network = document.getElementById('pg-hx-network').value;
        const edits = document.getElementById('pg-hx-write').checked;
        const name = approver.value.trim();
        if ((network === 'full' || edits) && !name) { say('Give your name to approve web access or edits.', true); approver.focus(); return; }
        const button = document.getElementById('pg-hx-allow');
        button.disabled = true;
        say('Allowing…');
        try {
            const body = await request('/api/agents/' + encodeURIComponent(AGENT_ID) + '/harness-access', {
                method: 'POST',
                body: JSON.stringify({workspace: document.getElementById('pg-hx-workspace').value.trim(), network: network, write: edits, approver_id: name}),
            });
            if (name) { try { localStorage.setItem(APPROVER_KEY, name); } catch (_) {} }
            const memory = memoryId();
            write(memory, Object.assign({}, read(memory) || {}, {grant: body.grant}));
            say('Allowed for this conversation. Harness delegates use it from your next message.');
            render();
        } catch (error) {
            say(error.message, true);
        } finally {
            button.disabled = false;
        }
    });
    document.getElementById('pg-hx-clear').addEventListener('click', function() {
        const memory = memoryId();
        write(memory, Object.assign({}, read(memory) || {}, {grant: null}));
        say('Stopped. Harness delegates go back to this conversation\u2019s own folder without web access.');
        render();
    });
    try { approver.value = localStorage.getItem(APPROVER_KEY) || ''; } catch (_) {}
    render();
    void check();
    return {
        render: render,
        // What to send with a message: the grant, else this conversation's folder.
        forSend: async function(memory) {
            const state = read(memory) || {};
            if (state.grant) return {grant: state.grant.grant_id, workspace: state.workspace || ''};
            if (!state.workspace) {
                try {
                    const body = await request('/api/agents/' + encodeURIComponent(AGENT_ID) + '/harness-workspace', {method: 'POST', body: '{}'});
                    state.workspace = body.workspace;
                    write(memory, state);
                    render();
                } catch (error) {
                    say('Could not make a folder for harness delegates: ' + error.message, true);
                }
            }
            return {grant: '', workspace: state.workspace || ''};
        },
        // A new conversation gets its memory ID with the first reply.
        adopt: function(before, after) {
            if (!after || before === after) return;
            const state = read(before);
            if (state && !read(after)) { write(after, state); write(before, null); }
        },
        warn: function(text, expired) {
            if (expired) {
                const memory = memoryId();
                write(memory, Object.assign({}, read(memory) || {}, {grant: null}));
                render();
            }
            say(text, true);
        },
    };
})() : null;

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

initPlaygroundLayout();
initThreadTabs();
initTokenTooltip();
(function() {
    const textarea = document.getElementById('pg-query');
    if (textarea) textarea.addEventListener('input', pgAutosize);
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape' && isStreaming) stopStreaming();
    });
    const meter = document.getElementById('pg-composer-meter');
    const initial = {{ (token_stats.percentage_used|default(0) if token_stats else 0)|tojson }};
    if (meter) meter.style.setProperty('--pg-used', Math.min(100, Number(initial) || 0) + '%');
})();

// 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 %}