{% extends "base.html" %}

{% block content %}
<section class="agents-section">
    <!-- Tabs Header -->
    <div class="tabs-container">
        <div class="tabs-header">
            <button class="tab-btn active" data-tab="profiles" onclick="switchTab('profiles')">
                <span class="tab-icon">📝</span> Agents simples
            </button>
            <button class="tab-btn" data-tab="agents" onclick="switchTab('agents')">
                <span class="tab-icon">🔌</span> Agents connectes
            </button>
        </div>
        <div class="section-actions">
            <button class="btn btn-primary" onclick="openLibraryModal()">+ Bibliotheque</button>
            <button class="btn" onclick="openNewItem()">+ Creer</button>
        </div>
    </div>

    <!-- Tab: Profiles (Agents simples) -->
    <div id="tab-profiles" class="tab-content active">
        <p class="section-desc">Agents sans connexion externe (transcription, traduction, redaction...).</p>

        <div class="table-toolbar">
            <div class="table-search">
                <span>🔍</span>
                <input type="text" id="profiles-search" placeholder="Rechercher..." oninput="filterProfiles()">
            </div>
            <div class="table-filters">
                <button class="filter-btn active" data-filter="all" data-type="profiles" onclick="setProfileFilter('all')">Tous</button>
                <button class="filter-btn" data-filter="favorites" data-type="profiles" onclick="setProfileFilter('favorites')">★ Favoris</button>
            </div>
        </div>

        <div class="data-table-container">
            <table class="data-table" id="profiles-table">
                <thead>
                    <tr>
                        <th class="col-favorite"></th>
                        <th class="col-name sortable" data-sort="name" onclick="sortProfilesTable('name')">
                            Nom <span class="sort-icon">↕</span>
                        </th>
                        <th class="col-hotkey">Raccourci</th>
                        <th class="col-type">Type</th>
                        <th class="col-usage sortable" data-sort="usage" onclick="sortProfilesTable('usage')">
                            Util. <span class="sort-icon">↕</span>
                        </th>
                        <th class="col-actions"></th>
                    </tr>
                </thead>
                <tbody id="profiles-tbody">
                    <tr class="empty-row"><td colspan="6">Chargement...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Tab: Agents (Agents connectes) -->
    <div id="tab-agents" class="tab-content" style="display: none;">
        <p class="section-desc">Agents specialises avec connexions externes (MCPs).</p>

        <div class="table-toolbar">
            <div class="table-search">
                <span>🔍</span>
                <input type="text" id="agents-search" placeholder="Rechercher..." oninput="filterAgents()">
            </div>
            <div class="table-filters">
                <button class="filter-btn active" data-filter="all" data-type="agents" onclick="setFilter('all')">Tous</button>
                <button class="filter-btn" data-filter="favorites" data-type="agents" onclick="setFilter('favorites')">★ Favoris</button>
                <button class="filter-btn" data-filter="chain" data-type="agents" onclick="setFilter('chain')">Chaines</button>
            </div>
        </div>

        <div class="data-table-container">
            <table class="data-table" id="agents-table">
                <thead>
                    <tr>
                        <th class="col-favorite"></th>
                        <th class="col-name sortable" data-sort="name" onclick="sortTable('name')">
                            Nom <span class="sort-icon">↕</span>
                        </th>
                        <th class="col-hotkey">Raccourci</th>
                        <th class="col-type">Type</th>
                        <th class="col-usage sortable" data-sort="usage" onclick="sortTable('usage')">
                            Util. <span class="sort-icon">↕</span>
                        </th>
                        <th class="col-actions"></th>
                    </tr>
                </thead>
                <tbody id="agents-tbody">
                    <tr class="empty-row"><td colspan="6">Chargement...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Modal pour lancer un agent -->
<div id="run-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="run-modal-title">Lancer l'agent</h3>
            <button class="modal-close" onclick="closeRunModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-row">
                <label for="run-input">Texte a envoyer (simule la voix)</label>
                <textarea id="run-input" class="textarea-field" rows="3" placeholder="Ex: Recherche les dernières actualités sur l'IA..."></textarea>
            </div>
            <div id="run-result" class="run-result" style="display: none;">
                <h4>Resultat:</h4>
                <pre id="run-result-text"></pre>
            </div>
            <div id="run-error" class="run-error" style="display: none;"></div>
        </div>
        <div class="modal-footer">
            <button id="btn-run-agent" class="btn btn-primary" onclick="executeAgent()">Lancer</button>
            <button class="btn btn-secondary" onclick="closeRunModal()">Fermer</button>
        </div>
    </div>
</div>

<!-- Library Modal -->
<div id="library-modal" class="modal library-modal" style="display: none;">
    <div class="modal-backdrop" onclick="closeLibraryModal()"></div>
    <div class="modal-content library-modal-content">
        <div class="modal-header">
            <h3>Bibliotheque d'agents</h3>
            <button class="modal-close" onclick="closeLibraryModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div id="library-loading" class="loading-indicator">Chargement...</div>
            <div id="library-categories"></div>
        </div>
    </div>
</div>

<section id="editor-section" class="editor-section" style="display: none;">
    <h2 id="editor-title">Nouvel Agent</h2>
    <div class="editor-form">

        <!-- SECTION: Informations -->
        <div class="form-section">
            <h3>Informations</h3>
            <div class="form-grid">
                <div class="form-row">
                    <label for="editor-name">Nom</label>
                    <input type="text" id="editor-name" class="input-field" placeholder="Mon Agent">
                </div>
                <div class="form-row">
                    <label for="editor-hotkey">Hotkey</label>
                    <select id="editor-hotkey" class="input-field">
                        <option value="">Automatique</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <label class="checkbox-label">
                    <input type="checkbox" id="editor-enabled" checked>
                    <span>Actif</span>
                </label>
            </div>
        </div>

        <!-- SECTION: Entrees (accordéon) -->
        <details class="settings-collapse form-accordion">
            <summary class="settings-collapse-header">Entrées</summary>
            <div class="settings-collapse-content">
                <div class="checkbox-grid">
                    <label class="checkbox-item always-on">
                        <input type="checkbox" checked disabled>
                        <div class="checkbox-content">
                            <span class="checkbox-title">Voix</span>
                            <span class="checkbox-desc">Transcription vocale</span>
                        </div>
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox" id="editor-capture-selection" checked>
                        <div class="checkbox-content">
                            <span class="checkbox-title">Selection</span>
                            <span class="checkbox-desc">Texte selectionne</span>
                        </div>
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox" id="editor-capture-window" checked>
                        <div class="checkbox-content">
                            <span class="checkbox-title">Contexte</span>
                            <span class="checkbox-desc">Titre fenetre</span>
                        </div>
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox" id="editor-capture-screenshot">
                        <div class="checkbox-content">
                            <span class="checkbox-title">Screenshot</span>
                            <span class="checkbox-desc">Capture ecran</span>
                        </div>
                    </label>
                </div>
            </div>
        </details>

        <!-- SECTION: Traitement (accordéon ouvert par défaut) -->
        <details class="settings-collapse form-accordion" open>
            <summary class="settings-collapse-header">
                <span>Traitement</span>
                <span class="badge-mcp">MCP</span>
            </summary>
            <div class="settings-collapse-content">
                <!-- Toggle Mode Simple / Chaîne -->
                <div class="mode-toggle">
                    <button type="button" id="mode-simple" class="active" onclick="setMode('simple')">Simple</button>
                    <button type="button" id="mode-chain" onclick="setMode('chain')">Chaine</button>
                </div>

                <!-- Section Agent Simple -->
                <div id="simple-section">
                    <div class="form-row">
                        <label>MCPs utilises</label>
                        <div id="mcp-checkboxes" class="mcp-list">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                    <div class="form-row">
                        <label for="editor-prompt">Prompt systeme</label>
                        <textarea id="editor-prompt" class="textarea-field" rows="6" placeholder="Tu es un agent specialise..."></textarea>
                    </div>
                </div>

                <!-- Section Chaîne avec Modules -->
                <div id="chain-section" style="display: none;">
                    <div class="chain-info">
                        <p class="info-text">Les modules du meme step s'executent en parallele. Cochez "Sortie finale" sur le module qui produit le resultat.</p>
                        <details class="placeholders-help">
                            <summary>Placeholders disponibles</summary>
                            <table class="placeholders-table">
                                <tr><td><code>{INPUT}</code></td><td>Transcription vocale</td></tr>
                                <tr><td><code>{SELECTION}</code></td><td>Texte selectionne</td></tr>
                                <tr><td><code>{WINDOW}</code></td><td>Titre fenetre</td></tr>
                                <tr><td><code>{OUT_X}</code></td><td>Sortie module X</td></tr>
                            </table>
                        </details>
                    </div>
                    <div class="form-row">
                        <label for="editor-step-timeout">Timeout par step</label>
                        <input type="number" id="editor-step-timeout" class="input-field" value="60" min="10" max="300" style="width: 100px;">
                        <span class="form-hint">secondes</span>
                    </div>
                    <div class="form-row">
                        <label>Modules</label>
                        <div id="modules-container" class="modules-container">
                            <!-- Modules seront ajoutés dynamiquement -->
                        </div>
                        <button type="button" class="add-module-btn" id="add-module-btn" onclick="addModule()">+ Ajouter un module</button>
                    </div>
                </div>
            </div>
        </details>

        <!-- SECTION: Sortie (accordéon) -->
        <details class="settings-collapse form-accordion">
            <summary class="settings-collapse-header">Sortie</summary>
            <div class="settings-collapse-content">
                <div class="radio-group">
                    <label class="radio-item">
                        <input type="radio" name="output_mode" value="popup" checked onchange="document.getElementById('editor-output').value='popup'">
                        <div class="radio-content">
                            <span class="radio-title">Popup</span>
                            <span class="radio-desc">Fenetre flottante</span>
                        </div>
                    </label>
                    <label class="radio-item">
                        <input type="radio" name="output_mode" value="notification" onchange="document.getElementById('editor-output').value='notification'">
                        <div class="radio-content">
                            <span class="radio-title">Notification</span>
                            <span class="radio-desc">Affiche une notification</span>
                        </div>
                    </label>
                    <label class="radio-item">
                        <input type="radio" name="output_mode" value="paste" onchange="document.getElementById('editor-output').value='paste'">
                        <div class="radio-content">
                            <span class="radio-title">Coller</span>
                            <span class="radio-desc">Colle dans l'app active</span>
                        </div>
                    </label>
                    <label class="radio-item">
                        <input type="radio" name="output_mode" value="clipboard" onchange="document.getElementById('editor-output').value='clipboard'">
                        <div class="radio-content">
                            <span class="radio-title">Clipboard</span>
                            <span class="radio-desc">Copie sans coller</span>
                        </div>
                    </label>
                </div>
                <!-- Hidden select for form data -->
                <select id="editor-output" class="input-field" style="display: none;">
                    <option value="popup">Popup</option>
                    <option value="notification">Notification</option>
                    <option value="paste">Coller</option>
                    <option value="clipboard">Clipboard</option>
                    <option value="vocal">Vocal</option>
                    <option value="none">Silencieux</option>
                </select>
            </div>
        </details>

        <div class="btn-group">
            <button class="btn" onclick="saveAgent()">Sauvegarder</button>
            <button class="btn btn-secondary" onclick="closeEditor()">Annuler</button>
            <button class="btn btn-danger" id="btn-delete" onclick="deleteAgent()" style="display: none;">Supprimer</button>
        </div>
    </div>
