Merge pull request #279 from CJackHwang/codex/add-api-key-name-handling-in-webui

feat(account): add structured API key and account name/remark support

webui/src/features/account/AccountManagerContainer.jsx

@@ -30,7 +30,10 @@ export default function AccountManagerContainer({ config, onRefresh, onMessage,
 
     const {
         showAddKey,
-        setShowAddKey,
+        openAddKey,
+        openEditKey,
+        closeKeyModal,
+        editingKey,
         showAddAccount,
         setShowAddAccount,
         newKey,
@@ -94,7 +97,8 @@ export default function AccountManagerContainer({ config, onRefresh, onMessage,
                 config={config}
                 keysExpanded={keysExpanded}
                 setKeysExpanded={setKeysExpanded}
-                setShowAddKey={setShowAddKey}
+                onAddKey={openAddKey}
+                onEditKey={openEditKey}
                 copiedKey={copiedKey}
                 setCopiedKey={setCopiedKey}
                 onDeleteKey={deleteKey}
@@ -133,10 +137,11 @@ export default function AccountManagerContainer({ config, onRefresh, onMessage,
             <AddKeyModal
                 show={showAddKey}
                 t={t}
+                editingKey={editingKey}
                 newKey={newKey}
                 setNewKey={setNewKey}
                 loading={loading}
-                onClose={() => setShowAddKey(false)}
+                onClose={closeKeyModal}
                 onAdd={addKey}
             />
 

webui/src/features/account/AccountsTable.jsx

@@ -118,6 +118,7 @@ export default function AccountsTable({
                                         runtimeUnknown ? "bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]" : "bg-amber-500"
                                     )} />
                                     <div className="min-w-0">
+                                        <div className="text-sm font-medium truncate">{acc.name || '-'}</div>
                                         <div
                                             className="font-medium truncate flex items-center gap-1.5 cursor-pointer hover:text-primary transition-colors group"
                                             onClick={() => copyId(id)}
@@ -128,6 +129,9 @@ export default function AccountsTable({
                                                 : <Copy className="w-3 h-3 opacity-0 group-hover:opacity-50 shrink-0 transition-opacity" />
                                             }
                                         </div>
+                                        {acc.remark && (
+                                            <div className="text-xs text-muted-foreground truncate mt-0.5">{acc.remark}</div>
+                                        )}
                                         <div className="flex items-center gap-2 text-xs text-muted-foreground mt-0.5">
                                             <span>{acc.test_status === 'failed' ? t('accountManager.testStatusFailed') : isActive ? t('accountManager.sessionActive') : runtimeUnknown ? t('accountManager.runtimeStatusUnknown') : t('accountManager.reauthRequired')}</span>
                                             {acc.token_preview && (

webui/src/features/account/AddAccountModal.jsx

@@ -23,6 +23,26 @@ export default function AddAccountModal({
                     </button>
                 </div>
                 <div className="p-6 space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.nameOptional')}</label>
+                        <input
+                            type="text"
+                            className="input-field"
+                            placeholder={t('accountManager.namePlaceholder')}
+                            value={newAccount.name}
+                            onChange={e => setNewAccount({ ...newAccount, name: e.target.value })}
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.remarkOptional')}</label>
+                        <input
+                            type="text"
+                            className="input-field"
+                            placeholder={t('accountManager.remarkPlaceholder')}
+                            value={newAccount.remark}
+                            onChange={e => setNewAccount({ ...newAccount, remark: e.target.value })}
+                        />
+                    </div>
                     <div>
                         <label className="block text-sm font-medium mb-1.5">{t('accountManager.emailOptional')}</label>
                         <input

webui/src/features/account/AddKeyModal.jsx

@@ -1,45 +1,75 @@
 import { X } from 'lucide-react'
 
-export default function AddKeyModal({ show, t, newKey, setNewKey, loading, onClose, onAdd }) {
+export default function AddKeyModal({ show, t, editingKey, newKey, setNewKey, loading, onClose, onAdd }) {
     if (!show) {
         return null
     }
 
+    const isEditing = Boolean(editingKey?.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">
             <div className="bg-card w-full max-w-md rounded-xl border border-border shadow-2xl overflow-hidden animate-in zoom-in-95">
                 <div className="p-4 border-b border-border flex justify-between items-center">
-                    <h3 className="font-semibold">{t('accountManager.modalAddKeyTitle')}</h3>
+                    <h3 className="font-semibold">{isEditing ? t('accountManager.modalEditKeyTitle') : t('accountManager.modalAddKeyTitle')}</h3>
                     <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
                         <X className="w-5 h-5" />
                     </button>
                 </div>
                 <div className="p-6 space-y-4">
                     <div>
-                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.newKeyLabel')}</label>
+                        <label className="block text-sm font-medium mb-1.5">{isEditing ? t('accountManager.keyLabel') : t('accountManager.newKeyLabel')}</label>
                         <div className="flex gap-2">
                             <input
                                 type="text"
-                                className="input-field bg-[#09090b] flex-1"
-                                placeholder={t('accountManager.newKeyPlaceholder')}
-                                value={newKey}
-                                onChange={e => setNewKey(e.target.value)}
-                                autoFocus
+                                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}
+                                onChange={e => setNewKey({ ...newKey, key: e.target.value })}
+                                autoFocus={!isEditing}
+                                readOnly={isEditing}
                             />
-                            <button
-                                type="button"
-                                onClick={() => setNewKey('sk-' + crypto.randomUUID().replace(/-/g, ''))}
-                                className="px-3 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm font-medium border border-border whitespace-nowrap"
-                            >
-                                {t('accountManager.generate')}
-                            </button>
+                            {!isEditing && (
+                                <button
+                                    type="button"
+                                    onClick={() => setNewKey({ ...newKey, key: 'sk-' + crypto.randomUUID().replace(/-/g, '') })}
+                                    className="px-3 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm font-medium border border-border whitespace-nowrap"
+                                >
+                                    {t('accountManager.generate')}
+                                </button>
+                            )}
                         </div>
-                        <p className="text-xs text-muted-foreground mt-1.5">{t('accountManager.generateHint')}</p>
+                        <p className="text-xs text-muted-foreground mt-1.5">
+                            {isEditing ? t('accountManager.keyReadonlyHint') : t('accountManager.generateHint')}
+                        </p>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.nameOptional')}</label>
+                        <input
+                            type="text"
+                            className="input-field"
+                            placeholder={t('accountManager.namePlaceholder')}
+                            value={newKey.name}
+                            onChange={e => setNewKey({ ...newKey, name: e.target.value })}
+                            autoFocus={isEditing}
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium mb-1.5">{t('accountManager.remarkOptional')}</label>
+                        <input
+                            type="text"
+                            className="input-field"
+                            placeholder={t('accountManager.remarkPlaceholder')}
+                            value={newKey.remark}
+                            onChange={e => setNewKey({ ...newKey, remark: e.target.value })}
+                        />
                     </div>
                     <div className="flex justify-end gap-2 pt-2">
                         <button onClick={onClose} className="px-4 py-2 rounded-lg border border-border hover:bg-secondary transition-colors text-sm font-medium">{t('actions.cancel')}</button>
                         <button onClick={onAdd} disabled={loading} className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium disabled:opacity-50">
-                            {loading ? t('accountManager.addKeyLoading') : t('accountManager.addKeyAction')}
+                            {loading
+                                ? (isEditing ? t('accountManager.editKeyLoading') : t('accountManager.addKeyLoading'))
+                                : (isEditing ? t('accountManager.editKeyAction') : t('accountManager.addKeyAction'))}
                         </button>
                     </div>
                 </div>

webui/src/features/account/ApiKeysPanel.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Check, ChevronDown, Copy, Plus, Trash2 } from 'lucide-react'
+import { Check, ChevronDown, Copy, Pencil, Plus, Trash2 } from 'lucide-react'
 import clsx from 'clsx'
 
 function fallbackCopyText(text) {
@@ -31,12 +31,16 @@ export default function ApiKeysPanel({
     config,
     keysExpanded,
     setKeysExpanded,
-    setShowAddKey,
+    onAddKey,
+    onEditKey,
     copiedKey,
     setCopiedKey,
     onDeleteKey,
 }) {
     const [failedKey, setFailedKey] = useState(null)
+    const apiKeys = Array.isArray(config?.api_keys) && config.api_keys.length > 0
+        ? config.api_keys
+        : (config?.keys || []).map(key => ({ key, name: '', remark: '' }))
 
     const handleCopyKey = async (key) => {
         try {
@@ -74,11 +78,11 @@ export default function ApiKeysPanel({
                     )} />
                     <div>
                         <h2 className="text-lg font-semibold">{t('accountManager.apiKeysTitle')}</h2>
-                        <p className="text-sm text-muted-foreground">{t('accountManager.apiKeysDesc')} ({config.keys?.length || 0})</p>
+                        <p className="text-sm text-muted-foreground">{t('accountManager.apiKeysDesc')} ({apiKeys.length || 0})</p>
                     </div>
                 </div>
                 <button
-                    onClick={(e) => { e.stopPropagation(); setShowAddKey(true) }}
+                    onClick={(e) => { e.stopPropagation(); onAddKey() }}
                     className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm shadow-sm"
                 >
                     <Plus className="w-4 h-4" />
@@ -88,34 +92,43 @@ export default function ApiKeysPanel({
 
             {keysExpanded && (
                 <div className="divide-y divide-border border-t border-border">
-                    {config.keys?.length > 0 ? (
-                        config.keys.map((key, i) => (
+                    {apiKeys.length > 0 ? (
+                        apiKeys.map((item, i) => (
                             <div key={i} className="p-4 flex items-center justify-between hover:bg-muted/50 transition-colors group">
-                                <div className="flex items-center gap-2">
+                                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 flex-1">
+                                    <div className="text-sm">{item.name || '-'}</div>
                                     <button
-                                        onClick={() => handleCopyKey(key)}
+                                        onClick={() => handleCopyKey(item.key)}
                                         className="font-mono text-sm bg-muted/50 px-3 py-1 rounded inline-block hover:bg-muted transition-colors"
                                         title={t('accountManager.copyKeyTitle')}
                                     >
-                                        {key.slice(0, 16)}****
+                                        {(item.key || '').slice(0, 16)}****
                                     </button>
-                                    {copiedKey === key && (
+                                    <div className="text-sm text-muted-foreground truncate">{item.remark || '-'}</div>
+                                    {copiedKey === item.key && (
                                         <span className="text-xs text-green-500 animate-pulse">{t('accountManager.copied')}</span>
                                     )}
-                                    {failedKey === key && (
+                                    {failedKey === item.key && (
                                         <span className="text-xs text-destructive">{t('accountManager.copyFailed')}</span>
                                     )}
                                 </div>
                                 <div className="flex items-center gap-1">
                                     <button
-                                        onClick={() => handleCopyKey(key)}
+                                        onClick={() => onEditKey(item)}
+                                        className="p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-md transition-colors"
+                                        title={t('accountManager.editKeyTitle')}
+                                    >
+                                        <Pencil className="w-4 h-4" />
+                                    </button>
+                                    <button
+                                        onClick={() => handleCopyKey(item.key)}
                                         className="p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-md transition-colors"
                                         title={t('accountManager.copyKeyTitle')}
                                     >
-                                        {copiedKey === key ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                                        {copiedKey === item.key ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
                                     </button>
                                     <button
-                                        onClick={() => onDeleteKey(key)}
+                                        onClick={() => onDeleteKey(item.key)}
                                         className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-colors"
                                         title={t('accountManager.deleteKeyTitle')}
                                     >

webui/src/features/account/useAccountActions.js

@@ -2,10 +2,11 @@ import { useState } from 'react'
 
 export function useAccountActions({ apiFetch, t, onMessage, onRefresh, config, fetchAccounts, resolveAccountIdentifier }) {
     const [showAddKey, setShowAddKey] = useState(false)
+    const [editingKey, setEditingKey] = useState(null)
     const [showAddAccount, setShowAddAccount] = useState(false)
-    const [newKey, setNewKey] = useState('')
+    const [newKey, setNewKey] = useState({ key: '', name: '', remark: '' })
     const [copiedKey, setCopiedKey] = useState(null)
-    const [newAccount, setNewAccount] = useState({ email: '', mobile: '', password: '' })
+    const [newAccount, setNewAccount] = useState({ name: '', remark: '', email: '', mobile: '', password: '' })
     const [loading, setLoading] = useState(false)
     const [testing, setTesting] = useState({})
     const [testingAll, setTestingAll] = useState(false)
@@ -14,23 +15,58 @@ export function useAccountActions({ apiFetch, t, onMessage, onRefresh, config, f
     const [deletingSessions, setDeletingSessions] = useState({})
     const [updatingProxy, setUpdatingProxy] = useState({})
 
+    const openAddKey = () => {
+        setEditingKey(null)
+        setNewKey({ key: '', name: '', remark: '' })
+        setShowAddKey(true)
+    }
+
+    const openEditKey = (item) => {
+        if (!item?.key) return
+        setEditingKey(item)
+        setNewKey({
+            key: item.key || '',
+            name: item.name || '',
+            remark: item.remark || '',
+        })
+        setShowAddKey(true)
+    }
+
+    const closeKeyModal = () => {
+        setShowAddKey(false)
+        setEditingKey(null)
+        setNewKey({ key: '', name: '', remark: '' })
+    }
+
     const addKey = async () => {
-        if (!newKey.trim()) return
+        const isEditing = Boolean(editingKey?.key)
+        if (!isEditing && !newKey.key.trim()) {
+            return
+        }
         setLoading(true)
         try {
-            const res = await apiFetch('/admin/keys', {
-                method: 'POST',
+            const endpoint = isEditing
+                ? `/admin/keys/${encodeURIComponent(editingKey.key)}`
+                : '/admin/keys'
+            const method = isEditing ? 'PUT' : 'POST'
+            const payload = isEditing
+                ? { name: newKey.name, remark: newKey.remark }
+                : { key: newKey.key.trim(), name: newKey.name, remark: newKey.remark }
+            if (!isEditing && !payload.key) {
+                return
+            }
+            const res = await apiFetch(endpoint, {
+                method,
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ key: newKey.trim() }),
+                body: JSON.stringify(payload),
             })
             if (res.ok) {
-                onMessage('success', t('accountManager.addKeySuccess'))
-                setNewKey('')
-                setShowAddKey(false)
+                onMessage('success', isEditing ? t('accountManager.updateKeySuccess') : t('accountManager.addKeySuccess'))
+                closeKeyModal()
                 onRefresh()
             } else {
                 const data = await res.json()
-                onMessage('error', data.detail || t('messages.failedToAdd'))
+                onMessage('error', data.detail || (isEditing ? t('messages.requestFailed') : t('messages.failedToAdd')))
             }
         } catch (e) {
             onMessage('error', t('messages.networkError'))
@@ -68,7 +104,7 @@ export function useAccountActions({ apiFetch, t, onMessage, onRefresh, config, f
             })
             if (res.ok) {
                 onMessage('success', t('accountManager.addAccountSuccess'))
-                setNewAccount({ email: '', mobile: '', password: '' })
+                setNewAccount({ name: '', remark: '', email: '', mobile: '', password: '' })
                 setShowAddAccount(false)
                 fetchAccounts(1)
                 onRefresh()
@@ -244,7 +280,10 @@ export function useAccountActions({ apiFetch, t, onMessage, onRefresh, config, f
 
     return {
         showAddKey,
-        setShowAddKey,
+        openAddKey,
+        openEditKey,
+        closeKeyModal,
+        editingKey,
         showAddAccount,
         setShowAddAccount,
         newKey,

webui/src/locales/en.json

@@ -96,6 +96,7 @@
     },
     "accountManager": {
         "addKeySuccess": "API key added successfully.",
+        "updateKeySuccess": "API key updated successfully.",
         "addAccountSuccess": "Account added successfully.",
         "requiredFields": "Password and email/mobile are required.",
         "deleteKeyConfirm": "Are you sure you want to delete this API key?",
@@ -112,6 +113,7 @@
         "apiKeysTitle": "API Keys",
         "apiKeysDesc": "Manage the API access key pool",
         "addKey": "Add key",
+        "editKeyTitle": "Edit key",
         "copied": "Copied",
         "copyFailed": "Copy failed",
         "copyKeyTitle": "Copy key",
@@ -128,13 +130,23 @@
         "testStatusFailed": "Last test failed",
         "noAccounts": "No accounts found.",
         "modalAddKeyTitle": "Add API key",
+        "modalEditKeyTitle": "Edit API key",
         "newKeyLabel": "New key value",
         "newKeyPlaceholder": "Enter a custom API key",
+        "keyLabel": "Key value",
+        "keyReadonlyPlaceholder": "Key value cannot be changed",
+        "keyReadonlyHint": "The key value is read-only. Update the name and remark instead.",
         "generate": "Generate",
         "generateHint": "Click Generate to create a random key.",
         "addKeyLoading": "Adding...",
         "addKeyAction": "Add key",
+        "editKeyLoading": "Saving...",
+        "editKeyAction": "Save changes",
         "modalAddAccountTitle": "Add DeepSeek account",
+        "nameOptional": "Name (optional)",
+        "namePlaceholder": "e.g. Primary Account A",
+        "remarkOptional": "Remark (optional)",
+        "remarkPlaceholder": "e.g. Team shared / test only",
         "emailOptional": "Email (optional)",
         "mobileOptional": "Mobile (optional)",
         "passwordLabel": "Password",

webui/src/locales/zh.json

@@ -96,6 +96,7 @@
     },
     "accountManager": {
         "addKeySuccess": "API 密钥添加成功",
+        "updateKeySuccess": "API 密钥更新成功",
         "addAccountSuccess": "账号添加成功",
         "requiredFields": "需要填写密码以及邮箱或手机号",
         "deleteKeyConfirm": "确定要删除此 API 密钥吗？",
@@ -112,6 +113,7 @@
         "apiKeysTitle": "API 密钥",
         "apiKeysDesc": "管理 API 访问密钥池",
         "addKey": "添加密钥",
+        "editKeyTitle": "编辑密钥",
         "copied": "已复制",
         "copyFailed": "复制失败",
         "copyKeyTitle": "复制密钥",
@@ -128,13 +130,23 @@
         "testStatusFailed": "上次测试失败",
         "noAccounts": "未找到任何账号",
         "modalAddKeyTitle": "添加 API 密钥",
+        "modalEditKeyTitle": "编辑 API 密钥",
         "newKeyLabel": "新密钥值",
         "newKeyPlaceholder": "输入自定义 API 密钥",
+        "keyLabel": "密钥值",
+        "keyReadonlyPlaceholder": "密钥值不可修改",
+        "keyReadonlyHint": "密钥值不可编辑，仅可修改名称和备注。",
         "generate": "生成",
         "generateHint": "点击「生成」自动创建随机密钥",
         "addKeyLoading": "添加中...",
         "addKeyAction": "添加密钥",
+        "editKeyLoading": "保存中...",
+        "editKeyAction": "保存修改",
         "modalAddAccountTitle": "添加 DeepSeek 账号",
+        "nameOptional": "名称（可选）",
+        "namePlaceholder": "例如：主账号 A",
+        "remarkOptional": "备注（可选）",
+        "remarkPlaceholder": "例如：团队共享 / 仅测试用",
         "emailOptional": "邮箱 (可选)",
         "mobileOptional": "手机号 (可选)",
         "passwordLabel": "密码",