{% extends "v3/base.html" %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Agents</h1>
    <div class="flex gap-2">
        <button class="btn btn-ghost btn-sm" onclick="openLibrary()" title="Agents archivés">Archives</button>
        <button class="btn btn-secondary" onclick="openCreateGroup()">+ Groupe</button>
        <button class="btn btn-primary" onclick="openCreate()">+ Créer</button>
    </div>
</div>

<div class="search-box">
    <input type="text" class="search-input" id="search" placeholder="Rechercher..." oninput="filterAgents()">
</div>

<div id="agents-container"></div>

<!-- Modal Create/Edit -->
<div class="modal-overlay" id="modal-agent">
    <div class="modal" style="max-width: 600px;">
        <div class="modal-header">
            <h2 class="modal-title" id="modal-title">Créer un agent</h2>
            <button class="modal-close" onclick="closeModal('modal-agent')" aria-label="Fermer">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="agent-id">

            <!-- Nom -->
            <div class="form-group">
                <label class="form-label" for="agent-name">Nom</label>
                <input type="text" class="form-input" id="agent-name">
            </div>

            <!-- Instructions -->
            <div class="form-group">
                <label class="form-label" for="agent-prompt">Instructions (prompt système)</label>
                <textarea class="form-textarea" id="agent-prompt" style="min-height: 120px;"></textarea>
                <div id="library-prompt-info" class="library-prompt-info" style="display:none;"></div>
            </div>

            <!-- Description -->
            <div class="form-group">
                <div style="display:flex; justify-content:space-between; align-items:center;">
                    <label class="form-label text-sm" for="agent-description" style="margin-bottom:0;">Description</label>
                    <button type="button" class="btn btn-ghost btn-sm" onclick="autoGenerateDescription()" id="btn-auto-desc">Générer</button>
                </div>
                <textarea class="form-textarea" id="agent-description" placeholder="Aide l'orchestrateur à router..." style="min-height: 50px;"></textarea>
            </div>

            <!-- Sortie -->
            <div class="form-group">
                <label class="form-label" for="agent-output-mode">Sortie</label>
                <select class="form-select" id="agent-output-mode" onchange="onOutputModeChange()">
                    <option value="capsule">Capsule Vicsia</option>
                    <option value="paste">Coller dans l'application</option>
                </select>
                <div id="tts-option" style="margin-top:0.4rem;">
                    <label class="checkbox-label">
                        <input type="checkbox" id="agent-tts-enabled">
                        Lecture vocale (TTS)
                    </label>
                </div>
            </div>

            <!-- Modele IA -->
            <div class="form-group" id="agent-tier-section">
                <label class="form-label" for="agent-llm-tier">Modèle IA</label>
                <select class="form-select" id="agent-llm-tier" onchange="onTierChange()">
                    <option value="fast">Rapide</option>
                    <option value="thinking" selected>IA Performante</option>
                </select>
                <p class="text-muted text-xs" id="tier-free-warning" style="display:none; margin-top:0.25rem; color:var(--warning);">
                    Le modèle le plus performant est disponible avec le plan Starter. En mode gratuit, vous bénéficiez d'un modèle intermédiaire.
                </p>
            </div>

            <!-- Options -->
            <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); display:flex; flex-direction:column; gap:0.5rem;">
                <label class="form-label text-sm" style="margin-bottom:-0.25rem;">Options</label>
                <label class="checkbox-label">
                    <input type="checkbox" id="agent-voice" checked>
                    Commande vocale
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="agent-web-search-enabled">
                    Recherche web
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" id="agent-memory-enabled" onchange="toggleMemoryOptions()">
                    Base de connaissance
                </label>
                <div id="memory-options" style="display:none; margin-left:1.5rem;">
                    <select class="form-select" id="memory-write-mode" style="font-size:0.8rem; padding:0.2rem 0.4rem; width:auto;"
                        onchange="toggleMemoryMaxWrites()">
                        <option value="none">Lecture seule</option>
                        <option value="ask">Écriture avec confirmation</option>
                        <option value="auto">Écriture sans confirmation</option>
                    </select>
                    <select class="form-select" id="memory-max-writes" style="display:none; font-size:0.8rem; padding:0.2rem 0.4rem; width:auto; margin-top:0.25rem;">
                        <option value="1">1 écriture par session</option>
                        <option value="2">2 écritures par session</option>
                        <option value="3">3 écritures par session</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-agent')">Annuler</button>
            <button class="btn btn-ghost btn-sm" id="btn-publish-agent" style="display:none; margin-right:auto;" onclick="publishToLibrary()">Publier</button>
            <button class="btn btn-primary" onclick="saveItem()">Enregistrer</button>
        </div>
    </div>
</div>

<!-- Modal Create/Edit Group -->
<div class="modal-overlay" id="modal-group">
    <div class="modal" style="max-width: 450px;">
        <div class="modal-header">
            <h2 class="modal-title" id="group-modal-title">Créer un groupe</h2>
            <button class="modal-close" onclick="closeModal('modal-group')" aria-label="Fermer">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="group-id">
            <div class="form-group">
                <label class="form-label" for="group-name">Nom</label>
                <input type="text" class="form-input" id="group-name" placeholder="Ex: Vocal, Messagerie, CRM...">
            </div>
            <div class="form-group">
                <label class="form-label text-sm" for="group-description">Description (optionnel)</label>
                <textarea class="form-textarea" id="group-description" placeholder="A quoi sert ce groupe..." style="min-height: 50px;"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label text-sm" for="group-mcp">Connecteur</label>
                <select class="form-select" id="group-mcp" onchange="onGroupMcpChange(this.value)">
                    <option value="">Aucun (agents simples)</option>
                </select>
                <p class="text-muted text-xs" style="margin-top:0.25rem;">Les agents du groupe hériteront de ce connecteur.</p>
            </div>
            <div class="form-group" id="group-scope-section" style="display:none;">
                <label class="form-label text-sm">Périmètre</label>
                <select class="form-select" id="group-tool-scope" style="font-size:0.85rem;">
                    <option value="">Tout</option>
                </select>
                <p class="text-muted text-xs" style="margin-top:0.25rem;">Réduire le périmètre améliore la précision de l'agent.</p>
            </div>
            <div class="form-group" id="group-write-section" style="display:none;">
                <label class="form-label text-sm">Droits d'écriture</label>
                <select class="form-select" id="group-write-mode" onchange="toggleGroupMaxWrites()" style="font-size:0.85rem;">
                    <option value="none">Lecture seule</option>
                    <option value="ask">Écriture avec confirmation</option>
                    <option value="auto">Écriture automatique</option>
                </select>
                <select class="form-select" id="group-max-writes" style="display:none; font-size:0.85rem; margin-top:0.25rem;">
                    <option value="1">1 écriture max</option>
                    <option value="2">2 écritures max</option>
                    <option value="3">3 écritures max</option>
                </select>
                <p class="text-muted text-xs" style="margin-top:0.25rem;">Les agents du groupe hériteront de ces droits.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-group')">Annuler</button>
            <button class="btn btn-primary" id="group-save-btn" onclick="saveGroup()">Créer</button>
        </div>
    </div>
</div>

<!-- Modal Diff Prompt Library -->
<div class="modal-overlay" id="modal-library-diff">
    <div class="modal" style="max-width: 900px;">
        <div class="modal-header">
            <h2 class="modal-title" id="diff-modal-title">Mise à jour du prompt par défaut</h2>
            <button class="modal-close" onclick="closeModal('modal-library-diff')" aria-label="Fermer">&times;</button>
        </div>
        <div class="modal-body">
            <p id="diff-modal-changelog" class="text-muted text-sm" style="margin-bottom: 1rem;"></p>
            <div class="diff-grid">
                <div class="diff-col">
                    <div class="diff-col-header">Votre version (personnalisée)</div>
                    <pre class="diff-pre" id="diff-current"></pre>
                </div>
                <div class="diff-col">
                    <div class="diff-col-header">Nouvelle version par défaut</div>
                    <pre class="diff-pre" id="diff-library"></pre>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-library-diff')">Garder le mien</button>
            <button class="btn btn-primary" id="diff-adopt-btn" onclick="adoptLibraryPrompt()">Adopter le nouveau</button>
        </div>
    </div>
</div>

<!-- Modal Upgrade -->
<div class="modal-overlay" id="modal-upgrade">
    <div class="modal" style="max-width: 420px;">
        <div class="modal-header">
            <h2 class="modal-title" id="upgrade-modal-title">Fonctionnalite Starter</h2>
            <button class="modal-close" onclick="closeModal('modal-upgrade')" aria-label="Fermer">&times;</button>
        </div>
        <div class="modal-body">
            <p id="upgrade-modal-message" style="margin-bottom: 1.2rem; line-height: 1.6;"></p>
            <div style="background: var(--bg-alt, #f5f5f5); border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
                <div style="font-weight: 600; margin-bottom: 0.5rem;">Plan Starter inclut :</div>
                <ul style="margin: 0; padding-left: 1.2rem; line-height: 1.8;">
                    <li>Groupes illimites (email, agenda, recherche...)</li>
                    <li>Connecteurs MCP illimites</li>
                    <li>STT illimite</li>
                    <li>60 000 tokens LLM / jour</li>
                </ul>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-upgrade')">Fermer</button>
            <a href="/pricing" class="btn btn-primary">Voir les plans</a>
        </div>
    </div>
