Enhance API key handling in settings and vocab services: Update key retrieval logic to improve validation and status reporting. Introduce new localization strings for key status messages in English, German, and Spanish. Update LanguageAssistantView to display key status dynamically, enhancing user feedback on API key management.

frontend/src/i18n/locales/de/settings.json

@@ -169,7 +169,10 @@
             "save": "Speichern",
             "saved": "Einstellungen gespeichert.",
             "saveError": "Speichern fehlgeschlagen.",
-            "confirmClear": "API-Schlüssel wirklich löschen?"
+            "confirmClear": "API-Schlüssel wirklich löschen?",
+            "keyStatusStored": "API-Schlüssel gespeichert.",
+            "keyStatusInvalid": "Ein gespeicherter API-Schlüssel ist vorhanden, kann aber nicht gelesen werden. Bitte neu speichern.",
+            "keyStatusMissing": "Derzeit ist kein API-Schlüssel gespeichert."
         },
         "interests": {
             "title": "Interessen",

frontend/src/i18n/locales/en/settings.json

@@ -169,7 +169,10 @@
             "save": "Save",
             "saved": "Settings saved.",
             "saveError": "Could not save.",
-            "confirmClear": "Really delete the API key?"
+            "confirmClear": "Really delete the API key?",
+            "keyStatusStored": "API key stored.",
+            "keyStatusInvalid": "A stored API key exists, but it cannot be read. Please save it again.",
+            "keyStatusMissing": "No API key is currently stored."
         },
         "interests": {
             "title": "Interests",
@@ -198,4 +201,4 @@
             }
         }
     }
-}
+}

frontend/src/i18n/locales/es/settings.json

@@ -169,7 +169,10 @@
             "save": "Guardar",
             "saved": "Ajustes guardados.",
             "saveError": "No se pudo guardar.",
-            "confirmClear": "¿Eliminar realmente la clave API?"
+            "confirmClear": "¿Eliminar realmente la clave API?",
+            "keyStatusStored": "Clave API guardada.",
+            "keyStatusInvalid": "Existe una clave API guardada, pero no se puede leer. Guárdala de nuevo.",
+            "keyStatusMissing": "Actualmente no hay ninguna clave API guardada."
         },
         "interests": {
             "title": "Intereses",

frontend/src/views/settings/LanguageAssistantView.vue

@@ -51,6 +51,9 @@
                         :placeholder="apiKeyPlaceholder"
                     />
                     <span class="language-assistant-settings__hint">{{ $t('settings.languageAssistant.apiKeyHint') }}</span>
+                    <span class="language-assistant-settings__hint" :class="`language-assistant-settings__key-status language-assistant-settings__key-status--${keyStatus}`">
+                        {{ keyStatusLabel }}
+                    </span>
                 </label>
             </div>
 
@@ -84,6 +87,7 @@ export default {
             },
             hasKey: false,
             keyLast4: null,
+            keyStatus: 'missing',
             saving: false,
             loadError: null
         };
@@ -100,6 +104,14 @@ export default {
                 });
             }
             return this.$t('settings.languageAssistant.apiKeyPlaceholderNew');
+        },
+        keyStatusLabel() {
+            const statusKey = {
+                stored: 'settings.languageAssistant.keyStatusStored',
+                invalid: 'settings.languageAssistant.keyStatusInvalid',
+                missing: 'settings.languageAssistant.keyStatusMissing'
+            }[this.keyStatus] || 'settings.languageAssistant.keyStatusMissing';
+            return this.$t(statusKey);
         }
     },
     async mounted() {
@@ -115,6 +127,7 @@ export default {
                 this.form.model = data.model || 'gpt-4o-mini';
                 this.hasKey = data.hasKey;
                 this.keyLast4 = data.keyLast4;
+                this.keyStatus = data.keyStatus || (data.hasKey ? 'stored' : 'missing');
                 this.form.apiKey = '';
                 this.form.clearKey = false;
             } catch (e) {
@@ -208,6 +221,18 @@ export default {
     font-size: 0.8rem;
     opacity: 0.8;
 }
+.language-assistant-settings__key-status {
+    font-weight: 600;
+}
+.language-assistant-settings__key-status--stored {
+    color: #2e7d32;
+}
+.language-assistant-settings__key-status--invalid {
+    color: #c62828;
+}
+.language-assistant-settings__key-status--missing {
+    color: #8a6d3b;
+}
 .language-assistant-settings__toggle {
     display: flex;
     align-items: center;