fix(ai): simplify model configuration

- Separate model, connection, and advanced settings

- Resolve capabilities and output limits from provider catalogs

- Keep custom model compatibility declarations explicit

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-## 0.14.0 - 2026-08-07
+## 0.14.0 - 2026-08-10
 
 ### Breaking changes
 
@@ -40,6 +40,7 @@
 
 ### Changed
 
+- Simplify AI model setup with clearly separated model, connection, and advanced settings, automatic compatibility and output-limit defaults for recognized models, and an explicit custom-model option.
 - Redesign the editor chrome and Design panel with denser, better-aligned controls, clearer selection and section states, improved menus and overlays, consistent light/dark theming, and better keyboard and screen-reader support.
 - Choose Freeform, vertical, horizontal, or grid flow directly from the contextual Layout section, with sizing controls grouped alongside it.
 - Choose Auto width, Auto height, or Fixed size directly from the Layout section for text layers.

packages/core/src/constants.ts

@@ -188,6 +188,8 @@ export interface ModelOption {
   id: string
   name: string
   tag?: string
+  capabilities?: readonly ('tools' | 'vision')[]
+  recommendedMaxOutputTokens?: number
 }
 
 export interface AIProviderDef {

packages/vue/src/i18n/locales/de/dialogs.json

@@ -85,7 +85,11 @@
   "editModel": "Modell bearbeiten",
   "modelEditorDescription": "Anbieter, Modell, Zugangsdaten und Fähigkeiten.",
   "modelName": "Name",
+  "modelConfiguration": "Modell",
+  "connectionSettings": "Verbindung",
   "modelCapabilities": "Fähigkeiten",
+  "modelCapabilitiesDetected": "Aus dem ausgewählten Modell erkannt.",
+  "modelCapabilitiesManual": "Kompatibilität für dieses benutzerdefinierte Modell angeben.",
   "modelCapabilityTools": "Werkzeugaufrufe",
   "modelCapabilityVision": "Bildeingabe",
   "modelCapabilityToolsShort": "Werkzeuge",
@@ -137,6 +141,14 @@
   "apiType": "API Type",
   "baseURL": "Base URL",
   "modelID": "Model ID",
+  "customModelID": "Benutzerdefinierte Modell-ID",
+  "customModel": "Benutzerdefiniertes Modell…",
+  "advancedModelSettings": "Erweiterte Einstellungen",
+  "outputLimit": "Ausgabelimit",
+  "outputLimitAutomatic": "Automatische Empfehlung",
+  "supported": "Unterstützt",
+  "unsupported": "Nicht unterstützt",
+  "tokens": "Token",
   "maxOutputTokens": "Max output tokens",
   "clear": "Clear",
   "keySavedReplace": "Key saved — enter new to replace",

packages/vue/src/i18n/locales/es/dialogs.json

@@ -85,7 +85,11 @@
   "editModel": "Editar modelo",
   "modelEditorDescription": "Proveedor, modelo, credenciales y capacidades.",
   "modelName": "Nombre",
+  "modelConfiguration": "Modelo",
+  "connectionSettings": "Conexión",
   "modelCapabilities": "Capacidades",
+  "modelCapabilitiesDetected": "Detectadas a partir del modelo seleccionado.",
+  "modelCapabilitiesManual": "Declara la compatibilidad de este modelo personalizado.",
   "modelCapabilityTools": "Uso de herramientas",
   "modelCapabilityVision": "Entrada de imágenes",
   "modelCapabilityToolsShort": "Herramientas",
@@ -137,6 +141,14 @@
   "apiType": "Tipo API",
   "baseURL": "URL base",
   "modelID": "ID Modelo",
+  "customModelID": "ID de modelo personalizado",
+  "customModel": "Modelo personalizado…",
+  "advancedModelSettings": "Ajustes avanzados",
+  "outputLimit": "Límite de salida",
+  "outputLimitAutomatic": "Recomendación automática",
+  "supported": "Compatible",
+  "unsupported": "No compatible",
+  "tokens": "tokens",
   "maxOutputTokens": "Tokens de salida máx.",
   "clear": "Limpiar",
   "keySavedReplace": "Clave guardada - introduce una nueva para reemplazarla",

packages/vue/src/i18n/locales/fr/dialogs.json

@@ -85,7 +85,11 @@
   "editModel": "Modifier le modèle",
   "modelEditorDescription": "Fournisseur, modèle, identifiants et capacités.",
   "modelName": "Nom",
+  "modelConfiguration": "Modèle",
+  "connectionSettings": "Connexion",
   "modelCapabilities": "Capacités",
+  "modelCapabilitiesDetected": "Détectées à partir du modèle sélectionné.",
+  "modelCapabilitiesManual": "Déclarez la compatibilité de ce modèle personnalisé.",
   "modelCapabilityTools": "Appels d’outils",
   "modelCapabilityVision": "Entrée d’images",
   "modelCapabilityToolsShort": "Outils",
@@ -137,6 +141,14 @@
   "apiType": "API Type",
   "baseURL": "Base URL",
   "modelID": "Model ID",
+  "customModelID": "ID du modèle personnalisé",
+  "customModel": "Modèle personnalisé…",
+  "advancedModelSettings": "Paramètres avancés",
+  "outputLimit": "Limite de sortie",
+  "outputLimitAutomatic": "Recommandation automatique",
+  "supported": "Pris en charge",
+  "unsupported": "Non pris en charge",
+  "tokens": "jetons",
   "maxOutputTokens": "Max output tokens",
   "clear": "Clear",
   "keySavedReplace": "Key saved — enter new to replace",

packages/vue/src/i18n/locales/it/dialogs.json

@@ -85,7 +85,11 @@
   "editModel": "Modifica modello",
   "modelEditorDescription": "Provider, modello, credenziali e funzionalità.",
   "modelName": "Nome",
+  "modelConfiguration": "Modello",
+  "connectionSettings": "Connessione",
   "modelCapabilities": "Funzionalità",
+  "modelCapabilitiesDetected": "Rilevate dal modello selezionato.",
+  "modelCapabilitiesManual": "Dichiara la compatibilità di questo modello personalizzato.",
   "modelCapabilityTools": "Chiamate agli strumenti",
   "modelCapabilityVision": "Input immagini",
   "modelCapabilityToolsShort": "Strumenti",
@@ -137,6 +141,14 @@
   "apiType": "API Type",
   "baseURL": "Base URL",
   "modelID": "Model ID",
+  "customModelID": "ID modello personalizzato",
+  "customModel": "Modello personalizzato…",
+  "advancedModelSettings": "Impostazioni avanzate",
+  "outputLimit": "Limite di output",
+  "outputLimitAutomatic": "Raccomandazione automatica",
+  "supported": "Supportato",
+  "unsupported": "Non supportato",
+  "tokens": "token",
   "maxOutputTokens": "Max output tokens",
   "clear": "Clear",
   "keySavedReplace": "Key saved — enter new to replace",

packages/vue/src/i18n/locales/ja/dialogs.json

@@ -85,7 +85,11 @@
   "editModel": "モデルを編集",
   "modelEditorDescription": "プロバイダー、モデル、認証情報、機能。",
   "modelName": "名前",
+  "modelConfiguration": "モデル",
+  "connectionSettings": "接続",
   "modelCapabilities": "機能",
+  "modelCapabilitiesDetected": "選択したモデルから検出されました。",
+  "modelCapabilitiesManual": "このカスタムモデルの互換性を指定します。",
   "modelCapabilityTools": "ツール呼び出し",
   "modelCapabilityVision": "画像入力",
   "modelCapabilityToolsShort": "ツール",
@@ -137,6 +141,14 @@
   "apiType": "APIタイプ",
   "baseURL": "ベースURL",
   "modelID": "モデルID",
+  "customModelID": "カスタムモデル ID",
+  "customModel": "カスタムモデル…",
+  "advancedModelSettings": "詳細設定",
+  "outputLimit": "出力上限",
+  "outputLimitAutomatic": "自動推奨値",
+  "supported": "対応",
+  "unsupported": "非対応",
+  "tokens": "トークン",
   "maxOutputTokens": "最大出力トークン数",
   "clear": "クリア",
   "keySavedReplace": "キーが保存されました - 上書きするには新しいキーを入力してください",

packages/vue/src/i18n/locales/pl/dialogs.json

@@ -85,7 +85,11 @@
   "editModel": "Edytuj model",
   "modelEditorDescription": "Dostawca, model, dane logowania i możliwości.",
   "modelName": "Nazwa",
+  "modelConfiguration": "Model",
+  "connectionSettings": "Połączenie",
   "modelCapabilities": "Możliwości",
+  "modelCapabilitiesDetected": "Wykryte na podstawie wybranego modelu.",
+  "modelCapabilitiesManual": "Określ zgodność tego modelu niestandardowego.",
   "modelCapabilityTools": "Wywołania narzędzi",
   "modelCapabilityVision": "Obrazy wejściowe",
   "modelCapabilityToolsShort": "Narzędzia",
@@ -137,6 +141,14 @@
   "apiType": "API Type",
   "baseURL": "Base URL",
   "modelID": "Model ID",
+  "customModelID": "Identyfikator modelu niestandardowego",
+  "customModel": "Model niestandardowy…",
+  "advancedModelSettings": "Ustawienia zaawansowane",
+  "outputLimit": "Limit wyjścia",
+  "outputLimitAutomatic": "Automatyczna rekomendacja",
+  "supported": "Obsługiwane",
+  "unsupported": "Nieobsługiwane",
+  "tokens": "tokenów",
   "maxOutputTokens": "Max output tokens",
   "clear": "Clear",
   "keySavedReplace": "Key saved — enter new to replace",

packages/vue/src/i18n/locales/ru/dialogs.json

@@ -85,7 +85,11 @@
   "editModel": "Изменить модель",
   "modelEditorDescription": "Провайдер, модель, учётные данные и возможности.",
   "modelName": "Название",
+  "modelConfiguration": "Модель",
+  "connectionSettings": "Подключение",
   "modelCapabilities": "Возможности",
+  "modelCapabilitiesDetected": "Определены по выбранной модели.",
+  "modelCapabilitiesManual": "Укажите совместимость этой пользовательской модели.",
   "modelCapabilityTools": "Вызов инструментов",
   "modelCapabilityVision": "Ввод изображений",
   "modelCapabilityToolsShort": "Инструменты",
@@ -137,6 +141,14 @@
   "apiType": "API Type",
   "baseURL": "Base URL",
   "modelID": "Model ID",
+  "customModelID": "ID пользовательской модели",
+  "customModel": "Пользовательская модель…",
+  "advancedModelSettings": "Расширенные настройки",
+  "outputLimit": "Лимит вывода",
+  "outputLimitAutomatic": "Автоматическая рекомендация",
+  "supported": "Поддерживается",
+  "unsupported": "Не поддерживается",
+  "tokens": "токенов",
   "maxOutputTokens": "Max output tokens",
   "clear": "Clear",
   "keySavedReplace": "Key saved — enter new to replace",

packages/vue/src/i18n/locales/zh-cn/dialogs.json

@@ -85,7 +85,11 @@
   "editModel": "编辑模型",
   "modelEditorDescription": "提供商、模型、凭据和能力。",
   "modelName": "名称",
+  "modelConfiguration": "模型",
+  "connectionSettings": "连接",
   "modelCapabilities": "能力",
+  "modelCapabilitiesDetected": "根据所选模型检测。",
+  "modelCapabilitiesManual": "声明此自定义模型的兼容性。",
   "modelCapabilityTools": "工具调用",
   "modelCapabilityVision": "图像输入",
   "modelCapabilityToolsShort": "工具",
@@ -137,6 +141,14 @@
   "apiType": "API 类型",
   "baseURL": "Base URL",
   "modelID": "模型 ID",
+  "customModelID": "自定义模型 ID",
+  "customModel": "自定义模型…",
+  "advancedModelSettings": "高级设置",
+  "outputLimit": "输出限制",
+  "outputLimitAutomatic": "自动建议",
+  "supported": "支持",
+  "unsupported": "不支持",
+  "tokens": "token",
   "maxOutputTokens": "最大输出 token 数",
   "clear": "清除",
   "keySavedReplace": "密钥已保存，输入新密钥以替换",

packages/vue/src/i18n/messages/dialogs.ts

@@ -134,7 +134,11 @@ export const dialogMessageDefaults = {
   editModel: 'Edit model',
   modelEditorDescription: 'Provider, model, credentials, and capabilities.',
   modelName: 'Name',
+  modelConfiguration: 'Model',
+  connectionSettings: 'Connection',
   modelCapabilities: 'Capabilities',
+  modelCapabilitiesDetected: 'Detected from the selected model.',
+  modelCapabilitiesManual: 'Declare compatibility for this custom model.',
   modelCapabilityTools: 'Tool calling',
   modelCapabilityVision: 'Image input',
   modelCapabilityToolsShort: 'Tools',
@@ -187,6 +191,14 @@ export const dialogMessageDefaults = {
   apiType: 'API Type',
   baseURL: 'Base URL',
   modelID: 'Model ID',
+  customModelID: 'Custom model ID',
+  customModel: 'Custom model…',
+  advancedModelSettings: 'Advanced settings',
+  outputLimit: 'Output limit',
+  outputLimitAutomatic: 'Automatic recommendation',
+  supported: 'Supported',
+  unsupported: 'Not supported',
+  tokens: 'tokens',
   maxOutputTokens: 'Max output tokens',
   clear: 'Clear',
   keySavedReplace: 'Key saved — enter new to replace',

src/app/ai/chat/provider-models.ts

@@ -7,6 +7,12 @@ type OpenRouterModel = {
   id?: unknown
   name?: unknown
   supported_parameters?: unknown
+  architecture?: {
+    input_modalities?: unknown
+  }
+  top_provider?: {
+    max_completion_tokens?: unknown
+  }
 }
 
 type OpenRouterModelsResponse = {
@@ -31,9 +37,20 @@ function isToolCapableOpenRouterModel(model: OpenRouterModel) {
 export function normalizeOpenRouterModel(model: OpenRouterModel): ModelOption | null {
   if (!isToolCapableOpenRouterModel(model)) return null
   if (typeof model.id !== 'string' || !model.id) return null
+  const inputModalities = model.architecture?.input_modalities
+  const maxOutputTokens = model.top_provider?.max_completion_tokens
   return {
     id: model.id,
-    name: typeof model.name === 'string' && model.name ? model.name : model.id
+    name: typeof model.name === 'string' && model.name ? model.name : model.id,
+    capabilities: [
+      'tools',
+      ...(Array.isArray(inputModalities) && inputModalities.includes('image')
+        ? (['vision'] as const)
+        : [])
+    ],
+    ...(typeof maxOutputTokens === 'number' && Number.isFinite(maxOutputTokens)
+      ? { recommendedMaxOutputTokens: Math.min(128_000, Math.max(1024, maxOutputTokens)) }
+      : {})
   }
 }
 

src/app/ai/models/catalog.ts

@@ -0,0 +1,104 @@
+import type { AIProviderID, ModelOption } from '@open-pencil/core/constants'
+
+import { readCacheJson, writeCacheJson } from '@/app/cache'
+
+const MODELS_DEV_URL = 'https://models.dev/api.json'
+const MODELS_DEV_CACHE_KEY = 'models-dev/catalog'
+const MODELS_DEV_CACHE_TTL_MS = 24 * 60 * 60 * 1000
+
+const PROVIDER_KEYS: Partial<Record<AIProviderID, readonly string[]>> = {
+  openrouter: ['openrouter'],
+  anthropic: ['anthropic'],
+  openai: ['openai'],
+  google: ['google'],
+  deepseek: ['deepseek'],
+  zai: ['zhipuai'],
+  minimax: ['minimax']
+}
+
+type ModelsDevModel = {
+  id?: unknown
+  name?: unknown
+  attachment?: unknown
+  tool_call?: unknown
+  limit?: { output?: unknown }
+}
+
+type ModelsDevProvider = {
+  models?: Record<string, ModelsDevModel>
+}
+
+type ModelsDevCatalog = Record<string, ModelsDevProvider>
+
+let catalogPromise: Promise<ModelsDevCatalog | null> | null = null
+
+function normalizeModel(id: string, model: ModelsDevModel): ModelOption {
+  const capabilities: ('tools' | 'vision')[] = []
+  if (model.tool_call === true) capabilities.push('tools')
+  if (model.attachment === true) capabilities.push('vision')
+  const output = model.limit?.output
+  return {
+    id,
+    name: typeof model.name === 'string' && model.name ? model.name : id,
+    capabilities,
+    ...(typeof output === 'number' && Number.isFinite(output)
+      ? { recommendedMaxOutputTokens: Math.min(128_000, Math.max(1024, output)) }
+      : {})
+  }
+}
+
+async function loadCatalog(fetcher: typeof fetch): Promise<ModelsDevCatalog | null> {
+  const cached = await readCacheJson<ModelsDevCatalog>(
+    MODELS_DEV_CACHE_KEY,
+    MODELS_DEV_CACHE_TTL_MS
+  )
+  if (cached) return cached
+  try {
+    const response = await fetcher(MODELS_DEV_URL)
+    if (!response.ok) throw new Error(`models.dev catalog request failed: ${response.status}`)
+    const catalog = (await response.json()) as ModelsDevCatalog
+    await writeCacheJson(MODELS_DEV_CACHE_KEY, catalog)
+    return catalog
+  } catch {
+    return null
+  }
+}
+
+function modelIDCandidates(providerKey: string, modelID: string): string[] {
+  const unprefixed = modelID.startsWith(`${providerKey}/`)
+    ? modelID.slice(providerKey.length + 1)
+    : modelID
+  return [
+    ...new Set([
+      modelID,
+      unprefixed,
+      unprefixed.replace(/-\d{8}$/, ''),
+      unprefixed.replace(/:[a-z0-9-]+$/, '')
+    ])
+  ]
+}
+
+export async function resolveModelsDevModel(
+  providerID: AIProviderID,
+  modelID: string,
+  fetcher: typeof fetch = fetch
+): Promise<ModelOption | null> {
+  const providerKeys = PROVIDER_KEYS[providerID]
+  if (!providerKeys?.length || !modelID) return null
+  catalogPromise ??= loadCatalog(fetcher)
+  const catalog = await catalogPromise
+  if (!catalog) return null
+
+  for (const providerKey of providerKeys) {
+    const models = catalog[providerKey]?.models
+    for (const candidate of modelIDCandidates(providerKey, modelID)) {
+      const matched = models?.[candidate]
+      if (matched) return normalizeModel(modelID, matched)
+    }
+  }
+  return null
+}
+
+export function resetModelsDevCatalogForTests(): void {
+  catalogPromise = null
+}

src/components/settings/models/ProfileEditor.vue

@@ -4,13 +4,17 @@ import {
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogDescription,
-  AlertDialogTitle
+  AlertDialogTitle,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger
 } from 'reka-ui'
 import { useI18n } from '@open-pencil/vue'
 
 import { ACP_AGENTS, AI_PROVIDERS, type AIProviderID } from '@open-pencil/core/constants'
 
 import { refreshAIProviderStatus } from '@/app/ai/chat/storage'
+import { resolveModelsDevModel } from '@/app/ai/models/catalog'
 import {
   testProviderConnection,
   type ProviderConnectionTestFailureReason
@@ -38,6 +42,9 @@ import AppSelect from '@/components/ui/AppSelect.vue'
 import AppSwitch from '@/components/ui/AppSwitch.vue'
 import { AppAlertDialogRoot, AppDialogBody, AppDialogFooter } from '@/components/ui/dialog'
 
+const CUSTOM_MODEL_VALUE = '__custom__'
+const DEFAULT_MAX_OUTPUT_TOKENS = 16_384
+
 const { profileId } = defineProps<{ profileId?: string }>()
 const emit = defineEmits<{ done: []; deleted: [] }>()
 const { dialogs } = useI18n()
@@ -48,6 +55,9 @@ const saveError = ref<string | null>(null)
 const connectionTestStatus = ref<'idle' | 'testing' | 'success' | 'error'>('idle')
 const connectionTestReason = ref<ProviderConnectionTestFailureReason | null>(null)
 const deleteOpen = ref(false)
+const advancedOpen = ref(Boolean(draft.customModelID.trim()))
+const customModelSelected = ref(Boolean(draft.customModelID.trim()))
+const catalogModel = ref<(typeof providerDef.value.models)[number] | null>(null)
 
 const providerDef = computed(
   () => AI_PROVIDERS.find((provider) => provider.id === draft.providerID) ?? AI_PROVIDERS[0]
@@ -58,8 +68,28 @@ const providerDisplayName = computed(() => {
   const agentID = draft.providerID.slice('acp:'.length)
   return ACP_AGENTS.find((agent) => agent.id === agentID)?.name ?? draft.providerID
 })
-const modelOptions = computed(() =>
+const modelOptions = computed(() => [
-  providerDef.value.models.map((model) => ({ value: model.id, label: model.name }))
+  ...providerDef.value.models.map((model) => ({ value: model.id, label: model.name })),
+  ...(providerDef.value.supportsCustomModel
+    ? [{ value: CUSTOM_MODEL_VALUE, label: dialogs.value.customModel }]
+    : [])
+])
+const selectedModelValue = computed(() =>
+  customModelSelected.value ? CUSTOM_MODEL_VALUE : draft.modelID
+)
+const knownModel = computed(() => {
+  if (draft.customModelID.trim()) return catalogModel.value
+  return (
+    catalogModel.value ??
+    providerDef.value.models.find((model) => model.id === draft.modelID) ??
+    null
+  )
+})
+const knownCapabilities = computed<AIModelCapability[]>(() => [
+  ...(knownModel.value?.capabilities ?? ['tools'])
+])
+const outputTokenRecommendation = computed(
+  () => knownModel.value?.recommendedMaxOutputTokens ?? DEFAULT_MAX_OUTPUT_TOKENS
 )
 const modelDisplayName = computed(() => {
   const modelId = draft.customModelID.trim() || draft.modelID
@@ -72,13 +102,18 @@ const visionEnabled = capabilityModel('vision')
 const canSave = computed(
   () =>
     Boolean(draft.name.trim()) &&
-    (isACP.value || Boolean(draft.customModelID.trim() || draft.modelID.trim()))
+    (isACP.value ||
+      (customModelSelected.value
+        ? Boolean(draft.customModelID.trim())
+        : Boolean(draft.modelID.trim())))
 )
 const canTest = computed(() => {
   if (isACP.value) return false
   if (!keyInput.value.trim() && !hasExistingKey.value) return false
   if (providerDef.value.supportsCustomBaseURL && !draft.customBaseURL.trim()) return false
-  return Boolean(draft.customModelID.trim() || draft.modelID.trim())
+  return customModelSelected.value
+    ? Boolean(draft.customModelID.trim())
+    : Boolean(draft.modelID.trim())
 })
 
 function capabilityModel(capability: AIModelCapability) {
@@ -103,6 +138,24 @@ async function refreshKeyStatus(): Promise<void> {
   keyStatus.value = connection ? await modelConnectionCredentialStatus(connection.id) : 'missing'
 }
 
+function effectiveModelID(): string {
+  return customModelSelected.value ? draft.customModelID.trim() : draft.modelID.trim()
+}
+
+async function refreshCatalogModel(): Promise<void> {
+  const providerID = draft.providerID
+  const modelID = effectiveModelID()
+  catalogModel.value = await resolveModelsDevModel(providerID, modelID)
+  if (providerID !== draft.providerID || modelID !== effectiveModelID()) return
+  applyKnownModelMetadata()
+}
+
+function applyKnownModelMetadata(): void {
+  if (!knownModel.value) return
+  draft.capabilities = [...knownCapabilities.value]
+  draft.maxOutputTokens = outputTokenRecommendation.value
+}
+
 function updateProvider(providerID: AIProviderID): void {
   draft.providerID = providerID
   draft.sourceConnectionId = null
@@ -111,17 +164,34 @@ function updateProvider(providerID: AIProviderID): void {
   draft.customModelID = ''
   draft.customBaseURL = ''
   draft.customAPIType = 'completions'
+  advancedOpen.value = false
+  customModelSelected.value = false
   if (providerID.startsWith('acp:')) {
     draft.capabilities = ['tools']
     if (!draft.name.trim()) draft.name = providerDisplayName.value
+  } else {
+    applyKnownModelMetadata()
   }
   keyInput.value = ''
   resetConnectionTest()
+  void refreshCatalogModel()
   void refreshKeyStatus()
 }
 
 function updateModel(modelID: string): void {
+  if (modelID === CUSTOM_MODEL_VALUE) {
+    customModelSelected.value = true
+    draft.customModelID = ''
+    advancedOpen.value = true
+    catalogModel.value = null
+    resetConnectionTest()
+    return
+  }
   draft.modelID = modelID
+  customModelSelected.value = false
+  draft.customModelID = ''
+  applyKnownModelMetadata()
+  void refreshCatalogModel()
   if (!draft.name.trim()) draft.name = modelDisplayName.value
   resetConnectionTest()
 }
@@ -129,6 +199,7 @@ function updateModel(modelID: string): void {
 async function save(): Promise<void> {
   saveError.value = null
   try {
+    applyKnownModelMetadata()
     if (!draft.name.trim()) draft.name = modelDisplayName.value || providerDisplayName.value
     const profile = saveModelProfileDraft(draft)
     if (keyInput.value.trim()) {
@@ -188,6 +259,13 @@ watch(
   () => [draft.customBaseURL, draft.customModelID, draft.customAPIType, draft.modelID],
   resetConnectionTest
 )
+watch(
+  () => draft.customModelID,
+  () => {
+    if (customModelSelected.value) void refreshCatalogModel()
+  }
+)
+void refreshCatalogModel()
 void refreshKeyStatus()
 </script>
 
@@ -235,15 +313,41 @@ void refreshKeyStatus()
       </ProviderSettingsField>
 
       <template v-if="!isACP">
+        <div class="flex items-center gap-2 pt-1">
+          <p class="text-[10px] font-medium uppercase tracking-wide text-muted">
+            {{ dialogs.modelConfiguration }}
+          </p>
+          <div class="h-px flex-1 bg-border" />
+        </div>
+
         <ProviderSettingsField v-if="modelOptions.length" :label="dialogs.modelID">
           <AppSelect
-            :model-value="draft.modelID"
+            :model-value="selectedModelValue"
             :options="modelOptions"
             :label="dialogs.modelID"
             @update:model-value="updateModel(String($event))"
           />
         </ProviderSettingsField>
 
+        <ProviderSettingsField
+          v-if="providerDef.supportsCustomModel && selectedModelValue === CUSTOM_MODEL_VALUE"
+          :label="dialogs.customModelID"
+        >
+          <ProviderSettingsInput
+            v-model="draft.customModelID"
+            :aria-label="dialogs.customModelID"
+            data-test-id="provider-settings-custom-model"
+            placeholder="e.g. llama-3.3-70b"
+          />
+        </ProviderSettingsField>
+
+        <div class="flex items-center gap-2 pt-1">
+          <p class="text-[10px] font-medium uppercase tracking-wide text-muted">
+            {{ dialogs.connectionSettings }}
+          </p>
+          <div class="h-px flex-1 bg-border" />
+        </div>
+
         <ProviderSettingsField v-if="providerDef.supportsCustomBaseURL" :label="dialogs.baseURL">
           <ProviderSettingsInput
             v-model="draft.customBaseURL"
@@ -252,15 +356,6 @@ void refreshKeyStatus()
           />
         </ProviderSettingsField>
 
-        <ProviderSettingsField v-if="providerDef.supportsCustomModel" :label="dialogs.modelID">
-          <ProviderSettingsInput
-            v-model="draft.customModelID"
-            :aria-label="dialogs.modelID"
-            data-test-id="provider-settings-custom-model"
-            placeholder="e.g. llama-3.3-70b"
-          />
-        </ProviderSettingsField>
-
         <ProviderSettingsField
           v-if="draft.providerID === 'openai-compatible'"
           :label="dialogs.apiType"
@@ -275,17 +370,6 @@ void refreshKeyStatus()
           />
         </ProviderSettingsField>
 
-        <ProviderSettingsField :label="dialogs.maxOutputTokens">
-          <ProviderSettingsInput
-            v-model.number="draft.maxOutputTokens"
-            :aria-label="dialogs.maxOutputTokens"
-            type="number"
-            :min="1024"
-            :max="128000"
-            :step="1024"
-          />
-        </ProviderSettingsField>
-
         <ProviderSettingsKeyField
           v-model="keyInput"
           :label="dialogs.apiKey"
@@ -305,19 +389,58 @@ void refreshKeyStatus()
         />
       </template>
 
-      <div class="rounded border border-border p-2.5">
+      <CollapsibleRoot v-model:open="advancedOpen" class="rounded border border-border">
-        <p class="mb-2 text-[11px] font-medium text-surface">{{ dialogs.modelCapabilities }}</p>
+        <CollapsibleTrigger
+          class="flex w-full items-center gap-2 px-2.5 py-2 text-left text-[11px] text-muted hover:text-surface"
+        >
+          <icon-lucide-chevron-right
+            class="size-3 transition-transform [[data-state=open]>&]:rotate-90"
+          />
+          {{ dialogs.advancedModelSettings }}
+        </CollapsibleTrigger>
+        <CollapsibleContent class="border-t border-border p-2.5">
+          <div class="flex flex-col gap-3">
+            <div>
+              <p class="text-[11px] font-medium text-surface">{{ dialogs.modelCapabilities }}</p>
+              <p class="mt-0.5 text-[10px] text-muted">
+                {{
+                  knownModel ? dialogs.modelCapabilitiesDetected : dialogs.modelCapabilitiesManual
+                }}
+              </p>
+            </div>
+
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between gap-3">
                 <span class="text-[11px] text-muted">{{ dialogs.modelCapabilityTools }}</span>
-            <AppSwitch v-model="toolsEnabled" :label="dialogs.modelCapabilityTools" />
+                <span v-if="knownModel" class="text-[10px] text-surface">
+                  {{
+                    knownCapabilities.includes('tools') ? dialogs.supported : dialogs.unsupported
+                  }}
+                </span>
+                <AppSwitch v-else v-model="toolsEnabled" :label="dialogs.modelCapabilityTools" />
               </div>
               <div class="flex items-center justify-between gap-3">
                 <span class="text-[11px] text-muted">{{ dialogs.modelCapabilityVision }}</span>
-            <AppSwitch v-model="visionEnabled" :label="dialogs.modelCapabilityVision" />
+                <span v-if="knownModel" class="text-[10px] text-surface">
+                  {{
+                    knownCapabilities.includes('vision') ? dialogs.supported : dialogs.unsupported
+                  }}
+                </span>
+                <AppSwitch v-else v-model="visionEnabled" :label="dialogs.modelCapabilityVision" />
               </div>
             </div>
+
+            <div class="border-t border-border pt-2.5">
+              <p class="text-[11px] font-medium text-surface">{{ dialogs.outputLimit }}</p>
+              <p class="mt-0.5 text-[10px] text-muted">
+                {{ dialogs.outputLimitAutomatic }} ·
+                {{ outputTokenRecommendation.toLocaleString() }}
+                {{ dialogs.tokens }}
+              </p>
             </div>
+          </div>
+        </CollapsibleContent>
+      </CollapsibleRoot>
 
       <p v-if="saveError" class="text-[10px] text-danger" role="alert">{{ saveError }}</p>
     </div>

tests/e2e/chat/panel.spec.ts

@@ -242,6 +242,8 @@ test('OpenRouter accepts a custom model ID from provider settings', async () =>
   await page.keyboard.press('Escape')
   await page.getByTestId('provider-settings-trigger').click()
   await page.locator('[data-model-id]').first().click()
+  await page.getByLabel('Model ID').click()
+  await page.getByRole('option', { name: 'Custom model…' }).click()
   const customModelInput = page.getByTestId('provider-settings-custom-model')
   await expect(customModelInput).toBeVisible()
   await customModelInput.fill(customModel)
@@ -253,7 +255,10 @@ test('OpenRouter accepts a custom model ID from provider settings', async () =>
 
   await page.getByTestId('provider-settings-trigger').click()
   await page.locator('[data-model-id]').first().click()
-  await page.getByTestId('provider-settings-custom-model').fill('')
+  const savedCustomModelInput = page.getByTestId('provider-settings-custom-model')
+  await savedCustomModelInput.fill('')
+  await page.getByRole('combobox', { name: 'Model ID' }).click()
+  await page.getByRole('option', { name: /Claude Sonnet 4\.6/ }).click()
   await page.getByRole('button', { name: 'Save model' }).click()
   await page.getByTestId('app-settings-done').click()
 

tests/engine/app/ai/catalog.test.ts

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, test } from 'bun:test'
+
+import { resetModelsDevCatalogForTests, resolveModelsDevModel } from '@/app/ai/models/catalog'
+
+function catalogResponse(body: unknown): typeof fetch {
+  return (async () => new Response(JSON.stringify(body), { status: 200 })) as typeof fetch
+}
+
+afterEach(() => resetModelsDevCatalogForTests())
+
+describe('models.dev catalog', () => {
+  test('resolves provider model capabilities and output limits', async () => {
+    const model = await resolveModelsDevModel(
+      'anthropic',
+      'claude-sonnet-4-6-20260301',
+      catalogResponse({
+        anthropic: {
+          models: {
+            'claude-sonnet-4-6': {
+              name: 'Claude Sonnet 4.6',
+              tool_call: true,
+              attachment: true,
+              limit: { output: 64_000 }
+            }
+          }
+        }
+      })
+    )
+
+    expect(model).toEqual({
+      id: 'claude-sonnet-4-6-20260301',
+      name: 'Claude Sonnet 4.6',
+      capabilities: ['tools', 'vision'],
+      recommendedMaxOutputTokens: 64_000
+    })
+  })
+
+  test('returns null when the provider or model is unknown', async () => {
+    expect(
+      await resolveModelsDevModel('openai-compatible', 'local', catalogResponse({}))
+    ).toBeNull()
+  })
+})

tests/engine/app/ai/model.test.ts

@@ -114,9 +114,16 @@ describe('normalizeOpenRouterModel', () => {
       normalizeOpenRouterModel({
         id: 'meta-llama/llama-3.3-70b-instruct',
         name: 'Llama 3.3 70B Instruct',
-        supported_parameters: ['tools']
+        supported_parameters: ['tools'],
+        architecture: { input_modalities: ['text', 'image'] },
+        top_provider: { max_completion_tokens: 32_768 }
+      })
+    ).toEqual({
+      id: 'meta-llama/llama-3.3-70b-instruct',
+      name: 'Llama 3.3 70B Instruct',
+      capabilities: ['tools', 'vision'],
+      recommendedMaxOutputTokens: 32_768
     })
-    ).toEqual({ id: 'meta-llama/llama-3.3-70b-instruct', name: 'Llama 3.3 70B Instruct' })
   })
 
   test('skips OpenRouter models without tool support', () => {