</div>

<!-- Modal Library -->
<div class="modal-overlay" id="modal-library">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title">Agents archivés</h2>
            <button class="modal-close" onclick="closeModal('modal-library')" aria-label="Fermer">&times;</button>
        </div>
        <div class="modal-body">
            <p class="text-muted mb-2">Agents désactivés — tu peux les restaurer ou les supprimer définitivement.</p>
            <div id="archives-list"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let allItems = [];
let availableMcps = [];
let availableScriptConnectors = [];  // v1.6 — scripts « disponibles comme connecteur »
let libraryData = [];
let libraryCategories = {};
let packagesData = {};

// Cache pour les categories MCP (format: {catId: {name, mcps: [id, ...]}})
let mcpCategories = {};

// Plan gating
let planLimits = null;  // null = mode local (pas de limites)
let userPlan = null;    // "free", "starter", etc.

// Intégrateur : publication bibliothèque
let supabaseConfigured = false;

async function loadAgents() {
    try {
        // Charger les sources en parallele (+ auth status pour les limites)
        const [agentsRes, categoriesRes, authRes] = await Promise.all([
            fetch('/api/agents'),
            fetch('/api/mcps/categories'),
            fetch('/api/auth/status')
        ]);

        // Charger les limites du plan
        try {
            const authData = await authRes.json();
            supabaseConfigured = !!authData.configured;
            if (authData.configured && authData.authenticated && authData.subscription?.limits) {
                planLimits = authData.subscription.limits;
                userPlan = authData.subscription?.plan || 'free';
            } else if (!authData.configured) {
                planLimits = null; // Mode local
                userPlan = null;
            }
        } catch(e) { planLimits = null; userPlan = null; }

        const agentsData = await agentsRes.json();
        const categoriesArray = await categoriesRes.json();
        // Convertir array en dict par id
        mcpCategories = {};
        categoriesArray.forEach(cat => {
            mcpCategories[cat.id] = {
                name: cat.name,
                mcps: (cat.mcps || []).map(m => m.id)
            };
        });

        allItems = agentsData;
        renderAgents();
        // Card layout: no sort buttons needed
    } catch (e) {
        console.error('Erreur chargement:', e);
    }
}


// (Hotkey capture removed — managed inline in table)

// Charger les MCPs disponibles + tool_sets
async function loadMcps() {
    try {
        const res = await fetch('/api/mcps');
        availableMcps = await res.json();
        // Charger les tool_sets pour chaque MCP (en parallele)
        await Promise.all(availableMcps.map(async mcp => {
            try {
                const tsRes = await apiFetch(`/api/mcps/${mcp.id}/tool-sets`);
                const tsData = await tsRes.json();
                mcp.tool_sets = (tsData.tool_sets || []).length > 0 ? tsData.tool_sets : null;
            } catch (e) {
                mcp.tool_sets = null;
            }
        }));
    } catch (e) {
        console.error('Erreur chargement MCPs:', e);
        availableMcps = [];
    }
    // Scripts connecteurs (v1.6) : attachables a un groupe comme un MCP.
    try {
        const sres = await fetch('/api/miniapp/connector-scripts');
        if (sres.ok) availableScriptConnectors = (await sres.json()).scripts || [];
    } catch (e) {
        availableScriptConnectors = [];
    }
}

// (updateActivationMode removed — checkboxes, no toggle needed)

// (updateFormSections, orchestrator, MCP helpers removed — simplified modal)

// ===== Modele IA (tier) =====

function onTierChange() {
    const tier = document.getElementById('agent-llm-tier').value;
    const warning = document.getElementById('tier-free-warning');
    warning.style.display = (tier === 'thinking' && userPlan === 'free') ? '' : 'none';
}

// ===== Write mode (groupe) =====

function toggleGroupMaxWrites() {
    const mode = document.getElementById('group-write-mode').value;
    document.getElementById('group-max-writes').style.display = (mode === 'none') ? 'none' : '';
}

// value = "" | "mcp:<id>" | "script:<id>". Les droits d'ecriture et le perimetre
// ne concernent QUE les MCP : pour un script (ou rien), on masque ces sections.
function onGroupMcpChange(value) {
    const writeSection = document.getElementById('group-write-section');
    const scopeSection = document.getElementById('group-scope-section');
    if (!value || value.startsWith('script:')) {
        writeSection.style.display = 'none';
        scopeSection.style.display = 'none';
        return;
    }
    const mcpId = value.startsWith('mcp:') ? value.slice(4) : value;
    writeSection.style.display = '';
    scopeSection.style.display = 'none';  // Hide immediately to avoid stale data
    const mcp = availableMcps.find(m => m.id === mcpId);
    const defaults = {
        'high': { mode: 'auto', max: 1 },
        'medium': { mode: 'ask', max: 1 },
        'low': { mode: 'auto', max: 3 },
        'none': { mode: 'none', max: 1 }
    };
    const risk = (mcp && mcp.write_risk) || 'none';
    const d = defaults[risk] || defaults['none'];
    document.getElementById('group-write-mode').value = d.mode;
    document.getElementById('group-max-writes').value = d.max;
    toggleGroupMaxWrites();
    // Charger les tool_sets pour le perimetre
    loadToolSets(mcpId);
}

async function loadToolSets(mcpId) {
    const scopeSection = document.getElementById('group-scope-section');
    const select = document.getElementById('group-tool-scope');
    try {
        const res = await apiFetch(`/api/mcps/${mcpId}/tool-sets`);
        const data = await res.json();
        const sets = data.tool_sets || [];
        if (sets.length === 0) {
            scopeSection.style.display = 'none';
            return;
        }
        scopeSection.style.display = '';
        select.innerHTML = '<option value="">Tout</option>';
        sets.forEach(ts => {
            select.innerHTML += `<option value="${ts.id}">${ts.label} (${ts.tool_count} outils)</option>`;
        });
        // Stocker pour usage dans saveItem
        select.dataset.toolSets = JSON.stringify(sets);
    } catch (e) {
        scopeSection.style.display = 'none';
    }
}

// ===== Memory =====
function toggleMemoryOptions() {
    const enabled = document.getElementById('agent-memory-enabled').checked;
    document.getElementById('memory-options').style.display = enabled ? 'block' : 'none';
}

function toggleMemoryMaxWrites() {
    const mode = document.getElementById('memory-write-mode').value;
    document.getElementById('memory-max-writes').style.display = (mode === 'none') ? 'none' : '';
}

function getBuiltinCategories() {
    return new Set(availableMcps.filter(m => m.builtin).flatMap(m => m.categories || []));
}

async function autoGenerateDescription() {
    const prompt = document.getElementById('agent-prompt').value.trim();
    if (!prompt) { showToast('Ajoutez des instructions d\'abord', 'toast-warning'); return; }
    const btn = document.getElementById('btn-auto-desc');
    btn.disabled = true; btn.textContent = '...';
    try {
        const res = await apiFetch('/api/agents/generate-description', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                system_prompt: prompt,
                name: document.getElementById('agent-name').value.trim()
            })
        });
        const data = await res.json();
        if (data.ok) document.getElementById('agent-description').value = data.description;
        else showToast(data.error || 'Erreur', 'toast-error');
    } catch (e) { showToast('Erreur génération', 'toast-error'); }
    finally { btn.disabled = false; btn.textContent = 'Générer'; }
}

// (MCP checkboxes, modules, permissions removed — managed at domain level)

function hasMcps(item) {
    return item.mcps && item.mcps.length > 0;
}

// Helper pour obtenir le badge d'un agent
function getAgentBadge(agent) {
    if (agent.is_orchestrator) {
        return '<span class="badge badge-accent">Orchestrateur</span>';
    }
    if (agent.is_chain) {
        return '<span class="badge badge-primary">Chaîne</span>';
    }
    if (agent.mcps && agent.mcps.length > 0) {
        return '<span class="badge badge-accent">Connecté</span>';
    }
    return '<span class="badge badge-muted">Simple</span>';
}

// Helper pour obtenir le type de connexion
function getOrchChildren(orch, agents) {
    const scope = orch.orchestrator_scope || [];
    return scope.map(id => agents.find(a => a.id === id)).filter(Boolean);
}

function toggleDomainCard(orchId, event) {
    if (event && event.target.closest('button, .hotkey-cell')) return;
    const body = document.getElementById('domain-body-' + orchId);
    const chevron = document.getElementById('chevron-' + orchId);
    if (!body) return;
    body.classList.toggle('collapsed');
    if (chevron) chevron.classList.toggle('expanded');
    const state = JSON.parse(localStorage.getItem('orchExpanded') || '{}');
    state[orchId] = !body.classList.contains('collapsed');
    localStorage.setItem('orchExpanded', JSON.stringify(state));
}

