dsh-vision-router 1.2.0 → 1.2.2

package/lib/client.js

@@ -32,10 +32,13 @@ window.__ModuleLoader__.load({
       onboardingGuide: '带我设置视觉模型',
       onboardingLater: '稍后',
       onboardingClose: '关闭',
-      guidePromptTitle: '设置视觉模型 · 第 1 步',
+      guideStep1Title: '第 1 步 · 会话 / 文字模型',
+      guideStep1Body: '在聊天页右下角的模型选择器里选择会话/文字模型。发图片时，请选带「+ 自动识图」的模型组；组里的模型仍负责聊天、思考和调用工具。选好后点击「下一步」。',
+      guideStepNext: '下一步',
+      guidePromptTitle: '第 2 步 · 视觉模型',
       guidePromptBody: '请打开 DSH 的「设置 → 插件」。进入插件页后，我会自动展开 Vision Router，并定位到「视觉后端链」。',
       guidePromptCancel: '结束引导',
-      guideChainTitle: '第 2 步 · 这里就是视觉模型',
+      guideChainTitle: '第 3 步 · 这里就是视觉模型',
       guideChainBody: '上面的每一行都是你自己的视觉模型，从上到下依次尝试；可以全部留空。内置 OVH 免费链固定在最后自动兜底。这里不会修改聊天页右下角的会话/文字模型。选好后点击页面底部「保存」。',
       guideDone: '完成引导',
       pending: '未保存',
@@ -200,10 +203,13 @@ window.__ModuleLoader__.load({
       onboardingGuide: 'Guide me to vision settings',
       onboardingLater: 'Later',
       onboardingClose: 'Close',
-      guidePromptTitle: 'Set the vision model · Step 1',
+      guideStep1Title: 'Step 1 · Session / text model',
+      guideStep1Body: 'Choose it from the lower-right chat selector. For image turns, use a group marked “+ Auto Vision”; the model inside still handles chat, reasoning, and tool calls. Click “Next” when done.',
+      guideStepNext: 'Next',
+      guidePromptTitle: 'Step 2 · Vision model',
       guidePromptBody: 'Open DSH Settings → Plugins. Once that page is open, I will expand Vision Router and take you to “Vision backend chain”.',
       guidePromptCancel: 'End guide',
-      guideChainTitle: 'Step 2 · This is the vision model',
+      guideChainTitle: 'Step 3 · This is the vision model',
       guideChainBody: 'Each row above is one of your own vision models, tried top to bottom; you may leave them all empty. The built-in OVH chain remains the automatic final fallback. This does not change the session/text model in the lower-right chat selector. Click “Save” after choosing.',
       guideDone: 'Finish guide',
       pending: 'Unsaved',
@@ -471,7 +477,7 @@ window.__ModuleLoader__.load({
       '.vr-quickstart-body,.vr-quickstart-live{margin:0;font-size:12px;line-height:1.6}' +
       '.vr-quickstart-body{color:var(--dsw-alias-label-secondary)}' +
       '.vr-quickstart-live{color:var(--dsw-alias-brand-primary)}' +
-      '.vr-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}' +
+      '.vr-field{content-visibility:auto;contain-intrinsic-size:auto 96px;flex-direction:column;gap:6px;padding:12px 0;display:flex}' +
       '.vr-field + .vr-field{border-top:1px solid var(--dsw-alias-border-l2)}' +
       '.vr-field-head{align-items:center;gap:8px;display:flex}' +
       '.vr-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}' +
@@ -490,7 +496,7 @@ window.__ModuleLoader__.load({
       '.vr-stealth-notice{color:var(--dsw-alias-label-warning,var(--dsw-alias-label-secondary))}' +
       '.vr-catalog-error{display:flex;align-items:center;gap:10px;flex-wrap:wrap}' +
       '.vr-subheader{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 0;border:none;background:none;cursor:pointer;font:inherit;color:var(--dsw-alias-label-primary);text-align:left}' +
-      '.vr-group{border-top:1px solid var(--dsw-alias-border-l2);padding:10px 0 2px;display:flex;flex-direction:column;gap:8px}' +
+      '.vr-group{content-visibility:auto;contain-intrinsic-size:auto 96px;border-top:1px solid var(--dsw-alias-border-l2);padding:10px 0 2px;display:flex;flex-direction:column;gap:8px}' +
       '.vr-group-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-tertiary);margin:0}' +
       '.vr-select{flex:1;min-width:0;font:inherit}' +
       '.vr-invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}' +
@@ -524,6 +530,8 @@ window.__ModuleLoader__.load({
       '.vr-guide-prompt{position:fixed;right:20px;bottom:20px;z-index:9999;width:min(360px,calc(100vw - 32px));box-sizing:border-box;border:1px solid var(--dsw-alias-brand-primary);border-radius:12px;background:var(--dsw-alias-bg-layer-2);box-shadow:0 12px 40px #0004;padding:14px;display:flex;flex-direction:column;gap:7px;color:var(--dsw-alias-label-primary)}' +
       '.vr-guide-prompt-title{font-size:13px;font-weight:700;line-height:1.5}' +
       '.vr-guide-prompt-body{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.6}' +
+      '.vr-guide-prompt-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}' +
+      '.vr-guide-prompt-left{right:auto;left:20px}' +
       '.vr-guide-target{border:2px solid var(--dsw-alias-brand-primary)!important;border-radius:12px;padding:12px!important;margin:8px -12px!important;background:var(--dsw-alias-bg-module-platform);box-shadow:0 0 0 4px color-mix(in srgb,var(--dsw-alias-brand-primary) 12%,transparent)}' +
       '.vr-guide-callout{border-radius:9px;background:var(--dsw-alias-bg-layer-3);padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:4px}' +
       '.vr-guide-callout-title{font-size:13px;font-weight:700;color:var(--dsw-alias-brand-primary)}' +
@@ -546,29 +554,38 @@ window.__ModuleLoader__.load({
     }
 
     const ONBOARDING_STORAGE_KEY = 'dsh-vision-router:onboarding:model-guide-v2'
-    const VISION_GUIDE_STORAGE_KEY = 'dsh-vision-router:guide:vision-backend-v1'
+    // The walkthrough has three steps: step1 (the session/text model selector
+    // on the chat page), step2 (open Settings → Plugins → Vision Router), and
+    // step3 (the highlighted vision chain, rendered by the settings card as a
+    // callout). Only step1/step2 need persistence; step3 re-derives from the
+    // card being on screen.
+    const VISION_GUIDE_STORAGE_KEY = 'dsh-vision-router:guide:vision-backend-v2'
     const VISION_GUIDE_EVENT = 'dsh-vision-router:vision-settings-guide'
     let visionGuidePrompt
-    let visionGuideActiveMemory = false
+    let visionGuideStepMemory
 
-    function readVisionGuideActive() {
+    function readVisionGuideStep() {
       try {
-        if (window.localStorage && window.localStorage.getItem(VISION_GUIDE_STORAGE_KEY) === 'active') return true
+        const value = window.localStorage && window.localStorage.getItem(VISION_GUIDE_STORAGE_KEY)
+        if (value === 'step1' || value === 'step2') return value
       } catch {
         // Fall through to page-memory state when storage access is blocked.
       }
-      return visionGuideActiveMemory
+      return visionGuideStepMemory
     }
-    function writeVisionGuideActive(active) {
-      visionGuideActiveMemory = active === true
+    function writeVisionGuideStep(step) {
+      visionGuideStepMemory = step === 'step1' || step === 'step2' ? step : undefined
       try {
         if (!window.localStorage) return
-        if (active) window.localStorage.setItem(VISION_GUIDE_STORAGE_KEY, 'active')
+        if (visionGuideStepMemory) window.localStorage.setItem(VISION_GUIDE_STORAGE_KEY, visionGuideStepMemory)
         else window.localStorage.removeItem(VISION_GUIDE_STORAGE_KEY)
       } catch {
         // Page-memory state still keeps the guide functional for this load.
       }
     }
+    function readVisionGuideActive() {
+      return readVisionGuideStep() !== undefined
+    }
     function removeVisionGuidePrompt() {
       if (visionGuidePrompt) visionGuidePrompt.remove()
       visionGuidePrompt = undefined
@@ -578,46 +595,79 @@ window.__ModuleLoader__.load({
       const EventCtor = window.Event
       if (typeof EventCtor === 'function') window.dispatchEvent(new EventCtor(VISION_GUIDE_EVENT))
     }
+    // The settings modal is an app-owned overlay; plugins cannot close it via
+    // a public API. Its panel closes on the Escape key through a native
+    // document listener, so replaying the guide "leaves the settings" by
+    // dispatching the same standard keydown the user would press.
+    function closeSettingsShell() {
+      if (typeof document === 'undefined' || typeof window === 'undefined') return
+      try {
+        document.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }),
+        )
+      } catch {
+        // KeyboardEvent constructor unavailable: degrade to staying put.
+      }
+    }
     function syncVisionGuidePrompt(t) {
       if (typeof document === 'undefined' || typeof window === 'undefined') return
-      if (!readVisionGuideActive()) {
+      const step = readVisionGuideStep()
+      if (step === undefined) {
         removeVisionGuidePrompt()
         return
       }
-      if (document.querySelector('[data-vr-guide-target="vision-backend"]')) {
+      if (step === 'step2' && document.querySelector('[data-vr-guide-target="vision-backend"]')) {
+        // Step 2 is done once the card is on screen; the in-card callout
+        // (step 3) takes over from here.
         removeVisionGuidePrompt()
         return
       }
       if (visionGuidePrompt || !document.body) return
       const prompt = document.createElement('div')
-      prompt.className = 'vr-guide-prompt'
+      // Step 1 talks about the chat page's lower-right model selector, so
+      // park the prompt on the LEFT side and keep the selector usable.
+      prompt.className = 'vr-guide-prompt' + (step === 'step1' ? ' vr-guide-prompt-left' : '')
       prompt.setAttribute('role', 'status')
       const title = document.createElement('div')
       title.className = 'vr-guide-prompt-title'
-      title.textContent = t('guidePromptTitle')
+      title.textContent = step === 'step1' ? t('guideStep1Title') : t('guidePromptTitle')
       const body = document.createElement('p')
       body.className = 'vr-guide-prompt-body'
-      body.textContent = t('guidePromptBody')
+      body.textContent = step === 'step1' ? t('guideStep1Body') : t('guidePromptBody')
+      const actions = document.createElement('div')
+      actions.className = 'vr-guide-prompt-actions'
       const cancel = document.createElement('button')
       cancel.type = 'button'
       cancel.className = 'vr-btn'
       cancel.textContent = t('guidePromptCancel')
       cancel.addEventListener('click', () => {
-        writeVisionGuideActive(false)
-        removeVisionGuidePrompt()
-        notifyVisionGuideChanged()
+        finishVisionSettingsGuide()
       })
-      prompt.append(title, body, cancel)
+      actions.append(cancel)
+      if (step === 'step1') {
+        const next = document.createElement('button')
+        next.type = 'button'
+        next.className = 'vr-btn vr-btn-save'
+        next.textContent = t('guideStepNext')
+        next.addEventListener('click', () => {
+          writeVisionGuideStep('step2')
+          removeVisionGuidePrompt()
+          syncVisionGuidePrompt(t)
+          notifyVisionGuideChanged()
+        })
+        actions.append(next)
+      }
+      prompt.append(title, body, actions)
       document.body.appendChild(prompt)
       visionGuidePrompt = prompt
     }
     function startVisionSettingsGuide(t) {
-      writeVisionGuideActive(true)
+      writeVisionGuideStep('step1')
       syncVisionGuidePrompt(t)
       notifyVisionGuideChanged()
     }
     function finishVisionSettingsGuide() {
-      writeVisionGuideActive(false)
+      writeVisionGuideStep(undefined)
       removeVisionGuidePrompt()
       notifyVisionGuideChanged()
     }
@@ -634,106 +684,114 @@ window.__ModuleLoader__.load({
       }
     }
 
-    function installOnboarding(t) {
-      if (typeof document === 'undefined' || typeof window === 'undefined') return
+    let onboardingOverlay
+    let onboardingKeyDown
+
+    function rememberOnboardingSeen() {
       try {
-        if (window.localStorage && window.localStorage.getItem(ONBOARDING_STORAGE_KEY) === 'seen') return
+        if (window.localStorage) window.localStorage.setItem(ONBOARDING_STORAGE_KEY, 'seen')
       } catch {
-        // Privacy/storage restrictions should not prevent the guidance itself.
+        // Best effort: the dialog can still be dismissed for this page load.
       }
-
-      let overlay
-      let timer
-      const remember = () => {
-        try {
-          if (window.localStorage) window.localStorage.setItem(ONBOARDING_STORAGE_KEY, 'seen')
-        } catch {
-          // Best effort: the dialog can still be dismissed for this page load.
-        }
+    }
+    function dismissOnboarding(remember = true) {
+      if (remember) rememberOnboardingSeen()
+      if (typeof document !== 'undefined' && onboardingKeyDown) {
+        document.removeEventListener('keydown', onboardingKeyDown)
       }
+      onboardingKeyDown = undefined
+      if (onboardingOverlay) onboardingOverlay.remove()
+      onboardingOverlay = undefined
+    }
+    function showOnboarding(t) {
+      if (typeof document === 'undefined' || !document.body) return
+      if (onboardingOverlay) return // Already open: never stack a second dialog.
+
       const onKeyDown = (event) => {
-        if (event && event.key === 'Escape') dismiss()
-      }
-      const dismiss = () => {
-        remember()
-        document.removeEventListener('keydown', onKeyDown)
-        if (overlay) overlay.remove()
-        overlay = undefined
+        if (event && event.key === 'Escape') dismissOnboarding()
       }
+      onboardingKeyDown = onKeyDown
 
-      timer = window.setTimeout(() => {
-        timer = undefined
-        if (!document.body) return
+      const overlay = document.createElement('div')
+      overlay.className = 'vr-onboarding-backdrop'
+      overlay.setAttribute('role', 'presentation')
 
-        overlay = document.createElement('div')
-        overlay.className = 'vr-onboarding-backdrop'
-        overlay.setAttribute('role', 'presentation')
+      const dialog = document.createElement('div')
+      dialog.className = 'vr-onboarding-dialog'
+      dialog.setAttribute('role', 'dialog')
+      dialog.setAttribute('aria-modal', 'true')
+      dialog.setAttribute('aria-labelledby', 'vr-onboarding-title')
 
-        const dialog = document.createElement('div')
-        dialog.className = 'vr-onboarding-dialog'
-        dialog.setAttribute('role', 'dialog')
-        dialog.setAttribute('aria-modal', 'true')
-        dialog.setAttribute('aria-labelledby', 'vr-onboarding-title')
+      const title = document.createElement('h2')
+      title.id = 'vr-onboarding-title'
+      title.className = 'vr-onboarding-title'
+      title.textContent = t('onboardingTitle')
 
-        const title = document.createElement('h2')
-        title.id = 'vr-onboarding-title'
-        title.className = 'vr-onboarding-title'
-        title.textContent = t('onboardingTitle')
+      const body = document.createElement('p')
+      body.className = 'vr-onboarding-text'
+      body.textContent = t('onboardingBody')
 
-        const body = document.createElement('p')
-        body.className = 'vr-onboarding-text'
-        body.textContent = t('onboardingBody')
+      const steps = document.createElement('div')
+      steps.className = 'vr-onboarding-steps'
+      for (const index of [1, 2, 3]) {
+        const step = document.createElement('div')
+        step.className = 'vr-onboarding-step'
+        const stepTitle = document.createElement('div')
+        stepTitle.className = 'vr-onboarding-step-title'
+        stepTitle.textContent = t('onboardingStep' + index + 'Title')
+        const stepBody = document.createElement('p')
+        stepBody.className = 'vr-onboarding-step-body'
+        stepBody.textContent = t('onboardingStep' + index + 'Body')
+        step.append(stepTitle, stepBody)
+        steps.appendChild(step)
+      }
 
-        const steps = document.createElement('div')
-        steps.className = 'vr-onboarding-steps'
-        for (const index of [1, 2, 3]) {
-          const step = document.createElement('div')
-          step.className = 'vr-onboarding-step'
-          const stepTitle = document.createElement('div')
-          stepTitle.className = 'vr-onboarding-step-title'
-          stepTitle.textContent = t('onboardingStep' + index + 'Title')
-          const stepBody = document.createElement('p')
-          stepBody.className = 'vr-onboarding-step-body'
-          stepBody.textContent = t('onboardingStep' + index + 'Body')
-          step.append(stepTitle, stepBody)
-          steps.appendChild(step)
-        }
+      const close = document.createElement('button')
+      close.type = 'button'
+      close.className = 'vr-onboarding-close'
+      close.setAttribute('aria-label', t('onboardingClose'))
+      close.textContent = '×'
+      close.addEventListener('click', dismissOnboarding)
 
-        const close = document.createElement('button')
-        close.type = 'button'
-        close.className = 'vr-onboarding-close'
-        close.setAttribute('aria-label', t('onboardingClose'))
-        close.textContent = '×'
-        close.addEventListener('click', dismiss)
+      const actions = document.createElement('div')
+      actions.className = 'vr-onboarding-actions'
+      const secondary = document.createElement('button')
+      secondary.type = 'button'
+      secondary.className = 'vr-onboarding-secondary'
+      secondary.textContent = t('onboardingLater')
+      secondary.addEventListener('click', dismissOnboarding)
+      const primary = document.createElement('button')
+      primary.type = 'button'
+      primary.className = 'vr-onboarding-primary'
+      primary.textContent = t('onboardingGuide')
+      primary.addEventListener('click', () => {
+        startVisionSettingsGuide(t)
+        dismissOnboarding()
+      })
+      actions.append(secondary, primary)
 
-        const actions = document.createElement('div')
-        actions.className = 'vr-onboarding-actions'
-        const secondary = document.createElement('button')
-        secondary.type = 'button'
-        secondary.className = 'vr-onboarding-secondary'
-        secondary.textContent = t('onboardingLater')
-        secondary.addEventListener('click', dismiss)
-        const primary = document.createElement('button')
-        primary.type = 'button'
-        primary.className = 'vr-onboarding-primary'
-        primary.textContent = t('onboardingGuide')
-        primary.addEventListener('click', () => {
-          startVisionSettingsGuide(t)
-          dismiss()
-        })
-        actions.append(secondary, primary)
+      dialog.append(title, body, steps, close, actions)
+      overlay.appendChild(dialog)
+      document.body.appendChild(overlay)
+      document.addEventListener('keydown', onKeyDown)
+      onboardingOverlay = overlay
+      primary.focus()
+    }
+    function installOnboarding(t) {
+      if (typeof document === 'undefined' || typeof window === 'undefined') return
+      try {
+        if (window.localStorage && window.localStorage.getItem(ONBOARDING_STORAGE_KEY) === 'seen') return
+      } catch {
+        // Privacy/storage restrictions should not prevent the guidance itself.
+      }
 
-        dialog.append(title, body, steps, close, actions)
-        overlay.appendChild(dialog)
-        document.body.appendChild(overlay)
-        document.addEventListener('keydown', onKeyDown)
-        primary.focus()
-      }, 650)
+      const timer = window.setTimeout(() => showOnboarding(t), 650)
 
       return () => {
         if (timer !== undefined) window.clearTimeout(timer)
-        document.removeEventListener('keydown', onKeyDown)
-        if (overlay) overlay.remove()
+        // Unmounting is not a user choice: drop the dialog without marking
+        // the guide seen, so the first-run overview can still auto-open.
+        if (onboardingOverlay) dismissOnboarding(false)
       }
     }
 
@@ -922,6 +980,58 @@ window.__ModuleLoader__.load({
       } catch (error) {
         renderError = error
       }
+      const h = React.createElement
+      // The model catalog can carry hundreds of models per provider (e.g.
+      // openrouter), so the option vnode lists are built once per catalog /
+      // selection instead of on every render, and the per-provider model
+      // lists are cached by the models-array identity.
+      const modelOptionCache = React.useRef(new Map())
+      const modelOptionsOf = (models) => {
+        if (!Array.isArray(models) || models.length === 0) return []
+        let list = modelOptionCache.current.get(models)
+        if (list === undefined) {
+          list = models.map((model) =>
+            h('option', { value: model.id, key: model.id },
+              (model.name && model.name !== model.id ? model.name + ' (' + model.id + ')' : model.id)),
+          )
+          modelOptionCache.current.set(models, list)
+        }
+        return list
+      }
+      const groupOptions = useMemo(
+        () => catalog.groups
+          .filter((group) => group.id !== 'vision-http')
+          .map((group) => h('option', { value: group.id, key: group.id },
+            (group.name && group.name !== group.id ? group.name + ' (' + group.id + ')' : group.id))),
+        [catalog.groups],
+      )
+      const visionGroupOptions = useMemo(
+        () => filterVisionBackendGroups(catalog.groups, visionCaps.capabilities)
+          .map((group) => h('option', { value: group.id, key: group.id },
+            (group.name && group.name !== group.id ? group.name + ' (' + group.id + ')' : group.id))),
+        [catalog.groups, visionCaps.capabilities],
+      )
+      const wrapGroupOptions = useMemo(
+        () => {
+          const chainValue = readValue(snapshot, 'chainRoute')
+          const wrapperValue = readValue(snapshot, 'wrapperRoute')
+          const excluded = new Set([
+            'vision-http',
+            typeof chainValue === 'string' && chainValue !== '' ? chainValue : 'vision-chain',
+            typeof wrapperValue === 'string' && wrapperValue !== '' ? wrapperValue : 'deepseek-vision',
+          ])
+          return catalog.groups
+            .filter((group) => {
+              if (group.id === 'deepseek-official') return true
+              if (excluded.has(group.id)) return false
+              if (group.id.endsWith('-vision')) return false
+              return true
+            })
+            .map((group) => h('option', { value: group.id, key: group.id },
+              (group.name && group.name !== group.id ? group.name + ' (' + group.id + ')' : group.id)))
+        },
+        [catalog.groups, snapshot],
+      )
       if (renderError !== undefined) {
         return React.createElement(
           'li',
@@ -1172,7 +1282,6 @@ window.__ModuleLoader__.load({
         }
       }
 
-      const h = React.createElement
       const overriddenBadge = (key) =>
         userHas(snapshot, key)
           ? h('span', { className: 'vr-badges' },
@@ -1227,43 +1336,10 @@ window.__ModuleLoader__.load({
         )
       }
 
-      const groupOptions = catalog.groups.filter((group) => group.id !== 'vision-http').map((group) =>
-        h('option', { value: group.id, key: group.id },
-          (group.name && group.name !== group.id ? group.name + ' (' + group.id + ')' : group.id)),
-      )
-      const visionGroupOptions = visionGroups.map((group) =>
-        h('option', { value: group.id, key: group.id },
-          (group.name && group.name !== group.id ? group.name + ' (' + group.id + ')' : group.id)),
-      )
       const modelsOf = (providerId) => {
         const group = catalog.groups.find((entry) => entry.id === providerId)
         return group && Array.isArray(group.models) ? group.models : []
       }
-      // The wire catalog carries no per-model modality fields, so the wrappers
-      // editor filters by route id: it offers only TEXT routes to wrap and
-      // drops the plugin's own image-capable routes (wrapper, twins, the
-      // vision-http backend, the vision chain). deepseek-official stays: it is
-      // the pre-filled default row, served by the built-in wrapper.
-      const wrapExcludedRoutes = () => {
-        const chainValue = readValue(snapshot, 'chainRoute')
-        const wrapperValue = readValue(snapshot, 'wrapperRoute')
-        return new Set([
-          'vision-http',
-          typeof chainValue === 'string' && chainValue !== '' ? chainValue : 'vision-chain',
-          typeof wrapperValue === 'string' && wrapperValue !== '' ? wrapperValue : 'deepseek-vision',
-        ])
-      }
-      const wrapGroupOptions = catalog.groups
-        .filter((group) => {
-          if (group.id === 'deepseek-official') return true
-          if (wrapExcludedRoutes().has(group.id)) return false
-          if (group.id.endsWith('-vision')) return false
-          return true
-        })
-        .map((group) =>
-          h('option', { value: group.id, key: group.id },
-            (group.name && group.name !== group.id ? group.name + ' (' + group.id + ')' : group.id)),
-        )
       const finishGuide = () => {
         finishVisionSettingsGuide()
         setGuideActive(false)
@@ -1318,10 +1394,7 @@ window.__ModuleLoader__.load({
                 onChange: (event) => updateChain(index, { provider: row.provider, model: event.target.value }),
               },
                 h('option', { value: '' }, visionProviderVisible(row.provider) ? t('selectModel') : t('pickProviderFirst')),
-                visionModelsFor(row.provider).map((model) =>
-                  h('option', { value: model.id, key: model.id },
-                    (model.name && model.name !== model.id ? model.name + ' (' + model.id + ')' : model.id)),
-                ),
+                modelOptionsOf(visionModelsFor(row.provider)),
               ),
               h('button', {
                 type: 'button', className: 'vr-reset', disabled: !writable, title: t('removeTitle'),
@@ -1376,10 +1449,7 @@ window.__ModuleLoader__.load({
               onChange: (event) => setPair({ provider: pair.provider, model: event.target.value }),
             },
               h('option', { value: '' }, pair.provider ? t('selectModel') : t('pickProviderFirst')),
-              modelsOf(pair.provider).map((model) =>
-                h('option', { value: model.id, key: model.id },
-                  (model.name && model.name !== model.id ? model.name + ' (' + model.id + ')' : model.id)),
-              ),
+              modelOptionsOf(modelsOf(pair.provider)),
             ),
           ),
           h('p', { className: 'vr-hint' }, t('textModelHint')),
@@ -1417,10 +1487,7 @@ window.__ModuleLoader__.load({
                 onChange: (event) => updateWrap(index, { provider: row.provider, model: event.target.value }),
               },
                 h('option', { value: '' }, row.provider ? t('wrapAllModels') : t('pickProviderFirst')),
-                modelsOf(row.provider).map((model) =>
-                  h('option', { value: model.id, key: model.id },
-                    (model.name && model.name !== model.id ? model.name + ' (' + model.id + ')' : model.id)),
-                ),
+                modelOptionsOf(modelsOf(row.provider)),
               ),
               h('button', {
                 type: 'button', className: 'vr-reset', disabled: !writable, title: t('removeTitle'),
@@ -1612,7 +1679,15 @@ window.__ModuleLoader__.load({
                 h('div', { className: 'vr-quickstart-actions' },
                   h('button', {
                     type: 'button', className: 'vr-btn',
-                    onClick: () => startVisionSettingsGuide(t),
+                    // Re-viewing the guide replays it from the beginning:
+                    // leave the settings modal first (its panel closes on
+                    // Escape), show the overview (steps 1-3), and then walk
+                    // through step 1 on the chat page — starting in place
+                    // would skip the session/text-model step entirely.
+                    onClick: () => {
+                      closeSettingsShell()
+                      showOnboarding(t)
+                    },
                   }, t('quickStartGuide')),
                 ),
               ),
@@ -1725,6 +1800,13 @@ window.__ModuleLoader__.load({
       )
     }
 
+    // Skip re-renders when the app re-renders the settings panel for unrelated
+    // reasons (tab switches, other cards' stores): the card's props come from
+    // a stable inject object, so a shallow memo keeps the heavy field/select
+    // DOM untouched until its own state or the settings scope changes.
+    const VisionRouterCardMemoized =
+      typeof React.memo === 'function' ? React.memo(VisionRouterCard) : VisionRouterCard
+
     const ARTIFACT_TOOL_KEYS = [
       'vision_crop',
       'vision_pixel_diff',
@@ -1914,6 +1996,9 @@ window.__ModuleLoader__.load({
       ctx.effect(installStyles, 'vision-router: card styles')
       ctx.effect(() => installVisionSettingsGuide(t), 'vision-router: model selection guide')
       ctx.effect(() => installOnboarding(t), 'vision-router: first-run onboarding')
+      // A stable props object: the memoized card skips re-renders only when
+      // this identity stays fixed across slot renders.
+      const cardInject = { scope, getConnection, t, locale: ctx.locale }
       ctx.effect(
         () =>
           ctx.slots.inject('settings.plugin.item', function* () {
@@ -1923,9 +2008,9 @@ window.__ModuleLoader__.load({
                 id: 'vision-router',
                 order: 30,
                 label: () => t('nav'),
-                inject: () => ({ scope, getConnection, t, locale: ctx.locale }),
+                inject: () => cardInject,
               },
-              VisionRouterCard,
+              VisionRouterCardMemoized,
             )
           }),
         'vision-router: settings card',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vision-router",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Eyes for text-only DeepSeek Harness agents: built-in free vision chain (no key) + pixel-level vision tools (Q&A, grounding, crop, pixel diff, colors, OCR, SVG trace, cutout, screenshots). One-command install, no Python, image turns work like ordinary tool-calling turns.",
   "license": "MIT",
   "repository": {