npm - @bolloon/bolloon-agent - Versions diffs - 0.4.14 → 0.4.15 - Mend

@bolloon/bolloon-agent 0.4.14 → 0.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (213) hide show

package/README.md +127 -127
package/bin/bolloon-cli.cjs +183 -183
package/bin/bolloon-daemon.sh +207 -0
package/bin/bolloon.cjs +0 -0
package/dist/agents/constraint-layer.js +19 -19
package/dist/agents/judgment-protocol.js +14 -14
package/dist/agents/pi-sdk-types.js +12 -12
package/dist/agents/pi-sdk.js +101 -101
package/dist/agents/skill-organizer.js +19 -19
package/dist/agents/workflow-pivot-loop.js +2 -2
package/dist/agents/x402/x402Pay.js +4 -0
package/dist/bollharness/src/scripts/deploy-guard.js +8 -8
package/dist/bollharness-integration/context-router-judgment.js +4 -4
package/dist/bollharness-integration/context-router.js +292 -292
package/dist/bollharness-integration/gate-state-machine.js +13 -13
package/dist/bollharness-integration/llm-judgment-engine.js +134 -134
package/dist/bollharness-integration/skill-adapter.js +21 -21
package/dist/bootstrap/chat-archiver.js +14 -14
package/dist/bootstrap/context-os.js +24 -24
package/dist/bootstrap/memory-compressor.js +13 -13
package/dist/cli-entry.js +36 -36
package/dist/constraint-runtime/reference_data/archive_surface_snapshot.json +63 -0
package/dist/constraint-runtime/reference_data/commands_snapshot.json +1037 -0
package/dist/constraint-runtime/reference_data/subsystems/assistant.json +8 -0
package/dist/constraint-runtime/reference_data/subsystems/bootstrap.json +8 -0
package/dist/constraint-runtime/reference_data/subsystems/bridge.json +32 -0
package/dist/constraint-runtime/reference_data/subsystems/buddy.json +13 -0
package/dist/constraint-runtime/reference_data/subsystems/cli.json +26 -0
package/dist/constraint-runtime/reference_data/subsystems/components.json +32 -0
package/dist/constraint-runtime/reference_data/subsystems/constants.json +28 -0
package/dist/constraint-runtime/reference_data/subsystems/coordinator.json +8 -0
package/dist/constraint-runtime/reference_data/subsystems/entrypoints.json +15 -0
package/dist/constraint-runtime/reference_data/subsystems/hooks.json +32 -0
package/dist/constraint-runtime/reference_data/subsystems/keybindings.json +21 -0
package/dist/constraint-runtime/reference_data/subsystems/memdir.json +15 -0
package/dist/constraint-runtime/reference_data/subsystems/migrations.json +18 -0
package/dist/constraint-runtime/reference_data/subsystems/moreright.json +8 -0
package/dist/constraint-runtime/reference_data/subsystems/native_ts.json +11 -0
package/dist/constraint-runtime/reference_data/subsystems/outputStyles.json +8 -0
package/dist/constraint-runtime/reference_data/subsystems/plugins.json +9 -0
package/dist/constraint-runtime/reference_data/subsystems/remote.json +11 -0
package/dist/constraint-runtime/reference_data/subsystems/schemas.json +8 -0
package/dist/constraint-runtime/reference_data/subsystems/screens.json +10 -0
package/dist/constraint-runtime/reference_data/subsystems/server.json +10 -0
package/dist/constraint-runtime/reference_data/subsystems/services.json +32 -0
package/dist/constraint-runtime/reference_data/subsystems/skills.json +27 -0
package/dist/constraint-runtime/reference_data/subsystems/state.json +13 -0
package/dist/constraint-runtime/reference_data/subsystems/types.json +18 -0
package/dist/constraint-runtime/reference_data/subsystems/upstreamproxy.json +9 -0
package/dist/constraint-runtime/reference_data/subsystems/utils.json +32 -0
package/dist/constraint-runtime/reference_data/subsystems/vim.json +12 -0
package/dist/constraint-runtime/reference_data/subsystems/voice.json +8 -0
package/dist/constraint-runtime/reference_data/tools_snapshot.json +922 -0
package/dist/context-compaction/auto-compact.js +7 -7
package/dist/electron/config.js.map +1 -0
package/dist/electron/dialogs.js.map +1 -0
package/dist/electron/first-run.js +54 -54
package/dist/electron/first-run.js.map +1 -0
package/dist/electron/ipc.js.map +1 -0
package/dist/electron/logger.js.map +1 -0
package/dist/electron/main.js.map +1 -0
package/dist/electron/menu.js.map +1 -0
package/dist/electron/paths.js.map +1 -0
package/dist/electron/server.js.map +1 -0
package/dist/electron/tray.js.map +1 -0
package/dist/electron/window.js.map +1 -0
package/dist/electron-build/electron/first-run.js +54 -54
package/dist/electron-preload.js.map +1 -1
package/dist/electron.js.map +1 -1
package/dist/index.js +112 -112
package/dist/llm/llm-judgment-client.js +102 -102
package/dist/llm/pi-ai.js +48 -48
package/dist/llm/system-prompt/layers/channel/human-async.md +41 -41
package/dist/llm/system-prompt/layers/channel/local.md +14 -14
package/dist/llm/system-prompt/layers/channel/p2p-agent.md +18 -18
package/dist/llm/system-prompt/layers/channel/p2p-peer-sync.md +51 -51
package/dist/llm/system-prompt/layers/channel/p2p-proactive.md +43 -43
package/dist/llm/system-prompt/layers/channel/p2p-visitor.md +19 -19
package/dist/llm/system-prompt/layers/channel/session-handoff.md +61 -61
package/dist/llm/system-prompt/layers/core/artifacts_storage.md +89 -89
package/dist/llm/system-prompt/layers/core/evenhandedness.md +21 -21
package/dist/llm/system-prompt/layers/core/external-engagement.md +73 -73
package/dist/llm/system-prompt/layers/core/hibs_reminders.md +15 -15
package/dist/llm/system-prompt/layers/core/identity.md +48 -48
package/dist/llm/system-prompt/layers/core/knowledge.md +17 -17
package/dist/llm/system-prompt/layers/core/memory_system.md +12 -12
package/dist/llm/system-prompt/layers/core/network_filesystem.md +28 -28
package/dist/llm/system-prompt/layers/core/refusal.md +37 -37
package/dist/llm/system-prompt/layers/core/tone.md +31 -31
package/dist/llm/system-prompt/layers/core/tools.thin.md +13 -13
package/dist/llm/system-prompt/layers/core/wellbeing.md +41 -41
package/dist/llm/system-prompt/layers/role/architect.md +20 -20
package/dist/llm/system-prompt/layers/role/expert.md +19 -19
package/dist/llm/system-prompt/layers/role/implementer.md +15 -15
package/dist/llm/system-prompt/layers/role/security.md +15 -15
package/dist/llm/system-prompt/layers/tool/artifacts.md +72 -72
package/dist/llm/system-prompt/layers/tool/bash.md +25 -25
package/dist/llm/system-prompt/layers/tool/goal_handoff.md +77 -77
package/dist/llm/system-prompt/layers/tool/hibs_api.md +171 -171
package/dist/llm/system-prompt/layers/tool/image_search.md +70 -70
package/dist/llm/system-prompt/layers/tool/manifest.md +89 -89
package/dist/llm/system-prompt/layers/tool/mcp_apps.md +53 -53
package/dist/llm/system-prompt/layers/tool/p2p_request.md +61 -61
package/dist/llm/system-prompt/layers/tool/web_search.md +83 -83
package/dist/llm/tool-manifest/ask_user_input.js +1 -1
package/dist/llm/tool-manifest/bash.js +3 -3
package/dist/llm/tool-manifest/create_file.js +4 -4
package/dist/llm/tool-manifest/fetch_sports_data.js +3 -3
package/dist/llm/tool-manifest/image_search.js +2 -2
package/dist/llm/tool-manifest/index.js +59 -0
package/dist/llm/tool-manifest/mcp.js +2 -2
package/dist/llm/tool-manifest/message_compose.js +3 -3
package/dist/llm/tool-manifest/places.js +2 -2
package/dist/llm/tool-manifest/present_files.js +1 -1
package/dist/llm/tool-manifest/recipe.js +2 -2
package/dist/llm/tool-manifest/str_replace.js +5 -5
package/dist/llm/tool-manifest/view.js +3 -3
package/dist/llm/tool-manifest/weather.js +4 -4
package/dist/llm/tool-manifest/web.js +4 -4
package/dist/network/p2p.js +78 -4
package/dist/pi-ecosystem-judgment/causal-judge.js +51 -51
package/dist/pi-ecosystem-judgment/distill-prompt.js +42 -42
package/dist/pi-ecosystem-judgment/distillation.js +14 -14
package/dist/pi-ecosystem-judgment/index.js +1 -1
package/dist/pi-ecosystem-judgment/monitor-gate.js +28 -28
package/dist/pi-ecosystem-judgment/value-injection.js +102 -102
package/dist/security/context-router-tool.js +15 -15
package/dist/utils/auto-update.js.map +1 -0
package/dist/web/a2ui-client.js +1594 -223
package/dist/web/api-config.html +779 -779
package/dist/web/client-hearth.js +10 -10
package/dist/web/client.js.map +7 -0
package/dist/web/components/wallet-viem.mjs +118 -118
package/dist/web/index.html +502 -502
package/dist/web/manifest.json +20 -20
package/dist/web/mobile-agent.js +397 -0
package/dist/web/mobile-core.js +86235 -0
package/dist/web/mobile-data.js +346 -0
package/dist/web/mobile-http-api.js +71 -0
package/dist/web/mobile-p2p.js +250 -0
package/dist/web/mobile-payments.js +80 -0
package/dist/web/mobile-wallet.js +226 -0
package/dist/web/mobile.css +483 -6
package/dist/web/mobile.html +99 -50
package/dist/web/mobile.js +1040 -187
package/dist/web/server.js +13 -13
package/dist/web/style.css +4946 -4946
package/package.json +201 -198
package/scripts/build-cli.js +215 -215
package/scripts/build-web.ts +162 -149
package/scripts/postinstall.js +152 -152
package/bin/bolloon.js +0 -157
package/dist/agents/python-exec.js +0 -115
package/dist/pi-ecosystem-colony/index.js +0 -365
package/dist/social/ant-colony/AdaptiveHeartbeat.js +0 -101
package/dist/social/ant-colony/PheromoneEngine.js +0 -227
package/dist/social/ant-colony/index.js +0 -6
package/dist/social/ant-colony/types.js +0 -24
package/dist/storage/trajectory.js +0 -101
package/dist/test/ai-judgment-test.js +0 -80
package/dist/test/bollharness-integration.test.js +0 -318
package/dist/test/channel-agent-multi-dialogue.js +0 -205
package/dist/test/channel-heartbeat-agent-test.js +0 -201
package/dist/test/constraint-layer.test.js +0 -164
package/dist/test/diap-identity-test.js +0 -172
package/dist/test/diap-quick-test.js +0 -62
package/dist/test/global-shared-context.test.js +0 -315
package/dist/test/harness-judgment-injection.test.js +0 -246
package/dist/test/harness-workflow-integrator-test.js +0 -228
package/dist/test/human-value-store.test.js +0 -243
package/dist/test/hybrid-integration-test.js +0 -118
package/dist/test/hybrid-messenger-verify.js +0 -55
package/dist/test/iroh-bistream-debug.js +0 -38
package/dist/test/iroh-communication.test.js +0 -66
package/dist/test/iroh-debug-test.js +0 -57
package/dist/test/iroh-diap-test.js +0 -71
package/dist/test/iroh-direct-connect.js +0 -55
package/dist/test/iroh-e2e-fixed.js +0 -89
package/dist/test/iroh-e2e-same-process.js +0 -63
package/dist/test/iroh-e2e.js +0 -66
package/dist/test/iroh-final-e2e.js +0 -72
package/dist/test/iroh-relay-test.js +0 -37
package/dist/test/iroh-simple-test.js +0 -41
package/dist/test/iroh-transport-verify.js +0 -54
package/dist/test/iroh-transport.test.js +0 -37
package/dist/test/iroh-two-nodes.js +0 -70
package/dist/test/iroh-verify.js +0 -44
package/dist/test/judgment-decision.test.js +0 -219
package/dist/test/llm-judgment-integration.test.js +0 -220
package/dist/test/p2p-agent-complex-dialogue.js +0 -385
package/dist/test/p2p-agent-dialogue.js +0 -341
package/dist/test/p2p-agent-full-bidirectional.js +0 -510
package/dist/test/p2p-agent-harness-flow.js +0 -437
package/dist/test/p2p-agent-harness-single.js +0 -143
package/dist/test/p2p-ai-dialogue-test.js +0 -318
package/dist/test/p2p-cid-connect-test.js +0 -195
package/dist/test/p2p-connect-receiver.js +0 -69
package/dist/test/p2p-doc-transfer.js +0 -110
package/dist/test/p2p-identity-page-test.js +0 -77
package/dist/test/p2p-iroh-test.js +0 -171
package/dist/test/p2p-minimal-test.js +0 -241
package/dist/test/p2p-node-1.js +0 -148
package/dist/test/p2p-node-2.js +0 -148
package/dist/test/p2p-server.js +0 -281
package/dist/test/p2p-two-nodes-test.js +0 -438
package/dist/test/pi-sdk.test.js +0 -44
package/dist/test/set-persona.js +0 -40
package/dist/test/simple.test.js +0 -9
package/dist/test/storage-integration.test.js +0 -150
package/dist/test/subagent-manager.test.js +0 -276
package/dist/test/test-gate-flow.test.js +0 -81
package/dist/test/workflow-engine.test.js +0 -87
package/dist/test/workflow-pivot-loop.test.js +0 -246