// === Inline hotkey editing ===
// Le coeur de l'editeur vit dans static/hotkey_edit.js (partage avec la formation).
// Ici on ne garde que le branchement page Agents : MAJ du cache local + re-render.
function startInlineHotkey(agentId, el, event) {
    event.stopPropagation();
    VicsiaHotkeyEdit.start(agentId, el, {
        onSaved: (id, hotkey) => {
            const agent = allItems.find(a => a.id === id);
            if (agent) agent.hotkey = hotkey;
        },
        onDone: renderAgents,
    });
}

// === Drag & Drop ===

function onAgentDragStart(event, agentId) {
    event.dataTransfer.setData('text/plain', agentId);
    event.dataTransfer.effectAllowed = 'move';
    document.querySelectorAll('.domain-card').forEach(r => r.classList.add('drop-target'));
    const indZone = document.getElementById('individuels-drop-zone');
    if (indZone) indZone.classList.add('drop-target');
}

function onAgentDragEnd(event) {
    document.querySelectorAll('.domain-card').forEach(r => {
        r.classList.remove('drop-target', 'drop-hover');
    });
    const indZone = document.getElementById('individuels-drop-zone');
    if (indZone) indZone.classList.remove('drop-target', 'drop-hover');
}

function onIndividuelsDragOver(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
    event.currentTarget.classList.add('drop-hover');
}

function onIndividuelsDragLeave(event) {
    if (event.currentTarget.contains(event.relatedTarget)) return;
    event.currentTarget.classList.remove('drop-hover');
}

async function onIndividuelsDrop(event) {
    event.preventDefault();
    event.currentTarget.classList.remove('drop-hover', 'drop-target');
    const agentId = event.dataTransfer.getData('text/plain');
    const agent = allItems.find(a => a.id === agentId);
    if (!agent) return;

    if (agent.is_orchestrator) {
        showToast('Un groupe ne peut pas être dans les individuels', 'toast-warning');
        return;
    }

    const currentOrch = allItems.find(o =>
        o.is_orchestrator && (o.orchestrator_scope || []).includes(agentId)
    );
    if (!currentOrch) return; // deja standalone — no-op silencieux

    const newScope = currentOrch.orchestrator_scope.filter(id => id !== agentId);
    const res = await apiFetch('/api/agents/' + currentOrch.id, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ orchestrator_scope: newScope })
    });
    const data = await res.json();
    if (data.ok) {
        currentOrch.orchestrator_scope = newScope;
        renderAgents();
        showToast(agent.name + ' retiré du groupe ' + currentOrch.name, 'toast-success');
    }
}

function onOrchDragOver(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
    event.currentTarget.classList.add('drop-hover');
}

function onOrchDragLeave(event) {
    event.currentTarget.classList.remove('drop-hover');
}

async function onOrchDrop(event, orchId) {
    event.preventDefault();
    event.currentTarget.classList.remove('drop-hover');
    document.querySelectorAll('.domain-card').forEach(r => r.classList.remove('drop-target'));

    const agentId = event.dataTransfer.getData('text/plain');
    const agent = allItems.find(a => a.id === agentId);
    const orch = allItems.find(a => a.id === orchId);
    if (!agent || !orch) return;

    // Validation: pas de drop sur soi-meme
    if (agent.is_orchestrator) {
        showToast('Un groupe ne peut pas être dans un autre groupe', 'toast-warning');
        return;
    }
    // Validation: pas de voix = pas orchestrable
    if (agent.requires_voice === false) {
        showToast(agent.name + ' : action sur selection, pas orchestrable (pas de voix)', 'toast-warning');
        return;
    }
    // Deja dans ce groupe
    const scope = orch.orchestrator_scope || [];
    if (scope.includes(agentId)) {
        showToast(agent.name + ' est déjà dans ' + orch.name, 'toast-warning');
        return;
    }

    // Si l'agent est dans un AUTRE groupe, le retirer d'abord
    const currentOrch = allItems.find(o =>
        o.is_orchestrator && o.id !== orchId &&
        (o.orchestrator_scope || []).includes(agentId)
    );

    // Ajouter au nouveau groupe en premier (atomique : on ne retire de l'ancien qu'en cas de succès)
    const newScope = [...scope, agentId];
    const res = await apiFetch('/api/agents/' + orchId, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ orchestrator_scope: newScope })
    });
    const data = await res.json();
    if (!data.ok) {
        showToast(data.error || 'Erreur', 'toast-error');
        return;
    }
    orch.orchestrator_scope = newScope;

    // Retirer de l'ancien groupe seulement si l'ajout a réussi
    if (currentOrch) {
        const oldScope = currentOrch.orchestrator_scope.filter(id => id !== agentId);
        await apiFetch('/api/agents/' + currentOrch.id, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ orchestrator_scope: oldScope })
        });
        currentOrch.orchestrator_scope = oldScope;
    }

    // Retirer le raccourci si l'agent en avait un
    if (agent.hotkey) {
        await apiFetch('/api/agents/' + agentId, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ hotkey: null })
        });
        agent.hotkey = '';
    }
    renderAgents();
    const fromMsg = currentOrch ? ` (déplacé depuis ${currentOrch.name})` : '';
    showToast(agent.name + ' ajouté à ' + orch.name + fromMsg, 'toast-success');
}

// === Toast === (unique implementation at end of file)

// === Output mode label ===
function onOutputModeChange() {
    const mode = document.getElementById('agent-output-mode')?.value;
    const ttsDiv = document.getElementById('tts-option');
    if (ttsDiv) ttsDiv.style.display = mode === 'paste' ? 'none' : '';
}

function getOutputLabel(mode, agentId) {
    const label = mode === 'paste' ? 'coller' : 'capsule';
    if (!agentId) return `<span class="domain-agent-output">${label}</span>`;
    return `<span class="domain-agent-output domain-agent-output--clickable" role="button" tabindex="0"
        title="Cliquer pour basculer coller / capsule"
        onclick="event.stopPropagation(); toggleOutputMode('${agentId}')"
        onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();event.stopPropagation();toggleOutputMode('${agentId}');}">${label}</span>`;
}

async function toggleOutputMode(agentId) {
    const agent = allItems.find(a => a.id === agentId);
    if (!agent) return;
    let newMode;
    if (agent.output_mode === 'paste') {
        newMode = 'capsule';
    } else if (agent.output_mode === 'capsule') {
        newMode = 'paste';
    } else {
        // TODO: d'autres VALID_OUTPUT_MODES pourraient exister à l'avenir côté
        // backend — dans ce cas on ne devine pas, on retombe sur 'paste' par
        // défaut plutôt que de corrompre une valeur qu'on ne connaît pas.
        newMode = 'paste';
    }
    const res = await apiFetch(`/api/agents/${agentId}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ output_mode: newMode })
    });
    const json = await res.json();
    if (json.ok) {
        agent.output_mode = newMode;
        renderAgents();
        showToast('Enregistré', 'toast-success');
    } else {
        showToast(json.error || 'Erreur', 'toast-error');
    }
}

function getGlobalRoutingChip(orch) {
    const router = allItems.find(a => a.is_orchestrator && a.orchestrator_mode === 'global' && a.enabled);
    if (!router) return '';
    const isIncluded = (router.orchestrator_scope || []).includes(orch.id);
    const cls = isIncluded ? 'routing-chip routing-chip--active' : 'routing-chip';
    const hk = router.hotkey
        ? router.hotkey.split('+').map(p => p.charAt(0).toUpperCase() + p.slice(1)).join('+')
        : 'non assigné';
    const tooltip = isIncluded
        ? `Inclus dans le routage global (${hk})`
        : `Cliquer pour inclure dans le routage global (${hk})`;
    return `<span class="${cls}" title="${tooltip}"
        onclick="event.stopPropagation(); toggleGlobalRouting('${orch.id}')">Routage global</span>`;
}

async function toggleGlobalRouting(orchId) {
    const router = allItems.find(a => a.is_orchestrator && a.orchestrator_mode === 'global' && a.enabled);
    if (!router) {
        showToast('Routeur global introuvable', 'toast-error');
        return;
    }
    const scope = router.orchestrator_scope || [];
    const isIncluded = scope.includes(orchId);
    const newScope = isIncluded ? scope.filter(id => id !== orchId) : [...scope, orchId];
    const res = await apiFetch(`/api/agents/${router.id}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ orchestrator_scope: newScope })
    });
    const json = await res.json();
    if (json.ok) {
        router.orchestrator_scope = newScope;
        renderAgents();
    } else {
        showToast(json.error || 'Erreur', 'toast-error');
    }
}

const MIC_TOOLTIP = "Déclenchement du raccourci individuel. En groupe ou en routage global, "
    + "l'agent répond toujours à la voix, quel que soit ce réglage.";

