feat(ui): add model field to the image-recognition settings card

The card now configures the provider endpoint, API key, and model, mirroring
the provider Config.

Co-Authored-By: Claude <noreply@anthropic.com>

packages/client/ui-settings-plugins/src/client/ImageRecognitionCard.tsx

@@ -56,6 +56,18 @@ export function ImageRecognitionCard(props: ImageRecognitionCardProps) {
         onEdit={(text) => { props.edit('baseURL', text) }}
         onReset={() => { props.resetField('baseURL') }}
       />
+      <ValueField
+        id="plugin-config-image-recognition-model"
+        label={t('imageRecognitionModel')}
+        hint={t('imageRecognitionModelHint')}
+        overriddenLabel={t('overridden')}
+        resetLabel={t('reset')}
+        invalidLabel={t('invalidNumber')}
+        disabled={disabled}
+        {...state.model}
+        onEdit={(text) => { props.edit('model', text) }}
+        onReset={() => { props.resetField('model') }}
+      />
     </PluginCard>
   )
 }

packages/client/ui-settings-plugins/src/client/image-recognition-card-controller.ts

@@ -34,6 +34,8 @@ export interface ImageRecognitionSettings {
   apiKeyEnv?: string
   /** Provider endpoint; blank inherits the provider default. */
   baseURL?: string
+  /** Vision model name; blank inherits the provider default. */
+  model?: string
 }
 
 /** What the credentials domain last reported, and for which reference. */
@@ -50,6 +52,8 @@ interface CredentialState {
 export interface ImageRecognitionCardState extends CardShell {
   /** Provider endpoint. */
   baseURL: CardFieldState
+  /** Vision model name. */
+  model: CardFieldState
   /** The staged credential, which starts blank on every load. */
   apiKey: CardFieldState
   /** Whether the Host reports a credential configured for the referenced key. */
@@ -82,7 +86,7 @@ export class ImageRecognitionCardController {
   ) {
     this.form = new CardForm(
       scope,
-      [textField('baseURL')],
+      [textField('baseURL'), textField('model')],
       [{ field: API_KEY_FIELD, write: text => this.writeKey(text) }],
     )
     this.store = this.form.bind(() => this.projection())
@@ -94,6 +98,7 @@ export class ImageRecognitionCardController {
     return {
       ...this.form.shell(),
       baseURL: this.form.field('baseURL'),
+      model: this.form.field('model'),
       apiKey: this.form.field(API_KEY_FIELD),
       apiKeyConfigured: this.credential.configured,
       apiKeyWritable: this.credential.writable,

packages/client/ui-settings-plugins/src/client/locales.ts

@@ -14,6 +14,7 @@ export type PluginsSettingsLocaleKey =
   | 'imageRecognitionTitle' | 'imageRecognitionDescription'
   | 'imageRecognitionApiKey' | 'imageRecognitionApiKeyHint' | 'imageRecognitionApiKeySet' | 'imageRecognitionApiKeyUnset'
   | 'imageRecognitionBaseUrl' | 'imageRecognitionBaseUrlHint'
+  | 'imageRecognitionModel' | 'imageRecognitionModelHint'
 
 /** English copy. */
 export const en: Record<PluginsSettingsLocaleKey, string> = {
@@ -62,6 +63,8 @@ export const en: Record<PluginsSettingsLocaleKey, string> = {
   imageRecognitionApiKeyUnset: 'No key is configured; recognition is unavailable until one is.',
   imageRecognitionBaseUrl: 'Endpoint',
   imageRecognitionBaseUrlHint: 'Leave blank to use the provider default.',
+  imageRecognitionModel: 'Model',
+  imageRecognitionModelHint: 'Vision model name; leave blank to use the provider default.',
 }
 
 /** Simplified Chinese copy. */
@@ -111,4 +114,6 @@ export const zh: Record<PluginsSettingsLocaleKey, string> = {
   imageRecognitionApiKeyUnset: '未配置密钥；配置之前图像识别不可用。',
   imageRecognitionBaseUrl: '接口地址',
   imageRecognitionBaseUrlHint: '留空则使用提供方默认地址。',
+  imageRecognitionModel: '模型',
+  imageRecognitionModelHint: '视觉模型名称；留空则使用提供方默认。',
 }