@objectivex666/dsh-settings-search 1.7.2 → 1.9.0

package/lib/client.js

@@ -30,17 +30,27 @@ window.__ModuleLoader__.load({
 
     const NS = 'settings-search-v5'
     /** Single source of truth is package.json — scripts/check.mjs asserts this matches. */
-    const PKG_VERSION = '1.7.2'
+    const PKG_VERSION = '1.9.0'
     const NPM_NAME = '@objectivex666/dsh-settings-search'
     const zh = {
       title: '设置',
       placeholder: '搜索设置…',
+      searchBtn: '搜索',
+      styleTitle: '搜索框样式',
+      styleHint: '选择搜索入口的展示方式；设置会保存在本机浏览器。',
+      styleClassic: '经典侧栏',
+      styleTop: '窗口顶栏',
+      stylePage: '弹出搜索页',
+      styleMixed: '顶栏 + 搜索页',
+      openSearch: '打开搜索',
+      warming: '正在导入各分区选项…',
       empty: '没有匹配的设置',
       pages: '设置页',
       options: '页内选项',
       guess: '猜你想找',
       page: '页面',
       option: '选项',
+      pageSearchTitle: '搜索结果',
       jumpFail: '未能自动跳转，请手动打开：{path}',
       updn: '设置搜索',
       updDesc: '设置面板顶部搜索框由本插件提供。在此检查插件的版本与更新。',
@@ -72,10 +82,35 @@ window.__ModuleLoader__.load({
       aiOpenAI: 'OpenAI 兼容',
       aiAnthropic: 'Anthropic',
       aiBaseUrl: 'Base URL',
+      aiBaseUrlHint: '仅支持 http(s) 地址；非本机地址必须使用 https，以免泄露 API Key。',
       aiModel: '模型名',
       aiApiKey: 'API Key',
+      aiDshImport: '导入 DSH 模型配置',
+      aiDshImporting: '正在导入…',
+      aiDshImportOk: '已导入 Base URL 与模型名；API Key 未改动 ✓',
+      aiDshImportFail: '导入失败：{reason}',
+      aiDshImportEmpty: '未找到 DSH 当前默认模型配置',
       aiConfigSave: '保存配置',
       aiConfigSaved: '已保存 ✓',
+      aiClear: '清除配置',
+      aiClearTitle: '清除 API 配置',
+      aiClearConfirm: '确定要清除 Base URL、模型名与 API Key 吗？此操作不可撤销。',
+      aiClearYes: '确认清除',
+      aiTest: '测试接口',
+      aiTesting: '测试中…',
+      aiTestOk: '连接成功 ✓',
+      aiTestFail: '连接失败',
+      aiTestErrAuth: '认证失败，请检查 API Key 是否正确',
+      aiTestErrForbidden: '无权限，请检查 API Key 是否被允许使用该模型',
+      aiTestErrNotFound: '接口地址或模型名不存在，请检查 Base URL 与模型名',
+      aiTestErrRateLimit: '请求过于频繁或额度不足，请稍后重试或检查套餐',
+      aiTestErrBadRequest: '请求参数错误，请检查模型名与接口类型是否匹配',
+      aiTestErrServer: '服务端错误，请稍后重试或检查服务状态',
+      aiTestErrTimeout: '连接超时，请检查网络与 Base URL 是否可达',
+      aiTestErrNetwork: '无法连接，请检查网络或 Base URL',
+      aiTestErrBadResponse: '响应格式异常，请确认接口类型与服务兼容',
+      aiTestErrHttp: '请求失败（HTTP 状态码错误），请检查地址与配置',
+      aiTestErrUnsafeUrl: '接口地址不安全：仅支持 http(s)，非本机必须为 https，且不可包含账号密码',
       logTitle: '日志',
       logDesc: '记录插件运行、搜索与 AI 请求的关键动作，便于排查问题。',
       logEmpty: '暂无日志',
@@ -85,17 +120,47 @@ window.__ModuleLoader__.load({
       logCopyFail: '复制失败，请稍后重试。',
       logClear: '清空日志',
       logCleared: '已清空',
+      logConfirmTitle: '清空日志',
+      logConfirm: '确定要清空全部日志吗？此操作不可撤销。',
+      logConfirmYes: '确认清空',
+      logConfirmCancel: '取消',
       logExportFail: '导出失败，请重试。',
+      wlTitle: '欢迎使用设置搜索',
+      wlSubtitle: '为 DSH 设置面板提供即时搜索与导航，几秒钟就能找到任何设置。',
+      wlFeature1Title: '实时搜索',
+      wlFeature1Desc: '支持经典侧栏、窗口顶栏、弹出搜索页与顶栏加搜索页混合模式；输入关键词即可过滤设置。',
+      wlFeature2Title: '拼音与意图联想',
+      wlFeature2Desc: '输入拼音首字母（如 sz）或直接描述需求（如「太亮」），也能联想设置项。',
+      wlFeature3Title: 'AI 联想（可选）',
+      wlFeature3Desc: '没有本地匹配时，可用你配置的模型理解意图并推荐设置项。',
+      wlFeature4Title: '点击即达',
+      wlFeature4Desc: '选中结果自动跳转到对应分区，并高亮闪烁目标选项。',
+      wlFeature5Title: '自带设置页',
+      wlFeature5Desc: '左侧导航的「设置搜索」页可检查更新、查看说明与导出日志。',
+      wlStart: '开始使用',
+      wlOpenPanel: '打开设置搜索页',
+      wlFeature6Title: '自动导入索引',
+      wlFeature6Desc: '首次打开时自动遍历一遍各设置分区，把分区内选项一并纳入搜索，无需逐页手动打开即可直接搜到。',
     }
     const en = {
       title: 'Settings',
       placeholder: 'Search settings…',
+      searchBtn: 'Search',
+      styleTitle: 'Search style',
+      styleHint: 'Choose how the search entry is displayed; saved in this browser.',
+      styleClassic: 'Classic sidebar',
+      styleTop: 'Top bar',
+      stylePage: 'Popup page',
+      styleMixed: 'Top bar + popup',
+      openSearch: 'Open search',
+      warming: 'Importing section options…',
       empty: 'No matching settings',
       pages: 'Settings pages',
       options: 'In-page options',
       guess: 'You may want',
       page: 'Page',
       option: 'Option',
+      pageSearchTitle: 'Search results',
       jumpFail: 'Could not navigate automatically — open it here: {path}',
       updn: 'Settings Search',
       updDesc: "The search box atop the settings panel comes from this plugin. Check its version and updates here.",
@@ -127,10 +192,35 @@ window.__ModuleLoader__.load({
       aiOpenAI: 'OpenAI-compatible',
       aiAnthropic: 'Anthropic',
       aiBaseUrl: 'Base URL',
+      aiBaseUrlHint: 'Only http(s) URLs are allowed; remote hosts must use https to avoid exposing your API key.',
       aiModel: 'Model',
       aiApiKey: 'API Key',
+      aiDshImport: 'Import DSH model config',
+      aiDshImporting: 'Importing…',
+      aiDshImportOk: 'Imported Base URL and model; API key unchanged ✓',
+      aiDshImportFail: 'Import failed: {reason}',
+      aiDshImportEmpty: 'No current DSH default model config found',
       aiConfigSave: 'Save config',
       aiConfigSaved: 'Saved ✓',
+      aiClear: 'Clear config',
+      aiClearTitle: 'Clear API config',
+      aiClearConfirm: 'Clear Base URL, model, and API key? This cannot be undone.',
+      aiClearYes: 'Clear config',
+      aiTest: 'Test API',
+      aiTesting: 'Testing…',
+      aiTestOk: 'Connection OK ✓',
+      aiTestFail: 'Connection failed',
+      aiTestErrAuth: 'Auth failed — check that your API key is correct',
+      aiTestErrForbidden: 'Forbidden — check that the API key is allowed to use this model',
+      aiTestErrNotFound: 'Not found — check the Base URL and model name',
+      aiTestErrRateLimit: 'Rate limited or quota exceeded — try again later or check your plan',
+      aiTestErrBadRequest: 'Bad request — check the model name and API type',
+      aiTestErrServer: 'Server error — try again later or check the service status',
+      aiTestErrTimeout: 'Timed out — check the network and whether the Base URL is reachable',
+      aiTestErrNetwork: 'Cannot connect — check the network or Base URL',
+      aiTestErrBadResponse: 'Unexpected response — confirm the API type matches the service',
+      aiTestErrHttp: 'Request failed (HTTP status error) — check the URL and config',
+      aiTestErrUnsafeUrl: 'Unsafe URL — only http(s) is allowed, remote hosts must use https, and embedded credentials are not permitted',
       logTitle: 'Logs',
       logDesc: 'Logs key plugin actions, searches, and AI requests to help troubleshoot.',
       logEmpty: 'No logs yet',
@@ -140,12 +230,33 @@ window.__ModuleLoader__.load({
       logCopyFail: 'Copy failed. Please try again.',
       logClear: 'Clear logs',
       logCleared: 'Cleared',
+      logConfirmTitle: 'Clear logs',
+      logConfirm: 'Clear all logs? This cannot be undone.',
+      logConfirmYes: 'Clear logs',
+      logConfirmCancel: 'Cancel',
       logExportFail: 'Export failed. Please try again.',
+      wlTitle: 'Welcome to Settings Search',
+      wlSubtitle: 'Instant search and navigation for the DSH settings panel — find any setting in seconds.',
+      wlFeature1Title: 'Instant search',
+      wlFeature1Desc: 'Choose classic sidebar, top bar, popup page, or mixed top bar plus popup search; typing filters settings.',
+      wlFeature2Title: 'Pinyin & intent hints',
+      wlFeature2Desc: 'Type pinyin initials (e.g. sz) or describe what you want to do to find settings.',
+      wlFeature3Title: 'AI hints (optional)',
+      wlFeature3Desc: 'When no local match exists, your own model can understand the intent and suggest settings.',
+      wlFeature4Title: 'Click to navigate',
+      wlFeature4Desc: 'Selecting a result jumps to its section and flashes the target option.',
+      wlFeature5Title: 'Built-in panel',
+      wlFeature5Desc: 'The Settings Search page in the sidebar checks updates, shows notes, and exports logs.',
+      wlStart: 'Get started',
+      wlOpenPanel: 'Open Settings Search panel',
+      wlFeature6Title: 'Auto-index',
+      wlFeature6Desc: 'On first open it automatically passes through every settings section, so in-page options are searchable without opening each page manually.',
     }
 
     /** Inner-row slots that represent specific options inside one page. */
     const DEEP_SLOTS = [
       { slot: 'settings.plugins.tab', parent: 'plugins' },
+      { slot: 'settings.plugin.item', parent: 'plugins' },
       { slot: 'web-ui.plugin.item', parent: 'web-ui-plugins' },
       { slot: 'settings.general.item', parent: 'general' },
     ]
@@ -189,28 +300,42 @@ window.__ModuleLoader__.load({
       PINYIN_TABLE.split(/\s+/).filter(Boolean).map((pair) => [pair[0], pair.slice(1)])
     )
     const CJK_RE = /[\u4e00-\u9fff]/
+    const ALNUM_RE = /[a-zA-Z0-9]/
 
     /**
      * Transliterate a label into full-pinyin and initial-letter keys for
      * association search. Returns null when any CJK character is outside
      * the built-in table (then only substring matching applies).
+     *
+     * Results are memoized: the same labels and intent keywords are
+     * re-transliterated on every keystroke's re-filter, and this CJK loop
+     * is the hottest code in search. Cached objects are shared — callers
+     * must treat them as read-only.
      */
+    const PINYIN_KEY_CACHE = new Map()
     const pinyinKeys = (text) => {
+      const cached = PINYIN_KEY_CACHE.get(text)
+      if (cached !== undefined) return cached
       let full = ''
       let initials = ''
       for (const ch of text) {
         if (CJK_RE.test(ch)) {
           const py = PINYIN.get(ch)
-          if (py === undefined) return null
+          if (py === undefined) {
+            PINYIN_KEY_CACHE.set(text, null)
+            return null
+          }
           full += py
           initials += py[0]
-        } else if (/[a-zA-Z0-9]/.test(ch)) {
+        } else if (ALNUM_RE.test(ch)) {
           const lower = ch.toLowerCase()
           full += lower
           initials += lower
         }
       }
-      return full === '' ? null : { full, initials }
+      const keys = full === '' ? null : { full, initials }
+      PINYIN_KEY_CACHE.set(text, keys)
+      return keys
     }
 
     /** Match one query token: raw substring, full pinyin, or initial letters. */
@@ -223,6 +348,17 @@ window.__ModuleLoader__.load({
       return null
     }
 
+    /** Cache the \b-wrapped keyword regexes used by related-keyword matching. */
+    const WORD_BOUNDARY_CACHE = new Map()
+    const wordBoundaryRegex = (kw) => {
+      let re = WORD_BOUNDARY_CACHE.get(kw)
+      if (re === undefined) {
+        re = new RegExp(`\\b${kw.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`)
+        WORD_BOUNDARY_CACHE.set(kw, re)
+      }
+      return re
+    }
+
     /** Character count of the label consumed by a full-pinyin prefix. */
     const pinyinPrefixChars = (label, pinyinLength) => {
       let consumed = 0
@@ -271,8 +407,14 @@ window.__ModuleLoader__.load({
       return { phrase, keywords: entry.slice(at + 1).split(','), keys: pinyinKeys(phrase) }
     })
 
-    /** Keywords a query token should additionally search after an intent hit. */
+    /**
+     * Keywords a query token should additionally search after an intent hit.
+     * Memoized per token — tokens repeat on every keystroke's re-filter.
+     */
+    const INTENT_KEYWORD_CACHE = new Map()
     const intentKeywords = (tok) => {
+      const cached = INTENT_KEYWORD_CACHE.get(tok)
+      if (cached !== undefined) return cached
       const hits = []
       for (const intent of INTENTS) {
         const phraseHit = intent.phrase.includes(tok) || tok.includes(intent.phrase) ||
@@ -284,6 +426,7 @@ window.__ModuleLoader__.load({
           }
         }
       }
+      INTENT_KEYWORD_CACHE.set(tok, hits)
       return hits
     }
 
@@ -318,6 +461,24 @@ window.__ModuleLoader__.load({
     const AI_BASE_URL_KEY = 'dsh-settings-search:ai-base-url'
     const AI_MODEL_KEY = 'dsh-settings-search:ai-model'
     const AI_API_KEY_KEY = 'dsh-settings-search:ai-api-key'
+    /** Session-only API key storage avoids durable browser storage exposure. */
+    const readApiKey = () => {
+      const legacy = typeof localStorage !== 'undefined' ? (localStorage.getItem(AI_API_KEY_KEY) ?? '').trim() : ''
+      if (legacy !== '') {
+        if (typeof sessionStorage !== 'undefined') sessionStorage.setItem(AI_API_KEY_KEY, legacy)
+        if (typeof localStorage !== 'undefined') localStorage.removeItem(AI_API_KEY_KEY)
+        return legacy
+      }
+      return typeof sessionStorage !== 'undefined' ? (sessionStorage.getItem(AI_API_KEY_KEY) ?? '').trim() : ''
+    }
+    const writeApiKey = (value) => {
+      const apiKey = String(value ?? '').trim()
+      if (typeof sessionStorage !== 'undefined') {
+        if (apiKey === '') sessionStorage.removeItem(AI_API_KEY_KEY)
+        else sessionStorage.setItem(AI_API_KEY_KEY, apiKey)
+      }
+      if (typeof localStorage !== 'undefined') localStorage.removeItem(AI_API_KEY_KEY)
+    }
     const aiSearchEnabled = () => {
       if (typeof localStorage === 'undefined') return false
       return localStorage.getItem(AI_STORAGE_KEY) === '1'
@@ -328,23 +489,51 @@ window.__ModuleLoader__.load({
       window.dispatchEvent(new CustomEvent(AI_TOGGLE_EVENT, { detail: enabled }))
     }
     const aiConfig = () => {
-      if (typeof localStorage === 'undefined') return { provider: 'openai', baseUrl: '', model: '', apiKey: '' }
-      const providerRaw = (localStorage.getItem(AI_PROVIDER_KEY) ?? 'openai').trim()
+      if (typeof localStorage === 'undefined' && typeof sessionStorage === 'undefined') {
+        return { provider: 'openai', baseUrl: '', model: '', apiKey: '' }
+      }
+      const providerRaw = (localStorage?.getItem(AI_PROVIDER_KEY) ?? 'openai').trim()
       return {
         provider: providerRaw === 'anthropic' ? 'anthropic' : 'openai',
-        baseUrl: (localStorage.getItem(AI_BASE_URL_KEY) ?? '').trim(),
-        model: (localStorage.getItem(AI_MODEL_KEY) ?? '').trim(),
-        apiKey: (localStorage.getItem(AI_API_KEY_KEY) ?? '').trim(),
+        baseUrl: (localStorage?.getItem(AI_BASE_URL_KEY) ?? '').trim(),
+        model: (localStorage?.getItem(AI_MODEL_KEY) ?? '').trim(),
+        apiKey: readApiKey(),
       }
     }
     const setAiConfig = (cfg) => {
+      if (typeof localStorage === 'undefined' && typeof sessionStorage === 'undefined') return
+      writeApiKey(cfg.apiKey)
       if (typeof localStorage === 'undefined') return
       localStorage.setItem(AI_PROVIDER_KEY, cfg.provider === 'anthropic' ? 'anthropic' : 'openai')
       localStorage.setItem(AI_BASE_URL_KEY, cfg.baseUrl ?? '')
       localStorage.setItem(AI_MODEL_KEY, cfg.model ?? '')
-      localStorage.setItem(AI_API_KEY_KEY, cfg.apiKey ?? '')
       window.dispatchEvent(new CustomEvent(AI_CONFIG_EVENT))
     }
+    /** First-run onboarding: remembered via localStorage so it shows once. */
+    const ONBOARD_KEY = 'dsh-settings-search:onboarded'
+    const WELCOME_EVENT = 'dsh-settings-search:welcome'
+    const SEARCH_STYLE_KEY = 'dsh-settings-search:style'
+    const SEARCH_STYLE_EVENT = 'dsh-settings-search:style-change'
+    const SEARCH_STYLES = ['sidebar', 'top', 'page', 'mixed']
+    const readSearchStyle = () => {
+      if (typeof localStorage === 'undefined') return 'sidebar'
+      const style = localStorage.getItem(SEARCH_STYLE_KEY)
+      return SEARCH_STYLES.includes(style) ? style : 'sidebar'
+    }
+    const setStoredSearchStyle = (style) => {
+      if (typeof localStorage === 'undefined' || !SEARCH_STYLES.includes(style)) return
+      localStorage.setItem(SEARCH_STYLE_KEY, style)
+      window.dispatchEvent(new CustomEvent(SEARCH_STYLE_EVENT, { detail: style }))
+    }
+    const welcomed = () => {
+      if (typeof localStorage === 'undefined') return true
+      return localStorage.getItem(ONBOARD_KEY) === '1'
+    }
+    const setWelcomed = () => {
+      if (typeof localStorage === 'undefined') return
+      localStorage.setItem(ONBOARD_KEY, '1')
+      window.dispatchEvent(new CustomEvent(WELCOME_EVENT, { detail: false }))
+    }
     const extractAiKeywords = (raw) => {
       const text = String(raw ?? '').replace(/^```(?:json)?/i, '').replace(/```$/, '').trim()
       const start = text.indexOf('{')
@@ -360,19 +549,49 @@ window.__ModuleLoader__.load({
         .slice(0, 6)
     }
     const AI_PROMPT = '你是设置搜索助手。只输出 JSON 对象，格式为 {"keywords":["..."]}。keywords 最多 6 个，每个最多 12 个字符，只能从用户提供的设置索引中选择或提取核心词，不要解释。'
+    const loopbackHost = (hostname) => {
+      const h = String(hostname || '').replace(/^\[|\]$/g, '').toLowerCase()
+      return h === 'localhost' || h === '127.0.0.1' || h === '::1' || h === '0.0.0.0'
+    }
+    /**
+     * Normalize and validate an AI service base URL. Prevents the API key
+     * from being sent to a dangerous scheme (javascript:, data:, …), to a URL
+     * with embedded credentials, or over cleartext HTTP to a non-loopback
+     * host. Returns a normalized origin+path (no trailing slash) or ''.
+     */
+    const safeBaseUrl = (baseUrl) => {
+      const value = String(baseUrl ?? '').trim()
+      if (!value) return ''
+      const candidate = /^[a-z][a-z0-9+.-]*:/i.test(value) ? value : `https://${value}`
+      let url
+      try { url = new URL(candidate) } catch { return '' }
+      if (url.protocol !== 'http:' && url.protocol !== 'https:') return ''
+      if (url.username || url.password) return ''
+      const isHttp = url.protocol === 'http:'
+      if (!url.hostname) return ''
+      if (isHttp && !loopbackHost(url.hostname)) return ''
+      const path = url.pathname === '/' ? '' : url.pathname
+      return url.origin + path.replace(/\/+$/, '')
+    }
     const chatCompletionsUrl = (baseUrl) => {
-      const trimmed = String(baseUrl).trim().replace(/\/+$/, '')
-      return /\/chat\/completions$/i.test(trimmed) ? trimmed : `${trimmed}/chat/completions`
+      // safeBaseUrl already strips trailing slashes
+      const safe = safeBaseUrl(baseUrl)
+      if (!safe) return ''
+      return /\/chat\/completions$/i.test(safe) ? safe : `${safe}/chat/completions`
     }
     const anthropicMessagesUrl = (baseUrl) => {
-      const trimmed = String(baseUrl).trim().replace(/\/+$/, '')
-      if (/\/v1\/messages$/i.test(trimmed)) return trimmed
-      return /\/v1$/i.test(trimmed) ? `${trimmed}/messages` : `${trimmed}/v1/messages`
+      // safeBaseUrl already strips trailing slashes
+      const safe = safeBaseUrl(baseUrl)
+      if (!safe) return ''
+      if (/\/v1\/messages$/i.test(safe)) return safe
+      return /\/v1$/i.test(safe) ? `${safe}/messages` : `${safe}/v1/messages`
     }
     const requestUserAi = async (query, labels, signal) => {
       const { provider, baseUrl, model, apiKey } = aiConfig()
       if (!baseUrl || !model || !apiKey) return []
       const isAnthropic = provider === 'anthropic'
+      const url = isAnthropic ? anthropicMessagesUrl(baseUrl) : chatCompletionsUrl(baseUrl)
+      if (!url) return []
       const startedAt = Date.now()
       log('info', 'AI 请求', { provider, model, query: String(query).slice(0, 50) })
       let timer
@@ -407,7 +626,7 @@ window.__ModuleLoader__.load({
               ],
               temperature: 0,
             }
-        const response = await fetch(isAnthropic ? anthropicMessagesUrl(baseUrl) : chatCompletionsUrl(baseUrl), {
+        const response = await fetch(url, {
           method: 'POST',
           headers,
           signal,
@@ -439,10 +658,96 @@ window.__ModuleLoader__.load({
       const cacheKey = query.toLowerCase()
       if (AI_CACHE.has(cacheKey)) return AI_CACHE.get(cacheKey)
       const keywords = await requestUserAi(query, labels, signal)
-      if (keywords.length > 0) AI_CACHE.set(cacheKey, keywords)
+      if (keywords.length > 0) {
+        // bound the cache so a long session cannot grow it without limit
+        if (AI_CACHE.size >= 100) AI_CACHE.clear()
+        AI_CACHE.set(cacheKey, keywords)
+      }
       return keywords
     }
 
+    /**
+     * Lightweight connectivity test for the configured model service. Sends a
+     * minimal chat request and reports whether the endpoint/auth/model work.
+     * Returns { ok, code, detail } where code is a stable error kind used to
+     * look up a localized hint in the UI.
+     */
+    const HTTP_TEST_CODES = {
+      400: 'bad-request',
+      401: 'auth',
+      403: 'forbidden',
+      404: 'not-found',
+      408: 'timeout',
+      429: 'rate-limit',
+    }
+    const testHttpCode = (status) => {
+      const code = Number(status)
+      return HTTP_TEST_CODES[code] ?? (code >= 500 && code <= 599 ? 'server' : 'http')
+    }
+    const testAiService = async (cfg) => {
+      const provider = cfg.provider === 'anthropic' ? 'anthropic' : 'openai'
+      const baseUrl = String(cfg.baseUrl ?? '').trim()
+      const model = String(cfg.model ?? '').trim()
+      const apiKey = String(cfg.apiKey ?? '').trim()
+      if (!baseUrl || !model || !apiKey) return { ok: false, code: 'need-config', detail: '' }
+      const isAnthropic = provider === 'anthropic'
+      const requestUrl = isAnthropic ? anthropicMessagesUrl(baseUrl) : chatCompletionsUrl(baseUrl)
+      if (!requestUrl) return { ok: false, code: 'unsafe-url', detail: '' }
+      const startedAt = Date.now()
+      log('info', '测试 API 服务', { provider, model })
+      let timer
+      const deadline = new Promise((_, reject) => {
+        timer = setTimeout(() => {
+          const error = new Error('AI request timed out')
+          error.name = 'AI_TIMEOUT'
+          reject(error)
+        }, 12000)
+      })
+      const work = (async () => {
+        const headers = {
+          'content-type': 'application/json',
+          ...(isAnthropic
+            ? { 'x-api-key': apiKey, 'anthropic-version': '2023-06-01', 'anthropic-dangerous-direct-browser-access': 'true' }
+            : { authorization: `Bearer ${apiKey}` }),
+        }
+        const body = isAnthropic
+          ? { model, max_tokens: 1, messages: [{ role: 'user', content: 'ping' }] }
+          : { model, messages: [{ role: 'user', content: 'ping' }], max_tokens: 1, temperature: 0 }
+        const response = await fetch(requestUrl, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(body),
+        })
+        if (!response.ok) return { ok: false, code: testHttpCode(response.status), detail: `HTTP ${response.status}` }
+        const data = await response.json().catch(() => ({}))
+        const valid = isAnthropic
+          ? (Array.isArray(data?.content) && data.content.length > 0)
+          : Boolean(data?.choices?.[0]?.message)
+        if (!valid) return { ok: false, code: 'bad-response', detail: '' }
+        return { ok: true }
+      })()
+      try {
+        const result = await Promise.race([work, deadline])
+        if (result.ok) log('info', '测试 API 成功', { duration: Date.now() - startedAt })
+        else log('error', '测试 API 失败', { code: result.code ?? 'http', detail: result.detail ?? '', duration: Date.now() - startedAt })
+        return result
+      } catch (error) {
+        if (error.name === 'AbortError') {
+          log('warn', '测试 API 取消', { duration: Date.now() - startedAt })
+          throw error
+        }
+        if (error.name === 'AI_TIMEOUT') {
+          log('error', '测试 API 超时', { duration: Date.now() - startedAt })
+          return { ok: false, code: 'timeout', detail: '' }
+        }
+        const reason = String(error?.message ?? error).slice(0, 160)
+        log('error', '测试 API 失败', { detail: reason, duration: Date.now() - startedAt })
+        return { ok: false, code: 'network', detail: reason }
+      } finally {
+        clearTimeout(timer)
+      }
+    }
+
     const CSS = `
       .sss-wrap { position: relative; display: flex; flex-direction: column; gap: 8px; }
       .sss-title { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--dsw-alias-label-primary); }
@@ -452,6 +757,10 @@ window.__ModuleLoader__.load({
       .sss-input::placeholder { color: var(--dsw-alias-label-dimmed); }
       .sss-clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 1; cursor: pointer; }
       .sss-clear:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
+      .sss-icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--dsw-alias-label-tertiary); cursor: pointer; }
+      .sss-icon-btn:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
+      .sss-icon-btn:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: -2px; }
+      .sss-warm-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; line-height: 16px; color: var(--dsw-alias-label-secondary); }
       .sss-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--dsw-alias-bg-overlay); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; box-shadow: var(--dsw-shadow-lv3); padding: 6px; max-height: 320px; overflow: auto; }
       .sss-groups { display: flex; flex-direction: column; gap: 8px; }
       .sss-group-title { font-size: 11px; color: var(--dsw-alias-label-secondary); letter-spacing: .05em; padding: 2px 6px; }
@@ -460,7 +769,7 @@ window.__ModuleLoader__.load({
       .sss-item:hover { background: var(--dsw-alias-interactive-bg-hover); }
       .sss-item.is-active { background: var(--dsw-alias-interactive-bg-hover); }
       .sss-item-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-      .sss-item-label { color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .sss-item-label { color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
       .sss-item-label mark { background: transparent; color: inherit; font-weight: 600; }
       .sss-item-path { font-size: 10px; line-height: 14px; color: var(--dsw-alias-label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       .sss-item-kind { flex-shrink: 0; font-size: 10px; color: var(--dsw-alias-label-secondary); border: 1px solid var(--dsw-alias-border-l2); border-radius: 4px; padding: 1px 5px; }
@@ -468,6 +777,25 @@ window.__ModuleLoader__.load({
       .sss-ai-note { margin: 0; padding: 6px 8px; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; }
       .sss-empty { margin: 0; padding: 10px 8px; color: var(--dsw-alias-label-secondary); font-size: 13px; }
       .sss-guide { padding: 7px 10px; border-radius: 8px; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 18px; }
+      .sss-wrap.sss-top { position: absolute; top: 20px; left: 198px; right: 152px; z-index: 950; width: auto; height: 28px; gap: 8px; }
+      .sss-top .sss-title { display: none; }
+      .sss-top .sss-box { height: 28px; padding: 0 8px; border-radius: 8px; border-color: var(--dsw-alias-border-l1); box-shadow: var(--dsw-shadow-lv2); }
+      .sss-top .sss-input { font-size: 15px; }
+      .sss-top .sss-top-trigger { height: 28px; padding: 0 8px; border-color: var(--dsw-alias-border-l1); box-shadow: var(--dsw-shadow-lv2); font-size: 15px; }
+      .sss-trigger { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; height: 32px; padding: 0 9px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-dimmed); font: inherit; font-size: 14px; line-height: 22px; cursor: pointer; text-align: left; }
+      .sss-trigger:hover { border-color: var(--dsw-alias-label-dimmed); color: var(--dsw-alias-label-secondary); }
+      .sss-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: -2px; }
+      .sss-page-overlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding: 72px 20px 32px; background: var(--dsw-alias-bg-mask, rgb(0 0 0 / 36%)); }
+      .sss-page { display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(680px, calc(100vh - 104px)); overflow: hidden; background: var(--dsw-alias-bg-layer-3); border: 1px solid var(--dsw-alias-border-l1); border-radius: 14px; box-shadow: var(--dsw-shadow-lv3); }
+      .sss-page-head { flex: none; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 10px; border-bottom: 1px solid var(--dsw-alias-border-l1); }
+      .sss-page-input { flex: 1; min-width: 0; height: 38px; padding: 0 6px; border: none; outline: none; background: transparent; font-size: 16px; line-height: 24px; color: var(--dsw-alias-label-primary); }
+      .sss-page-input::placeholder { color: var(--dsw-alias-label-dimmed); }
+      .sss-page-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--dsw-alias-label-secondary); cursor: pointer; }
+      .sss-page-close:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
+      .sss-page-results { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
+      .sss-page-results .sss-group { padding: 2px; }
+      .sss-page-results .sss-item { padding: 10px 8px; border-radius: 8px; }
+      .sss-mixed-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); font-size: 16px; line-height: 24px; }
       @keyframes sssFlashBg { 0% { background-color: var(--dsw-alias-interactive-bg-hover); } 100% { background-color: transparent; } }
       .sss-flash { animation: sssFlashBg 1.8s ease-out; border-radius: 8px; }
       .sss-vr { list-style: none; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-3); border-radius: 12px; max-width: 780px; width: 100%; box-sizing: border-box; transition: border-color .16s, background .16s; }
@@ -491,12 +819,17 @@ window.__ModuleLoader__.load({
       .sss-vr-input { border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-3); min-height: 34px; font: inherit; color: var(--dsw-alias-label-primary); border-radius: 8px; padding: 6px 12px; font-size: 13px; line-height: 1.5; width: 100%; box-sizing: border-box; }
       .sss-vr-input:focus-visible { border-color: var(--dsw-alias-brand-primary); outline: none; }
       .sss-vr-input::placeholder { color: var(--dsw-alias-label-dimmed); }
+      .sss-vr-input.sss-vr-mask { -webkit-text-security: disc; }
       .sss-vr-select { cursor: pointer; }
       .sss-vr-check { width: 16px; height: 16px; accent-color: var(--dsw-alias-brand-primary); cursor: pointer; margin: 0; }
       .sss-vr-btn { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 5px 14px; font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-secondary); background: 0 0; }
       .sss-vr-btn:hover:not(:disabled) { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-label-dimmed); }
       .sss-vr-btn:disabled { opacity: .4; cursor: default; }
       .sss-vr-btn:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
+      .sss-vr-segment { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+      .sss-vr-seg { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); background: 0 0; }
+      .sss-vr-seg:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-label-dimmed); }
+      .sss-vr-seg.is-active { color: var(--dsw-alias-bg-layer-3); background: var(--dsw-alias-label-primary); border-color: transparent; }
       .sss-vr-primary { background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-layer-3); border-color: transparent; }
       .sss-vr-primary:hover:not(:disabled) { color: var(--dsw-alias-bg-layer-3); border-color: transparent; }
       .sss-vr-badge { white-space: nowrap; background: var(--dsw-alias-bg-module-platform); color: var(--dsw-alias-label-secondary); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 500; line-height: 17px; }
@@ -514,6 +847,40 @@ window.__ModuleLoader__.load({
       .sss-vr-link { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 5px 14px; font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-secondary); background: 0 0; text-decoration: none; display: inline-flex; align-items: center; }
       .sss-vr-link:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-label-dimmed); }
       .sss-vr-notes { box-sizing: border-box; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-3); color: var(--dsw-alias-label-primary); padding: 10px 12px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; margin-top: 8px; }
+      .sss-wl-overlay { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--dsw-alias-bg-mask, rgb(0 0 0 / 36%)); box-sizing: border-box; }
+      .sss-wl { width: 100%; max-width: 520px; max-height: min(88vh, 720px); overflow: auto; box-sizing: border-box; background: var(--dsw-alias-bg-layer-3); border: 1px solid var(--dsw-alias-border-l2); border-radius: 16px; box-shadow: var(--dsw-shadow-lv3); padding: 22px 24px 20px; }
+      .sss-wl-header { display: flex; align-items: flex-start; gap: 12px; }
+      .sss-wl-headText { flex: 1; min-width: 0; }
+      .sss-wl-title { margin: 0; color: var(--dsw-alias-label-primary); font-size: 19px; font-weight: 650; line-height: 1.4; }
+      .sss-wl-subtitle { margin: 6px 0 0; color: var(--dsw-alias-label-secondary); font-size: 13px; line-height: 1.6; }
+      .sss-wl-close { flex: none; appearance: none; cursor: pointer; width: 28px; height: 28px; padding: 0; border: none; border-radius: 7px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 15px; line-height: 1; }
+      .sss-wl-close:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
+      .sss-wl-features { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+      .sss-wl-feature { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; background: var(--dsw-alias-bg-layer-1); }
+      .sss-wl-feature-icon { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); font-size: 15px; line-height: 1; }
+      .sss-wl-feature-body { flex: 1; min-width: 0; }
+      .sss-wl-feature-title { color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 600; line-height: 1.5; }
+      .sss-wl-feature-desc { margin: 2px 0 0; color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 1.6; }
+      .sss-wl-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
+      .sss-wl-btn { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--dsw-alias-border-l2); border-radius: 9px; padding: 7px 16px; font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-secondary); background: 0 0; }
+      .sss-wl-btn:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-label-dimmed); }
+      .sss-wl-primary { background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-layer-3); border-color: transparent; }
+      .sss-wl-primary:hover { color: var(--dsw-alias-bg-layer-3); border-color: transparent; }
+      .sss-wl-skip { margin-left: auto; border: none; background: transparent; color: var(--dsw-alias-label-tertiary); padding: 7px 4px; }
+      .sss-wl-skip:hover { color: var(--dsw-alias-label-primary); border-color: transparent; }
+      .sss-cf-overlay { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--dsw-alias-bg-mask, rgb(0 0 0 / 36%)); box-sizing: border-box; }
+      .sss-cf { width: 100%; max-width: 400px; box-sizing: border-box; background: var(--dsw-alias-bg-layer-3); border: 1px solid var(--dsw-alias-border-l2); border-radius: 14px; box-shadow: var(--dsw-shadow-lv3); padding: 20px 22px 18px; }
+      .sss-cf-header { display: flex; align-items: flex-start; gap: 12px; }
+      .sss-cf-headText { flex: 1; min-width: 0; }
+      .sss-cf-title { margin: 0; color: var(--dsw-alias-label-primary); font-size: 16px; font-weight: 650; line-height: 1.4; }
+      .sss-cf-desc { margin: 8px 0 0; color: var(--dsw-alias-label-secondary); font-size: 13px; line-height: 1.6; }
+      .sss-cf-close { flex: none; appearance: none; cursor: pointer; width: 28px; height: 28px; padding: 0; border: none; border-radius: 7px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 15px; line-height: 1; }
+      .sss-cf-close:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
+      .sss-cf-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
+      .sss-cf-btn { appearance: none; font: inherit; cursor: pointer; border: 1px solid var(--dsw-alias-border-l2); border-radius: 9px; padding: 7px 16px; font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-secondary); background: 0 0; }
+      .sss-cf-btn:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-label-dimmed); }
+      .sss-cf-danger { background: #c0392b; color: #fff; border-color: transparent; }
+      .sss-cf-danger:hover { background: #a93226; color: #fff; border-color: transparent; }
     `
     let stylesInstalled = false
     function installStyles() {
@@ -543,7 +910,6 @@ window.__ModuleLoader__.load({
     function createModel(ctx) {
       /** id → harvested visible title, per slot. */
       const harvest = new Map()
-      let harvestSeq = 0
 
       const entriesOf = (slot) => {
         try { return ctx.slots.entries(slot) ?? [] } catch { return [] }
@@ -558,7 +924,7 @@ window.__ModuleLoader__.load({
         if (typeof o.locale === 'string') {
           const t = callSafe(() => ctx.locale.bind(o.locale))
           if (typeof t === 'function') {
-            for (const key of ['tab', 'title', 'card.title', 'name']) {
+            for (const key of ['tab', 'title', 'card.title', 'name', 'nav']) {
               const value = callSafe(() => t(key))
               if (typeof value === 'string' && value !== '' && value !== key) return value
             }
@@ -576,6 +942,77 @@ window.__ModuleLoader__.load({
        *   stacked section): harvest each direct child as one row, keyed by
        *   render order ("#i") since id pairing is impossible.
        */
+      /** Strip a trailing description (e.g. "关闭后恢复…") from a row label. */
+      const trimDescription = (text) => {
+        const t = (text ?? '').replace(/\s+/g, ' ').trim()
+        if (t === '') return ''
+        const re = /(?:[\s，,。；;])?(关闭后|开启后|启用后|禁用后|创建后|使用时|点击后|勾选后|开启时|关闭时|完成后|启用时|禁用时|开始后|停止后)/
+        const m = re.exec(t)
+        if (m) {
+          const head = t.slice(0, m.index).trim()
+          if (head.length >= 2 && head.length <= 60) return head
+        }
+        const p = t.indexOf('。')
+        if (p > 0) {
+          const head = t.slice(0, p).trim()
+          if (head.length >= 2 && head.length <= 40 && head.length < t.length - p) return head
+        }
+        return t
+      }
+
+      const mineInnerOptions = (node) => {
+        try {
+          const seen = new Set()
+          const out = []
+          const textOf = (el) => (el.textContent ?? '').replace(/\s+/g, ' ').trim()
+          const titleOf = (el) => {
+            const t = textOf(el)
+            return t.length >= 2 && t.length <= 120 ? t : ''
+          }
+          const bestTitle = (row) => {
+            let best = ''
+            let bestLen = 1e9
+            const sels = ['h1,h2,h3,h4,h5', '[class*="title"]', '[class*="heading"]', '[class*="name"]', '[class*="label"]', 'label', 'strong', 'b']
+            for (const sel of sels) {
+              for (const el of row.querySelectorAll(sel)) {
+                if (el === row) continue
+                const t = titleOf(el)
+                if (t === '') continue
+                if (t.length < bestLen) { best = t; bestLen = t.length }
+              }
+            }
+            if (best !== '') return best
+            const raw = textOf(row)
+            const part = raw.split('·')[0].trim()
+            return part.length >= 2 && part.length <= 120 ? part : raw.slice(0, 120)
+          }
+          const push = (label, el) => {
+            const clean = trimDescription(label)
+            const text = textOf(el)
+            if (clean.length < 2 || el === node || seen.has(clean)) return
+            seen.add(clean)
+            out.push({ label: clean, text })
+          }
+          const ctrls = node.querySelectorAll('input[type="checkbox"], input[type="radio"], [role="switch"], [role="checkbox"], [role="radio"], button[aria-pressed], button[aria-checked]')
+          for (const ctl of ctrls) {
+            let row = ctl
+            for (let d = 0; d < 6 && row.parentElement; d += 1) {
+              row = row.parentElement
+              if (row === node) break
+              const t = textOf(row)
+              if (t.length >= 2 && t.length <= 220) break
+            }
+            push(bestTitle(row), row)
+          }
+          const heads = node.querySelectorAll('h1,h2,h3,h4,h5,label,[class*="title"],[class*="heading"],[class*="label"],[class*="name"]')
+          for (const h of heads) push(bestTitle(h) || titleOf(h), h)
+          return out.slice(0, 24)
+        } catch {
+          return []
+        }
+      }
+
+
       const runHarvest = () => {
         let grew = false
         if (typeof document === 'undefined') return false
@@ -589,7 +1026,7 @@ window.__ModuleLoader__.load({
           if (containers.length === 1 && containers[0].childElementCount > 0) {
             nodes = [...containers[0].children]
           } else {
-            nodes = containers.filter((n) => n.childElementCount >= 0)
+            nodes = containers
           }
           if (nodes.length === 0) continue
           map = harvest.get(cfg.slot)
@@ -601,28 +1038,60 @@ window.__ModuleLoader__.load({
               if (map.has(key)) return
               const title = titleFromNode(node)
               if (title === '') return
-              const text = (node.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 160)
-              map.set(key, { title, idx: i, text }); grew = true
+              const text = (node.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 500)
+              const record = { title, idx: i, text, inner: mineInnerOptions(node) }
+              map.set(key, record); grew = true
             })
             continue
           }
           regs.forEach((entry, i) => {
-            const id = String(entry.options?.id ?? i)
+            const id = String(entry.options?.id ?? entry.options?.key ?? i)
             if (map.has(id)) return
             const title = titleFromNode(nodes[i])
             if (title === '') return
-            const text = (nodes[i].textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 160)
-            map.set(id, { title, idx: i, text }); grew = true
+            const text = (nodes[i].textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 500)
+            const record = { title, idx: i, text, inner: mineInnerOptions(nodes[i]) }
+            map.set(id, record); map.set('#' + i, record); grew = true
           })
         }
-        if (grew) harvestSeq += 1
+        // Mine the active first-level section's own inline controls
+        // (e.g. 创意工坊 → 启用创意工坊卡片), which live outside DEEP_SLOTS.
+        try {
+          const sections = readSections()
+          const activeLabel = activeSectionLabel()
+          const active = activeLabel === '' ? undefined : sections.find((s) => s.label === activeLabel)
+          if (active && active.id !== '') {
+            const containers = [...document.querySelectorAll('[data-slot="settings.section"]')]
+            const node = containers.length === 1 && containers[0].childElementCount > 0
+              ? containers[0].children[0] ?? null
+              : containers[0] ?? null
+            if (node) {
+              const inner = mineInnerOptions(node)
+              const text = (node.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 500)
+              if (inner.length > 0 || text !== '') {
+                let map = harvest.get('settings.section')
+                if (map === undefined) { map = new Map(); harvest.set('settings.section', map) }
+                const rec = map.get(active.id)
+                if (!rec) {
+                  map.set(active.id, { title: active.label, idx: 0, text, inner })
+                  grew = true
+                } else if ((rec.inner?.length ?? 0) === 0 && inner.length > 0) {
+                  rec.inner = inner
+                  rec.text = text
+                  grew = true
+                }
+              }
+            }
+          }
+        } catch { /* section mining is best-effort */ }
         return grew
       }
 
       const titleFromNode = (node) => {
         const pick = (el) => {
           const text = (el.textContent ?? '').replace(/\s+/g, ' ').trim()
-          return text !== '' && text.length <= 60 ? text : ''
+          if (text === '' || text.length > 200) return ''
+          return trimDescription(text)
         }
         for (const sel of ['h1,h2,h3,h4,h5', '[class*="title"]', '[class*="heading"]', 'label', 'p']) {
           const hit = node.querySelector(sel)
@@ -632,7 +1101,7 @@ window.__ModuleLoader__.load({
         if (first) {
           for (const child of first.children) { const text = pick(child); if (text !== '') return text }
         }
-        return pick(node).split('·')[0].trim()
+        return trimDescription(pick(node).split('·')[0].trim())
       }
 
       const readSections = () => sortEntries(entriesOf('settings.section'))
@@ -650,10 +1119,14 @@ window.__ModuleLoader__.load({
         const parentLabel = (parentId) =>
           sections.find((s) => s.id === parentId)?.label ?? parentId
         const out = []
+        // Set-based dedup: keys and "parentLabel\u0000label" pairs replace the
+        // former out.some(...) scans, which were O(n²) on every keystroke.
+        const seenKeys = new Set()
+        const seenPairs = new Set()
         for (const cfg of DEEP_SLOTS) {
           const mapped = harvest.get(cfg.slot)
           sortEntries(entriesOf(cfg.slot)).forEach((entry, i) => {
-            const id = String(entry.options?.id ?? '')
+            const id = String(entry.options?.id ?? entry.options?.key ?? '')
             if (id === '') return
             // static label first, then id-paired harvest, then loose index-keyed harvest
             const hitId = mapped?.get(id)
@@ -662,7 +1135,10 @@ window.__ModuleLoader__.load({
             const label = staticLabel(entry, cfg) || hitObj?.title || ''
             if (label === '') return // unmapped, unharvested — invisible until it renders once
             const key = cfg.slot + '#' + id
-            if (out.some((e) => e.key === key)) return
+            if (seenKeys.has(key)) return
+            const pageLabel = parentLabel(cfg.parent)
+            seenKeys.add(key)
+            seenPairs.add(pageLabel + '\u0000' + label)
             out.push({
               kind: 'option',
               key,
@@ -673,24 +1149,90 @@ window.__ModuleLoader__.load({
               hay: label + ' ' + (hitObj?.text ?? ''),
               rowIndex: hitObj?.idx ?? i,
               parentId: cfg.parent,
-              parentLabel: parentLabel(cfg.parent),
+              parentLabel: pageLabel,
             })
+            if (cfg.slot === 'settings.plugin.item' && Array.isArray(hitObj?.inner)) {
+              hitObj.inner.forEach((op, oi) => {
+                if (op.label === '' || op.label === label) return
+                const innerKey = key + '#o' + oi
+                if (seenKeys.has(innerKey)) return
+                seenKeys.add(innerKey)
+                seenPairs.add(label + '\u0000' + op.label)
+                out.push({
+                  kind: 'option',
+                  key: innerKey,
+                  slot: cfg.slot,
+                  id: id + '#o' + oi,
+                  order: (entry.options?.order ?? 0) + oi / 1000,
+                  label: op.label,
+                  hay: `${op.text} ${label} ${pageLabel}`.toLowerCase(),
+                  rowIndex: hitObj?.idx ?? i,
+                  parentId: cfg.parent,
+                  parentLabel: label,
+                  pageLabel,
+                  inner: true,
+                  cardLabel: label,
+                })
+              })
+            }
           })
         }
+        // Expose inline options mined from active first-level sections.
+        {
+          const mapped = harvest.get('settings.section')
+          if (mapped) {
+            sections.forEach((sec) => {
+              const id = sec.id
+              if (id === '') return
+              const rec = mapped.get(id)
+              if (!rec || !Array.isArray(rec.inner)) return
+              const label = sec.label
+              if (label === '') return
+              rec.inner.forEach((op, oi) => {
+                if (op.label === '' || op.label === label) return
+                const innerKey = 'settings.section#' + id + '#o' + oi
+                if (seenKeys.has(innerKey)) return
+                const pair = label + '\u0000' + op.label
+                if (seenPairs.has(pair)) return
+                seenKeys.add(innerKey)
+                seenPairs.add(pair)
+                out.push({
+                  kind: 'option',
+                  key: innerKey,
+                  slot: 'settings.section',
+                  id: id + '#o' + oi,
+                  order: sec.order + oi / 1000,
+                  label: op.label,
+                  hay: `${op.text} ${label}`.toLowerCase(),
+                  rowIndex: rec.idx ?? 0,
+                  parentId: id,
+                  parentLabel: label,
+                  pageLabel: label,
+                  inner: true,
+                  cardLabel: label,
+                })
+              })
+            })
+          }
+        }
         return out.sort((a, b) => a.parentLabel !== b.parentLabel
           ? a.parentLabel.localeCompare(b.parentLabel)
           : a.order - b.order)
       }
 
-      return { readSections, readDeep, runHarvest, bump: () => harvestSeq }
+      return { readSections, readDeep, runHarvest }
     }
 
     /* ---------- DOM-level navigation into the settings shell ---------- */
 
+    /** Root element that hosts the settings panel's nav buttons. */
+    const panelRoot = () => {
+      if (typeof document === 'undefined') return null
+      return document.querySelector('[role="dialog"]') ?? document.body
+    }
     const panelButtons = () => {
-      if (typeof document === 'undefined') return []
-      const root = document.querySelector('[role="dialog"]') ?? document.body
-      return [...root.querySelectorAll('button')]
+      const root = panelRoot()
+      return root === null ? [] : [...root.querySelectorAll('button')]
     }
     const clickNavButton = (wantText) => {
       const want = String(wantText ?? '').trim()
@@ -703,16 +1245,56 @@ window.__ModuleLoader__.load({
       return true
     }
     const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+    /** Label of the currently-active first-level settings nav item. */
+    const activeSectionLabel = () => {
+      const root = panelRoot()
+      if (root === null) return ''
+      const isTab = (b) => b.getAttribute('role') === 'tab'
+      const buttons = [...root.querySelectorAll('button')].filter((b) => !isTab(b))
+      const byCurrent = buttons.find((b) => b.getAttribute('aria-current') === 'true')
+      const byClass = buttons.find((b) => /_navCell/.test(b.className || '') && /_active/.test(b.className || ''))
+      const hit = byCurrent ?? byClass
+      return (hit?.textContent ?? '').replace(/\s+/g, ' ').trim()
+    }
+
+    let warmed = false
+    /**
+     * One-shot background pass: visit every first-level settings section once,
+     * let each mount, harvest its options, then restore the previously-active one.
+     */
+    const warmAllSections = async (model, onStart, onDone) => {
+      if (warmed || typeof document === 'undefined') return true
+      const sections = model.readSections()
+      if (sections.length === 0) return true
+      const original = activeSectionLabel()
+      if (original === '') return false // settings panel not open yet; retry on next mount
+      warmed = true
+      if (typeof onStart === 'function') onStart()
+      let visited = 0
+      try {
+        for (const sec of sections.slice(0, 40)) {
+          if (!clickNavButton(sec.label)) continue
+          await delay(180)
+          model.runHarvest()
+          visited += 1
+        }
+        if (clickNavButton(original)) {
+          await delay(160)
+          model.runHarvest()
+        }
+      } finally {
+        if (typeof onDone === 'function') onDone()
+      }
+      log('info', '预载设置索引', { total: sections.length, visited })
+      return true
+    }
 
     function createNavigator(ctx) {
       /** Jump to a page result; falls back to showing a manual hint. */
-      const jumpToPage = async (item) => {
-        const ok = await Promise.resolve(clickNavButton(item.label))
-        return ok
-      }
+      const jumpToPage = async (item) => clickNavButton(item.label)
       /** Jump to an in-page option: open its page, select its tab, flash its row. */
       const jumpToOption = async (item) => {
-        const opened = await Promise.resolve(clickNavButton(item.parentLabel))
+        const opened = clickNavButton(item.pageLabel ?? item.parentLabel)
         if (opened !== true) { flashOptionRow(item); return false }
         await delay(160)
         const label = item.label
@@ -727,21 +1309,34 @@ window.__ModuleLoader__.load({
       const flashOptionRow = (item) => {
         try {
           let target = null
+          let card = null
           if (typeof item.rowIndex === 'number') {
-            // wrapper shape: pick the exact rendered row by index
             const container = document.querySelector(`[data-slot="${item.slot}"]`)
-            target = container?.children?.[item.rowIndex] ?? null
-            if (target && !(target.textContent ?? '').includes(item.label)) {
-              // index drift — fall through to textual match below
-              target = null
-            }
+            card = container?.children?.[item.rowIndex] ?? null
+            if (card && !(card.textContent ?? '').includes(item.label)) card = null
           }
-          if (!target) {
+          if (!card) {
             const nodes = [...document.querySelectorAll(`[data-slot="${item.slot}"]`)]
             const rows = nodes.length === 1 && nodes[0].childElementCount > 0
               ? [...nodes[0].children]
               : nodes
-            target = rows.find((n) => (n.textContent ?? '').includes(item.label)) ?? null
+            card = rows.find((n) => (n.textContent ?? '').includes(item.label)) ?? null
+          }
+          if (card) {
+            if (item.inner) {
+              let best = null
+              let bestLen = Infinity
+              for (const el of card.querySelectorAll('*')) {
+                const t = (el.textContent ?? '')
+                if (t.includes(item.label) && t.length < bestLen) {
+                  best = el
+                  bestLen = t.length
+                }
+              }
+              target = best ?? card
+            } else {
+              target = card
+            }
           }
           if (!target) return
           target.scrollIntoView({ block: 'nearest' })
@@ -767,6 +1362,36 @@ window.__ModuleLoader__.load({
       const model = createModel(ctx)
       const navigator = createNavigator(ctx)
 
+      /** Read the model fields from DSH; credentials are never requested. */
+      const readDshModelConfig = async () => {
+        const connection = ctx.get('connection')
+        const response = await connection.api.settings.describe({})
+        if (!response.result.ok) throw new Error(response.result.error?.message || 'settings.describe failed')
+        const namespaces = new Map(response.result.value.namespaces.map((view) => [view.ns, view]))
+        const defaultModel = namespaces.get('agent-default-model')?.value ?? {}
+        const providerId = String(defaultModel.provider ?? '').trim()
+        const modelId = String(defaultModel.model ?? '').trim()
+        const readPath = (value, path) => (path ?? []).reduce((current, key) => current?.[key], value)
+        const providersResponse = await connection.api.llm.providers({}).catch(() => null)
+        const providerRow = providersResponse?.result?.ok
+          ? providersResponse.result.value.providers.find((entry) => entry.provider === providerId)
+          : undefined
+        const modelNamespace = namespaces.get(providerRow?.settingsNs || 'llm-pi-ai')
+        const providerProfile = providerRow
+          ? readPath(modelNamespace?.value, providerRow.settingsPath) ?? {}
+          : modelNamespace?.value?.providers?.[providerId] ?? {}
+        const configuredModels = Array.isArray(providerProfile.models) ? providerProfile.models : []
+        const modelProfile = configuredModels.find((entry) => entry?.id === modelId) ?? {}
+        const protocol = String(modelProfile.api ?? providerProfile.api ?? '').trim()
+        const baseUrl = String(providerProfile.baseURL ?? '').trim()
+        if (!modelId || !baseUrl) return null
+        return {
+          provider: protocol === 'anthropic-messages' ? 'anthropic' : 'openai',
+          baseUrl,
+          model: modelId,
+        }
+      }
+
       const SearchIcon = React.createElement('svg', {
         className: 'sss-icon',
         viewBox: '0 0 16.5 16.5',
@@ -785,10 +1410,76 @@ window.__ModuleLoader__.load({
         }),
       ])
 
+      /** Feature cards shown in the first-run welcome modal. */
+      const WELCOME_FEATURES = [
+        { icon: '🔍', titleKey: 'wlFeature1Title', descKey: 'wlFeature1Desc' },
+        { icon: '🔤', titleKey: 'wlFeature2Title', descKey: 'wlFeature2Desc' },
+        { icon: '🤖', titleKey: 'wlFeature3Title', descKey: 'wlFeature3Desc' },
+        { icon: '🧭', titleKey: 'wlFeature4Title', descKey: 'wlFeature4Desc' },
+        { icon: '🧾', titleKey: 'wlFeature5Title', descKey: 'wlFeature5Desc' },
+        { icon: '⚡', titleKey: 'wlFeature6Title', descKey: 'wlFeature6Desc' },
+      ]
+
+      /** First-run onboarding modal rendered as a fixed overlay. */
+      function Welcome({ t, onClose, onOpenPanel }) {
+        return React.createElement('div', {
+          className: 'sss-wl-overlay',
+          onMouseDown: (event) => { if (event.target === event.currentTarget) onClose() },
+        }, [
+          React.createElement('div', { className: 'sss-wl', role: 'dialog', 'aria-modal': 'true' }, [
+            React.createElement('div', { className: 'sss-wl-header' }, [
+              React.createElement('div', { className: 'sss-wl-headText' }, [
+                React.createElement('h2', { className: 'sss-wl-title' }, t('wlTitle')),
+                React.createElement('p', { className: 'sss-wl-subtitle' }, t('wlSubtitle')),
+              ]),
+              React.createElement('button', { className: 'sss-wl-close', type: 'button', 'aria-label': 'Close', onClick: onClose }, '✕'),
+            ]),
+            React.createElement('ul', { className: 'sss-wl-features' },
+              WELCOME_FEATURES.map((f) => React.createElement('li', { className: 'sss-wl-feature', key: f.titleKey }, [
+                React.createElement('span', { className: 'sss-wl-feature-icon', 'aria-hidden': 'true' }, f.icon),
+                React.createElement('span', { className: 'sss-wl-feature-body' }, [
+                  React.createElement('span', { className: 'sss-wl-feature-title' }, t(f.titleKey)),
+                  React.createElement('p', { className: 'sss-wl-feature-desc' }, t(f.descKey)),
+                ]),
+              ]))),
+            React.createElement('div', { className: 'sss-wl-footer' }, [
+              React.createElement('button', { className: 'sss-wl-btn sss-wl-primary', type: 'button', onClick: onClose }, t('wlStart')),
+              React.createElement('button', { className: 'sss-wl-btn', type: 'button', onClick: onOpenPanel }, t('wlOpenPanel')),
+            ]),
+          ]),
+        ])
+      }
+
+      /** Destructive-action confirmation modal (danger-styled confirm button). */
+      function ConfirmModal({ t, title, desc, confirmLabel, cancelLabel, onConfirm, onCancel }) {
+        return React.createElement('div', {
+          className: 'sss-cf-overlay',
+          onMouseDown: (event) => { if (event.target === event.currentTarget) onCancel() },
+        }, [
+          React.createElement('div', { className: 'sss-cf', role: 'dialog', 'aria-modal': 'true' }, [
+            React.createElement('div', { className: 'sss-cf-header' }, [
+              React.createElement('div', { className: 'sss-cf-headText' }, [
+                React.createElement('h2', { className: 'sss-cf-title' }, title),
+                React.createElement('p', { className: 'sss-cf-desc' }, desc),
+              ]),
+              React.createElement('button', { className: 'sss-cf-close', type: 'button', 'aria-label': 'Close', onClick: onCancel }, '✕'),
+            ]),
+            React.createElement('div', { className: 'sss-cf-actions' }, [
+              React.createElement('button', { className: 'sss-cf-btn sss-cf-danger', type: 'button', onClick: onConfirm }, confirmLabel),
+              React.createElement('button', { className: 'sss-cf-btn', type: 'button', onClick: onCancel }, cancelLabel),
+            ]),
+          ]),
+        ])
+      }
+
       function SettingsHeaderSearch() {
         const [query, setQuery] = React.useState('')
         const [open, setOpen] = React.useState(false)
+        const [searchStyle, setSearchStyleState] = React.useState(readSearchStyle)
+        const [pageOpen, setPageOpen] = React.useState(false)
+        const [showWelcome, setShowWelcome] = React.useState(() => !welcomed())
         const [tick, setTick] = React.useState(0)
+        const [warming, setWarming] = React.useState(false)
         const [, forceTick] = React.useReducer((x) => x + 1, 0)
         void tick
         const [aiEnabled, setAiEnabled] = React.useState(aiSearchEnabled)
@@ -803,20 +1494,67 @@ window.__ModuleLoader__.load({
             ctx.locale.subscribe(forceTick),
           ]
           // Grow the index whenever the panel body re-renders (visits new pages).
+          // DOM mutations arrive in bursts (animations, list mounts), so the
+          // harvest pass runs at most once per throttle window (trailing edge).
+          let warmAlive = true
+          let warmAttempts = 0
+          let mutatorAlive = true
+          let throttleTimer = null
+          const onMutate = () => {
+            if (!mutatorAlive) return
+            if (model.runHarvest()) setTick((x) => x + 1)
+            if (!warmed && activeSectionLabel() !== '') {
+              void warmAllSections(model, () => setWarming(true), () => setWarming(false)).then((done) => {
+                if (!warmAlive) return
+                if (done) setTick((x) => x + 1)
+              })
+            }
+          }
           const observer = typeof MutationObserver === 'function'
             ? new MutationObserver(() => {
-                if (model.runHarvest()) setTick((x) => x + 1)
+                if (throttleTimer !== null) return
+                throttleTimer = setTimeout(() => {
+                  throttleTimer = null
+                  onMutate()
+                }, 120)
               })
             : null
           observer?.observe(document.body, { childList: true, subtree: true })
-          const warm = setTimeout(() => { model.runHarvest(); setTick((x) => x + 1) }, 800)
+          const tryWarm = () => {
+            void warmAllSections(model, () => setWarming(true), () => setWarming(false)).then((done) => {
+              if (!warmAlive) return
+              if (done) { setTick((x) => x + 1); return }
+              warmAttempts += 1
+              if (warmAttempts < 4) setTimeout(tryWarm, 700)
+            })
+          }
+          const warm = setTimeout(() => {
+            model.runHarvest()
+            setTick((x) => x + 1)
+            tryWarm()
+          }, 800)
           return () => {
+            warmAlive = false
+            mutatorAlive = false
             for (const off of offs) off()
             observer?.disconnect()
             clearTimeout(warm)
+            if (throttleTimer !== null) clearTimeout(throttleTimer)
           }
         }, [])
 
+        React.useEffect(() => {
+          const onWelcome = (event) => { if (event?.detail === true) setShowWelcome(true) }
+          window.addEventListener(WELCOME_EVENT, onWelcome)
+          return () => window.removeEventListener(WELCOME_EVENT, onWelcome)
+        }, [])
+
+        React.useEffect(() => {
+          const sync = () => setSearchStyleState(readSearchStyle())
+          window.addEventListener(SEARCH_STYLE_EVENT, sync)
+          return () => window.removeEventListener(SEARCH_STYLE_EVENT, sync)
+        }, [])
+
         React.useEffect(() => {
           const sync = () => setAiEnabled(aiSearchEnabled())
           const onConfig = () => forceTick()
@@ -839,7 +1577,7 @@ window.__ModuleLoader__.load({
           tokens.every((tok) => tokenMatch(haystackLower, item.keys, tok) !== null)
         const kwMatch = (item, haystackLower, kw) => {
           if (/^[\x00-\x7f]+$/.test(kw)) {
-            if (new RegExp(`\\b${kw.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(haystackLower)) return true
+            if (wordBoundaryRegex(kw).test(haystackLower)) return true
           } else if (haystackLower.includes(kw)) return true
           if (item.keys === null) return false
           const kwKeys = pinyinKeys(kw)
@@ -930,15 +1668,25 @@ window.__ModuleLoader__.load({
         const [hint, setHint] = React.useState(null)
         const [active, setActive] = React.useState(0)
         const popRef = React.useRef(null)
+        const inputRef = React.useRef(null)
+        const pageMode = searchStyle === 'page'
+        const mixedMode = searchStyle === 'mixed'
+        const topMode = searchStyle === 'top' || mixedMode
         const activeIndex = Math.min(active, Math.max(results.length - 1, 0))
 
         React.useEffect(() => { setActive(0) }, [query])
+        React.useEffect(() => {
+          if (!pageMode || !pageOpen) return
+          const timer = setTimeout(() => inputRef.current?.focus(), 0)
+          return () => clearTimeout(timer)
+        }, [pageMode, pageOpen])
         React.useEffect(() => {
           const el = popRef.current?.querySelector('.sss-item.is-active')
           el?.scrollIntoView?.({ block: 'nearest' })
         }, [activeIndex, q])
         const pick = (item) => {
           setOpen(false)
+          setPageOpen(false)
           log('info', '打开设置', { kind: item.kind, id: item.id || item.key || '', label: String(item.label).slice(0, 60) })
           const jumped = item.kind === 'page'
             ? navigator.jumpToPage(item)
@@ -948,6 +1696,15 @@ window.__ModuleLoader__.load({
           })
         }
 
+        const dismissWelcome = () => {
+          setWelcomed()
+          setShowWelcome(false)
+        }
+        const openPanelFromWelcome = () => {
+          dismissWelcome()
+          clickNavButton(t('updn'))
+        }
+
         const mark = (text) => React.createElement('mark', { className: 'sss-hit' }, text)
 
         /** Highlight the matched substring, or the pinyin-covered prefix. */
@@ -1010,71 +1767,213 @@ window.__ModuleLoader__.load({
           kindBadge(via, t('option')),
         ])
 
+        const resultsNode = none
+          ? (aiStatus === 'loading'
+              ? React.createElement('p', { className: 'sss-ai-note' }, t('aiThinking'))
+              : aiStatus === 'error'
+                ? React.createElement('p', { className: 'sss-ai-note' }, t('aiUnavailable'))
+                : (aiEnabled && !aiConfigured)
+                  ? React.createElement('p', { className: 'sss-ai-note' }, t('aiNeedConfig'))
+                  : React.createElement('p', { className: 'sss-empty' }, t('empty')))
+          : React.createElement('div', { className: 'sss-groups' }, [
+              shownPages.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
+                React.createElement('div', { className: 'sss-group-title' }, t('pages')),
+                React.createElement('ul', { className: 'sss-list' },
+                  shownPages.map((item, i) => renderPage(item, i))),
+              ]) : null,
+              shownOptions.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
+                React.createElement('div', { className: 'sss-group-title' }, t('options')),
+                React.createElement('ul', { className: 'sss-list' },
+                  shownOptions.map((item, i) => renderOption(item, shownPages.length + i))),
+              ]) : null,
+              related.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
+                React.createElement('div', { className: 'sss-group-title' }, t('guess')),
+                React.createElement('ul', { className: 'sss-list' },
+                  related.map((r, i) => r.kind === 'page'
+                    ? renderPage(r.item, shownPages.length + shownOptions.length + i, r.via)
+                    : renderOption(r.item, shownPages.length + shownOptions.length + i, r.via))),
+              ]) : null,
+            ])
+
+        const searchInput = React.createElement('input', {
+          className: pageMode ? 'sss-input sss-page-input' : 'sss-input',
+          value: query,
+          placeholder: t('placeholder'),
+          spellCheck: false,
+          ref: inputRef,
+          onKeyDown: (e) => {
+            if (e.key === 'ArrowDown') {
+              e.preventDefault()
+              if (results.length > 0) setActive(Math.min(activeIndex + 1, results.length - 1))
+            } else if (e.key === 'ArrowUp') {
+              e.preventDefault()
+              setActive(Math.max(activeIndex - 1, 0))
+            } else if (e.key === 'Enter') {
+              const item = results[activeIndex]
+              if (item) { e.preventDefault(); pick(item) }
+            } else if (e.key === 'Escape') {
+              if (pageMode || mixedMode) setPageOpen(false)
+              else setOpen(false)
+            }
+          },
+          onChange: (e) => { setQuery(e.target.value); setHint(null); setOpen(true); if (mixedMode) setPageOpen(true) },
+          onFocus: () => { setOpen(true); if (mixedMode) setPageOpen(true) },
+          onBlur: () => setOpen(false),
+        })
+        const clearButton = query !== '' ? React.createElement('button', {
+          className: 'sss-clear',
+          type: 'button',
+          onClick: () => { setQuery(''); setHint(null); setOpen(false) },
+        }, '✕') : null
+        const pageTriggerButton = React.createElement('button', {
+          className: 'sss-trigger sss-top-trigger',
+          type: 'button',
+          onClick: () => setPageOpen(true),
+        }, [SearchIcon, t('openSearch')])
+
+        if (pageMode && pageOpen) {
+          return React.createElement(React.Fragment, null, [
+            React.createElement('div', { className: 'sss-wrap' }, [
+              React.createElement('div', { className: 'sss-title' }, t('title')),
+              showWelcome
+                ? React.createElement(Welcome, { t, onClose: dismissWelcome, onOpenPanel: openPanelFromWelcome })
+                : null,
+            ]),
+            React.createElement('div', { className: 'sss-wrap sss-top' }, [pageTriggerButton]),
+            React.createElement('div', {
+              className: 'sss-page-overlay',
+              onMouseDown: (event) => { if (event.target === event.currentTarget) setPageOpen(false) },
+            }, [
+              React.createElement('div', {
+                className: 'sss-page',
+                role: 'dialog',
+                'aria-modal': true,
+                'aria-label': t('placeholder'),
+              }, [
+                React.createElement('div', { className: 'sss-page-head' }, [
+                  React.createElement('button', {
+                    className: 'sss-icon-btn',
+                    type: 'button',
+                    'aria-label': t('searchBtn'),
+                    title: t('searchBtn'),
+                    onClick: () => inputRef.current?.focus(),
+                  }, [SearchIcon]),
+                  searchInput,
+                  clearButton,
+                  React.createElement('button', {
+                    className: 'sss-page-close',
+                    type: 'button',
+                    'aria-label': 'Close',
+                    onClick: () => setPageOpen(false),
+                  }, '✕'),
+                ]),
+                React.createElement('div', { className: 'sss-page-results' }, [
+                  warming ? React.createElement('p', { className: 'sss-warm-note' }, t('warming')) : null,
+                  q !== '' ? resultsNode : null,
+                  hint !== null
+                    ? React.createElement('div', { className: 'sss-guide' }, t('jumpFail').replace('{path}', hint))
+                    : null,
+                ]),
+              ]),
+            ]),
+          ])
+        }
+
+        if (pageMode) {
+          return React.createElement(React.Fragment, null, [
+            React.createElement('div', { className: 'sss-wrap' }, [
+              React.createElement('div', { className: 'sss-title' }, t('title')),
+              showWelcome
+                ? React.createElement(Welcome, { t, onClose: dismissWelcome, onOpenPanel: openPanelFromWelcome })
+                : null,
+            ]),
+            React.createElement('div', { className: 'sss-wrap sss-top' }, [pageTriggerButton]),
+          ])
+        }
+
+        if (topMode) {
+          return React.createElement(React.Fragment, null, [
+            React.createElement('div', { className: 'sss-wrap' }, [
+              React.createElement('div', { className: 'sss-title' }, t('title')),
+              showWelcome
+                ? React.createElement(Welcome, { t, onClose: dismissWelcome, onOpenPanel: openPanelFromWelcome })
+                : null,
+            ]),
+            React.createElement('div', { className: 'sss-wrap sss-top' }, [
+              React.createElement('div', { className: 'sss-box' }, [
+                React.createElement('button', {
+                  className: 'sss-icon-btn',
+                  type: 'button',
+                  'aria-label': t('searchBtn'),
+                  title: t('searchBtn'),
+                  onClick: () => inputRef.current?.focus(),
+                }, [SearchIcon]),
+                searchInput,
+                clearButton,
+              ]),
+              warming ? React.createElement('p', { className: 'sss-warm-note' }, t('warming')) : null,
+              !mixedMode && open && q !== '' ? React.createElement('div', { className: 'sss-pop', ref: popRef }, [resultsNode]) : null,
+              !mixedMode && hint !== null
+                ? React.createElement('div', { className: 'sss-guide' }, t('jumpFail').replace('{path}', hint))
+                : null,
+            ]),
+            mixedMode && pageOpen
+              ? React.createElement('div', {
+                  className: 'sss-page-overlay',
+                  onMouseDown: (event) => { if (event.target === event.currentTarget) setPageOpen(false) },
+                }, [
+                  React.createElement('div', { className: 'sss-page' }, [
+                    React.createElement('div', { className: 'sss-page-head' }, [
+                      React.createElement('button', {
+                        className: 'sss-icon-btn',
+                        type: 'button',
+                        'aria-label': t('searchBtn'),
+                        title: t('searchBtn'),
+                        onClick: () => inputRef.current?.focus(),
+                      }, [SearchIcon]),
+                      React.createElement('span', { className: 'sss-page-input sss-mixed-title' }, t('pageSearchTitle')),
+                      clearButton,
+                      React.createElement('button', {
+                        className: 'sss-page-close',
+                        type: 'button',
+                        'aria-label': 'Close',
+                        onClick: () => setPageOpen(false),
+                      }, '✕'),
+                    ]),
+                    React.createElement('div', { className: 'sss-page-results' }, [
+                      warming ? React.createElement('p', { className: 'sss-warm-note' }, t('warming')) : null,
+                      q !== '' ? resultsNode : null,
+                      hint !== null
+                        ? React.createElement('div', { className: 'sss-guide' }, t('jumpFail').replace('{path}', hint))
+                        : null,
+                    ]),
+                  ]),
+                ])
+              : null,
+          ])
+        }
+
         return React.createElement('div', { className: 'sss-wrap' }, [
           React.createElement('div', { className: 'sss-title' }, t('title')),
           React.createElement('div', { className: 'sss-box' }, [
-            SearchIcon,
-            React.createElement('input', {
-              className: 'sss-input',
-              value: query,
-              placeholder: t('placeholder'),
-              spellCheck: false,
-              onKeyDown: (e) => {
-                if (e.key === 'ArrowDown') {
-                  e.preventDefault()
-                  if (results.length > 0) setActive(Math.min(activeIndex + 1, results.length - 1))
-                } else if (e.key === 'ArrowUp') {
-                  e.preventDefault()
-                  setActive(Math.max(activeIndex - 1, 0))
-                } else if (e.key === 'Enter') {
-                  const item = results[activeIndex]
-                  if (item) { e.preventDefault(); pick(item) }
-                } else if (e.key === 'Escape') {
-                  setOpen(false)
-                }
-              },
-              onChange: (e) => { setQuery(e.target.value); setHint(null); setOpen(true) },
-              onFocus: () => setOpen(true),
-              onBlur: () => setOpen(false),
-            }),
-            query !== '' ? React.createElement('button', {
-              className: 'sss-clear',
+            React.createElement('button', {
+              className: 'sss-icon-btn',
               type: 'button',
-              onClick: () => { setQuery(''); setHint(null); setOpen(false) },
-            }, '✕') : null,
+              'aria-label': t('searchBtn'),
+              title: t('searchBtn'),
+              onClick: () => inputRef.current?.focus(),
+            }, [SearchIcon]),
+            searchInput,
+            clearButton,
           ]),
-          open && q !== '' ? React.createElement('div', { className: 'sss-pop', ref: popRef }, [
-            none
-              ? (aiStatus === 'loading'
-                  ? React.createElement('p', { className: 'sss-ai-note' }, t('aiThinking'))
-                  : aiStatus === 'error'
-                    ? React.createElement('p', { className: 'sss-ai-note' }, t('aiUnavailable'))
-                    : (aiEnabled && !aiConfigured)
-                      ? React.createElement('p', { className: 'sss-ai-note' }, t('aiNeedConfig'))
-                      : React.createElement('p', { className: 'sss-empty' }, t('empty')))
-              : React.createElement('div', { className: 'sss-groups' }, [
-                  shownPages.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
-                    React.createElement('div', { className: 'sss-group-title' }, t('pages')),
-                    React.createElement('ul', { className: 'sss-list' },
-                      shownPages.map((item, i) => renderPage(item, i))),
-                  ]) : null,
-                  shownOptions.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
-                    React.createElement('div', { className: 'sss-group-title' }, t('options')),
-                    React.createElement('ul', { className: 'sss-list' },
-                      shownOptions.map((item, i) => renderOption(item, shownPages.length + i))),
-                  ]) : null,
-                  related.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
-                    React.createElement('div', { className: 'sss-group-title' }, t('guess')),
-                    React.createElement('ul', { className: 'sss-list' },
-                      related.map((r, i) => r.kind === 'page'
-                        ? renderPage(r.item, shownPages.length + shownOptions.length + i, r.via)
-                        : renderOption(r.item, shownPages.length + shownOptions.length + i, r.via))),
-                  ]) : null,
-                ]),
-          ]) : null,
+          warming ? React.createElement('p', { className: 'sss-warm-note' }, t('warming')) : null,
+          open && q !== '' ? React.createElement('div', { className: 'sss-pop', ref: popRef }, [resultsNode]) : null,
           hint !== null
             ? React.createElement('div', { className: 'sss-guide' }, t('jumpFail').replace('{path}', hint))
             : null,
+          showWelcome
+            ? React.createElement(Welcome, { t, onClose: dismissWelcome, onOpenPanel: openPanelFromWelcome })
+            : null,
         ])
       }
 
@@ -1087,8 +1986,18 @@ window.__ModuleLoader__.load({
         return 0
       }
 
+      /** Auto-clear a transient confirmation flag (copied ✓, cleared…) after ms. */
+      const useAutoReset = (active, reset, ms = 1600) => {
+        React.useEffect(() => {
+          if (!active) return
+          const off = setTimeout(reset, ms)
+          return () => clearTimeout(off)
+        }, [active])
+      }
+
       function UpdatePanel() {
         const [open, setOpen] = React.useState(true)
+        const [searchStyle, setSearchStyleState] = React.useState(readSearchStyle)
         const [state, setState] = React.useState('idle') // idle | loading | newest | outdated | error
         const [latest, setLatest] = React.useState('')
         const [copied, setCopied] = React.useState(false)
@@ -1102,11 +2011,17 @@ window.__ModuleLoader__.load({
         const [model, setModel] = React.useState(cfg.model)
         const [apiKey, setApiKey] = React.useState(cfg.apiKey)
         const [aiSaved, setAiSaved] = React.useState(false)
+        const [testState, setTestState] = React.useState('idle') // idle | loading | ok | fail
+        const [testMsg, setTestMsg] = React.useState('')
+        const [dshImportState, setDshImportState] = React.useState('idle') // idle | loading | ok | fail
+        const [dshImportMsg, setDshImportMsg] = React.useState('')
         const [, setLogVersion] = React.useState(0)
         const [logCopied, setLogCopied] = React.useState(false)
         const [logCopyFail, setLogCopyFail] = React.useState(false)
         const [logExportFail, setLogExportFail] = React.useState(false)
         const [logCleared, setLogCleared] = React.useState(false)
+        const [confirmClear, setConfirmClear] = React.useState(false)
+        const [confirmClearAi, setConfirmClearAi] = React.useState(false)
 
         React.useEffect(() => {
           const sync = () => setAiOn(aiSearchEnabled())
@@ -1115,16 +2030,13 @@ window.__ModuleLoader__.load({
         }, [])
 
         React.useEffect(() => {
-          if (!copied) return
-          const off = setTimeout(() => { setCopied(false); setCopyFailed(false) }, 1600)
-          return () => clearTimeout(off)
-        }, [copied])
+          const sync = () => setSearchStyleState(readSearchStyle())
+          window.addEventListener(SEARCH_STYLE_EVENT, sync)
+          return () => window.removeEventListener(SEARCH_STYLE_EVENT, sync)
+        }, [])
 
-        React.useEffect(() => {
-          if (!aiSaved) return
-          const off = setTimeout(() => setAiSaved(false), 1600)
-          return () => clearTimeout(off)
-        }, [aiSaved])
+        useAutoReset(copied, () => { setCopied(false); setCopyFailed(false) })
+        useAutoReset(aiSaved, () => setAiSaved(false))
 
         React.useEffect(() => {
           const sync = () => setLogVersion((v) => v + 1)
@@ -1132,23 +2044,9 @@ window.__ModuleLoader__.load({
           return () => window.removeEventListener(LOG_EVENT, sync)
         }, [])
 
-        React.useEffect(() => {
-          if (!logCopied) return
-          const off = setTimeout(() => setLogCopied(false), 1600)
-          return () => clearTimeout(off)
-        }, [logCopied])
-
-        React.useEffect(() => {
-          if (!logCleared) return
-          const off = setTimeout(() => setLogCleared(false), 1600)
-          return () => clearTimeout(off)
-        }, [logCleared])
-
-        React.useEffect(() => {
-          if (!logExportFail) return
-          const off = setTimeout(() => setLogExportFail(false), 1600)
-          return () => clearTimeout(off)
-        }, [logExportFail])
+        useAutoReset(logCopied, () => setLogCopied(false))
+        useAutoReset(logCleared, () => setLogCleared(false))
+        useAutoReset(logExportFail, () => setLogExportFail(false))
 
         const saveAi = () => {
           setAiConfig({
@@ -1161,6 +2059,79 @@ window.__ModuleLoader__.load({
           log('info', '保存 AI 配置', { provider, model: model.trim() })
         }
 
+        const importDshModelConfig = async () => {
+          if (dshImportState === 'loading') return
+          setDshImportState('loading')
+          setDshImportMsg('')
+          try {
+            const imported = await readDshModelConfig()
+            if (!imported) throw new Error(t('aiDshImportEmpty'))
+            setAiConfig({ ...imported, apiKey })
+            setProvider(imported.provider)
+            setBaseUrl(imported.baseUrl)
+            setModel(imported.model)
+            setDshImportState('ok')
+            setDshImportMsg(t('aiDshImportOk'))
+            log('info', '导入 DSH 模型配置', { provider: imported.provider, model: imported.model })
+          } catch (error) {
+            const reason = String(error?.message ?? error).slice(0, 160)
+            setDshImportState('fail')
+            setDshImportMsg(t('aiDshImportFail').replace('{reason}', reason))
+            log('error', '导入 DSH 模型配置失败', { detail: reason })
+          }
+        }
+
+        const updateSearchStyle = (style) => {
+          setStoredSearchStyle(style)
+          setSearchStyleState(style)
+        }
+
+        const requestClearAi = () => setConfirmClearAi(true)
+        const cancelClearAi = () => setConfirmClearAi(false)
+        const clearAiConfig = () => {
+          setConfirmClearAi(false)
+          setAiConfig({ provider: 'openai', baseUrl: '', model: '', apiKey: '' })
+          setProvider('openai')
+          setBaseUrl('')
+          setModel('')
+          setApiKey('')
+          setAiSaved(false)
+          log('info', '清除 API 配置', {})
+        }
+
+        const testService = async () => {
+          if (testState === 'loading') return
+          if (!baseUrl.trim() || !model.trim() || !apiKey.trim()) {
+            setTestState('fail')
+            setTestMsg(t('aiNeedConfig'))
+            return
+          }
+          setTestState('loading')
+          setTestMsg('')
+          const result = await testAiService({ provider, baseUrl, model, apiKey })
+          if (result.ok) {
+            setTestState('ok')
+            setTestMsg(t('aiTestOk'))
+          } else {
+            setTestState('fail')
+            const hintKey = {
+              auth: 'aiTestErrAuth',
+              forbidden: 'aiTestErrForbidden',
+              'not-found': 'aiTestErrNotFound',
+              'rate-limit': 'aiTestErrRateLimit',
+              'bad-request': 'aiTestErrBadRequest',
+              server: 'aiTestErrServer',
+              timeout: 'aiTestErrTimeout',
+              network: 'aiTestErrNetwork',
+              'bad-response': 'aiTestErrBadResponse',
+              'unsafe-url': 'aiTestErrUnsafeUrl',
+            }[result.code] ?? 'aiTestErrHttp'
+            const hint = t(hintKey)
+            const detail = result.detail ? `（${result.detail}）` : ''
+            setTestMsg(`${t('aiTestFail')}：${hint}${detail}`)
+          }
+        }
+
         const exportLogs = () => {
           setLogExportFail(false)
           try {
@@ -1188,7 +2159,10 @@ window.__ModuleLoader__.load({
           }
         }
 
+        const requestClear = () => setConfirmClear(true)
+        const cancelClear = () => setConfirmClear(false)
         const clearLogs = () => {
+          setConfirmClear(false)
           LOGS.length = 0
           setLogVersion((v) => v + 1)
           setLogCleared(true)
@@ -1204,6 +2178,11 @@ window.__ModuleLoader__.load({
             const data = await res.json()
             const ver = typeof data?.version === 'string' ? data.version : ''
             if (ver === '') throw new Error('no version in registry response')
+            // Only accept a plain semver string so it can never be interpreted
+            // as shell syntax or injected into a URL opened via location.href.
+            if (!/^[0-9]+\.[0-9]+\.[0-9]+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/.test(ver)) {
+              throw new Error('invalid semver in registry response')
+            }
             setLatest(ver)
             const newer = compareSemver(ver, PKG_VERSION) > 0
             setState(newer ? 'outdated' : 'newest')
@@ -1268,6 +2247,34 @@ window.__ModuleLoader__.load({
             React.createElement('span', { className: 'sss-vr-chevron' + (open ? ' sss-vr-chevron-open' : '') }, '▾'),
           ]),
           open ? React.createElement('div', { className: 'sss-vr-body' }, [
+            React.createElement('div', { className: 'sss-vr-field' }, [
+              React.createElement('div', { className: 'sss-vr-field-head' }, [
+                React.createElement('span', { className: 'sss-vr-label' }, t('styleTitle')),
+              ]),
+              React.createElement('p', { className: 'sss-vr-hint' }, t('styleHint')),
+              React.createElement('div', { className: 'sss-vr-segment' }, [
+                React.createElement('button', {
+                  className: 'sss-vr-seg' + (searchStyle === 'sidebar' ? ' is-active' : ''),
+                  type: 'button',
+                  onClick: () => updateSearchStyle('sidebar'),
+                }, t('styleClassic')),
+                React.createElement('button', {
+                  className: 'sss-vr-seg' + (searchStyle === 'top' ? ' is-active' : ''),
+                  type: 'button',
+                  onClick: () => updateSearchStyle('top'),
+                }, t('styleTop')),
+                React.createElement('button', {
+                  className: 'sss-vr-seg' + (searchStyle === 'page' ? ' is-active' : ''),
+                  type: 'button',
+                  onClick: () => updateSearchStyle('page'),
+                }, t('stylePage')),
+                React.createElement('button', {
+                  className: 'sss-vr-seg' + (searchStyle === 'mixed' ? ' is-active' : ''),
+                  type: 'button',
+                  onClick: () => updateSearchStyle('mixed'),
+                }, t('styleMixed')),
+              ]),
+            ]),
             React.createElement('div', { className: 'sss-vr-field' }, [
               React.createElement('div', { className: 'sss-vr-field-head' }, [
                 React.createElement('span', { className: 'sss-vr-label' }, t('aiSearch')),
@@ -1291,7 +2298,11 @@ window.__ModuleLoader__.load({
               ]),
               React.createElement('select', {
                 className: 'sss-vr-input sss-vr-select',
+                name: 'dsh-settings-search-provider',
                 value: provider,
+                autoComplete: 'off',
+                'data-lpignore': 'true',
+                'data-form-type': 'other',
                 onChange: (event) => setProvider(event.target.value),
               }, [
                 React.createElement('option', { value: 'openai' }, t('aiOpenAI')),
@@ -1303,37 +2314,64 @@ window.__ModuleLoader__.load({
               React.createElement('input', {
                 className: 'sss-vr-input',
                 type: 'url',
+                name: 'dsh-settings-search-base-url',
                 value: baseUrl,
                 placeholder: provider === 'anthropic' ? 'https://api.anthropic.com' : 'https://api.openai.com/v1',
                 spellCheck: false,
+                autoComplete: 'off',
+                'data-lpignore': 'true',
+                'data-1p-ignore': 'true',
+                'data-form-type': 'other',
                 onChange: (event) => setBaseUrl(event.target.value),
               }),
+              React.createElement('p', { className: 'sss-vr-hint' }, t('aiBaseUrlHint')),
               React.createElement('div', { className: 'sss-vr-field-head' }, [
                 React.createElement('label', { className: 'sss-vr-label' }, t('aiModel')),
               ]),
               React.createElement('input', {
                 className: 'sss-vr-input',
                 type: 'text',
+                name: 'dsh-settings-search-model',
                 value: model,
                 placeholder: provider === 'anthropic' ? 'claude-sonnet-4-20250514' : 'gpt-4o-mini',
                 spellCheck: false,
+                autoComplete: 'off',
+                'data-lpignore': 'true',
+                'data-1p-ignore': 'true',
+                'data-form-type': 'other',
                 onChange: (event) => setModel(event.target.value),
               }),
               React.createElement('div', { className: 'sss-vr-field-head' }, [
                 React.createElement('label', { className: 'sss-vr-label' }, t('aiApiKey')),
               ]),
               React.createElement('input', {
-                className: 'sss-vr-input',
-                type: 'password',
+                className: 'sss-vr-input sss-vr-mask',
+                type: 'text',
+                name: 'dsh-settings-search-api-key',
                 value: apiKey,
                 placeholder: 'sk-…',
                 spellCheck: false,
                 autoComplete: 'off',
+                'data-lpignore': 'true',
+                'data-1p-ignore': 'true',
+                'data-form-type': 'other',
                 onChange: (event) => setApiKey(event.target.value),
               }),
-              React.createElement('div', { className: 'sss-vr-actions' },
+              React.createElement('div', { className: 'sss-vr-actions' }, [
                 React.createElement('button', { className: 'sss-vr-btn sss-vr-primary', type: 'button', onClick: () => { void saveAi() } },
-                  aiSaved ? t('aiConfigSaved') : t('aiConfigSave'))),
+                  aiSaved ? t('aiConfigSaved') : t('aiConfigSave')),
+                React.createElement('button', { className: 'sss-vr-btn', type: 'button', disabled: testState === 'loading', onClick: () => { void testService() } },
+                  testState === 'loading' ? t('aiTesting') : t('aiTest')),
+                React.createElement('button', { className: 'sss-vr-btn', type: 'button', disabled: dshImportState === 'loading', onClick: () => { void importDshModelConfig() } },
+                  dshImportState === 'loading' ? t('aiDshImporting') : t('aiDshImport')),
+                React.createElement('button', { className: 'sss-vr-btn', type: 'button', onClick: () => requestClearAi() }, t('aiClear')),
+              ]),
+              dshImportMsg
+                ? React.createElement('p', { className: 'sss-vr-note', style: { color: dshImportState === 'ok' ? '#1e8e3e' : 'var(--dsw-alias-label-danger)' } }, dshImportMsg)
+                : null,
+              testMsg
+                ? React.createElement('p', { className: 'sss-vr-note', style: { color: testState === 'ok' ? '#1e8e3e' : 'var(--dsw-alias-label-danger)' } }, testMsg)
+                : null,
             ]),
             React.createElement('div', { className: 'sss-vr-field' }, [
               React.createElement('div', { className: 'sss-vr-row' }, [
@@ -1384,13 +2422,35 @@ window.__ModuleLoader__.load({
                 React.createElement('button', { className: 'sss-vr-btn', type: 'button', onClick: () => { void exportLogs() } }, t('logExport')),
                 React.createElement('button', { className: 'sss-vr-btn', type: 'button', onClick: () => { void copyLogs() } },
                   logCopied ? t('logCopied') : t('logCopy')),
-                React.createElement('button', { className: 'sss-vr-btn', type: 'button', onClick: () => { void clearLogs() } },
+                React.createElement('button', { className: 'sss-vr-btn', type: 'button', disabled: LOGS.length === 0, onClick: () => requestClear() },
                   logCleared ? t('logCleared') : t('logClear')),
               ]),
               logCopyFail ? React.createElement('p', { className: 'sss-vr-note', style: { color: 'var(--dsw-alias-label-danger)' } }, t('logCopyFail')) : null,
               logExportFail ? React.createElement('p', { className: 'sss-vr-note', style: { color: 'var(--dsw-alias-label-danger)' } }, t('logExportFail')) : null,
             ]),
           ]) : null,
+          confirmClear
+            ? React.createElement(ConfirmModal, {
+                t,
+                title: t('logConfirmTitle'),
+                desc: t('logConfirm'),
+                confirmLabel: t('logConfirmYes'),
+                cancelLabel: t('logConfirmCancel'),
+                onConfirm: () => { void clearLogs() },
+                onCancel: () => cancelClear(),
+              })
+            : null,
+          confirmClearAi
+            ? React.createElement(ConfirmModal, {
+                t,
+                title: t('aiClearTitle'),
+                desc: t('aiClearConfirm'),
+                confirmLabel: t('aiClearYes'),
+                cancelLabel: t('logConfirmCancel'),
+                onConfirm: () => { void clearAiConfig() },
+                onCancel: () => cancelClearAi(),
+              })
+            : null,
         ])
       }
 
@@ -1410,7 +2470,7 @@ window.__ModuleLoader__.load({
     }
 
     exports.apply = apply
-    exports.inject = ['slots', 'locale']
+    exports.inject = ['slots', 'locale', 'connection']
     return module.exports
   },
 })