@lsfcy/dsh-composer-predictions 0.1.0 → 0.1.1

package/README.en.md

@@ -15,7 +15,7 @@ The assistant finishes with "All 12 tests pass." The empty composer then shows,
 
 Press Tab and it becomes an editable draft. Press Esc, or start typing, and it disappears.
 
-![Composer prediction: ghost appears, Tab accepts](demo/demo-en.gif)
+![Composer prediction: ghost appears, Tab accepts](https://raw.githubusercontent.com/lsfcy/dsh-composer-predictions/main/demo/demo-en.gif)
 
 ## Install
 
@@ -37,7 +37,7 @@ dsh plugin --profile desktop add @lsfcy/dsh-composer-predictions
 ```
 
 Restart DSH afterwards. The desktop app uses `desktop`; other entrypoints use their profile under `~/.dsh/profiles`, e.g. `web`. To pin a version without npm:
-`dsh plugin --profile desktop add git+https://github.com/lsfcy/dsh-composer-predictions.git#v0.1.0`.
+`dsh plugin --profile desktop add git+https://github.com/lsfcy/dsh-composer-predictions.git#v0.1.1`.
 
 ## Config
 

package/README.md

@@ -15,7 +15,7 @@
 
 按 Tab，它变成可编辑的草稿；按 Esc 或直接打字，它消失。
 
-![灰字预测：出现、Tab 接受](demo/demo-zh.gif)
+![灰字预测：出现、Tab 接受](https://raw.githubusercontent.com/lsfcy/dsh-composer-predictions/main/demo/demo-zh.gif)
 
 ## 安装
 
@@ -37,7 +37,7 @@ dsh plugin --profile desktop add @lsfcy/dsh-composer-predictions
 ```
 
 装完重启 DSH。桌面端 profile 是 `desktop`；其他入口用 `~/.dsh/profiles` 里对应的名字，如 `web`。不想走 npm 时，也可以用固定版本：
-`dsh plugin --profile desktop add git+https://github.com/lsfcy/dsh-composer-predictions.git#v0.1.0`。
+`dsh plugin --profile desktop add git+https://github.com/lsfcy/dsh-composer-predictions.git#v0.1.1`。
 
 ## 配置
 

package/client.js

@@ -349,6 +349,7 @@ const createGhostLayer = globalThis.createComposerGhost
 
 const PREDICT_PATH = '/composer-predictions/predict'
 const CONFIG_PATH = '/composer-predictions/config'
+const OPTIONS_PATH = '/composer-predictions/options'
 const CLIENT_TIMEOUT_MS = 30_000
 const ATTACH_FRAMES = 120
 
@@ -363,6 +364,8 @@ const noSession = () => undefined
 const configStore = (() => {
   let snapshot = null
   let pending = null
+  let options = null
+  let optionsPending = null
   const listeners = new Set()
   const publish = (next) => {
     snapshot = next
@@ -402,6 +405,37 @@ const configStore = (() => {
         })
       return pending
     },
+    getOptions: () => options,
+    loadOptions(force = false) {
+      if (optionsPending) return optionsPending
+      if (!force && options) return Promise.resolve(options)
+      optionsPending = fetch(OPTIONS_PATH, {
+        headers: { accept: 'application/json' },
+        cache: 'no-store',
+        credentials: 'same-origin',
+      })
+        .then((response) => (response.ok ? response.json() : Promise.reject(new Error('HTTP ' + response.status))))
+        .then((payload) => {
+          options = {
+            providers: Array.isArray(payload && payload.providers) ? payload.providers : [],
+            models: Array.isArray(payload && payload.models) ? payload.models : [],
+            autoProvider: payload && typeof payload.autoProvider === 'string' ? payload.autoProvider : '',
+          }
+          return options
+        })
+        .catch((error) => {
+          console.warn(
+            '[composer-predictions] options load failed:',
+            error && error.message ? error.message : error,
+          )
+          options = { providers: [], models: [], autoProvider: '' }
+          return options
+        })
+        .finally(() => {
+          optionsPending = null
+        })
+      return optionsPending
+    },
     async save(patch) {
       const response = await fetch(CONFIG_PATH, {
         method: 'POST',
@@ -579,6 +613,163 @@ function Field({ label, hint, children }) {
   return h('label', { style: LABEL_STYLE }, h('span', null, label), children, hint ? h('span', { style: HINT_STYLE }, hint) : null)
 }
 
+/**
+ * A text input backed by a datalist: clicking shows the known providers or
+ * models, typing still accepts a value the catalog does not advertise.
+ */
+const POPUP_STYLE = {
+  position: 'absolute',
+  top: 'calc(100% + 4px)',
+  left: 0,
+  right: 0,
+  zIndex: 40,
+  padding: 4,
+  borderRadius: 10,
+  border: '1px solid var(--dsw-alias-border-l2, #e5e6eb)',
+  background: 'var(--dsw-alias-bg-module-platform, #fff)',
+  boxShadow: '0 8px 24px rgba(0, 0, 0, .12)',
+  maxHeight: 240,
+  overflowY: 'auto',
+}
+
+function Chevron({ open }) {
+  return h(
+    'svg',
+    {
+      width: 12,
+      height: 12,
+      viewBox: '0 0 16 16',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeWidth: 1.8,
+      style: { transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .15s ease' },
+    },
+    h('path', { d: 'M4 6l4 4 4-4', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+  )
+}
+
+/**
+ * One themed combobox: the input stays editable (when `allowCustom`), the
+ * popup is a token-styled list rather than the OS select/datalist chrome.
+ */
+function Combo({ label, hint, value, placeholder, options, allowCustom = true, onChange }) {
+  const [open, setOpen] = react.useState(false)
+  const [active, setActive] = react.useState(-1)
+  const rootRef = react.useRef(null)
+
+  react.useEffect(() => {
+    if (!open) return undefined
+    const close = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) setOpen(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [open])
+
+  const choose = (next) => {
+    onChange(next)
+    setOpen(false)
+  }
+
+  return h(
+    Field,
+    { label, hint },
+    h(
+      'div',
+      { ref: rootRef, style: { position: 'relative' } },
+      h('input', {
+        type: 'text',
+        value,
+        placeholder,
+        readOnly: !allowCustom,
+        autoComplete: 'off',
+        onChange: (event) => {
+          if (!allowCustom) return
+          onChange(event.target.value)
+          setOpen(true)
+        },
+        onClick: () => setOpen((current) => !current),
+        onKeyDown: (event) => {
+          if (event.key === 'Escape') {
+            setOpen(false)
+            return
+          }
+          if (event.key === 'ArrowDown') {
+            event.preventDefault()
+            setOpen(true)
+            setActive((index) => Math.min(options.length - 1, index + 1))
+          } else if (event.key === 'ArrowUp') {
+            event.preventDefault()
+            setActive((index) => Math.max(0, index - 1))
+          } else if (event.key === 'Enter' && open && active >= 0 && options[active]) {
+            event.preventDefault()
+            choose(options[active].value)
+          }
+        },
+        style: {
+          ...FIELD_STYLE,
+          paddingRight: 34,
+          cursor: allowCustom ? 'text' : 'pointer',
+        },
+      }),
+      h(
+        'span',
+        {
+          style: {
+            position: 'absolute',
+            right: 10,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            pointerEvents: 'none',
+            color: 'var(--dsw-alias-label-tertiary, #86909c)',
+          },
+        },
+        h(Chevron, { open }),
+      ),
+      open && options.length > 0
+        ? h(
+            'div',
+            { style: POPUP_STYLE },
+            options.map((option, index) =>
+              h(
+                'button',
+                {
+                  key: option.value === '' ? '__auto' : option.value,
+                  type: 'button',
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => choose(option.value),
+                  onMouseEnter: () => setActive(index),
+                  style: {
+                    display: 'flex',
+                    width: '100%',
+                    border: 'none',
+                    padding: '7px 10px',
+                    borderRadius: 6,
+                    font: 'inherit',
+                    fontSize: 13,
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    background:
+                      option.value === value
+                        ? 'color-mix(in srgb, var(--dsw-alias-state-business-primary, #2f6fed) 10%, transparent)'
+                        : 'transparent',
+                    color:
+                      option.value === value
+                        ? 'var(--dsw-alias-state-business-primary, #2f6fed)'
+                        : 'var(--dsw-alias-label-primary, #1d2129)',
+                    outline: index === active ? '1px solid var(--dsw-alias-border-l2, #e5e6eb)' : 'none',
+                  },
+                },
+                option.label,
+              ),
+            ),
+          )
+        : null,
+    ),
+  )
+}
+
 function PredictionSettings() {
   const config = useConfig()
   const locale = useLocaleId()
@@ -586,6 +777,24 @@ function PredictionSettings() {
   const [draft, setDraft] = react.useState(null)
   const [status, setStatus] = react.useState('')
   const [busy, setBusy] = react.useState(false)
+  const [options, setOptions] = react.useState(() => configStore.getOptions())
+
+  react.useEffect(() => {
+    let alive = true
+    const refresh = () => {
+      configStore.loadOptions(true).then((value) => {
+        if (alive) setOptions(value)
+      })
+    }
+    // A provider added in another settings section must be visible here on the
+    // next visit, and on returning to the window, not after a restart.
+    refresh()
+    window.addEventListener('focus', refresh)
+    return () => {
+      alive = false
+      window.removeEventListener('focus', refresh)
+    }
+  }, [])
 
   react.useEffect(() => {
     if (!config || config.unavailable) return
@@ -621,6 +830,19 @@ function PredictionSettings() {
 
   const update = (patch) => setDraft({ ...draft, ...patch })
 
+  const providerChoices = (options ? options.providers : []).map((provider) => ({
+    value: provider.id,
+    label: provider.name && provider.name !== provider.id ? provider.name + ' · ' + provider.id : provider.id,
+  }))
+  const effectiveProvider = draft.provider || (options ? options.autoProvider : '')
+  const seenModels = new Set()
+  const modelChoices = []
+  for (const model of options ? options.models : []) {
+    if (model.provider !== effectiveProvider || seenModels.has(model.id)) continue
+    seenModels.add(model.id)
+    modelChoices.push({ value: model.id, label: model.name && model.name !== model.id ? model.name + ' · ' + model.id : model.id })
+  }
+
   return h(
     'section',
     { style: { display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 640, padding: '8px 0 24px' } },
@@ -644,42 +866,34 @@ function PredictionSettings() {
           onToggle: (enabled) => update({ enabled }),
         }),
       ),
-      h(
-        Field,
-        { label: words.provider, hint: words.providerHint },
-        h('input', {
-          type: 'text',
-          value: draft.provider,
-          placeholder: words.auto,
-          onChange: (event) => update({ provider: event.target.value }),
-          style: FIELD_STYLE,
-        }),
-      ),
-      h(
-        Field,
-        { label: words.model, hint: words.modelHint },
-        h('input', {
-          type: 'text',
-          value: draft.model,
-          placeholder: words.auto,
-          onChange: (event) => update({ model: event.target.value }),
-          style: FIELD_STYLE,
-        }),
-      ),
-      h(
-        Field,
-        { label: words.effort, hint: words.effortHint },
-        h(
-          'select',
-          {
-            value: draft.reasoningEffort,
-            onChange: (event) => update({ reasoningEffort: event.target.value }),
-            style: FIELD_STYLE,
-          },
-          h('option', { value: '' }, words.auto),
-          ...[['off'], ['none'], ['minimal'], ['low'], ['high']].map(([value]) => h('option', { key: value, value }, value)),
-        ),
-      ),
+      h(Combo, {
+        label: words.provider,
+        hint: words.providerHint,
+        value: draft.provider,
+        placeholder: words.auto,
+        options: [{ value: '', label: words.auto }].concat(providerChoices),
+        onChange: (provider) => update({ provider }),
+      }),
+      h(Combo, {
+        label: words.model,
+        hint: words.modelHint,
+        value: draft.model,
+        placeholder: words.auto,
+        options: [{ value: '', label: words.auto }].concat(modelChoices),
+        onChange: (model) => update({ model }),
+      }),
+      h(Combo, {
+        label: words.effort,
+        hint: words.effortHint,
+        value: draft.reasoningEffort,
+        placeholder: words.auto,
+        allowCustom: false,
+        options: [''].concat(['off', 'none', 'minimal', 'low', 'high']).map((value) => ({
+          value,
+          label: value === '' ? words.auto : value,
+        })),
+        onChange: (reasoningEffort) => update({ reasoningEffort }),
+      }),
     ),
     h(
       'div',

package/index.js

@@ -23,12 +23,13 @@
 import z from '@deepseek-ai/schemastery'
 
 export const name = 'composer-predictions'
-export const GENERATOR_VERSION = '0.1.0'
+export const GENERATOR_VERSION = '0.1.1'
 // webServer: the route; sessions: the transcript; llm: the model call.
 export const inject = ['webServer', 'sessions', 'llm']
 
 const PREDICT_PATH = '/composer-predictions/predict'
 const CONFIG_PATH = '/composer-predictions/config'
+const OPTIONS_PATH = '/composer-predictions/options'
 const BODY_LIMIT_BYTES = 8 * 1024
 
 const CHEAP_MODEL = /\b(flash|mini|small|lite|fast|haiku|nano)\b/i
@@ -737,6 +738,79 @@ export function sanitizeSettings(input) {
   return out
 }
 
+/** A provider that cannot enumerate models must not hang the settings page. */
+function withTimeout(promise, ms) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error('timeout')), ms)
+    Promise.resolve(promise).then(
+      (value) => {
+        clearTimeout(timer)
+        resolve(value)
+      },
+      (error) => {
+        clearTimeout(timer)
+        reject(error)
+      },
+    )
+  })
+}
+
+/**
+ * The provider/model catalog the settings page offers. Kept off the predict
+ * path: the dock asks for a suggestion on every mount and must stay fast.
+ */
+export async function collectOptions(ctx) {
+  // No cache: a provider added in Settings → Models must appear on the next
+  // open of this page, not after a TTL.
+  const llm = ctx && typeof ctx.get === 'function' ? ctx.get('llm') : undefined
+  const listed = llm && typeof llm.listProviders === 'function' ? llm.listProviders() : []
+  const providers = (Array.isArray(listed) ? listed : [])
+    .filter((provider) => provider && typeof provider.id === 'string')
+    .map((provider) => ({ id: provider.id, name: typeof provider.name === 'string' ? provider.name : provider.id }))
+  const models = []
+  if (llm && typeof llm.listModels === 'function') {
+    await Promise.all(
+      providers.map(async (provider) => {
+        try {
+          const list = await withTimeout(llm.listModels(provider.id), 3_000)
+          for (const model of Array.isArray(list) ? list : []) {
+            if (model && typeof model.id === 'string') {
+              models.push({ provider: provider.id, id: model.id, name: typeof model.name === 'string' ? model.name : model.id })
+            }
+          }
+        } catch {
+          // A provider with no reachable catalog simply contributes no suggestions.
+        }
+      }),
+    )
+  }
+  const selection = defaultSelection(ctx)
+  const value = {
+    providers,
+    models,
+    autoProvider: selection && typeof selection.provider === 'string' ? selection.provider : '',
+  }
+  return value
+}
+
+export function createOptionsHandler(ctx) {
+  return async function handle(request, response) {
+    if (request.method !== 'GET') {
+      response.writeHead(405, { allow: 'GET' }).end()
+      return
+    }
+    if (!requestAllowed(request)) {
+      send(response, 403, { error: 'forbidden' })
+      return
+    }
+    try {
+      send(response, 200, await collectOptions(ctx))
+    } catch (error) {
+      send(response, 500, { error: error && error.message ? error.message : String(error) })
+    }
+  }
+}
+
 /**
  * Settings endpoint. Writes go through the platform's configEditor, which
  * validates against the Config schema and persists the override in the
@@ -801,6 +875,7 @@ export function apply(ctx, config) {
       state.options = next
     },
   )
+  const optionsHandler = createOptionsHandler(ctx)
   ctx.effect(
     () => ctx.webServer.register({ kind: 'exact', path: PREDICT_PATH, handler: predictHandler }),
     'composer-predictions: predict route',
@@ -809,4 +884,8 @@ export function apply(ctx, config) {
     () => ctx.webServer.register({ kind: 'exact', path: CONFIG_PATH, handler: configHandler }),
     'composer-predictions: config route',
   )
+  ctx.effect(
+    () => ctx.webServer.register({ kind: 'exact', path: OPTIONS_PATH, handler: optionsHandler }),
+    'composer-predictions: options route',
+  )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lsfcy/dsh-composer-predictions",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
   "description": "Codex-style composer predictions for DeepSeek Harness: after a turn settles, the empty composer shows a dimmed suggestion of your next message; Tab accepts it.",

package/src/main.js

@@ -25,6 +25,7 @@ const createGhostLayer = globalThis.createComposerGhost
 
 const PREDICT_PATH = '/composer-predictions/predict'
 const CONFIG_PATH = '/composer-predictions/config'
+const OPTIONS_PATH = '/composer-predictions/options'
 const CLIENT_TIMEOUT_MS = 30_000
 const ATTACH_FRAMES = 120
 
@@ -39,6 +40,8 @@ const noSession = () => undefined
 const configStore = (() => {
   let snapshot = null
   let pending = null
+  let options = null
+  let optionsPending = null
   const listeners = new Set()
   const publish = (next) => {
     snapshot = next
@@ -78,6 +81,37 @@ const configStore = (() => {
         })
       return pending
     },
+    getOptions: () => options,
+    loadOptions(force = false) {
+      if (optionsPending) return optionsPending
+      if (!force && options) return Promise.resolve(options)
+      optionsPending = fetch(OPTIONS_PATH, {
+        headers: { accept: 'application/json' },
+        cache: 'no-store',
+        credentials: 'same-origin',
+      })
+        .then((response) => (response.ok ? response.json() : Promise.reject(new Error('HTTP ' + response.status))))
+        .then((payload) => {
+          options = {
+            providers: Array.isArray(payload && payload.providers) ? payload.providers : [],
+            models: Array.isArray(payload && payload.models) ? payload.models : [],
+            autoProvider: payload && typeof payload.autoProvider === 'string' ? payload.autoProvider : '',
+          }
+          return options
+        })
+        .catch((error) => {
+          console.warn(
+            '[composer-predictions] options load failed:',
+            error && error.message ? error.message : error,
+          )
+          options = { providers: [], models: [], autoProvider: '' }
+          return options
+        })
+        .finally(() => {
+          optionsPending = null
+        })
+      return optionsPending
+    },
     async save(patch) {
       const response = await fetch(CONFIG_PATH, {
         method: 'POST',
@@ -255,6 +289,163 @@ function Field({ label, hint, children }) {
   return h('label', { style: LABEL_STYLE }, h('span', null, label), children, hint ? h('span', { style: HINT_STYLE }, hint) : null)
 }
 
+/**
+ * A text input backed by a datalist: clicking shows the known providers or
+ * models, typing still accepts a value the catalog does not advertise.
+ */
+const POPUP_STYLE = {
+  position: 'absolute',
+  top: 'calc(100% + 4px)',
+  left: 0,
+  right: 0,
+  zIndex: 40,
+  padding: 4,
+  borderRadius: 10,
+  border: '1px solid var(--dsw-alias-border-l2, #e5e6eb)',
+  background: 'var(--dsw-alias-bg-module-platform, #fff)',
+  boxShadow: '0 8px 24px rgba(0, 0, 0, .12)',
+  maxHeight: 240,
+  overflowY: 'auto',
+}
+
+function Chevron({ open }) {
+  return h(
+    'svg',
+    {
+      width: 12,
+      height: 12,
+      viewBox: '0 0 16 16',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeWidth: 1.8,
+      style: { transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .15s ease' },
+    },
+    h('path', { d: 'M4 6l4 4 4-4', strokeLinecap: 'round', strokeLinejoin: 'round' }),
+  )
+}
+
+/**
+ * One themed combobox: the input stays editable (when `allowCustom`), the
+ * popup is a token-styled list rather than the OS select/datalist chrome.
+ */
+function Combo({ label, hint, value, placeholder, options, allowCustom = true, onChange }) {
+  const [open, setOpen] = react.useState(false)
+  const [active, setActive] = react.useState(-1)
+  const rootRef = react.useRef(null)
+
+  react.useEffect(() => {
+    if (!open) return undefined
+    const close = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) setOpen(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [open])
+
+  const choose = (next) => {
+    onChange(next)
+    setOpen(false)
+  }
+
+  return h(
+    Field,
+    { label, hint },
+    h(
+      'div',
+      { ref: rootRef, style: { position: 'relative' } },
+      h('input', {
+        type: 'text',
+        value,
+        placeholder,
+        readOnly: !allowCustom,
+        autoComplete: 'off',
+        onChange: (event) => {
+          if (!allowCustom) return
+          onChange(event.target.value)
+          setOpen(true)
+        },
+        onClick: () => setOpen((current) => !current),
+        onKeyDown: (event) => {
+          if (event.key === 'Escape') {
+            setOpen(false)
+            return
+          }
+          if (event.key === 'ArrowDown') {
+            event.preventDefault()
+            setOpen(true)
+            setActive((index) => Math.min(options.length - 1, index + 1))
+          } else if (event.key === 'ArrowUp') {
+            event.preventDefault()
+            setActive((index) => Math.max(0, index - 1))
+          } else if (event.key === 'Enter' && open && active >= 0 && options[active]) {
+            event.preventDefault()
+            choose(options[active].value)
+          }
+        },
+        style: {
+          ...FIELD_STYLE,
+          paddingRight: 34,
+          cursor: allowCustom ? 'text' : 'pointer',
+        },
+      }),
+      h(
+        'span',
+        {
+          style: {
+            position: 'absolute',
+            right: 10,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            pointerEvents: 'none',
+            color: 'var(--dsw-alias-label-tertiary, #86909c)',
+          },
+        },
+        h(Chevron, { open }),
+      ),
+      open && options.length > 0
+        ? h(
+            'div',
+            { style: POPUP_STYLE },
+            options.map((option, index) =>
+              h(
+                'button',
+                {
+                  key: option.value === '' ? '__auto' : option.value,
+                  type: 'button',
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => choose(option.value),
+                  onMouseEnter: () => setActive(index),
+                  style: {
+                    display: 'flex',
+                    width: '100%',
+                    border: 'none',
+                    padding: '7px 10px',
+                    borderRadius: 6,
+                    font: 'inherit',
+                    fontSize: 13,
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    background:
+                      option.value === value
+                        ? 'color-mix(in srgb, var(--dsw-alias-state-business-primary, #2f6fed) 10%, transparent)'
+                        : 'transparent',
+                    color:
+                      option.value === value
+                        ? 'var(--dsw-alias-state-business-primary, #2f6fed)'
+                        : 'var(--dsw-alias-label-primary, #1d2129)',
+                    outline: index === active ? '1px solid var(--dsw-alias-border-l2, #e5e6eb)' : 'none',
+                  },
+                },
+                option.label,
+              ),
+            ),
+          )
+        : null,
+    ),
+  )
+}
+
 function PredictionSettings() {
   const config = useConfig()
   const locale = useLocaleId()
@@ -262,6 +453,24 @@ function PredictionSettings() {
   const [draft, setDraft] = react.useState(null)
   const [status, setStatus] = react.useState('')
   const [busy, setBusy] = react.useState(false)
+  const [options, setOptions] = react.useState(() => configStore.getOptions())
+
+  react.useEffect(() => {
+    let alive = true
+    const refresh = () => {
+      configStore.loadOptions(true).then((value) => {
+        if (alive) setOptions(value)
+      })
+    }
+    // A provider added in another settings section must be visible here on the
+    // next visit, and on returning to the window, not after a restart.
+    refresh()
+    window.addEventListener('focus', refresh)
+    return () => {
+      alive = false
+      window.removeEventListener('focus', refresh)
+    }
+  }, [])
 
   react.useEffect(() => {
     if (!config || config.unavailable) return
@@ -297,6 +506,19 @@ function PredictionSettings() {
 
   const update = (patch) => setDraft({ ...draft, ...patch })
 
+  const providerChoices = (options ? options.providers : []).map((provider) => ({
+    value: provider.id,
+    label: provider.name && provider.name !== provider.id ? provider.name + ' · ' + provider.id : provider.id,
+  }))
+  const effectiveProvider = draft.provider || (options ? options.autoProvider : '')
+  const seenModels = new Set()
+  const modelChoices = []
+  for (const model of options ? options.models : []) {
+    if (model.provider !== effectiveProvider || seenModels.has(model.id)) continue
+    seenModels.add(model.id)
+    modelChoices.push({ value: model.id, label: model.name && model.name !== model.id ? model.name + ' · ' + model.id : model.id })
+  }
+
   return h(
     'section',
     { style: { display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 640, padding: '8px 0 24px' } },
@@ -320,42 +542,34 @@ function PredictionSettings() {
           onToggle: (enabled) => update({ enabled }),
         }),
       ),
-      h(
-        Field,
-        { label: words.provider, hint: words.providerHint },
-        h('input', {
-          type: 'text',
-          value: draft.provider,
-          placeholder: words.auto,
-          onChange: (event) => update({ provider: event.target.value }),
-          style: FIELD_STYLE,
-        }),
-      ),
-      h(
-        Field,
-        { label: words.model, hint: words.modelHint },
-        h('input', {
-          type: 'text',
-          value: draft.model,
-          placeholder: words.auto,
-          onChange: (event) => update({ model: event.target.value }),
-          style: FIELD_STYLE,
-        }),
-      ),
-      h(
-        Field,
-        { label: words.effort, hint: words.effortHint },
-        h(
-          'select',
-          {
-            value: draft.reasoningEffort,
-            onChange: (event) => update({ reasoningEffort: event.target.value }),
-            style: FIELD_STYLE,
-          },
-          h('option', { value: '' }, words.auto),
-          ...[['off'], ['none'], ['minimal'], ['low'], ['high']].map(([value]) => h('option', { key: value, value }, value)),
-        ),
-      ),
+      h(Combo, {
+        label: words.provider,
+        hint: words.providerHint,
+        value: draft.provider,
+        placeholder: words.auto,
+        options: [{ value: '', label: words.auto }].concat(providerChoices),
+        onChange: (provider) => update({ provider }),
+      }),
+      h(Combo, {
+        label: words.model,
+        hint: words.modelHint,
+        value: draft.model,
+        placeholder: words.auto,
+        options: [{ value: '', label: words.auto }].concat(modelChoices),
+        onChange: (model) => update({ model }),
+      }),
+      h(Combo, {
+        label: words.effort,
+        hint: words.effortHint,
+        value: draft.reasoningEffort,
+        placeholder: words.auto,
+        allowCustom: false,
+        options: [''].concat(['off', 'none', 'minimal', 'low', 'high']).map((value) => ({
+          value,
+          label: value === '' ? words.auto : value,
+        })),
+        onChange: (reasoningEffort) => update({ reasoningEffort }),
+      }),
     ),
     h(
       'div',