function getInputLabel(agent, clickable) {
    const active = agent.requires_voice !== false;
    const cls = 'domain-agent-input' + (active ? '' : ' domain-agent-input--inactive')
        + (clickable ? ' domain-agent-input--clickable' : '');
    const icon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="9" y="3" width="6" height="11" rx="3"/>
                <path d="M5 11a7 7 0 0 0 14 0"/>
                <line x1="12" y1="18" x2="12" y2="22"/>
            </svg>`;
    if (!clickable) {
        return `<span class="${cls}" title="${MIC_TOOLTIP}">${active ? icon : ''}</span>`;
    }
    return `<span class="${cls}" role="button" tabindex="0" title="${MIC_TOOLTIP}"
        onclick="event.stopPropagation(); openMicMenu('${agent.id}', this)"
        onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();event.stopPropagation();openMicMenu('${agent.id}', this);}">${icon}</span>`;
}

function openMicMenu(agentId, anchorEl) {
    const agent = allItems.find(a => a.id === agentId);
    if (!agent) return;
    const active = agent.requires_voice !== false;
    openQuickPopover(anchorEl, {
        title: 'Déclenchement — ' + (agent.name || ''),
        bodyHtml: `
            <div class="quick-popover-menu">
                <button type="button" class="quick-popover-choice ${active ? 'active' : ''}" data-value="true">Commande vocale</button>
                <button type="button" class="quick-popover-choice ${!active ? 'active' : ''}" data-value="false">Lancé sans commande vocale</button>
            </div>
            <p class="quick-popover-hint">${MIC_TOOLTIP}</p>
        `,
        onOpen(popoverEl) {
            popoverEl.querySelectorAll('.quick-popover-choice').forEach(btn => {
                btn.addEventListener('click', async () => {
                    const requiresVoice = btn.dataset.value === 'true';
                    const res = await apiFetch(`/api/agents/${agentId}`, {
                        method: 'PUT',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({ requires_voice: requiresVoice })
                    });
                    const json = await res.json();
                    if (json.ok) {
                        agent.requires_voice = requiresVoice;
                        closeQuickPopover();
                        renderAgents();
                        showToast('Enregistré', 'toast-success');
                    } else {
                        showToast(json.error || 'Erreur', 'toast-error');
                    }
                });
            });
        },
    });
}

function getWriteBadge(orch) {
    if (!orch.mcps || orch.mcps.length === 0) return '';
    const mode = orch.write_mode || 'none';
    if (mode === 'none') return '<span class="domain-agent-output" title="Lecture seule" style="opacity:0.5;">Lecture</span>';
    if (mode === 'ask') return '<span class="domain-agent-output" title="Écriture avec confirmation" style="color:var(--accent);">Confirmation</span>';
    if (mode === 'auto') return '<span class="domain-agent-output" title="Écriture automatique" style="color:var(--accent);">Écriture</span>';
    return '';
}

// === MCP select for domain cards ===
// Sélecteur UNIFIÉ de connecteur du groupe : MCP et scripts dans une seule liste
// (optgroups). Un groupe = UN connecteur, MCP ou script. Valeurs prefixees
// "mcp:<id>" / "script:<id>" pour distinguer le type au moment de la sauvegarde.
function getDomainConnectorSelect(orch) {
    // Free plan : availableMcps ne contient que les capacités natives (filtré côté backend).
    const enabledMcps = availableMcps.filter(m => m.enabled);
    // Scripts connecteurs : reserves aux plans payants (Free exclu, comme les MCP).
    const gated = planLimits && planLimits.max_mcps === 0;
    const scripts = gated ? [] : availableScriptConnectors;
    if (enabledMcps.length === 0 && scripts.length === 0) return '';
    const curMcp = (orch.mcps || [])[0] || '';
    const curScript = (orch.script_connectors || [])[0] || '';
    const cur = curMcp ? 'mcp:' + curMcp : (curScript ? 'script:' + curScript : '');
    let opts = '<option value="">Pas de connecteur</option>';
    if (enabledMcps.length) {
        opts += '<optgroup label="Connecteurs">' +
            enabledMcps.map(m => `<option value="mcp:${m.id}" ${('mcp:' + m.id) === cur ? 'selected' : ''}>${m.name}</option>`).join('') +
            '</optgroup>';
    }
    if (scripts.length) {
        opts += '<optgroup label="Scripts">' +
            scripts.map(s => `<option value="script:${s.id}" ${('script:' + s.id) === cur ? 'selected' : ''}>${s.name}</option>`).join('') +
            '</optgroup>';
    }
    return `<select class="form-select" style="font-size:0.75rem; padding:0.15rem 0.3rem; width:auto; max-width:180px;"
                onchange="setDomainConnector('${orch.id}', this.value)" onclick="event.stopPropagation();" title="Connecteur du groupe">
        ${opts}
    </select>`;
}

// === Scope (perimetre) select per agent (child or standalone) ===
function getAgentScopeSelect(agent) {
    const mcpId = (agent.mcps || [])[0];
    if (!mcpId) return '';
    const mcp = availableMcps.find(m => m.id === mcpId);
    if (!mcp || !mcp.tool_sets || mcp.tool_sets.length === 0) return '';
    if (mcp.tool_sets.every(ts => ts.hidden)) return '';
    const currentTools = agent.allowed_tools || [];
    let activeSet = '';
    for (const ts of mcp.tool_sets) {
        if (currentTools.length > 0 && ts.tools && ts.tools.length === currentTools.length &&
            ts.tools.every(t => currentTools.includes(t))) {
            activeSet = ts.id;
            break;
        }
    }
    return `<select class="form-select" style="font-size:0.7rem; padding:0.1rem 0.25rem; width:auto; max-width:140px;"
                onchange="setAgentScope('${agent.id}', '${mcpId}', this.value)" title="Périmètre">
        <option value="" ${!activeSet ? 'selected' : ''}>Tout</option>
        ${mcp.tool_sets.map(ts => `<option value="${ts.id}" ${ts.id === activeSet ? 'selected' : ''}>${ts.label}</option>`).join('')}
    </select>`;
}

async function setAgentScope(agentId, mcpId, toolSetId) {
    let allowedTools = [];
    if (toolSetId) {
        const mcp = availableMcps.find(m => m.id === mcpId);
        const ts = mcp?.tool_sets?.find(s => s.id === toolSetId);
        if (ts) allowedTools = ts.tools || [];
    }
    const res = await apiFetch('/api/agents/' + agentId, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ allowed_tools: allowedTools })
    });
    const data = await res.json();
    if (data.ok) {
        const agent = allItems.find(a => a.id === agentId);
        if (agent) agent.allowed_tools = allowedTools;
        showToast('Périmètre mis à jour', 'toast-success');
    }
}

// Applique le connecteur unifié (MCP OU script) au groupe et le propage aux
// enfants. ``value`` = "" | "mcp:<id>" | "script:<id>". Les deux champs sont
// toujours envoyes ensemble : choisir un type vide l'autre (un seul connecteur).
async function setDomainConnector(orchId, value) {
    const mcps = value && value.startsWith('mcp:') ? [value.slice(4)] : [];
    const scripts = value && value.startsWith('script:') ? [value.slice(7)] : [];
    const payload = { mcps: mcps, script_connectors: scripts };
    const res = await apiFetch('/api/agents/' + orchId, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload)
    });
    const data = await res.json();
    if (data.ok) {
        const orch = allItems.find(a => a.id === orchId);
        if (orch) { orch.mcps = mcps; orch.script_connectors = scripts; }
        // Propager aux enfants (héritage) + réinitialiser leur périmètre MCP.
        const childIds = orch ? (orch.orchestrator_scope || []) : [];
        await Promise.all(childIds.map(async cid => {
            const child = allItems.find(a => a.id === cid);
            if (!child) return;
            await apiFetch('/api/agents/' + cid, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ mcps: mcps, script_connectors: scripts, allowed_tools: [] })
            });
            child.mcps = mcps;
            child.script_connectors = scripts;
            child.allowed_tools = [];
        }));
        renderAgents();
        showToast('Connecteur mis à jour', 'toast-success');
    }
}

async function removeFromDomain(orchId, agentId) {
    const orch = allItems.find(a => a.id === orchId);
    if (!orch) return;
    const newScope = (orch.orchestrator_scope || []).filter(id => id !== agentId);
    const res = await apiFetch('/api/agents/' + orchId, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ orchestrator_scope: newScope })
    });
    const data = await res.json();
    if (data.ok) {
        orch.orchestrator_scope = newScope;
        renderAgents();
        showToast('Agent retiré du groupe', 'toast-success');
    }
}

// === Quick popover (générique — micro, sortie, description, prompt) ===
// Un seul popover dans le DOM, positionné près de l'élément cliqué. Fermeture
// au clic extérieur et à Échap.
let _quickPopoverEl = null;
let _quickPopoverOutsideHandler = null;
let _quickPopoverEscHandler = null;

function _ensureQuickPopoverEl() {
    if (_quickPopoverEl) return _quickPopoverEl;
    const el = document.createElement('div');
    el.id = 'quick-popover';
    el.className = 'quick-popover';
    el.style.display = 'none';
    document.body.appendChild(el);
    _quickPopoverEl = el;
    return el;
}