package/dist/web/api-config.html CHANGED Viewed

@@ -1,779 +1,779 @@
-<!DOCTYPE html>
-<html lang="zh-CN" data-theme="dark">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>API 配置 - Bolloon</title>
-  <!-- 2026-06-11: 移除 Google Fonts 外部 CSS — 在大陆/跨公网时经常 30s+ timeout 阻塞首屏
-       style.css 里只用字体名字符串 (JetBrains Mono / monospace), 浏览器看字面量自动落回系统字体
-       2026-06-11 提速: 不再等 Google CDN 即可渲染 -->
-  <link rel="stylesheet" href="/style.css">
-</head>
-<body>
-  <div class="api-config-page">
-    <!-- 页面标题 -->
-    <div class="page-header">
-      <div class="page-title-group">
-        <h1>API 配置</h1>
-        <span class="config-count-badge" id="configCount">加载中...</span>
-      </div>
-      <a href="/" class="back-link">← 返回主页</a>
-    </div>
-    <!-- 标签切换 -->
-    <div class="api-tabs">
-      <button class="api-tab active" data-tab="llm" onclick="switchTab('llm')">
-        <span class="api-tab-icon">💬</span>
-        <span>LLM 对话</span>
-      </button>
-      <button class="api-tab" data-tab="video" onclick="switchTab('video')">
-        <span class="api-tab-icon">🎬</span>
-        <span>视频生成</span>
-      </button>
-      <button class="api-tab" data-tab="audio" onclick="switchTab('audio')">
-        <span class="api-tab-icon">🎵</span>
-        <span>音频生成</span>
-      </button>
-      <button class="api-tab" data-tab="engines" onclick="switchTab('engines')">
-        <span class="api-tab-icon">🤖</span>
-        <span>外部智能体</span>
-      </button>
-    </div>
-    <!-- LLM 面板 -->
-    <div class="api-panel" id="panel-llm" data-panel="llm">
-      <div class="provider-list" id="providerList">
-        <div class="loading-state">加载中...</div>
-      </div>
-    </div>
-    <!-- 视频生成面板 -->
-    <div class="api-panel" id="panel-video" data-panel="video" style="display: none;">
-      <div class="video-intro">
-        <p>视频生成走异步任务流（提交任务 → 轮询结果），与 LLM 实时对话不同。Seedance 由字节火山方舟 (ARK) 提供，支持文生视频 (t2v) 与图生视频 (i2v)；MiniMax Video 为同 tab 下的另一选项。</p>
-      </div>
-      <div class="provider-list" id="videoProviderList">
-        <div class="loading-state">加载中...</div>
-      </div>
-    </div>
-    <!-- 音频生成面板 -->
-    <div class="api-panel" id="panel-audio" data-panel="audio" style="display: none;">
-      <div class="video-intro">
-        <p>音频生成：TTS（文生语音）/ Music（文生音乐）。MiniMax 提供 speech-01 与 music-01 模型，TTS 默认走 OpenAI 兼容 <code>/audio/speech</code> 端点，Music 走 MiniMax 自有 <code>/music_generation</code> 端点。</p>
-      </div>
-      <div class="provider-list" id="audioProviderList">
-        <div class="loading-state">加载中...</div>
-      </div>
-    </div>
-    <!-- 外部智能体面板 -->
-    <div class="api-panel" id="panel-engines" data-panel="engines" style="display: none;">
-      <div class="video-intro">
-        <p>Bolloon 自动发现本机已安装的 AI 编码工具（Codex / Claude Code / OpenCode / OpenClaw / Hermes）与实验目录声明的 API。可在此筛选模型并把它们的 API 当作 Bolloon 的供应商一键导入，无需重复填 Key。委派执行请通过对话里的 <code>delegate_to_engine</code> 工具。</p>
-      </div>
-      <div class="provider-list" id="engineList">
-        <div class="loading-state">加载中...</div>
-      </div>
-    </div>
-    <!-- 配置弹窗 -->
-    <div class="modal-overlay" id="configModal" style="display: none;">
-      <div class="modal-box">
-        <div class="modal-header">
-          <div class="modal-title-group">
-            <div class="modal-icon" id="modalIcon">A</div>
-            <div>
-              <h2 id="modalTitle">配置</h2>
-              <p class="modal-subtitle" id="modalSubtitle">描述</p>
-            </div>
-          </div>
-          <button class="modal-close" onclick="closeModal()">×</button>
-        </div>
-        <form class="modal-form" id="configForm">
-          <div class="form-group">
-            <label>API Key</label>
-            <input type="password" id="apiKeyInput" placeholder="输入 API Key">
-            <p class="form-hint" id="apiKeyHint">已有 Key 会保留，输入新值以更新</p>
-          </div>
-          <div class="form-group">
-            <label>Base URL</label>
-            <input type="text" id="baseUrlInput" placeholder="https://api.example.com/v1">
-            <p class="form-hint">留空使用默认地址</p>
-          </div>
-          <div class="form-group">
-            <label>模型</label>
-            <input type="text" id="modelInput" placeholder="如 gpt-4" list="modelSuggestList">
-            <datalist id="modelSuggestList"></datalist>
-            <p class="form-hint" id="modelHint"></p>
-          </div>
-          <!-- 视频模型专用字段 -->
-          <div class="video-only-fields" style="display: none;">
-            <div class="form-row">
-              <div class="form-group">
-                <label>分辨率</label>
-                <select id="resolutionInput">
-                  <option value="480p">480p</option>
-                  <option value="720p">720p</option>
-                  <option value="1080p">1080p</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label>宽高比</label>
-                <select id="ratioInput">
-                  <option value="16:9">16:9</option>
-                  <option value="9:16">9:16</option>
-                  <option value="1:1">1:1</option>
-                  <option value="4:3">4:3</option>
-                  <option value="3:4">3:4</option>
-                  <option value="21:9">21:9</option>
-                </select>
-              </div>
-            </div>
-            <div class="form-group">
-              <label>默认时长（秒）</label>
-              <input type="number" id="durationInput" min="3" max="12" step="1" value="5">
-              <p class="form-hint">Seedance 支持 3-12 秒</p>
-            </div>
-          </div>
-          <!-- 音频模型专用字段 -->
-          <div class="audio-only-fields" style="display: none;">
-            <div class="form-group">
-              <label>音色 / 风格</label>
-              <input type="text" id="voiceInput" placeholder="male-qn-jingying / female-shaonv ...">
-              <p class="form-hint" id="voiceHint"></p>
-            </div>
-            <div class="form-row">
-              <div class="form-group">
-                <label>语速</label>
-                <input type="number" id="speedInput" min="0.5" max="2.0" step="0.1" value="1.0">
-              </div>
-              <div class="form-group">
-                <label>输出格式</label>
-                <select id="formatInput">
-                  <option value="mp3">mp3</option>
-                  <option value="pcm">pcm</option>
-                  <option value="wav">wav</option>
-                </select>
-              </div>
-            </div>
-            <div class="form-group" id="audioModeGroup" style="display: none;">
-              <label>模式</label>
-              <select id="modeInput">
-                <option value="instrumental">纯音乐</option>
-                <option value="lyrics">带歌词</option>
-              </select>
-            </div>
-            <div class="form-group" id="audioDurationGroup" style="display: none;">
-              <label>默认时长（秒）</label>
-              <input type="number" id="audioDurationInput" min="5" max="120" step="1" value="30">
-              <p class="form-hint">music-01 支持 5-120 秒</p>
-            </div>
-          </div>
-          <!-- LLM 专用字段 -->
-          <div class="llm-only-fields">
-            <div class="form-group form-group-small">
-              <label>温度</label>
-              <input type="number" id="temperatureInput" value="0.7" min="0" max="2" step="0.1">
-            </div>
-          </div>
-          <div class="form-group">
-            <button type="button" class="test-btn" id="testBtn" onclick="testConnection()">
-              ⚡ 测试连接
-            </button>
-            <div class="test-result" id="testResult" style="display: none;"></div>
-          </div>
-          <div class="form-actions">
-            <button type="button" class="btn-cancel" onclick="closeModal()">取消</button>
-            <button type="submit" class="btn-save">保存</button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-  <!-- 外部智能体 配置弹窗 -->
-  <div class="modal-overlay" id="engineModal" style="display: none;">
-    <div class="modal-box">
-      <div class="modal-header">
-        <div class="modal-title-group">
-          <div class="modal-icon" id="engineModalIcon">A</div>
-          <div>
-            <h2 id="engineModalTitle">配置</h2>
-            <p class="modal-subtitle" id="engineModalSubtitle">描述</p>
-          </div>
-        </div>
-        <button class="modal-close" onclick="closeEngineModal()">×</button>
-      </div>
-      <form class="modal-form" id="engineConfigForm">
-        <div class="form-group">
-          <label>映射供应商</label>
-          <select id="engineProviderInput"></select>
-          <p class="form-hint">导入时写进该 Bolloon 供应商 (可覆盖发现的映射)</p>
-        </div>
-        <div class="form-group">
-          <label>API Key</label>
-          <input type="password" id="engineApiKeyInput" placeholder="输入 API Key">
-          <p class="form-hint" id="engineApiKeyHint">已有 Key 会保留，输入新值以更新</p>
-        </div>
-        <div class="form-group">
-          <label>Base URL</label>
-          <input type="text" id="engineBaseUrlInput" placeholder="https://api.example.com/v1">
-          <p class="form-hint">留空使用默认地址</p>
-        </div>
-        <div class="form-group">
-          <label>模型（可筛选）</label>
-          <div class="combobox" id="engineModelCombobox">
-            <input type="text" id="engineModelInput" placeholder="输入关键字筛选模型…" autocomplete="off">
-            <div class="combobox-list" id="engineModelList" style="display: none;"></div>
-          </div>
-          <p class="form-hint" id="engineModelHint">从发现到的候选模型里筛选，或手动输入自定义模型名</p>
-        </div>
-        <div class="form-group">
-          <button type="button" class="test-btn" id="engineImportBtn" onclick="importEngine()">
-            ⚡ 导入为供应商
-          </button>
-          <div class="test-result" id="engineImportResult" style="display: none;"></div>
-        </div>
-        <div class="form-actions">
-          <button type="button" class="btn-cancel" onclick="closeEngineModal()">取消</button>
-        </div>
-      </form>
-    </div>
-  </div>
-  <script>
-    // 当前 tab
-    let currentTab = 'llm';
-    // 缓存三份配置
-    let llmConfigData = null;
-    let videoConfigData = null;
-    let audioConfigData = null;
-    let engineData = null;
-    let currentProvider = null;
-    let currentEngine = null;
-    let currentProviderType = 'llm'; // 'llm' | 'video' | 'audio'
-    // ==================== Tab 切换 ====================
-    function switchTab(tab) {
-      currentTab = tab;
-      document.querySelectorAll('.api-tab').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.tab === tab);
-      });
-      document.querySelectorAll('.api-panel').forEach(panel => {
-        panel.style.display = panel.dataset.panel === tab ? 'block' : 'none';
-      });
-      // 切换 tab 时更新计数 badge
-      updateCountBadge();
-    }
-    function updateCountBadge() {
-      if (currentTab === 'engines') {
-        const list = engineData && engineData.engines ? engineData.engines : [];
-        const total = list.length;
-        const available = list.filter(e => e.available).length;
-        document.getElementById('configCount').textContent = available + '/' + total + ' 智能体可用';
-        return;
-      }
-      const data = currentTab === 'llm' ? llmConfigData :
-                   currentTab === 'video' ? videoConfigData : audioConfigData;
-      if (!data) {
-        document.getElementById('configCount').textContent = '加载中...';
-        return;
-      }
-      let configured = 0, total = 0;
-      for (const key in data.providers) {
-        total++;
-        const p = data.providers[key];
-        if (currentTab === 'llm') {
-          if (p.enabled && p.apiKey) configured++;
-        } else {
-          const info = data.providerInfo[key] || {};
-          if (p.enabled && (!info.requiresApiKey || p.apiKey)) configured++;
-        }
-      }
-      const labelMap = { llm: '', video: '视频', audio: '音频' };
-      const label = labelMap[currentTab] || '';
-      document.getElementById('configCount').textContent = configured + '/' + total + ' ' + label + '已配置';
-    }
-    // ==================== 加载 ====================
-    async function loadAll() {
-      await Promise.all([loadLLMConfig(), loadVideoConfig(), loadAudioConfig(), loadEngines()]);
-    }
-    async function loadEngines() {
-      try {
-        const resp = await fetch('/api/external-engines');
-        engineData = await resp.json();
-        renderEngines();
-        if (currentTab === 'engines') updateCountBadge();
-      } catch (err) {
-        const el = document.getElementById('engineList');
-        if (el) el.innerHTML = '<div class="error-state">加载失败: ' + err.message + '</div>';
-      }
-    }
-    async function loadLLMConfig() {
-      try {
-        const resp = await fetch('/api/llm-config');
-        llmConfigData = await resp.json();
-        renderProviders('llm');
-        if (currentTab === 'llm') updateCountBadge();
-      } catch (err) {
-        document.getElementById('providerList').innerHTML =
-          '<div class="error-state">加载失败: ' + err.message + '</div>';
-      }
-    }
-    async function loadVideoConfig() {
-      try {
-        const resp = await fetch('/api/video-config');
-        videoConfigData = await resp.json();
-        renderProviders('video');
-        if (currentTab === 'video') updateCountBadge();
-      } catch (err) {
-        document.getElementById('videoProviderList').innerHTML =
-          '<div class="error-state">加载失败: ' + err.message + '</div>';
-      }
-    }
-    async function loadAudioConfig() {
-      try {
-        const resp = await fetch('/api/audio-config');
-        audioConfigData = await resp.json();
-        renderProviders('audio');
-        if (currentTab === 'audio') updateCountBadge();
-      } catch (err) {
-        document.getElementById('audioProviderList').innerHTML =
-          '<div class="error-state">加载失败: ' + err.message + '</div>';
-      }
-    }
-    // ==================== 渲染 ====================
-    function renderProviders(type) {
-      const data = type === 'llm' ? llmConfigData :
-                   type === 'video' ? videoConfigData : audioConfigData;
-      const listEl = document.getElementById(
-        type === 'llm' ? 'providerList' :
-        type === 'video' ? 'videoProviderList' : 'audioProviderList'
-      );
-      if (!data) return;
-      const providers = data.providers;
-      const info = data.providerInfo;
-      const isActive = (key) => data.activeProvider === key;
-      let html = '';
-      for (const key in providers) {
-        const p = providers[key];
-        const i = info[key] || { name: key, description: '供应商', requiresApiKey: true };
-        const active = isActive(key);
-        let statusText, statusClass;
-        if (active) {
-          statusText = '使用中';
-          statusClass = 'status-accent';
-        } else if (p.enabled && p.apiKey) {
-          statusText = '已启用';
-          statusClass = 'status-green';
-        } else if (p.enabled) {
-          statusText = '已启用';
-          statusClass = 'status-yellow';
-        } else {
-          statusText = '未启用';
-          statusClass = 'status-muted';
-        }
-        const isConfigured = p.enabled && p.apiKey;
-        html += `
-          <div class="provider-card ${active ? 'active' : ''}" onclick="openModal('${type}', '${key}')">
-            <div class="provider-header">
-              <div class="provider-icon">${i.name.charAt(0).toUpperCase()}</div>
-              <div class="provider-info">
-                <h3 class="provider-name">${i.name}</h3>
-                <p class="provider-desc">${i.description}</p>
-                ${i.docs ? '<a class="provider-docs" href="' + i.docs + '" target="_blank" onclick="event.stopPropagation()">📖 文档</a>' : ''}
-              </div>
-              <div class="status-badge ${statusClass}">
-                <span class="status-dot"></span>
-                ${statusText}
-              </div>
-            </div>
-            <div class="provider-footer">
-              <div class="config-status">
-                <span class="status-icon ${isConfigured ? 'configured' : ''}">${isConfigured ? '✓' : '○'}</span>
-                ${isConfigured ? '已配置 API Key' : '未配置 API Key'}
-              </div>
-              ${p.model ? '<div class="model-info">模型: ' + p.model + '</div>' : ''}
-              <div class="arrow-indicator">›</div>
-            </div>
-          </div>
-        `;
-      }
-      listEl.innerHTML = html;
-    }
-    // ==================== 弹窗 ====================
-    function openModal(type, providerKey) {
-      currentProviderType = type;
-      currentProvider = providerKey;
-      const data = type === 'llm' ? llmConfigData :
-                   type === 'video' ? videoConfigData : audioConfigData;
-      const p = data.providers[providerKey];
-      const i = data.providerInfo[providerKey] || { name: providerKey, description: '供应商' };
-      document.getElementById('modalIcon').textContent = i.name.charAt(0).toUpperCase();
-      document.getElementById('modalTitle').textContent = '配置 ' + i.name;
-      document.getElementById('modalSubtitle').textContent = i.description;
-      document.getElementById('apiKeyInput').value = '';
-      document.getElementById('apiKeyHint').textContent = p.apiKey
-        ? '当前已配置 (***' + (p.apiKey.slice(-4) || '') + ')，输入新值以更新'
-        : '输入 API Key';
-      document.getElementById('baseUrlInput').value = p.baseUrl || '';
-      document.getElementById('modelInput').value = p.model || '';
-      // 填充模型下拉建议（仅 LLM 类型有 providerInfo.models）
-      const datalist = document.getElementById('modelSuggestList');
-      datalist.innerHTML = '';
-      if (type === 'llm' && i.models && Array.isArray(i.models)) {
-        for (const m of i.models) {
-          const opt = document.createElement('option');
-          opt.value = m;
-          datalist.appendChild(opt);
-        }
-      }
-      // 视频/音频/LLM 专用字段显隐
-      const isVideo = type === 'video';
-      const isAudio = type === 'audio';
-      document.querySelector('.video-only-fields').style.display = isVideo ? 'block' : 'none';
-      document.querySelector('.audio-only-fields').style.display = isAudio ? 'block' : 'none';
-      document.querySelector('.llm-only-fields').style.display = (!isVideo && !isAudio) ? 'block' : 'none';
-      if (isVideo) {
-        document.getElementById('resolutionInput').value = p.resolution || '720p';
-        document.getElementById('ratioInput').value = p.ratio || '16:9';
-        document.getElementById('durationInput').value = p.duration || 5;
-        document.getElementById('modelHint').textContent = '示例: doubao-seedance-1-0-lite-t2v-250428 (文生视频) 或 ...-i2v-... (图生视频)';
-      } else if (isAudio) {
-        const isMusic = (i.kind === 'music');
-        // TTS 字段
-        document.getElementById('voiceInput').parentElement.style.display = isMusic ? 'none' : 'block';
-        document.getElementById('speedInput').parentElement.parentElement.style.display = isMusic ? 'none' : 'flex';
-        document.getElementById('modeInput').parentElement.style.display = isMusic ? 'block' : 'none';
-        document.getElementById('audioDurationInput').parentElement.style.display = isMusic ? 'block' : 'none';
-        if (!isMusic) {
-          document.getElementById('voiceInput').value = p.voice || 'male-qn-jingying';
-          document.getElementById('voiceHint').textContent = '常用音色: male-qn-jingying, female-shaonv, female-yujie, presenter_male, presenter_female';
-          document.getElementById('speedInput').value = p.speed || 1.0;
-          document.getElementById('formatInput').value = p.format || 'mp3';
-        } else {
-          document.getElementById('modeInput').value = p.mode || 'instrumental';
-          document.getElementById('audioDurationInput').value = p.duration || 30;
-        }
-        document.getElementById('modelHint').textContent = isMusic
-          ? '示例: music-01'
-          : '示例: speech-01 (TTS) / asr-01 (语音转写)';
-      } else {
-        document.getElementById('temperatureInput').value = p.temperature || 0.7;
-      }
-      document.getElementById('testResult').style.display = 'none';
-      document.getElementById('configModal').style.display = 'flex';
-    }
-    function closeModal() {
-      document.getElementById('configModal').style.display = 'none';
-      currentProvider = null;
-    }
-    // ==================== 测试连接 ====================
-    async function testConnection() {
-      const btn = document.getElementById('testBtn');
-      const result = document.getElementById('testResult');
-      btn.disabled = true;
-      // v0.2.15: defer label mutation to the next frame. Synchronously
-      // replacing the button's innerHTML in its own click handler cancels
-      // the click event in several Chromium-derived engines — the user
-      // observed the first click "doing nothing" until they closed and
-      // reopened the modal. Wrapping the mutation in requestAnimationFrame
-      // lets the click event finish dispatching first.
-      requestAnimationFrame(() => {
-        btn.textContent = '⚡ 测试中...';
-      });
-      result.style.display = 'none';
-      const endpoint = currentProviderType === 'llm' ? '/api/llm-test' :
-                       currentProviderType === 'video' ? '/api/video-test' :
-                       '/api/audio-test';
-      try {
-        const resp = await fetch(endpoint, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ provider: currentProvider })
-        });
-        const data = await resp.json();
-        result.className = 'test-result ' + (data.success ? 'test-success' : 'test-error');
-        result.innerHTML = '<span>' + (data.success ? '✓' : '✗') + '</span> ' +
-          (data.success ? '连接成功！延迟: ' + data.latency + 'ms' : (data.error || '连接失败'));
-        result.style.display = 'flex';
-      } catch (err) {
-        result.className = 'test-result test-error';
-        result.innerHTML = '<span>✗</span> ' + err.message;
-        result.style.display = 'flex';
-      }
-      btn.disabled = false;
-      requestAnimationFrame(() => {
-        btn.textContent = '⚡ 测试连接';
-      });
-    }
-    // ==================== 保存 ====================
-    document.getElementById('configForm').onsubmit = async function(e) {
-      e.preventDefault();
-      const data = currentProviderType === 'llm' ? llmConfigData : videoConfigData;
-      const existing = data.providers[currentProvider];
-      const apiKeyVal = document.getElementById('apiKeyInput').value;
-      const updateData = {
-        enabled: true,
-        apiKey: apiKeyVal || existing.apiKey || '',
-        baseUrl: document.getElementById('baseUrlInput').value || existing.baseUrl || '',
-        model: document.getElementById('modelInput').value || existing.model || ''
-      };
-      if (currentProviderType === 'video') {
-        updateData.resolution = document.getElementById('resolutionInput').value;
-        updateData.ratio = document.getElementById('ratioInput').value;
-        updateData.duration = parseInt(document.getElementById('durationInput').value) || 5;
-      } else if (currentProviderType === 'audio') {
-        const info = audioConfigData.providerInfo[currentProvider] || {};
-        const isMusic = info.kind === 'music';
-        if (isMusic) {
-          updateData.mode = document.getElementById('modeInput').value;
-          updateData.duration = parseInt(document.getElementById('audioDurationInput').value) || 30;
-        } else {
-          updateData.voice = document.getElementById('voiceInput').value;
-          updateData.speed = parseFloat(document.getElementById('speedInput').value) || 1.0;
-          updateData.format = document.getElementById('formatInput').value;
-        }
-      } else {
-        updateData.temperature = parseFloat(document.getElementById('temperatureInput').value) || 0.7;
-      }
-      const endpoint = currentProviderType === 'llm' ? '/api/llm-config' :
-                       currentProviderType === 'video' ? '/api/video-config' :
-                       '/api/audio-config';
-      try {
-        await fetch(endpoint, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ provider: currentProvider, config: updateData })
-        });
-        const saveBtn = this.querySelector('.btn-save');
-        saveBtn.textContent = '✓ 已保存';
-        setTimeout(() => {
-          closeModal();
-          if (currentProviderType === 'llm') loadLLMConfig();
-          else if (currentProviderType === 'video') loadVideoConfig();
-          else loadAudioConfig();
-        }, 500);
-      } catch (err) {
-        alert('保存失败: ' + err.message);
-      }
-    };
-    // ==================== 外部智能体 渲染 ====================
-    function renderEngines() {
-      const listEl = document.getElementById('engineList');
-      if (!listEl) return;
-      const list = engineData && engineData.engines ? engineData.engines : [];
-      if (list.length === 0) {
-        listEl.innerHTML = '<div class="error-state">未发现本机已安装的外部编码智能体，也未找到实验目录 API（BOLLOON_EXPERIMENT_API_DIR）</div>';
-        return;
-      }
-      let html = '';
-      for (const e of list) {
-        const isExperiment = String(e.id).startsWith('experiment:');
-        let statusText, statusClass;
-        if (e.available) { statusText = '可用'; statusClass = 'status-green'; }
-        else if (e.installed) { statusText = '已装未配'; statusClass = 'status-yellow'; }
-        else if (e.configured) { statusText = '已配未装'; statusClass = 'status-yellow'; }
-        else { statusText = '未发现'; statusClass = 'status-muted'; }
-        html += `
-          <div class="provider-card ${e.available ? 'active' : ''}" onclick="openEngineModal('${e.id}')">
-            <div class="provider-header">
-              <div class="provider-icon">${isExperiment ? '🧪' : e.displayName.charAt(0).toUpperCase()}</div>
-              <div class="provider-info">
-                <h3 class="provider-name">${e.displayName}</h3>
-                <p class="provider-desc">${e.id}${e.provider ? ' → ' + e.provider : ''}${e.cliPath ? ' · 已安装' : ''}</p>
-              </div>
-              <div class="status-badge ${statusClass}">
-                <span class="status-dot"></span>
-                ${statusText}
-              </div>
-            </div>
-            <div class="provider-footer">
-              <div class="config-status">
-                <span class="status-icon ${e.configured ? 'configured' : ''}">${e.configured ? '✓' : '○'}</span>
-                ${e.configured ? '已配置 API' : '未配置 API'}
-              </div>
-              ${e.model ? '<div class="model-info">模型: ' + e.model + '</div>' : ''}
-              ${e.models && e.models.length ? '<div class="model-info">候选模型: ' + e.models.length + ' 个（可筛选）</div>' : ''}
-              <div class="arrow-indicator">›</div>
-            </div>
-          </div>
-        `;
-      }
-      listEl.innerHTML = html;
-    }
-    // ==================== 外部智能体 配置弹窗 ====================
-    const ENGINE_PROVIDER_FALLBACK = ['openai','anthropic','ollama','openrouter','gemini','minimax','deepseek','kimi','glm','qwen','mimo','local'];
-    function openEngineModal(id) {
-      const list = engineData && engineData.engines ? engineData.engines : [];
-      const e = list.find(x => x.id === id);
-      if (!e) return;
-      currentEngine = e;
-      document.getElementById('engineModalIcon').textContent = String(e.displayName).charAt(0).toUpperCase();
-      document.getElementById('engineModalTitle').textContent = '配置 ' + e.displayName;
-      document.getElementById('engineModalSubtitle').textContent = (e.notes || '') + (e.configPath ? ' · 配置: ' + e.configPath : '');
-      // 映射供应商 select
-      const provSel = document.getElementById('engineProviderInput');
-      const provKeys = (llmConfigData && llmConfigData.providers) ? Object.keys(llmConfigData.providers) : ENGINE_PROVIDER_FALLBACK;
-      const mapped = e.provider || 'openai';
-      provSel.innerHTML = provKeys.map(k => `<option value="${k}" ${k === mapped ? 'selected' : ''}>${k}</option>`).join('');
-      document.getElementById('engineApiKeyInput').value = '';
-      document.getElementById('engineApiKeyHint').textContent = e.apiKey
-        ? '当前已发现 (***' + (e.apiKey.slice(-4) || '') + ')，输入新值以更新'
-        : '输入 API Key';
-      document.getElementById('engineBaseUrlInput').value = e.baseUrl || '';
-      document.getElementById('engineModelInput').value = e.model || '';
-      document.getElementById('engineModelHint').textContent = (e.models && e.models.length)
-        ? '从 ' + e.models.length + ' 个候选模型里筛选，或手动输入'
-        : '手动输入模型名';
-      document.getElementById('engineImportResult').style.display = 'none';
-      document.getElementById('engineModal').style.display = 'flex';
-      // 准备模型筛选下拉
-      renderEngineModelList('');
-      setTimeout(() => document.getElementById('engineModelInput').focus(), 50);
-    }
-    function closeEngineModal() {
-      document.getElementById('engineModal').style.display = 'none';
-      currentEngine = null;
-      document.getElementById('engineModelList').style.display = 'none';
-    }
-    // 模型筛选下拉
-    function renderEngineModelList(filter) {
-      const listEl = document.getElementById('engineModelList');
-      if (!currentEngine || !currentEngine.models) { listEl.style.display = 'none'; return; }
-      const f = (filter || '').toLowerCase();
-      const matched = currentEngine.models.filter(m => m.toLowerCase().includes(f));
-      if (matched.length === 0) { listEl.style.display = 'none'; return; }
-      listEl.innerHTML = matched.map(m => `<div class="combobox-option" onclick="selectEngineModel('${m.replace(/'/g, "\\'")}')">${m}</div>`).join('');
-      listEl.style.display = 'block';
-    }
-    function selectEngineModel(model) {
-      document.getElementById('engineModelInput').value = model;
-      document.getElementById('engineModelList').style.display = 'none';
-    }
-    document.getElementById('engineModelInput').addEventListener('input', (ev) => {
-      renderEngineModelList(ev.target.value);
-    });
-    document.getElementById('engineModelInput').addEventListener('focus', (ev) => {
-      renderEngineModelList(ev.target.value);
-    });
-    // 点击空白关闭下拉
-    document.addEventListener('click', (ev) => {
-      const cb = document.getElementById('engineModelCombobox');
-      if (cb && !cb.contains(ev.target)) {
-        document.getElementById('engineModelList').style.display = 'none';
-      }
-    });
-    document.getElementById('engineModal').addEventListener('click', (ev) => {
-      if (ev.target === document.getElementById('engineModal')) closeEngineModal();
-    });
-    async function importEngine() {
-      if (!currentEngine) return;
-      const btn = document.getElementById('engineImportBtn');
-      const result = document.getElementById('engineImportResult');
-      btn.disabled = true;
-      requestAnimationFrame(() => { btn.textContent = '⚡ 导入中...'; });
-      result.style.display = 'none';
-      const body = {
-        id: currentEngine.id,
-        model: document.getElementById('engineModelInput').value.trim(),
-        provider: document.getElementById('engineProviderInput').value,
-      };
-      try {
-        const resp = await fetch('/api/external-engines/import', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(body),
-        });
-        const data = await resp.json();
-        if (!resp.ok) throw new Error(data.error || '导入失败');
-        result.className = 'test-result test-success';
-        result.innerHTML = '<span>✓</span> 已导入为供应商: ' + (data.provider || '') +
-          (data.autoActivated ? '（已激活）' : '') + '，可在「LLM 对话」tab 选用';
-        result.style.display = 'flex';
-        // 刷新 LLM 配置 + 引擎列表
-        await Promise.all([loadLLMConfig(), loadEngines()]);
-      } catch (err) {
-        result.className = 'test-result test-error';
-        result.innerHTML = '<span>✗</span> ' + (err.message || '导入失败');
-        result.style.display = 'flex';
-      }
-      btn.disabled = false;
-      requestAnimationFrame(() => { btn.textContent = '⚡ 导入为供应商'; });
-    }
-    // ==================== 关闭弹窗 ====================
-    document.getElementById('configModal').onclick = function(e) {
-      if (e.target === this) closeModal();
-    };
-    // 启动
-    loadAll();
-  </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API 配置 - Bolloon</title>
+  <!-- 2026-06-11: 移除 Google Fonts 外部 CSS — 在大陆/跨公网时经常 30s+ timeout 阻塞首屏
+       style.css 里只用字体名字符串 (JetBrains Mono / monospace), 浏览器看字面量自动落回系统字体
+       2026-06-11 提速: 不再等 Google CDN 即可渲染 -->
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <div class="api-config-page">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <div class="page-title-group">
+        <h1>API 配置</h1>
+        <span class="config-count-badge" id="configCount">加载中...</span>
+      </div>
+      <a href="/" class="back-link">← 返回主页</a>
+    </div>
+    <!-- 标签切换 -->
+    <div class="api-tabs">
+      <button class="api-tab active" data-tab="llm" onclick="switchTab('llm')">
+        <span class="api-tab-icon">💬</span>
+        <span>LLM 对话</span>
+      </button>
+      <button class="api-tab" data-tab="video" onclick="switchTab('video')">
+        <span class="api-tab-icon">🎬</span>
+        <span>视频生成</span>
+      </button>
+      <button class="api-tab" data-tab="audio" onclick="switchTab('audio')">
+        <span class="api-tab-icon">🎵</span>
+        <span>音频生成</span>
+      </button>
+      <button class="api-tab" data-tab="engines" onclick="switchTab('engines')">
+        <span class="api-tab-icon">🤖</span>
+        <span>外部智能体</span>
+      </button>
+    </div>
+    <!-- LLM 面板 -->
+    <div class="api-panel" id="panel-llm" data-panel="llm">
+      <div class="provider-list" id="providerList">
+        <div class="loading-state">加载中...</div>
+      </div>
+    </div>
+    <!-- 视频生成面板 -->
+    <div class="api-panel" id="panel-video" data-panel="video" style="display: none;">
+      <div class="video-intro">
+        <p>视频生成走异步任务流（提交任务 → 轮询结果），与 LLM 实时对话不同。Seedance 由字节火山方舟 (ARK) 提供，支持文生视频 (t2v) 与图生视频 (i2v)；MiniMax Video 为同 tab 下的另一选项。</p>
+      </div>
+      <div class="provider-list" id="videoProviderList">
+        <div class="loading-state">加载中...</div>
+      </div>
+    </div>
+    <!-- 音频生成面板 -->
+    <div class="api-panel" id="panel-audio" data-panel="audio" style="display: none;">
+      <div class="video-intro">
+        <p>音频生成：TTS（文生语音）/ Music（文生音乐）。MiniMax 提供 speech-01 与 music-01 模型，TTS 默认走 OpenAI 兼容 <code>/audio/speech</code> 端点，Music 走 MiniMax 自有 <code>/music_generation</code> 端点。</p>
+      </div>
+      <div class="provider-list" id="audioProviderList">
+        <div class="loading-state">加载中...</div>
+      </div>
+    </div>
+    <!-- 外部智能体面板 -->
+    <div class="api-panel" id="panel-engines" data-panel="engines" style="display: none;">
+      <div class="video-intro">
+        <p>Bolloon 自动发现本机已安装的 AI 编码工具（Codex / Claude Code / OpenCode / OpenClaw / Hermes）与实验目录声明的 API。可在此筛选模型并把它们的 API 当作 Bolloon 的供应商一键导入，无需重复填 Key。委派执行请通过对话里的 <code>delegate_to_engine</code> 工具。</p>
+      </div>
+      <div class="provider-list" id="engineList">
+        <div class="loading-state">加载中...</div>
+      </div>
+    </div>
+    <!-- 配置弹窗 -->
+    <div class="modal-overlay" id="configModal" style="display: none;">
+      <div class="modal-box">
+        <div class="modal-header">
+          <div class="modal-title-group">
+            <div class="modal-icon" id="modalIcon">A</div>
+            <div>
+              <h2 id="modalTitle">配置</h2>
+              <p class="modal-subtitle" id="modalSubtitle">描述</p>
+            </div>
+          </div>
+          <button class="modal-close" onclick="closeModal()">×</button>
+        </div>
+        <form class="modal-form" id="configForm">
+          <div class="form-group">
+            <label>API Key</label>
+            <input type="password" id="apiKeyInput" placeholder="输入 API Key">
+            <p class="form-hint" id="apiKeyHint">已有 Key 会保留，输入新值以更新</p>
+          </div>
+          <div class="form-group">
+            <label>Base URL</label>
+            <input type="text" id="baseUrlInput" placeholder="https://api.example.com/v1">
+            <p class="form-hint">留空使用默认地址</p>
+          </div>
+          <div class="form-group">
+            <label>模型</label>
+            <input type="text" id="modelInput" placeholder="如 gpt-4" list="modelSuggestList">
+            <datalist id="modelSuggestList"></datalist>
+            <p class="form-hint" id="modelHint"></p>
+          </div>
+          <!-- 视频模型专用字段 -->
+          <div class="video-only-fields" style="display: none;">
+            <div class="form-row">
+              <div class="form-group">
+                <label>分辨率</label>
+                <select id="resolutionInput">
+                  <option value="480p">480p</option>
+                  <option value="720p">720p</option>
+                  <option value="1080p">1080p</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label>宽高比</label>
+                <select id="ratioInput">
+                  <option value="16:9">16:9</option>
+                  <option value="9:16">9:16</option>
+                  <option value="1:1">1:1</option>
+                  <option value="4:3">4:3</option>
+                  <option value="3:4">3:4</option>
+                  <option value="21:9">21:9</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group">
+              <label>默认时长（秒）</label>
+              <input type="number" id="durationInput" min="3" max="12" step="1" value="5">
+              <p class="form-hint">Seedance 支持 3-12 秒</p>
+            </div>
+          </div>
+          <!-- 音频模型专用字段 -->
+          <div class="audio-only-fields" style="display: none;">
+            <div class="form-group">
+              <label>音色 / 风格</label>
+              <input type="text" id="voiceInput" placeholder="male-qn-jingying / female-shaonv ...">
+              <p class="form-hint" id="voiceHint"></p>
+            </div>
+            <div class="form-row">
+              <div class="form-group">
+                <label>语速</label>
+                <input type="number" id="speedInput" min="0.5" max="2.0" step="0.1" value="1.0">
+              </div>
+              <div class="form-group">
+                <label>输出格式</label>
+                <select id="formatInput">
+                  <option value="mp3">mp3</option>
+                  <option value="pcm">pcm</option>
+                  <option value="wav">wav</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group" id="audioModeGroup" style="display: none;">
+              <label>模式</label>
+              <select id="modeInput">
+                <option value="instrumental">纯音乐</option>
+                <option value="lyrics">带歌词</option>
+              </select>
+            </div>
+            <div class="form-group" id="audioDurationGroup" style="display: none;">
+              <label>默认时长（秒）</label>
+              <input type="number" id="audioDurationInput" min="5" max="120" step="1" value="30">
+              <p class="form-hint">music-01 支持 5-120 秒</p>
+            </div>
+          </div>
+          <!-- LLM 专用字段 -->
+          <div class="llm-only-fields">
+            <div class="form-group form-group-small">
+              <label>温度</label>
+              <input type="number" id="temperatureInput" value="0.7" min="0" max="2" step="0.1">
+            </div>
+          </div>
+          <div class="form-group">
+            <button type="button" class="test-btn" id="testBtn" onclick="testConnection()">
+              ⚡ 测试连接
+            </button>
+            <div class="test-result" id="testResult" style="display: none;"></div>
+          </div>
+          <div class="form-actions">
+            <button type="button" class="btn-cancel" onclick="closeModal()">取消</button>
+            <button type="submit" class="btn-save">保存</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <!-- 外部智能体 配置弹窗 -->
+  <div class="modal-overlay" id="engineModal" style="display: none;">
+    <div class="modal-box">
+      <div class="modal-header">
+        <div class="modal-title-group">
+          <div class="modal-icon" id="engineModalIcon">A</div>
+          <div>
+            <h2 id="engineModalTitle">配置</h2>
+            <p class="modal-subtitle" id="engineModalSubtitle">描述</p>
+          </div>
+        </div>
+        <button class="modal-close" onclick="closeEngineModal()">×</button>
+      </div>
+      <form class="modal-form" id="engineConfigForm">
+        <div class="form-group">
+          <label>映射供应商</label>
+          <select id="engineProviderInput"></select>
+          <p class="form-hint">导入时写进该 Bolloon 供应商 (可覆盖发现的映射)</p>
+        </div>
+        <div class="form-group">
+          <label>API Key</label>
+          <input type="password" id="engineApiKeyInput" placeholder="输入 API Key">
+          <p class="form-hint" id="engineApiKeyHint">已有 Key 会保留，输入新值以更新</p>
+        </div>
+        <div class="form-group">
+          <label>Base URL</label>
+          <input type="text" id="engineBaseUrlInput" placeholder="https://api.example.com/v1">
+          <p class="form-hint">留空使用默认地址</p>
+        </div>
+        <div class="form-group">
+          <label>模型（可筛选）</label>
+          <div class="combobox" id="engineModelCombobox">
+            <input type="text" id="engineModelInput" placeholder="输入关键字筛选模型…" autocomplete="off">
+            <div class="combobox-list" id="engineModelList" style="display: none;"></div>
+          </div>
+          <p class="form-hint" id="engineModelHint">从发现到的候选模型里筛选，或手动输入自定义模型名</p>
+        </div>
+        <div class="form-group">
+          <button type="button" class="test-btn" id="engineImportBtn" onclick="importEngine()">
+            ⚡ 导入为供应商
+          </button>
+          <div class="test-result" id="engineImportResult" style="display: none;"></div>
+        </div>
+        <div class="form-actions">
+          <button type="button" class="btn-cancel" onclick="closeEngineModal()">取消</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    // 当前 tab
+    let currentTab = 'llm';
+    // 缓存三份配置
+    let llmConfigData = null;
+    let videoConfigData = null;
+    let audioConfigData = null;
+    let engineData = null;
+    let currentProvider = null;
+    let currentEngine = null;
+    let currentProviderType = 'llm'; // 'llm' | 'video' | 'audio'
+    // ==================== Tab 切换 ====================
+    function switchTab(tab) {
+      currentTab = tab;
+      document.querySelectorAll('.api-tab').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.tab === tab);
+      });
+      document.querySelectorAll('.api-panel').forEach(panel => {
+        panel.style.display = panel.dataset.panel === tab ? 'block' : 'none';
+      });
+      // 切换 tab 时更新计数 badge
+      updateCountBadge();
+    }
+    function updateCountBadge() {
+      if (currentTab === 'engines') {
+        const list = engineData && engineData.engines ? engineData.engines : [];
+        const total = list.length;
+        const available = list.filter(e => e.available).length;
+        document.getElementById('configCount').textContent = available + '/' + total + ' 智能体可用';
+        return;
+      }
+      const data = currentTab === 'llm' ? llmConfigData :
+                   currentTab === 'video' ? videoConfigData : audioConfigData;
+      if (!data) {
+        document.getElementById('configCount').textContent = '加载中...';
+        return;
+      }
+      let configured = 0, total = 0;
+      for (const key in data.providers) {
+        total++;
+        const p = data.providers[key];
+        if (currentTab === 'llm') {
+          if (p.enabled && p.apiKey) configured++;
+        } else {
+          const info = data.providerInfo[key] || {};
+          if (p.enabled && (!info.requiresApiKey || p.apiKey)) configured++;
+        }
+      }
+      const labelMap = { llm: '', video: '视频', audio: '音频' };
+      const label = labelMap[currentTab] || '';
+      document.getElementById('configCount').textContent = configured + '/' + total + ' ' + label + '已配置';
+    }
+    // ==================== 加载 ====================
+    async function loadAll() {
+      await Promise.all([loadLLMConfig(), loadVideoConfig(), loadAudioConfig(), loadEngines()]);
+    }
+    async function loadEngines() {
+      try {
+        const resp = await fetch('/api/external-engines');
+        engineData = await resp.json();
+        renderEngines();
+        if (currentTab === 'engines') updateCountBadge();
+      } catch (err) {
+        const el = document.getElementById('engineList');
+        if (el) el.innerHTML = '<div class="error-state">加载失败: ' + err.message + '</div>';
+      }
+    }
+    async function loadLLMConfig() {
+      try {
+        const resp = await fetch('/api/llm-config');
+        llmConfigData = await resp.json();
+        renderProviders('llm');
+        if (currentTab === 'llm') updateCountBadge();
+      } catch (err) {
+        document.getElementById('providerList').innerHTML =
+          '<div class="error-state">加载失败: ' + err.message + '</div>';
+      }
+    }
+    async function loadVideoConfig() {
+      try {
+        const resp = await fetch('/api/video-config');
+        videoConfigData = await resp.json();
+        renderProviders('video');
+        if (currentTab === 'video') updateCountBadge();
+      } catch (err) {
+        document.getElementById('videoProviderList').innerHTML =
+          '<div class="error-state">加载失败: ' + err.message + '</div>';
+      }
+    }
+    async function loadAudioConfig() {
+      try {
+        const resp = await fetch('/api/audio-config');
+        audioConfigData = await resp.json();
+        renderProviders('audio');
+        if (currentTab === 'audio') updateCountBadge();
+      } catch (err) {
+        document.getElementById('audioProviderList').innerHTML =
+          '<div class="error-state">加载失败: ' + err.message + '</div>';
+      }
+    }
+    // ==================== 渲染 ====================
+    function renderProviders(type) {
+      const data = type === 'llm' ? llmConfigData :
+                   type === 'video' ? videoConfigData : audioConfigData;
+      const listEl = document.getElementById(
+        type === 'llm' ? 'providerList' :
+        type === 'video' ? 'videoProviderList' : 'audioProviderList'
+      );
+      if (!data) return;
+      const providers = data.providers;
+      const info = data.providerInfo;
+      const isActive = (key) => data.activeProvider === key;
+      let html = '';
+      for (const key in providers) {
+        const p = providers[key];
+        const i = info[key] || { name: key, description: '供应商', requiresApiKey: true };
+        const active = isActive(key);
+        let statusText, statusClass;
+        if (active) {
+          statusText = '使用中';
+          statusClass = 'status-accent';
+        } else if (p.enabled && p.apiKey) {
+          statusText = '已启用';
+          statusClass = 'status-green';
+        } else if (p.enabled) {
+          statusText = '已启用';
+          statusClass = 'status-yellow';
+        } else {
+          statusText = '未启用';
+          statusClass = 'status-muted';
+        }
+        const isConfigured = p.enabled && p.apiKey;
+        html += `
+          <div class="provider-card ${active ? 'active' : ''}" onclick="openModal('${type}', '${key}')">
+            <div class="provider-header">
+              <div class="provider-icon">${i.name.charAt(0).toUpperCase()}</div>
+              <div class="provider-info">
+                <h3 class="provider-name">${i.name}</h3>
+                <p class="provider-desc">${i.description}</p>
+                ${i.docs ? '<a class="provider-docs" href="' + i.docs + '" target="_blank" onclick="event.stopPropagation()">📖 文档</a>' : ''}
+              </div>
+              <div class="status-badge ${statusClass}">
+                <span class="status-dot"></span>
+                ${statusText}
+              </div>
+            </div>
+            <div class="provider-footer">
+              <div class="config-status">
+                <span class="status-icon ${isConfigured ? 'configured' : ''}">${isConfigured ? '✓' : '○'}</span>
+                ${isConfigured ? '已配置 API Key' : '未配置 API Key'}
+              </div>
+              ${p.model ? '<div class="model-info">模型: ' + p.model + '</div>' : ''}
+              <div class="arrow-indicator">›</div>
+            </div>
+          </div>
+        `;
+      }
+      listEl.innerHTML = html;
+    }
+    // ==================== 弹窗 ====================
+    function openModal(type, providerKey) {
+      currentProviderType = type;
+      currentProvider = providerKey;
+      const data = type === 'llm' ? llmConfigData :
+                   type === 'video' ? videoConfigData : audioConfigData;
+      const p = data.providers[providerKey];
+      const i = data.providerInfo[providerKey] || { name: providerKey, description: '供应商' };
+      document.getElementById('modalIcon').textContent = i.name.charAt(0).toUpperCase();
+      document.getElementById('modalTitle').textContent = '配置 ' + i.name;
+      document.getElementById('modalSubtitle').textContent = i.description;
+      document.getElementById('apiKeyInput').value = '';
+      document.getElementById('apiKeyHint').textContent = p.apiKey
+        ? '当前已配置 (***' + (p.apiKey.slice(-4) || '') + ')，输入新值以更新'
+        : '输入 API Key';
+      document.getElementById('baseUrlInput').value = p.baseUrl || '';
+      document.getElementById('modelInput').value = p.model || '';
+      // 填充模型下拉建议（仅 LLM 类型有 providerInfo.models）
+      const datalist = document.getElementById('modelSuggestList');
+      datalist.innerHTML = '';
+      if (type === 'llm' && i.models && Array.isArray(i.models)) {
+        for (const m of i.models) {
+          const opt = document.createElement('option');
+          opt.value = m;
+          datalist.appendChild(opt);
+        }
+      }
+      // 视频/音频/LLM 专用字段显隐
+      const isVideo = type === 'video';
+      const isAudio = type === 'audio';
+      document.querySelector('.video-only-fields').style.display = isVideo ? 'block' : 'none';
+      document.querySelector('.audio-only-fields').style.display = isAudio ? 'block' : 'none';
+      document.querySelector('.llm-only-fields').style.display = (!isVideo && !isAudio) ? 'block' : 'none';
+      if (isVideo) {
+        document.getElementById('resolutionInput').value = p.resolution || '720p';
+        document.getElementById('ratioInput').value = p.ratio || '16:9';
+        document.getElementById('durationInput').value = p.duration || 5;
+        document.getElementById('modelHint').textContent = '示例: doubao-seedance-1-0-lite-t2v-250428 (文生视频) 或 ...-i2v-... (图生视频)';
+      } else if (isAudio) {
+        const isMusic = (i.kind === 'music');
+        // TTS 字段
+        document.getElementById('voiceInput').parentElement.style.display = isMusic ? 'none' : 'block';
+        document.getElementById('speedInput').parentElement.parentElement.style.display = isMusic ? 'none' : 'flex';
+        document.getElementById('modeInput').parentElement.style.display = isMusic ? 'block' : 'none';
+        document.getElementById('audioDurationInput').parentElement.style.display = isMusic ? 'block' : 'none';
+        if (!isMusic) {
+          document.getElementById('voiceInput').value = p.voice || 'male-qn-jingying';
+          document.getElementById('voiceHint').textContent = '常用音色: male-qn-jingying, female-shaonv, female-yujie, presenter_male, presenter_female';
+          document.getElementById('speedInput').value = p.speed || 1.0;
+          document.getElementById('formatInput').value = p.format || 'mp3';
+        } else {
+          document.getElementById('modeInput').value = p.mode || 'instrumental';
+          document.getElementById('audioDurationInput').value = p.duration || 30;
+        }
+        document.getElementById('modelHint').textContent = isMusic
+          ? '示例: music-01'
+          : '示例: speech-01 (TTS) / asr-01 (语音转写)';
+      } else {
+        document.getElementById('temperatureInput').value = p.temperature || 0.7;
+      }
+      document.getElementById('testResult').style.display = 'none';
+      document.getElementById('configModal').style.display = 'flex';
+    }
+    function closeModal() {
+      document.getElementById('configModal').style.display = 'none';
+      currentProvider = null;
+    }
+    // ==================== 测试连接 ====================
+    async function testConnection() {
+      const btn = document.getElementById('testBtn');
+      const result = document.getElementById('testResult');
+      btn.disabled = true;
+      // v0.2.15: defer label mutation to the next frame. Synchronously
+      // replacing the button's innerHTML in its own click handler cancels
+      // the click event in several Chromium-derived engines — the user
+      // observed the first click "doing nothing" until they closed and
+      // reopened the modal. Wrapping the mutation in requestAnimationFrame
+      // lets the click event finish dispatching first.
+      requestAnimationFrame(() => {
+        btn.textContent = '⚡ 测试中...';
+      });
+      result.style.display = 'none';
+      const endpoint = currentProviderType === 'llm' ? '/api/llm-test' :
+                       currentProviderType === 'video' ? '/api/video-test' :
+                       '/api/audio-test';
+      try {
+        const resp = await fetch(endpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ provider: currentProvider })
+        });
+        const data = await resp.json();
+        result.className = 'test-result ' + (data.success ? 'test-success' : 'test-error');
+        result.innerHTML = '<span>' + (data.success ? '✓' : '✗') + '</span> ' +
+          (data.success ? '连接成功！延迟: ' + data.latency + 'ms' : (data.error || '连接失败'));
+        result.style.display = 'flex';
+      } catch (err) {
+        result.className = 'test-result test-error';
+        result.innerHTML = '<span>✗</span> ' + err.message;
+        result.style.display = 'flex';
+      }
+      btn.disabled = false;
+      requestAnimationFrame(() => {
+        btn.textContent = '⚡ 测试连接';
+      });
+    }
+    // ==================== 保存 ====================
+    document.getElementById('configForm').onsubmit = async function(e) {
+      e.preventDefault();
+      const data = currentProviderType === 'llm' ? llmConfigData : videoConfigData;
+      const existing = data.providers[currentProvider];
+      const apiKeyVal = document.getElementById('apiKeyInput').value;
+      const updateData = {
+        enabled: true,
+        apiKey: apiKeyVal || existing.apiKey || '',
+        baseUrl: document.getElementById('baseUrlInput').value || existing.baseUrl || '',
+        model: document.getElementById('modelInput').value || existing.model || ''
+      };
+      if (currentProviderType === 'video') {
+        updateData.resolution = document.getElementById('resolutionInput').value;
+        updateData.ratio = document.getElementById('ratioInput').value;
+        updateData.duration = parseInt(document.getElementById('durationInput').value) || 5;
+      } else if (currentProviderType === 'audio') {
+        const info = audioConfigData.providerInfo[currentProvider] || {};
+        const isMusic = info.kind === 'music';
+        if (isMusic) {
+          updateData.mode = document.getElementById('modeInput').value;
+          updateData.duration = parseInt(document.getElementById('audioDurationInput').value) || 30;
+        } else {
+          updateData.voice = document.getElementById('voiceInput').value;
+          updateData.speed = parseFloat(document.getElementById('speedInput').value) || 1.0;
+          updateData.format = document.getElementById('formatInput').value;
+        }
+      } else {
+        updateData.temperature = parseFloat(document.getElementById('temperatureInput').value) || 0.7;
+      }
+      const endpoint = currentProviderType === 'llm' ? '/api/llm-config' :
+                       currentProviderType === 'video' ? '/api/video-config' :
+                       '/api/audio-config';
+      try {
+        await fetch(endpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ provider: currentProvider, config: updateData })
+        });
+        const saveBtn = this.querySelector('.btn-save');
+        saveBtn.textContent = '✓ 已保存';
+        setTimeout(() => {
+          closeModal();
+          if (currentProviderType === 'llm') loadLLMConfig();
+          else if (currentProviderType === 'video') loadVideoConfig();
+          else loadAudioConfig();
+        }, 500);
+      } catch (err) {
+        alert('保存失败: ' + err.message);
+      }
+    };
+    // ==================== 外部智能体 渲染 ====================
+    function renderEngines() {
+      const listEl = document.getElementById('engineList');
+      if (!listEl) return;
+      const list = engineData && engineData.engines ? engineData.engines : [];
+      if (list.length === 0) {
+        listEl.innerHTML = '<div class="error-state">未发现本机已安装的外部编码智能体，也未找到实验目录 API（BOLLOON_EXPERIMENT_API_DIR）</div>';
+        return;
+      }
+      let html = '';
+      for (const e of list) {
+        const isExperiment = String(e.id).startsWith('experiment:');
+        let statusText, statusClass;
+        if (e.available) { statusText = '可用'; statusClass = 'status-green'; }
+        else if (e.installed) { statusText = '已装未配'; statusClass = 'status-yellow'; }
+        else if (e.configured) { statusText = '已配未装'; statusClass = 'status-yellow'; }
+        else { statusText = '未发现'; statusClass = 'status-muted'; }
+        html += `
+          <div class="provider-card ${e.available ? 'active' : ''}" onclick="openEngineModal('${e.id}')">
+            <div class="provider-header">
+              <div class="provider-icon">${isExperiment ? '🧪' : e.displayName.charAt(0).toUpperCase()}</div>
+              <div class="provider-info">
+                <h3 class="provider-name">${e.displayName}</h3>
+                <p class="provider-desc">${e.id}${e.provider ? ' → ' + e.provider : ''}${e.cliPath ? ' · 已安装' : ''}</p>
+              </div>
+              <div class="status-badge ${statusClass}">
+                <span class="status-dot"></span>
+                ${statusText}
+              </div>
+            </div>
+            <div class="provider-footer">
+              <div class="config-status">
+                <span class="status-icon ${e.configured ? 'configured' : ''}">${e.configured ? '✓' : '○'}</span>
+                ${e.configured ? '已配置 API' : '未配置 API'}
+              </div>
+              ${e.model ? '<div class="model-info">模型: ' + e.model + '</div>' : ''}
+              ${e.models && e.models.length ? '<div class="model-info">候选模型: ' + e.models.length + ' 个（可筛选）</div>' : ''}
+              <div class="arrow-indicator">›</div>
+            </div>
+          </div>
+        `;
+      }
+      listEl.innerHTML = html;
+    }
+    // ==================== 外部智能体 配置弹窗 ====================
+    const ENGINE_PROVIDER_FALLBACK = ['openai','anthropic','ollama','openrouter','gemini','minimax','deepseek','kimi','glm','qwen','mimo','local'];
+    function openEngineModal(id) {
+      const list = engineData && engineData.engines ? engineData.engines : [];
+      const e = list.find(x => x.id === id);
+      if (!e) return;
+      currentEngine = e;
+      document.getElementById('engineModalIcon').textContent = String(e.displayName).charAt(0).toUpperCase();
+      document.getElementById('engineModalTitle').textContent = '配置 ' + e.displayName;
+      document.getElementById('engineModalSubtitle').textContent = (e.notes || '') + (e.configPath ? ' · 配置: ' + e.configPath : '');
+      // 映射供应商 select
+      const provSel = document.getElementById('engineProviderInput');
+      const provKeys = (llmConfigData && llmConfigData.providers) ? Object.keys(llmConfigData.providers) : ENGINE_PROVIDER_FALLBACK;
+      const mapped = e.provider || 'openai';
+      provSel.innerHTML = provKeys.map(k => `<option value="${k}" ${k === mapped ? 'selected' : ''}>${k}</option>`).join('');
+      document.getElementById('engineApiKeyInput').value = '';
+      document.getElementById('engineApiKeyHint').textContent = e.apiKey
+        ? '当前已发现 (***' + (e.apiKey.slice(-4) || '') + ')，输入新值以更新'
+        : '输入 API Key';
+      document.getElementById('engineBaseUrlInput').value = e.baseUrl || '';
+      document.getElementById('engineModelInput').value = e.model || '';
+      document.getElementById('engineModelHint').textContent = (e.models && e.models.length)
+        ? '从 ' + e.models.length + ' 个候选模型里筛选，或手动输入'
+        : '手动输入模型名';
+      document.getElementById('engineImportResult').style.display = 'none';
+      document.getElementById('engineModal').style.display = 'flex';
+      // 准备模型筛选下拉
+      renderEngineModelList('');
+      setTimeout(() => document.getElementById('engineModelInput').focus(), 50);
+    }
+    function closeEngineModal() {
+      document.getElementById('engineModal').style.display = 'none';
+      currentEngine = null;
+      document.getElementById('engineModelList').style.display = 'none';
+    }
+    // 模型筛选下拉
+    function renderEngineModelList(filter) {
+      const listEl = document.getElementById('engineModelList');
+      if (!currentEngine || !currentEngine.models) { listEl.style.display = 'none'; return; }
+      const f = (filter || '').toLowerCase();
+      const matched = currentEngine.models.filter(m => m.toLowerCase().includes(f));
+      if (matched.length === 0) { listEl.style.display = 'none'; return; }
+      listEl.innerHTML = matched.map(m => `<div class="combobox-option" onclick="selectEngineModel('${m.replace(/'/g, "\\'")}')">${m}</div>`).join('');
+      listEl.style.display = 'block';
+    }
+    function selectEngineModel(model) {
+      document.getElementById('engineModelInput').value = model;
+      document.getElementById('engineModelList').style.display = 'none';
+    }
+    document.getElementById('engineModelInput').addEventListener('input', (ev) => {
+      renderEngineModelList(ev.target.value);
+    });
+    document.getElementById('engineModelInput').addEventListener('focus', (ev) => {
+      renderEngineModelList(ev.target.value);
+    });
+    // 点击空白关闭下拉
+    document.addEventListener('click', (ev) => {
+      const cb = document.getElementById('engineModelCombobox');
+      if (cb && !cb.contains(ev.target)) {
+        document.getElementById('engineModelList').style.display = 'none';
+      }
+    });
+    document.getElementById('engineModal').addEventListener('click', (ev) => {
+      if (ev.target === document.getElementById('engineModal')) closeEngineModal();
+    });
+    async function importEngine() {
+      if (!currentEngine) return;
+      const btn = document.getElementById('engineImportBtn');
+      const result = document.getElementById('engineImportResult');
+      btn.disabled = true;
+      requestAnimationFrame(() => { btn.textContent = '⚡ 导入中...'; });
+      result.style.display = 'none';
+      const body = {
+        id: currentEngine.id,
+        model: document.getElementById('engineModelInput').value.trim(),
+        provider: document.getElementById('engineProviderInput').value,
+      };
+      try {
+        const resp = await fetch('/api/external-engines/import', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+        const data = await resp.json();
+        if (!resp.ok) throw new Error(data.error || '导入失败');
+        result.className = 'test-result test-success';
+        result.innerHTML = '<span>✓</span> 已导入为供应商: ' + (data.provider || '') +
+          (data.autoActivated ? '（已激活）' : '') + '，可在「LLM 对话」tab 选用';
+        result.style.display = 'flex';
+        // 刷新 LLM 配置 + 引擎列表
+        await Promise.all([loadLLMConfig(), loadEngines()]);
+      } catch (err) {
+        result.className = 'test-result test-error';
+        result.innerHTML = '<span>✗</span> ' + (err.message || '导入失败');
+        result.style.display = 'flex';
+      }
+      btn.disabled = false;
+      requestAnimationFrame(() => { btn.textContent = '⚡ 导入为供应商'; });
+    }
+    // ==================== 关闭弹窗 ====================
+    document.getElementById('configModal').onclick = function(e) {
+      if (e.target === this) closeModal();
+    };
+    // 启动
+    loadAll();
+  </script>
+</body>
+</html>