{% extends "base_admin.html" %}

{% block page_title %}Provider 管理{% endblock %}
{% block page_css %}<link rel="stylesheet" href="/static/css/providers.css?v=20260403-11">{% endblock %}
{% block body_class %}providers-page{% endblock %}
{% block header_title %}Provider 管理{% endblock %}
{% block header_subtitle %}维护 providers 配置，修改后自动重载生效。{% endblock %}

{% block content %}
        <section class="providers-toolbar-section">
            <div class="toolbar-card">
                <div class="toolbar-meta">
                    <div class="toolbar-summary">
                        <span class="toolbar-pill toolbar-pill-primary">共 <strong id="providerCount">0</strong> 个 Provider</span>
                        <span class="toolbar-pill toolbar-pill-primary">共 <strong id="authGroupCount">0</strong> 个 Auth Group</span>
                    </div>
                    <div class="provider-tabs" role="tablist" aria-label="Provider 视图">
                        <button
                            type="button"
                            class="provider-tab-btn is-active"
                            id="providerTabBtn_providers"
                            onclick="switchProviderTab('providers')"
                            aria-selected="true"
                            aria-controls="providerTabPanel_providers"
                        >Providers</button>
                        <button
                            type="button"
                            class="provider-tab-btn"
                            id="providerTabBtn_auth_groups"
                            onclick="switchProviderTab('auth_groups')"
                            aria-selected="false"
                            aria-controls="providerTabPanel_auth_groups"
                        >Auth Groups</button>
                    </div>
                </div>
            </div>

        </section>

        <section class="providers-section providers-tab-panel" id="providerTabPanel_providers" role="tabpanel" aria-labelledby="providerTabBtn_providers">
            <div class="section-card section-card-spaced">
                <div class="section-header">
                    <div>
                        <h3 class="section-title">Providers</h3>
                    </div>
                    <div class="section-header-actions">
                        <button type="button" class="btn btn-primary" onclick="openCreateModal()">新增 Provider</button>
                    </div>
                </div>
                <div class="toolbar-summary provider-batch-summary">
                    <span class="toolbar-pill">已选 <strong id="selectedProviderCount">0</strong> 个</span>
                    <button type="button" class="btn btn-toolbar-secondary" id="enableSelectedProvidersBtn" onclick="runProviderBatchAction('enable')" disabled>启用</button>
                    <button type="button" class="btn btn-toolbar-secondary" id="disableSelectedProvidersBtn" onclick="runProviderBatchAction('disable')" disabled>禁用</button>
                </div>
                <div class="providers-table-shell" id="providersContainer">
                    <div class="loading">正在加载 provider 配置...</div>
                </div>
            </div>
        </section>

        <section class="providers-section providers-tab-panel" id="providerTabPanel_auth_groups" role="tabpanel" aria-labelledby="providerTabBtn_auth_groups" hidden>
            <div class="section-card section-card-spaced">
                <div class="section-header">
                    <div>
                        <div class="section-title-with-help">
                            <h3 class="section-title">Auth Groups</h3>
                            <button
                                type="button"
                                class="field-help-button"
                                data-provider-help-topic="auth_groups_overview"
                                onclick="toggleProviderHelp('auth_groups_overview', event)"
                                aria-label="查看 Auth Groups 说明"
                            >?</button>
                        </div>
                    </div>
                    <div class="section-header-actions">
                        <button type="button" class="btn btn-primary" onclick="openCreateAuthGroupModal()">新增 Auth Group</button>
                    </div>
                </div>
                <div class="toolbar-summary auth-group-summary">
                    <span class="toolbar-pill">Entries <strong id="authEntryCount">0</strong></span>
                    <span class="toolbar-pill">Available <strong id="authGroupAvailableCount">0</strong></span>
                    <span class="toolbar-pill">Cooldown <strong id="authGroupCooldownCount">0</strong></span>
                    <span class="toolbar-pill">Disabled <strong id="authGroupDisabledCount">0</strong></span>
                </div>
                <div class="providers-table-shell auth-groups-table-shell" id="authGroupsContainer">
                    <div class="loading">正在加载 auth group 配置...</div>
                </div>
            </div>
        </section>
{% endblock %}

{% block after_container %}
    <div class="modal fade provider-editor-modal" id="providerModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <div>
                        <h5 class="modal-title fw-semibold" id="providerModalLabel">新增 Provider</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="provider-form-grid">
                        <div class="mb-3">
                            <label class="form-label">Provider 名称 *</label>
                            <input type="text" class="form-control" id="providerName" placeholder="例如 openai">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">API 地址 *</label>
                            <input type="text" class="form-control" id="providerApi" placeholder="例如 https://api.openai.com/v1/chat/completions">
                        </div>
                        <div class="mb-3">
                            <label class="form-label field-label-with-help">
                                <span>上游传输</span>
                                <button type="button" class="field-help-button" data-provider-help-topic="transport" onclick="toggleProviderHelp('transport', event)" aria-label="查看上游传输说明">?</button>
                            </label>
                            <select class="form-control" id="providerTransport">
                                <option value="http">HTTP</option>
                                <option value="websocket">WebSocket</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label field-label-with-help">
                                <span>上游格式</span>
                                <button type="button" class="field-help-button" data-provider-help-topic="source_format" onclick="toggleProviderHelp('source_format', event)" aria-label="查看上游格式说明">?</button>
                            </label>
                            <select class="form-control" id="providerSourceFormat">
                                <option value="openai_chat">openai_chat</option>
                                <option value="openai_responses">openai_responses</option>
                                <option value="claude_chat">claude_chat</option>
                                <option value="codex">codex</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label field-label-with-help">
                                <span>下游格式</span>
                                <span class="field-mode-badge">多选</span>
                                <button type="button" class="field-help-button" data-provider-help-topic="target_format" onclick="toggleProviderHelp('target_format', event)" aria-label="查看下游格式说明">?</button>
                            </label>
                            <select
                                class="form-control"
                                id="providerTargetFormat"
                                multiple
                                data-placeholder="请选择下游格式"
                                data-multi-select-hint="可多选，点击已选项可取消；互斥项会自动替换"
                            >
                                <option value="openai_chat">openai_chat</option>
                                <option value="openai_responses">openai_responses</option>
                                <option value="claude_chat">claude_chat</option>
                                <option value="codex">codex</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Auth 方式</label>
                            <select class="form-control" id="providerAuthMode" onchange="updateProviderAuthModeFields()">
                                <option value="legacy_api_key">Legacy API Key</option>
                                <option value="auth_group">Auth Group</option>
                            </select>
                        </div>
                        <div class="mb-3" id="providerAuthGroupField">
                            <label class="form-label field-label-with-help">
                                <span>Auth Group</span>
                                <button
                                    type="button"
                                    class="field-help-button"
                                    data-provider-help-topic="auth_group_field"
                                    onclick="toggleProviderHelp('auth_group_field', event)"
                                    aria-label="查看 Auth Group 字段说明"
                                >?</button>
                            </label>
                            <select class="form-control" id="providerAuthGroup"></select>
                        </div>
                        <div class="mb-3" id="providerLegacyApiKeyField">
                            <label class="form-label">Legacy API Key</label>
                            <input type="text" class="form-control" id="providerApiKey" placeholder="留空则不写入配置">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">代理</label>
                            <input type="text" class="form-control" id="providerProxy" placeholder="例如 http://127.0.0.1:7890">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Hook</label>
                            <input type="text" class="form-control" id="providerHook" placeholder="例如 example_hook.py">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Timeout Seconds</label>
                            <input type="number" class="form-control" id="providerTimeout" min="1" placeholder="例如 1200">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Max Retries</label>
                            <input type="number" class="form-control" id="providerRetries" min="1" placeholder="例如 3">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">证书校验（HTTPS/WSS）</label>
                            <select class="form-control" id="providerVerifySsl">
                                <option value="true">启用</option>
                                <option value="false">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 provider-model-list-section">
                        <div class="field-header">
                            <div class="field-header-meta">
                                <label class="form-label" for="providerModelList">Model List</label>
                                <span class="field-meta-badge" id="providerModelCount">0 个模型</span>
                            </div>
                            <div class="field-header-actions">
                                <button type="button" class="btn btn-secondary btn-field-secondary" onclick="tidyModelList()">整理</button>
                                <button type="button" class="btn btn-secondary btn-fetch-inline" id="fetchModelsBtn" onclick="fetchModels()">拉取模型</button>
                                <button
                                    type="button"
                                    class="field-help-button"
                                    data-provider-help-topic="fetch_models"
                                    onclick="toggleProviderHelp('fetch_models', event)"
                                    aria-label="查看拉取模型说明"
                                >?</button>
                            </div>
                        </div>
                        <textarea class="form-control provider-models-textarea" id="providerModelList" placeholder="每行一个模型，支持粘贴后整理排序；保存时会自动去空行并去重"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveProvider()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="fetchModelPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered auth-entry-yaml-modal-dialog">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <div>
                        <h5 class="modal-title fw-semibold">选择拉取模型</h5>
                        <div class="modal-subtitle">根据当前 Model List 自动预选重复模型，取消勾选可将它们从当前清单移除，未出现在本次拉取结果中的现有模型会保留。</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="fetch-model-toolbar">
                        <input type="text" class="form-control" id="fetchModelSearchInput" placeholder="搜索">
                    </div>
                    <div class="fetch-model-summary" id="fetchModelSummary">共拉取 0 个模型，已选 0 个</div>
                    <div class="fetch-model-list" id="fetchModelList">
                        <div class="fetch-model-list-header">
                            <label class="fetch-model-list-header-main" for="fetchModelSelectAllCheckbox">
                                <input
                                    type="checkbox"
                                    class="fetch-model-checkbox"
                                    id="fetchModelSelectAllCheckbox"
                                    onchange="toggleFilteredFetchedModels(this.checked)"
                                >
                                <span class="fetch-model-list-header-title">模型名称</span>
                            </label>
                        </div>
                        <div class="fetch-model-list-body" id="fetchModelListBody"></div>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="applyFetchedModelsSelection()">加入当前清单</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modelDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <div>
                        <h5 class="modal-title fw-semibold" id="modelDetailTitle">模型列表</h5>
                        <div class="modal-subtitle" id="modelDetailSubtitle">查看 provider 的完整模型配置。</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="mb-3">
                        <input type="text" class="form-control" id="modelSearchInput" placeholder="搜索模型名称">
                    </div>
                    <div class="model-detail-summary" id="modelDetailSummary">共 0 个模型</div>
                    <div class="model-detail-list" id="modelDetailList"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="authGroupModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <div>
                        <h5 class="modal-title fw-semibold" id="authGroupModalLabel">新增 Auth Group</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="auth-group-base-grid">
                        <div class="mb-3">
                            <label class="form-label">Group 名称 *</label>
                            <input type="text" class="form-control" id="authGroupName" placeholder="例如 openai-shared，供 Provider 绑定引用">
                        </div>
                        <div class="mb-3">
                            <label class="form-label field-label-with-help">
                                <span>策略</span>
                                <button
                                    type="button"
                                    class="field-help-button"
                                    data-provider-help-topic="auth_group_strategy"
                                    onclick="toggleProviderHelp('auth_group_strategy', event)"
                                    aria-label="查看 Auth Group 策略说明"
                                >?</button>
                            </label>
                            <select class="form-control" id="authGroupStrategy">
                                <option value="least_inflight">least_inflight</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">默认 429 冷却秒数</label>
                            <input type="number" class="form-control" id="authGroupCooldownSeconds" min="1" placeholder="例如 60，表示该组默认遇到 429 冷却 60 秒">
                        </div>
                    </div>
                    <div class="entry-editor-header">
                        <div>
                            <label class="form-label field-label-with-help">
                                <span>Auth Entries</span>
                                <button
                                    type="button"
                                    class="field-help-button"
                                    data-provider-help-topic="auth_entries_editor"
                                    onclick="toggleProviderHelp('auth_entries_editor', event)"
                                    aria-label="查看 Auth Entries 说明"
                                >?</button>
                            </label>
                        </div>
                        <div class="field-header-actions">
                            <button type="button" class="btn btn-secondary btn-field-secondary" onclick="openAuthEntryImportModal()">YAML 编辑</button>
                            <button type="button" class="btn btn-secondary btn-field-secondary" onclick="addAuthEntryCard()">新增 Entry</button>
                        </div>
                    </div>
                    <div class="auth-entry-table">
                        <div class="auth-entry-table-header">
                            <span class="auth-entry-table-toggle-column"></span>
                            <span>Entry ID</span>
                            <span>Enabled</span>
                            <span>Header 数</span>
                            <span>限制概览</span>
                            <span>操作</span>
                        </div>
                        <div id="authEntriesContainer" class="auth-entry-list"></div>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveAuthGroup()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="authEntryImportModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered auth-entry-yaml-modal-dialog">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <div>
                        <h5 class="modal-title fw-semibold">编辑 Auth Entries YAML</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="mb-0">
                        <div class="field-header">
                            <div class="field-header-meta">
                                <label class="form-label">YAML 内容</label>
                                <div class="field-header-description">这里编辑的是当前 Auth Entries 的完整 YAML；保存后会整体替换当前列表，并校验重复 ID。</div>
                            </div>
                            <div class="field-header-actions">
                                <button type="button" class="btn btn-secondary btn-field-secondary" onclick="insertAuthEntryYamlTemplate()">插入 Entry 模板</button>
                            </div>
                        </div>
                        <div class="entry-import-editor-shell" id="authEntryImportEditorShell">
                            <div class="entry-import-editor" id="authEntryImportYamlEditor" aria-label="Auth Entry YAML editor"></div>
                            <textarea
                                class="form-control entry-import-textarea"
                                id="authEntryImportYaml"
                                rows="14"
                                spellcheck="false"
                            >entries:
  - id: key-1  # 必填：Entry 唯一 ID，组内不能重复
    enabled: true  # 可选：默认 true；设为 false 时该 Entry 不参与调度
    headers:  # 必填：至少提供 1 个请求头
      Authorization: "Bearer sk-xxx"  # 示例：Bearer Token
      # x-api-key: "your-api-key"  # 可选：如果上游用 x-api-key，可改成这个
    max_concurrency: 3  # 可选：最大并发；留空表示不限制
    cooldown_seconds_on_429: 120  # 可选：429 冷却秒数；留空则继承 Group 默认值
    request_quota_per_minute: 60  # 可选：每分钟请求数上限；留空表示不限制
    request_quota_per_day: 3000  # 可选：每天请求数上限；留空表示不限制
    token_quota_per_minute: 120000  # 可选：每分钟 Token 上限；留空表示不限制
    token_quota_per_day: 5000000  # 可选：每天 Token 上限；留空表示不限制
                            </textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveAuthEntriesFromYaml()">YAML 保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="authGroupRuntimeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <div>
                        <h5 class="modal-title fw-semibold" id="authGroupRuntimeTitle">Auth Group 运行态</h5>
                        <div class="modal-subtitle" id="authGroupRuntimeSubtitle">查看 entry 的并发、冷却、配额与最近错误。</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="toolbar-summary auth-group-summary" id="authGroupRuntimeSummary"></div>
                    <div class="providers-table-shell auth-group-runtime-shell" id="authGroupRuntimeContainer">
                        <div class="loading">正在加载运行态...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="authEntryErrorModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0">
                    <div>
                        <h5 class="modal-title fw-semibold" id="authEntryErrorTitle">最近错误详情</h5>
                        <div class="modal-subtitle" id="authEntryErrorSubtitle">查看 entry 的最近失败摘要和运行态原因。</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div class="runtime-error-detail-grid" id="authEntryErrorContent"></div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="inline-confirm-popover floating-delete-popover" id="providerDeletePopover" data-placement="bottom" hidden>
        <div class="inline-confirm-text">确认删除？</div>
        <div class="inline-confirm-actions">
            <button type="button" class="btn-action btn-edit inline-confirm-action" onclick="cancelDeleteProviderConfirm(event)">取消</button>
            <button type="button" class="btn-action btn-delete inline-confirm-action" id="confirmDeleteProviderBtn" onclick="confirmDeleteProvider(event)">确认</button>
        </div>
    </div>
    <div class="inline-confirm-popover floating-delete-popover" id="authEntryDeletePopover" data-placement="bottom" hidden>
        <div class="inline-confirm-text">确认删除这个 Entry？</div>
        <div class="inline-confirm-actions">
            <button type="button" class="btn-action btn-edit inline-confirm-action" onclick="cancelDeleteAuthEntryConfirm(event)">取消</button>
            <button type="button" class="btn-action btn-delete inline-confirm-action" id="confirmDeleteAuthEntryBtn" onclick="confirmDeleteAuthEntry(event)">确认</button>
        </div>
    </div>
    <div class="provider-help-popover" id="providerHelpPopover" data-placement="bottom" hidden>
        <div class="provider-help-popover-header">
            <div class="provider-help-popover-title" id="providerHelpTitle"></div>
            <button type="button" class="provider-help-popover-close" onclick="hideProviderHelpPopover()" aria-label="关闭说明">×</button>
        </div>
        <div class="provider-help-popover-body" id="providerHelpBody"></div>
    </div>
{% endblock %}