function openQuickPopover(anchorEl, { title, bodyHtml, onOpen }) {
    closeQuickPopover();
    const el = _ensureQuickPopoverEl();
    el.innerHTML = `
        <div class="quick-popover-title">${title || ''}</div>
        <div class="quick-popover-body">${bodyHtml || ''}</div>
    `;
    el.style.display = 'block';

    // Position near the anchor, clamped to viewport.
    const rect = anchorEl.getBoundingClientRect();
    const top = rect.bottom + window.scrollY + 6;
    let left = rect.left + window.scrollX;
    document.body.style.position = document.body.style.position || '';
    el.style.top = top + 'px';
    el.style.left = left + 'px';
    // Après rendu, reclamp horizontalement pour ne pas sortir de l'écran.
    requestAnimationFrame(() => {
        const popRect = el.getBoundingClientRect();
        const overflowRight = popRect.right - window.innerWidth;
        if (overflowRight > 0) {
            el.style.left = Math.max(8, left - overflowRight - 8) + 'px';
        }
    });

    if (onOpen) onOpen(el);

    _quickPopoverOutsideHandler = (event) => {
        if (!el.contains(event.target) && event.target !== anchorEl && !anchorEl.contains(event.target)) {
            closeQuickPopover();
        }
    };
    _quickPopoverEscHandler = (event) => {
        if (event.key === 'Escape') closeQuickPopover();
    };
    // setTimeout pour ne pas capturer le clic qui vient d'ouvrir le popover.
    setTimeout(() => {
        document.addEventListener('click', _quickPopoverOutsideHandler);
        document.addEventListener('keydown', _quickPopoverEscHandler);
    }, 0);
}

function closeQuickPopover() {
    if (_quickPopoverEl) {
        _quickPopoverEl.style.display = 'none';
        _quickPopoverEl.innerHTML = '';
    }
    if (_quickPopoverOutsideHandler) {
        document.removeEventListener('click', _quickPopoverOutsideHandler);
        _quickPopoverOutsideHandler = null;
    }
    if (_quickPopoverEscHandler) {
        document.removeEventListener('keydown', _quickPopoverEscHandler);
        _quickPopoverEscHandler = null;
    }
}

// === Quick edit — points Description / Prompt ===

