feat: load available models.

Author: knightedcodemonkey

src/modules/chat/api/completions.js

@@ -1,4 +1,10 @@
-import { chatCompletionsUrl, chatModelOptions, defaultChatModel } from './constants.js'
+import {
+  chatCompletionsUrl,
+  chatModelOptions,
+  defaultChatModel,
+  isFreeChatModel,
+} from './constants.js'
+import { fetchChatModelOptions } from './models.js'
 import {
   buildChatRequestHeaders,
   parseErrorResponse,
@@ -445,4 +451,11 @@ const requestChatCompletion = async ({
   }
 }
 
-export { chatModelOptions, defaultChatModel, requestChatCompletion, streamChatCompletion }
+export {
+  chatModelOptions,
+  defaultChatModel,
+  fetchChatModelOptions,
+  isFreeChatModel,
+  requestChatCompletion,
+  streamChatCompletion,
+}

src/modules/chat/api/constants.js

@@ -1,4 +1,5 @@
 export const chatCompletionsUrl = 'https://openrouter.ai/api/v1/chat/completions'
+export const chatModelsUrl = 'https://openrouter.ai/api/v1/models'
 export const openRouterKeysUrl = 'https://openrouter.ai/keys'
 
 /* The free router auto-selects a free model, so it survives free-slug churn. */

src/modules/chat/api/models.js

@@ -0,0 +1,85 @@
+import { chatModelOptions, chatModelsUrl, defaultChatModel } from './constants.js'
+
+const toText = value => (typeof value === 'string' ? value.trim() : '')
+
+const supportsTools = model => {
+  const supportedParameters = Array.isArray(model?.supported_parameters)
+    ? model.supported_parameters
+    : []
+
+  return supportedParameters.some(parameter =>
+    typeof parameter === 'string' ? parameter.toLowerCase() === 'tools' : false,
+  )
+}
+
+const isFreeModel = model => {
+  const pricing = model?.pricing
+  if (!pricing || typeof pricing !== 'object') {
+    return false
+  }
+
+  return pricing.prompt === '0' && pricing.completion === '0'
+}
+
+const sortModelEntries = entries => {
+  return [...entries].sort((left, right) => {
+    if (left.isFree !== right.isFree) {
+      return left.isFree ? -1 : 1
+    }
+
+    return left.id.localeCompare(right.id)
+  })
+}
+
+const normalizeModelOptions = models => {
+  const normalizedModels = Array.isArray(models) ? models : []
+  const byModelId = new Map()
+
+  for (const model of normalizedModels) {
+    const modelId = toText(model?.id)
+    if (!modelId || !supportsTools(model)) {
+      continue
+    }
+
+    byModelId.set(modelId, {
+      id: modelId,
+      isFree: isFreeModel(model),
+    })
+  }
+
+  const sortedModelIds = sortModelEntries(Array.from(byModelId.values())).map(
+    entry => entry.id,
+  )
+
+  if (sortedModelIds.length === 0) {
+    return chatModelOptions
+  }
+
+  return [...new Set([defaultChatModel, ...sortedModelIds])]
+}
+
+const buildCatalogRequestHeaders = token => {
+  const normalizedToken = toText(token)
+  if (!normalizedToken) {
+    return undefined
+  }
+
+  return {
+    Authorization: `Bearer ${normalizedToken}`,
+  }
+}
+
+export const fetchChatModelOptions = async ({ token, signal } = {}) => {
+  const response = await fetch(chatModelsUrl, {
+    method: 'GET',
+    headers: buildCatalogRequestHeaders(token),
+    signal,
+  })
+
+  if (!response.ok) {
+    throw new Error(`Model catalog request failed with status ${response.status}`)
+  }
+
+  const body = await response.json()
+  return normalizeModelOptions(body?.data)
+}

src/modules/chat/drawer.js

@@ -1,20 +1,15 @@
-import {
-  chatModelOptions,
-  defaultChatModel,
-  requestChatCompletion,
-  streamChatCompletion,
-} from './api/completions.js'
+import { requestChatCompletion, streamChatCompletion } from './api/completions.js'
 import {
   formatModelAccessErrorMessage,
   isCredentialError,
   isModelAccessError,
   isModelAccessStatusMessage,
   toChatText,
-  toModelId,
   toRepositoryLabel,
   toRepositoryUrl,
 } from './utils.js'
 import { createChatKeyControls } from './key-controls.js'
+import { createChatModelPicker } from './model-picker.js'
 import {
   buildActiveTabEditorContext,
   normalizeWorkspaceTabContext,
@@ -177,28 +172,35 @@ export const createChatDrawer = ({
     pendingAbortController = null
   }
 
-  const setModelSelectDisabled = isDisabled => {
-    if (!(modelSelect instanceof HTMLSelectElement)) {
-      return
-    }
-
-    modelSelect.disabled = isDisabled
-  }
-
   const keyControls = createChatKeyControls({
     root: keyRoot,
     input: keyInput,
     addButton: keyAddButton,
     deleteButton: keyDeleteButton,
     onKeyChange: nextKey => {
-      syncModelSelectionForKey(nextKey)
+      modelPicker.invalidateCatalogCache()
+      modelPicker.syncModelSelectionForKey(nextKey)
       syncComposerAvailability()
+
+      if (open) {
+        void modelPicker.loadModelOptionsFromCatalog({ force: true })
+      }
     },
   })
 
   const getChatKey = () => keyControls.getKey()
   const hasChatKey = () => keyControls.hasKey()
 
+  const modelPicker = createChatModelPicker({
+    modelSelect,
+    getChatKey,
+    resetModelAccessStatus: () => {
+      if (isModelAccessStatusMessage(statusNode?.textContent)) {
+        setChatStatus('Idle', 'neutral')
+      }
+    },
+  })
+
   const syncComposerAvailability = () => {
     const keyPresent = hasChatKey()
 
@@ -211,57 +213,7 @@ export const createChatDrawer = ({
     }
   }
 
-  const replaceModelOptions = ({ modelIds, selectedModel }) => {
-    if (!(modelSelect instanceof HTMLSelectElement)) {
-      return
-    }
-
-    const nextSelectedModel = toModelId(selectedModel)
-    const nextModelIds = [...new Set([defaultChatModel, ...modelIds])]
-
-    modelSelect.replaceChildren()
-
-    for (const modelId of nextModelIds) {
-      const option = document.createElement('option')
-      option.value = modelId
-      option.textContent = modelId
-      option.selected = modelId === nextSelectedModel
-      modelSelect.append(option)
-    }
-
-    if (!nextModelIds.includes(nextSelectedModel)) {
-      modelSelect.value = defaultChatModel
-    }
-  }
-
-  const getSelectedModel = () => {
-    if (!(modelSelect instanceof HTMLSelectElement)) {
-      return defaultChatModel
-    }
-
-    return toModelId(modelSelect.value)
-  }
-
-  const initializeModelOptions = () => {
-    replaceModelOptions({
-      modelIds: chatModelOptions,
-      selectedModel: defaultChatModel,
-    })
-  }
-
-  const syncModelSelectionForKey = key => {
-    const keyPresent = typeof key === 'string' && key.trim().length > 0
-
-    setModelSelectDisabled(!keyPresent)
-
-    if (!keyPresent && modelSelect instanceof HTMLSelectElement) {
-      modelSelect.value = defaultChatModel
-    }
-
-    if (keyPresent && isModelAccessStatusMessage(statusNode?.textContent)) {
-      setChatStatus('Idle', 'neutral')
-    }
-  }
+  const getSelectedModel = () => modelPicker.getSelectedModel()
 
   const setOpen = nextOpen => {
     open = nextOpen === true
@@ -280,6 +232,10 @@ export const createChatDrawer = ({
     if (open && promptInput instanceof HTMLTextAreaElement) {
       promptInput.focus()
     }
+
+    if (open) {
+      void modelPicker.loadModelOptionsFromCatalog()
+    }
   }
 
   const setChatStatus = (text, level = 'neutral') => {
@@ -989,8 +945,8 @@ export const createChatDrawer = ({
 
   toggleButton?.setAttribute('aria-expanded', 'false')
   drawer?.setAttribute('hidden', '')
-  initializeModelOptions()
-  syncModelSelectionForKey(getChatKey())
+  modelPicker.initializeModelOptions()
+  modelPicker.syncModelSelectionForKey(getChatKey())
   syncComposerAvailability()
   syncRepositoryLabel()
   ensureUndoActionsNode()