{% block page_scripts %}
    <script src="/static/js/ui-message.js?v=20260319-1"></script>
    <script src="/static/vendor/ace/ace.js?v=1.43.6"></script>
    <script src="/static/vendor/ace/mode-yaml.js?v=1.43.6"></script>
    <script src="/static/vendor/ace/theme-textmate.js?v=1.43.6"></script>
    <script src="/static/vendor/ace/theme-tomorrow_night.js?v=1.43.6"></script>
    <script>
        let providers = [];
        let authGroups = [];
        let editingProviderName = null;
        let editingAuthGroupName = null;
        let providerModalInstance = null;
        let authGroupModalInstance = null;
        let authEntryImportModalInstance = null;
        let authGroupRuntimeModalInstance = null;
        let authEntryErrorModalInstance = null;
        let fetchModelPickerModalInstance = null;
        let modelDetailModalInstance = null;
        let activeModelProvider = null;
        let activeRuntimeAuthGroupName = null;
        let activeAuthGroupRuntime = null;
        let pendingDeleteProviderName = null;
        let deletingProviderName = null;
        let selectedProviderNames = new Set();
        let togglingProviderNames = new Set();
        let providerBatchActionInFlight = false;
        let fetchedModelCandidates = [];
        let fetchedModelSelection = new Set();
        let fetchedModelExistingSelection = new Set();
        let activeCustomSelect = null;
        let activeProviderHelpTopic = null;
        let activeProviderHelpTrigger = null;
        let activeProviderTab = 'providers';
        let pendingDeleteAuthEntryKey = null;
        let authEntryCardSequence = 0;
        let providerTransportAutoSyncEnabled = true;
        let authEntryYamlEditor = null;
        let authEntryYamlThemeObserver = null;
        const providerTargetFormatOptions = ['openai_chat', 'openai_responses', 'claude_chat', 'codex'];
        const defaultNewProviderTargetFormats = ['openai_chat', 'codex', 'claude_chat'];
        const providerTargetFormatConflictGroups = [
            ['openai_responses', 'codex'],
        ];
        const providerHelpTopics = {
            transport: {
                title: '上游传输怎么选',
                html: `
                    <p>上游传输只看代理如何连接真实 API 提供方，不看下游客户端。</p>
                    <ul>
                        <li><strong>HTTP</strong>：绝大多数 OpenAI、Responses、Anthropic Messages 接口都选它。</li>
                        <li><strong>WebSocket</strong>：只有上游明确要求用 ws:// 或 wss:// 持续收发消息时才选它。</li>
                    </ul>
                    <p>如果你拿到的地址是 <code>https://...</code>，通常就选 HTTP；如果是 <code>wss://...</code>，通常选 WebSocket。</p>
                `,
            },
            source_format: {
                title: '上游格式怎么选',
                html: `
                    <p>上游 = 代理真正去请求的 API 提供方。先看 URL，再看请求体主字段。</p>
                    <ul>
                        <li><strong>openai_chat</strong>：上游是 <code>/v1/chat/completions</code>，请求体里主要是 <code>messages</code>。</li>
                        <li><strong>openai_responses</strong>：上游是 <code>/v1/responses</code>，请求体主要是 <code>input</code> / <code>instructions</code>。</li>
                        <li><strong>claude_chat</strong>：上游是 <code>/v1/messages</code>。</li>
                        <li><strong>codex</strong>：上游也是 Responses 家族，但需要 Codex 特化请求规范。</li>
                    </ul>
                    <p>常见例子：vLLM、OpenRouter、Ollama 的 OpenAI 兼容层通常选 <code>openai_chat</code>；Anthropic Messages 选 <code>claude_chat</code>。</p>
                `,
            },
            target_format: {
                title: '下游格式怎么选',
                html: `
                    <p>下游 = 调用这个代理的客户端或工具。现在可以多选，同一个 provider 可以同时暴露多个下游协议。</p>
                    <ul>
                        <li><strong>openai_chat</strong>：下游走 <code>/v1/chat/completions</code>。适合 OpenCode、Cherry Studio 的 OpenAI provider。</li>
                        <li><strong>openai_responses</strong>：下游走 <code>/v1/responses</code>。适合 Responses API 客户端。</li>
                        <li><strong>codex</strong>：也走 <code>/v1/responses</code>，但保留 Codex 的请求语义。</li>
                        <li><strong>claude_chat</strong>：下游走 <code>/v1/messages</code>。适合 Claude Code 和 Anthropic 兼容客户端。</li>
                    </ul>
                    <p>注意：有些下游格式会互斥，因为它们共用同一个 route family 但请求语义不同。目前 <code>openai_responses</code> 和 <code>codex</code> 不能同时启用；以后如果有新的互斥组合，也会在这里说明。</p>
                    <p>在多选下拉里如果新选了冲突项，旧的冲突项会自动被替换。</p>
                `,
            },
            auth_group_field: {
                title: 'Auth Group 怎么用',
                html: `
                    <p><code>Auth Group</code> 是一组可复用凭证的名字，provider 绑定后，请求会从这组凭证里选择可用 entry。</p>
                    <ul>
                        <li><strong>适合</strong>：同一个上游需要多个 key / token 做轮换、并发控制、429 冷却或配额管理。</li>
                        <li><strong>和 Legacy API Key 的关系</strong>：二选一。选了 <code>Auth Group</code> 就不要再填 <code>Legacy API Key</code>。</li>
                    </ul>
                    <p>如果只是单个 key，继续用 <code>Legacy API Key</code> 就够了。</p>
                `,
            },
            auth_groups_overview: {
                title: 'Auth Groups 是什么',
                html: `
                    <p><code>Auth Group</code> 用来管理一组可复用的认证凭证，每个 entry 都可以有自己的 header、并发限制和配额。</p>
                    <ul>
                        <li><strong>并发控制</strong>：限制单个 entry 同时承载的请求数。</li>
                        <li><strong>429 冷却</strong>：某个 entry 被限流后，仅冷却这一条，不影响组内其他 entry。</li>
                        <li><strong>请求数 / Token 配额</strong>：按分钟和天维度统计与拦截。</li>
                    </ul>
                    <p>provider 只需要绑定 group 名称，具体选哪条凭证由运行时调度层负责。</p>
                `,
            },
            auth_group_strategy: {
                title: '策略怎么选',
                html: `
                    <p>当前只支持 <code>least_inflight</code>。</p>
                    <ul>
                        <li><strong>least_inflight</strong>：优先选择当前进行中请求数最少的 entry。</li>
                        <li><strong>适合场景</strong>：有长流式请求、多个 key 并发能力不同，想让流量更均匀地落在空闲 entry 上。</li>
                    </ul>
                    <p>如果多个 entry 当前 inflight 一样，系统还会按轮转游标继续打散，避免持续偏向同一条凭证。</p>
                `,
            },
            auth_entries_editor: {
                title: 'Auth Entries 怎么理解',
                html: `
                    <p>一个 <code>Auth Entry</code> 就是一条具体可用的认证凭证，通常是一组请求头。</p>
                    <ul>
                        <li><strong>headers</strong>：真正发给上游的认证信息，比如 <code>Authorization</code> 或 <code>x-api-key</code>。</li>
                        <li><strong>并发 / 冷却 / 配额</strong>：都按 entry 粒度生效，不会影响同组其他 entry。</li>
                        <li><strong>YAML 编辑</strong>：适合批量新增、删除、修改 entry，保存时会整体替换当前列表。</li>
                    </ul>
                `,
            },
            fetch_models: {
                title: '拉取模型怎么工作',
                html: `
                    <p>“拉取模型”会请求当前上游提供的 <code>/v1/models</code> 或 <code>/models</code> 接口，用它返回的模型列表帮助你填充当前 provider 的 <code>model_list</code>。</p>
                    <ul>
                        <li><strong>HTTP/HTTPS</strong>：直接请求当前配置地址对应的模型接口。</li>
                        <li><strong>WebSocket</strong>：会自动把 <code>ws://</code> / <code>wss://</code> 推导成对应的 <code>http://</code> / <code>https://</code> 后再尝试拉取。</li>
                    </ul>
                    <p>这一步只是帮你发现可选模型，不会修改上游协议，也不会自动替你决定 <code>source_format</code> 或 <code>target_formats</code>。</p>
                `,
            },
        };

        function closeAllCustomSelects() {
            document.querySelectorAll('.custom-select.open').forEach(select => {
                select.classList.remove('open');
                const trigger = select.querySelector('.custom-select-trigger');
                if (trigger) {
                    trigger.setAttribute('aria-expanded', 'false');
                }
            });
            activeCustomSelect = null;
        }

        function isWithinCustomSelectMenu(target) {
            return !!(target && typeof target.closest === 'function' && target.closest('.custom-select-menu'));
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        function decodeProviderName(encodedName) {
            return decodeURIComponent(encodedName);
        }

        function getProviderTabButton(tabName) {
            return document.getElementById(`providerTabBtn_${tabName}`);
        }

        function getProviderTabPanel(tabName) {
            return document.getElementById(`providerTabPanel_${tabName}`);
        }

        function syncProviderTabUi() {
            ['providers', 'auth_groups'].forEach(tabName => {
                const isActive = tabName === activeProviderTab;
                const button = getProviderTabButton(tabName);
                const panel = getProviderTabPanel(tabName);

                if (button) {
                    button.classList.toggle('is-active', isActive);
                    button.setAttribute('aria-selected', isActive ? 'true' : 'false');
                }

                if (panel) {
                    panel.hidden = !isActive;
                }
            });
        }

        function switchProviderTab(tabName) {
            if (!['providers', 'auth_groups'].includes(tabName)) {
                return;
            }
            activeProviderTab = tabName;
            syncProviderTabUi();
        }

        function getProviderHelpPopoverElement() {
            return document.getElementById('providerHelpPopover');
        }

        function hideProviderHelpPopover() {
            const popover = getProviderHelpPopoverElement();
            if (!popover) return;
            popover.hidden = true;
            popover.style.removeProperty('top');
            popover.style.removeProperty('left');
            popover.style.removeProperty('--popover-arrow-left');
            popover.dataset.placement = 'bottom';
            activeProviderHelpTopic = null;
            activeProviderHelpTrigger = null;
        }

        function syncProviderHelpPopover() {
            const popover = getProviderHelpPopoverElement();
            if (!popover || !activeProviderHelpTopic || !activeProviderHelpTrigger) {
                hideProviderHelpPopover();
                return;
            }

            const topic = providerHelpTopics[activeProviderHelpTopic];
            if (!topic || !document.body.contains(activeProviderHelpTrigger)) {
                hideProviderHelpPopover();
                return;
            }

            document.getElementById('providerHelpTitle').textContent = topic.title;
            document.getElementById('providerHelpBody').innerHTML = topic.html;
            popover.hidden = false;

            const triggerRect = activeProviderHelpTrigger.getBoundingClientRect();
            const popoverRect = popover.getBoundingClientRect();
            const viewportPadding = 12;
            const offset = 10;
            const canPlaceBottom = triggerRect.bottom + offset + popoverRect.height <= window.innerHeight - viewportPadding;
            const shouldPlaceBottom = canPlaceBottom || triggerRect.top < popoverRect.height + viewportPadding + offset;
            const top = shouldPlaceBottom
                ? Math.min(window.innerHeight - popoverRect.height - viewportPadding, triggerRect.bottom + offset)
                : Math.max(viewportPadding, triggerRect.top - popoverRect.height - offset);
            const left = Math.min(
                window.innerWidth - popoverRect.width - viewportPadding,
                Math.max(viewportPadding, triggerRect.left + ((triggerRect.width - popoverRect.width) / 2))
            );
            const arrowLeft = Math.min(
                popoverRect.width - 18,
                Math.max(18, triggerRect.left + (triggerRect.width / 2) - left)
            );

            popover.dataset.placement = shouldPlaceBottom ? 'bottom' : 'top';
            popover.style.top = `${top}px`;
            popover.style.left = `${left}px`;
            popover.style.setProperty('--popover-arrow-left', `${arrowLeft}px`);
        }

        function toggleProviderHelp(topic, event) {
            event?.preventDefault();
            event?.stopPropagation();
            const trigger = event?.currentTarget || null;
            if (activeProviderHelpTopic === topic && activeProviderHelpTrigger === trigger) {
                hideProviderHelpPopover();
                return;
            }
            activeProviderHelpTopic = topic;
            activeProviderHelpTrigger = trigger;
            syncProviderHelpPopover();
        }

        document.addEventListener('click', function(event) {
            if (!event.target.closest('.custom-select')) {
                closeAllCustomSelects();
            }
            if (!event.target.closest('.inline-confirm-wrap') && !event.target.closest('#providerDeletePopover')) {
                closeDeleteProviderConfirm();
            }
            if (!event.target.closest('[data-auth-entry-delete-trigger]') && !event.target.closest('#authEntryDeletePopover')) {
                closeDeleteAuthEntryConfirm();
            }
            if (!event.target.closest('[data-provider-help-topic]') && !event.target.closest('#providerHelpPopover')) {
                hideProviderHelpPopover();
            }
        });

        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeAllCustomSelects();
                closeDeleteProviderConfirm();
                closeDeleteAuthEntryConfirm();
                hideProviderHelpPopover();
            }
        });

        window.addEventListener('resize', function() {
            closeAllCustomSelects();
            closeDeleteProviderConfirm(false);
            closeDeleteAuthEntryConfirm(false);
            syncProviderHelpPopover();
        });

        window.addEventListener('scroll', function(event) {
            if (isWithinCustomSelectMenu(event.target)) {
                return;
            }
            closeAllCustomSelects();
            closeDeleteProviderConfirm(false);
            closeDeleteAuthEntryConfirm(false);
            syncProviderHelpPopover();
        }, true);

        function getProviderDeletePopoverElement() {
            return document.getElementById('providerDeletePopover');
        }

        function getProviderDeleteTrigger(name) {
            const triggerKey = encodeURIComponent(name);
            return Array.from(document.querySelectorAll('[data-provider-delete-trigger]'))
                .find(element => element.dataset.providerDeleteTrigger === triggerKey) || null;
        }

        function hideProviderDeletePopover() {
            const popover = getProviderDeletePopoverElement();
            if (!popover) return;
            popover.hidden = true;
            popover.style.removeProperty('top');
            popover.style.removeProperty('left');
            popover.style.removeProperty('--popover-arrow-left');
            popover.dataset.placement = 'bottom';
        }

        function syncDeleteProviderPopover() {
            const popover = getProviderDeletePopoverElement();
            if (!popover) return;

            if (pendingDeleteProviderName === null) {
                hideProviderDeletePopover();
                return;
            }

            const trigger = getProviderDeleteTrigger(pendingDeleteProviderName);
            if (!trigger) {
                pendingDeleteProviderName = null;
                deletingProviderName = null;
                hideProviderDeletePopover();
                return;
            }

            popover.hidden = false;
            const confirmButton = document.getElementById('confirmDeleteProviderBtn');
            if (confirmButton) {
                confirmButton.disabled = deletingProviderName === pendingDeleteProviderName;
                confirmButton.textContent = deletingProviderName === pendingDeleteProviderName ? '删除中...' : '确认';
            }

            const triggerRect = trigger.getBoundingClientRect();
            const popoverRect = popover.getBoundingClientRect();
            const viewportPadding = 12;
            const offset = 10;
            const canPlaceBottom = triggerRect.bottom + offset + popoverRect.height <= window.innerHeight - viewportPadding;
            const shouldPlaceBottom = canPlaceBottom || triggerRect.top < popoverRect.height + viewportPadding + offset;
            const top = shouldPlaceBottom
                ? Math.min(window.innerHeight - popoverRect.height - viewportPadding, triggerRect.bottom + offset)
                : Math.max(viewportPadding, triggerRect.top - popoverRect.height - offset);
            const left = Math.min(
                window.innerWidth - popoverRect.width - viewportPadding,
                Math.max(viewportPadding, triggerRect.left + ((triggerRect.width - popoverRect.width) / 2))
            );
            const arrowLeft = Math.min(
                popoverRect.width - 18,
                Math.max(18, triggerRect.left + (triggerRect.width / 2) - left)
            );

            popover.dataset.placement = shouldPlaceBottom ? 'bottom' : 'top';
            popover.style.top = `${top}px`;
            popover.style.left = `${left}px`;
            popover.style.setProperty('--popover-arrow-left', `${arrowLeft}px`);
        }

        function getNormalizedSelectedProviderNames() {
            const availableNames = new Set(
                providers
                    .map(provider => String(provider?.name || '').trim())
                    .filter(name => name !== '')
            );
            selectedProviderNames = new Set(
                Array.from(selectedProviderNames).filter(name => availableNames.has(name))
            );
            return providers
                .map(provider => String(provider?.name || '').trim())
                .filter(name => name !== '' && selectedProviderNames.has(name));
        }

        function updateProviderSelectionUi() {
            const selectedNames = getNormalizedSelectedProviderNames();
            const selectedCount = selectedNames.length;
            const totalCount = providers.length;
            const selectedCountElement = document.getElementById('selectedProviderCount');
            if (selectedCountElement) {
                selectedCountElement.textContent = String(selectedCount);
            }

            const selectAllCheckbox = document.getElementById('providerSelectAllCheckbox');
            if (selectAllCheckbox) {
                selectAllCheckbox.checked = totalCount > 0 && selectedCount === totalCount;
                selectAllCheckbox.indeterminate = selectedCount > 0 && selectedCount < totalCount;
                selectAllCheckbox.disabled = providerBatchActionInFlight || totalCount === 0;
            }

            document.querySelectorAll('[data-provider-row-checkbox]').forEach(element => {
                if (!(element instanceof HTMLInputElement)) return;
                element.disabled = providerBatchActionInFlight;
            });

            const shouldDisableBatchButtons = providerBatchActionInFlight || selectedCount === 0;
            [
                'enableSelectedProvidersBtn',
                'disableSelectedProvidersBtn',
            ].forEach(id => {
                const button = document.getElementById(id);
                if (!button) return;
                button.disabled = shouldDisableBatchButtons;
            });
        }

        function toggleProviderSelection(name, checked) {
            const normalizedName = String(name || '').trim();
            if (!normalizedName) return;
            if (checked) {
                selectedProviderNames.add(normalizedName);
            } else {
                selectedProviderNames.delete(normalizedName);
            }
            updateProviderSelectionUi();
        }

        function toggleAllProvidersSelection(checked) {
            if (checked) {
                selectedProviderNames = new Set(
                    providers
                        .map(provider => String(provider?.name || '').trim())
                        .filter(name => name !== '')
                );
            } else {
                selectedProviderNames = new Set();
            }
            renderProviders();
        }

        function clearSelectedProviders() {
            selectedProviderNames = new Set();
            renderProviders();
        }

        function getProviderBatchActionMeta(action) {
            return {
                enable: { label: '启用', past: '启用', fallback: '批量启用 Provider 失败' },
                disable: { label: '禁用', past: '禁用', fallback: '批量禁用 Provider 失败' },
            }[action] || null;
        }

        async function executeProviderBatchAction(action, selectedNames, meta) {
            closeDeleteProviderConfirm(false);
            providerBatchActionInFlight = true;
            renderProviders();

            try {
                const response = await fetch('/api/providers/batch', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        action: action,
                        names: selectedNames,
                    }),
                });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || meta.fallback);
                }

                selectedProviderNames = new Set(selectedNames);
                showMessage(`已批量${meta.past} ${result.count || selectedNames.length} 个 Provider，配置已重载`, 'success');
                await loadProviders();
            } catch (error) {
                console.error(`批量${meta.label} provider 失败:`, error);
                showActionError(`批量${meta.label} Provider`, error, { fallback: meta.fallback });
            } finally {
                providerBatchActionInFlight = false;
                renderProviders();
            }
        }

        function getAuthEntryDeletePopoverElement() {
            return document.getElementById('authEntryDeletePopover');
        }

        function getAuthEntryDeleteTrigger(entryKey) {
            return Array.from(document.querySelectorAll('[data-auth-entry-delete-trigger]'))
                .find(element => element.dataset.authEntryDeleteTrigger === entryKey) || null;
        }

        function getAuthEntryCardByKey(entryKey) {
            return Array.from(document.querySelectorAll('#authEntriesContainer .auth-entry-card'))
                .find(element => element.dataset.entryKey === entryKey) || null;
        }

        function clearActiveAuthEntryDeleteTriggers() {
            document.querySelectorAll('[data-auth-entry-delete-trigger].is-active').forEach(element => {
                element.classList.remove('is-active');
            });
        }

        function hideAuthEntryDeletePopover() {
            const popover = getAuthEntryDeletePopoverElement();
            if (!popover) return;
            popover.hidden = true;
            popover.style.removeProperty('top');
            popover.style.removeProperty('left');
            popover.style.removeProperty('--popover-arrow-left');
            popover.dataset.placement = 'bottom';
        }

        function syncDeleteAuthEntryPopover() {
            const popover = getAuthEntryDeletePopoverElement();
            if (!popover) return;

            clearActiveAuthEntryDeleteTriggers();
            if (pendingDeleteAuthEntryKey === null) {
                hideAuthEntryDeletePopover();
                return;
            }

            const trigger = getAuthEntryDeleteTrigger(pendingDeleteAuthEntryKey);
            if (!trigger || !document.body.contains(trigger)) {
                pendingDeleteAuthEntryKey = null;
                hideAuthEntryDeletePopover();
                return;
            }

            trigger.classList.add('is-active');
            popover.hidden = false;

            const triggerRect = trigger.getBoundingClientRect();
            const popoverRect = popover.getBoundingClientRect();
            const viewportPadding = 12;
            const offset = 10;
            const canPlaceBottom = triggerRect.bottom + offset + popoverRect.height <= window.innerHeight - viewportPadding;
            const shouldPlaceBottom = canPlaceBottom || triggerRect.top < popoverRect.height + viewportPadding + offset;
            const top = shouldPlaceBottom
                ? Math.min(window.innerHeight - popoverRect.height - viewportPadding, triggerRect.bottom + offset)
                : Math.max(viewportPadding, triggerRect.top - popoverRect.height - offset);
            const left = Math.min(
                window.innerWidth - popoverRect.width - viewportPadding,
                Math.max(viewportPadding, triggerRect.left + ((triggerRect.width - popoverRect.width) / 2))
            );
            const arrowLeft = Math.min(
                popoverRect.width - 18,
                Math.max(18, triggerRect.left + (triggerRect.width / 2) - left)
            );

            popover.dataset.placement = shouldPlaceBottom ? 'bottom' : 'top';
            popover.style.top = `${top}px`;
            popover.style.left = `${left}px`;
            popover.style.setProperty('--popover-arrow-left', `${arrowLeft}px`);
        }

        function toggleDeleteAuthEntryConfirm(entryKey, event) {
            event?.preventDefault();
            event?.stopPropagation();

            pendingDeleteAuthEntryKey = pendingDeleteAuthEntryKey === entryKey ? null : entryKey;
            closeDeleteProviderConfirm(false);
            syncDeleteAuthEntryPopover();
        }

        function cancelDeleteAuthEntryConfirm(event) {
            event?.stopPropagation();
            closeDeleteAuthEntryConfirm();
        }

        function closeDeleteAuthEntryConfirm(shouldSync = true) {
            if (pendingDeleteAuthEntryKey === null) return;
            pendingDeleteAuthEntryKey = null;
            hideAuthEntryDeletePopover();
            if (shouldSync) {
                syncDeleteAuthEntryPopover();
            } else {
                clearActiveAuthEntryDeleteTriggers();
            }
        }

        function confirmDeleteAuthEntry(event) {
            event?.stopPropagation();
            const entryKey = pendingDeleteAuthEntryKey;
            if (!entryKey) return;

            closeDeleteAuthEntryConfirm(false);
            removeAuthEntryCard(entryKey);
        }

        function getModelPreview(models, limit = 6) {
            const items = Array.isArray(models) ? models : [];
            const visible = items.slice(0, limit);
            return {
                visible: visible,
                hiddenCount: Math.max(items.length - visible.length, 0),
                total: items.length
            };
        }

        function renderModelDetailList() {
            const searchInput = document.getElementById('modelSearchInput');
            const listElement = document.getElementById('modelDetailList');
            const summaryElement = document.getElementById('modelDetailSummary');
            if (!listElement || !summaryElement) return;

            const query = (searchInput?.value || '').trim().toLowerCase();
            const allModels = Array.isArray(activeModelProvider?.model_list) ? activeModelProvider.model_list : [];
            const filtered = query
                ? allModels.filter(model => String(model).toLowerCase().includes(query))
                : allModels;

            summaryElement.textContent = query
                ? `共 ${allModels.length} 个模型，筛选后 ${filtered.length} 个`
                : `共 ${allModels.length} 个模型`;

            if (!filtered.length) {
                listElement.innerHTML = '<div class="empty-state">没有匹配的模型</div>';
                return;
            }

            listElement.innerHTML = filtered
                .map(model => `<span class="model-tag model-tag-detail">${escapeHtml(model)}</span>`)
                .join('');
        }

        function openModelDetail(name) {
            const provider = providers.find(item => item.name === name);
            if (!provider) return;

            switchProviderTab('providers');
            activeModelProvider = provider;
            document.getElementById('modelDetailTitle').textContent = `${provider.name} - 模型列表`;
            document.getElementById('modelDetailSubtitle').textContent = provider?.api ? `API 地址: ${provider.api}` : '未配置 API 地址';
            document.getElementById('modelSearchInput').value = '';
            renderModelDetailList();
            modelDetailModalInstance.show();
        }

        function resetFetchModelPickerState() {
            fetchedModelCandidates = [];
            fetchedModelSelection = new Set();
            fetchedModelExistingSelection = new Set();

            const searchInput = document.getElementById('fetchModelSearchInput');
            if (searchInput) {
                searchInput.value = '';
            }

            const summaryElement = document.getElementById('fetchModelSummary');
            if (summaryElement) {
                summaryElement.textContent = '共拉取 0 个模型，已选 0 个';
            }

            const selectAllCheckbox = document.getElementById('fetchModelSelectAllCheckbox');
            if (selectAllCheckbox) {
                selectAllCheckbox.checked = false;
                selectAllCheckbox.indeterminate = false;
                selectAllCheckbox.disabled = true;
            }

            const listBodyElement = document.getElementById('fetchModelListBody');
            if (listBodyElement) {
                listBodyElement.innerHTML = '';
            }
        }

        function getFilteredFetchedModels() {
            const query = (document.getElementById('fetchModelSearchInput')?.value || '').trim().toLowerCase();
            if (!query) return fetchedModelCandidates;
            return fetchedModelCandidates.filter(model => String(model).toLowerCase().includes(query));
        }

        function updateFetchModelSummary(filteredCount = fetchedModelCandidates.length) {
            const summaryElement = document.getElementById('fetchModelSummary');
            if (!summaryElement) return;

            const totalCount = fetchedModelCandidates.length;
            const selectedCount = fetchedModelSelection.size;
            const existingCount = fetchedModelExistingSelection.size;
            const visibleText = filteredCount !== totalCount ? `，当前显示 ${filteredCount} 个` : '';
            const existingText = existingCount ? `，其中 ${existingCount} 个原已在当前清单` : '';

            summaryElement.textContent = `共拉取 ${totalCount} 个模型${visibleText}，已选 ${selectedCount} 个${existingText}`;
        }

        function syncFetchModelSelectAllState(filteredModels = getFilteredFetchedModels()) {
            const selectAllCheckbox = document.getElementById('fetchModelSelectAllCheckbox');
            if (!selectAllCheckbox) return;

            const visibleCount = filteredModels.length;
            const selectedVisibleCount = filteredModels.filter(model => fetchedModelSelection.has(model)).length;

            selectAllCheckbox.disabled = visibleCount === 0;
            selectAllCheckbox.indeterminate = visibleCount > 0 && selectedVisibleCount > 0 && selectedVisibleCount < visibleCount;
            selectAllCheckbox.checked = visibleCount > 0 && selectedVisibleCount === visibleCount;
        }

        function renderFetchModelPicker() {
            const listBodyElement = document.getElementById('fetchModelListBody');
            if (!listBodyElement) return;

            const filteredModels = getFilteredFetchedModels();
            updateFetchModelSummary(filteredModels.length);
            syncFetchModelSelectAllState(filteredModels);

            if (!filteredModels.length) {
                listBodyElement.innerHTML = '<div class="empty-state">没有匹配的拉取模型</div>';
                return;
            }

            listBodyElement.innerHTML = filteredModels
                .map(model => {
                    const encodedModel = encodeURIComponent(model);
                    const isSelected = fetchedModelSelection.has(model);
                    const isExisting = fetchedModelExistingSelection.has(model);
                    return `
                        <label class="fetch-model-item${isSelected ? ' selected' : ''}${isExisting ? ' existing' : ''}">
                            <span class="fetch-model-item-main">
                                <input
                                    type="checkbox"
                                    class="fetch-model-checkbox"
                                    ${isSelected ? 'checked' : ''}
                                    onchange="toggleFetchedModelSelection('${encodedModel}', this.checked, this)"
                                >
                                <span class="fetch-model-item-name">${escapeHtml(model)}</span>
                            </span>
                            ${isExisting ? '<span class="fetch-model-item-badge">已在清单</span>' : ''}
                        </label>
                    `;
                })
                .join('');
        }

        function openFetchModelPicker(fetchedModels) {
            const normalizedFetchedModels = normalizeModelListItems(Array.isArray(fetchedModels) ? fetchedModels.join('\n') : '');
            const currentModels = normalizeModelListItems(document.getElementById('providerModelList').value);
            const fetchedModelSet = new Set(normalizedFetchedModels);

            fetchedModelCandidates = normalizedFetchedModels;
            fetchedModelExistingSelection = new Set(currentModels.filter(model => fetchedModelSet.has(model)));
            fetchedModelSelection = new Set(fetchedModelExistingSelection);

            const searchInput = document.getElementById('fetchModelSearchInput');
            if (searchInput) {
                searchInput.value = '';
            }

            renderFetchModelPicker();
            fetchModelPickerModalInstance.show();
            return normalizedFetchedModels.length;
        }

        function toggleFetchedModelSelection(encodedModel, checked, inputElement) {
            const model = decodeURIComponent(encodedModel);
            if (checked) {
                fetchedModelSelection.add(model);
            } else {
                fetchedModelSelection.delete(model);
            }

            const itemElement = inputElement?.closest('.fetch-model-item');
            if (itemElement) {
                itemElement.classList.toggle('selected', checked);
            }

            const filteredModels = getFilteredFetchedModels();
            updateFetchModelSummary(filteredModels.length);
            syncFetchModelSelectAllState(filteredModels);
        }

        function toggleFilteredFetchedModels(checked) {
            getFilteredFetchedModels().forEach(model => {
                if (checked) {
                    fetchedModelSelection.add(model);
                } else {
                    fetchedModelSelection.delete(model);
                }
            });
            renderFetchModelPicker();
        }

        function applyFetchedModelsSelection() {
            const textarea = document.getElementById('providerModelList');
            if (!textarea) return;

            const currentModels = normalizeModelListItems(textarea.value);
            const currentModelSet = new Set(currentModels);
            const fetchedModelSet = new Set(fetchedModelCandidates);
            const selectedFetchedModels = fetchedModelCandidates.filter(model => fetchedModelSelection.has(model));
            const nextModels = [];
            const seen = new Set();

            currentModels.forEach(model => {
                if (fetchedModelSet.has(model) && !fetchedModelSelection.has(model)) {
                    return;
                }
                if (seen.has(model)) {
                    return;
                }
                seen.add(model);
                nextModels.push(model);
            });

            selectedFetchedModels.forEach(model => {
                if (seen.has(model)) {
                    return;
                }
                seen.add(model);
                nextModels.push(model);
            });

            const addedCount = selectedFetchedModels.filter(model => !currentModelSet.has(model)).length;
            const removedCount = currentModels.filter(model => fetchedModelSet.has(model) && !fetchedModelSelection.has(model)).length;

            textarea.value = buildModelListValue(nextModels);
            updateModelListCount();
            fetchModelPickerModalInstance.hide();

            if (!addedCount && !removedCount) {
                showMessage('Model List 未发生变化', 'success');
                return;
            }

            showMessage(`Model List 已更新，新增 ${addedCount} 个，移除 ${removedCount} 个`, 'success');
        }

        function normalizeModelListItems(value) {
            const rawItems = String(value ?? '').split(/\r?\n/);
            const models = [];
            const seen = new Set();

            rawItems.forEach(item => {
                const model = item.trim();
                if (!model || seen.has(model)) return;
                seen.add(model);
                models.push(model);
            });

            return models;
        }

        function buildModelListValue(models) {
            return models.join('\n');
        }

        function compareModelListItems(a, b) {
            if (a < b) return -1;
            if (a > b) return 1;
            return 0;
        }

        function sortModelListItems(models) {
            return [...models].sort(compareModelListItems);
        }

        function updateModelListCount() {
            const countElement = document.getElementById('providerModelCount');
            const textarea = document.getElementById('providerModelList');
            if (!countElement || !textarea) return;

            const models = normalizeModelListItems(textarea.value);
            countElement.textContent = `${models.length} 个模型`;
        }

        function applyNormalizedModelListValue(showFeedback = false, sortItems = false) {
            const textarea = document.getElementById('providerModelList');
            if (!textarea) return false;

            const before = textarea.value;
            const normalizedItems = normalizeModelListItems(before);
            const nextItems = sortItems ? sortModelListItems(normalizedItems) : normalizedItems;
            const normalizedValue = buildModelListValue(nextItems);
            const changed = before !== normalizedValue;

            textarea.value = normalizedValue;
            updateModelListCount();

            if (showFeedback) {
                if (changed) {
                    showMessage(`Model List 已整理并排序，保留 ${nextItems.length} 个模型`, 'success');
                } else {
                    showMessage('Model List 已是整理排序后的格式', 'success');
                }
            }

            return changed;
        }

        function tidyModelList() {
            applyNormalizedModelListValue(true, true);
        }

        function renderProviderAuthGroupOptions(selectedValue = '') {
            const select = document.getElementById('providerAuthGroup');
            if (!select) return;

            const previousValue = selectedValue || select.value || '';
            const options = ['<option value="">请选择 Auth Group</option>']
                .concat(
                    authGroups
                        .slice()
                        .sort((a, b) => String(a?.name || '').localeCompare(String(b?.name || '')))
                        .map(group => `<option value="${escapeHtml(group.name)}">${escapeHtml(group.name)}</option>`)
                );
            select.innerHTML = options.join('');
            select.value = previousValue;
            if (select.value !== previousValue) {
                select.value = '';
            }
            renderCustomSelectOptions('providerAuthGroup');
        }

        function updateProviderAuthModeFields() {
            const authMode = document.getElementById('providerAuthMode')?.value || 'legacy_api_key';
            const authGroupField = document.getElementById('providerAuthGroupField');
            const legacyApiKeyField = document.getElementById('providerLegacyApiKeyField');
            if (authGroupField) {
                authGroupField.hidden = authMode !== 'auth_group';
            }
            if (legacyApiKeyField) {
                legacyApiKeyField.hidden = authMode !== 'legacy_api_key';
            }
            updateFetchModelsButtonState();
        }

        function getSelectedOptionValues(select) {
            if (!select) {
                return [];
            }
            return Array.from(select.options)
                .filter(option => option.selected)
                .map(option => option.value);
        }

        function normalizeProviderTargetFormatValues(values, preferredValue = '') {
            const normalizedPreferredValue = String(preferredValue ?? '').trim();
            const requestedValues = Array.isArray(values) ? values : [values];
            const selectedValues = new Set();

            requestedValues.forEach(value => {
                const normalizedValue = String(value ?? '').trim();
                if (!normalizedValue || !providerTargetFormatOptions.includes(normalizedValue)) {
                    return;
                }
                selectedValues.add(normalizedValue);
            });

            providerTargetFormatConflictGroups.forEach(group => {
                const conflictingValues = group.filter(value => selectedValues.has(value));
                if (conflictingValues.length <= 1) {
                    return;
                }
                const keptValue = conflictingValues.includes(normalizedPreferredValue)
                    ? normalizedPreferredValue
                    : conflictingValues[conflictingValues.length - 1];
                conflictingValues.forEach(value => {
                    if (value !== keptValue) {
                        selectedValues.delete(value);
                    }
                });
            });

            if (!selectedValues.size) {
                selectedValues.add('openai_chat');
            }

            return providerTargetFormatOptions.filter(value => selectedValues.has(value));
        }

        function setProviderTargetFormatValues(values, preferredValue = '', options = {}) {
            const select = document.getElementById('providerTargetFormat');
            if (!select) {
                return [];
            }
            const { dispatchChange = false } = options || {};
            const normalizedValues = normalizeProviderTargetFormatValues(values, preferredValue);
            Array.from(select.options).forEach(option => {
                option.selected = normalizedValues.includes(option.value);
            });
            if (dispatchChange) {
                select.dispatchEvent(new Event('change', { bubbles: true }));
            } else {
                syncCustomSelectValue('providerTargetFormat');
            }
            return normalizedValues;
        }

        function getProviderTargetFormats(provider) {
            const rawValues = Array.isArray(provider?.target_formats)
                ? provider.target_formats
                // DEPRECATED compatibility path for legacy payloads that still
                // expose `target_format`. New backend responses should only
                // provide `target_formats`, and this fallback can be removed later.
                : [provider?.target_format];
            return normalizeProviderTargetFormatValues(rawValues);
        }

        function collectFormData() {
            const targetFormatInput = document.getElementById('providerTargetFormat');
            const normalizedTargetFormats = targetFormatInput
                ? normalizeProviderTargetFormatValues(getSelectedOptionValues(targetFormatInput))
                : ['openai_chat'];
            const normalizedModelList = buildModelListValue(
                normalizeModelListItems(document.getElementById('providerModelList').value)
            );
            const authMode = document.getElementById('providerAuthMode')?.value || 'legacy_api_key';
            const authGroup = authMode === 'auth_group'
                ? document.getElementById('providerAuthGroup')?.value?.trim() || ''
                : '';
            const apiKey = authMode === 'legacy_api_key'
                ? document.getElementById('providerApiKey').value.trim()
                : '';
            return {
                name: document.getElementById('providerName').value.trim(),
                api: document.getElementById('providerApi').value.trim(),
                transport: document.getElementById('providerTransport').value,
                source_format: document.getElementById('providerSourceFormat').value.trim() || 'openai_chat',
                target_formats: normalizedTargetFormats,
                auth_group: authGroup,
                api_key: apiKey,
                proxy: document.getElementById('providerProxy').value.trim(),
                timeout_seconds: document.getElementById('providerTimeout').value.trim(),
                max_retries: document.getElementById('providerRetries').value.trim(),
                verify_ssl: document.getElementById('providerVerifySsl').value,
                model_list: normalizedModelList,
                hook: document.getElementById('providerHook').value.trim()
            };
        }

        function buildMultiSelectTriggerMarkup(nativeSelect, selectedLabels) {
            const placeholder = nativeSelect.dataset.placeholder || '请选择';
            const visibleLabels = selectedLabels.slice(0, 2);
            const hiddenCount = Math.max(selectedLabels.length - visibleLabels.length, 0);
            const chipsMarkup = selectedLabels.length
                ? visibleLabels
                    .map(label => `<span class="custom-select-trigger-chip">${escapeHtml(label)}</span>`)
                    .join('')
                    + (hiddenCount ? `<span class="custom-select-trigger-chip custom-select-trigger-chip-more">+${hiddenCount}</span>` : '')
                : `<span class="custom-select-trigger-placeholder">${escapeHtml(placeholder)}</span>`;

            return `
                <span class="custom-select-trigger-main">
                    <span class="custom-select-trigger-chips${selectedLabels.length ? '' : ' is-placeholder'}">${chipsMarkup}</span>
                </span>
            `;
        }

        function syncCustomSelectValue(selectId) {
            const nativeSelect = document.getElementById(selectId);
            const customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!nativeSelect || !customSelect) return;

            const isMultiSelect = nativeSelect.multiple;
            const trigger = customSelect.querySelector('.custom-select-trigger');
            const selectedOptions = isMultiSelect
                ? Array.from(nativeSelect.options).filter(option => option.selected)
                : [nativeSelect.options[nativeSelect.selectedIndex] || nativeSelect.options[0]].filter(Boolean);
            const selectedLabels = selectedOptions
                .map(option => option.textContent || '')
                .filter(Boolean);
            if (trigger) {
                if (isMultiSelect) {
                    trigger.innerHTML = buildMultiSelectTriggerMarkup(nativeSelect, selectedLabels);
                } else {
                    const triggerText = selectedLabels.length > 2
                        ? `${selectedLabels.slice(0, 2).join(', ')} +${selectedLabels.length - 2}`
                        : (selectedLabels.join(', ') || nativeSelect.dataset.placeholder || '请选择');
                    trigger.textContent = triggerText;
                }
                trigger.title = selectedLabels.join(', ');
            }

            const selectedValues = getSelectedOptionValues(nativeSelect);
            customSelect.classList.toggle('is-multi', isMultiSelect);
            customSelect.querySelectorAll('.custom-select-option').forEach(option => {
                const isSelected = isMultiSelect
                    ? selectedValues.includes(option.dataset.value || '')
                    : option.dataset.value === nativeSelect.value;
                option.classList.toggle('selected', isSelected);
                option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
            });
        }

        function renderCustomSelectOptions(selectId) {
            const nativeSelect = document.getElementById(selectId);
            const customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!nativeSelect || !customSelect) return;

            const isMultiSelect = nativeSelect.multiple;
            const menu = customSelect.querySelector('.custom-select-menu');
            if (!menu) return;
            menu.innerHTML = '';
            menu.setAttribute('aria-multiselectable', isMultiSelect ? 'true' : 'false');

            Array.from(nativeSelect.options).forEach(option => {
                const optionButton = document.createElement('button');
                optionButton.type = 'button';
                optionButton.className = isMultiSelect
                    ? 'custom-select-option custom-select-option-multi'
                    : 'custom-select-option';
                if (isMultiSelect) {
                    optionButton.innerHTML = `
                        <span class="custom-select-option-check" aria-hidden="true"></span>
                        <span class="custom-select-option-label">${escapeHtml(option.textContent || '')}</span>
                    `;
                } else {
                    optionButton.textContent = option.textContent;
                }
                optionButton.dataset.value = option.value;
                optionButton.setAttribute('role', 'option');
                optionButton.setAttribute('aria-selected', option.selected ? 'true' : 'false');
                optionButton.addEventListener('click', function(event) {
                    event.preventDefault();
                    if (isMultiSelect) {
                        const currentValues = getSelectedOptionValues(nativeSelect);
                        const nextValues = currentValues.includes(option.value)
                            ? currentValues.filter(value => value !== option.value)
                            : currentValues.concat(option.value);
                        if (selectId === 'providerTargetFormat') {
                            setProviderTargetFormatValues(nextValues, option.value, { dispatchChange: true });
                        } else {
                            Array.from(nativeSelect.options).forEach(selectOption => {
                                selectOption.selected = nextValues.includes(selectOption.value);
                            });
                            nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));
                        }
                        return;
                    }
                    if (nativeSelect.value !== option.value) {
                        nativeSelect.value = option.value;
                        nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                    syncCustomSelectValue(selectId);
                    closeAllCustomSelects();
                });
                menu.appendChild(optionButton);
            });
            if (isMultiSelect) {
                const menuHint = document.createElement('div');
                menuHint.className = 'custom-select-menu-hint';
                menuHint.textContent = nativeSelect.dataset.multiSelectHint || '可多选，点击已选项可取消';
                menu.appendChild(menuHint);
            }

            syncCustomSelectValue(selectId);
        }

        function setupCustomSelect(selectId) {
            const nativeSelect = document.getElementById(selectId);
            if (!nativeSelect) return;

            nativeSelect.classList.add('native-select-hidden');

            let customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!customSelect) {
                customSelect = document.createElement('div');
                customSelect.className = 'custom-select';
                customSelect.dataset.for = selectId;
                customSelect.innerHTML = `
                    <button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false"></button>
                    <div class="custom-select-menu" role="listbox"></div>
                `;
                nativeSelect.insertAdjacentElement('afterend', customSelect);

                const trigger = customSelect.querySelector('.custom-select-trigger');
                if (trigger) {
                    trigger.addEventListener('click', function(event) {
                        event.stopPropagation();
                        const isOpen = customSelect.classList.contains('open');
                        closeAllCustomSelects();
                        if (!isOpen) {
                            const rect = customSelect.getBoundingClientRect();
                            const spaceBelow = window.innerHeight - rect.bottom;
                            customSelect.classList.toggle('drop-up', spaceBelow < 236);
                            customSelect.classList.add('open');
                            trigger.setAttribute('aria-expanded', 'true');
                            activeCustomSelect = customSelect;
                        }
                    });

                    trigger.addEventListener('keydown', function(event) {
                        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
                            event.preventDefault();
                            trigger.click();
                        } else if (event.key === 'Escape') {
                            closeAllCustomSelects();
                        }
                    });
                }

                nativeSelect.addEventListener('change', function() {
                    syncCustomSelectValue(selectId);
                });
            }

            customSelect.classList.toggle('is-multi', nativeSelect.multiple);
            renderCustomSelectOptions(selectId);
        }

        function setSelectValueOrFallback(elementId, desiredValue, fallbackValue) {
            const select = document.getElementById(elementId);
            if (!select) {
                return;
            }
            if (select.multiple) {
                const desiredValues = Array.isArray(desiredValue) ? desiredValue : [desiredValue];
                const fallbackValues = Array.isArray(fallbackValue) ? fallbackValue : [fallbackValue];
                const resolvedValues = desiredValues.filter(value => value !== undefined && value !== null && value !== '');
                if (elementId === 'providerTargetFormat') {
                    setProviderTargetFormatValues(resolvedValues.length ? resolvedValues : fallbackValues);
                } else {
                    const nextValues = resolvedValues.length ? resolvedValues : fallbackValues;
                    Array.from(select.options).forEach(option => {
                        option.selected = nextValues.includes(option.value);
                    });
                    syncCustomSelectValue(elementId);
                }
                return;
            }
            const resolvedFallback = fallbackValue ?? '';
            const resolvedValue = desiredValue !== undefined && desiredValue !== null && desiredValue !== ''
                ? String(desiredValue)
                : String(resolvedFallback);
            select.value = resolvedValue;
            if (select.value !== resolvedValue) {
                select.value = String(resolvedFallback);
            }
            syncCustomSelectValue(elementId);
        }

        function fillForm(provider) {
            const inferredTransport = inferTransportFromApi(provider?.api || '');
            const resolvedTransport = provider?.transport || inferredTransport;
            const authMode = provider
                ? (provider.auth_group ? 'auth_group' : 'legacy_api_key')
                : 'legacy_api_key';
            document.getElementById('providerName').value = provider?.name || '';
            document.getElementById('providerApi').value = provider?.api || '';
            setSelectValueOrFallback('providerTransport', resolvedTransport, inferredTransport);
            setSelectValueOrFallback('providerSourceFormat', provider?.source_format, 'openai_chat');
            setProviderTargetFormatValues(provider ? getProviderTargetFormats(provider) : defaultNewProviderTargetFormats);
            setSelectValueOrFallback('providerAuthMode', authMode, 'legacy_api_key');
            renderProviderAuthGroupOptions(provider?.auth_group || '');
            document.getElementById('providerApiKey').value = provider?.api_key || '';
            document.getElementById('providerProxy').value = provider?.proxy || '';
            document.getElementById('providerTimeout').value = provider?.timeout_seconds || '';
            document.getElementById('providerRetries').value = provider?.max_retries || '';
            setSelectValueOrFallback('providerVerifySsl', provider?.verify_ssl === true ? 'true' : 'false', 'false');
            document.getElementById('providerModelList').value = Array.isArray(provider?.model_list) ? buildModelListValue(provider.model_list) : '';
            document.getElementById('providerHook').value = provider?.hook || '';
            resetProviderTransportAutoSync(provider);
            updateProviderAuthModeFields();
            updateModelListCount();
            updateFetchModelsButtonState();
        }

        function inferExplicitTransportFromApi(apiValue) {
            const normalized = String(apiValue ?? '').trim().toLowerCase();
            if (normalized.startsWith('ws://') || normalized.startsWith('wss://')) {
                return 'websocket';
            }
            if (normalized.startsWith('http://') || normalized.startsWith('https://')) {
                return 'http';
            }
            return null;
        }

        function inferTransportFromApi(apiValue) {
            return inferExplicitTransportFromApi(apiValue) || 'http';
        }

        function resetProviderTransportAutoSync(provider) {
            const explicitTransport = inferExplicitTransportFromApi(provider?.api || '');
            if (!provider) {
                providerTransportAutoSyncEnabled = true;
                return;
            }
            providerTransportAutoSyncEnabled = !explicitTransport || provider?.transport === explicitTransport;
        }

        function syncProviderTransportWithApi(force = false) {
            const explicitTransport = inferExplicitTransportFromApi(document.getElementById('providerApi')?.value || '');
            if (!explicitTransport || (!force && !providerTransportAutoSyncEnabled)) {
                return;
            }
            setSelectValueOrFallback('providerTransport', explicitTransport, explicitTransport);
        }

        function handleProviderApiInput() {
            syncProviderTransportWithApi();
            updateFetchModelsButtonState();
        }

        function handleProviderTransportChange() {
            const explicitTransport = inferExplicitTransportFromApi(document.getElementById('providerApi')?.value || '');
            const selectedTransport = document.getElementById('providerTransport')?.value || '';
            providerTransportAutoSyncEnabled = !explicitTransport || selectedTransport === explicitTransport;
            updateFetchModelsButtonState();
        }

        function getEffectiveTransport() {
            return document.getElementById('providerTransport')?.value || inferTransportFromApi(document.getElementById('providerApi')?.value || '');
        }

        function canFetchModels() {
            return !!document.getElementById('providerApi').value.trim();
        }

        function updateFetchModelsButtonState() {
            const button = document.getElementById('fetchModelsBtn');
            if (!button || button.dataset.loading === 'true') return;
            button.disabled = !canFetchModels();
        }

        function openCreateModal() {
            switchProviderTab('providers');
            editingProviderName = null;
            document.getElementById('providerModalLabel').textContent = '新增 Provider';
            fillForm(null);
            providerModalInstance.show();
        }

        function openEditModal(name) {
            const provider = providers.find(item => item.name === name);
            if (!provider) return;
            switchProviderTab('providers');
            editingProviderName = name;
            document.getElementById('providerModalLabel').textContent = '编辑 Provider';
            fillForm(provider);
            providerModalInstance.show();
        }

        function openCreateAuthGroupModal() {
            switchProviderTab('auth_groups');
            editingAuthGroupName = null;
            document.getElementById('authGroupModalLabel').textContent = '新增 Auth Group';
            fillAuthGroupForm(null);
            authGroupModalInstance.show();
        }

        function openEditAuthGroupModal(name) {
            const authGroup = authGroups.find(item => item.name === name);
            if (!authGroup) return;
            switchProviderTab('auth_groups');
            editingAuthGroupName = name;
            document.getElementById('authGroupModalLabel').textContent = '编辑 Auth Group';
            fillAuthGroupForm(authGroup);
            authGroupModalInstance.show();
        }

        async function loadPageData() {
            await Promise.all([loadAuthGroups(), loadProviders()]);
        }

        async function loadAuthGroups() {
            try {
                const response = await fetch('/api/auth-groups');
                const data = await response.json();
                if (!response.ok) {
                    throw new Error(data.error || '加载 auth group 失败');
                }
                authGroups = Array.isArray(data) ? data : [];
                renderProviderAuthGroupOptions(document.getElementById('providerAuthGroup')?.value || '');
                renderAuthGroups();
            } catch (error) {
                console.error('加载 auth group 失败:', error);
                document.getElementById('authGroupsContainer').innerHTML = '<div class="error">加载 auth group 失败</div>';
            }
        }

        async function loadProviders() {
            try {
                pendingDeleteProviderName = null;
                deletingProviderName = null;
                hideProviderDeletePopover();
                const response = await fetch('/api/providers');
                const data = await response.json();
                if (!response.ok) {
                    throw new Error(data.error || '加载 provider 失败');
                }
                providers = Array.isArray(data) ? data : [];
                getNormalizedSelectedProviderNames();
                renderProviderAuthGroupOptions(document.getElementById('providerAuthGroup')?.value || '');
                renderProviders();
            } catch (error) {
                console.error('加载 provider 失败:', error);
                document.getElementById('providersContainer').innerHTML = '<div class="error">加载 provider 失败</div>';
                updateProviderSelectionUi();
            }
        }

        function renderAuthGroups() {
            const container = document.getElementById('authGroupsContainer');
            const authGroupCountElement = document.getElementById('authGroupCount');
            const authEntryCountElement = document.getElementById('authEntryCount');
            const availableCountElement = document.getElementById('authGroupAvailableCount');
            const cooldownCountElement = document.getElementById('authGroupCooldownCount');
            const disabledCountElement = document.getElementById('authGroupDisabledCount');

            const summary = authGroups.reduce((acc, group) => {
                const groupSummary = group?.summary || {};
                acc.authGroupCount += 1;
                acc.entryCount += Number(groupSummary.entry_count || (Array.isArray(group?.entries) ? group.entries.length : 0));
                acc.availableCount += Number(groupSummary.available_count || 0);
                acc.cooldownCount += Number(groupSummary.cooldown_count || 0);
                acc.disabledCount += Number(groupSummary.disabled_count || 0);
                return acc;
            }, {
                authGroupCount: 0,
                entryCount: 0,
                availableCount: 0,
                cooldownCount: 0,
                disabledCount: 0,
            });

            if (authGroupCountElement) authGroupCountElement.textContent = summary.authGroupCount;
            if (authEntryCountElement) authEntryCountElement.textContent = summary.entryCount;
            if (availableCountElement) availableCountElement.textContent = summary.availableCount;
            if (cooldownCountElement) cooldownCountElement.textContent = summary.cooldownCount;
            if (disabledCountElement) disabledCountElement.textContent = summary.disabledCount;

            if (!authGroups.length) {
                container.innerHTML = '<div class="empty-state">当前没有 auth group 配置</div>';
                return;
            }

            let html = `
                <table class="providers-table">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>策略</th>
                            <th>Entry 数</th>
                            <th>关联 Provider 数</th>
                            <th>运行态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            authGroups.forEach(group => {
                const entries = Array.isArray(group.entries) ? group.entries : [];
                const summary = group.summary || {};
                const entryCount = Number(summary.entry_count || entries.length || 0);
                html += `
                    <tr>
                        <td class="provider-name-cell">
                            <span class="provider-name-text">${escapeHtml(group.name)}</span>
                        </td>
                        <td class="provider-api-cell">
                            <div class="provider-meta-line">
                                <span class="provider-chip">${escapeHtml(group.strategy || 'least_inflight')}</span>
                                <span class="provider-chip provider-chip-target">429 ${escapeHtml(group.cooldown_seconds_on_429 ?? '')}s</span>
                            </div>
                        </td>
                        <td class="provider-model-cell">${escapeHtml(entryCount)}</td>
                        <td>${escapeHtml(group.provider_count ?? 0)}</td>
                        <td>
                            <div class="provider-meta-line">
                                <span class="provider-chip">available ${escapeHtml(summary.available_count ?? 0)}</span>
                                <span class="provider-chip provider-chip-target">cooldown ${escapeHtml(summary.cooldown_count ?? 0)}</span>
                                <span class="provider-chip provider-chip-hook">disabled ${escapeHtml(summary.disabled_count ?? 0)}</span>
                            </div>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn-action btn-edit" onclick="openEditAuthGroupModal(decodeProviderName('${encodeURIComponent(group.name)}'))">编辑</button>
                                <button class="btn-action btn-edit" onclick="openAuthGroupRuntimeModal(decodeProviderName('${encodeURIComponent(group.name)}'))">运行态</button>
                                <button class="btn-action btn-delete" onclick="deleteAuthGroup(decodeProviderName('${encodeURIComponent(group.name)}'))">删除</button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            html += '</tbody></table>';
            container.innerHTML = html;
        }

        function renderProviders() {
            const container = document.getElementById('providersContainer');
            const providerCountElement = document.getElementById('providerCount');
            if (providerCountElement) {
                providerCountElement.textContent = providers.length;
            }
            if (!providers.length) {
                container.innerHTML = '<div class="empty-state">当前没有 provider 配置</div>';
                updateProviderSelectionUi();
                return;
            }

            let html = `
                <table class="providers-table">
                    <thead>
                        <tr>
                            <th class="provider-select-column">
                                <input
                                    type="checkbox"
                                    class="provider-table-checkbox"
                                    id="providerSelectAllCheckbox"
                                    onchange="toggleAllProvidersSelection(this.checked)"
                                >
                            </th>
                            <th>名称</th>
                            <th>API 地址</th>
                            <th>模型</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            providers.forEach(provider => {
                const isEnabled = provider?.enabled !== false;
                const encodedProviderName = encodeURIComponent(provider.name);
                const isSelected = selectedProviderNames.has(provider.name);
                const models = Array.isArray(provider.model_list) ? provider.model_list : [];
                const preview = getModelPreview(models);
                const isDeletePending = pendingDeleteProviderName === provider.name;
                const isTogglePending = togglingProviderNames.has(provider.name);
                const modelTags = preview.visible.length
                    ? preview.visible.map(model => `<span class="model-tag">${escapeHtml(model)}</span>`).join('')
                    : '<span class="muted-text">未配置</span>';
                const modelSummary = preview.total
                    ? `
                            <div class="model-summary-bar">
                                <span class="model-count">共 ${preview.total} 个</span>
                                ${preview.hiddenCount ? `<span class="model-more">+${preview.hiddenCount}</span>` : ''}
                                <button class="btn-inline" type="button" onclick="openModelDetail(decodeProviderName('${encodedProviderName}'))">查看全部</button>
                            </div>
                      `
                    : '';
                const providerTargetFormats = getProviderTargetFormats(provider);
                const targetFormatChips = providerTargetFormats
                    .map(format => `<span class="provider-chip provider-chip-target">${escapeHtml(format)}</span>`)
                    .join('');

                html += `
                    <tr>
                        <td class="provider-select-cell">
                            <input
                                type="checkbox"
                                class="provider-table-checkbox"
                                data-provider-row-checkbox="${encodedProviderName}"
                                onchange="toggleProviderSelection(decodeProviderName('${encodedProviderName}'), this.checked)"
                                ${isSelected ? 'checked' : ''}
                                ${providerBatchActionInFlight ? 'disabled' : ''}
                            >
                        </td>
                        <td class="provider-name-cell">
                            <span class="provider-name-text">${escapeHtml(provider.name)}</span>
                        </td>
                        <td class="provider-api-cell" title="${escapeHtml(provider.api)}">
                            <span class="provider-api-text">${escapeHtml(provider.api)}</span>
                            <div class="provider-meta-line">
                                <span class="provider-chip ${isEnabled ? 'provider-chip-hook' : 'provider-chip-muted'}">${isEnabled ? 'enabled' : 'disabled'}</span>
                                <span class="provider-chip">${escapeHtml(provider.transport || 'http')}</span>
                                <span class="provider-chip">${escapeHtml(provider.source_format || 'openai_chat')}</span>
                                ${targetFormatChips}
                                ${provider.auth_group ? `<span class="provider-chip provider-chip-hook">auth_group:${escapeHtml(provider.auth_group)}</span>` : ''}
                                ${provider.api_key ? '<span class="provider-chip provider-chip-muted">legacy api_key</span>' : ''}
                                ${provider.hook ? `<span class="provider-chip provider-chip-hook">${escapeHtml(provider.hook)}</span>` : ''}
                            </div>
                        </td>
                        <td class="provider-model-cell">
                            <div class="model-tags model-tags-preview">${modelTags}</div>
                            ${modelSummary}
                        </td>
                        <td class="provider-actions-cell">
                            <div class="action-buttons">
                                <button class="btn-action btn-edit" onclick="openEditModal(decodeProviderName('${encodedProviderName}'))">编辑</button>
                                <button
                                    class="btn-action ${isEnabled ? 'btn-delete' : 'btn-edit'}"
                                    onclick="setProviderEnabled(decodeProviderName('${encodedProviderName}'), ${isEnabled ? 'false' : 'true'})"
                                    ${isTogglePending || providerBatchActionInFlight ? 'disabled' : ''}
                                >${isTogglePending ? '处理中...' : (isEnabled ? '禁用' : '启用')}</button>
                                <div class="inline-confirm-wrap">
                                    <button
                                        type="button"
                                        class="btn-action btn-delete ${isDeletePending ? 'is-active' : ''}"
                                        data-provider-delete-trigger="${encodedProviderName}"
                                        onclick="toggleDeleteProviderConfirm(decodeProviderName('${encodedProviderName}'), event)"
                                        ${providerBatchActionInFlight ? 'disabled' : ''}
                                    >删除</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                `;
            });

            html += '</tbody></table>';
            container.innerHTML = html;
            updateProviderSelectionUi();
            syncDeleteProviderPopover();
        }

        function buildAuthEntryLimitSummary(card) {
            if (!card) return '未配置限制';

            const maxConcurrency = card.querySelector('.auth-entry-max-concurrency')?.value?.trim() || '';
            const cooldown = card.querySelector('.auth-entry-cooldown')?.value?.trim() || '';
            const reqMinute = card.querySelector('.auth-entry-req-minute')?.value?.trim() || '';
            const reqDay = card.querySelector('.auth-entry-req-day')?.value?.trim() || '';
            const tokenMinute = card.querySelector('.auth-entry-token-minute')?.value?.trim() || '';
            const tokenDay = card.querySelector('.auth-entry-token-day')?.value?.trim() || '';
            const parts = [];

            if (maxConcurrency) parts.push(`并发 ${maxConcurrency}`);
            if (cooldown) parts.push(`429 ${cooldown}s`);
            if (reqMinute || reqDay) {
                parts.push(`请求 ${reqMinute || '-'} /m ${reqDay || '-'} /d`);
            }
            if (tokenMinute || tokenDay) {
                parts.push(`Token ${tokenMinute || '-'} /m ${tokenDay || '-'} /d`);
            }

            return parts.length ? parts.join(' · ') : '未配置限制';
        }

        function syncAuthEntryCardSummary(card) {
            if (!card) return;

            const entryId = card.querySelector('.auth-entry-id')?.value?.trim() || '';
            const enabled = card.querySelector('.auth-entry-enabled')?.value !== 'false';
            const headerCount = Array.from(card.querySelectorAll('.auth-header-row')).filter(row => {
                const key = row.querySelector('.auth-header-key')?.value?.trim() || '';
                return key !== '';
            }).length;
            const expanded = card.dataset.expanded === 'true';

            const idElement = card.querySelector('.auth-entry-summary-id');
            const enabledElement = card.querySelector('.auth-entry-summary-enabled');
            const headerElement = card.querySelector('.auth-entry-summary-headers');
            const limitsElement = card.querySelector('.auth-entry-summary-limits');
            const toggleButton = card.querySelector('.auth-entry-toggle-btn');

            if (idElement) idElement.textContent = entryId || '未命名';
            if (enabledElement) enabledElement.textContent = enabled ? 'true' : 'false';
            if (headerElement) headerElement.textContent = String(headerCount);
            if (limitsElement) limitsElement.textContent = buildAuthEntryLimitSummary(card);
            if (toggleButton) {
                toggleButton.textContent = expanded ? '-' : '+';
                toggleButton.setAttribute('aria-expanded', expanded ? 'true' : 'false');
                toggleButton.setAttribute('aria-label', expanded ? '收起 Entry' : '展开 Entry');
                toggleButton.setAttribute('title', expanded ? '收起' : '展开');
            }
        }

        function collapseAuthEntryCard(card) {
            if (!card) return;
            card.dataset.expanded = 'false';
            const detail = card.querySelector('.auth-entry-detail');
            if (detail) {
                detail.hidden = true;
            }
            syncAuthEntryCardSummary(card);
        }

        function expandAuthEntryCard(card) {
            if (!card) return;
            document.querySelectorAll('#authEntriesContainer .auth-entry-card[data-expanded="true"]').forEach(item => {
                if (item !== card) {
                    collapseAuthEntryCard(item);
                }
            });
            card.dataset.expanded = 'true';
            const detail = card.querySelector('.auth-entry-detail');
            if (detail) {
                detail.hidden = false;
            }
            syncAuthEntryCardSummary(card);
        }

        function toggleAuthEntryCard(source) {
            const card = source?.closest('.auth-entry-card');
            if (!card) return;
            if (card.dataset.expanded === 'true') {
                collapseAuthEntryCard(card);
                return;
            }
            expandAuthEntryCard(card);
        }

        function handleAuthEntrySummaryKeydown(event, element) {
            if (event.key !== 'Enter' && event.key !== ' ') return;
            event.preventDefault();
            toggleAuthEntryCard(element);
        }

        function createAuthEntryCardElement(entry = null) {
            const wrapper = document.createElement('div');
            const entryKey = `entry-${++authEntryCardSequence}`;
            wrapper.className = 'auth-entry-card';
            wrapper.dataset.entryKey = entryKey;
            wrapper.dataset.expanded = 'false';
            wrapper.innerHTML = `
                <div
                    class="auth-entry-summary"
                    role="button"
                    tabindex="0"
                    onclick="toggleAuthEntryCard(this)"
                    onkeydown="handleAuthEntrySummaryKeydown(event, this)"
                >
                    <div class="auth-entry-summary-toggle">
                        <button type="button" class="btn-action btn-edit auth-entry-toggle-btn" onclick="event.stopPropagation(); toggleAuthEntryCard(this)">+</button>
                    </div>
                    <div class="auth-entry-summary-cell auth-entry-summary-id">未命名</div>
                    <div class="auth-entry-summary-cell auth-entry-summary-enabled">true</div>
                    <div class="auth-entry-summary-cell auth-entry-summary-headers">0</div>
                    <div class="auth-entry-summary-cell auth-entry-summary-limits">未配置限制</div>
                    <div class="auth-entry-summary-actions">
                        <div class="inline-confirm-wrap">
                            <button
                                type="button"
                                class="btn-action btn-delete"
                                data-auth-entry-delete-trigger="${entryKey}"
                                onclick="toggleDeleteAuthEntryConfirm('${entryKey}', event)"
                            >删除</button>
                        </div>
                    </div>
                </div>
                <div class="auth-entry-detail" hidden>
                    <div class="provider-form-grid">
                        <div class="mb-3">
                            <label class="form-label">Entry ID *</label>
                            <input type="text" class="form-control auth-entry-id" value="${escapeHtml(entry?.id || '')}" placeholder="例如 key-1、project-cn-1">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Enabled</label>
                            <select class="form-control auth-entry-enabled">
                                <option value="true" ${(entry?.enabled ?? true) !== false ? 'selected' : ''}>true</option>
                                <option value="false" ${(entry?.enabled ?? true) === false ? 'selected' : ''}>false</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Max Concurrency</label>
                            <input type="number" class="form-control auth-entry-max-concurrency" min="1" value="${escapeHtml(entry?.max_concurrency ?? '')}" placeholder="留空表示不限制，例如 3">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">429 冷却秒数</label>
                            <input type="number" class="form-control auth-entry-cooldown" min="1" value="${escapeHtml(entry?.cooldown_seconds_on_429 ?? '')}" placeholder="留空则继承 Group 默认值，例如 120">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">请求数/分钟</label>
                            <input type="number" class="form-control auth-entry-req-minute" min="1" value="${escapeHtml(entry?.request_quota_per_minute ?? '')}" placeholder="留空表示不限制，例如 60">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">请求数/天</label>
                            <input type="number" class="form-control auth-entry-req-day" min="1" value="${escapeHtml(entry?.request_quota_per_day ?? '')}" placeholder="留空表示不限制，例如 3000">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Token/分钟</label>
                            <input type="number" class="form-control auth-entry-token-minute" min="1" value="${escapeHtml(entry?.token_quota_per_minute ?? '')}" placeholder="留空表示不限制，例如 120000">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Token/天</label>
                            <input type="number" class="form-control auth-entry-token-day" min="1" value="${escapeHtml(entry?.token_quota_per_day ?? '')}" placeholder="留空表示不限制，例如 5000000">
                        </div>
                    </div>
                    <div class="entry-header-editor">
                        <div class="field-header">
                            <div class="field-header-meta">
                                <label class="form-label">Headers</label>
                            </div>
                            <div class="field-header-actions">
                                <button type="button" class="btn btn-secondary btn-field-secondary" onclick="addAuthHeaderRow(this)">新增 Header</button>
                            </div>
                        </div>
                        <div class="auth-header-list"></div>
                    </div>
                </div>
            `;

            const headerList = wrapper.querySelector('.auth-header-list');
            const headers = entry?.headers && typeof entry.headers === 'object' ? entry.headers : {};
            const headerEntries = Object.entries(headers);
            if (!headerEntries.length) {
                addAuthHeaderRow(wrapper.querySelector('.btn-field-secondary'));
            } else {
                headerEntries.forEach(([key, value]) => {
                    addAuthHeaderRow(wrapper.querySelector('.btn-field-secondary'), { key, value });
                });
            }

            syncAuthEntryCardSummary(wrapper);
            return wrapper;
        }

        function addAuthEntryCard(entry = null, options = {}) {
            const { expand = true } = options || {};
            const container = document.getElementById('authEntriesContainer');
            if (!container) return;
            const card = createAuthEntryCardElement(entry);
            container.appendChild(card);
            if (expand) {
                expandAuthEntryCard(card);
            }
        }

        function removeAuthEntryCard(source) {
            const card = typeof source === 'string'
                ? getAuthEntryCardByKey(source)
                : source?.closest('.auth-entry-card');
            closeDeleteAuthEntryConfirm(false);
            card?.remove();
        }

        function addAuthHeaderRow(trigger, header = null) {
            const card = trigger?.closest('.auth-entry-card');
            const headerList = card?.querySelector('.auth-header-list');
            if (!headerList) return;

            const row = document.createElement('div');
            row.className = 'auth-header-row';
            row.innerHTML = `
                <input type="text" class="form-control auth-header-key" placeholder="例如 Authorization" value="${escapeHtml(header?.key || '')}">
                <input type="text" class="form-control auth-header-value" placeholder="例如 Bearer sk-xxx" value="${escapeHtml(header?.value || '')}">
                <button type="button" class="btn-action btn-delete" onclick="removeAuthHeaderRow(this)">删除</button>
            `;
            headerList.appendChild(row);
            syncAuthEntryCardSummary(card);
        }

        function removeAuthHeaderRow(button) {
            const row = button?.closest('.auth-header-row');
            const headerList = row?.parentElement;
            row?.remove();
            if (headerList && headerList.children.length === 0) {
                const trigger = headerList.closest('.auth-entry-card')?.querySelector('.btn-field-secondary');
                if (trigger) {
                    addAuthHeaderRow(trigger);
                }
            }
            const card = headerList?.closest('.auth-entry-card');
            syncAuthEntryCardSummary(card);
        }

        function fillAuthGroupForm(authGroup) {
            document.getElementById('authGroupName').value = authGroup?.name || '';
            setSelectValueOrFallback('authGroupStrategy', authGroup?.strategy, 'least_inflight');
            document.getElementById('authGroupCooldownSeconds').value = authGroup?.cooldown_seconds_on_429 || '';
            setAuthEntryYamlValue('');
            const entries = Array.isArray(authGroup?.entries) ? authGroup.entries : [];
            replaceAuthEntryCards(entries);
            if (!entries.length) {
                addAuthEntryCard();
            }
        }

        function collectAuthGroupFormData() {
            const entries = Array.from(document.querySelectorAll('#authEntriesContainer .auth-entry-card')).map(card => {
                const headers = {};
                card.querySelectorAll('.auth-header-row').forEach(row => {
                    const key = row.querySelector('.auth-header-key')?.value?.trim() || '';
                    const value = row.querySelector('.auth-header-value')?.value?.trim() || '';
                    if (key) {
                        headers[key] = value;
                    }
                });
                return {
                    id: card.querySelector('.auth-entry-id')?.value?.trim() || '',
                    enabled: card.querySelector('.auth-entry-enabled')?.value !== 'false',
                    headers: headers,
                    max_concurrency: card.querySelector('.auth-entry-max-concurrency')?.value?.trim() || '',
                    cooldown_seconds_on_429: card.querySelector('.auth-entry-cooldown')?.value?.trim() || '',
                    request_quota_per_minute: card.querySelector('.auth-entry-req-minute')?.value?.trim() || '',
                    request_quota_per_day: card.querySelector('.auth-entry-req-day')?.value?.trim() || '',
                    token_quota_per_minute: card.querySelector('.auth-entry-token-minute')?.value?.trim() || '',
                    token_quota_per_day: card.querySelector('.auth-entry-token-day')?.value?.trim() || '',
                };
            });

            return {
                name: document.getElementById('authGroupName').value.trim(),
                strategy: document.getElementById('authGroupStrategy').value,
                cooldown_seconds_on_429: document.getElementById('authGroupCooldownSeconds').value.trim(),
                entries: entries,
            };
        }

        function getAuthEntryYamlTemplate(entryId = 'key-1') {
            const textarea = getAuthEntryYamlTextarea();
            const templateText = String(textarea?.defaultValue || '').trimEnd();
            if (!entryId) {
                return templateText;
            }
            return templateText.replace('id: key-1', `id: ${entryId}`);
        }

        function getAuthEntryYamlTextarea() {
            return document.getElementById('authEntryImportYaml');
        }

        function getAuthEntryYamlEditorContainer() {
            return document.getElementById('authEntryImportYamlEditor');
        }

        function getAuthEntryYamlEditorShell() {
            return document.getElementById('authEntryImportEditorShell');
        }

        function isAuthEntryYamlEditorReady() {
            return !!authEntryYamlEditor;
        }

        function setAuthEntryYamlEditorReadyState(isReady) {
            const shell = getAuthEntryYamlEditorShell();
            if (shell) {
                shell.classList.toggle('is-editor-ready', isReady);
            }
        }

        function syncAuthEntryYamlTextareaValue(value) {
            const textarea = getAuthEntryYamlTextarea();
            if (textarea instanceof HTMLTextAreaElement) {
                textarea.value = String(value ?? '');
            }
        }

        function getAuthEntryYamlEditorTheme() {
            return document.documentElement.getAttribute('data-theme') === 'light'
                ? 'ace/theme/textmate'
                : 'ace/theme/tomorrow_night';
        }

        function syncAuthEntryYamlEditorTheme() {
            if (!isAuthEntryYamlEditorReady()) {
                return;
            }
            authEntryYamlEditor.setTheme(getAuthEntryYamlEditorTheme());
            window.requestAnimationFrame(() => authEntryYamlEditor.resize(true));
        }

        function observeAuthEntryYamlEditorTheme() {
            if (authEntryYamlThemeObserver || typeof MutationObserver === 'undefined') {
                return;
            }
            authEntryYamlThemeObserver = new MutationObserver(mutations => {
                if (mutations.some(mutation => mutation.attributeName === 'data-theme')) {
                    syncAuthEntryYamlEditorTheme();
                }
            });
            authEntryYamlThemeObserver.observe(document.documentElement, {
                attributes: true,
                attributeFilter: ['data-theme'],
            });
        }

        function initializeAuthEntryYamlEditor() {
            const textarea = getAuthEntryYamlTextarea();
            const editorContainer = getAuthEntryYamlEditorContainer();
            if (!(textarea instanceof HTMLTextAreaElement) || !(editorContainer instanceof HTMLDivElement)) {
                return;
            }
            if (typeof window.ace === 'undefined') {
                setAuthEntryYamlEditorReadyState(false);
                return;
            }
            if (isAuthEntryYamlEditorReady()) {
                syncAuthEntryYamlEditorTheme();
                return;
            }

            ace.config.set('basePath', '/static/vendor/ace');
            authEntryYamlEditor = ace.edit(editorContainer);
            authEntryYamlEditor.$blockScrolling = Infinity;
            authEntryYamlEditor.session.setMode('ace/mode/yaml');
            authEntryYamlEditor.session.setUseSoftTabs(true);
            authEntryYamlEditor.session.setTabSize(2);
            authEntryYamlEditor.session.setUseWorker(false);
            authEntryYamlEditor.session.setUseWrapMode(false);
            authEntryYamlEditor.renderer.setShowGutter(true);
            authEntryYamlEditor.renderer.setShowInvisibles('tab space');
            authEntryYamlEditor.setFontSize(13);
            authEntryYamlEditor.setOptions({
                showPrintMargin: false,
                highlightActiveLine: true,
                displayIndentGuides: true,
                wrap: false,
            });
            authEntryYamlEditor.commands.addCommand({
                name: 'toggleAuthEntryYamlComment',
                bindKey: { win: 'Ctrl-/', mac: 'Command-/' },
                exec(editor) {
                    editor.execCommand('togglecomment');
                },
                readOnly: true,
            });
            authEntryYamlEditor.session.on('change', function() {
                syncAuthEntryYamlTextareaValue(authEntryYamlEditor.session.getValue());
            });

            setAuthEntryYamlValue(textarea.value || textarea.defaultValue || '');
            setAuthEntryYamlEditorReadyState(true);
            syncAuthEntryYamlEditorTheme();
            observeAuthEntryYamlEditorTheme();
        }

        function getAuthEntryYamlValue() {
            if (isAuthEntryYamlEditorReady()) {
                return authEntryYamlEditor.session.getValue();
            }
            return getAuthEntryYamlTextarea()?.value || '';
        }

        function setAuthEntryYamlValue(value) {
            const nextValue = String(value ?? '');
            if (isAuthEntryYamlEditorReady() && authEntryYamlEditor.session.getValue() !== nextValue) {
                authEntryYamlEditor.session.setValue(nextValue);
                authEntryYamlEditor.clearSelection();
            }
            syncAuthEntryYamlTextareaValue(nextValue);
        }

        function replaceAuthEntryYamlRange(startOffset, endOffset, replacementText) {
            const start = Math.max(0, Number(startOffset) || 0);
            const end = Math.max(start, Number(endOffset) || start);
            const nextText = String(replacementText ?? '');

            if (isAuthEntryYamlEditorReady() && typeof window.ace !== 'undefined') {
                const documentRef = authEntryYamlEditor.session.doc;
                const startPosition = documentRef.indexToPosition(start, 0);
                const endPosition = documentRef.indexToPosition(end, 0);
                const AceRange = ace.require('ace/range').Range;
                authEntryYamlEditor.session.replace(AceRange.fromPoints(startPosition, endPosition), nextText);
                authEntryYamlEditor.focus();
                return {
                    start,
                    end: start + nextText.length,
                };
            }

            const textarea = getAuthEntryYamlTextarea();
            if (!(textarea instanceof HTMLTextAreaElement)) {
                return {
                    start,
                    end: start + nextText.length,
                };
            }

            textarea.focus();
            if (typeof textarea.setRangeText === 'function') {
                textarea.setSelectionRange(start, end);
                textarea.setRangeText(nextText, start, end, 'end');
            } else {
                const currentValue = textarea.value;
                textarea.value = `${currentValue.slice(0, start)}${nextText}${currentValue.slice(end)}`;
                const nextCursor = start + nextText.length;
                textarea.setSelectionRange(nextCursor, nextCursor);
            }
            syncAuthEntryYamlTextareaValue(textarea.value);
            return {
                start,
                end: start + nextText.length,
            };
        }

        function focusAuthEntryYamlEditor() {
            if (isAuthEntryYamlEditorReady()) {
                window.requestAnimationFrame(() => {
                    authEntryYamlEditor.resize(true);
                    authEntryYamlEditor.focus();
                });
                return true;
            }

            const textarea = getAuthEntryYamlTextarea();
            if (textarea instanceof HTMLTextAreaElement) {
                focusElementSafely(textarea);
                return true;
            }
            return false;
        }

        function moveAuthEntryYamlCursorToEnd() {
            if (isAuthEntryYamlEditorReady()) {
                window.requestAnimationFrame(() => {
                    const lastRow = Math.max(authEntryYamlEditor.session.getLength() - 1, 0);
                    const lastColumn = authEntryYamlEditor.session.getLine(lastRow).length;
                    authEntryYamlEditor.gotoLine(lastRow + 1, lastColumn, false);
                    authEntryYamlEditor.focus();
                });
                return;
            }

            const textarea = getAuthEntryYamlTextarea();
            if (!(textarea instanceof HTMLTextAreaElement)) return;
            textarea.focus();
            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
        }

        function selectAuthEntryYamlRange(startOffset, endOffset = startOffset) {
            const start = Math.max(0, Number(startOffset) || 0);
            const end = Math.max(start, Number(endOffset) || start);

            if (isAuthEntryYamlEditorReady() && typeof window.ace !== 'undefined') {
                const documentRef = authEntryYamlEditor.session.doc;
                const startPosition = documentRef.indexToPosition(start, 0);
                const endPosition = documentRef.indexToPosition(end, 0);
                const AceRange = ace.require('ace/range').Range;
                authEntryYamlEditor.selection.setRange(AceRange.fromPoints(startPosition, endPosition), false);
                authEntryYamlEditor.renderer.scrollCursorIntoView();
                authEntryYamlEditor.focus();
                return;
            }

            const textarea = getAuthEntryYamlTextarea();
            if (!(textarea instanceof HTMLTextAreaElement)) return;
            textarea.focus();
            textarea.setSelectionRange(start, end);
        }

        function focusInsertedAuthEntryTemplateId(insertedId = 'key-1', searchStart = 0) {
            const yamlText = getAuthEntryYamlValue();
            const placeholder = String(insertedId || 'key-1');
            const marker = `id: ${placeholder}`;
            const markerOffset = yamlText.indexOf(marker, Math.max(0, Number(searchStart) || 0));
            const fallbackOffset = markerOffset >= 0 ? markerOffset : yamlText.lastIndexOf(marker);
            if (fallbackOffset < 0) {
                moveAuthEntryYamlCursorToEnd();
                return;
            }

            const selectionStart = fallbackOffset + 'id: '.length;
            selectAuthEntryYamlRange(selectionStart, selectionStart + placeholder.length);
        }

        function stripAuthEntryYamlInlineComment(text) {
            const value = String(text ?? '');
            let inSingleQuote = false;
            let inDoubleQuote = false;
            let isEscaped = false;

            for (let index = 0; index < value.length; index += 1) {
                const char = value[index];
                if (inDoubleQuote && isEscaped) {
                    isEscaped = false;
                    continue;
                }
                if (inDoubleQuote && char === '\\') {
                    isEscaped = true;
                    continue;
                }
                if (!inDoubleQuote && char === "'") {
                    inSingleQuote = !inSingleQuote;
                    continue;
                }
                if (!inSingleQuote && char === '"') {
                    inDoubleQuote = !inDoubleQuote;
                    continue;
                }
                if (!inSingleQuote && !inDoubleQuote && char === '#') {
                    return value.slice(0, index).trimEnd();
                }
                isEscaped = false;
            }

            return value.trimEnd();
        }

        function normalizeAuthEntryYamlId(rawId) {
            const value = stripAuthEntryYamlInlineComment(rawId).trim();
            if (!value) {
                return '';
            }
            if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
                return value.slice(1, -1);
            }
            return value;
        }

        function extractAuthEntryYamlIds(yamlText) {
            return String(yamlText ?? '')
                .split(/\r?\n/)
                .map(line => {
                    const match = line.match(/^\s*-\s+id:\s*(.+)$/);
                    return match ? normalizeAuthEntryYamlId(match[1]) : '';
                })
                .filter(Boolean);
        }

        function suggestNextAuthEntryTemplateId(yamlText) {
            const usedIds = new Set(extractAuthEntryYamlIds(yamlText));
            const numericIds = Array.from(usedIds)
                .map(id => {
                    const match = id.match(/^key-(\d+)$/);
                    return match ? Number(match[1]) : Number.NaN;
                })
                .filter(Number.isFinite);
            let nextNumber = numericIds.length ? Math.max(...numericIds) + 1 : 1;
            while (usedIds.has(`key-${nextNumber}`)) {
                nextNumber += 1;
            }
            return `key-${nextNumber}`;
        }

        function buildAuthEntryYamlWithInsertedTemplate(currentValue) {
            const existingValue = String(currentValue ?? '');
            const insertedId = suggestNextAuthEntryTemplateId(existingValue);
            const trimmedValue = existingValue.trim();
            if (!trimmedValue) {
                return {
                    replaceStart: 0,
                    replaceEnd: existingValue.length,
                    insertedText: `${getAuthEntryYamlTemplate(insertedId)}\n`,
                    insertedId,
                    templateOffset: 0,
                };
            }

            const entryTemplate = getSingleAuthEntryYamlTemplate(insertedId);
            const normalizedValue = existingValue.replace(/\s+$/, '');
            const separator = /(^|\n)entries:\s*$/.test(normalizedValue) ? '\n' : '\n\n';
            return {
                replaceStart: normalizedValue.length,
                replaceEnd: existingValue.length,
                insertedText: `${separator}${entryTemplate}`,
                insertedId,
                templateOffset: normalizedValue.length + separator.length,
            };
        }

        function getSingleAuthEntryYamlTemplate(entryId = 'key-1') {
            return getAuthEntryYamlTemplate(entryId)
                .split(/\r?\n/)
                .slice(1)
                .join('\n');
        }

        function needsYamlQuoting(text) {
            return (
                text === '' ||
                /^\s|\s$/.test(text) ||
                /^[\-?:]/.test(text) ||
                /[:#[\]{}&,*!|>'"%@`]/.test(text) ||
                /^(true|false|null|yes|no|on|off)$/i.test(text)
            );
        }

        function formatYamlString(value, options = {}) {
            const { forceQuote = false } = options;
            const text = String(value ?? '');
            if (!forceQuote && !needsYamlQuoting(text)) {
                return text;
            }
            return `"${text.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
        }

        function buildAuthEntriesYamlText(entries) {
            const lines = ['entries:'];
            entries.forEach(entry => {
                lines.push(`  - id: ${formatYamlString(entry.id || '', { forceQuote: !entry.id })}`);
                lines.push(`    enabled: ${entry.enabled === false ? 'false' : 'true'}`);

                const headers = entry.headers && typeof entry.headers === 'object' ? Object.entries(entry.headers) : [];
                if (headers.length) {
                    lines.push('    headers:');
                    headers.forEach(([key, value]) => {
                        lines.push(`      ${formatYamlString(key)}: ${formatYamlString(value, { forceQuote: true })}`);
                    });
                } else {
                    lines.push('    headers: {}');
                }

                const optionalFields = [
                    ['max_concurrency', entry.max_concurrency],
                    ['cooldown_seconds_on_429', entry.cooldown_seconds_on_429],
                    ['request_quota_per_minute', entry.request_quota_per_minute],
                    ['request_quota_per_day', entry.request_quota_per_day],
                    ['token_quota_per_minute', entry.token_quota_per_minute],
                    ['token_quota_per_day', entry.token_quota_per_day],
                ];

                optionalFields.forEach(([fieldName, fieldValue]) => {
                    const text = String(fieldValue ?? '').trim();
                    if (text !== '') {
                        lines.push(`    ${fieldName}: ${text}`);
                    }
                });
            });
            return lines.join('\n');
        }

        function getCurrentAuthEntriesForYamlEditor() {
            const cards = Array.from(document.querySelectorAll('#authEntriesContainer .auth-entry-card'));
            const entries = cards
                .filter(card => !isAuthEntryCardBlank(card))
                .map(card => {
                    const headers = {};
                    card.querySelectorAll('.auth-header-row').forEach(row => {
                        const key = row.querySelector('.auth-header-key')?.value?.trim() || '';
                        if (!key) return;
                        const value = row.querySelector('.auth-header-value')?.value ?? '';
                        headers[key] = value.trim();
                    });

                    return {
                        id: card.querySelector('.auth-entry-id')?.value?.trim() || '',
                        enabled: card.querySelector('.auth-entry-enabled')?.value !== 'false',
                        headers,
                        max_concurrency: card.querySelector('.auth-entry-max-concurrency')?.value?.trim() || '',
                        cooldown_seconds_on_429: card.querySelector('.auth-entry-cooldown')?.value?.trim() || '',
                        request_quota_per_minute: card.querySelector('.auth-entry-req-minute')?.value?.trim() || '',
                        request_quota_per_day: card.querySelector('.auth-entry-req-day')?.value?.trim() || '',
                        token_quota_per_minute: card.querySelector('.auth-entry-token-minute')?.value?.trim() || '',
                        token_quota_per_day: card.querySelector('.auth-entry-token-day')?.value?.trim() || '',
                    };
                });

            return entries;
        }

        function replaceAuthEntryCards(entries, options = {}) {
            const { expandFirst = false } = options || {};
            const container = document.getElementById('authEntriesContainer');
            if (!container) {
                throw new Error('Auth Entries 容器不存在');
            }

            closeDeleteAuthEntryConfirm(false);
            container.innerHTML = '';
            authEntryCardSequence = 0;
            entries.forEach((entry, index) => addAuthEntryCard(entry, { expand: expandFirst && index === 0 }));
        }

        function insertTextAtTextareaCursor(textarea, insertText) {
            if (!(textarea instanceof HTMLTextAreaElement)) return;

            const start = textarea.selectionStart ?? textarea.value.length;
            const end = textarea.selectionEnd ?? textarea.value.length;
            const currentValue = textarea.value;
            textarea.value = `${currentValue.slice(0, start)}${insertText}${currentValue.slice(end)}`;
            const nextCursor = start + insertText.length;
            textarea.focus();
            textarea.setSelectionRange(nextCursor, nextCursor);
        }

        function insertTextAtAuthEntryYamlCursor(insertText) {
            const text = String(insertText ?? '');
            if (!text) return;

            if (isAuthEntryYamlEditorReady()) {
                authEntryYamlEditor.insert(text);
                syncAuthEntryYamlTextareaValue(authEntryYamlEditor.session.getValue());
                authEntryYamlEditor.focus();
                return;
            }

            insertTextAtTextareaCursor(getAuthEntryYamlTextarea(), text);
        }

        function insertAuthEntryYamlTemplate() {
            const currentValue = getAuthEntryYamlValue();
            const payload = buildAuthEntryYamlWithInsertedTemplate(currentValue);
            replaceAuthEntryYamlRange(payload.replaceStart, payload.replaceEnd, payload.insertedText);
            focusInsertedAuthEntryTemplateId(payload.insertedId, payload.templateOffset);
        }

        function isAuthEntryCardBlank(card) {
            if (!card) {
                return false;
            }
            const scalarSelectors = [
                '.auth-entry-id',
                '.auth-entry-max-concurrency',
                '.auth-entry-cooldown',
                '.auth-entry-req-minute',
                '.auth-entry-req-day',
                '.auth-entry-token-minute',
                '.auth-entry-token-day',
            ];
            const hasScalarValue = scalarSelectors.some(selector => {
                const value = card.querySelector(selector)?.value?.trim() || '';
                return value !== '';
            });
            if (hasScalarValue) {
                return false;
            }

            const headerRows = Array.from(card.querySelectorAll('.auth-header-row'));
            const hasHeaderValue = headerRows.some(row => {
                const key = row.querySelector('.auth-header-key')?.value?.trim() || '';
                const value = row.querySelector('.auth-header-value')?.value?.trim() || '';
                return key !== '' || value !== '';
            });
            return !hasHeaderValue;
        }

        function openAuthEntryImportModal() {
            initializeAuthEntryYamlEditor();
            const entries = getCurrentAuthEntriesForYamlEditor();
            setAuthEntryYamlValue(entries.length ? buildAuthEntriesYamlText(entries) : getAuthEntryYamlTemplate());
            resizeAuthEntryYamlEditor(true);
            authEntryImportModalInstance?.show();
        }

        function blurActiveElement() {
            if (document.activeElement instanceof HTMLElement) {
                document.activeElement.blur();
            }
        }

        function focusElementSafely(element) {
            if (!(element instanceof HTMLElement)) return;
            window.requestAnimationFrame(() => {
                try {
                    element.focus({ preventScroll: true });
                } catch (error) {
                    element.focus();
                }
            });
        }

        function resizeAuthEntryYamlEditor(force = false) {
            const textarea = getAuthEntryYamlTextarea();
            const editorContainer = getAuthEntryYamlEditorContainer();
            const modal = document.getElementById('authEntryImportModal');
            if (!(textarea instanceof HTMLTextAreaElement) && !(editorContainer instanceof HTMLDivElement)) {
                return;
            }
            if (!force && !modal?.classList.contains('show')) {
                return;
            }

            const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 900;
            const targetHeight = Math.max(380, Math.min(Math.floor(viewportHeight * 0.54), 560));
            if (textarea instanceof HTMLTextAreaElement) {
                textarea.style.height = `${targetHeight}px`;
            }
            if (editorContainer instanceof HTMLDivElement) {
                editorContainer.style.height = `${targetHeight}px`;
            }
            if (isAuthEntryYamlEditorReady()) {
                window.requestAnimationFrame(() => authEntryYamlEditor.resize(true));
            }
        }

        function deactivateModalFocusTrap(modalInstance) {
            modalInstance?._focustrap?.deactivate?.();
        }

        function activateModalFocusTrap(modalInstance) {
            modalInstance?._focustrap?.activate?.();
        }

        async function saveAuthEntriesFromYaml() {
            const yamlText = getAuthEntryYamlValue();
            if (!yamlText.trim()) {
                showMessage('请输入要保存的 YAML 内容', 'error');
                return;
            }

            try {
                const response = await fetch('/api/auth-groups/import-entries', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ yaml: yamlText }),
                });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '保存 Auth Entries YAML 失败');
                }

                const normalizedEntries = Array.isArray(result.entries) ? result.entries : [];
                replaceAuthEntryCards(normalizedEntries);

                authEntryImportModalInstance?.hide();
                showMessage(`已更新 ${normalizedEntries.length} 个 Auth Entry`, 'success');
            } catch (error) {
                console.error('保存 auth entries yaml 失败:', error);
                showActionError('保存 Auth Entries YAML', error, { fallback: '保存 Auth Entries YAML 失败' });
            }
        }

        async function saveAuthGroup() {
            const payload = collectAuthGroupFormData();
            if (!payload.name) {
                showMessage('请输入 Auth Group 名称', 'error');
                return;
            }
            if (!Array.isArray(payload.entries) || payload.entries.length === 0) {
                showMessage('请至少配置一个 Auth Entry', 'error');
                return;
            }

            const isEdit = !!editingAuthGroupName;
            const url = isEdit ? `/api/auth-groups/${encodeURIComponent(editingAuthGroupName)}` : '/api/auth-groups';
            const method = isEdit ? 'PUT' : 'POST';

            try {
                const response = await fetch(url, {
                    method: method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '保存 Auth Group 失败');
                }
                authGroupModalInstance?.hide();
                showMessage('Auth Group 保存成功，配置已重载', 'success');
                await loadPageData();
            } catch (error) {
                console.error('保存 auth group 失败:', error);
                showActionError('保存 Auth Group', error, { fallback: '保存 Auth Group 失败' });
            }
        }

        async function deleteAuthGroup(name) {
            if (!window.confirm(`确认删除 Auth Group “${name}”？`)) {
                return;
            }
            try {
                const response = await fetch(`/api/auth-groups/${encodeURIComponent(name)}`, { method: 'DELETE' });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '删除 Auth Group 失败');
                }
                showMessage('Auth Group 删除成功，配置已重载', 'success');
                await loadPageData();
            } catch (error) {
                console.error('删除 auth group 失败:', error);
                showActionError('删除 Auth Group', error, { fallback: '删除 Auth Group 失败' });
            }
        }

        function renderAuthGroupRuntime(runtime) {
            const summaryElement = document.getElementById('authGroupRuntimeSummary');
            const container = document.getElementById('authGroupRuntimeContainer');
            const summary = runtime?.summary || {};
            activeAuthGroupRuntime = runtime || null;
            summaryElement.innerHTML = `
                <span class="toolbar-pill">Entries <strong>${escapeHtml(summary.entry_count ?? 0)}</strong></span>
                <span class="toolbar-pill">Available <strong>${escapeHtml(summary.available_count ?? 0)}</strong></span>
                <span class="toolbar-pill">Cooldown <strong>${escapeHtml(summary.cooldown_count ?? 0)}</strong></span>
                <span class="toolbar-pill">Disabled <strong>${escapeHtml(summary.disabled_count ?? 0)}</strong></span>
            `;

            const entries = Array.isArray(runtime?.entries) ? runtime.entries : [];
            if (!entries.length) {
                container.innerHTML = '<div class="empty-state">当前没有运行态数据</div>';
                return;
            }

            let html = `
                <table class="providers-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>状态</th>
                            <th>并发 / 冷却</th>
                            <th>请求数</th>
                            <th>Token</th>
                            <th>最后错误</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            entries.forEach(entry => {
                const lastError = entry.last_error_message || entry.last_error_type || entry.last_status_code || '-';
                const hasErrorDetail = !!(
                    entry.last_error_message
                    || entry.last_error_type
                    || entry.last_status_code
                    || entry.disabled_reason
                    || entry.cooldown_until
                );
                const canToggleRuntimeDisabled = entry.enabled !== false;
                html += `
                    <tr>
                        <td class="provider-name-cell"><span class="provider-name-text">${escapeHtml(entry.id)}</span></td>
                        <td>${escapeHtml(entry.status || '-')}</td>
                        <td>
                            <div>inflight: ${escapeHtml(entry.inflight ?? 0)}</div>
                            <div>cooldown: ${escapeHtml(entry.cooldown_until || '-')}</div>
                        </td>
                        <td>
                            <div>minute: ${escapeHtml(entry.minute_request_count ?? 0)}</div>
                            <div>day: ${escapeHtml(entry.day_request_count ?? 0)}</div>
                        </td>
                        <td>
                            <div>minute: ${escapeHtml(entry.minute_total_tokens ?? 0)}</div>
                            <div>day: ${escapeHtml(entry.day_total_tokens ?? 0)}</div>
                        </td>
                        <td title="${escapeHtml(lastError)}" class="runtime-last-error-cell">${escapeHtml(lastError)}</td>
                        <td class="runtime-actions-cell">
                            <div class="action-buttons runtime-action-buttons">
                                ${canToggleRuntimeDisabled ? (
                                    entry.disabled
                                        ? `<button class="btn-action btn-edit" onclick="enableAuthGroupEntry('${encodeURIComponent(runtime.name)}', '${encodeURIComponent(entry.id)}')">启用</button>`
                                        : `<button class="btn-action btn-delete" onclick="disableAuthGroupEntry('${encodeURIComponent(runtime.name)}', '${encodeURIComponent(entry.id)}')">禁用</button>`
                                ) : ''}
                                <button class="btn-action btn-edit" onclick="resetAuthGroupEntryRuntime('${encodeURIComponent(runtime.name)}', '${encodeURIComponent(entry.id)}')">重置</button>
                                ${hasErrorDetail ? `<button class="btn-action btn-edit" onclick="openAuthEntryErrorModal('${encodeURIComponent(runtime.name)}', '${encodeURIComponent(entry.id)}')">详情</button>` : ''}
                            </div>
                        </td>
                    </tr>
                `;
            });

            html += '</tbody></table>';
            container.innerHTML = html;
        }

        async function openAuthGroupRuntimeModal(name) {
            try {
                switchProviderTab('auth_groups');
                activeRuntimeAuthGroupName = name;
                activeAuthGroupRuntime = null;
                document.getElementById('authGroupRuntimeTitle').textContent = `${name} 运行态`;
                document.getElementById('authGroupRuntimeContainer').innerHTML = '<div class="loading">正在加载运行态...</div>';
                const response = await fetch(`/api/auth-groups/${encodeURIComponent(name)}/runtime`);
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '加载运行态失败');
                }
                renderAuthGroupRuntime(result);
                authGroupRuntimeModalInstance.show();
            } catch (error) {
                console.error('加载 auth group 运行态失败:', error);
                showActionError('加载 Auth Group 运行态', error, { fallback: '加载 Auth Group 运行态失败' });
            }
        }

        function findRuntimeEntry(groupName, entryId) {
            if (!activeAuthGroupRuntime || activeAuthGroupRuntime.name !== groupName) {
                return null;
            }
            const entries = Array.isArray(activeAuthGroupRuntime.entries) ? activeAuthGroupRuntime.entries : [];
            return entries.find(item => item.id === entryId) || null;
        }

        function renderRuntimeDetailRows(rows) {
            return rows.map(row => `
                <div class="runtime-error-detail-item">
                    <div class="runtime-error-detail-label">${escapeHtml(row.label)}</div>
                    <div class="runtime-error-detail-value">${escapeHtml(row.value ?? '-')}</div>
                </div>
            `).join('');
        }

        function openAuthEntryErrorModal(groupNameEncoded, entryIdEncoded) {
            const groupName = decodeProviderName(groupNameEncoded);
            const entryId = decodeProviderName(entryIdEncoded);
            const entry = findRuntimeEntry(groupName, entryId);
            if (!entry) {
                showMessage('未找到该 Auth Entry 的运行态详情', 'error');
                return;
            }

            document.getElementById('authEntryErrorTitle').textContent = `${entryId} 最近错误详情`;
            document.getElementById('authEntryErrorSubtitle').textContent = `${groupName} / ${entry.status || '-'}`;
            document.getElementById('authEntryErrorContent').innerHTML = renderRuntimeDetailRows([
                { label: '状态', value: entry.status || '-' },
                { label: 'HTTP 状态码', value: entry.last_status_code ?? '-' },
                { label: '错误类型', value: entry.last_error_type || '-' },
                { label: '错误消息', value: entry.last_error_message || '-' },
                { label: '禁用原因', value: entry.disabled_reason || '-' },
                { label: '冷却截止', value: entry.cooldown_until || '-' },
                { label: '最后更新时间', value: entry.updated_at || '-' },
            ]);
            authEntryErrorModalInstance?.show();
        }

        async function runAuthGroupEntryRuntimeAction(groupName, entryId, path, successMessage, actionLabel) {
            try {
                const response = await fetch(
                    `/api/auth-groups/${encodeURIComponent(groupName)}/entries/${encodeURIComponent(entryId)}/${path}`,
                    { method: 'POST' }
                );
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || `${actionLabel} Auth Entry 失败`);
                }
                showMessage(successMessage, 'success');
                await loadPageData();
                await openAuthGroupRuntimeModal(groupName);
            } catch (error) {
                console.error(`${actionLabel} auth entry 失败:`, error);
                showActionError(`${actionLabel} Auth Entry`, error, { fallback: `${actionLabel} Auth Entry 失败` });
            }
        }

        async function disableAuthGroupEntry(groupNameEncoded, entryIdEncoded) {
            const groupName = decodeProviderName(groupNameEncoded);
            const entryId = decodeProviderName(entryIdEncoded);
            await runAuthGroupEntryRuntimeAction(groupName, entryId, 'disable', 'Auth Entry 已禁用', '禁用');
        }

        async function enableAuthGroupEntry(groupNameEncoded, entryIdEncoded) {
            const groupName = decodeProviderName(groupNameEncoded);
            const entryId = decodeProviderName(entryIdEncoded);
            await runAuthGroupEntryRuntimeAction(groupName, entryId, 'enable', 'Auth Entry 已启用', '启用');
        }

        async function resetAuthGroupEntryRuntime(groupNameEncoded, entryIdEncoded) {
            const groupName = decodeProviderName(groupNameEncoded);
            const entryId = decodeProviderName(entryIdEncoded);
            await runAuthGroupEntryRuntimeAction(groupName, entryId, 'reset', 'Auth Entry 运行态已重置', '重置');
        }

        async function saveProvider() {
            const payload = collectFormData();
            const authMode = document.getElementById('providerAuthMode')?.value || 'legacy_api_key';
            if (!payload.name) {
                showMessage('请输入 provider 名称', 'error');
                return;
            }
            if (!payload.api) {
                showMessage('请输入 API 地址', 'error');
                return;
            }
            if (authMode === 'auth_group' && !payload.auth_group) {
                showMessage('请选择 Auth Group', 'error');
                return;
            }
            if (payload.auth_group && payload.api_key) {
                showMessage('Auth Group 与 Legacy API Key 只能二选一', 'error');
                return;
            }

            const isEdit = !!editingProviderName;
            const url = isEdit ? `/api/providers/${encodeURIComponent(editingProviderName)}` : '/api/providers';
            const method = isEdit ? 'PUT' : 'POST';

            try {
                const response = await fetch(url, {
                    method: method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '保存 provider 失败');
                }
                editingProviderName = result.name;
                providerModalInstance?.hide();
                showMessage('Provider 保存成功，配置已重载', 'success');
                await loadPageData();
            } catch (error) {
                console.error('保存 provider 失败:', error);
                showActionError('保存 Provider', error, { fallback: '保存 Provider 失败' });
            }
        }

        async function setProviderEnabled(name, enabled) {
            const normalizedName = String(name || '').trim();
            if (!normalizedName || providerBatchActionInFlight || togglingProviderNames.has(normalizedName)) {
                return;
            }

            closeDeleteProviderConfirm(false);
            togglingProviderNames.add(normalizedName);
            renderProviders();

            try {
                const response = await fetch(
                    `/api/providers/${encodeURIComponent(normalizedName)}/${enabled ? 'enable' : 'disable'}`,
                    { method: 'POST' }
                );
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || `${enabled ? '启用' : '禁用'} provider 失败`);
                }
                showMessage(`Provider 已${enabled ? '启用' : '禁用'}，配置已重载`, 'success');
                await loadProviders();
            } catch (error) {
                console.error(`${enabled ? '启用' : '禁用'} provider 失败:`, error);
                showActionError(`${enabled ? '启用' : '禁用'} Provider`, error, {
                    fallback: `${enabled ? '启用' : '禁用'} Provider 失败`,
                });
            } finally {
                togglingProviderNames.delete(normalizedName);
                renderProviders();
            }
        }

        async function runProviderBatchAction(action) {
            const selectedNames = getNormalizedSelectedProviderNames();
            if (!selectedNames.length || providerBatchActionInFlight) {
                if (!selectedNames.length) {
                    showMessage('请先选择至少一个 Provider', 'error');
                }
                return;
            }

            const meta = getProviderBatchActionMeta(action);
            if (!meta) {
                showMessage(`不支持的批量操作: ${action}`, 'error');
                return;
            }

            await executeProviderBatchAction(action, selectedNames, meta);
        }

        function toggleDeleteProviderConfirm(name, event) {
            event?.stopPropagation();
            if (deletingProviderName !== null || providerBatchActionInFlight) return;

            pendingDeleteProviderName = pendingDeleteProviderName === name ? null : name;
            closeDeleteAuthEntryConfirm(false);
            if (pendingDeleteProviderName !== name) {
                deletingProviderName = null;
            }
            renderProviders();
        }

        function cancelDeleteProviderConfirm(event) {
            event?.stopPropagation();
            closeDeleteProviderConfirm(true);
        }

        function closeDeleteProviderConfirm(shouldRender = true) {
            if (pendingDeleteProviderName === null && deletingProviderName === null) return;
            if (deletingProviderName !== null) {
                return;
            }
            pendingDeleteProviderName = null;
            hideProviderDeletePopover();
            if (shouldRender) {
                renderProviders();
            } else {
                document.querySelectorAll('[data-provider-delete-trigger].is-active').forEach(element => {
                    element.classList.remove('is-active');
                });
            }
        }

        async function confirmDeleteProvider(event) {
            event?.stopPropagation();
            const name = pendingDeleteProviderName;
            if (pendingDeleteProviderName !== name || deletingProviderName === name) return;

            deletingProviderName = name;
            syncDeleteProviderPopover();
            renderProviders();

            try {
                const response = await fetch(`/api/providers/${encodeURIComponent(name)}`, {
                    method: 'DELETE'
                });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '删除 provider 失败');
                }
                selectedProviderNames.delete(name);
                pendingDeleteProviderName = null;
                deletingProviderName = null;
                hideProviderDeletePopover();
                showMessage('Provider 删除成功，配置已重载', 'success');
                await loadPageData();
            } catch (error) {
                console.error('删除 provider 失败:', error);
                deletingProviderName = null;
                syncDeleteProviderPopover();
                renderProviders();
                showActionError('删除 Provider', error, { fallback: '删除 Provider 失败' });
            }
        }

        async function fetchModels() {
            const payload = collectFormData();
            if (!payload.api) {
                showMessage('请先填写 API 地址', 'error');
                return;
            }

            const params = new URLSearchParams({ api: payload.api });
            if (payload.api_key) params.set('api_key', payload.api_key);
            if (payload.proxy) params.set('proxy', payload.proxy);
            if (payload.timeout_seconds) params.set('timeout_seconds', payload.timeout_seconds);
            if (payload.verify_ssl) params.set('verify_ssl', payload.verify_ssl);

            const button = document.getElementById('fetchModelsBtn');
            const originalText = button.textContent;
            button.dataset.loading = 'true';
            button.disabled = true;
            button.textContent = '拉取中...';

            try {
                const response = await fetch(`/api/providers/fetch-models?${params.toString()}`);
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '拉取模型失败');
                }
                const fetchedCount = openFetchModelPicker(result.fetched_models);
                showMessage(`已获取到 ${fetchedCount} 个模型`, 'success');
            } catch (error) {
                console.error('拉取模型失败:', error);
                showActionError('拉取模型', error, { fallback: '拉取模型失败' });
            } finally {
                button.dataset.loading = 'false';
                button.textContent = originalText;
                updateFetchModelsButtonState();
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            initThemeToggle();
            setupCustomSelect('providerAuthMode');
            setupCustomSelect('providerAuthGroup');
            setupCustomSelect('providerTransport');
            setupCustomSelect('providerSourceFormat');
            setupCustomSelect('providerTargetFormat');
            setupCustomSelect('providerVerifySsl');
            setupCustomSelect('authGroupStrategy');
            const modalElement = document.getElementById('providerModal');
            providerModalInstance = new bootstrap.Modal(modalElement);
            modalElement.addEventListener('hidden.bs.modal', function() {
                closeAllCustomSelects();
                hideProviderHelpPopover();
                if (fetchModelPickerModalInstance) {
                    fetchModelPickerModalInstance.hide();
                }
                resetFetchModelPickerState();
                editingProviderName = null;
                fillForm(null);
            });
            const authGroupModalElement = document.getElementById('authGroupModal');
            authGroupModalInstance = new bootstrap.Modal(authGroupModalElement);
            authGroupModalElement.addEventListener('hidden.bs.modal', function() {
                editingAuthGroupName = null;
                closeDeleteAuthEntryConfirm(false);
                fillAuthGroupForm(null);
                authEntryImportModalInstance?.hide();
            });
            const authEntryImportModalElement = document.getElementById('authEntryImportModal');
            authEntryImportModalInstance = new bootstrap.Modal(authEntryImportModalElement);
            authEntryImportModalElement.addEventListener('shown.bs.modal', function() {
                if (authGroupModalElement.classList.contains('show')) {
                    deactivateModalFocusTrap(authGroupModalInstance);
                    document.body.classList.add('modal-open');
                }
                initializeAuthEntryYamlEditor();
                resizeAuthEntryYamlEditor();
                blurActiveElement();
                if (!focusAuthEntryYamlEditor()) {
                    focusElementSafely(authEntryImportModalElement);
                }
            });
            authEntryImportModalElement.addEventListener('hidden.bs.modal', function() {
                const textarea = getAuthEntryYamlTextarea();
                const editorContainer = getAuthEntryYamlEditorContainer();
                const defaultYaml = textarea?.defaultValue || '';
                setAuthEntryYamlValue(defaultYaml);
                if (textarea) {
                    textarea.style.removeProperty('height');
                }
                if (editorContainer) {
                    editorContainer.style.removeProperty('height');
                }
                if (authGroupModalElement.classList.contains('show')) {
                    activateModalFocusTrap(authGroupModalInstance);
                    document.body.classList.add('modal-open');
                    focusElementSafely(authGroupModalElement);
                }
            });
            const authGroupRuntimeModalElement = document.getElementById('authGroupRuntimeModal');
            authGroupRuntimeModalInstance = new bootstrap.Modal(authGroupRuntimeModalElement);
            authGroupRuntimeModalElement.addEventListener('hidden.bs.modal', function() {
                activeRuntimeAuthGroupName = null;
                activeAuthGroupRuntime = null;
                authEntryErrorModalInstance?.hide();
                document.getElementById('authGroupRuntimeSummary').innerHTML = '';
                document.getElementById('authGroupRuntimeContainer').innerHTML = '';
            });
            const authEntryErrorModalElement = document.getElementById('authEntryErrorModal');
            authEntryErrorModalInstance = new bootstrap.Modal(authEntryErrorModalElement);
            authEntryErrorModalElement.addEventListener('shown.bs.modal', function() {
                if (authGroupRuntimeModalElement.classList.contains('show')) {
                    deactivateModalFocusTrap(authGroupRuntimeModalInstance);
                    document.body.classList.add('modal-open');
                }
                blurActiveElement();
                focusElementSafely(authEntryErrorModalElement.querySelector('.btn-close') || authEntryErrorModalElement);
            });
            authEntryErrorModalElement.addEventListener('hidden.bs.modal', function() {
                document.getElementById('authEntryErrorContent').innerHTML = '';
                if (authGroupRuntimeModalElement.classList.contains('show')) {
                    activateModalFocusTrap(authGroupRuntimeModalInstance);
                    document.body.classList.add('modal-open');
                    focusElementSafely(authGroupRuntimeModalElement);
                }
            });
            const fetchModelPickerModalElement = document.getElementById('fetchModelPickerModal');
            fetchModelPickerModalInstance = new bootstrap.Modal(fetchModelPickerModalElement);
            fetchModelPickerModalElement.addEventListener('shown.bs.modal', function() {
                if (modalElement.classList.contains('show')) {
                    deactivateModalFocusTrap(providerModalInstance);
                    document.body.classList.add('modal-open');
                }
                blurActiveElement();
                focusElementSafely(document.getElementById('fetchModelSearchInput') || fetchModelPickerModalElement);
            });
            fetchModelPickerModalElement.addEventListener('hidden.bs.modal', function() {
                resetFetchModelPickerState();
                if (modalElement.classList.contains('show')) {
                    activateModalFocusTrap(providerModalInstance);
                    document.body.classList.add('modal-open');
                    focusElementSafely(modalElement);
                }
            });
            const modelDetailModalElement = document.getElementById('modelDetailModal');
            modelDetailModalInstance = new bootstrap.Modal(modelDetailModalElement);
            modelDetailModalElement.addEventListener('hidden.bs.modal', function() {
                activeModelProvider = null;
                document.getElementById('modelSearchInput').value = '';
                document.getElementById('modelDetailList').innerHTML = '';
            });
            document.getElementById('providerName').addEventListener('input', updateFetchModelsButtonState);
            document.getElementById('providerApi').addEventListener('input', handleProviderApiInput);
            document.getElementById('providerAuthMode').addEventListener('change', updateFetchModelsButtonState);
            document.getElementById('providerTransport').addEventListener('change', handleProviderTransportChange);
            document.getElementById('providerModelList').addEventListener('input', updateModelListCount);
            document.getElementById('fetchModelSearchInput').addEventListener('input', renderFetchModelPicker);
            document.getElementById('modelSearchInput').addEventListener('input', renderModelDetailList);
            window.addEventListener('resize', resizeAuthEntryYamlEditor);
            initializeAuthEntryYamlEditor();
            document.getElementById('authEntriesContainer').addEventListener('input', function(event) {
                const card = event.target instanceof HTMLElement ? event.target.closest('.auth-entry-card') : null;
                syncAuthEntryCardSummary(card);
            });
            document.getElementById('authEntriesContainer').addEventListener('change', function(event) {
                const card = event.target instanceof HTMLElement ? event.target.closest('.auth-entry-card') : null;
                syncAuthEntryCardSummary(card);
            });
            fillAuthGroupForm(null);
            syncProviderTabUi();
            updateModelListCount();
            updateProviderAuthModeFields();
            updateFetchModelsButtonState();
            updateProviderSelectionUi();
            loadPageData();
        });
    </script>
{% endblock %}