function getQuickEditDots(agent) {
    const descTitle = (agent.description || '').replace(/"/g, '&quot;');
    return `<span class="domain-agent-dots">
        <button type="button" class="agent-dot" title="${descTitle}" onclick="event.stopPropagation(); quickEdit('${agent.id}', 'description', this)">
            <span class="agent-dot-pt"></span>Description
        </button>
        <button type="button" class="agent-dot" onclick="event.stopPropagation(); quickEdit('${agent.id}', 'prompt', this)">
            <span class="agent-dot-pt"></span>Prompt
        </button>
    </span>`;
}

function quickEdit(agentId, field, anchorEl) {
    const agent = allItems.find(a => a.id === agentId);
    if (!agent) return;
    const isPrompt = field === 'prompt';
    const apiField = isPrompt ? 'system_prompt' : 'description';
    const currentValue = isPrompt ? (agent.system_prompt || '') : (agent.description || '');
    const label = isPrompt ? 'Prompt' : 'Description';

    openQuickPopover(anchorEl, {
        title: `${label} — ${agent.name || ''}`,
        bodyHtml: `
            <textarea class="quick-popover-textarea" rows="${isPrompt ? 8 : 3}"></textarea>
            <div class="quick-popover-actions">
                <button type="button" class="btn btn-ghost btn-sm quick-popover-cancel">Annuler</button>
                <button type="button" class="btn btn-primary btn-sm quick-popover-save">Sauvegarder</button>
            </div>
        `,
        onOpen(popoverEl) {
            const textarea = popoverEl.querySelector('.quick-popover-textarea');
            textarea.value = currentValue;
            textarea.focus();
            textarea.setSelectionRange(textarea.value.length, textarea.value.length);

            popoverEl.querySelector('.quick-popover-cancel').addEventListener('click', () => closeQuickPopover());
            popoverEl.querySelector('.quick-popover-save').addEventListener('click', async () => {
                const newValue = textarea.value;
                const res = await apiFetch(`/api/agents/${agentId}`, {
                    method: 'PUT',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({ [apiField]: newValue })
                });
                const json = await res.json();
                if (json.ok) {
                    agent[apiField] = newValue;
                    closeQuickPopover();
                    renderAgents();
                    showToast('Enregistré', 'toast-success');
                } else {
                    showToast(json.error || 'Erreur', 'toast-error');
                }
            });
        },
    });
}

// === Render helpers ===


function renderDomainCard(orch) {
    const children = getOrchChildren(orch, allItems);
    const orchState = JSON.parse(localStorage.getItem('orchExpanded') || '{}');
    const expanded = orchState[orch.id] !== false;
    const chevronCls = expanded ? 'orch-chevron expanded' : 'orch-chevron';
    const bodyCls = expanded ? 'domain-card-body' : 'domain-card-body collapsed';
    const connectorSelect = getDomainConnectorSelect(orch);

    let childrenHtml = children.map(c => `
        <div class="domain-agent-row" draggable="true"
             ondragstart="onAgentDragStart(event, '${c.id}')" ondragend="onAgentDragEnd(event)">
            <button class="star-btn ${c.favorite?'active':''}" onclick="toggleFav('${c.id}','agent')">${c.favorite?'\u2605':'\u2606'}</button>
            <span class="domain-agent-name" title="${(c.name||'').replace(/"/g,'&quot;')}">${c.name}${getLibraryUpdateBadge(c)}</span>
            ${getQuickEditDots(c)}
            ${getAgentScopeSelect(c)}
            ${getOutputLabel(c.output_mode, c.id)}
            <span class="hotkey-cell" onclick="event.stopPropagation(); startInlineHotkey('${c.id}', this, event)">
                <span class="hotkey-display">${c.hotkey || '<span class="text-muted">Définir un raccourci</span>'}</span>
            </span>
            <div class="actions">
                <button class="btn btn-ghost btn-sm" onclick="editItem('${c.id}','agent')">Éditer</button>
                <button class="btn btn-ghost btn-sm" onclick="removeFromDomain('${orch.id}','${c.id}')">Retirer</button>
                <button class="btn btn-ghost btn-sm" onclick="archiveItem('${c.id}','agent')">Archiver</button>
                <button class="btn btn-ghost btn-sm text-danger" onclick="deleteItem('${c.id}','agent')">Suppr.</button>
            </div>
        </div>
    `).join('');

    if (children.length === 0) {
        childrenHtml = '<div class="domain-agent-row text-muted">Aucun agent — glissez-en ici</div>';
    }

    return `
    <div class="domain-card" data-orch-id="${orch.id}"
         ondragover="onOrchDragOver(event)" ondragleave="onOrchDragLeave(event)"
         ondrop="onOrchDrop(event, '${orch.id}')">
        <div class="domain-card-header" onclick="toggleDomainCard('${orch.id}', event)">
            <span class="${chevronCls}" id="chevron-${orch.id}">\u25B8</span>
            <button class="star-btn ${orch.favorite?'active':''}" title="Groupe favori (badge sur la capsule)" onclick="event.stopPropagation(); toggleFav('${orch.id}','agent')">${orch.favorite?'\u2605':'\u2606'}</button>
            <span class="domain-card-name">${orch.name}</span>
            ${getGlobalRoutingChip(orch)}
            ${connectorSelect}
            ${getWriteBadge(orch)}
            <span class="hotkey-cell" onclick="event.stopPropagation(); startInlineHotkey('${orch.id}', this, event)">
                <span class="hotkey-display">${orch.hotkey || '<span class="text-muted">Définir un raccourci</span>'}</span>
            </span>
            <span class="domain-card-count">${children.length} agent${children.length !== 1 ? 's' : ''}</span>
            <button class="btn btn-ghost domain-edit-btn" onclick="event.stopPropagation(); editItem('${orch.id}','agent')">\u2699</button>
            <button class="btn btn-ghost btn-sm text-danger" onclick="event.stopPropagation(); deleteItem('${orch.id}','agent')">Suppr.</button>
        </div>
        <div class="${bodyCls}" id="domain-body-${orch.id}">
            ${childrenHtml}
        </div>
    </div>`;
}

function renderIndividualRow(a) {
    return `
    <div class="domain-agent-row" draggable="true"
         ondragstart="onAgentDragStart(event, '${a.id}')" ondragend="onAgentDragEnd(event)">
        <button class="star-btn ${a.favorite?'active':''}" onclick="toggleFav('${a.id}','agent')">${a.favorite?'\u2605':'\u2606'}</button>
        <span class="domain-agent-name" style="${a.id === 'transcription' ? 'font-weight:600;' : ''}" title="${(a.name||'').replace(/"/g,'&quot;')}">${a.name}${getLibraryUpdateBadge(a)}</span>
        ${getQuickEditDots(a)}
        ${getAgentScopeSelect(a)}
        ${getInputLabel(a, true)}
        ${getOutputLabel(a.output_mode, a.id)}
        <span class="hotkey-cell" onclick="startInlineHotkey('${a.id}', this, event)">
            <span class="hotkey-display">${a.hotkey || '<span class="text-muted">Définir un raccourci</span>'}</span>
        </span>
        <div class="actions">
            <button class="btn btn-ghost btn-sm" onclick="editItem('${a.id}','agent')">Éditer</button>
            <button class="btn btn-ghost btn-sm" onclick="archiveItem('${a.id}','agent')">Archiver</button>
            <button class="btn btn-ghost btn-sm text-danger" onclick="deleteItem('${a.id}','agent')">Suppr.</button>
        </div>
    </div>`;
}

function renderEmptyState() {
    if (allItems.filter(a => a.enabled).length === 0) {
        return `<div class="empty-state" style="padding:2rem; text-align:center;">
            <p class="text-muted">Aucun agent configuré</p>
            <div class="flex gap-2" style="justify-content:center;">
                <button class="btn btn-secondary" onclick="openLibrary()">Parcourir la bibliothèque</button>
                <button class="btn btn-primary" onclick="openCreate()">+ Créer un agent</button>
            </div>
        </div>`;
    }
    return '<div class="text-center text-muted" style="padding:2rem;">Aucun élément ne correspond aux filtres</div>';
}

// === Main render ===

function renderAgents() {
    const container = document.getElementById('agents-container');
    const search = document.getElementById('search').value.toLowerCase();

    const filtered = allItems.filter(a => {
        if (!a.enabled) return false;
        if (search && !a.name.toLowerCase().includes(search)) return false;
        return true;
    });

    // Separate by role
    const orchestrators = filtered.filter(a => a.is_orchestrator);
    const nonOrch = filtered.filter(a => !a.is_orchestrator);

    // Separate global router from normal orchestrators
    // Note: cherche dans allItems (pas filtered) pour ne pas perdre le routeur si search active
    const globalRouter = allItems.find(a => a.is_orchestrator && a.orchestrator_mode === 'global' && a.enabled);
    const normalOrchestrators = orchestrators.filter(o => o.orchestrator_mode !== 'global');

    // Compute claimed agents (in any orchestrator's scope)
    const claimed = new Set();
    orchestrators.forEach(o => getOrchChildren(o, allItems).forEach(c => claimed.add(c.id)));

    // Individuels = all non-orchestrator agents not claimed by any group
    const individuels = nonOrch.filter(a => !claimed.has(a.id));

    // Sort individuels: transcription* first, then favorites, then alpha
    individuels.sort((a, b) => {
        const aTranscr = a.id.startsWith('transcription') ? (a.id === 'transcription' ? 0 : 1) : 2;
        const bTranscr = b.id.startsWith('transcription') ? (b.id === 'transcription' ? 0 : 1) : 2;
        if (aTranscr !== bTranscr) return aTranscr - bTranscr;
        if (a.favorite && !b.favorite) return -1;
        if (!a.favorite && b.favorite) return 1;
        return a.name.localeCompare(b.name);
    });

    let html = '';

    // 1. Individuels (always visible as drop zone — wraps header + rows)
    html += `<div id="individuels-drop-zone"
                  ondragover="onIndividuelsDragOver(event)" ondragleave="onIndividuelsDragLeave(event)"
                  ondrop="onIndividuelsDrop(event)">`;
    html += `<div class="agents-section-header">Agents individuels</div>`;
    individuels.forEach(a => { html += renderIndividualRow(a); });
    html += `</div>`;

    // 2. Groupes section header (with global router hotkey integrated if exists)
    if (normalOrchestrators.length > 0) {
        const groupCountBadge = (() => {
            if (!planLimits || planLimits.max_groups === undefined || planLimits.max_groups === -1) return '';
            const cnt = allItems.filter(a => a.is_orchestrator && !a.archived && a.id !== 'global-router').length;
            const atLimit = cnt >= planLimits.max_groups;
            const style = atLimit ? 'color: var(--warning, #f59e0b); font-weight:600;' : 'opacity:0.6;';
            return `<span style="font-size:0.8rem; margin-left:0.4rem; ${style}">${cnt}/${planLimits.max_groups}</span>`;
        })();
        if (globalRouter) {
            const hkLabel = globalRouter.hotkey
                ? globalRouter.hotkey.split('+').map(p => p.charAt(0).toUpperCase() + p.slice(1)).join('+')
                : null;
            const hkClass = hkLabel ? 'hotkey-display' : 'hotkey-display hotkey-empty';
            const hkText = hkLabel || 'Assigner';
            html += `<div class="agents-section-header agents-section-header--groups">
                <span>Agents par groupe${groupCountBadge} <span class="section-header-mic" title="Tous les groupes sont vocaux"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="22"/></svg></span></span>
                <span class="hotkey-cell hotkey-cell--global"
                      onclick="startInlineHotkey('${globalRouter.id}', this, event)">
                    <span style="opacity:0.5; margin-right:0.3rem;">—</span><span class="${hkClass}">${hkText}</span>
                </span>
            </div>`;
        } else {
            html += `<div class="agents-section-header">Agents par groupe${groupCountBadge}</div>`;
        }
        normalOrchestrators.forEach(o => { html += renderDomainCard(o); });
    }


    if (!html) html = renderEmptyState();
    container.innerHTML = html;
}

function filterAgents() {
    renderAgents();
}

function openModal(id) {
    document.getElementById(id).classList.add('open');
}

function closeModal(id) {
    document.getElementById(id).classList.remove('open');
}

async function openCreate() {
    if (planLimits && planLimits.max_agents !== -1) {
        const agentCount = allItems.filter(a => !a.archived).length;
        if (agentCount >= planLimits.max_agents) {
            alert(`Limite atteinte (${agentCount}/${planLimits.max_agents} agents). Passez au plan supérieur.`);
            return;
        }
    }
    document.getElementById('modal-title').textContent = 'Créer un agent';
    document.getElementById('agent-id').value = '';
    document.getElementById('agent-name').value = '';
    document.getElementById('agent-description').value = '';
    document.getElementById('agent-prompt').value = '';
    document.getElementById('agent-output-mode').value = 'capsule';
    document.getElementById('agent-tts-enabled').checked = false;
    onOutputModeChange();
    document.getElementById('agent-voice').checked = true;
    document.getElementById('agent-web-search-enabled').checked = false;
    document.getElementById('agent-memory-enabled').checked = false;
    document.getElementById('agent-llm-tier').value = 'thinking';
    document.getElementById('agent-tier-section').style.display = '';
    onTierChange();
    const memWriteMode = document.getElementById('memory-write-mode');
    if (memWriteMode) memWriteMode.value = 'none';
    const memMaxWrites = document.getElementById('memory-max-writes');
    if (memMaxWrites) memMaxWrites.value = '1';
    toggleMemoryOptions();
    // Bouton publier masqué en création
    const btnPublish = document.getElementById('btn-publish-agent');
    if (btnPublish) btnPublish.style.display = 'none';
    openModal('modal-agent');
}

function showUpgradeModal(reason) {
    const messages = {
        groups: "Organise plusieurs groupes de capacites (email, agenda, recherche avancee...) avec le plan Starter. Chaque groupe est un ensemble d'agents specialises accessible via un raccourci vocal unique.",
    };
    const titles = {
        groups: "Groupes supplementaires — Plan Starter",
    };
    document.getElementById('upgrade-modal-title').textContent = titles[reason] || 'Fonctionnalite Starter';
    document.getElementById('upgrade-modal-message').textContent = messages[reason] || 'Cette fonctionnalite est disponible avec le plan Starter.';
    openModal('modal-upgrade');
}

function openCreateGroup() {
    if (planLimits && planLimits.max_groups !== undefined && planLimits.max_groups !== -1) {
        const groupCount = allItems.filter(a => a.is_orchestrator && !a.archived && a.id !== 'global-router').length;
        if (groupCount >= planLimits.max_groups) {
            showUpgradeModal('groups');
            return;
        }
    }
    document.getElementById('group-id').value = '';
    document.getElementById('group-modal-title').textContent = 'Créer un groupe';
    document.getElementById('group-save-btn').textContent = 'Créer';
    document.getElementById('group-name').value = '';
    document.getElementById('group-description').value = '';
    populateGroupMcpSelect('');
    onGroupMcpChange('');
    openModal('modal-group');
}

// Sélecteur de connecteur unifié de la modale : MCP + scripts (optgroups).
// ``selectedValue`` = "" | "mcp:<id>" | "script:<id>".
function populateGroupMcpSelect(selectedValue) {
    const select = document.getElementById('group-mcp');
    const mcpGroup = select.closest('.form-group');
    // En Free, availableMcps contient les capacités natives (filtré côté backend).
    const enabledMcps = availableMcps.filter(m => m.enabled);
    // Scripts connecteurs : reserves aux plans payants (Free exclu).
    const gated = planLimits && planLimits.max_mcps === 0;
    const scripts = gated ? [] : availableScriptConnectors;
    // Aucun connecteur ni script disponible → masquer le picker.
    if (enabledMcps.length === 0 && scripts.length === 0) {
        if (mcpGroup) mcpGroup.style.display = 'none';
        return;
    }
    if (mcpGroup) mcpGroup.style.display = '';
    let html = '<option value="">Aucun (agents simples)</option>';
    if (enabledMcps.length) {
        html += '<optgroup label="Connecteurs">' +
            enabledMcps.map(m => `<option value="mcp:${m.id}" ${('mcp:' + m.id) === selectedValue ? 'selected' : ''}>${m.name}</option>`).join('') +
            '</optgroup>';
    }
    if (scripts.length) {
        html += '<optgroup label="Scripts">' +
            scripts.map(s => `<option value="script:${s.id}" ${('script:' + s.id) === selectedValue ? 'selected' : ''}>${s.name}</option>`).join('') +
            '</optgroup>';
    }
    select.innerHTML = html;
}

// Valeur unifiée du connecteur courant d'un groupe (pour pré-sélection).
function currentConnectorValue(a) {
    const m = (a.mcps || [])[0];
    if (m) return 'mcp:' + m;
    const s = (a.script_connectors || [])[0];
    if (s) return 'script:' + s;
    return '';
}

async function saveGroup() {
    const id = document.getElementById('group-id').value;
    const name = document.getElementById('group-name').value.trim();
    if (!name) { showToast('Nom requis', 'toast-warning'); return; }
    const description = document.getElementById('group-description').value;
    // Connecteur unifié : "mcp:<id>" ou "script:<id>" (un seul connecteur).
    const connVal = document.getElementById('group-mcp').value;
    const mcpId = connVal.startsWith('mcp:') ? connVal.slice(4) : '';
    const scriptId = connVal.startsWith('script:') ? connVal.slice(7) : '';
    const scriptConnectors = scriptId ? [scriptId] : [];

    // Resoudre allowed_tools depuis le perimetre selectionne
    const scopeSelect = document.getElementById('group-tool-scope');
    let allowedTools = [];
    if (scopeSelect && scopeSelect.value && scopeSelect.dataset.toolSets) {
        const sets = JSON.parse(scopeSelect.dataset.toolSets);
        const selected = sets.find(s => s.id === scopeSelect.value);
        if (selected) allowedTools = selected.tools || [];
    }

    try {
        let res;
        if (id) {
            // Edition
            const writeMode = mcpId ? document.getElementById('group-write-mode').value : 'none';
            const maxWrites = parseInt(document.getElementById('group-max-writes').value) || 1;
            res = await apiFetch(`/api/agents/${id}`, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    name: name,
                    description: description,
                    mcps: mcpId ? [mcpId] : [],
                    script_connectors: scriptConnectors,
                    allowed_tools: allowedTools,
                    write_mode: writeMode,
                    max_writes: maxWrites,
                })
            });
        } else {
            // Creation
            res = await apiFetch('/api/agents', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    name: name,
                    description: description,
                    system_prompt: '',
                    output_mode: 'capsule',
                    is_orchestrator: true,
                    orchestrator_mode: 'router',
                    orchestrator_scope: [],
                    mcps: mcpId ? [mcpId] : [],
                    script_connectors: scriptConnectors,
                    allowed_tools: allowedTools,
                    requires_voice: true,
                    capture_selection: true,
                    capture_window: true,
                    capture_screenshot: 'auto',
                    llm_tier: 'thinking',
                    write_mode: mcpId ? document.getElementById('group-write-mode').value : 'none',
                    max_writes: parseInt(document.getElementById('group-max-writes').value) || 1,
                })
            });
        }
        const json = await res.json();
        if (json.ok) {
            closeModal('modal-group');
            showToast(id ? 'Groupe modifié' : 'Groupe créé', 'toast-success');
            loadAgents();
        } else {
            showToast(json.error || 'Erreur', 'toast-error');
        }
    } catch (e) {
        showToast('Erreur sauvegarde', 'toast-error');
    }
}

