From c181e500bc9cc994883c97ad2c428c430c687bc0 Mon Sep 17 00:00:00 2001
From: zhayujie <yjzha1996@163.com>
Date: Wed, 20 May 2026 20:59:04 +0800
Subject: [PATCH] feat(web): redesign multi-models console

Overhauls the Models tab in the Web Console with a vendor-first layout and
ships a runtime-accurate dispatcher view for vision and image generation.
---
 channel/web/chat.html                  | 113 ++-
 channel/web/static/css/console.css     | 123 +++
 channel/web/static/js/console.js       | 989 ++++++++++++++++++++++++-
 channel/web/static/logos/claudeAPI.svg |   1 +
 channel/web/static/logos/custom.svg    |  10 +
 channel/web/static/logos/dashscope.svg |   1 +
 channel/web/static/logos/deepseek.svg  |   1 +
 channel/web/static/logos/doubao.svg    |   1 +
 channel/web/static/logos/gemini.svg    |   1 +
 channel/web/static/logos/linkai.svg    |   1 +
 channel/web/static/logos/minimax.svg   |   1 +
 channel/web/static/logos/moonshot.svg  |   1 +
 channel/web/static/logos/openai.svg    |   1 +
 channel/web/static/logos/qianfan.svg   |   1 +
 channel/web/static/logos/zhipu.svg     |   1 +
 channel/web/web_channel.py             | 754 ++++++++++++++++++-
 common/const.py                        |   2 +
 17 files changed, 1995 insertions(+), 7 deletions(-)
 create mode 100644 channel/web/static/logos/claudeAPI.svg
 create mode 100644 channel/web/static/logos/custom.svg
 create mode 100644 channel/web/static/logos/dashscope.svg
 create mode 100644 channel/web/static/logos/deepseek.svg
 create mode 100644 channel/web/static/logos/doubao.svg
 create mode 100644 channel/web/static/logos/gemini.svg
 create mode 100644 channel/web/static/logos/linkai.svg
 create mode 100644 channel/web/static/logos/minimax.svg
 create mode 100644 channel/web/static/logos/moonshot.svg
 create mode 100644 channel/web/static/logos/openai.svg
 create mode 100644 channel/web/static/logos/qianfan.svg
 create mode 100644 channel/web/static/logos/zhipu.svg

diff --git a/channel/web/chat.html b/channel/web/chat.html
index 56ce808f..31705d66 100644
--- a/channel/web/chat.html
+++ b/channel/web/chat.html
@@ -137,6 +137,11 @@
                             <i class="fas fa-sliders item-icon text-xs w-5 text-center"></i>
                             <span data-i18n="menu_config">配置</span>
                         </a>
+                        <a class="sidebar-item flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
+                           data-view="models">
+                            <i class="fas fa-microchip item-icon text-xs w-5 text-center"></i>
+                            <span data-i18n="menu_models">模型</span>
+                        </a>
                         <a class="sidebar-item flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 hover:bg-white/5 hover:text-neutral-200 text-[14px]"
                            data-view="skills">
                             <i class="fas fa-bolt item-icon text-xs w-5 text-center"></i>
@@ -850,6 +855,41 @@
                     </div>
                 </div>
 
+                <!-- ====================================================== -->
+                <!-- VIEW: Models                                            -->
+                <!-- ====================================================== -->
+                <div id="view-models" class="view">
+                    <!-- Tailwind JIT safelist: capability-card icon colors are
+                         emitted from JS template strings. Listing them here
+                         (display:none) guarantees the CDN-side compiler picks
+                         them up regardless of render timing. -->
+                    <div class="hidden bg-blue-50 dark:bg-blue-900/30 text-blue-500
+                                       bg-orange-50 dark:bg-orange-900/30 text-orange-500
+                                       bg-purple-50 dark:bg-purple-900/30 text-purple-500
+                                       bg-amber-50 dark:bg-amber-900/30 text-amber-500
+                                       bg-primary-50 dark:bg-primary-900/30 text-primary-500"></div>
+                    <div class="flex-1 overflow-y-auto p-6">
+                        <div class="max-w-4xl mx-auto">
+                            <div class="flex items-center justify-between mb-6">
+                                <div>
+                                    <h2 class="text-xl font-bold text-slate-800 dark:text-slate-100" data-i18n="models_title">模型管理</h2>
+                                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1" data-i18n="models_desc">统一管理对话、视觉、语音、向量、图像、搜索能力</p>
+                                </div>
+                                <button id="models-add-vendor-btn" onclick="openVendorModal('')"
+                                        class="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary-500 hover:bg-primary-600
+                                               text-white text-sm font-medium cursor-pointer transition-colors duration-150">
+                                    <i class="fas fa-plus text-xs"></i>
+                                    <span data-i18n="models_add_vendor">添加厂商</span>
+                                </button>
+                            </div>
+                            <div id="models-loading" class="flex items-center gap-2 py-12 justify-center text-slate-400 dark:text-slate-500 text-sm">
+                                <i class="fas fa-spinner fa-spin text-xs"></i><span>Loading...</span>
+                            </div>
+                            <div id="models-content" class="grid gap-6 hidden"></div>
+                        </div>
+                    </div>
+                </div>
+
                 <!-- ====================================================== -->
                 <!-- VIEW: Channels                                          -->
                 <!-- ====================================================== -->
@@ -959,7 +999,7 @@
     </div><!-- /app -->
 
     <!-- Confirm Dialog -->
-    <div id="confirm-dialog-overlay" class="fixed inset-0 bg-black/50 z-[100] hidden flex items-center justify-center">
+    <div id="confirm-dialog-overlay" class="fixed inset-0 bg-black/50 z-[200] hidden flex items-center justify-center">
         <div class="bg-white dark:bg-[#1A1A1A] rounded-2xl border border-slate-200 dark:border-white/10 shadow-xl
                     w-full max-w-sm mx-4 overflow-hidden">
             <div class="p-6">
@@ -984,6 +1024,77 @@
         </div>
     </div>
 
+    <!-- Vendor Credentials Modal -->
+    <div id="vendor-modal-overlay" class="fixed inset-0 bg-black/50 z-[100] hidden flex items-center justify-center">
+        <div class="bg-white dark:bg-[#1A1A1A] rounded-2xl border border-slate-200 dark:border-white/10 shadow-xl
+                    w-full max-w-md mx-4 overflow-hidden">
+            <div class="p-6">
+                <div class="flex items-center gap-3 mb-5">
+                    <div class="w-10 h-10 rounded-xl bg-primary-50 dark:bg-primary-900/20 flex items-center justify-center flex-shrink-0">
+                        <i class="fas fa-key text-primary-500"></i>
+                    </div>
+                    <div class="min-w-0 flex-1">
+                        <h3 id="vendor-modal-title" class="font-semibold text-slate-800 dark:text-slate-100 text-base"></h3>
+                        <p id="vendor-modal-subtitle" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5 font-mono"></p>
+                    </div>
+                </div>
+
+                <!-- Provider selector (only visible when adding via top button) -->
+                <div id="vendor-modal-picker-wrap" class="mb-4 hidden">
+                    <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1.5" data-i18n="models_provider">厂商</label>
+                    <div id="vendor-modal-picker" class="cfg-dropdown" tabindex="0">
+                        <div class="cfg-dropdown-selected">
+                            <span class="cfg-dropdown-text">--</span>
+                            <i class="fas fa-chevron-down cfg-dropdown-arrow"></i>
+                        </div>
+                        <div class="cfg-dropdown-menu"></div>
+                    </div>
+                </div>
+
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1.5">API Key</label>
+                        <input id="vendor-modal-key" type="text" autocomplete="off" data-1p-ignore data-lpignore="true"
+                               class="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600
+                                      bg-slate-50 dark:bg-white/5 text-sm text-slate-800 dark:text-slate-100
+                                      focus:outline-none focus:border-primary-500 font-mono transition-colors"
+                               placeholder="sk-...">
+                    </div>
+                    <div id="vendor-modal-base-wrap">
+                        <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1.5">API Base</label>
+                        <input id="vendor-modal-base" type="text"
+                               class="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600
+                                      bg-slate-50 dark:bg-white/5 text-sm text-slate-800 dark:text-slate-100
+                                      focus:outline-none focus:border-primary-500 font-mono transition-colors"
+                               placeholder="https://...../v1">
+                        <p id="vendor-modal-base-hint" class="mt-1.5 text-xs text-slate-400 dark:text-slate-500 hidden">
+                            <i class="fas fa-info-circle mr-1"></i><span data-i18n="models_base_default_hint">留空将使用官方默认地址</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center justify-between gap-3 px-6 py-4 border-t border-slate-100 dark:border-white/5">
+                <button id="vendor-modal-clear"
+                        class="px-3 py-2 rounded-lg text-xs font-medium
+                               text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20
+                               cursor-pointer transition-colors duration-150 hidden"
+                        data-i18n="models_clear_credential">清除凭据</button>
+                <span id="vendor-modal-status"
+                      class="flex-1 text-xs text-primary-500 opacity-0 transition-opacity duration-300 text-center"></span>
+                <button id="vendor-modal-cancel"
+                        class="px-4 py-2 rounded-lg border border-slate-200 dark:border-white/10
+                               text-slate-600 dark:text-slate-300 text-sm font-medium
+                               hover:bg-slate-50 dark:hover:bg-white/5
+                               cursor-pointer transition-colors duration-150"
+                        data-i18n="cancel">取消</button>
+                <button id="vendor-modal-save"
+                        class="px-4 py-2 rounded-lg bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium
+                               cursor-pointer transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed"
+                        data-i18n="save">保存</button>
+            </div>
+        </div>
+    </div>
+
     <script defer src="assets/js/console.js"></script>
 </body>
 </html>
diff --git a/channel/web/static/css/console.css b/channel/web/static/css/console.css
index d5caf5b1..cbb2a39b 100644
--- a/channel/web/static/css/console.css
+++ b/channel/web/static/css/console.css
@@ -725,6 +725,58 @@
     background: rgba(74, 190, 110, 0.15);
     color: #74E9A4;
 }
+/* When an item carries a hint (e.g. brand alias next to a technical model
+   id), label/hint are split into two spans so the hint sits on the right in
+   a dim, smaller weight. Without a hint the row stays a plain text node and
+   uses the default ellipsis behaviour, so no layout regressions for old call
+   sites. */
+.cfg-dropdown-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.cfg-dropdown-hint {
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-left: 12px;
+    color: #94a3b8;
+    font-size: 12px;
+    font-weight: 400;
+}
+.dark .cfg-dropdown-hint {
+    color: #64748b;
+}
+.cfg-dropdown-item.active .cfg-dropdown-hint {
+    /* Tint the hint toward the brand colour on the active row so it doesn't
+       fight with the highlighted label tone. */
+    color: rgba(34, 133, 71, 0.65);
+}
+.dark .cfg-dropdown-item.active .cfg-dropdown-hint {
+    color: rgba(116, 233, 164, 0.6);
+}
+/* The active row gets a trailing brand-green checkmark via a Font Awesome
+   pseudo-element so every dropdown (chat / vision / image / asr / tts / etc.)
+   surfaces "this is what's currently selected" without per-call JS plumbing.
+   When a hint is present, the ✓ sits to its right with a small gap; without
+   a hint, margin-left:auto pushes the ✓ flush against the right edge. */
+.cfg-dropdown-item.active::after {
+    content: '\f00c';                  /* FontAwesome check glyph */
+    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
+    font-weight: 900;
+    margin-left: auto;
+    padding-left: 12px;
+    color: #4abe6e;
+    font-size: 11px;
+    flex-shrink: 0;
+}
+.cfg-dropdown-item.active:has(.cfg-dropdown-hint)::after {
+    /* When hint occupies the auto-margin slot, the ✓ no longer benefits
+       from `margin-left: auto`; replace it with a small fixed gap so the
+       ✓ trails the hint cleanly. */
+    margin-left: 0;
+    padding-left: 10px;
+}
 
 /* API Key masking via CSS (avoids browser password prompts) */
 .cfg-key-masked {
@@ -732,6 +784,77 @@
     text-security: disc;
 }
 
+/* Provider logo image — vendors flagged as `provider-logo-invert-dark`
+   ship a black wordmark that disappears on the dark canvas; we invert their
+   luminance only in dark mode so the brand stays recognizable without
+   touching multi-color marks like Google/MiniMax. */
+.provider-logo-img {
+    object-fit: contain;
+    object-position: center;
+}
+.dark .provider-logo-invert-dark {
+    filter: invert(1) brightness(1.15);
+}
+
+/* Models page — provider dropdown rows.
+   Configured rows look like ordinary picker entries; the .active row's
+   trailing brand-green ✓ already announces "this is what's selected"
+   (handled globally by .cfg-dropdown-item.active::after above).
+   Unconfigured rows are visually subdued and carry a trailing gear icon
+   as a "click to set up" affordance. */
+.cap-provider-label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.cap-provider-gear {
+    margin-left: auto;
+    padding-left: 12px;
+    color: #94a3b8;
+    font-size: 11px;
+    flex-shrink: 0;
+}
+.cap-provider-item.cap-provider-unconfigured {
+    color: #94a3b8;
+}
+.dark .cap-provider-item.cap-provider-unconfigured {
+    color: #64748b;
+}
+.cap-provider-item.cap-provider-unconfigured:hover {
+    color: #475569;
+}
+.dark .cap-provider-item.cap-provider-unconfigured:hover {
+    color: #cbd5e1;
+}
+.cap-provider-item.cap-provider-unconfigured:hover .cap-provider-gear {
+    color: #475569;
+}
+.dark .cap-provider-item.cap-provider-unconfigured:hover .cap-provider-gear {
+    color: #cbd5e1;
+}
+/* If the active row ever lands on an unconfigured vendor (defensive — the
+   click handler normally diverts to the modal), suppress the global ✓ so
+   the gear remains the sole trailing icon and the row keeps reading as
+   "needs setup" rather than "already selected". */
+.cap-provider-item.cap-provider-unconfigured.active::after {
+    content: none;
+}
+
+/* "Add vendor" modal picker — each configured row carries a static
+   brand-green ✓ via decorateVendorModalPicker so users can see what's set
+   up at a glance. The active row's global ✓ is suppressed here to avoid
+   showing two checks side by side on configured + selected rows. */
+.vendor-picker-item.active::after {
+    content: none;
+}
+.vendor-picker-configured-mark {
+    margin-left: auto;
+    padding-left: 12px;
+    color: #4abe6e;
+    font-size: 11px;
+    flex-shrink: 0;
+}
+
 /* Chat Input */
 #chat-input {
     resize: none; height: 42px; max-height: 180px;