</section>

<!-- Profile Editor Section -->
<section id="profile-editor-section" class="editor-section" style="display: none;">
    <h2 id="profile-editor-title">Nouvel Agent Simple</h2>
    <div class="editor-form">
        <!-- Informations -->
        <div class="form-section">
            <h3>Informations</h3>
            <div class="form-grid">
                <div class="form-row">
                    <label for="profile-editor-name">Nom</label>
                    <input type="text" id="profile-editor-name" class="input-field" placeholder="Mon Agent">
                </div>
                <div class="form-row">
                    <label for="profile-editor-hotkey">Hotkey</label>
                    <select id="profile-editor-hotkey" class="input-field">
                        <option value="">Automatique</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <label for="profile-editor-description">Description</label>
                <input type="text" id="profile-editor-description" class="input-field" placeholder="Description courte">
            </div>
            <div class="form-row">
                <label class="checkbox-label">
                    <input type="checkbox" id="profile-editor-enabled" checked>
                    <span>Actif</span>
                </label>
            </div>
        </div>

        <!-- Entrees -->
        <details class="settings-collapse form-accordion">
            <summary class="settings-collapse-header">Entrees</summary>
            <div class="settings-collapse-content">
                <div class="checkbox-grid">
                    <label class="checkbox-item">
                        <input type="checkbox" id="profile-editor-requires-voice" checked>
                        <div class="checkbox-content">
                            <span class="checkbox-title">Voix</span>
                            <span class="checkbox-desc">Enregistrement vocal</span>
                        </div>
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox" id="profile-editor-capture-selection">
                        <div class="checkbox-content">
                            <span class="checkbox-title">Selection</span>
                            <span class="checkbox-desc">Texte selectionne</span>
                        </div>
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox" id="profile-editor-capture-clipboard">
                        <div class="checkbox-content">
                            <span class="checkbox-title">Clipboard</span>
                            <span class="checkbox-desc">Contenu copie</span>
                        </div>
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox" id="profile-editor-capture-context">
                        <div class="checkbox-content">
                            <span class="checkbox-title">Contexte</span>
                            <span class="checkbox-desc">Titre fenetre</span>
                        </div>
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox" id="profile-editor-capture-screenshot">
                        <div class="checkbox-content">
                            <span class="checkbox-title">Screenshot</span>
                            <span class="checkbox-desc">Capture ecran</span>
                        </div>
                    </label>
                </div>
            </div>
        </details>

        <!-- Traitement -->
        <details class="settings-collapse form-accordion" open>
            <summary class="settings-collapse-header">Traitement</summary>
            <div class="settings-collapse-content">
                <div class="form-row">
                    <label class="checkbox-label">
                        <input type="checkbox" id="profile-editor-use-llm" onchange="toggleProfilePromptField()">
                        <span>Utiliser LLM</span>
                    </label>
                </div>
                <div class="form-row" id="profile-prompt-row">
                    <label for="profile-editor-prompt">Prompt systeme</label>
                    <textarea id="profile-editor-prompt" class="textarea-field" rows="6" placeholder="Tu es un assistant..."></textarea>
                </div>
            </div>
        </details>

        <!-- Sortie -->
        <details class="settings-collapse form-accordion">
            <summary class="settings-collapse-header">Sortie</summary>
            <div class="settings-collapse-content">
                <div class="radio-group">
                    <label class="radio-item">
                        <input type="radio" name="profile_output_mode" value="paste" checked>
                        <div class="radio-content">
                            <span class="radio-title">Coller</span>
                            <span class="radio-desc">Colle dans l'app active</span>
                        </div>
                    </label>
                    <label class="radio-item">
                        <input type="radio" name="profile_output_mode" value="clipboard">
                        <div class="radio-content">
                            <span class="radio-title">Clipboard</span>
                            <span class="radio-desc">Copie sans coller</span>
                        </div>
                    </label>
                    <label class="radio-item">
                        <input type="radio" name="profile_output_mode" value="notification">
                        <div class="radio-content">
                            <span class="radio-title">Notification</span>
                            <span class="radio-desc">Affiche une notification</span>
                        </div>
                    </label>
                    <label class="radio-item">
                        <input type="radio" name="profile_output_mode" value="popup">
                        <div class="radio-content">
                            <span class="radio-title">Popup</span>
                            <span class="radio-desc">Fenetre flottante</span>
                        </div>
                    </label>
                </div>
            </div>
        </details>

        <div class="btn-group">
            <button class="btn" onclick="saveProfile()">Sauvegarder</button>
            <button class="btn btn-secondary" onclick="closeProfileEditor()">Annuler</button>
            <button class="btn btn-danger" id="btn-profile-delete" onclick="deleteCurrentProfile()" style="display: none;">Supprimer</button>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<style>
    /* Tabs */
    .tabs-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--border);
        padding-bottom: 0.5rem;
    }
    .tabs-header {
        display: flex;
        gap: 0.25rem;
    }
    .tab-btn {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.6rem 1rem;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--muted);
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    .tab-btn:hover {
        color: var(--text);
    }
    .tab-btn.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        font-weight: 600;
    }
    .tab-icon {
        font-size: 1.1rem;
    }
    .tab-content {
        display: none;
    }
    .tab-content.active {
        display: block;
    }
    .section-actions {
        display: flex;
        gap: 0.5rem;
    }
    .btn-primary {
        background: var(--accent);
        color: white;
        border: none;
    }
    .agents-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }
    .agent-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 1rem;
    }
    .agent-card:hover {
        border-color: var(--accent);
    }
    .agent-card.mcp-warning {
        border-color: var(--warning, #f59e0b);
        background: linear-gradient(135deg, var(--card-bg), rgba(245, 158, 11, 0.05));
    }
    .mcp-warning-badge {
        font-size: 0.9rem;
        margin-left: 0.5rem;
        cursor: help;
    }
    .agent-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    .agent-name {
        font-weight: 600;
        font-size: 1.1rem;
    }
    .agent-mcps {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin: 0.5rem 0;
    }
    .mcp-tag {
        background: var(--accent);
        color: white;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .mcp-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .mcp-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem;
        border-radius: 6px;
        background: var(--bg-alt);
    }
    .mcp-item.checked {
        background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
        border: 1px solid var(--accent);
    }
    .mcp-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .mcp-row label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }
    .mcp-desc {
        color: var(--muted);
        font-size: 0.85rem;
    }
    .mcp-config-hint {
        font-size: 0.8rem;
        color: var(--accent);
        padding-left: 1.5rem;
        font-style: italic;
    }
    .btn-danger {
        background: #dc3545;
        margin-left: auto;
    }
    .btn-danger:hover {
        background: #c82333;
    }
    .capture-options {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
        background: var(--bg);
        border-radius: 6px;
    }
    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }
    .checkbox-label input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
    }
    .output-badge {
        font-size: 0.75rem;
        padding: 0.15rem 0.4rem;
        border-radius: 4px;
        background: var(--bg);
        color: var(--muted);
    }
    .chain-badge {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        background: var(--accent);
        color: white;
        font-weight: 600;
        margin-left: 0.3rem;
    }
    .mode-toggle {
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem;
        background: var(--bg);
        border-radius: 6px;
        margin-bottom: 1rem;
    }
    .mode-toggle button {
        flex: 1;
        padding: 0.5rem 1rem;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--card-bg);
        color: var(--text);
        cursor: pointer;
    }
    .mode-toggle button.active {
        background: var(--accent);
        color: white;
        border-color: var(--accent);
    }
    .steps-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
    }
    .step-card {
        background: var(--bg-alt);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 1rem;
        position: relative;
    }
    .step-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    .step-number {
        font-weight: 600;
        color: var(--accent);
    }
    .step-remove {
        background: none;
        border: none;
        color: var(--danger, #dc3545);
        cursor: pointer;
        font-size: 1.2rem;
    }
    .add-step-btn {
        border: 2px dashed var(--border);
        background: transparent;
        color: var(--muted);
        padding: 1rem;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
    }
    .add-step-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }
    .add-step-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    /* === Styles pour les Modules === */
    .modules-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 0.5rem;
    }
    .module-card {
        background: var(--bg-alt);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 1rem;
        position: relative;
    }
    .module-card.step-1 { border-left: 3px solid #4CAF50; }
    .module-card.step-2 { border-left: 3px solid #2196F3; }
    .module-card.step-3 { border-left: 3px solid #9C27B0; }
    .module-card.step-4 { border-left: 3px solid #FF9800; }
    .module-card.step-5 { border-left: 3px solid #E91E63; }
    .module-card.step-6 { border-left: 3px solid #00BCD4; }
    .module-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }
    .module-id-badge {
        background: var(--accent);
        color: white;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 600;
    }
    .module-step-select {
        width: 80px;
        padding: 0.25rem;
    }
    .module-remove {
        background: none;
        border: none;
        color: var(--danger, #dc3545);
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0.25rem;
    }
    .module-inputs-section {
        margin-top: 0.75rem;
        padding: 0.5rem;
        background: var(--bg);
        border-radius: 6px;
    }
    .module-inputs-section label {
        font-size: 0.85rem;
        color: var(--muted);
        display: block;
        margin-bottom: 0.25rem;
    }
    .module-inputs-checkboxes {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .module-input-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.2rem 0.5rem;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 4px;
        font-size: 0.85rem;
    }
    .module-input-item.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
    .add-module-btn {
        border: 2px dashed var(--border);
        background: transparent;
        color: var(--muted);
        padding: 1rem;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        margin-top: 0.5rem;
    }
    .add-module-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }
    .add-module-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .module-card.is-final {
        border: 2px solid var(--accent);
        background: rgba(var(--accent-rgb, 99, 102, 241), 0.05);
    }
    .is-final-label {
        font-size: 0.85rem;
        padding: 0.2rem 0.5rem;
        background: var(--bg);
        border-radius: 4px;
    }
    .is-final-label input:checked + span {
        color: var(--accent);
        font-weight: 600;
    }
    .final-output-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
        background: var(--bg);
        border-radius: 6px;
    }
    .final-output-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.3rem 0.6rem;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 4px;
    }
    .chain-info {
        background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
        border: 1px solid var(--accent);
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    .chain-info .info-text {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text);
    }
    /* Agent card actions */
    .agent-actions {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
        display: flex;
        gap: 0.5rem;
    }
    .btn-sm {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }
    /* Modal styles */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    .modal-content {
        background: var(--card-bg);
        border-radius: 12px;
        width: 90%;
        max-width: 600px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border);
    }
    .modal-header h3 {
        margin: 0;
    }
    .modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--muted);
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }
    .modal-close:hover {
        color: var(--text);
    }
    .modal-body {
        padding: 1.5rem;
    }
    .modal-footer {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--border);
    }
    .run-result {
        margin-top: 1rem;
        padding: 1rem;
        background: rgba(76, 175, 80, 0.1);
        border: 1px solid var(--green, #4CAF50);
        border-radius: 6px;
    }
    .run-result h4 {
        margin: 0 0 0.5rem 0;
        color: var(--green, #4CAF50);
    }
    .run-result pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 0.9rem;
        max-height: 200px;
        overflow-y: auto;
    }
    .run-error {
        margin-top: 1rem;
        padding: 1rem;
        background: rgba(244, 67, 54, 0.1);
        border: 1px solid var(--red, #f44336);
        border-radius: 6px;
        color: var(--red, #f44336);
    }
    .placeholder-hint {
        font-size: 0.8rem;
        color: var(--muted);
        margin-top: 0.25rem;
    }
    .placeholders-help {
        margin-top: 0.75rem;
        font-size: 0.85rem;
    }
    .placeholders-help summary {
        cursor: pointer;
        color: var(--accent);
        font-weight: 500;
    }
    .placeholders-table {
        width: 100%;
        margin: 0.5rem 0;
        border-collapse: collapse;
    }
    .placeholders-table td {
        padding: 0.3rem 0.5rem;
        border-bottom: 1px solid var(--border);
    }
    .placeholders-table code {
        background: var(--bg);
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
        font-family: monospace;
        color: var(--accent);
    }
    .example-title {
        margin: 0.5rem 0 0.25rem;
        font-weight: 500;
    }
    .example-code {
        background: var(--bg);
        padding: 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
        overflow-x: auto;
        white-space: pre-wrap;
    }
    .restart-notice {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #059669;
        color: white;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .restart-notice .notice-text { flex: 1; }
    .restart-notice .btn {
        background: rgba(255,255,255,0.2);
        color: white;
        border: 1px solid rgba(255,255,255,0.3);
    }
    .restart-notice .btn:hover { background: rgba(255,255,255,0.3); }

    /* Library Modal */
    .library-modal {
        background: transparent;
        align-items: flex-start;
        padding-top: 3rem;
    }
    .modal-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
    }
    .library-modal-content {
        position: relative;
        max-width: 700px;
        max-height: 85vh;
        margin: 0 auto;
        z-index: 1;
    }
    .library-category {
        margin-bottom: 1.5rem;
    }
    .library-category-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
        font-size: 1rem;
        color: var(--text);
    }
    .library-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.6rem;
    }
    .library-item-card {
        background: var(--bg-alt, var(--card-bg));
        border: 2px solid var(--border);
        border-radius: 8px;
        padding: 0.75rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    .library-item-card:hover {
        border-color: var(--accent);
    }
    .library-item-card.exists {
        opacity: 0.5;
        cursor: default;
    }
    .library-item-name {
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.25rem;
        font-size: 0.95rem;
        color: var(--text);
    }
    .library-item-desc {
        font-size: 0.8rem;
        color: var(--muted);
        line-height: 1.3;
        margin-bottom: 0.4rem;
    }
    .library-item-badges {
        display: flex;
        gap: 0.3rem;
        flex-wrap: wrap;
    }
    .library-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
        background: var(--muted);
        color: white;
    }
    .library-badge.category {
        background: var(--accent);
    }
    .library-badge.exists {
        background: var(--green, #22c55e);
    }
    .library-badge.archived {
        background: var(--warning, #f59e0b);
    }
    .library-item-card.archived {
        opacity: 0.8;
        border-style: dashed;
    }
    .library-item-card.archived:hover {
        border-color: var(--accent);
        opacity: 1;
    }
    .loading-indicator {
        text-align: center;
        color: var(--muted);
        padding: 2rem;
    }
</style>
<script>
    // === STATE ===
    let agents = [];
    let profiles = {};
    let mcps = [];
    let availableHotkeys = [];
    let hotkeyPool = [];
    let currentAgentId = null;
    let currentProfileId = null;
    let currentMode = 'simple';  // 'simple' ou 'chain'
    let currentModules = [];
    let currentStepTimeout = 60;
    let currentTab = 'profiles';  // 'profiles' ou 'agents'
    const MAX_STEPS = 6;
    const MAX_MODULES = 10;
    const MAX_MODULES_PER_STEP = 4;

    // Table state - Agents
    let currentFilter = 'all';
    let currentSort = { field: 'name', dir: 'asc' };
    let searchQuery = '';

    // Table state - Profiles
    let profileFilter = 'all';
    let profileSort = { field: 'name', dir: 'asc' };
    let profileSearchQuery = '';

    // === TAB MANAGEMENT ===
    function switchTab(tab) {
        currentTab = tab;

        // Update tab buttons
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.tab === tab);
        });

        // Update tab content
        document.getElementById('tab-profiles').style.display = tab === 'profiles' ? 'block' : 'none';
        document.getElementById('tab-agents').style.display = tab === 'agents' ? 'block' : 'none';

        // Hide editors when switching
        document.getElementById('editor-section').style.display = 'none';
        document.getElementById('profile-editor-section').style.display = 'none';
    }

    function openNewItem() {
        if (currentTab === 'profiles') {
            openNewProfile();
        } else {
            openNewAgent();
        }
    }

    // === PROFILES FUNCTIONS ===
    async function fetchProfiles() {
        try {
            const res = await fetch('/api/profiles');
            profiles = await res.json();
            renderProfiles();
        } catch (e) {
            console.error('Erreur profiles:', e);
            document.getElementById('profiles-tbody').innerHTML = '<tr class="empty-row"><td colspan="6">Erreur de chargement</td></tr>';
        }
    }

    async function fetchProfileHotkeys() {
        try {
            const res = await fetch('/api/profiles/hotkeys');
            const data = await res.json();
            hotkeyPool = data.pool || [];
        } catch (e) {
            console.error('Erreur hotkeys:', e);
        }
    }

    function renderProfiles() {
        const tbody = document.getElementById('profiles-tbody');
        let filteredProfiles = Object.entries(profiles).filter(([id, p]) => !p.archived);

        // Apply search filter
        if (profileSearchQuery) {
            const q = profileSearchQuery.toLowerCase();
            filteredProfiles = filteredProfiles.filter(([id, p]) =>
                (p.name || '').toLowerCase().includes(q) ||
                (p.hotkey || '').toLowerCase().includes(q)
            );
        }

        // Apply category filter
        if (profileFilter === 'favorites') {
            filteredProfiles = filteredProfiles.filter(([id, p]) => p.favorite);
        }

        if (filteredProfiles.length === 0) {
            tbody.innerHTML = '<tr class="empty-row"><td colspan="6">Aucun agent simple. <a href="#" onclick="openLibraryModal(); return false;">Ajouter depuis la bibliotheque</a></td></tr>';
            return;
        }

        // Sort
        filteredProfiles.sort((a, b) => {
            const [, pA] = a;
            const [, pB] = b;
            // Favorites first
            if (pA.favorite && !pB.favorite) return -1;
            if (!pA.favorite && pB.favorite) return 1;

            let valA, valB;
            if (profileSort.field === 'usage') {
                valA = pA.use_count || 0;
                valB = pB.use_count || 0;
            } else {
                valA = (pA.name || '').toLowerCase();
                valB = (pB.name || '').toLowerCase();
            }

            if (profileSort.dir === 'asc') {
                return valA > valB ? 1 : -1;
            } else {
                return valA < valB ? 1 : -1;
            }
        });

        tbody.innerHTML = filteredProfiles.map(([id, p]) => renderProfileRow(id, p)).join('');
    }

    function renderProfileRow(id, profile) {
        const hotkey = profile.hotkey || '--';
        const favoriteIcon = profile.favorite ? '★' : '☆';
        const favoriteClass = profile.favorite ? 'favorite-btn active' : 'favorite-btn';
        const inactiveClass = !profile.enabled ? 'inactive' : '';

        // Type
        let typeLabel = profile.use_llm ? 'LLM' : 'Direct';

        // Usage count
        const usage = profile.use_count || 0;
        const usageHtml = usage > 0
            ? `<span class="usage-count">${usage}×</span>`
            : '<span class="usage-count muted">--</span>';

        // Description
        let desc = profile.description || '';
        if (desc.length > 50) desc = desc.substring(0, 50) + '...';

        return `
            <tr class="${inactiveClass}" data-id="${id}">
                <td class="col-favorite">
                    <button class="${favoriteClass}" onclick="event.stopPropagation(); toggleProfileFavorite('${id}')">${favoriteIcon}</button>
                </td>
                <td class="col-name" onclick="editProfile('${id}')">
                    <strong>${profile.name || id}</strong>
                    ${desc ? `<span class="name-desc">${desc}</span>` : ''}
                </td>
                <td class="col-hotkey"><kbd>${hotkey}</kbd></td>
                <td class="col-type"><span class="type-badge type-profile">${typeLabel}</span></td>
                <td class="col-usage">${usageHtml}</td>
                <td class="col-actions">
                    <div class="table-actions">
                        <button class="table-btn" onclick="launchProfile('${id}')" title="Lancer">▶</button>
                        <button class="table-btn" onclick="editProfile('${id}')" title="Editer">✎</button>
                        <button class="table-btn danger" onclick="deleteProfile('${id}')" title="Supprimer">×</button>
                    </div>
                </td>
            </tr>
        `;
    }

    function filterProfiles() {
        profileSearchQuery = document.getElementById('profiles-search').value;
        renderProfiles();
    }

    function setProfileFilter(filter) {
        profileFilter = filter;
        document.querySelectorAll('.filter-btn[data-type="profiles"]').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.filter === filter);
        });
        renderProfiles();
    }

    function sortProfilesTable(field) {
        if (profileSort.field === field) {
            profileSort.dir = profileSort.dir === 'asc' ? 'desc' : 'asc';
        } else {
            profileSort.field = field;
            profileSort.dir = 'asc';
        }

        document.querySelectorAll('#profiles-table th').forEach(th => {
            th.classList.remove('sorted');
            const icon = th.querySelector('.sort-icon');
            if (icon) icon.textContent = '↕';
        });

        const th = document.querySelector(`#profiles-table th[data-sort="${field}"]`);
        if (th) {
            th.classList.add('sorted');
            const icon = th.querySelector('.sort-icon');
            if (icon) icon.textContent = profileSort.dir === 'asc' ? '↑' : '↓';
        }

        renderProfiles();
    }

    async function toggleProfileFavorite(profileId) {
        try {
            const res = await fetch(`/api/profiles/${profileId}/favorite`, {method: 'POST'});
            const data = await res.json();
            if (data.ok) {
                if (profiles[profileId]) profiles[profileId].favorite = data.favorite;
                renderProfiles();
            }
        } catch (e) {
            console.error('Toggle favorite failed:', e);
        }
    }

    async function deleteProfile(profileId) {
        const profile = profiles[profileId];
        const name = profile?.name || profileId;

        if (!confirm(`Supprimer l'agent "${name}" ?`)) return;

        try {
            const res = await fetch(`/api/profiles/${profileId}`, {method: 'DELETE'});
            const result = await res.json();

            if (result.ok) {
                delete profiles[profileId];
                renderProfiles();
                if (libraryData) renderLibrary();
                showRestartNotice('Agent supprime');
            } else {
                alert('Erreur: ' + (result.error || 'Echec'));
            }
        } catch (e) {
            console.error('Erreur suppression:', e);
            alert('Erreur de connexion');
        }
    }

    async function launchProfile(profileId) {
        const profile = profiles[profileId];
        const name = profile?.name || profileId;

        try {
            const res = await fetch(`/api/profiles/${profileId}/launch`, {method: 'POST'});
            const result = await res.json();

            if (result.ok) {
                showRestartNotice(`Agent "${name}" lance`);
            } else {
                alert('Erreur: ' + (result.error || 'Echec'));
            }
        } catch (e) {
            console.error('Erreur lancement:', e);
            alert('Erreur de connexion');
        }
    }

    // === AGENTS FUNCTIONS ===
    async function fetchAgents() {
        try {
            const res = await fetch('/api/agents');
            agents = await res.json();
            renderAgents();
        } catch (e) {
            console.error('Erreur agents:', e);
            document.getElementById('agents-tbody').innerHTML = '<tr class="empty-row"><td colspan="6">Erreur de chargement</td></tr>';
        }
    }

    async function fetchMcps() {
        try {
            const res = await fetch('/api/mcps');
            mcps = await res.json();
            // Construire le mapping ID -> display_label
            mcps.forEach(m => {
                mcpDisplayLabels[m.id] = m.display_label || m.name || m.id;
            });
        } catch (e) {
            console.error('Erreur MCPs:', e);
        }
    }

    async function fetchHotkeys(excludeAgentId = null) {
        try {
            let url = '/api/agents/hotkeys';
            if (excludeAgentId) {
                url += `?exclude=${excludeAgentId}`;
            }
            const res = await fetch(url);
            const data = await res.json();
            availableHotkeys = data.available || [];
            return data;
        } catch (e) {
            console.error('Erreur hotkeys:', e);
            return { available: [], used: [], pool: [] };
        }
    }

    function renderHotkeySelect(selectedHotkey = '', excludeAgentId = null) {
        const select = document.getElementById('editor-hotkey');
        select.innerHTML = '<option value="">Automatique</option>';

        // Si on édite un agent avec un hotkey, l'ajouter en premier
        if (selectedHotkey && !availableHotkeys.includes(selectedHotkey)) {
            availableHotkeys.unshift(selectedHotkey);
        }

        for (const hk of availableHotkeys) {
            const opt = document.createElement('option');
            opt.value = hk;
            opt.textContent = hk;
            if (hk === selectedHotkey) {
                opt.selected = true;
            }
            select.appendChild(opt);
        }
    }

    // === Mode Toggle (Simple / Chaîne) ===
    function setMode(mode) {
        currentMode = mode;
        document.getElementById('mode-simple').classList.toggle('active', mode === 'simple');
        document.getElementById('mode-chain').classList.toggle('active', mode === 'chain');
        document.getElementById('simple-section').style.display = mode === 'simple' ? 'block' : 'none';
        document.getElementById('chain-section').style.display = mode === 'chain' ? 'block' : 'none';
    }

    // === Gestion des Modules ===
    function getNextModuleId() {
        if (currentModules.length === 0) return 1;
        return Math.max(...currentModules.map(m => m.id)) + 1;
    }

    function addModule() {
        if (currentModules.length >= MAX_MODULES) return;

        const newId = getNextModuleId();
        // Par defaut, step = max step existant (pour ajouter au dernier step)
        const maxStep = currentModules.length > 0 ? Math.max(...currentModules.map(m => m.step)) : 1;

        currentModules.push({
            id: newId,
            step: maxStep,
            name: `Module ${newId}`,
            mcps: [],
            system_prompt: '',
            inputs: [],
            notification: '',  // Message court pour les notifications
            is_final: false    // True = ce module produit la sortie finale
        });
        renderModules();
    }

    function removeModule(moduleId) {
        currentModules = currentModules.filter(m => m.id !== moduleId);
        // Retirer des inputs des autres modules
        currentModules.forEach(m => {
            m.inputs = m.inputs.filter(id => id !== moduleId);
        });
        renderModules();
    }

    function updateModule(moduleId, field, value) {
        const module = currentModules.find(m => m.id === moduleId);
        if (module) {
            if (field === 'step') {
                value = Math.max(1, Math.min(MAX_STEPS, parseInt(value) || 1));
            }
            module[field] = value;
            // Si on change le step, re-valider les inputs
            if (field === 'step') {
                module.inputs = module.inputs.filter(inputId => {
                    const inputModule = currentModules.find(m => m.id === inputId);
                    return inputModule && inputModule.step < value;
                });
            }
            renderModules();
        }
    }

    function toggleModuleMcp(moduleId, mcpId) {
        const module = currentModules.find(m => m.id === moduleId);
        if (!module) return;
        const mcpIndex = module.mcps.indexOf(mcpId);
        if (mcpIndex === -1) {
            module.mcps.push(mcpId);
        } else {
            module.mcps.splice(mcpIndex, 1);
        }
        renderModules();
    }

    function toggleModuleInput(moduleId, inputId) {
        const module = currentModules.find(m => m.id === moduleId);
        if (!module) return;
        const inputIndex = module.inputs.indexOf(inputId);
        if (inputIndex === -1) {
            module.inputs.push(inputId);
        } else {
            module.inputs.splice(inputIndex, 1);
        }
        renderModules();
    }

    function setFinalModule(moduleId) {
        // Un seul module peut etre final
        currentModules.forEach(m => {
            m.is_final = (m.id === moduleId);
        });
        renderModules();
    }

    function renderModules() {
        const container = document.getElementById('modules-container');
        const addBtn = document.getElementById('add-module-btn');

        container.innerHTML = currentModules.map(module => {
            // Modules disponibles comme inputs (step precedent uniquement)
            const availableInputs = currentModules.filter(m => m.step < module.step);

            return `
                <div class="module-card step-${module.step} ${module.is_final ? 'is-final' : ''}" data-module-id="${module.id}">
                    <div class="module-header">
                        <span class="module-id-badge">M${module.id}</span>
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <label style="font-size: 0.85rem;">Step:</label>
                            <select class="input-field module-step-select" onchange="updateModule(${module.id}, 'step', this.value)">
                                ${[1,2,3,4,5,6].map(s => `<option value="${s}" ${module.step === s ? 'selected' : ''}>${s}</option>`).join('')}
                            </select>
                        </div>
                        <label class="checkbox-label is-final-label" title="Ce module produit la sortie finale">
                            <input type="radio" name="is_final" ${module.is_final ? 'checked' : ''}
                                onchange="setFinalModule(${module.id})">
                            <span>Sortie finale</span>
                        </label>
                        <button type="button" class="module-remove" onclick="removeModule(${module.id})" title="Supprimer">×</button>
                    </div>
                    <div class="form-row" style="display: flex; gap: 0.5rem;">
                        <input type="text" class="input-field" placeholder="Nom du module" style="flex: 2;"
                            value="${module.name}" onchange="updateModule(${module.id}, 'name', this.value)">
                        <input type="text" class="input-field" placeholder="Notif (ex: 🔍 Recherche)" style="flex: 1;"
                            value="${module.notification || ''}" onchange="updateModule(${module.id}, 'notification', this.value)"
                            title="Message court affiche pendant l'execution">
                    </div>
                    <div class="form-row">
                        <label style="font-size: 0.85rem;">MCPs</label>
                        <div class="mcp-list" style="flex-direction: row; flex-wrap: wrap;">
                            ${mcps.map(m => `
                                <label class="checkbox-label" style="white-space: nowrap;">
                                    <input type="checkbox"
                                        ${module.mcps.includes(m.id) ? 'checked' : ''}
                                        onchange="toggleModuleMcp(${module.id}, '${m.id}')">
                                    <span>${m.name}</span>
                                </label>
                            `).join('')}
                        </div>
                    </div>
                    <div class="form-row">
                        <textarea class="textarea-field" rows="3" placeholder="Prompt... Utilisez {INPUT}, {OUT_X}, {SELECTION}, {WINDOW}"
                            onchange="updateModule(${module.id}, 'system_prompt', this.value)">${module.system_prompt}</textarea>
                        <span class="placeholder-hint">{INPUT}=voix, {SELECTION}=texte, {WINDOW}=titre, {OUT_X}=sortie module X</span>
                    </div>
                    ${availableInputs.length > 0 ? `
                        <div class="module-inputs-section">
                            <label>Utiliser les sorties de:</label>
                            <div class="module-inputs-checkboxes">
                                ${availableInputs.map(inp => `
                                    <label class="module-input-item">
                                        <input type="checkbox"
                                            ${module.inputs.includes(inp.id) ? 'checked' : ''}
                                            onchange="toggleModuleInput(${module.id}, ${inp.id})">
                                        <span>M${inp.id} (${inp.name})</span>
                                    </label>
                                `).join('')}
                            </div>
                        </div>
                    ` : module.step > 1 ? `
                        <div class="module-inputs-section">
                            <label style="color: var(--muted);">Aucun module dans les steps precedents</label>
                        </div>
                    ` : ''}
                </div>
            `;
        }).join('');

        // Desactiver le bouton si max atteint
        addBtn.disabled = currentModules.length >= MAX_MODULES;
        addBtn.textContent = currentModules.length >= MAX_MODULES
            ? `Maximum ${MAX_MODULES} modules atteint`
            : '+ Ajouter un module';
    }

    // Mapping MCP ID -> label user-friendly (rempli par fetchMcps)
    let mcpDisplayLabels = {};

    // Vérifie si un agent a les MCPs requis activés
    function checkAgentMcpStatus(agent) {
        const requiredCats = agent.required_categories || [];
        if (requiredCats.length === 0) return { ok: true, missing: [] };

        const activeMcps = mcps.filter(m => m.enabled);
        const activeCats = new Set(activeMcps.flatMap(m => m.categories || []));

        const missing = requiredCats.filter(cat => !activeCats.has(cat));
        return { ok: missing.length === 0, missing };
    }

    // Template unifié - identique pour agents simples et connectés
    function renderAgentCard(agent, type = 'connected') {
        const id = agent.id;
        const hotkey = agent.hotkey || 'Non assigné';

        // Vérifier si les MCPs requis sont configurés
        const mcpStatus = checkAgentMcpStatus(agent);

        // Description ou preview du prompt
        let desc = '';
        const modules = agent.modules || agent.steps || [];
        if (agent.is_chain && modules.length > 0) {
            // Grouper par step pour afficher le flow
            const steps = [...new Set(modules.map(m => m.step))].sort((a, b) => a - b);
            const stepNames = steps.map(s => {
                const mods = modules.filter(m => m.step === s);
                return mods.length > 1 ? `[${mods.map(m => m.name).join('+')}]` : mods[0]?.name || '';
            });
            desc = `Chaîne: ${stepNames.join(' → ')}`;
        } else {
            desc = (agent.system_prompt || '').substring(0, 80) + (agent.system_prompt?.length > 80 ? '...' : '');
        }

        // Entrée (icônes minimalistes)
        let inputParts = ['●']; // Voix toujours
        if (agent.capture_selection !== false) inputParts.push('T');
        if (agent.capture_screenshot) inputParts.push('□');
        const inputLine = `<span class="card-label">Entrée:</span> <span class="card-value">${inputParts.join(' ')}</span>`;

        // Connecteurs (agents connectés uniquement)
        let mcpLine = '';
        if (type === 'connected') {
            const mcpList = agent.is_chain && modules.length > 0
                ? [...new Set(modules.flatMap(m => m.mcps || []))]
                : (agent.mcps || []);
            const labels = mcpList.map(m => mcpDisplayLabels[m] || m);
            if (labels.length > 0) {
                const chainTag = agent.is_chain ? ' (Chaîne)' : '';
                mcpLine = `<span class="card-label">Connecteurs:</span> <span class="card-value">${labels.join(', ')}${chainTag}</span>`;
            }
        }

        // Sortie
        const outputLabels = {paste: 'Coller', clipboard: 'Copier', notification: 'Notif', popup: 'Popup'};
        const outputLine = `<span class="card-label">Sortie:</span> <span class="card-value">${outputLabels[agent.output_mode] || 'Notif'}</span>`;

        const favoriteIcon = agent.favorite ? '★' : '☆';
        const favoriteClass = agent.favorite ? 'card-favorite active' : 'card-favorite';

        // Warning si MCP manquant
        let warningBadge = '';
        if (!mcpStatus.ok && type === 'connected') {
            const missingCats = mcpStatus.missing.join(', ');
            warningBadge = `<span class="mcp-warning-badge" title="MCP manquant: ${missingCats}">⚠️</span>`;
        }

        return `
        <div class="agent-card ${!mcpStatus.ok && type === 'connected' ? 'mcp-warning' : ''}" data-id="${id}">
            <button class="${favoriteClass}" onclick="event.stopPropagation(); toggleAgentFavorite('${id}')" title="Favori">${favoriteIcon}</button>
            <button class="card-delete" onclick="event.stopPropagation(); deleteAgentCard('${id}')" title="Supprimer">&times;</button>

            <div class="card-body">
                <div class="card-header">
                    <span class="card-title">${agent.name || id}</span>${warningBadge}
                    <kbd class="card-hotkey">${hotkey}</kbd>
                </div>
                <p class="card-desc">${desc}</p>
                <div class="card-meta">
                    <div class="card-meta-row">${inputLine}</div>
                    ${mcpLine ? `<div class="card-meta-row">${mcpLine}</div>` : ''}
                    <div class="card-meta-row">${outputLine}</div>
                </div>
            </div>

            <div class="card-actions">
                <button class="btn btn-action" onclick="event.stopPropagation(); launchAgent('${id}')">Lancer</button>
                <button class="btn btn-action" onclick="event.stopPropagation(); archiveAgent('${id}')">Archiver</button>
                <button class="btn btn-action" onclick="event.stopPropagation(); editAgent('${id}')">Editer</button>
            </div>
        </div>
        `;
    }

    function renderAgents() {
        const tbody = document.getElementById('agents-tbody');
        let filteredAgents = agents.filter(a => !a.archived);

        // Apply search filter
        if (searchQuery) {
            const q = searchQuery.toLowerCase();
            filteredAgents = filteredAgents.filter(a =>
                (a.name || '').toLowerCase().includes(q) ||
                (a.hotkey || '').toLowerCase().includes(q)
            );
        }

        // Apply category filter
        if (currentFilter === 'favorites') {
            filteredAgents = filteredAgents.filter(a => a.favorite);
        } else if (currentFilter === 'chain') {
            filteredAgents = filteredAgents.filter(a => a.is_chain);
        }

        if (filteredAgents.length === 0) {
            tbody.innerHTML = '<tr class="empty-row"><td colspan="6">Aucun agent. <a href="#" onclick="openLibraryModal(); return false;">Ajouter depuis la bibliotheque</a></td></tr>';
            return;
        }

        // Sort
        filteredAgents.sort((a, b) => {
            // Favorites always first
            if (a.favorite && !b.favorite) return -1;
            if (!a.favorite && b.favorite) return 1;

            // Then by current sort field
            let valA, valB;
            if (currentSort.field === 'usage') {
                valA = a.use_count || 0;
                valB = b.use_count || 0;
            } else {
                valA = (a.name || '').toLowerCase();
                valB = (b.name || '').toLowerCase();
            }

            if (currentSort.dir === 'asc') {
                return valA > valB ? 1 : -1;
            } else {
                return valA < valB ? 1 : -1;
            }
        });

        tbody.innerHTML = filteredAgents.map(a => renderAgentRow(a)).join('');
    }

    function renderAgentRow(agent) {
        const id = agent.id;
        const hotkey = agent.hotkey || '--';
        const favoriteIcon = agent.favorite ? '★' : '☆';
        const favoriteClass = agent.favorite ? 'favorite-btn active' : 'favorite-btn';
        const inactiveClass = !agent.enabled ? 'inactive' : '';

        // Type: simple ou chaîne
        let typeLabel = 'Simple';
        if (agent.is_chain) {
            const modules = agent.modules || agent.steps || [];
            typeLabel = `Chaîne (${modules.length})`;
        }

        // Usage count
        const usage = agent.use_count || 0;
        const usageHtml = usage > 0
            ? `<span class="usage-count">${usage}×</span>`
            : '<span class="usage-count muted">--</span>';

        // Description courte
        let desc = '';
        if (agent.is_chain) {
            const modules = agent.modules || agent.steps || [];
            const steps = [...new Set(modules.map(m => m.step))].sort((a, b) => a - b);
            desc = steps.map(s => {
                const mods = modules.filter(m => m.step === s);
                return mods.length > 1 ? `[${mods.length}]` : (mods[0]?.name || '');
            }).join(' → ');
        } else {
            desc = (agent.system_prompt || '').substring(0, 50);
            if (agent.system_prompt?.length > 50) desc += '...';
        }

        return `
            <tr class="${inactiveClass}" data-id="${id}">
                <td class="col-favorite">
                    <button class="${favoriteClass}" onclick="event.stopPropagation(); toggleAgentFavorite('${id}')">${favoriteIcon}</button>
                </td>
                <td class="col-name" onclick="editAgent('${id}')">
                    <strong>${agent.name || id}</strong>
                    ${desc ? `<span class="name-desc">${desc}</span>` : ''}
                </td>
                <td class="col-hotkey"><kbd>${hotkey}</kbd></td>
                <td class="col-type"><span class="type-badge ${agent.is_chain ? 'type-agent' : 'type-profile'}">${typeLabel}</span></td>
                <td class="col-usage">${usageHtml}</td>
                <td class="col-actions">
                    <div class="table-actions">
                        <button class="table-btn" onclick="launchAgent('${id}')" title="Lancer">▶</button>
                        <button class="table-btn" onclick="editAgent('${id}')" title="Editer">✎</button>
                        <button class="table-btn danger" onclick="deleteAgentCard('${id}')" title="Supprimer">×</button>
                    </div>
                </td>
            </tr>
        `;
    }

    function filterAgents() {
        searchQuery = document.getElementById('agents-search').value;
        renderAgents();
    }

    function setFilter(filter) {
        currentFilter = filter;
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.filter === filter);
        });
        renderAgents();
    }

    function sortTable(field) {
        if (currentSort.field === field) {
            currentSort.dir = currentSort.dir === 'asc' ? 'desc' : 'asc';
        } else {
            currentSort.field = field;
            currentSort.dir = 'asc';
        }

        // Update sort icons
        document.querySelectorAll('.data-table th').forEach(th => {
            th.classList.remove('sorted');
            const icon = th.querySelector('.sort-icon');
            if (icon) icon.textContent = '↕';
        });

        const th = document.querySelector(`th[data-sort="${field}"]`);
        if (th) {
            th.classList.add('sorted');
            const icon = th.querySelector('.sort-icon');
            if (icon) icon.textContent = currentSort.dir === 'asc' ? '↑' : '↓';
        }

        renderAgents();
    }

    async function toggleAgentFavorite(agentId) {
        try {
            const res = await fetch(`/api/agents/${agentId}/favorite`, {method: 'POST'});
            const data = await res.json();
            if (data.ok) {
                // Mettre à jour l'état local
                const agent = agents.find(a => a.id === agentId);
                if (agent) agent.favorite = data.favorite;
                renderAgents();
            }
        } catch (e) {
            console.error('Toggle favorite failed:', e);
        }
    }

    async function deleteAgentCard(agentId) {
        const agent = agents.find(a => a.id === agentId);
        const name = agent?.name || agentId;

        if (!confirm(`Supprimer l'agent "${name}" ?`)) return;

        try {
            const res = await fetch(`/api/agents/${agentId}`, {
                method: 'DELETE',
            });
            const result = await res.json();

            if (result.ok) {
                agents = agents.filter(a => a.id !== agentId);
                renderAgents();
                if (libraryData) renderLibrary();
                showRestartNotice('Agent supprime');
            } else {
                alert('Erreur: ' + (result.error || 'Echec'));
            }
        } catch (e) {
            console.error('Erreur suppression:', e);
            alert('Erreur de connexion');
        }
    }

    async function launchAgent(agentId) {
        const agent = agents.find(a => a.id === agentId);
        const name = agent?.name || agentId;

        try {
            const res = await fetch(`/api/agents/${agentId}/launch`, {
                method: 'POST',
            });
            const result = await res.json();

            if (result.ok) {
                showRestartNotice(`Agent "${name}" lance`);
            } else {
                alert('Erreur: ' + (result.error || 'Echec'));
            }
        } catch (e) {
            console.error('Erreur lancement:', e);
            alert('Erreur de connexion');
        }
    }

    async function archiveAgent(agentId) {
        const agent = agents.find(a => a.id === agentId);
        const name = agent?.name || agentId;

        if (!confirm(`Archiver l'agent "${name}" ?`)) return;

        try {
            const res = await fetch(`/api/agents/${agentId}/archive`, {
                method: 'POST',
            });
            const result = await res.json();

            if (result.ok) {
                const a = agents.find(x => x.id === agentId);
                if (a) a.archived = true;
                renderAgents();
                if (libraryData) renderLibrary();
                showRestartNotice(`Agent "${name}" archive`);
            } else {
                alert('Erreur: ' + (result.error || 'Echec'));
            }
        } catch (e) {
            console.error('Erreur archivage:', e);
            alert('Erreur de connexion');
        }
    }

    async function unarchiveAgent(agentId) {
        try {
            const res = await fetch(`/api/agents/${agentId}/unarchive`, {
                method: 'POST',
            });
            const result = await res.json();

            if (result.ok) {
                const a = agents.find(x => x.id === agentId);
                if (a) a.archived = false;
                renderAgents();
                if (libraryData) renderLibrary();
                closeLibraryModal();
                showRestartNotice('Agent restauré');
            } else {
                alert('Erreur: ' + (result.error || 'Echec'));
            }
        } catch (e) {
            console.error('Erreur désarchivage:', e);
            alert('Erreur de connexion');
        }
    }

    function renderMcpCheckboxes(selectedMcps = []) {
        const container = document.getElementById('mcp-checkboxes');
        container.innerHTML = mcps.map(m => {
            const isChecked = selectedMcps.includes(m.id);
            const configHint = m.config_hint ? `<div class="mcp-config-hint">${m.config_hint}</div>` : '';
            return `
                <div class="mcp-item ${isChecked ? 'checked' : ''}" data-mcp="${m.id}">
                    <div class="mcp-row">
                        <label>
                            <input type="checkbox" value="${m.id}" ${isChecked ? 'checked' : ''} onchange="toggleMcpItem(this)">
                            <strong>${m.name}</strong>
                        </label>
                        <span class="mcp-desc">${m.description}</span>
                    </div>
                    ${isChecked && configHint ? configHint : ''}
                </div>
            `;
        }).join('');
    }

    function toggleMcpItem(checkbox) {
        const item = checkbox.closest('.mcp-item');
        const mcpId = item.dataset.mcp;
        const mcp = mcps.find(m => m.id === mcpId);

        if (checkbox.checked) {
            item.classList.add('checked');
            if (mcp && mcp.config_hint) {
                const hint = document.createElement('div');
                hint.className = 'mcp-config-hint';
                hint.textContent = mcp.config_hint;
                item.appendChild(hint);
            }
        } else {
            item.classList.remove('checked');
            const hint = item.querySelector('.mcp-config-hint');
            if (hint) hint.remove();
        }
    }

    async function openNewAgent() {
        currentAgentId = null;
        document.getElementById('editor-title').textContent = 'Nouvel Agent';
        document.getElementById('editor-name').value = '';
        document.getElementById('editor-prompt').value = '';
        document.getElementById('editor-output').value = 'notification';
        // Reset radio buttons to notification
        document.querySelectorAll('input[name="output_mode"]').forEach(radio => {
            radio.checked = radio.value === 'notification';
        });
        document.getElementById('editor-capture-selection').checked = true;
        document.getElementById('editor-capture-window').checked = true;
        document.getElementById('editor-capture-screenshot').checked = false;
        document.getElementById('editor-step-timeout').value = 60;
        document.getElementById('btn-delete').style.display = 'none';
        renderMcpCheckboxes([]);

        // Initialiser mode simple et modules vides
        currentMode = 'simple';
        currentModules = [];
        currentStepTimeout = 60;
        setMode('simple');
        renderModules();

        // Charger les hotkeys disponibles
        await fetchHotkeys();
        renderHotkeySelect('');

        document.getElementById('editor-section').style.display = 'block';
        document.getElementById('editor-section').scrollIntoView({behavior: 'smooth'});
    }

    async function editAgent(agentId) {
        const agent = agents.find(a => a.id === agentId);
        if (!agent) return;

        currentAgentId = agentId;
        document.getElementById('editor-title').textContent = 'Modifier: ' + agent.name;
        document.getElementById('editor-name').value = agent.name;
        document.getElementById('editor-prompt').value = agent.system_prompt || '';
        document.getElementById('editor-output').value = agent.output_mode || 'notification';
        // Sync radio buttons with output_mode
        const outputMode = agent.output_mode || 'notification';
        document.querySelectorAll('input[name="output_mode"]').forEach(radio => {
            radio.checked = radio.value === outputMode;
        });
        document.getElementById('editor-capture-selection').checked = agent.capture_selection !== false;
        document.getElementById('editor-capture-window').checked = agent.capture_window !== false;
        document.getElementById('editor-capture-screenshot').checked = agent.capture_screenshot === true;
        document.getElementById('editor-step-timeout').value = agent.step_timeout || 60;
        document.getElementById('btn-delete').style.display = 'block';
        renderMcpCheckboxes(agent.mcps || []);

        // Charger le mode (simple ou chaine) et les modules
        // Support nouveau format (modules) ET ancien (steps)
        const modules = agent.modules || agent.steps || [];
        if (agent.is_chain && modules.length > 0) {
            currentMode = 'chain';
            currentStepTimeout = agent.step_timeout || 60;
            // Deep copy des modules avec conversion si ancien format
            currentModules = modules.map((m, idx) => ({
                id: m.id || (idx + 1),
                step: m.step || (idx + 1),
                name: m.name || `Module ${idx + 1}`,
                mcps: [...(m.mcps || [])],
                system_prompt: m.system_prompt || '',
                inputs: [...(m.inputs || [])],
                notification: m.notification || '',
                is_final: m.is_final || false
            }));
            // Si aucun module n'est marque is_final, marquer le dernier
            const hasFinal = currentModules.some(m => m.is_final);
            if (!hasFinal && currentModules.length > 0) {
                // Trouver le dernier module du dernier step
                const maxStep = Math.max(...currentModules.map(m => m.step));
                const lastStepModules = currentModules.filter(m => m.step === maxStep);
                const lastModule = lastStepModules.reduce((a, b) => a.id > b.id ? a : b);
                lastModule.is_final = true;
            }
            setMode('chain');
            renderModules();
        } else {
            currentMode = 'simple';
            currentModules = [];
            currentStepTimeout = 60;
            setMode('simple');
            renderModules();
        }

        // Charger les hotkeys disponibles (exclure l'agent actuel)
        await fetchHotkeys(agentId);
        renderHotkeySelect(agent.hotkey || '');

        document.getElementById('editor-section').style.display = 'block';
        document.getElementById('editor-section').scrollIntoView({behavior: 'smooth'});
    }

    function closeEditor() {
        document.getElementById('editor-section').style.display = 'none';
        currentAgentId = null;
    }

    function getSelectedMcps() {
        const checkboxes = document.querySelectorAll('#mcp-checkboxes input[type="checkbox"]:checked');
        return Array.from(checkboxes).map(cb => cb.value);
    }

    async function saveAgent() {
        const hotkeyValue = document.getElementById('editor-hotkey').value;
        const isChain = currentMode === 'chain';

        const data = {
            name: document.getElementById('editor-name').value || 'Nouvel Agent',
            hotkey: hotkeyValue || null,  // null = auto-assign
            output_mode: document.getElementById('editor-output').value,
            capture_selection: document.getElementById('editor-capture-selection').checked,
            capture_window: document.getElementById('editor-capture-window').checked,
            capture_screenshot: document.getElementById('editor-capture-screenshot').checked,
            is_chain: isChain,
        };

        if (isChain) {
            // Mode chaine: envoyer les modules, pas les MCPs/prompt du formulaire simple
            // S'assurer qu'un module est marque is_final
            const hasFinal = currentModules.some(m => m.is_final);
            if (!hasFinal && currentModules.length > 0) {
                // Marquer le dernier module du dernier step comme final
                const maxStep = Math.max(...currentModules.map(m => m.step));
                const lastStepModules = currentModules.filter(m => m.step === maxStep);
                const lastModule = lastStepModules.reduce((a, b) => a.id > b.id ? a : b);
                lastModule.is_final = true;
            }
            data.modules = currentModules;
            data.step_timeout = parseInt(document.getElementById('editor-step-timeout').value) || 60;
            data.mcps = [];
            data.system_prompt = '';
        } else {
            // Mode simple
            data.mcps = getSelectedMcps();
            data.system_prompt = document.getElementById('editor-prompt').value;
            data.modules = [];
        }

        try {
            let res;
            if (currentAgentId) {
                // Update
                res = await fetch(`/api/agents/${currentAgentId}`, {
                    method: 'PUT',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data),
                });
            } else {
                // Create
                res = await fetch('/api/agents', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data),
                });
            }

            const result = await res.json();
            if (result.ok) {
                await fetchAgents();
                closeEditor();
                showRestartNotice('Agent sauvegarde! Relancez l\'app pour appliquer les nouveaux raccourcis.');
            } else {
                alert('Erreur: ' + (result.error || 'Echec sauvegarde'));
            }
        } catch (e) {
            console.error('Erreur save:', e);
            alert('Erreur de sauvegarde');
        }
    }

    async function deleteAgent() {
        if (!currentAgentId) return;
        if (!confirm('Supprimer cet agent ?')) return;

        try {
            const res = await fetch(`/api/agents/${currentAgentId}`, {
                method: 'DELETE',
            });
            const result = await res.json();

            if (result.ok) {
                await fetchAgents();
                closeEditor();
            } else {
                alert('Erreur: ' + (result.error || 'Echec suppression'));
            }
        } catch (e) {
            console.error('Erreur delete:', e);
            alert('Erreur de suppression');
        }
    }

    // === Modal Lancer Agent ===
    let runAgentId = null;

    function openRunModal(agentId, agentName) {
        runAgentId = agentId;
        document.getElementById('run-modal-title').textContent = `Lancer: ${agentName}`;
        document.getElementById('run-input').value = '';
        document.getElementById('run-result').style.display = 'none';
        document.getElementById('run-error').style.display = 'none';
        document.getElementById('btn-run-agent').disabled = false;
        document.getElementById('btn-run-agent').textContent = 'Lancer';
        document.getElementById('run-modal').style.display = 'flex';
        document.getElementById('run-input').focus();
    }

    function closeRunModal() {
        document.getElementById('run-modal').style.display = 'none';
        runAgentId = null;
    }

    async function executeAgent() {
        if (!runAgentId) return;

        const text = document.getElementById('run-input').value.trim();
        if (!text) {
            alert('Entrez un texte a envoyer a l\'agent');
            return;
        }

        const btn = document.getElementById('btn-run-agent');
        const resultDiv = document.getElementById('run-result');
        const resultText = document.getElementById('run-result-text');
        const errorDiv = document.getElementById('run-error');

        btn.disabled = true;
        btn.textContent = 'Execution...';
        resultDiv.style.display = 'none';
        errorDiv.style.display = 'none';

        try {
            const res = await fetch(`/api/agents/${runAgentId}/run`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ text })
            });

            const data = await res.json();

            if (data.ok) {
                resultText.textContent = data.result || 'Termine sans resultat';
                resultDiv.style.display = 'block';
                btn.textContent = 'Relancer';
            } else {
                errorDiv.textContent = data.error || 'Erreur inconnue';
                errorDiv.style.display = 'block';
                btn.textContent = 'Reessayer';
            }
        } catch (e) {
            console.error('Erreur execution agent:', e);
            errorDiv.textContent = 'Erreur de connexion au serveur';
            errorDiv.style.display = 'block';
            btn.textContent = 'Reessayer';
        }

        btn.disabled = false;
    }

    // Fermer modal avec Echap
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && document.getElementById('run-modal').style.display === 'flex') {
            closeRunModal();
        }
    });

    function showRestartNotice(message) {
        let notice = document.getElementById('restart-notice');
        if (!notice) {
            notice = document.createElement('div');
            notice.id = 'restart-notice';
            notice.className = 'restart-notice';
            notice.innerHTML = `
                <span class="notice-text"></span>
                <a href="/" class="btn btn-small">Dashboard</a>
                <button class="btn btn-small btn-secondary" onclick="this.parentElement.remove()">OK</button>
            `;
            document.body.prepend(notice);
        }
        notice.querySelector('.notice-text').textContent = message;
        notice.style.display = 'flex';
    }

    // === PROFILE EDITOR ===
    function populateProfileHotkeySelect(currentHotkey) {
        const select = document.getElementById('profile-editor-hotkey');
        const usedHotkeys = Object.values(profiles)
            .filter(p => p.id !== currentProfileId)
            .map(p => p.hotkey);

        select.innerHTML = '<option value="">Automatique</option>';
        hotkeyPool.forEach(hk => {
            const isUsed = usedHotkeys.includes(hk);
            const isCurrent = hk === currentHotkey;
            const opt = document.createElement('option');
            opt.value = hk;
            opt.textContent = isUsed && !isCurrent ? `${hk} (utilise)` : hk;
            opt.disabled = isUsed && !isCurrent;
            opt.selected = isCurrent;
            select.appendChild(opt);
        });

        if (currentHotkey && !hotkeyPool.includes(currentHotkey)) {
            const opt = document.createElement('option');
            opt.value = currentHotkey;
            opt.textContent = currentHotkey;
            opt.selected = true;
            select.insertBefore(opt, select.firstChild.nextSibling);
        }
    }

    function toggleProfilePromptField() {
        const useLlm = document.getElementById('profile-editor-use-llm').checked;
        document.getElementById('profile-prompt-row').style.display = useLlm ? 'flex' : 'none';
    }

    function openNewProfile() {
        currentProfileId = 'custom_' + Date.now();

        document.getElementById('profile-editor-title').textContent = 'Nouvel Agent Simple';
        document.getElementById('profile-editor-name').value = '';
        document.getElementById('profile-editor-description').value = '';
        document.getElementById('profile-editor-enabled').checked = true;
        populateProfileHotkeySelect('');

        // Entrees
        document.getElementById('profile-editor-requires-voice').checked = true;
        document.getElementById('profile-editor-capture-selection').checked = false;
        document.getElementById('profile-editor-capture-clipboard').checked = false;
        document.getElementById('profile-editor-capture-context').checked = false;
        document.getElementById('profile-editor-capture-screenshot').checked = false;

        // Traitement
        document.getElementById('profile-editor-use-llm').checked = false;
        document.getElementById('profile-editor-prompt').value = '';
        toggleProfilePromptField();

        // Sortie
        document.querySelectorAll('input[name="profile_output_mode"]').forEach(radio => {
            radio.checked = radio.value === 'paste';
        });

        document.getElementById('btn-profile-delete').style.display = 'none';
        document.getElementById('profile-editor-section').style.display = 'block';
        document.getElementById('profile-editor-section').scrollIntoView({behavior: 'smooth'});
    }

    function editProfile(profileId) {
        const p = profiles[profileId];
        if (!p) return;

        currentProfileId = profileId;

        document.getElementById('profile-editor-title').textContent = 'Modifier: ' + (p.name || profileId);
        document.getElementById('profile-editor-name').value = p.name || '';
        document.getElementById('profile-editor-description').value = p.description || '';
        document.getElementById('profile-editor-enabled').checked = p.enabled !== false;
        populateProfileHotkeySelect(p.hotkey || '');

        // Entrees
        document.getElementById('profile-editor-requires-voice').checked = p.requires_voice !== false;
        document.getElementById('profile-editor-capture-selection').checked = p.capture_selection === true;
        document.getElementById('profile-editor-capture-clipboard').checked = p.capture_clipboard === true;
        document.getElementById('profile-editor-capture-context').checked = p.capture_context === true;
        document.getElementById('profile-editor-capture-screenshot').checked = p.capture_screenshot === true;

        // Traitement
        document.getElementById('profile-editor-use-llm').checked = p.use_llm === true;
        document.getElementById('profile-editor-prompt').value = p.system_prompt || '';
        toggleProfilePromptField();

        // Sortie
        const outputMode = p.output_mode || 'paste';
        document.querySelectorAll('input[name="profile_output_mode"]').forEach(radio => {
            radio.checked = radio.value === outputMode;
        });

        document.getElementById('btn-profile-delete').style.display = 'block';
        document.getElementById('profile-editor-section').style.display = 'block';
        document.getElementById('profile-editor-section').scrollIntoView({behavior: 'smooth'});
    }

    function closeProfileEditor() {
        document.getElementById('profile-editor-section').style.display = 'none';
        currentProfileId = null;
    }

    async function saveProfile() {
        if (!currentProfileId) return;

        let outputMode = 'paste';
        document.querySelectorAll('input[name="profile_output_mode"]').forEach(radio => {
            if (radio.checked) outputMode = radio.value;
        });

        const data = {
            name: document.getElementById('profile-editor-name').value || 'Nouvel Agent',
            hotkey: document.getElementById('profile-editor-hotkey').value || null,
            description: document.getElementById('profile-editor-description').value,
            enabled: document.getElementById('profile-editor-enabled').checked,
            requires_voice: document.getElementById('profile-editor-requires-voice').checked,
            capture_selection: document.getElementById('profile-editor-capture-selection').checked,
            capture_clipboard: document.getElementById('profile-editor-capture-clipboard').checked,
            capture_context: document.getElementById('profile-editor-capture-context').checked,
            capture_screenshot: document.getElementById('profile-editor-capture-screenshot').checked,
            use_llm: document.getElementById('profile-editor-use-llm').checked,
            system_prompt: document.getElementById('profile-editor-prompt').value,
            output_mode: outputMode,
        };

        const isNew = !profiles[currentProfileId];

        try {
            let res;
            if (isNew) {
                data.id = currentProfileId;
                res = await fetch('/api/profiles', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data),
                });
            } else {
                res = await fetch(`/api/profiles/${currentProfileId}`, {
                    method: 'PUT',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data),
                });
            }

            const result = await res.json();
            if (result.ok) {
                profiles[currentProfileId] = {...profiles[currentProfileId], ...data, id: currentProfileId};
                renderProfiles();
                closeProfileEditor();
                if (libraryData) renderLibrary();
                showRestartNotice(isNew ? 'Agent cree!' : 'Profil sauvegarde!');
            } else {
                alert('Erreur: ' + (result.error || 'Echec sauvegarde'));
            }
        } catch (e) {
            console.error('Erreur save:', e);
            alert('Erreur de sauvegarde');
        }
    }

    async function deleteCurrentProfile() {
        if (!currentProfileId) return;
        await deleteProfile(currentProfileId);
        closeProfileEditor();
    }

    // === LIBRARY ===
    let libraryData = null;

    const ICONS = {
        'envelope': '📧',
        'search': '🔍',
        'database': '💾',
        'folder': '📁',
        'calendar': '📅',
        'cog': '⚙️',
        'default': '📦'
    };

    function getLibraryIcon(iconName) {
        return ICONS[iconName] || ICONS.default;
    }

    async function openLibraryModal() {
        const modal = document.getElementById('library-modal');
        modal.style.display = 'flex';
        document.body.style.overflow = 'hidden';

        if (!libraryData) {
            await fetchLibrary();
        }
        renderLibrary();
    }

    function closeLibraryModal() {
        const modal = document.getElementById('library-modal');
        modal.style.display = 'none';
        document.body.style.overflow = '';
    }

    async function fetchLibrary() {
        const loading = document.getElementById('library-loading');

        try {
            const res = await fetch('/api/agents/library');
            libraryData = await res.json();
            loading.style.display = 'none';
        } catch (e) {
            console.error('Erreur library:', e);
            loading.textContent = 'Erreur de chargement';
        }
    }

    function renderLibrary() {
        if (!libraryData) return;

        const container = document.getElementById('library-categories');
        // Map des agents existants avec leur statut
        const existingAgents = new Map(agents.map(a => [a.id, a]));
        const library = libraryData.library || {};
        const categories = libraryData.categories || {};

        // Grouper par categorie
        const byCategory = {};
        for (const [id, item] of Object.entries(library)) {
            const cat = item.category || 'other';
            if (!byCategory[cat]) byCategory[cat] = [];
            byCategory[cat].push({id, ...item});
        }

        // Trier les categories par ordre
        const sortedCats = Object.entries(byCategory)
            .sort(([a], [b]) => (categories[a]?.order || 99) - (categories[b]?.order || 99));

        container.innerHTML = sortedCats.map(([catId, items]) => {
            const catInfo = categories[catId] || {name: catId, icon: 'default'};

            const itemsHtml = items.map(item => {
                const existingAgent = existingAgents.get(item.id);
                const exists = !!existingAgent;
                const isArchived = existingAgent?.archived;
                const badges = [];

                // Badge categories requises
                if (item.required_categories && item.required_categories.length > 0) {
                    item.required_categories.forEach(cat => {
                        badges.push(`<span class="library-badge category">${cat}</span>`);
                    });
                }

                // Badge statut
                if (isArchived) {
                    badges.push('<span class="library-badge archived">Archivé</span>');
                } else if (exists) {
                    badges.push('<span class="library-badge exists">Installé</span>');
                }

                // Permettre de réinstaller si archivé
                const canInstall = !exists || isArchived;
                const clickAction = canInstall
                    ? (isArchived ? `unarchiveAgent('${item.id}')` : `addFromLibrary('${item.id}')`)
                    : '';

                return `
                    <div class="library-item-card ${exists && !isArchived ? 'exists' : ''} ${isArchived ? 'archived' : ''}"
                         ${canInstall ? `onclick="${clickAction}"` : ''}>
                        <div class="library-item-name">
                            ${getLibraryIcon(item.icon)} ${item.name}
                        </div>
                        <p class="library-item-desc">${item.description || ''}</p>
                        <div class="library-item-badges">${badges.join('')}</div>
                    </div>
                `;
            }).join('');

            return `
                <div class="library-category">
                    <div class="library-category-header">
                        ${getLibraryIcon(catInfo.icon)} ${catInfo.name}
                    </div>
                    <div class="library-items">${itemsHtml}</div>
                </div>
            `;
        }).join('');
    }

    async function addFromLibrary(templateId) {
        try {
            const res = await fetch(`/api/agents/add-from-library/${templateId}`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
            });
            const result = await res.json();

            if (result.ok) {
                showRestartNotice(result.message || 'Agent ajoute!');
                await fetchAgents();
                renderLibrary(); // Update "exists" badges
            } else {
                alert('Erreur: ' + (result.error || 'Echec'));
            }
        } catch (e) {
            console.error('Erreur ajout:', e);
            alert('Erreur de connexion');
        }
    }

    // Fermer library modal avec Echap
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && document.getElementById('library-modal').style.display === 'flex') {
            closeLibraryModal();
        }
    });

    // Init
    Promise.all([
        fetchMcps(),
        fetchProfileHotkeys()
    ]).then(() => {
        fetchProfiles();
        fetchAgents();
    });
</script>
{% endblock %}