async function editItem(id, type) {
    const a = allItems.find(x => x.id === id);
    if (!a) return;

    // Groupes (orchestrateurs) → modal groupe
    if (a.is_orchestrator) {
        document.getElementById('group-id').value = a.id;
        document.getElementById('group-modal-title').textContent = 'Modifier ' + a.name;
        document.getElementById('group-save-btn').textContent = 'Enregistrer';
        document.getElementById('group-name').value = a.name;
        document.getElementById('group-description').value = a.description || '';
        const connectorVal = currentConnectorValue(a);
        populateGroupMcpSelect(connectorVal);
        // Charger write_mode existant (sections masquées si script/aucun)
        onGroupMcpChange(connectorVal);
        if (a.write_mode && a.write_mode !== 'none') {
            document.getElementById('group-write-mode').value = a.write_mode;
            document.getElementById('group-max-writes').value = a.max_writes || 1;
            toggleGroupMaxWrites();
        }
        openModal('modal-group');
        return;
    }

    // Agents → modal agent
    document.getElementById('modal-title').textContent = 'Modifier ' + a.name;
    document.getElementById('agent-id').value = a.id;
    document.getElementById('agent-name').value = a.name;
    document.getElementById('agent-description').value = a.description || '';
    document.getElementById('agent-prompt').value = a.system_prompt || '';
    document.getElementById('agent-output-mode').value = a.output_mode || 'capsule';
    document.getElementById('agent-tts-enabled').checked = a.tts_enabled ?? false;
    onOutputModeChange();

    // Tier IA — masquer si l'agent est dans un groupe (opaque)
    const isInGroup = allItems.some(o => o.is_orchestrator && o.orchestrator_scope?.includes(a.id));
    const tierSection = document.getElementById('agent-tier-section');
    tierSection.style.display = isInGroup ? 'none' : '';
    document.getElementById('agent-llm-tier').value = a.llm_tier || 'thinking';
    onTierChange();

    // Options
    document.getElementById('agent-voice').checked = a.requires_voice !== false;
    document.getElementById('agent-web-search-enabled').checked = a.web_search_enabled ?? false;
    document.getElementById('agent-memory-enabled').checked = a.memory_enabled ?? false;
    const memWriteMode = document.getElementById('memory-write-mode');
    if (memWriteMode) memWriteMode.value = a.memory_write_mode || 'none';
    const memMaxWrites = document.getElementById('memory-max-writes');
    if (memMaxWrites) memMaxWrites.value = a.memory_max_writes || 1;
    toggleMemoryOptions();
    toggleMemoryMaxWrites();

    renderLibraryPromptInfo(a);

    // Bouton publier : visible uniquement en mode édition + Supabase configuré
    const btnPublish = document.getElementById('btn-publish-agent');
    if (btnPublish) btnPublish.style.display = supabaseConfigured ? '' : 'none';

    openModal('modal-agent');
}

// === Publication bibliothèque (intégrateur) ===

async function publishToLibrary() {
    const agentId = document.getElementById('agent-id').value;
    if (!agentId) return;
    const a = allItems.find(x => x.id === agentId);
    if (!a) return;

    const changelog = prompt('Note de version (facultatif) :') ?? '';
    const btn = document.getElementById('btn-publish-agent');
    if (btn) { btn.disabled = true; btn.textContent = '...'; }

    try {
        const resp = await fetch('/api/library/publish', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-Vicsia-Token': window.VICSIA_TOKEN || '' },
            body: JSON.stringify({
                id: agentId,
                type: 'agent',
                data: {
                    name: a.name,
                    system_prompt: a.system_prompt || '',
                    description: a.description || '',
                    output_mode: a.output_mode || 'capsule',
                    llm_tier: a.llm_tier || 'thinking',
                    requires_voice: a.requires_voice !== false,
                    web_search_enabled: a.web_search_enabled ?? false,
                    memory_enabled: a.memory_enabled ?? false,
                },
                changelog,
            }),
        });
        const body = await resp.json();
        if (body.ok) {
            alert(`✓ Publié dans la bibliothèque — v${body.version}${body.created ? ' (nouveau)' : ' (mise à jour)'}`);
        } else {
            alert('Erreur : ' + (body.error || 'inconnu'));
        }
    } catch (e) {
        alert('Erreur réseau : ' + e.message);
    } finally {
        if (btn) { btn.disabled = false; btn.textContent = 'Publier'; }
    }
}

// === Library prompt updates ===

let _diffPendingAgentId = null;

function renderLibraryPromptInfo(a) {
    const el = document.getElementById('library-prompt-info');
    if (!el) return;
    const status = a && a.library_status;
    if (!status || !a.library_id) {
        el.style.display = 'none';
        el.innerHTML = '';
        return;
    }
    el.style.display = '';

    const parts = [];
    if (status.has_update && status.customized) {
        parts.push(`<span class="lib-badge lib-badge-update">v${status.latest_version} disponible</span>`);
        parts.push(`<span class="text-muted text-sm">Vous avez personnalisé ce prompt. </span>`);
        parts.push(`<a href="#" class="lib-link" onclick="event.preventDefault(); openLibraryDiff('${a.id}')">Voir les changements</a>`);
    } else if (status.customized) {
        parts.push(`<span class="text-muted text-sm">Prompt personnalisé (basé sur le défaut v${status.current_version}). </span>`);
        parts.push(`<a href="#" class="lib-link" onclick="event.preventDefault(); resetPromptToLibrary('${a.id}')">Réinitialiser au défaut</a>`);
    } else {
        parts.push(`<span class="text-muted text-sm">Prompt par défaut v${status.current_version}</span>`);
    }
    el.innerHTML = parts.join(' ');
}