diff --git a/channel/web/static/js/console.js b/channel/web/static/js/console.js
index fa094664..0e8a24aa 100644
--- a/channel/web/static/js/console.js
+++ b/channel/web/static/js/console.js
@@ -14,9 +14,51 @@ const I18N = {
     zh: {
         console: '控制台',
         nav_chat: '对话', nav_manage: '管理', nav_monitor: '监控',
-        menu_chat: '对话', menu_config: '配置', menu_skills: '技能',
+        menu_chat: '对话', menu_config: '配置', menu_models: '模型', menu_skills: '技能',
         menu_memory: '记忆', menu_knowledge: '知识', menu_channels: '通道', menu_tasks: '定时',
         menu_logs: '日志',
+        models_title: '模型管理',
+        models_desc: '统一管理对话、视觉、语音、向量、图像、搜索能力',
+        models_section_vendors: '厂商凭据',
+        models_section_vendors_desc: '一处配置，多个能力共享',
+        models_section_capabilities: '模型能力',
+        models_add_vendor: '添加厂商',
+        models_provider: '厂商',
+        models_model: '模型',
+        models_configured: '已配置',
+        models_not_configured: '未配置',
+        models_pick_to_configure: '选择以配置',
+        models_clear_credential: '清除凭据',
+        models_base_default_hint: '留空将使用官方默认地址',
+        models_base_default: '默认',
+        models_capability_chat: '主模型',
+        models_capability_chat_desc: '驱动对话与 Agent 推理',
+        models_capability_vision: '图像理解',
+        models_capability_vision_desc: '识别图片内容；未指定时自动跟随主模型',
+        models_capability_image: '图像生成',
+        models_capability_image_desc: '生成图片，可固定厂商或跟随主模型',
+        models_auto_using: '当前优先使用',
+        models_capability_asr: '语音识别',
+        models_capability_asr_desc: '语音转文字',
+        models_capability_tts: '语音合成',
+        models_capability_tts_desc: '文字转语音',
+        models_capability_embedding: '向量',
+        models_capability_embedding_desc: '记忆与知识的向量化',
+        models_capability_search: '联网搜索',
+        models_capability_search_desc: '实时网页检索能力',
+        models_strategy_auto: '自动',
+        models_unavailable: '不可用',
+        models_set_via_env: '通过环境变量启用',
+        models_dim_label: '维度',
+        models_warn_rebuild: '向量配置已更新，建议在聊天框输入 /memory rebuild-index 重建索引',
+        models_save_success: '已保存',
+        models_save_failed: '保存失败',
+        models_cleared: '已清除',
+        models_clear_failed: '清除失败',
+        models_clear_confirm_title: '清除厂商凭据',
+        models_clear_confirm_msg: '确认清除该厂商的 API Key 与 Base URL 吗？相关能力将不再可用。',
+        cancel: '取消',
+        save: '保存',
         knowledge_title: '知识库', knowledge_desc: '浏览和探索你的知识库',
         knowledge_tab_docs: '文档', knowledge_tab_graph: '图谱',
         knowledge_loading: '加载知识库中...', knowledge_loading_desc: '知识页面将显示在这里',
@@ -115,9 +157,51 @@ const I18N = {
     en: {
         console: 'Console',
         nav_chat: 'Chat', nav_manage: 'Management', nav_monitor: 'Monitor',
-        menu_chat: 'Chat', menu_config: 'Config', menu_skills: 'Skills',
+        menu_chat: 'Chat', menu_config: 'Config', menu_models: 'Models', menu_skills: 'Skills',
         menu_memory: 'Memory', menu_knowledge: 'Knowledge', menu_channels: 'Channels', menu_tasks: 'Tasks',
         menu_logs: 'Logs',
+        models_title: 'Models',
+        models_desc: 'Manage chat, vision, voice, embedding, image and search capabilities in one place',
+        models_section_vendors: 'Vendor Credentials',
+        models_section_vendors_desc: 'Configured once, shared by every capability',
+        models_section_capabilities: 'Capabilities',
+        models_add_vendor: 'Add Vendor',
+        models_provider: 'Provider',
+        models_model: 'Model',
+        models_configured: 'configured',
+        models_not_configured: 'not configured',
+        models_pick_to_configure: 'pick to configure',
+        models_clear_credential: 'Clear credentials',
+        models_base_default_hint: 'Leave blank to use the official default base URL',
+        models_base_default: 'Default',
+        models_capability_chat: 'Main Model',
+        models_capability_chat_desc: 'Powers chat and agent reasoning',
+        models_capability_vision: 'Image Understanding',
+        models_capability_vision_desc: 'Reads images; auto-follows main model when unspecified',
+        models_capability_image: 'Image Generation',
+        models_capability_image_desc: 'Generate images; pin a vendor or follow the main model',
+        models_auto_using: 'Preferred',
+        models_capability_asr: 'Speech Recognition',
+        models_capability_asr_desc: 'Voice to text',
+        models_capability_tts: 'Speech Synthesis',
+        models_capability_tts_desc: 'Text to voice',
+        models_capability_embedding: 'Embedding',
+        models_capability_embedding_desc: 'Vectorizes memory and knowledge',
+        models_capability_search: 'Web Search',
+        models_capability_search_desc: 'Real-time web retrieval',
+        models_strategy_auto: 'auto',
+        models_unavailable: 'unavailable',
+        models_set_via_env: 'enable via environment variable',
+        models_dim_label: 'dim',
+        models_warn_rebuild: 'Embedding settings changed — run /memory rebuild-index in chat to rebuild',
+        models_save_success: 'Saved',
+        models_save_failed: 'Save failed',
+        models_cleared: 'Cleared',
+        models_clear_failed: 'Clear failed',
+        models_clear_confirm_title: 'Clear vendor credentials',
+        models_clear_confirm_msg: 'Remove this vendor\'s API Key and Base URL? Capabilities relying on it will stop working.',
+        cancel: 'Cancel',
+        save: 'Save',
         knowledge_title: 'Knowledge', knowledge_desc: 'Browse and explore your knowledge base',
         knowledge_tab_docs: 'Documents', knowledge_tab_graph: 'Graph',
         knowledge_loading: 'Loading knowledge base...', knowledge_loading_desc: 'Knowledge pages will be displayed here',
@@ -326,6 +410,7 @@ function toggleTheme() {
 const VIEW_META = {
     chat:     { group: 'nav_chat',    page: 'menu_chat' },
     config:   { group: 'nav_manage',  page: 'menu_config' },
+    models:   { group: 'nav_manage',  page: 'menu_models' },
     skills:   { group: 'nav_manage',  page: 'menu_skills' },
     memory:   { group: 'nav_manage',  page: 'menu_memory' },
     knowledge:{ group: 'nav_manage',  page: 'menu_knowledge' },
@@ -2491,8 +2576,23 @@ function initDropdown(el, options, selectedValue, onChange) {
         options.forEach(opt => {
             const item = document.createElement('div');
             item.className = 'cfg-dropdown-item' + (opt.value === el._ddValue ? ' active' : '');
-            item.textContent = opt.label;
             item.dataset.value = opt.value;
+            // Hint is an optional dim secondary label rendered on the right
+            // side of the row (e.g. friendly brand name next to a technical
+            // model id). When absent the row degrades to the original
+            // single-string layout.
+            if (opt.hint) {
+                const labelEl = document.createElement('span');
+                labelEl.className = 'cfg-dropdown-label';
+                labelEl.textContent = opt.label;
+                const hintEl = document.createElement('span');
+                hintEl.className = 'cfg-dropdown-hint';
+                hintEl.textContent = opt.hint;
+                item.appendChild(labelEl);
+                item.appendChild(hintEl);
+            } else {
+                item.textContent = opt.label;
+            }
             item.addEventListener('click', (e) => {
                 e.stopPropagation();
                 el._ddValue = opt.value;
@@ -3138,6 +3238,888 @@ function showConfirmDialog({ title, message, okText, cancelText, onConfirm }) {
     overlay.classList.remove('hidden');
 }
 
+// =====================================================================
+// Models View
+// =====================================================================
+// Capability cards rendered on the Models page. Order matters — main model
+// comes first because it transitively decides defaults for vision and image.
+// Icon palette is grouped by capability family:
+//   - chat                       → primary (brand green; the "main" capability)
+//   - vision + image             → blue    (everything visual)
+//   - asr + tts                  → amber   (everything audio)
+//   - embedding                  → purple  (vectors)
+//   - search                     → orange  (retrieval)
+// Each card uses an explicit `iconClass` string so Tailwind's CDN JIT can
+// see the literal class names — dynamic `bg-${color}-50` strings would not
+// be picked up reliably.
+const MODELS_CAPABILITY_DEFS = [
+    { id: 'chat',      icon: 'fa-microchip',        editable: true,  needsModel: true,  titleKey: 'models_capability_chat',      descKey: 'models_capability_chat_desc',
+      iconChip: 'bg-primary-50 dark:bg-primary-900/30',  iconGlyph: 'text-primary-500' },
+    { id: 'vision',    icon: 'fa-eye',              editable: true,  needsModel: true,  titleKey: 'models_capability_vision',    descKey: 'models_capability_vision_desc',
+      iconChip: 'bg-blue-50 dark:bg-blue-900/30',        iconGlyph: 'text-blue-500' },
+    { id: 'image',     icon: 'fa-image',            editable: true,  needsModel: true,  titleKey: 'models_capability_image',     descKey: 'models_capability_image_desc',
+      iconChip: 'bg-blue-50 dark:bg-blue-900/30',        iconGlyph: 'text-blue-500' },
+    { id: 'asr',       icon: 'fa-microphone',       editable: true,  needsModel: false, titleKey: 'models_capability_asr',       descKey: 'models_capability_asr_desc',
+      iconChip: 'bg-amber-50 dark:bg-amber-900/30',      iconGlyph: 'text-amber-500' },
+    { id: 'tts',       icon: 'fa-volume-high',      editable: true,  needsModel: true,  titleKey: 'models_capability_tts',       descKey: 'models_capability_tts_desc',
+      iconChip: 'bg-amber-50 dark:bg-amber-900/30',      iconGlyph: 'text-amber-500' },
+    { id: 'embedding', icon: 'fa-vector-square',    editable: true,  needsModel: false, titleKey: 'models_capability_embedding', descKey: 'models_capability_embedding_desc',
+      iconChip: 'bg-purple-50 dark:bg-purple-900/30',    iconGlyph: 'text-purple-500' },
+    { id: 'search',    icon: 'fa-magnifying-glass', editable: false, needsModel: false, titleKey: 'models_capability_search',    descKey: 'models_capability_search_desc',
+      iconChip: 'bg-orange-50 dark:bg-orange-900/30',    iconGlyph: 'text-orange-500' },
+];
+
+// Provider logos: when a real SVG exists under static/logos/<id>.svg we use
+// it; otherwise we fall back to a neutral monogram chip. SVGs are fetched
+// via <img> with a hidden onerror so layout stays stable when files are
+// absent. Vendors whose mark is rendered in pure (or near-pure) black are
+// listed in MODELS_PROVIDER_LOGO_DARK_INVERT — for those, we apply a CSS
+// invert filter in dark mode so the glyph stays visible against #1A1A1A.
+const MODELS_PROVIDER_LOGO_PATH = 'assets/logos';
+const MODELS_PROVIDER_LOGO_DARK_INVERT = new Set([
+    'openai',     // black wordmark
+    'moonshot',   // dark monogram
+    'zhipu',      // dark monogram
+    'custom',     // single-color slider glyph
+]);
+
+let modelsState = { providers: [], capabilities: {} };
+
+// One-shot: { capabilityId, providerId } stashed before a Models reload,
+// consumed by renderCapabilityBody to preselect a just-configured vendor.
+let pendingCapabilitySelection = null;
+
+// `opts.preserveScroll` keeps the page's vertical scroll position across the
+// refresh. We capture it before unhiding the loading skeleton (which collapses
+// content height to zero) and restore it after the new content is mounted.
+// This matters when the user configures a vendor from inside a capability
+// card's dropdown — without preservation, the post-save reload bounces them
+// back to the top of the page, away from the card they were configuring.
+function loadModelsView(opts) {
+    const loading = document.getElementById('models-loading');
+    const content = document.getElementById('models-content');
+    if (!loading || !content) return;
+    const preserveScroll = !!(opts && opts.preserveScroll);
+    // The Models pane has its own scrollable container; capture its position
+    // (not window.scrollY) so we can put the user back exactly where they were.
+    const scroller = document.querySelector('#view-models .overflow-y-auto');
+    const savedTop = preserveScroll && scroller ? scroller.scrollTop : null;
+
+    loading.classList.remove('hidden');
+    content.classList.add('hidden');
+
+    fetch('/api/models').then(r => r.json()).then(data => {
+        if (data.status !== 'success') {
+            loading.innerHTML = `<span class="text-sm text-red-400">${escapeHtml(data.message || 'Failed to load')}</span>`;
+            return;
+        }
+        modelsState.providers = data.providers || [];
+        modelsState.capabilities = data.capabilities || {};
+        renderModelsView();
+        loading.classList.add('hidden');
+        content.classList.remove('hidden');
+        if (savedTop !== null && scroller) {
+            // Wait one frame for the new layout to settle, otherwise the
+            // restored scrollTop snaps to the previous (smaller) max.
+            requestAnimationFrame(() => { scroller.scrollTop = savedTop; });
+        }
+    }).catch(err => {
+        loading.innerHTML = `<span class="text-sm text-red-400">${escapeHtml(String(err))}</span>`;
+    });
+}
+
+function renderModelsView() {
+    const container = document.getElementById('models-content');
+    container.innerHTML = '';
+    container.appendChild(renderVendorsSection());
+    MODELS_CAPABILITY_DEFS.forEach(def => container.appendChild(renderCapabilityCard(def)));
+}
+
+// ---------- Vendor section (Layer 1) -----------------------------------
+
+function renderVendorsSection() {
+    const wrap = document.createElement('div');
+    wrap.className = 'bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 p-6';
+
+    const configured = modelsState.providers.filter(p => p.configured);
+
+    const header = `
+        <div class="flex items-start gap-3 mb-5">
+            <div class="w-9 h-9 rounded-lg bg-primary-50 dark:bg-primary-900/30 flex items-center justify-center flex-shrink-0">
+                <i class="fas fa-key text-primary-500 text-sm"></i>
+            </div>
+            <div class="flex-1 min-w-0">
+                <h3 class="font-semibold text-slate-800 dark:text-slate-100">${t('models_section_vendors')}</h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">${t('models_section_vendors_desc')}</p>
+            </div>
+            <span class="text-xs text-slate-400 dark:text-slate-500 mt-2 flex-shrink-0">${configured.length}/${modelsState.providers.length}</span>
+        </div>`;
+
+    let body;
+    if (configured.length === 0) {
+        body = `
+            <div class="flex flex-col items-center justify-center py-8 px-4 rounded-lg border border-dashed border-slate-200 dark:border-white/10">
+                <p class="text-sm text-slate-500 dark:text-slate-400 text-center">${t('models_not_configured')}</p>
+                <button onclick="openVendorModal('')"
+                        class="mt-3 px-3 py-1.5 rounded-lg text-xs font-medium bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 hover:bg-primary-100 dark:hover:bg-primary-900/50 cursor-pointer transition-colors">
+                    <i class="fas fa-plus text-[10px] mr-1"></i>${t('models_add_vendor')}
+                </button>
+            </div>`;
+    } else {
+        body = `<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            ${configured.map(renderVendorChip).join('')}
+        </div>`;
+    }
+
+    wrap.innerHTML = header + body;
+    return wrap;
+}
+
+function renderVendorChip(p) {
+    // The masked API key is intentionally not surfaced here; it is shown
+    // inside the edit modal so the chip stays uncluttered and scannable.
+    return `
+        <button onclick="openVendorModal('${escapeHtml(p.id)}')"
+                class="group flex items-center gap-3 px-3 py-2.5 rounded-lg border border-slate-200 dark:border-white/10
+                       bg-slate-50 dark:bg-white/5 hover:border-primary-300 dark:hover:border-primary-500/50
+                       cursor-pointer transition-colors duration-150 text-left">
+            ${renderProviderLogo(p, 28)}
+            <span class="flex-1 min-w-0 text-sm font-medium text-slate-800 dark:text-slate-100 truncate">${escapeHtml(p.label)}</span>
+            <i class="fas fa-pen-to-square text-[11px] text-slate-400 dark:text-slate-500 group-hover:text-primary-500 transition-colors"></i>
+        </button>`;
+}
+
+// Render a uniformly-styled logo for a provider. Tries an SVG asset first; if
+// it 404s the <img> swaps itself for a monogram fallback via onerror.
+function renderProviderLogo(p, sizePx) {
+    const initial = (p.label || p.id || '?').slice(0, 1).toUpperCase();
+    const sz = sizePx || 32;
+    const url = `${MODELS_PROVIDER_LOGO_PATH}/${encodeURIComponent(p.id)}.svg`;
+    const fallbackId = `pl-${p.id}-${Math.random().toString(36).slice(2, 8)}`;
+    const imgClass = MODELS_PROVIDER_LOGO_DARK_INVERT.has(p.id)
+        ? 'absolute inset-0 m-auto provider-logo-img provider-logo-invert-dark'
+        : 'absolute inset-0 m-auto provider-logo-img';
+    return `
+        <span class="relative flex items-center justify-center rounded-lg bg-slate-100 dark:bg-white/10
+                     text-slate-600 dark:text-slate-300 flex-shrink-0 overflow-hidden"
+              style="width:${sz}px;height:${sz}px;">
+            <span id="${fallbackId}" class="text-xs font-bold">${escapeHtml(initial)}</span>
+            <img src="${url}" alt="" aria-hidden="true"
+                 class="${imgClass}"
+                 style="width:${Math.round(sz * 0.65)}px;height:${Math.round(sz * 0.65)}px;"
+                 onload="(function(el){var f=document.getElementById('${fallbackId}');if(f)f.style.display='none';})(this)"
+                 onerror="this.remove();">
+        </span>`;
+}
+
+// ---------- Capability cards (Layer 2) ---------------------------------
+
+function renderCapabilityCard(def) {
+    const cap = modelsState.capabilities[def.id] || {};
+    const wrap = document.createElement('div');
+    wrap.className = 'bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 p-6';
+    wrap.id = `models-card-${def.id}`;
+
+    const headerRight = renderCapabilityHeaderTag(def, cap);
+
+    wrap.innerHTML = `
+        <div class="flex items-start gap-3 mb-5">
+            <div class="w-9 h-9 rounded-lg ${def.iconChip} flex items-center justify-center flex-shrink-0">
+                <i class="fas ${def.icon} ${def.iconGlyph} text-sm"></i>
+            </div>
+            <div class="flex-1 min-w-0">
+                <h3 class="font-semibold text-slate-800 dark:text-slate-100">${t(def.titleKey)}</h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">${t(def.descKey)}</p>
+            </div>
+            ${headerRight}
+        </div>
+        <div class="space-y-4" data-cap-body="${def.id}"></div>`;
+
+    const body = wrap.querySelector(`[data-cap-body="${def.id}"]`);
+    renderCapabilityBody(def, cap, body);
+    return wrap;
+}
+
+function renderCapabilityHeaderTag(def, cap) {
+    // Only the search card carries a header tag — it reflects a runtime
+    // resolution result (which vendor responds to web_search), so the chip
+    // is informational, not editable. Other cards used to surface "auto"
+    // and "follows main model" badges, but those duplicated information
+    // already shown in the provider dropdown and the fallback hint below,
+    // so we drop them for visual clarity.
+    if (def.id === 'search') {
+        if (cap.available) {
+            return `<span class="px-2 py-0.5 text-[11px] rounded-md bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 mt-1 flex-shrink-0">${escapeHtml(cap.current_provider || '')}</span>`;
+        }
+        return `<span class="px-2 py-0.5 text-[11px] rounded-md bg-slate-100 dark:bg-white/5 text-slate-500 dark:text-slate-400 mt-1 flex-shrink-0">${t('models_unavailable')}</span>`;
+    }
+    return '';
+}
+
+function renderCapabilityBody(def, cap, body) {
+    if (def.id === 'search') {
+        if (cap.available) {
+            body.innerHTML = `
+                <p class="text-sm text-slate-500 dark:text-slate-400">
+                    <i class="fas fa-circle-check text-[11px] mr-1.5 text-emerald-500"></i>
+                    ${t('models_configured')}: <span class="font-mono text-slate-700 dark:text-slate-300">${escapeHtml(cap.current_provider)}</span>
+                </p>`;
+        } else {
+            body.innerHTML = `
+                <p class="text-sm text-slate-500 dark:text-slate-400">
+                    <i class="fas fa-circle-exclamation text-[11px] mr-1.5 text-amber-500"></i>
+                    ${t('models_set_via_env')}: <span class="font-mono text-slate-700 dark:text-slate-300">BOCHA_API_KEY</span>
+                </p>`;
+        }
+        return;
+    }
+
+    // Editable cards: provider dropdown + (optional) model dropdown + save row
+    const providerOpts = buildCapabilityProviderOptions(def, cap);
+    const providerHtml = `
+        <div>
+            <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1.5">${t('models_provider')}</label>
+            <div id="cap-${def.id}-provider" class="cfg-dropdown" tabindex="0">
+                <div class="cfg-dropdown-selected">
+                    <span class="cfg-dropdown-text">--</span>
+                    <i class="fas fa-chevron-down cfg-dropdown-arrow"></i>
+                </div>
+                <div class="cfg-dropdown-menu"></div>
+            </div>
+        </div>`;
+
+    // The model-picker container is always emitted so the provider-change
+    // handler can show/hide it; for `auto` capabilities it starts hidden and
+    // gets toggled by setCapabilityModelPickerVisible.
+    const modelHtml = def.needsModel ? `
+        <div id="cap-${def.id}-model-wrap">
+            <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-1.5">${t('models_model')}</label>
+            <div id="cap-${def.id}-model" class="cfg-dropdown" tabindex="0">
+                <div class="cfg-dropdown-selected">
+                    <span class="cfg-dropdown-text">--</span>
+                    <i class="fas fa-chevron-down cfg-dropdown-arrow"></i>
+                </div>
+                <div class="cfg-dropdown-menu"></div>
+            </div>
+            <div id="cap-${def.id}-model-custom-wrap" class="mt-2 hidden">
+                <input id="cap-${def.id}-model-custom" type="text"
+                       class="w-full px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-600
+                              bg-slate-50 dark:bg-white/5 text-sm text-slate-800 dark:text-slate-100
+                              focus:outline-none focus:border-primary-500 font-mono transition-colors"
+                       placeholder="custom model name">
+            </div>
+        </div>` : '';
+
+    const dimHtml = (def.id === 'embedding' && cap.current_dim) ? `
+        <p class="text-xs text-slate-400 dark:text-slate-500">
+            <i class="fas fa-cube text-[10px] mr-1"></i>${t('models_dim_label')}: <span class="font-mono">${cap.current_dim}</span>
+        </p>` : '';
+
+    // Footer layout: a "hint slot" (filled later by renderCapabilityHints for
+    // auto-mode cards) sits on the left while status + save stay anchored on
+    // the right. Keeping them on the same row means the save button hugs the
+    // inputs above instead of being pushed down by a separate hint line.
+    const footer = `
+        <div class="flex items-center justify-between gap-3 pt-1">
+            <div data-cap-hint="${def.id}" class="flex-1 min-w-0"></div>
+            <div class="flex items-center gap-3 flex-shrink-0">
+                <span id="cap-${def.id}-status" class="text-xs text-primary-500 opacity-0 transition-opacity duration-300"></span>
+                <button onclick="saveCapability('${def.id}')"
+                        class="px-4 py-2 rounded-lg bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium
+                               cursor-pointer transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed">
+                    ${t('save')}
+                </button>
+            </div>
+        </div>`;
+
+    body.innerHTML = providerHtml + modelHtml + dimHtml + footer;
+
+    // The body subtree is detached from `document` at this moment (the parent
+    // wrap is not yet appended), so we must scope lookups to `body` rather
+    // than calling document.getElementById, which would return null and crash
+    // initDropdown's internal querySelector.
+    const provDd = body.querySelector(`#cap-${def.id}-provider`);
+    // initDropdown's option shape is {value, label}; we strip our private
+    // _configured/_tracked fields before handing it over so the helper stays
+    // generic, then re-attach status decorations afterwards.
+    const ddOpts = providerOpts.map(o => ({ value: o.value, label: o.label }));
+
+    let pendingProvider = null;
+    if (pendingCapabilitySelection
+            && pendingCapabilitySelection.capabilityId === def.id
+            && providerOpts.some(o => o.value === pendingCapabilitySelection.providerId)) {
+        pendingProvider = pendingCapabilitySelection.providerId;
+        pendingCapabilitySelection = null;
+    }
+
+    // For auto-capable capabilities, an "auto" strategy means the user has
+    // not pinned a vendor; we honor that by selecting the empty-string
+    // sentinel rather than the resolved fallback provider name.
+    const initialProviderValue = pendingProvider
+        ? pendingProvider
+        : ((cap.strategy === 'auto' && capabilitySupportsAuto(def.id))
+            ? ''
+            : (cap.current_provider || (ddOpts[0] && ddOpts[0].value) || ''));
+    initDropdown(
+        provDd,
+        ddOpts,
+        initialProviderValue,
+        (value) => onCapabilityProviderChange(def, value, body)
+    );
+    decorateCapabilityProviderDropdown(def, provDd, providerOpts);
+
+    if (def.needsModel) {
+        rebuildCapabilityModelDropdown(def, initialProviderValue, cap.current_model || '', body);
+        // Hide the model picker entirely while the capability is in `auto`
+        // mode — there is nothing useful to pin, and the fallback hint
+        // below explains what'll actually run.
+        setCapabilityModelPickerVisible(def, initialProviderValue !== '' || !capabilitySupportsAuto(def.id), body);
+    }
+
+    // Inject auto/router-pending hint banners before the action footer.
+    renderCapabilityHints(def, cap, body, initialProviderValue);
+}
+
+// Toggle visibility of the model picker. Used both at first render and
+// whenever the provider dropdown swings between an explicit vendor and the
+// "auto" sentinel. We toggle the wrapper rather than re-rendering so the
+// existing dropdown state survives a round-trip back to a real vendor.
+function setCapabilityModelPickerVisible(def, visible, scope) {
+    const root = scope || document;
+    const wrap = root.querySelector(`#cap-${def.id}-model-wrap`);
+    if (!wrap) return;
+    wrap.classList.toggle('hidden', !visible);
+}
+
+function renderCapabilityHints(def, cap, body, currentProvider) {
+    // Capabilities that can be in "auto" mode show a fallback hint right
+    // under the inputs so users always know what'd actually be hit. The
+    // image card additionally surfaces a "router pending" warning until the
+    // standalone dispatcher lands.
+    // The hint slot is co-located with the save button in the footer row
+    // (see renderCapabilityBody) so the save button stays close to the
+    // inputs above. We just rewrite the slot's innerHTML — emptying it
+    // when the card leaves auto mode, or rendering a one-line hint when
+    // it's in auto mode.
+    const slot = body.querySelector(`[data-cap-hint="${def.id}"]`);
+    if (!slot) return;
+    slot.innerHTML = '';
+
+    if (currentProvider !== '' || !capabilitySupportsAuto(def.id)) return;
+
+    // The hint mirrors what the runtime would actually pick when in auto
+    // mode. fallback_provider/model are pre-computed on the backend (see
+    // _predict_vision_auto, _predict_image_auto) so we can trust them
+    // here without re-implementing the provider chain.
+    const fbProv = cap.fallback_provider || '';
+    const fbModel = cap.fallback_model || '';
+    if (!fbProv && !fbModel) return;
+    // Show the vendor's display label (e.g. "LinkAI") instead of the raw
+    // id ("linkai") when we know it. Falls back to the id when the
+    // provider isn't in our vendor table (rare).
+    const provMeta = modelsState.providers.find(p => p.id === fbProv);
+    const fbProvLabel = (provMeta && provMeta.label) || fbProv;
+    const fbText = fbModel ? `${fbProvLabel} / ${fbModel}` : fbProvLabel;
+    slot.innerHTML = `
+        <p class="flex items-center gap-1.5 text-xs text-slate-400 dark:text-slate-500 min-w-0">
+            <i class="fas fa-circle-info text-[10px] flex-shrink-0"></i>
+            <span class="flex-shrink-0">${t('models_auto_using')}</span>
+            <span class="font-mono text-slate-500 dark:text-slate-400 truncate">${escapeHtml(fbText)}</span>
+        </p>`;
+}
+
+function buildCapabilityProviderOptions(def, cap) {
+    // Show ALL vendors in capability dropdowns so users can see at a glance
+    // who's configured (green check) and who isn't (gray dot, click to set
+    // up). The list order puts configured vendors first; clicking an
+    // unconfigured row opens the vendor modal in-place. ASR/TTS engines that
+    // aren't tracked by PROVIDER_MODELS (azure/baidu/google etc.) are treated
+    // as "always available" — no credential gate.
+    const knownProviderMap = {};
+    modelsState.providers.forEach(p => { knownProviderMap[p.id] = p; });
+
+    const explicitList = cap.providers && cap.providers.length ? cap.providers : null;
+    let providerIds = explicitList ? explicitList.slice() : modelsState.providers.map(p => p.id);
+    if (cap.current_provider && !providerIds.includes(cap.current_provider)) {
+        providerIds = [cap.current_provider, ...providerIds];
+    }
+
+    const opts = providerIds.map(pid => {
+        const meta = knownProviderMap[pid];
+        const tracked = !!meta;
+        const configured = !tracked || !!meta.configured;
+        return {
+            value: pid,
+            label: (meta && meta.label) || pid,
+            _tracked: tracked,
+            _configured: configured,
+        };
+    });
+
+    opts.sort((a, b) => {
+        if (a._configured === b._configured) return 0;
+        return a._configured ? -1 : 1;
+    });
+
+    // Capabilities with a fallback ("auto") strategy expose it as a sentinel
+    // option pinned to the top of the list. We use empty-string as the auto
+    // value so the existing save handler propagates it untouched to the
+    // backend, which interprets "" as "fall back to the main model".
+    if (cap.strategy === 'auto' || cap.strategy === 'specified') {
+        if (capabilitySupportsAuto(def.id)) {
+            opts.unshift({
+                value: '',
+                label: t('models_strategy_auto'),
+                _tracked: false,
+                _configured: true,
+                _isAuto: true,
+            });
+        }
+    }
+    return opts;
+}
+
+function capabilitySupportsAuto(capId) {
+    return capId === 'image' || capId === 'vision' || capId === 'embedding';
+}
+
+// After initDropdown renders the capability provider menu, decorate each
+// row with the right-aligned configuration cue:
+//   - configured rows: nothing extra — the .active marker (a brand-green ✓)
+//     already comes from initDropdown's selected-state CSS for the row the
+//     user currently picked. Other configured rows show no chrome, mirroring
+//     a plain "switch to this" selector.
+//   - unconfigured rows: a subdued gear icon hints at "click to configure".
+//     The row's whole click handler is swapped to launch the vendor modal
+//     in place rather than selecting an unusable value.
+function decorateCapabilityProviderDropdown(def, ddEl, opts) {
+    if (!ddEl) return;
+    const menu = ddEl.querySelector('.cfg-dropdown-menu');
+    if (!menu) return;
+
+    const optByValue = {};
+    opts.forEach(o => { optByValue[o.value] = o; });
+
+    menu.querySelectorAll('.cfg-dropdown-item').forEach(item => {
+        const value = item.dataset.value;
+        const opt = optByValue[value];
+        if (!opt) return;
+        item.classList.add('cap-provider-item');
+        if (!opt._configured) item.classList.add('cap-provider-unconfigured');
+
+        // Wrap the label so the trailing affordance lines up via flex:auto.
+        const labelText = item.textContent;
+        item.textContent = '';
+        const labelEl = document.createElement('span');
+        labelEl.className = 'cap-provider-label';
+        labelEl.textContent = labelText;
+        item.appendChild(labelEl);
+
+        if (!opt._configured) {
+            // Trailing gear icon as the "configure this vendor" affordance.
+            const gear = document.createElement('i');
+            gear.className = 'fas fa-gear cap-provider-gear';
+            item.appendChild(gear);
+        }
+
+        if (!opt._configured && opt._tracked) {
+            // Hijack the click: open the vendor modal instead of selecting
+            // an unusable value, and remember which capability the user was
+            // configuring so the post-save reload can preselect the vendor.
+            const newItem = item.cloneNode(true);
+            item.replaceWith(newItem);
+            newItem.addEventListener('click', (e) => {
+                e.stopPropagation();
+                ddEl.classList.remove('open');
+                openVendorModal(value, (savedProviderId) => {
+                    pendingCapabilitySelection = {
+                        capabilityId: def.id,
+                        providerId: savedProviderId || value,
+                    };
+                    loadModelsView({ preserveScroll: true });
+                });
+            });
+        }
+    });
+}
+
+// Lightweight decorator for the "add vendor" modal's provider picker:
+// every configured vendor row gets a trailing brand-green ✓ so the user can
+// see at a glance who's already set up, without having to read each row.
+// Unlike decorateCapabilityProviderDropdown we don't hijack clicks here —
+// picking an unconfigured vendor in this modal *is* the intended action.
+function decorateVendorModalPicker(ddEl, opts) {
+    if (!ddEl) return;
+    const menu = ddEl.querySelector('.cfg-dropdown-menu');
+    if (!menu) return;
+
+    const optByValue = {};
+    opts.forEach(o => { optByValue[o.value] = o; });
+
+    menu.querySelectorAll('.cfg-dropdown-item').forEach(item => {
+        const opt = optByValue[item.dataset.value];
+        if (!opt) return;
+        // Tag the row so the global active-row ✓ rule is suppressed in CSS
+        // (otherwise configured AND selected rows would render two checks).
+        item.classList.add('vendor-picker-item');
+        if (!opt._configured) return;
+        const check = document.createElement('i');
+        check.className = 'fas fa-check vendor-picker-configured-mark';
+        item.appendChild(check);
+    });
+}
+
+function rebuildCapabilityModelDropdown(def, providerId, selectedModel, scope) {
+    // `scope` lets the caller (renderCapabilityBody) target a still-detached
+    // subtree. After the card is mounted, callers may pass `document` instead.
+    const root = scope || document;
+    const el = root.querySelector(`#cap-${def.id}-model`);
+    if (!el) return;
+
+    // Prefer the capability-scoped model list when the backend provides one
+    // (vision / image). It reflects the models the runtime can actually
+    // dispatch to for this capability, instead of the vendor's full chat-
+    // model catalog. Fall back to the generic provider.models for chat /
+    // embedding / tts where any vendor model is fair game.
+    //
+    // Entries may be plain strings or {value, hint} objects (image catalog
+    // uses the latter to surface brand aliases like "Nano Banana 2" next to
+    // the technical Gemini model id). We normalize to {value, label, hint}
+    // before handing off to initDropdown.
+    const cap = modelsState.capabilities[def.id] || {};
+    const capModelMap = cap.provider_models || {};
+    let rawList;
+    if (capModelMap[providerId]) {
+        rawList = capModelMap[providerId].slice();
+    } else {
+        const provider = modelsState.providers.find(p => p.id === providerId);
+        rawList = (provider && provider.models) ? provider.models.slice() : [];
+    }
+    const modelValues = [];
+    const opts = rawList.map(entry => {
+        if (typeof entry === 'string') {
+            modelValues.push(entry);
+            return { value: entry, label: entry };
+        }
+        modelValues.push(entry.value);
+        return { value: entry.value, label: entry.label || entry.value, hint: entry.hint || '' };
+    });
+    opts.push({ value: '__custom__', label: currentLang === 'zh' ? '自定义...' : 'Custom...' });
+
+    let initialValue = selectedModel || '';
+    if (initialValue && !modelValues.includes(initialValue)) {
+        initialValue = '__custom__';
+    }
+    if (!initialValue && opts.length) initialValue = opts[0].value;
+
+    initDropdown(el, opts, initialValue, (value) => {
+        const customWrap = document.getElementById(`cap-${def.id}-model-custom-wrap`);
+        if (!customWrap) return;
+        if (value === '__custom__') {
+            customWrap.classList.remove('hidden');
+            const input = document.getElementById(`cap-${def.id}-model-custom`);
+            if (input && !input.value) input.value = selectedModel || '';
+        } else {
+            customWrap.classList.add('hidden');
+        }
+    });
+
+    const customWrap = root.querySelector(`#cap-${def.id}-model-custom-wrap`);
+    if (customWrap) {
+        if (initialValue === '__custom__') {
+            customWrap.classList.remove('hidden');
+            const input = root.querySelector(`#cap-${def.id}-model-custom`);
+            if (input) input.value = selectedModel || '';
+        } else {
+            customWrap.classList.add('hidden');
+        }
+    }
+}
+
+function onCapabilityProviderChange(def, providerId, scope) {
+    if (def.needsModel) {
+        // For capabilities that support `auto`, switching to the empty
+        // sentinel hides the model picker entirely so the card reads as
+        // "we'll figure it out"; switching back to a real vendor re-runs
+        // the rebuild against the capability-scoped model list.
+        const isAuto = providerId === '' && capabilitySupportsAuto(def.id);
+        if (!isAuto) {
+            rebuildCapabilityModelDropdown(def, providerId, '', scope);
+        }
+        setCapabilityModelPickerVisible(def, !isAuto, scope);
+    }
+    // Refresh the auto-hint so it disappears once the user pins a vendor
+    // and reappears when they swing back to "auto". renderCapabilityHints
+    // now writes directly into the footer's hint slot, so we just call it
+    // again — no need to clean up stale DOM nodes.
+    const body = scope || document.querySelector(`[data-cap-body="${def.id}"]`);
+    if (body) {
+        const cap = modelsState.capabilities[def.id] || {};
+        renderCapabilityHints(def, cap, body, providerId);
+    }
+}
+
+function getCapabilityModelValue(def) {
+    if (!def.needsModel) return '';
+    const dd = document.getElementById(`cap-${def.id}-model`);
+    if (!dd) return '';
+    const v = getDropdownValue(dd);
+    if (v === '__custom__') {
+        const input = document.getElementById(`cap-${def.id}-model-custom`);
+        return input ? input.value.trim() : '';
+    }
+    return v || '';
+}
+
+function saveCapability(capId) {
+    const def = MODELS_CAPABILITY_DEFS.find(d => d.id === capId);
+    if (!def || !def.editable) return;
+    const provDd = document.getElementById(`cap-${capId}-provider`);
+    const provider = provDd ? getDropdownValue(provDd) : '';
+    // When the user is in auto mode (provider == ""), the model picker is
+    // hidden and any value left in it is stale; persist an empty model so
+    // the backend treats this as "fall back to the runtime chain".
+    const isAuto = provider === '' && capabilitySupportsAuto(capId);
+    const model = isAuto ? '' : getCapabilityModelValue(def);
+
+    fetch('/api/models', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'set_capability', capability: capId, provider_id: provider, model: model }),
+    }).then(r => r.json()).then(data => {
+        if (data.status === 'success') {
+            // Show "Saved" first; defer the view refresh so the user can
+            // see the confirmation (loadModelsView rebuilds the card and
+            // would otherwise wipe the status span instantly).
+            showStatus(`cap-${capId}-status`, 'models_save_success', false);
+            setTimeout(() => {
+                if (data.warn_rebuild_index) alert(t('models_warn_rebuild'));
+                // Re-pull state so derived fields (e.g. image follows main) refresh.
+                loadModelsView({ preserveScroll: true });
+            }, 900);
+        } else {
+            showStatus(`cap-${capId}-status`, 'models_save_failed', true);
+        }
+    }).catch(() => showStatus(`cap-${capId}-status`, 'models_save_failed', true));
+}
+
+// ---------- Vendor credential modal ------------------------------------
+
+let vendorModalState = { providerId: '', onSaved: null };
+
+function openVendorModal(providerId, onSaved) {
+    vendorModalState = { providerId: providerId || '', onSaved: onSaved || null };
+
+    const overlay = document.getElementById('vendor-modal-overlay');
+    const titleEl = document.getElementById('vendor-modal-title');
+    const subEl = document.getElementById('vendor-modal-subtitle');
+    const pickerWrap = document.getElementById('vendor-modal-picker-wrap');
+    const baseWrap = document.getElementById('vendor-modal-base-wrap');
+    const baseInput = document.getElementById('vendor-modal-base');
+    const baseHint = document.getElementById('vendor-modal-base-hint');
+    const keyInput = document.getElementById('vendor-modal-key');
+    const clearBtn = document.getElementById('vendor-modal-clear');
+
+    // Reset any leftover status (e.g. previous "Saved" message)
+    const statusEl = document.getElementById('vendor-modal-status');
+    if (statusEl) {
+        statusEl.textContent = '';
+        statusEl.classList.add('opacity-0');
+    }
+
+    if (!providerId) {
+        // Add flow — show provider picker, default to the first unconfigured one.
+        // We render every configured vendor with a trailing green ✓ via the
+        // dropdown decorator, mirroring the visual language used by the
+        // capability provider dropdowns. The .active row already shows the
+        // currently selected vendor via its own background highlight, so we
+        // intentionally suppress the global active-row ✓ for this picker
+        // (see CSS) — otherwise configured + selected rows would show two.
+        const unconfigured = modelsState.providers.filter(p => !p.configured);
+        const defaultId = (unconfigured[0] && unconfigured[0].id) || (modelsState.providers[0] && modelsState.providers[0].id) || '';
+        pickerWrap.classList.remove('hidden');
+        const pickerEl = document.getElementById('vendor-modal-picker');
+        const pickerOpts = modelsState.providers.map(p => ({
+            value: p.id,
+            label: p.label,
+            _configured: !!p.configured,
+        }));
+        initDropdown(pickerEl, pickerOpts, defaultId, (val) => fillVendorModalForProvider(val));
+        decorateVendorModalPicker(pickerEl, pickerOpts);
+        fillVendorModalForProvider(defaultId);
+    } else {
+        pickerWrap.classList.add('hidden');
+        fillVendorModalForProvider(providerId);
+    }
+
+    overlay.classList.remove('hidden');
+
+    document.getElementById('vendor-modal-cancel').onclick = closeVendorModal;
+    document.getElementById('vendor-modal-save').onclick = saveVendorModal;
+    clearBtn.onclick = clearVendorModal;
+
+    // Once the user edits the masked value, drop the "masked sentinel" dataset
+    // so the save handler treats their input as a real new key. We compare on
+    // the next tick because keydown fires before the new char lands in .value.
+    keyInput.oninput = function () {
+        if (keyInput.dataset.masked === '1' && keyInput.value !== keyInput.dataset.maskedVal) {
+            keyInput.dataset.masked = '';
+        }
+    };
+
+    function onOverlayClick(e) {
+        if (e.target === overlay) {
+            closeVendorModal();
+            overlay.removeEventListener('click', onOverlayClick);
+        }
+    }
+    overlay.addEventListener('click', onOverlayClick);
+    keyInput.focus();
+}
+
+function fillVendorModalForProvider(providerId) {
+    const meta = modelsState.providers.find(p => p.id === providerId);
+    if (!meta) return;
+    document.getElementById('vendor-modal-title').textContent = meta.label;
+    document.getElementById('vendor-modal-subtitle').textContent = meta.id;
+
+    // ----- API Base -----
+    // Always reflect the *current effective* base as the input value so the
+    // user can see (and edit) what's in use today. Placeholder is reserved
+    // strictly for the "not yet typed anything" state and shows the official
+    // default — never mixed with the actual value.
+    const baseWrap = document.getElementById('vendor-modal-base-wrap');
+    const baseInput = document.getElementById('vendor-modal-base');
+    const baseHint = document.getElementById('vendor-modal-base-hint');
+    if (meta.api_base_field) {
+        baseWrap.classList.remove('hidden');
+        baseInput.placeholder = meta.api_base_default || meta.api_base_placeholder || '';
+        baseInput.value = meta.api_base || '';
+        if (meta.api_base_default) {
+            baseHint.classList.remove('hidden');
+            baseHint.querySelector('span').textContent = `${t('models_base_default')}: ${meta.api_base_default}`;
+        } else {
+            baseHint.classList.add('hidden');
+        }
+    } else {
+        baseWrap.classList.add('hidden');
+        baseInput.value = '';
+    }
+
+    // ----- API Key -----
+    // For configured vendors, surface the masked key as the input *value* so
+    // it shows up in the same dark text as a real entry — making "configured"
+    // visually unambiguous. The masked form (e.g. "sk-r***zRU") is also a
+    // sentinel: the save handler treats untouched masked input as "no change".
+    const keyInput = document.getElementById('vendor-modal-key');
+    if (meta.configured && meta.api_key_masked) {
+        keyInput.value = meta.api_key_masked;
+        keyInput.dataset.masked = '1';
+        keyInput.dataset.maskedVal = meta.api_key_masked;
+        keyInput.placeholder = '';
+    } else {
+        keyInput.value = '';
+        keyInput.dataset.masked = '';
+        keyInput.dataset.maskedVal = '';
+        keyInput.placeholder = 'sk-...';
+    }
+
+    const clearBtn = document.getElementById('vendor-modal-clear');
+    clearBtn.classList.toggle('hidden', !meta.configured);
+
+    vendorModalState.providerId = providerId;
+}
+
+function closeVendorModal() {
+    document.getElementById('vendor-modal-overlay').classList.add('hidden');
+}
+
+function saveVendorModal() {
+    const providerId = vendorModalState.providerId;
+    if (!providerId) return;
+    const keyInput = document.getElementById('vendor-modal-key');
+    const apiBase = document.getElementById('vendor-modal-base').value.trim();
+
+    // Treat "input still equals the masked value we surfaced on open" as "no
+    // change" — the backend uses missing/empty api_key to skip the field.
+    let apiKey = keyInput.value.trim();
+    const masked = keyInput.dataset.masked === '1';
+    const maskedVal = keyInput.dataset.maskedVal || '';
+    if (masked && apiKey === maskedVal) {
+        apiKey = '';
+    }
+
+    if (!apiKey && !masked) {
+        // First-time setup with no key entered → nudge the user.
+        keyInput.focus();
+        return;
+    }
+
+    const btn = document.getElementById('vendor-modal-save');
+    btn.disabled = true;
+    const payload = { action: 'set_provider', provider_id: providerId, api_base: apiBase };
+    if (apiKey) payload.api_key = apiKey;
+    fetch('/api/models', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+    }).then(r => r.json()).then(data => {
+        if (data.status === 'success') {
+            // Show inline confirmation in the modal footer, then close after
+            // a short delay so the user can see the "Saved" feedback.
+            showStatus('vendor-modal-status', 'models_save_success', false);
+            setTimeout(() => {
+                btn.disabled = false;
+                closeVendorModal();
+                const onSaved = vendorModalState.onSaved;
+                // If a caller provided an onSaved hook, it owns the refresh
+                // strategy (e.g. preserveScroll when launched from inside a
+                // capability dropdown). Otherwise fall back to a plain reload
+                // so the standalone "add vendor" entry still updates the grid.
+                if (onSaved) {
+                    try { onSaved(providerId); } catch (e) { /* noop */ }
+                } else {
+                    loadModelsView();
+                }
+            }, 700);
+        } else {
+            btn.disabled = false;
+            showStatus('vendor-modal-status', 'models_save_failed', true);
+        }
+    }).catch(() => {
+        btn.disabled = false;
+        showStatus('vendor-modal-status', 'models_save_failed', true);
+    });
+}
+
+function clearVendorModal() {
+    const providerId = vendorModalState.providerId;
+    if (!providerId) return;
+    showConfirmDialog({
+        title: t('models_clear_confirm_title'),
+        message: t('models_clear_confirm_msg'),
+        okText: t('models_clear_credential'),
+        cancelText: t('cancel'),
+        onConfirm: () => {
+            fetch('/api/models', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ action: 'delete_provider', provider_id: providerId }),
+            }).then(r => r.json()).then(data => {
+                if (data.status === 'success') {
+                    showStatus('vendor-modal-status', 'models_cleared', false);
+                    setTimeout(() => {
+                        closeVendorModal();
+                        loadModelsView();
+                    }, 700);
+                } else {
+                    showStatus('vendor-modal-status', 'models_clear_failed', true);
+                }
+            }).catch(() => showStatus('vendor-modal-status', 'models_clear_failed', true));
+        }
+    });
+}
+
 // =====================================================================
 // Channels View
 // =====================================================================
@@ -4283,6 +5265,7 @@ navigateTo = function(viewId) {
 
     // Lazy-load view data
     if (viewId === 'config') loadConfigView();
+    else if (viewId === 'models') loadModelsView();
     else if (viewId === 'skills') loadSkillsView();
     else if (viewId === 'memory') {
         document.getElementById('memory-panel-viewer').classList.add('hidden');
diff --git a/channel/web/static/logos/claudeAPI.svg b/channel/web/static/logos/claudeAPI.svg
new file mode 100644
index 00000000..e9a401b7
--- /dev/null
+++ b/channel/web/static/logos/claudeAPI.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251656961" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18432" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M252.8 652.8l167.893333-94.293333 2.773334-8.106667-2.773334-4.48h-8.106666l-28.16-1.706667-96-2.56-83.2-3.413333-80.64-4.266667-20.266667-4.266666L85.333333 504.746667l1.92-12.586667 17.066667-11.52 24.32 2.133333 53.973333 3.626667 81.066667 5.546667 58.666667 3.413333 87.04 9.173333h13.866666l1.92-5.546666-4.693333-3.413334-3.626667-3.413333-83.84-56.746667-90.666666-60.16-47.573334-34.56-25.813333-17.493333-13.013333-16.426667-5.546667-35.84 23.253333-25.813333 31.36 2.133333 7.893334 2.133334 31.786666 24.32 67.84 52.48L401.066667 391.466667l13.013333 10.88 5.12-3.626667 0.64-2.56-5.76-9.813333-48.213333-87.04L314.453333 210.773333l-22.826666-36.693333-5.973334-21.973333a107.861333 107.861333 0 0 1-3.626666-26.026667l26.666666-36.053333L323.413333 85.333333l35.413334 4.693334 14.933333 13.013333 21.973333 50.346667 35.626667 79.36 55.253333 107.733333 16.213334 32 8.746666 29.653333 3.2 9.173334h5.546667v-5.12l4.48-60.8 8.32-74.453334 8.106667-96 2.773333-27.093333 13.44-32.426667 26.666667-17.493333 20.693333 10.026667 17.066667 24.32-2.346667 15.786666-10.24 65.92-19.84 103.253334-13.013333 69.12h7.466666l8.746667-8.746667 34.986667-46.506667 58.666666-73.386666 26.026667-29.226667 30.293333-32.213333 19.413334-15.36h36.693333l27.093333 40.106666-12.16 41.386667-37.76 48-31.36 40.533333-45.013333 60.586667-28.16 48.426667 2.56 3.84 6.613333-0.64 101.546667-21.546667 54.826667-10.026667 65.493333-11.306666 29.653333 13.866666 3.2 14.08-11.733333 28.8-69.973333 17.28-82.133334 16.426667-122.24 29.013333-1.493333 1.066667 1.706667 2.133333 55.04 5.12 23.466666 1.28h57.6l107.306667 7.893334 28.16 18.56 16.853333 22.613333-2.773333 17.28-43.306667 21.973333-58.24-13.866666-136.106666-32.426667-46.72-11.733333h-6.4v3.84l38.826666 37.973333 71.253334 64.426667 89.173333 82.986666 4.48 20.48-11.52 16.213334-12.16-1.706667-78.506667-58.88-30.293333-26.666667-68.48-57.6h-4.48v5.973334l15.786667 23.04 83.413333 125.226666 4.266667 38.4-5.973334 12.586667-21.546666 7.466667-23.68-4.266667-48.853334-68.48-50.346666-77.226667-40.533334-69.12-4.906666 2.773334-23.893334 258.133333-11.306666 13.226667-26.026667 10.026666-21.546667-16.426666-11.52-26.666667 11.52-52.48 13.866667-68.48 11.306667-54.4 10.24-67.626667 5.973333-22.4-0.426667-1.493333-4.906666 0.64-50.986667 69.973333-77.653333 104.746667-61.44 65.706667-14.72 5.76-25.386667-13.226667 2.346667-23.466667 14.293333-20.906666 84.906667-107.946667 51.2-66.986667 33.066666-38.613333v-5.546667h-2.133333l-225.493333 146.56-40.106667 5.12-17.28-16.213333 2.133333-26.666667 8.106667-8.746666 67.84-46.72h-0.213333l0.853333 0.853333z" fill="#D97757" p-id="18433"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/custom.svg b/channel/web/static/logos/custom.svg
new file mode 100644
index 00000000..63857648
--- /dev/null
+++ b/channel/web/static/logos/custom.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="200" height="200" fill="none" stroke="#475569" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+  <!-- Horizontal slider tracks -->
+  <line x1="4" y1="7" x2="20" y2="7"/>
+  <line x1="4" y1="12" x2="20" y2="12"/>
+  <line x1="4" y1="17" x2="20" y2="17"/>
+  <!-- Knobs (filled circles) -->
+  <circle cx="9" cy="7"  r="2.2" fill="#475569" stroke="none"/>
+  <circle cx="15" cy="12" r="2.2" fill="#475569" stroke="none"/>
+  <circle cx="7" cy="17"  r="2.2" fill="#475569" stroke="none"/>
+</svg>
diff --git a/channel/web/static/logos/dashscope.svg b/channel/web/static/logos/dashscope.svg
new file mode 100644
index 00000000..a5801c86
--- /dev/null
+++ b/channel/web/static/logos/dashscope.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251621200" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17444" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1019.364785 620.816931L891.797142 397.807295 946.450846 293.15069a29.097778 29.097778 0 0 0 6.399732-36.393472l-70.184053-126.586684a30.078737 30.078737 0 0 0-24.574968-13.652427H597.4945L539.171949 14.549389a27.348852 27.348852 0 0 0-20.906122-14.549389H380.628607a29.139776 29.139776 0 0 0-24.616967 14.549389v5.545767L225.797108 243.062793H100.919352a29.182775 29.182775 0 0 0-25.513928 13.653427L3.428446 384.11187a32.766624 32.766624 0 0 0 0 29.182775L132.831012 638.096205 74.508461 740.064923a32.766624 32.766624 0 0 0 0 29.05478l66.514207 116.561105a29.905744 29.905744 0 0 0 25.513929 14.505391H427.132654l62.845361 109.222414A30.078737 30.078737 0 0 0 512.762058 1024H660.382859a29.139776 29.139776 0 0 0 24.574968-14.549389l128.463606-224.843558h114.76818a31.91366 31.91366 0 0 0 24.660965-15.444352l66.471208-117.414069a28.158818 28.158818 0 0 0 0-30.9747l0.042999 0.042999z m-161.273228 14.591387L791.57735 512.490479 518.265827 993.964261l-74.748861-122.87484h-273.268525l65.618244-119.205994h139.386147L101.856313 272.244568h143.055993L380.671605 30.121735l68.34913 119.247993-70.184053 122.87484H925.501726l-69.202094 121.936879 137.594222 241.183873H858.134555z" fill="#605BEC" p-id="17445"></path><path d="M499.962596 699.320634l174.371677-274.719464H324.694955z" fill="#605BEC" p-id="17446"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/deepseek.svg b/channel/web/static/logos/deepseek.svg
new file mode 100644
index 00000000..ae90d3db
--- /dev/null
+++ b/channel/web/static/logos/deepseek.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251541870" class="icon" viewBox="0 0 1391 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12864" xmlns:xlink="http://www.w3.org/1999/xlink" width="271.6796875" height="200"><path d="M1333.74443323 82.22042509c-13.80988113-6.90651166-19.77216769 6.25765149-27.83971486 12.94735271-2.7494075 2.15867766-5.09661597 4.96464441-7.44382443 7.55380074-20.17908001 22.01097094-43.75485659 36.47128333-74.589069 34.74465541-45.04943475-2.58915632-83.51757347 11.86958497-117.50810569 47.04629015-7.2285851-43.37779501-31.23798253-69.2740715-67.78939144-85.89149046-19.15315822-8.63156848-38.46813872-17.26470805-51.87582082-36.04080467-9.33227462-13.37940245-11.86958497-28.2701935-16.56243082-42.94417414-2.96778901-8.8483789-5.93557805-17.91199713-15.91514173-19.42338573-10.87194282-1.72662791-15.10760146 7.55380073-19.36996865 15.3228408-16.99448057 31.72344934-23.6040562 66.68491519-22.93005859 102.07685969 1.45797153 79.63383898 34.42258196 143.08073766 99.86633603 188.18516058 7.44539552 5.17831264 9.36055423 10.35819639 7.01334578 17.91042602-4.45089798 15.53808012-9.79260399 30.6456816-14.45874129 46.18376174-2.9693601 9.92771773-7.418687 12.0848243-17.85858007 7.76904006-35.90569092-15.3228408-66.92843413-37.9826719-94.36280776-65.38876592-46.53254371-45.9685224-88.61576053-96.6833077-141.08388229-136.39103645a620.44857966 620.44857966 0 0 0-37.41550843-26.11308694c-53.54746058-53.0887023 7.01334578-96.68173661 21.0416084-101.86162035 14.6472721-5.39512307 5.09818706-23.95440928-42.29845612-23.73916995s-90.74772965 16.40217963-145.99510964 37.98267191c-8.09111351 3.2364454-16.59071043 5.6103624-25.27569597 7.55380074-50.17590143-9.71247839-102.23868196-11.86958497-156.65024201-5.61193348-102.42721275 11.65434565-184.24643792 61.07455278-244.40190308 145.45465466-72.24186053 101.4295706-89.26462071 216.6721645-68.4115431 336.87626062 21.85071977 126.68012914 85.21592177 231.56295556 182.54651857 313.56914048 100.94410379 85.02739095 217.18433986 126.68012914 349.79847589 118.69584973 80.54978445-4.74940507 170.2181753-15.75489055 271.37751842-103.15776961 25.51921492 12.94892381 52.30629946 18.12880755 96.71001624 22.01254203 34.23248007 3.2364454 67.17038198-1.72662791 92.66288839-7.12175096 39.95124769-8.63156848 37.17198947-46.39900106 22.7399567-53.30394163-117.10276448-55.67942971-91.39501876-33.01959858-114.755556-51.36207439 59.50817604-71.86479892 149.17656689-146.53556459 184.24643795-388.45514546 2.77768711-19.20657529 0.43047867-31.29139958 0-46.82947971-0.21681042-9.49566798 1.88687908-13.16573423 12.54358259-14.24350198 29.32282382-3.45325582 57.80982774-11.65434565 83.9496232-26.32832626 75.85536753-42.29845616 106.47276951-111.78933809 113.70292571-195.09167222 1.07933883-12.73211339-0.21523932-25.89627652-13.40768208-32.58597776M672.59048267 831.93671913c-113.46097785-91.07137422-168.51982701-121.06819563-191.25978372-119.77361748-21.25684774 1.29457817-17.42653031 26.11308695-12.76039301 42.29845614 4.88294773 15.97012989 11.27571295 26.97561536 20.20421747 41.00387801 6.15238845 9.28042865 10.41475564 23.09188086-6.17595481 33.45007725-36.55298001 23.09188086-100.08157538-7.76904006-103.04779332-9.27885757-73.96848843-44.45713381-135.82544403-103.1577696-179.39176984-183.43732658-42.08164574-77.25992199-66.4948133-160.1302064-70.54194114-248.61085317-1.07933883-21.36525295 5.09818706-28.91905367 25.89784762-32.80435928a250.87636497 250.87636497 0 0 1 83.11223228-2.15710656c115.83646593 17.26627914 214.46006978 70.138171 297.11354374 153.8725549 47.18140388 47.69200813 82.87028441 104.66601601 119.66521225 160.34544572 39.08871926 59.12954337 81.17193611 115.45626214 134.71939669 161.63845278 18.90963927 16.18536923 33.98896113 28.48700395 48.44770242 37.55062216-43.56632578 4.96464441-116.26537349 6.04241215-165.98251663-34.09736632m54.40998899-357.16217477c0-9.49566798 7.44696661-17.04946873 16.80594974-17.04946872q3.18302835 0.05498814 5.71876762 1.07933883a16.91435498 16.91435498 0 0 1 10.84523431 15.97012989 16.83265829 16.83265829 0 0 1-16.77924123 17.04946872 16.6441275 16.6441275 0 0 1-16.59071044-17.04946872m168.95187674 88.48064679c-10.81852576 4.53259466-21.66218896 8.41790022-32.10208201 8.8483789-16.13195215 0.8640995-33.7737218-5.82560173-43.32280686-14.02669155-14.89079105-12.73368447-25.52078602-19.85543545-29.97168398-42.08321683-1.91515871-9.49566798-0.8640995-24.16964861 0.83739098-32.58597774 3.83031742-18.12880755-0.43204976-29.78158209-12.94892381-40.35658891-10.19637413-8.63313957-23.17357754-11.00705657-37.41550843-11.00705657-5.31499747 0-10.19637413-2.37234591-13.81145222-4.31578423a14.16180529 14.16180529 0 0 1-6.15081735-19.85386437c1.48310897-3.02120608 8.71326515-10.35976749 10.41318453-11.65434564 19.34011795-11.2222959 41.64959598-7.55222964 62.25915463 0.8640995 19.1264497 7.9842794 33.55848246 22.65983111 54.4115601 43.37779497 21.25684774 25.03374811 25.08716515 31.94025977 37.17198946 50.71478532 9.57736465 14.67398064 18.29062981 29.78158209 24.22620784 47.04471904 3.64021553 10.79181723-1.0526303 19.63862503-13.59621288 25.03374811" fill="#4D6BFE" p-id="12865"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/doubao.svg b/channel/web/static/logos/doubao.svg
new file mode 100644
index 00000000..d67b4933
--- /dev/null
+++ b/channel/web/static/logos/doubao.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779261485522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5381" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M958.976 439.808C804.864 336.896 642.56 321.536 642.56 321.536s8.192 235.008-10.752 306.176c-0.512 9.728-11.776 75.264-43.008 157.696-10.752 28.16-24.064 55.296-39.424 81.408-40.96 74.24-89.6 127.488-89.6 127.488 119.808-48.64 205.312-92.672 309.76-175.616 122.88-96.768 229.376-254.464 189.44-378.88z" fill="#37E1BE" p-id="5382"></path><path d="M329.728 395.776c158.208-100.864 308.736-78.848 312.32-74.752 0.512 0.512 1.024 0.512 1.024 0.512 0-14.336-6.656-60.928-13.312-106.496-11.776-60.928-22.528-124.928-23.04-133.632-170.496-139.264-356.864-78.336-448 25.6-61.44 70.144-103.424 169.984-102.4 224.256V762.88c0.512-12.8 1.536-20.48 2.048-20.48 17.92-197.12 271.36-346.624 271.36-346.624z" fill="#A569FF" p-id="5383"></path><path d="M792.064 272.384c-41.984-43.52-87.552-88.576-122.368-125.44-33.28-34.816-59.392-60.928-62.976-65.536 0.512 8.704 11.264 72.704 23.04 133.632 6.656 45.568 12.8 92.672 13.312 106.496 0 0 162.304 15.36 316.416 118.272-0.512 0-83.456-80.384-167.424-167.424zM549.888 866.816c-2.56 1.024-198.656 107.008-292.352-30.72-20.992-30.72-31.744-68.096-33.28-106.496-3.072-74.752 5.12-227.84 105.472-333.824 0 0-253.44 149.504-270.848 346.624-0.512 0.512-2.048 8.192-2.048 20.48-1.024 32.768 4.608 98.304 43.008 155.136 52.224 78.336 193.024 138.752 328.192 85.504l33.28-9.728c-1.024 0.512 47.616-52.224 88.576-126.976z" fill="#1E37FC" p-id="5384"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/gemini.svg b/channel/web/static/logos/gemini.svg
new file mode 100644
index 00000000..8b63e171
--- /dev/null
+++ b/channel/web/static/logos/gemini.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251750646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29551" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M214.101333 512c0-32.512 5.546667-63.701333 15.36-92.928L57.173333 290.218667A491.861333 491.861333 0 0 0 4.693333 512c0 79.701333 18.858667 154.88 52.394667 221.610667l172.202667-129.066667A290.56 290.56 0 0 1 214.101333 512" fill="#FBBC05" p-id="29552"></path><path d="M516.693333 216.192c72.106667 0 137.258667 25.002667 188.458667 65.962667L854.101333 136.533333C763.349333 59.178667 646.997333 11.392 516.693333 11.392c-202.325333 0-376.234667 113.28-459.52 278.826667l172.373334 128.853333c39.68-118.016 152.832-202.88 287.146666-202.88" fill="#EA4335" p-id="29553"></path><path d="M516.693333 807.808c-134.357333 0-247.509333-84.864-287.232-202.88l-172.288 128.853333c83.242667 165.546667 257.152 278.826667 459.52 278.826667 124.842667 0 244.053333-43.392 333.568-124.757333l-163.584-123.818667c-46.122667 28.458667-104.234667 43.776-170.026666 43.776" fill="#34A853" p-id="29554"></path><path d="M1005.397333 512c0-29.568-4.693333-61.44-11.648-91.008H516.650667V614.4h274.602666c-13.696 65.962667-51.072 116.650667-104.533333 149.632l163.541333 123.818667c93.994667-85.418667 155.136-212.650667 155.136-375.850667" fill="#4285F4" p-id="29555"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/linkai.svg b/channel/web/static/logos/linkai.svg
new file mode 100644
index 00000000..44628cc3
--- /dev/null
+++ b/channel/web/static/logos/linkai.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="168" viewBox="0 0 168 168"><image width="168" height="168" xlink:href="data:image/webp;base64,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"/></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/minimax.svg b/channel/web/static/logos/minimax.svg
new file mode 100644
index 00000000..79557d77
--- /dev/null
+++ b/channel/web/static/logos/minimax.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251514432" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11888" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M415.392 475.808v329.984c-22.304 111.744-170.56 82.944-171.2 1.92-0.672-101.824 0-202.976 0-304.064v-117.184c0-14.656-3.2-26.24-16-35.392-24.96-18.72-54.944 3.264-55.584 30.208-1.408 36.16-0.704 71.616-1.408 107.264 0 28.16 0 55.52 0.64 83.648-18.368 123.776-168.32 103.232-171.808 0.704V487.04c0-28.032 54.944-34.624 52.256 7.36-1.792 20.8-0.64 42.272-1.344 62.912-0.64 36.8 55.648 61.6 68.896 1.408 0.64-49.632 0.64-99.264 0.64-149.344 0-62.752 17.824-113.856 84.352-118.624 28.8-2.56 47.968 9.504 66.336 30.304 7.04 7.36 23.68 30.72 24.32 56.16 0 23.456 0.64 46.752 0.64 70.464 0 46.72-0.64 93.76-0.64 140.48 0 30.304 0.64 60.256 0.64 89.856 0 37.536 0 75.552-0.64 113.152-0.64 48.864 58.816 48.16 68.352-0.768 0-57.632 0.64-114.56 0.64-172.192 0-141.984-0.64-283.968-0.64-425.856 0-14.72-2.048-55.584 5.76-70.464 41.504-101.12 167.392-56.96 168.544 26.72 2.432 171.52 0 344.896 0.64 516.8 0 59.616-48.416 46.816-51.104 23.488 0-178.88 0-358.4 0.64-537.024-2.368-44.832-68.832-38.72-72.672-6.592-1.28 36.864-0.64 74.4-1.28 111.232v219.008h0.64l0.448 0.256h-0.064z" fill="#D4367A" p-id="11889"></path><path d="M610.016 473.184v242.336V143.648c21.632-112.512 169.824-83.264 170.464-2.176 0.704 101.12 0 202.912 0.704 304 0 38.784 0 77.728-0.64 116.544 0 15.36 3.776 26.176 16.64 36.032 24.32 18.24 54.24-3.2 55.584-30.592 1.344-35.488 0.64-70.976 0.64-107.328V376.96c18.56-123.776 168.128-103.232 171.264-0.704v310.592c0 28.16-54.304 34.848-51.872-7.296 1.472-21.44 0-267.104 0.768-288.64 1.28-36.16-55.712-61.664-68.928-0.768v148.576c0 63.68-17.856 113.92-84.96 119.36-63.264 1.504-88.704-42.24-90.752-86.432V271.328c0-38.24 0-75.552 0.64-113.088 0.64-48.864-58.784-48.864-68.896 0.704V831.36c0 14.592 2.048 55.52-5.184 70.432-41.44 101.056-168 56.864-169.152-26.752v-79.616c3.136-53.6 48.416-40.864 50.464-18.176v94.464c2.432 44.928 68.928 39.488 72.064 6.656 1.344-36.896 1.344-73.728 1.344-111.296v-293.824h-0.192v-0.064z" fill="#ED6D48" p-id="11890"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/moonshot.svg b/channel/web/static/logos/moonshot.svg
new file mode 100644
index 00000000..20d60b5c
--- /dev/null
+++ b/channel/web/static/logos/moonshot.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251592968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16416" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M117.9648 684.6464l342.30272 93.57312v75.34592l209.7152 58.5728A428.99456 428.99456 0 0 1 512 942.08c-176.128 0-327.53664-105.8816-394.0352-257.4336zM83.29216 477.42976l407.30624 112.64-9.6256 37.00736-6.0416 35.0208 383.3856 104.96a432.5376 432.5376 0 0 1-65.10592 70.32832l-688.18944-185.9584A429.4656 429.4656 0 0 1 81.92 512c0-11.63264 0.47104-23.1424 1.37216-34.54976z m57.344-182.4768l429.07648 114.21696a279.94112 279.94112 0 0 0-23.06048 35.55328 201.17504 201.17504 0 0 0-14.70464 34.93888l403.08736 110.26432a426.8032 426.8032 0 0 1-23.552 81.7152L86.54848 448.7168a427.25376 427.25376 0 0 1 54.0672-153.76384z m158.47424-156.75392l404.23424 108.31872a190.2592 190.2592 0 0 0-32.80896 24.90368c-9.13408 8.8064-19.8656 21.4016-32.1536 37.74464l285.24544 77.78304c9.216 30.45376 15.03232 61.8496 17.32608 93.5936L156.61056 269.68064a432.27136 432.27136 0 0 1 142.49984-131.4816zM512 81.92c142.90944 0 269.55776 69.71392 347.7504 176.98816L337.26464 118.90688A428.50304 428.50304 0 0 1 512 81.92z" fill="#000000" p-id="16417"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/openai.svg b/channel/web/static/logos/openai.svg
new file mode 100644
index 00000000..b7b1fc50
--- /dev/null
+++ b/channel/web/static/logos/openai.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251225589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9015" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M881.664 431.488a218.88 218.88 0 0 0-18.176-177.088A218.624 218.624 0 0 0 628.992 149.76c-40.576-45.824-100.288-71.424-162.176-71.424a219.136 219.136 0 0 0-208 150.4 215.68 215.68 0 0 0-144 104.512 218.944 218.944 0 0 0 26.688 254.912 218.752 218.752 0 0 0 19.2 177.152 217.088 217.088 0 0 0 234.624 104.512 219.136 219.136 0 0 0 162.112 72.512 219.136 219.136 0 0 0 208-150.4 215.68 215.68 0 0 0 144-104.512 219.008 219.008 0 0 0-27.712-256z m-324.288 454.4a158.08 158.08 0 0 1-103.424-37.376c1.088-1.088 4.288-2.176 5.376-3.2l171.712-99.2a28.16 28.16 0 0 0 13.824-24.512V479.488l72.576 41.6c1.024 0 1.024 1.024 1.024 2.112v200.512a160.512 160.512 0 0 1-161.088 162.112z m-347.712-148.288c-19.2-33.088-25.6-71.488-19.2-108.8 1.088 1.024 3.2 2.176 5.376 3.2l171.712 99.2a25.984 25.984 0 0 0 27.712 0l210.112-121.6v84.224c0 1.152 0 2.176-1.024 2.176L430.464 796.16c-76.8 44.8-176 18.176-220.8-58.624z m-44.736-375.424c19.2-32.64 48.896-57.856 84.224-71.488v204.8c0 9.6 5.376 19.2 13.888 24.512l210.176 121.6-72.576 41.6c-1.024 0-2.112 1.088-2.112 0L224.64 582.912a160.448 160.448 0 0 1-59.776-220.8h0.064z m597.312 138.688l-210.112-121.6 72.512-41.6c1.088 0 2.176-1.088 2.176 0l173.824 100.224a161.088 161.088 0 0 1-25.6 291.2V525.44a26.304 26.304 0 0 0-12.8-24.512z m71.488-108.8a23.232 23.232 0 0 0-5.312-3.2L656.64 289.536a26.048 26.048 0 0 0-27.712 0l-210.176 121.6V326.912c0-1.088 0-2.176 1.088-2.176l173.824-100.224a161.152 161.152 0 0 1 220.8 59.712c19.2 32 25.6 70.4 19.2 107.776z m-454.4 149.248l-72.64-41.6c-1.024 0-1.024-1.088-1.024-2.176V297.088A162.048 162.048 0 0 1 467.84 135.04a158.08 158.08 0 0 1 103.424 37.312 22.848 22.848 0 0 1-5.312 3.2L394.24 274.688a28.16 28.16 0 0 0-13.888 24.512v242.112h-1.088z m39.424-85.312l93.824-54.4 93.888 54.4v107.712l-93.888 54.4-93.824-54.4V456z" fill="#000000" p-id="9016"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/qianfan.svg b/channel/web/static/logos/qianfan.svg
new file mode 100644
index 00000000..a9356678
--- /dev/null
+++ b/channel/web/static/logos/qianfan.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251568791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14450" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M96.20121136 636.3124965c-0.1472897-113.41305959-0.29457937-226.8261192-0.29457937-340.23917879 0-14.87625845 7.65906378-26.51214381 20.4732666-34.02391789 45.51251353-26.65943349 91.02502705-53.31886698 136.83211997-79.53643141 71.1409192-40.94653321 142.42912809-81.59848704 213.71733698-122.39773055 7.36448439-4.12411126 14.58167909-8.3955122 21.50429441-13.2560719 19.44223878-13.40336159 39.03176725-16.05457598 60.09419263-3.53495252 27.39588193 16.34915535 54.93905355 32.25644163 82.48222516 48.16372793 88.0792333 50.96223197 176.30575629 101.77717426 264.38498958 152.59211653 9.86840908 5.74429781 19.88410785 11.19401627 29.60522725 17.0856038 14.13981003 8.54280189 21.50429441 21.06242535 21.50429443 37.70616007 0 147.73155685 0.29457937 295.46311371-0.1472897 443.19467057 0 15.46541722-7.2171947 28.57419943-21.7988738 36.96971163-34.7603663 20.17868721-70.55176044 38.88447758-104.57567833 59.94690293-48.90017634 30.19438599-100.00969801 56.11737105-148.76258466 86.60633642-29.01606849 18.11663161-59.50503387 34.02391789-89.11026112 50.96223197-13.10878221 7.51177407-26.07027474 15.17083783-39.03176726 22.9771913-13.84523065 8.3955122-27.83775099 8.83738127-41.97756102 0.73644843-56.41195043-32.55102101-112.82390085-65.10204201-169.38314098-97.653063-61.86166887-35.64410444-123.72333775-71.1409192-185.4377169-106.78502365-11.19401627-6.48074626-22.24074286-12.81420285-32.99289009-19.88410785-11.48859565-7.65906378-17.08560379-19.14765941-17.08560378-32.69831069-0.1472897-34.7603663 0.1472897-69.52073264 0.29457938-104.28109895 1.62018657-0.58915875 1.62018657-1.62018657-0.29457938-2.65121438z m356.58833414-225.500512c2.20934532-1.76747625 4.41869063-3.68224221 6.77532565-5.15513907 68.93157389-39.62092601 137.86314777-79.24185204 206.94201135-118.86277807 2.79850407-1.62018657 6.48074626-1.62018657 6.62803594-6.18616688 0.1472897-4.8605597-4.12411126-4.71327001-6.77532564-6.18616688-40.65195383-23.56635005-81.59848704-46.83812071-122.10315117-70.84633984-16.79102442-10.01569877-32.84560039-8.54280189-48.45830728 0.58915876-45.9543826 26.51214381-91.46689612 53.61344636-137.27398903 80.42016953-31.96186226 18.70579035-64.21830387 37.11700133-96.32745581 55.67550198-18.41121097 10.60485751-27.54317163 25.33382629-27.24859225 47.72185885 0.88373813 89.55213018 0.58915875 179.10426036 0.14728969 268.65639053-0.1472897 20.17868721 9.27925033 33.58204881 25.33382629 43.15587853 31.3727035 18.70579035 63.18727606 37.11700133 95.14913832 54.93905355 10.89943689 6.03887719 21.06242535 13.99252034 35.79139414 18.41121096V505.51925374c6.48074626 19.58952848 18.55850066 34.02391789 36.67513226 44.6287754 27.83775099 16.20186565 63.18727606 12.51962347 86.31175705-10.45756784 26.95401286-26.65943349 28.72148912-62.89269668 12.81420282-90.14128893-16.34915535-28.42690974-43.59774757-37.55887038-74.38129233-38.73718787z m82.48222517 429.64401928c14.28709972-3.82953187 25.92298506-13.99252034 38.88447758-21.35700473 40.94653321-23.27177067 81.30390766-47.72185885 122.54502023-70.55176046 26.95401286-15.02354815 52.87699792-31.66728287 80.71474891-45.21793415 16.79102442-8.10093283 29.60522723-22.53532223 29.60522726-43.4504579 0.1472897-92.939793 0.29457937-185.73229631 0.14728969-278.6720893 0-11.19401627-5.15513907-13.99252034-13.84523067-7.06990501-26.51214381 20.76784598-57.29568854 34.46578693-86.16446735 51.25681135-54.49718448 31.81457257-109.14165865 63.33456576-163.78613282 95.00184862-8.54280189 4.8605597-11.78317502 10.45756784-11.63588535 20.47326662 0.29457937 96.18016613 0.1472897 192.50762194 0.1472897 288.68778806-0.29457937 3.5349525-1.47289687 7.65906378 3.38766282 10.8994369z" fill="#066AF3" p-id="14451"></path><path d="M96.20121136 636.3124965c1.91476594 1.03102783 1.91476594 2.06205563 0 3.09308345v-3.09308345z" fill="#4372E0" p-id="14452"></path><path d="M391.3697457 505.37196405c-5.44971845-44.33419602 13.84523065-74.08671296 61.4197998-94.55997955 30.93083443 1.17831749 58.03213699 10.31027814 74.38129233 38.5898982 15.75999659 27.39588193 14.13981003 63.48185543-12.81420282 90.14128893-23.27177067 22.97719129-58.47400606 26.65943349-86.31175705 10.45756783-18.11663161-10.60485751-30.34167568-25.03924691-36.67513226-44.62877541z" fill="#002A9A" p-id="14453"></path></svg>
\ No newline at end of file
diff --git a/channel/web/static/logos/zhipu.svg b/channel/web/static/logos/zhipu.svg
new file mode 100644
index 00000000..e4b55463
--- /dev/null
+++ b/channel/web/static/logos/zhipu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779251419020" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10062" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M520.063496 0v77.563152c0 269.231173-144.758953 414.054122-434.212862 434.340854L86.106618 511.968002H76.827198V255.984001l443.236298-255.984001z" fill="#5B55F6" p-id="10063"></path><path d="M520.063496 1023.936004v-77.563152c0-269.231173-144.758953-414.054122-434.212862-434.340854L86.042622 511.968002H76.827198v255.984001l443.236298 255.984001z" fill="#376AF3" p-id="10064"></path><path d="M520.063496 0v77.563152c0 269.231173 144.758953 414.054122 434.276858 434.340854L954.08437 511.968002h9.215424V255.984001L520.063496 0z" fill="#5B55F6" p-id="10065"></path><path d="M520.063496 1023.936004v-77.563152c0-269.231173 144.758953-414.054122 434.276858-434.340854L954.08437 511.968002h9.27942v255.984001l-443.236298 255.984001z" fill="#376AF3" p-id="10066"></path></svg>
\ No newline at end of file
diff --git a/channel/web/web_channel.py b/channel/web/web_channel.py
index 0b5a6a70..e58c8751 100644
--- a/channel/web/web_channel.py
+++ b/channel/web/web_channel.py
@@ -9,7 +9,7 @@ import threading
 import time
 import uuid
 from queue import Queue, Empty
-from typing import Tuple
+from typing import List, Tuple
 
 import web
 
@@ -750,6 +750,7 @@ class WebChannel(ChatChannel):
             '/stream', 'StreamHandler',
             '/chat', 'ChatHandler',
             '/config', 'ConfigHandler',
+            '/api/models', 'ModelsHandler',
             '/api/channels', 'ChannelsHandler',
             '/api/weixin/qrlogin', 'WeixinQrHandler',
             '/api/feishu/register', 'FeishuRegisterHandler',
@@ -1212,6 +1213,744 @@ class ConfigHandler:
             return json.dumps({"status": "error", "message": str(e)})
 
 
+class ModelsHandler:
+    """API for the unified Models console.
+
+    Layered model:
+      Layer 1 (providers): vendor credentials shared across capabilities.
+                            Stored as flat *_api_key / *_api_base fields in
+                            config.json — the same fields ConfigHandler
+                            already manages.
+      Layer 2 (capabilities): which provider/model is used by chat / vision /
+                            asr / tts / embedding / image / search.
+
+    GET  /api/models           -> overview (providers + capabilities)
+    POST /api/models/provider  -> upsert a vendor credential
+    DELETE /api/models/provider -> clear a vendor credential
+    POST /api/models/capability -> set provider/model for a capability
+    """
+
+    # Capability -> editable flag, current-value resolver, and supported provider
+    # ids drawn from ConfigHandler.PROVIDER_MODELS where applicable.
+    _ASR_PROVIDERS = ["openai", "linkai", "baidu", "ali", "xunfei", "azure", "google"]
+    _TTS_PROVIDERS = ["openai", "linkai", "minimax", "baidu", "ali", "xunfei", "azure", "google", "elevenlabs", "edge", "pytts"]
+    _EMBEDDING_PROVIDERS = ["openai", "linkai", "dashscope", "doubao", "zhipu"]
+
+    # Capability-scoped model catalogs. The chat dropdown can reuse the
+    # provider's generic model list, but vision and image generation are
+    # served by a narrower subset that the runtime actually dispatches to —
+    # see agent/tools/vision/vision.py and skills/image-generation/SKILL.md.
+    # Anything not listed here intentionally hides the model dropdown so
+    # users cannot pin a chat-only model and silently get a 4xx at runtime.
+    _VISION_PROVIDER_MODELS = {
+        # OpenAI ordering matches the recommended GPT-5.4 family first, then
+        # GPT-5 and the GPT-4.1/4o backstops.
+        "openai":    [
+            const.GPT_54_MINI,
+            const.GPT_54_NANO,
+            const.GPT_54,
+            const.GPT_5,
+            const.GPT_41,
+            const.GPT_41_MINI,
+            const.GPT_4o,
+        ],
+        "doubao":    [const.DOUBAO_SEED_2_PRO],
+        "moonshot":  [const.KIMI_K2_6],
+        "dashscope": [const.QWEN36_PLUS, const.QWEN35_PLUS, const.QWEN3_MAX],
+        "claudeAPI": [const.CLAUDE_4_6_SONNET, const.CLAUDE_4_7_OPUS, const.CLAUDE_4_6_OPUS],
+        "gemini":    [const.GEMINI_31_FLASH_LITE_PRE, const.GEMINI_31_PRO_PRE, const.GEMINI_3_FLASH_PRE],
+        "qianfan":   [const.ERNIE_45_TURBO_VL],
+        # Zhipu's bot hard-codes the call to glm-5v-turbo regardless of what
+        # name is passed in (see models/zhipuai/zhipuai_bot.py::call_vision),
+        # so listing the chat models here would silently route to the same
+        # endpoint. Surface only the model the runtime can truly dispatch to.
+        "zhipu":     [const.GLM_5V_TURBO],
+        # MiniMax's vision endpoint is similarly hard-coded to MiniMax-Text-01
+        # (see models/minimax/minimax_bot.py::call_vision); the M2.x chat
+        # family is text-only.
+        "minimax":   [const.MINIMAX_TEXT_01],
+        # LinkAI proxies the underlying vendor; surface a curated set of
+        # multimodal models. Order: gpt-4.1-mini → gpt-5.4-mini as the
+        # cross-vendor baselines, then each vendor's recommended default.
+        "linkai":    [
+            const.GPT_41_MINI,
+            const.GPT_54_MINI,
+            const.QWEN36_PLUS,
+            const.DOUBAO_SEED_2_PRO,
+            const.KIMI_K2_6,
+            const.CLAUDE_4_6_SONNET,
+            const.GEMINI_31_FLASH_LITE_PRE,
+        ],
+    }
+
+    # Image-generation catalog. Source of truth: skills/image-generation/SKILL.md.
+    # Listed verbatim (not via const.*) because these are skill-side names
+    # the script forwards directly to the vendor's image endpoint.
+    #
+    # Two shapes are accepted per model entry:
+    #   - bare string                           → the model id, no hint
+    #   - {"value": ..., "hint": "..."}         → model id + dim secondary
+    #                                             label rendered on the right
+    #                                             of the dropdown row. Useful
+    #                                             for surfacing brand names
+    #                                             (e.g. "Nano Banana 2" next
+    #                                             to gemini-3.1-flash-image-preview).
+    # The skill itself maps either form to the real vendor endpoint, so the
+    # hint is purely cosmetic.
+    _IMAGE_PROVIDER_MODELS = {
+        "openai":    ["gpt-image-2", "gpt-image-1"],
+        "gemini": [
+            {"value": "gemini-3.1-flash-image-preview", "hint": "Nano Banana 2"},
+            {"value": "gemini-3-pro-image-preview",     "hint": "Nano Banana Pro"},
+            {"value": "gemini-2.5-flash-image",         "hint": "Nano Banana"},
+        ],
+        "doubao":    ["seedream-5.0-lite", "seedream-4.5"],
+        "dashscope": ["qwen-image-2.0-pro", "qwen-image-2.0"],
+        "minimax":   ["image-01"],
+        "linkai":    ["gpt-image-2", "gemini-3-pro-image-preview", "seedream-5.0-lite"],
+    }
+
+    @staticmethod
+    def _config_path() -> str:
+        return os.path.join(
+            os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))),
+            "config.json",
+        )
+
+    @classmethod
+    def _read_file_config(cls) -> dict:
+        path = cls._config_path()
+        if not os.path.exists(path):
+            return {}
+        with open(path, "r", encoding="utf-8") as f:
+            return json.load(f)
+
+    @classmethod
+    def _write_file_config(cls, data: dict) -> None:
+        with open(cls._config_path(), "w", encoding="utf-8") as f:
+            json.dump(data, f, indent=4, ensure_ascii=False)
+
+    @staticmethod
+    def _is_real_key(value: str) -> bool:
+        return bool(value) and value not in ("", "YOUR API KEY", "YOUR_API_KEY")
+
+    @classmethod
+    def _provider_overview(cls) -> List[dict]:
+        """All known providers (configured first, unconfigured after).
+        Re-uses ConfigHandler.PROVIDER_MODELS for the canonical list."""
+        local_config = conf()
+        items = []
+        for pid, p in ConfigHandler.PROVIDER_MODELS.items():
+            key_field = p.get("api_key_field")
+            base_field = p.get("api_base_key")
+            raw_key = local_config.get(key_field, "") if key_field else ""
+            raw_base = local_config.get(base_field, "") if base_field else ""
+            configured = cls._is_real_key(raw_key)
+            items.append({
+                "id": pid,
+                "label": p["label"],
+                "configured": configured,
+                "api_key_field": key_field,
+                "api_base_field": base_field,
+                "api_key_masked": ConfigHandler._mask_key(raw_key) if configured else "",
+                "api_base": raw_base or (p.get("api_base_default") or ""),
+                "api_base_default": p.get("api_base_default") or "",
+                "api_base_placeholder": p.get("api_base_placeholder") or "",
+                "models": list(p.get("models") or []),
+            })
+        items.sort(key=lambda it: (0 if it["configured"] else 1, list(ConfigHandler.PROVIDER_MODELS.keys()).index(it["id"])))
+        return items
+
+    @classmethod
+    def _chat_capability(cls, local_config: dict) -> dict:
+        """Main chat model — drives the agent. bot_type maps to a provider id."""
+        bot_type = local_config.get("bot_type") or ""
+        provider_id = "openai" if bot_type == "chatGPT" else bot_type
+        if provider_id not in ConfigHandler.PROVIDER_MODELS and local_config.get("use_linkai"):
+            provider_id = "linkai"
+        return {
+            "editable": True,
+            "current_provider": provider_id,
+            "current_model": local_config.get("model", ""),
+            "providers": list(ConfigHandler.PROVIDER_MODELS.keys()),
+            "use_linkai": bool(local_config.get("use_linkai", False)),
+        }
+
+    # Auto-fallback order for vision when no explicit model is pinned.
+    # Mirrors agent/tools/vision/vision.py::_resolve_providers — DeepSeek and
+    # other text-only chat bots are intentionally absent, since they cannot
+    # actually serve a vision request. Each entry is
+    #   (provider_id, api_key_field, default_vision_model)
+    # and lookups are case-insensitive on the api_key_field. LinkAI and
+    # OpenAI are handled separately below so use_linkai can promote LinkAI
+    # to the front of the chain.
+    _VISION_AUTO_ORDER = [
+        ("moonshot",  "moonshot_api_key",  const.KIMI_K2_6),
+        ("doubao",    "ark_api_key",       const.DOUBAO_SEED_2_PRO),
+        ("dashscope", "dashscope_api_key", const.QWEN36_PLUS),
+        ("claudeAPI", "claude_api_key",    const.CLAUDE_4_6_SONNET),
+        ("gemini",    "gemini_api_key",    const.GEMINI_31_FLASH_LITE_PRE),
+        ("qianfan",   "qianfan_api_key",   const.ERNIE_45_TURBO_VL),
+        ("zhipu",     "zhipu_ai_api_key",  const.GLM_5V_TURBO),
+        ("minimax",   "minimax_api_key",   const.MINIMAX_TEXT_01),
+    ]
+
+    @classmethod
+    def _predict_vision_auto(cls, local_config: dict) -> dict:
+        """Predict which provider vision.py will actually dispatch to when
+        no tool.vision.model is set. Mirrors the fallback order in
+        agent/tools/vision/vision.py::_resolve_providers so the UI hint
+        matches reality."""
+        chat = cls._chat_capability(local_config)
+        main_provider = chat["current_provider"]
+        main_model = chat["current_model"]
+        use_linkai_flag = bool(local_config.get("use_linkai", False))
+        linkai_configured = cls._is_real_key(local_config.get("linkai_api_key", ""))
+
+        def _try(pid: str, model_default: str):
+            # Look up the api_key for this provider via the canonical
+            # provider table so we don't hardcode field names here.
+            meta = ConfigHandler.PROVIDER_MODELS.get(pid) or {}
+            key_field = meta.get("api_key_field")
+            if not key_field:
+                return None
+            if not cls._is_real_key(local_config.get(key_field, "")):
+                return None
+            # Pick a model that the vision runtime can actually dispatch to
+            # for this provider. Using `main_model` here is unsafe — for
+            # vendors like Zhipu/MiniMax the bot hard-codes the vision model
+            # name regardless of the chat-model name, so surfacing the chat
+            # model name in the hint is misleading. Trust the curated
+            # _VISION_PROVIDER_MODELS list: prefer the main model only if
+            # it appears there; otherwise show the vendor's first vision-
+            # capable model.
+            allowed = cls._VISION_PROVIDER_MODELS.get(pid, [])
+            if pid == main_provider and main_model and main_model in allowed:
+                return {"provider": pid, "model": main_model}
+            fallback = allowed[0] if allowed else model_default
+            return {"provider": pid, "model": fallback}
+
+        # 1. use_linkai → suppress the hint entirely. LinkAI is a proxy and
+        #    we don't observe which underlying model it picks; surfacing
+        #    "LinkAI" with no model would not tell the user anything useful.
+        if use_linkai_flag and linkai_configured:
+            return {"provider": "", "model": ""}
+
+        # 2. Main bot — only when it natively supports vision. We approximate
+        #    "natively supports" by membership in _VISION_PROVIDER_MODELS,
+        #    which is the same set vision.py's _DISCOVERABLE_MODELS covers
+        #    (minus the chat-only DeepSeek family).
+        if main_provider in cls._VISION_PROVIDER_MODELS:
+            hit = _try(main_provider, main_model)
+            if hit:
+                return hit
+
+        # 3. Other discoverable providers in declared order
+        for pid, _key, default_model in cls._VISION_AUTO_ORDER:
+            hit = _try(pid, default_model)
+            if hit:
+                return hit
+
+        # 4. OpenAI raw HTTP
+        if cls._is_real_key(local_config.get("open_ai_api_key", "")):
+            return {"provider": "openai", "model": const.GPT_41_MINI}
+
+        # 5. LinkAI as last resort (only reached when use_linkai is off)
+        if linkai_configured:
+            return {"provider": "linkai", "model": const.GPT_41_MINI}
+
+        return {"provider": "", "model": ""}
+
+    @classmethod
+    def _vision_capability(cls, local_config: dict) -> dict:
+        """Vision model. tool.vision.model is the explicit override; otherwise
+        the runtime fallback chain in agent/tools/vision/vision.py decides."""
+        tool_conf = local_config.get("tool") or {}
+        if not isinstance(tool_conf, dict):
+            tool_conf = {}
+        vision_conf = tool_conf.get("vision") or {}
+        if not isinstance(vision_conf, dict):
+            vision_conf = {}
+        user_specified = (vision_conf.get("model") or "").strip()
+
+        # When the user pinned a specific model, infer which vendor card to
+        # highlight by scanning the per-provider model lists. Falls back to
+        # an empty provider so the dropdown stays on "auto" if we can't tell.
+        inferred_provider = ""
+        if user_specified:
+            for pid, models in cls._VISION_PROVIDER_MODELS.items():
+                if user_specified in models:
+                    inferred_provider = pid
+                    break
+
+        # In auto mode the hint should reflect what vision.py will actually
+        # dispatch to — surface that prediction via fallback_* so the UI
+        # shows e.g. "openai / gpt-4.1-mini" instead of the chat-model name.
+        predicted = cls._predict_vision_auto(local_config)
+
+        return {
+            "editable": True,
+            "strategy": "specified" if user_specified else "auto",
+            "user_specified_model": user_specified,
+            "current_provider": inferred_provider,
+            "current_model": user_specified,
+            "fallback_provider": predicted["provider"],
+            "fallback_model": predicted["model"],
+            "providers": list(cls._VISION_PROVIDER_MODELS.keys()),
+            "provider_models": cls._VISION_PROVIDER_MODELS,
+        }
+
+    @classmethod
+    def _asr_capability(cls, local_config: dict) -> dict:
+        provider_id = (local_config.get("voice_to_text") or "openai").strip().lower()
+        return {
+            "editable": True,
+            "current_provider": provider_id,
+            "current_model": "",
+            "providers": cls._ASR_PROVIDERS,
+        }
+
+    @classmethod
+    def _tts_capability(cls, local_config: dict) -> dict:
+        provider_id = (local_config.get("text_to_voice") or "openai").strip().lower()
+        return {
+            "editable": True,
+            "current_provider": provider_id,
+            "current_model": local_config.get("text_to_voice_model", "") or "",
+            "providers": cls._TTS_PROVIDERS,
+        }
+
+    @classmethod
+    def _embedding_capability(cls, local_config: dict) -> dict:
+        explicit = (local_config.get("embedding_provider") or "").strip().lower()
+        # When unset, the legacy auto path in agent_initializer.py picks
+        # openai -> linkai. We surface "auto" + an estimate of what it'd
+        # actually use, but don't probe the runtime here.
+        if not explicit:
+            if cls._is_real_key(local_config.get("open_ai_api_key", "")):
+                effective = "openai"
+            elif cls._is_real_key(local_config.get("linkai_api_key", "")):
+                effective = "linkai"
+            else:
+                effective = ""
+            return {
+                "editable": True,
+                "strategy": "auto",
+                "current_provider": effective,
+                "current_model": local_config.get("embedding_model", "") or "",
+                "current_dim": int(local_config.get("embedding_dimensions") or 0) or None,
+                "providers": cls._EMBEDDING_PROVIDERS,
+            }
+        return {
+            "editable": True,
+            "strategy": "specified",
+            "current_provider": explicit,
+            "current_model": local_config.get("embedding_model", "") or "",
+            "current_dim": int(local_config.get("embedding_dimensions") or 0) or None,
+            "providers": cls._EMBEDDING_PROVIDERS,
+        }
+
+    # Auto-fallback order for image generation. Mirrors the global priority
+    # used inside skills/image-generation/scripts/generate.py
+    # (`_DEFAULT_PROVIDER_ORDER`): OpenAI → Gemini → Seedream(Ark/doubao) →
+    # Qwen(dashscope) → MiniMax → LinkAI. Each entry maps the
+    # provider-card id to the script's per-provider DEFAULT_MODEL so the
+    # hint matches what the runtime would actually request.
+    _IMAGE_AUTO_ORDER = [
+        ("openai",    "gpt-image-2"),
+        ("gemini",    "gemini-3.1-flash-image-preview"),  # nano-banana-2
+        ("doubao",    "seedream-5.0-lite"),
+        ("dashscope", "qwen-image-2.0"),
+        ("minimax",   "image-01"),
+        ("linkai",    "gpt-image-2"),
+    ]
+
+    @classmethod
+    def _predict_image_auto(cls, local_config: dict) -> dict:
+        """Predict which provider/model the image-generation skill will hit
+        when no SKILL_IMAGE_GENERATION_MODEL override is set. Mirrors
+        skills/image-generation/scripts/generate.py::_build_providers so
+        the UI hint matches reality. Chat-only providers (DeepSeek etc.)
+        are absent by design — image generation never falls back to a chat
+        bot regardless of the main model.
+
+        When use_linkai is enabled the hint is suppressed entirely — LinkAI
+        proxies to whichever backend it deems appropriate and surfacing
+        "LinkAI" alone tells the user nothing actionable."""
+        use_linkai_flag = bool(local_config.get("use_linkai", False))
+        linkai_configured = cls._is_real_key(local_config.get("linkai_api_key", ""))
+        if use_linkai_flag and linkai_configured:
+            return {"provider": "", "model": ""}
+
+        for pid, default_model in cls._IMAGE_AUTO_ORDER:
+            meta = ConfigHandler.PROVIDER_MODELS.get(pid) or {}
+            key_field = meta.get("api_key_field")
+            if not key_field:
+                continue
+            if cls._is_real_key(local_config.get(key_field, "")):
+                return {"provider": pid, "model": default_model}
+        return {"provider": "", "model": ""}
+
+    @classmethod
+    def _image_capability(cls, local_config: dict) -> dict:
+        """Image generation. Source of truth: config["skill"]["image-generation"]["model"]
+        (mirrors the per-skill config schema documented in skills/image-generation).
+        The runtime resolver in skills/image-generation/scripts/generate.py
+        reads this via the SKILL_IMAGE_GENERATION_MODEL env var that the
+        agent_initializer syncs at startup; provider is inferred from the
+        model name prefix, mirroring vision.py's design.
+        """
+        skill_node = local_config.get("skill") or {}
+        if not isinstance(skill_node, dict):
+            skill_node = {}
+        img_node = skill_node.get("image-generation") or {}
+        if not isinstance(img_node, dict):
+            img_node = {}
+        explicit_model = (img_node.get("model") or "").strip()
+
+        # Infer the provider card to highlight by scanning per-provider
+        # model lists, including alias values inside {value, hint} entries.
+        inferred_provider = ""
+        if explicit_model:
+            for pid, models in cls._IMAGE_PROVIDER_MODELS.items():
+                for entry in models:
+                    val = entry if isinstance(entry, str) else (entry.get("value") or "")
+                    if val == explicit_model:
+                        inferred_provider = pid
+                        break
+                if inferred_provider:
+                    break
+
+        # In auto mode the hint should reflect what generate.py will actually
+        # dispatch to — surface that prediction via fallback_* so the UI
+        # never claims a chat-only bot (e.g. minimax/MiniMax-M2.7) "would
+        # generate the image", which is impossible.
+        predicted = cls._predict_image_auto(local_config)
+
+        return {
+            "editable": True,
+            "strategy": "specified" if explicit_model else "auto",
+            "current_provider": inferred_provider,
+            "current_model": explicit_model,
+            "fallback_provider": predicted["provider"],
+            "fallback_model": predicted["model"],
+            "providers": list(cls._IMAGE_PROVIDER_MODELS.keys()),
+            "provider_models": cls._IMAGE_PROVIDER_MODELS,
+            # The dispatcher that honors a pinned provider isn't wired up
+            # yet; advertise this so the UI can show a "saved but not active"
+            # banner until the runtime catches up.
+            "runtime_active": False,
+            "note": "router_pending",
+        }
+
+    @classmethod
+    def _search_capability(cls, local_config: dict) -> dict:
+        """Web search resolves at runtime via env vars (BOCHA -> LINKAI)."""
+        if cls._is_real_key(os.environ.get("BOCHA_API_KEY", "")):
+            current = "bocha"
+        elif cls._is_real_key(local_config.get("linkai_api_key", "")) or cls._is_real_key(os.environ.get("LINKAI_API_KEY", "")):
+            current = "linkai"
+        else:
+            current = ""
+        return {
+            "editable": False,
+            "current_provider": current,
+            "available": bool(current),
+            "note": "set_BOCHA_API_KEY_env" if not current else "",
+        }
+
+    @classmethod
+    def _capabilities(cls, local_config: dict) -> dict:
+        return {
+            "chat":      cls._chat_capability(local_config),
+            "vision":    cls._vision_capability(local_config),
+            "asr":       cls._asr_capability(local_config),
+            "tts":       cls._tts_capability(local_config),
+            "embedding": cls._embedding_capability(local_config),
+            "image":     cls._image_capability(local_config),
+            "search":    cls._search_capability(local_config),
+        }
+
+    def GET(self):
+        _require_auth()
+        web.header("Content-Type", "application/json; charset=utf-8")
+        try:
+            local_config = conf()
+            return json.dumps({
+                "status": "success",
+                "providers": self._provider_overview(),
+                "capabilities": self._capabilities(local_config),
+            }, ensure_ascii=False)
+        except Exception as e:
+            logger.error(f"[ModelsHandler] GET failed: {e}")
+            return json.dumps({"status": "error", "message": str(e)})
+
+    def POST(self):
+        _require_auth()
+        web.header("Content-Type", "application/json; charset=utf-8")
+        try:
+            data = json.loads(web.data() or b"{}")
+            action = data.get("action") or ""
+            if action == "set_provider":
+                return self._handle_set_provider(data)
+            if action == "delete_provider":
+                return self._handle_delete_provider(data)
+            if action == "set_capability":
+                return self._handle_set_capability(data)
+            return json.dumps({"status": "error", "message": f"unknown action: {action!r}"})
+        except Exception as e:
+            logger.error(f"[ModelsHandler] POST failed: {e}")
+            return json.dumps({"status": "error", "message": str(e)})
+
+    def _handle_set_provider(self, data: dict) -> str:
+        provider_id = (data.get("provider_id") or "").strip()
+        meta = ConfigHandler.PROVIDER_MODELS.get(provider_id)
+        if not meta:
+            return json.dumps({"status": "error", "message": f"unknown provider: {provider_id}"})
+
+        # api_key absent / empty / null => leave the existing key untouched
+        # (used by the "edit only base url" flow). To clear the key, callers
+        # must use action=delete_provider explicitly.
+        api_key_raw = data.get("api_key")
+        api_key = api_key_raw.strip() if isinstance(api_key_raw, str) else ""
+
+        # api_base presence is significant: an explicit "" means "reset to
+        # default", whereas a missing key means "no change".
+        api_base_present = "api_base" in data
+        api_base = (data.get("api_base") or "").strip() if api_base_present else None
+
+        applied = {}
+        local_config = conf()
+        file_cfg = self._read_file_config()
+
+        key_field = meta.get("api_key_field")
+        if key_field and api_key:
+            local_config[key_field] = api_key
+            file_cfg[key_field] = api_key
+            applied[key_field] = True
+        base_field = meta.get("api_base_key")
+        if base_field and api_base_present:
+            local_config[base_field] = api_base
+            file_cfg[base_field] = api_base
+            applied[base_field] = True
+
+        if not applied:
+            # Nothing actually changed (e.g. user opened the modal and hit
+            # save without editing). Treat as a successful no-op so the
+            # frontend can show "Saved" instead of surfacing an error.
+            return json.dumps({"status": "success", "provider": provider_id, "noop": True})
+
+        self._write_file_config(file_cfg)
+        logger.info(f"[ModelsHandler] provider {provider_id} updated: {sorted(applied.keys())}")
+
+        # Vendor credentials affect bot routing for any capability that uses
+        # them; safest to reset Bridge so the next request rebuilds bots.
+        self._reset_bridge()
+        return json.dumps({"status": "success", "provider": provider_id})
+
+    def _handle_delete_provider(self, data: dict) -> str:
+        provider_id = (data.get("provider_id") or "").strip()
+        meta = ConfigHandler.PROVIDER_MODELS.get(provider_id)
+        if not meta:
+            return json.dumps({"status": "error", "message": f"unknown provider: {provider_id}"})
+
+        local_config = conf()
+        file_cfg = self._read_file_config()
+
+        cleared = []
+        for field_name in (meta.get("api_key_field"), meta.get("api_base_key")):
+            if not field_name:
+                continue
+            if field_name in local_config:
+                local_config[field_name] = ""
+            file_cfg[field_name] = ""
+            cleared.append(field_name)
+
+        self._write_file_config(file_cfg)
+        logger.info(f"[ModelsHandler] provider {provider_id} cleared: {cleared}")
+        self._reset_bridge()
+        return json.dumps({"status": "success", "provider": provider_id, "cleared": cleared})
+
+    def _handle_set_capability(self, data: dict) -> str:
+        capability = (data.get("capability") or "").strip()
+        provider_id = (data.get("provider_id") or "").strip()
+        model = (data.get("model") or "").strip()
+
+        if capability == "chat":
+            return self._set_chat(provider_id, model)
+        if capability == "vision":
+            return self._set_vision(provider_id, model)
+        if capability == "asr":
+            return self._set_simple("voice_to_text", provider_id)
+        if capability == "tts":
+            return self._set_tts(provider_id, model)
+        if capability == "embedding":
+            return self._set_embedding(provider_id, model)
+        if capability == "image":
+            return self._set_image(provider_id, model)
+        return json.dumps({"status": "error", "message": f"capability not editable: {capability}"})
+
+    def _set_image(self, provider_id: str, model: str) -> str:
+        # Source of truth: config["skill"]["image-generation"]["model"].
+        # provider_id is informational only (used by the UI to highlight a
+        # vendor card); the runtime resolver infers the provider from the
+        # model name prefix at request time, mirroring vision.py's design.
+        # An empty model means "switch back to auto / let the script pick".
+        local_config = conf()
+        file_cfg = self._read_file_config()
+
+        def _ensure_skill_node(cfg: dict) -> dict:
+            skill_node = cfg.get("skill") or {}
+            if not isinstance(skill_node, dict):
+                skill_node = {}
+            img_node = skill_node.get("image-generation") or {}
+            if not isinstance(img_node, dict):
+                img_node = {}
+            skill_node["image-generation"] = img_node
+            cfg["skill"] = skill_node
+            return img_node
+
+        _ensure_skill_node(local_config)["model"] = model or ""
+        _ensure_skill_node(file_cfg)["model"] = model or ""
+
+        self._write_file_config(file_cfg)
+
+        # The skill subprocess (skills/image-generation/scripts/generate.py)
+        # reads SKILL_IMAGE_GENERATION_MODEL from its environment, which is
+        # only synced from config["skill"] at startup. Update os.environ live
+        # so changes take effect on the next call without a restart. An empty
+        # model means "clear the override" → drop the env var entirely.
+        env_key = "SKILL_IMAGE_GENERATION_MODEL"
+        if model:
+            os.environ[env_key] = model
+        else:
+            os.environ.pop(env_key, None)
+
+        logger.info(f"[ModelsHandler] image updated: provider_hint={provider_id!r} model={model!r}")
+        return json.dumps({
+            "status": "success",
+            "provider": provider_id,
+            "model": model,
+            "router_pending": True,
+        })
+
+    def _set_chat(self, provider_id: str, model: str) -> str:
+        if provider_id and provider_id not in ConfigHandler.PROVIDER_MODELS:
+            return json.dumps({"status": "error", "message": f"unknown provider: {provider_id}"})
+
+        applied = {}
+        local_config = conf()
+        file_cfg = self._read_file_config()
+
+        if provider_id:
+            bot_type_value = "chatGPT" if provider_id == "openai" else provider_id
+            local_config["bot_type"] = bot_type_value
+            file_cfg["bot_type"] = bot_type_value
+            applied["bot_type"] = bot_type_value
+            use_linkai = (provider_id == "linkai")
+            local_config["use_linkai"] = use_linkai
+            file_cfg["use_linkai"] = use_linkai
+            applied["use_linkai"] = use_linkai
+        if model:
+            local_config["model"] = model
+            file_cfg["model"] = model
+            applied["model"] = model
+
+        if not applied:
+            # No-op save (nothing to write). Return success so the UI can
+            # confirm the click without showing a misleading error.
+            return json.dumps({"status": "success", "applied": {}, "noop": True})
+
+        self._write_file_config(file_cfg)
+        logger.info(f"[ModelsHandler] chat updated: {applied}")
+        self._reset_bridge()
+        return json.dumps({"status": "success", "applied": applied})
+
+    def _set_vision(self, provider_id: str, model: str) -> str:
+        # Vision uses tool.vision.model (nested). provider_id is informational
+        # only; the runtime resolver auto-routes by model name prefix.
+        local_config = conf()
+        file_cfg = self._read_file_config()
+        tool_node = file_cfg.get("tool") or {}
+        if not isinstance(tool_node, dict):
+            tool_node = {}
+        vision_node = tool_node.get("vision") or {}
+        if not isinstance(vision_node, dict):
+            vision_node = {}
+        vision_node["model"] = model
+        tool_node["vision"] = vision_node
+        file_cfg["tool"] = tool_node
+        # Mirror into in-memory config so the live agent sees the change.
+        runtime_tool = local_config.get("tool") or {}
+        if not isinstance(runtime_tool, dict):
+            runtime_tool = {}
+        runtime_vision = runtime_tool.get("vision") or {}
+        if not isinstance(runtime_vision, dict):
+            runtime_vision = {}
+        runtime_vision["model"] = model
+        runtime_tool["vision"] = runtime_vision
+        local_config["tool"] = runtime_tool
+
+        self._write_file_config(file_cfg)
+        logger.info(f"[ModelsHandler] vision model set: {model!r}")
+        return json.dumps({"status": "success", "model": model})
+
+    def _set_simple(self, key: str, value: str) -> str:
+        local_config = conf()
+        file_cfg = self._read_file_config()
+        local_config[key] = value
+        file_cfg[key] = value
+        self._write_file_config(file_cfg)
+        logger.info(f"[ModelsHandler] {key} set: {value!r}")
+        return json.dumps({"status": "success", key: value})
+
+    def _set_tts(self, provider_id: str, model: str) -> str:
+        local_config = conf()
+        file_cfg = self._read_file_config()
+        if provider_id:
+            local_config["text_to_voice"] = provider_id
+            file_cfg["text_to_voice"] = provider_id
+        if model:
+            local_config["text_to_voice_model"] = model
+            file_cfg["text_to_voice_model"] = model
+        self._write_file_config(file_cfg)
+        logger.info(f"[ModelsHandler] tts updated: provider={provider_id!r} model={model!r}")
+        return json.dumps({"status": "success", "provider": provider_id, "model": model})
+
+    def _set_embedding(self, provider_id: str, model: str) -> str:
+        # provider_id="" + model="" means "switch back to legacy auto mode".
+        local_config = conf()
+        file_cfg = self._read_file_config()
+        local_config["embedding_provider"] = provider_id
+        file_cfg["embedding_provider"] = provider_id
+        if model:
+            local_config["embedding_model"] = model
+            file_cfg["embedding_model"] = model
+        else:
+            local_config["embedding_model"] = ""
+            file_cfg["embedding_model"] = ""
+        self._write_file_config(file_cfg)
+        logger.info(f"[ModelsHandler] embedding updated: provider={provider_id!r} model={model!r}")
+        # Embedding switches don't go through Bridge bots; the agent's
+        # MemoryManager rebuilds its provider on next process restart, but
+        # the index dim may now mismatch — frontend should warn the user.
+        return json.dumps({
+            "status": "success",
+            "provider": provider_id,
+            "model": model,
+            "warn_rebuild_index": True,
+        })
+
+    @staticmethod
+    def _reset_bridge() -> None:
+        try:
+            from bridge.bridge import Bridge
+            Bridge().reset_bot()
+            logger.info("[ModelsHandler] Bridge bot routing reset")
+        except Exception as e:
+            logger.warning(f"[ModelsHandler] Bridge reset failed: {e}")
+
+
 class ChannelsHandler:
     """API for managing external channel configurations (feishu, dingtalk, etc)."""
 
@@ -2242,7 +2981,12 @@ class AssetsHandler:
                 raise web.notfound()
 
             if not os.path.exists(full_path) or not os.path.isfile(full_path):
-                logger.error(f"File not found: {full_path}")
+                # Browsers routinely probe optional asset variants (e.g. a
+                # .ttf fallback declared alongside .woff2 in @font-face);
+                # logging these as errors floods the console with harmless
+                # noise. Keep it at debug level — real misconfigurations
+                # will still surface via the network panel.
+                logger.debug(f"Static file not found: {full_path}")
                 raise web.notfound()
 
             # 设置正确的Content-Type
@@ -2257,8 +3001,12 @@ class AssetsHandler:
             with open(full_path, 'rb') as f:
                 return f.read()
 
+        except web.HTTPError:
+            # The 404 path above already logged at debug; re-raise as-is so
+            # web.py returns the original status to the client.
+            raise
         except Exception as e:
-            logger.error(f"Error serving static file: {e}", exc_info=True)  # 添加更详细的错误信息
+            logger.error(f"Error serving static file: {e}", exc_info=True)
             raise web.notfound()
 
 
diff --git a/common/const.py b/common/const.py
index abe3c2c1..12c82724 100644
--- a/common/const.py
+++ b/common/const.py
@@ -108,6 +108,7 @@ QWQ_PLUS = "qwq-plus"
 
 # MiniMax
 MINIMAX_M2_7 = "MiniMax-M2.7"  # MiniMax M2.7 - Latest
+MINIMAX_TEXT_01 = "MiniMax-Text-01"  # MiniMax 多模态 (vision)
 MINIMAX_M2_7_HIGHSPEED = "MiniMax-M2.7-highspeed"  # MiniMax M2.7 highspeed
 MINIMAX_M2_5 = "MiniMax-M2.5"  # MiniMax M2.5
 MINIMAX_M2_1 = "MiniMax-M2.1"  # MiniMax M2.1
@@ -119,6 +120,7 @@ MINIMAX_ABAB6_5 = "abab6.5-chat"  # MiniMax abab6.5
 GLM_5_1 = "glm-5.1"  # 智谱 GLM-5.1 - Agent recommended model (default)
 GLM_5_TURBO = "glm-5-turbo"  # 智谱 GLM-5-Turbo
 GLM_5 = "glm-5"  # 智谱 GLM-5
+GLM_5V_TURBO = "glm-5v-turbo"  # 智谱多模态 (vision)
 GLM_4 = "glm-4"
 GLM_4_PLUS = "glm-4-plus"
 GLM_4_flash = "glm-4-flash"