From 09f2470c221291eff7a4e4385538aac4773bd9e2 Mon Sep 17 00:00:00 2001
From: Matt Van Horn <mvanhorn@users.noreply.github.com>
Date: Mon, 16 Mar 2026 23:26:23 -0700
Subject: [PATCH] fix(stage-pages): use placeholderLocalized from provider
 config for API key input (#1391)

Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Authored-by-agent: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../settings/providers/chat/[providerId].vue   | 18 +++++++++++++++++-
 .../speech/openai-compatible-audio-speech.vue  | 18 +++++++++++++++++-
 .../transcription/comet-api-transcription.vue  | 18 +++++++++++++++++-
 .../openai-compatible-audio-transcription.vue  | 18 +++++++++++++++++-
 4 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/packages/stage-pages/src/pages/settings/providers/chat/[providerId].vue b/packages/stage-pages/src/pages/settings/providers/chat/[providerId].vue
index 360a65bd3..0446459a3 100644
--- a/packages/stage-pages/src/pages/settings/providers/chat/[providerId].vue
+++ b/packages/stage-pages/src/pages/settings/providers/chat/[providerId].vue
@@ -11,6 +11,7 @@ import {
   ProviderValidationAlerts,
 } from '@proj-airi/stage-ui/components'
 import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
+import { getDefinedProvider } from '@proj-airi/stage-ui/libs'
 import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
@@ -60,6 +61,21 @@ const {
   runManualTest,
 } = useProviderValidation(providerId)
 
+const apiKeyPlaceholder = computed(() => {
+  const definition = getDefinedProvider(providerId)
+  if (!definition?.createProviderConfig)
+    return 'sk-...'
+
+  const schema = definition.createProviderConfig({ t }) as any
+  const shape = typeof schema?.shape === 'function' ? schema.shape() : schema?.shape
+  const apiKeySchema = shape?.apiKey
+  if (!apiKeySchema)
+    return 'sk-...'
+
+  const meta = typeof apiKeySchema.meta === 'function' ? apiKeySchema.meta() : undefined
+  return typeof meta?.placeholderLocalized === 'string' ? meta.placeholderLocalized : 'sk-...'
+})
+
 function goToModelSelection() {
   activeProvider.value = providerId
   router.push('/settings/modules/consciousness')
@@ -81,7 +97,7 @@ function goToModelSelection() {
         <ProviderApiKeyInput
           v-model="apiKey"
           :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
+          :placeholder="apiKeyPlaceholder"
         />
       </ProviderBasicSettings>
 
diff --git a/packages/stage-pages/src/pages/settings/providers/speech/openai-compatible-audio-speech.vue b/packages/stage-pages/src/pages/settings/providers/speech/openai-compatible-audio-speech.vue
index 7fc9e2733..07979c648 100644
--- a/packages/stage-pages/src/pages/settings/providers/speech/openai-compatible-audio-speech.vue
+++ b/packages/stage-pages/src/pages/settings/providers/speech/openai-compatible-audio-speech.vue
@@ -7,6 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
+import { getDefinedProvider } from '@proj-airi/stage-ui/libs'
 import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldInput, FieldRange } from '@proj-airi/ui'
@@ -155,6 +156,21 @@ const {
   validationMessage,
   forceValid,
 } = useProviderValidation(providerId)
+
+const apiKeyPlaceholder = computed(() => {
+  const definition = getDefinedProvider(providerId)
+  if (!definition?.createProviderConfig)
+    return 'sk-...'
+
+  const schema = definition.createProviderConfig({ t }) as any
+  const shape = typeof schema?.shape === 'function' ? schema.shape() : schema?.shape
+  const apiKeySchema = shape?.apiKey
+  if (!apiKeySchema)
+    return 'sk-...'
+
+  const meta = typeof apiKeySchema.meta === 'function' ? apiKeySchema.meta() : undefined
+  return typeof meta?.placeholderLocalized === 'string' ? meta.placeholderLocalized : 'sk-...'
+})
 </script>
 
 <template>
@@ -162,7 +178,7 @@ const {
     :provider-id="providerId"
     :default-model="defaultModel"
     :additional-settings="defaultVoiceSettings"
-    placeholder="sk-..."
+    :placeholder="apiKeyPlaceholder"
   >
     <!-- Voice settings specific to OpenAI Compatible -->
     <template #voice-settings>
diff --git a/packages/stage-pages/src/pages/settings/providers/transcription/comet-api-transcription.vue b/packages/stage-pages/src/pages/settings/providers/transcription/comet-api-transcription.vue
index 4ca22d00a..ae8dfce97 100644
--- a/packages/stage-pages/src/pages/settings/providers/transcription/comet-api-transcription.vue
+++ b/packages/stage-pages/src/pages/settings/providers/transcription/comet-api-transcription.vue
@@ -13,6 +13,7 @@ import {
   TranscriptionPlayground,
 } from '@proj-airi/stage-ui/components'
 import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
+import { getDefinedProvider } from '@proj-airi/stage-ui/libs'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldInput } from '@proj-airi/ui'
@@ -81,6 +82,21 @@ const {
   handleResetSettings,
   forceValid,
 } = useProviderValidation(providerId)
+
+const apiKeyPlaceholder = computed(() => {
+  const definition = getDefinedProvider(providerId)
+  if (!definition?.createProviderConfig)
+    return 'sk-...'
+
+  const schema = definition.createProviderConfig({ t }) as any
+  const shape = typeof schema?.shape === 'function' ? schema.shape() : schema?.shape
+  const apiKeySchema = shape?.apiKey
+  if (!apiKeySchema)
+    return 'sk-...'
+
+  const meta = typeof apiKeySchema.meta === 'function' ? apiKeySchema.meta() : undefined
+  return typeof meta?.placeholderLocalized === 'string' ? meta.placeholderLocalized : 'sk-...'
+})
 </script>
 
 <template>
@@ -98,7 +114,7 @@ const {
         <ProviderApiKeyInput
           v-model="apiKey"
           :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
+          :placeholder="apiKeyPlaceholder"
         />
         <FieldInput
           v-model="model"
diff --git a/packages/stage-pages/src/pages/settings/providers/transcription/openai-compatible-audio-transcription.vue b/packages/stage-pages/src/pages/settings/providers/transcription/openai-compatible-audio-transcription.vue
index 7df1901b0..1e3b6d130 100644
--- a/packages/stage-pages/src/pages/settings/providers/transcription/openai-compatible-audio-transcription.vue
+++ b/packages/stage-pages/src/pages/settings/providers/transcription/openai-compatible-audio-transcription.vue
@@ -13,6 +13,7 @@ import {
   TranscriptionPlayground,
 } from '@proj-airi/stage-ui/components'
 import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
+import { getDefinedProvider } from '@proj-airi/stage-ui/libs'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldInput, FieldSelect } from '@proj-airi/ui'
@@ -109,6 +110,21 @@ const {
   forceValid,
 } = useProviderValidation(providerId)
 
+const apiKeyPlaceholder = computed(() => {
+  const definition = getDefinedProvider(providerId)
+  if (!definition?.createProviderConfig)
+    return 'sk-...'
+
+  const schema = definition.createProviderConfig({ t }) as any
+  const shape = typeof schema?.shape === 'function' ? schema.shape() : schema?.shape
+  const apiKeySchema = shape?.apiKey
+  if (!apiKeySchema)
+    return 'sk-...'
+
+  const meta = typeof apiKeySchema.meta === 'function' ? apiKeySchema.meta() : undefined
+  return typeof meta?.placeholderLocalized === 'string' ? meta.placeholderLocalized : 'sk-...'
+})
+
 // Expand Advanced section if there's a base URL validation error
 const shouldExpandAdvanced = computed(() => {
   if (!validationMessage.value)
@@ -195,7 +211,7 @@ watch(model, () => {
           <ProviderApiKeyInput
             v-model="apiKey"
             :provider-name="providerMetadata?.localizedName"
-            placeholder="sk-..."
+            :placeholder="apiKeyPlaceholder"
           />
           <!-- Model selection: Use dropdown if models are available, otherwise use text input -->
           <FieldSelect