async function openLibraryDiff(agentId) {
    try {
        const res = await apiFetch(`/api/agents/${agentId}/library-diff`);
        const data = await res.json();
        if (!data.ok) {
            alert(data.error || 'Erreur chargement du diff');
            return;
        }
        _diffPendingAgentId = agentId;
        document.getElementById('diff-modal-changelog').textContent = data.changelog
            ? `Changement : ${data.changelog}`
            : `Mise à jour disponible (v${data.current_version} → v${data.latest_version}).`;
        document.getElementById('diff-current').textContent = data.current_prompt || '';
        document.getElementById('diff-library').textContent = data.library_prompt || '';
        openModal('modal-library-diff');
    } catch (e) {
        console.error(e);
        alert('Erreur réseau');
    }
}

async function adoptLibraryPrompt() {
    if (!_diffPendingAgentId) return;
    const agentId = _diffPendingAgentId;
    if (!confirm('Remplacer votre prompt personnalisé par la nouvelle version par défaut ?')) return;
    try {
        const res = await apiFetch(`/api/agents/${agentId}/reset-to-library`, {method: 'POST'});
        const data = await res.json();
        if (!data.ok) {
            alert(data.error || 'Erreur');
            return;
        }
        closeModal('modal-library-diff');
        closeModal('modal-agent');
        await loadAgents();
    } catch (e) {
        console.error(e);
        alert('Erreur réseau');
    } finally {
        _diffPendingAgentId = null;
    }
}

async function resetPromptToLibrary(agentId) {
    if (!confirm('Réinitialiser le prompt au défaut ? Vos personnalisations seront perdues.')) return;
    try {
        const res = await apiFetch(`/api/agents/${agentId}/reset-to-library`, {method: 'POST'});
        const data = await res.json();
        if (!data.ok) {
            alert(data.error || 'Erreur');
            return;
        }
        closeModal('modal-agent');
        await loadAgents();
    } catch (e) {
        console.error(e);
        alert('Erreur réseau');
    }
}

function getLibraryUpdateBadge(a) {
    const s = a && a.library_status;
    if (!s || !s.has_update || !s.customized) return '';
    return `<span class="lib-badge lib-badge-update" title="Mise à jour disponible (v${s.latest_version})" onclick="event.stopPropagation(); openLibraryDiff('${a.id}')">MAJ v${s.latest_version}</span>`;
}

async function saveItem() {
    const id = document.getElementById('agent-id').value;
    const hasVoice = document.getElementById('agent-voice').checked;

    const data = {
        name: document.getElementById('agent-name').value,
        description: document.getElementById('agent-description').value,
        system_prompt: document.getElementById('agent-prompt').value,
        output_mode: document.getElementById('agent-output-mode').value,
        tts_enabled: document.getElementById('agent-tts-enabled').checked,
        requires_voice: hasVoice,
        capture_selection: true,
        capture_window: true,
        capture_screenshot: hasVoice ? 'auto' : 'never',
        llm_tier: document.getElementById('agent-llm-tier').value,
        web_search_enabled: document.getElementById('agent-web-search-enabled').checked,
        memory_enabled: document.getElementById('agent-memory-enabled').checked,
        memory_write_mode: document.getElementById('memory-write-mode')?.value || 'none',
        memory_max_writes: parseInt(document.getElementById('memory-max-writes')?.value) || 1,
    };

    try {
        if (id) {
            const putRes = await apiFetch(`/api/agents/${id}`, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            });
            const putJson = await putRes.json();
            if (!putJson.ok && putJson.detach_required) {
                const confirmed = window.confirm(
                    'Personnaliser cet agent le détache des mises à jour automatiques. ' +
                    'Vous pourrez à tout moment revenir à la version bibliothèque. Continuer ?'
                );
                if (!confirmed) {
                    return;
                }
                const retryRes = await apiFetch(`/api/agents/${id}`, {
                    method: 'PUT',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({...data, confirm_detach: true})
                });
                const retryJson = await retryRes.json();
                if (!retryJson.ok) {
                    showToast('Erreur: ' + (retryJson.error || 'Erreur inconnue'), 'toast-error', 4000);
                    return;
                }
            } else if (!putJson.ok) {
                showToast('Erreur: ' + (putJson.error || 'Erreur inconnue'), 'toast-error', 4000);
                return;
            }
        } else {
            const res = await apiFetch('/api/agents', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            });
            const json = await res.json();
            if (!json.ok) {
                showToast('Erreur: ' + (json.error || 'Erreur inconnue'), 'toast-error', 4000);
                return;
            }
        }
        closeModal('modal-agent');
        showToast(id ? 'Agent modifié' : 'Agent créé', 'toast-success', 2000);
        loadAgents();
    } catch (e) {
        console.error('Erreur sauvegarde:', e);
        showToast('Erreur sauvegarde', 'toast-error', 3000);
    }
}

async function toggleFav(id, type) {
    const a = allItems.find(x => x.id === id);
    if (!a) return;
    const path = '/api/agents';
    try {
        await apiFetch(`${path}/${id}/favorite`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({favorite: !a.favorite})
        });
        loadAgents();
    } catch (e) {
        console.error('Erreur toggle fav:', e);
    }
}

async function archiveItem(id, type) {
    if (!confirm('Archiver cet élément ?')) return;
    const path = '/api/agents';
    try {
        await apiFetch(`${path}/${id}/archive`, {method: 'POST'});
        loadAgents();
    } catch (e) {
        console.error('Erreur archive:', e);
    }
}

function openLibrary() {
    openModal('modal-library');
    loadArchives();
}

async function deleteItem(id, type) {
    if (!confirm('Supprimer définitivement ?')) return;
    const path = '/api/agents';
    try {
        await apiFetch(`${path}/${id}`, {method: 'DELETE'});
        loadAgents();
    } catch (e) {
        console.error('Erreur suppression:', e);
    }
}

async function restoreItem(id, type) {
    const path = '/api/agents';
    try {
        await apiFetch(`${path}/${id}/restore`, {method: 'POST'});
        loadAgents();
        loadArchives();
    } catch (e) {
        console.error('Erreur restauration:', e);
    }
}

function showTab(tabName) {
    document.querySelectorAll('.tab').forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected', 'false'); });
    document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');

    const activeTab = document.querySelector(`.tab[data-tab="${tabName}"]`);
    activeTab.classList.add('active');
    activeTab.setAttribute('aria-selected', 'true');
    document.getElementById(`tab-${tabName}`).style.display = 'block';

    if (tabName === 'archives') {
        loadArchives();
    }
}

async function loadArchives() {
    const list = document.getElementById('archives-list');
    list.innerHTML = '<p class="text-muted text-center">Chargement...</p>';

    // Les archives sont les items avec enabled=false
    const archived = allItems.filter(a => !a.enabled);

    if (archived.length === 0) {
        list.innerHTML = `
            <div class="empty-state">
                <p class="text-muted">Aucun élément archivé</p>
            </div>`;
        return;
    }

    list.innerHTML = archived.map(a => `
        <div class="library-item">
            <div class="library-item-info">
                <strong>${a.name}</strong>
                ${getAgentBadge(a)}
            </div>
            <div class="actions">
                <button class="btn btn-sm btn-ghost" onclick="editItem('${a.id}', 'agent')">Éditer</button>
                <button class="btn btn-sm btn-secondary" onclick="restoreItem('${a.id}', 'agent')">Restaurer</button>
                <button class="btn btn-sm btn-ghost text-danger" onclick="deleteItem('${a.id}', 'agent')">Suppr.</button>
            </div>
        </div>`
    ).join('');
}

// Toast notification helper
function showToast(message, className = 'toast-success', duration = 2000) {
    const toast = document.createElement('div');
    toast.className = `toast ${className}`;
    toast.textContent = message;
    toast.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 12px 16px;
        border-radius: 4px;
        font-size: 14px;
        z-index: 10000;
        animation: slideIn 0.3s ease-out;
    `;

    if (className === 'toast-success') {
        toast.style.backgroundColor = '#10b981';
        toast.style.color = 'white';
    } else if (className === 'toast-warning') {
        toast.style.backgroundColor = '#f59e0b';
        toast.style.color = 'white';
    } else if (className === 'toast-error') {
        toast.style.backgroundColor = '#ef4444';
        toast.style.color = 'white';
    }

    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), duration);
}

// MCPs doivent etre charges AVANT le rendu agents (sinon le select MCP est vide)
loadMcps().then(() => loadAgents());
</script>
{% endblock %}