fix: fully mask web secret previews

webui/src/features/account/AddKeyModal.jsx

@@ -1,12 +1,15 @@
 import { X } from 'lucide-react'
 import { v4 as uuidv4 } from 'uuid'
 
+import { maskSecret } from '../../utils/maskSecret'
+
 export default function AddKeyModal({ show, t, editingKey, newKey, setNewKey, loading, onClose, onAdd }) {
     if (!show) {
         return null
     }
 
     const isEditing = Boolean(editingKey?.key)
+    const displayKey = isEditing ? maskSecret(editingKey?.key || newKey.key) : newKey.key
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in">
@@ -25,7 +28,7 @@ export default function AddKeyModal({ show, t, editingKey, newKey, setNewKey, lo
                                 type="text"
                                 className={isEditing ? "input-field bg-muted/30 flex-1 cursor-not-allowed" : "input-field bg-[#09090b] flex-1"}
                                 placeholder={isEditing ? t('accountManager.keyReadonlyPlaceholder') : t('accountManager.newKeyPlaceholder')}
-                                value={newKey.key}
+                                value={displayKey}
                                 onChange={e => setNewKey({ ...newKey, key: e.target.value })}
                                 autoFocus={!isEditing}
                                 readOnly={isEditing}

webui/src/features/account/ApiKeysPanel.jsx

@@ -2,6 +2,8 @@ import { useState } from 'react'
 import { Check, ChevronDown, Copy, Pencil, Plus, Trash2 } from 'lucide-react'
 import clsx from 'clsx'
 
+import { maskSecret } from '../../utils/maskSecret'
+
 function fallbackCopyText(text) {
     const textArea = document.createElement('textarea')
     textArea.value = text
@@ -102,7 +104,7 @@ export default function ApiKeysPanel({
                                         className="font-mono text-sm bg-muted/50 px-3 py-1 rounded inline-block hover:bg-muted transition-colors"
                                         title={t('accountManager.copyKeyTitle')}
                                     >
-                                        {(item.key || '').slice(0, 16)}****
+                                        {maskSecret(item.key)}
                                     </button>
                                     <div className="text-sm text-muted-foreground truncate">{item.remark || '-'}</div>
                                     {copiedKey === item.key && (

webui/src/features/apiTester/ConfigPanel.jsx

@@ -10,6 +10,8 @@ import {
 } from 'lucide-react'
 import clsx from 'clsx'
 
+import { maskSecret } from '../../utils/maskSecret'
+
 export default function ConfigPanel({
     t,
     configExpanded,
@@ -40,6 +42,7 @@ export default function ConfigPanel({
     }
     const selectedModel = models.find(m => m.id === model) || models[0]
     const SelectedModelIcon = selectedModel ? (iconMap[selectedModel.icon] || MessageSquare) : MessageSquare
+    const defaultKeyPreview = maskSecret(config.keys?.[0])
 
     return (
         <div className={clsx(
@@ -158,7 +161,7 @@ export default function ConfigPanel({
                             autoComplete="off"
                             spellCheck={false}
                             className="w-full h-10 px-3 bg-muted/30 border border-border rounded-lg text-sm font-mono placeholder:text-muted-foreground/40 focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring transition-all"
-                            placeholder={config.keys?.[0] ? t('apiTester.apiKeyDefault', { suffix: config.keys[0].slice(-6) }) : t('apiTester.apiKeyPlaceholder')}
+                            placeholder={defaultKeyPreview ? t('apiTester.apiKeyDefault', { preview: defaultKeyPreview }) : t('apiTester.apiKeyPlaceholder')}
                             value={apiKey}
                             onChange={e => setApiKey(e.target.value)}
                         />