@undefineds.co/xpod 0.4.3 → 0.4.5

package/node_modules/@undefineds.co/ai-connections/dist/AiCredentialPoolSection.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button, Input, LoginConnectingView, LoginFailureView, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn, } from '@undefineds.co/shared-ui';
-import { ArrowDown, ArrowUp, Eye, EyeOff, ExternalLink, KeyRound, Loader2, LogOut, Pause, Pencil, Play, PlugZap, Plus, RotateCw, Settings2, Trash2, } from 'lucide-react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, LoginConnectingView, LoginFailureView, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn, } from '@undefineds.co/shared-ui';
+import { GripVertical, Eye, EyeOff, ExternalLink, KeyRound, Loader2, LogOut, Pause, Pencil, Play, PlugZap, Plus, RotateCw, Settings2, Trash2, } from 'lucide-react';
 import { normalizeProxyUrl } from './ai-connections-client.js';
 import { offeringTitle } from './offering-label.js';
 import { AiQuotaCard } from './AiQuotaCard.js';
-export function AiCredentialPoolSection({ definition, product, status, accountLabel, attempt, attemptOfferingId, apiKey, baseUrl = '', busy, disabled = false, error, suppressError = false, quotas = {}, onApiKeyChange, onBaseUrlChange, onBeginApiKey, onBeginOffering, onBeginBrowser, onSaveApiKey, onDisconnect, onCreateApiKeyCredential, onCreateLocalCredential, onUpdateCredential, onDeleteCredential, onTestCredential, onReorderCredentials, onRefreshQuota, onDismissError, }) {
+export function AiCredentialPoolSection({ definition, product, status, accountLabel, attempt, attemptOfferingId, apiKey, baseUrl = '', busy, disabled = false, error, suppressError = false, quotas = {}, onApiKeyChange, onBaseUrlChange, onBeginApiKey, onBeginOffering, onCancelConnect, onBeginBrowser, onSaveApiKey, onDisconnect, onCreateApiKeyCredential, onCreateLocalCredential, onUpdateCredential, onDeleteCredential, onTestCredential, onReorderCredentials, onRefreshQuota, onDismissError, }) {
     const fallbackOfferings = [{
             id: 'api-platform',
             label: 'API Key',
@@ -14,52 +14,336 @@ export function AiCredentialPoolSection({ definition, product, status, accountLa
         }];
     const credentials = product?.credentials ?? [];
     const offerings = product?.offerings.length ? product.offerings : fallbackOfferings;
-    return (_jsx(TooltipProvider, { children: _jsxs("section", { className: "space-y-4", "aria-label": "\u5F53\u524D\u8FDE\u63A5", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border/40 pb-2", children: [_jsx(Settings2, { className: "h-4 w-4 text-primary" }), _jsx("h3", { className: "text-sm font-medium text-foreground/90", children: "\u5F53\u524D\u8FDE\u63A5" })] }), _jsxs("div", { className: "space-y-3", children: [offerings.map((offering) => {
-                            const mode = modeForOffering(offering, definition);
-                            const offeringAttempt = attemptOfferingId === offering.id ? attempt : undefined;
-                            const offeringCredentials = credentials
-                                .filter((credential) => credential.offeringId === offering.id)
-                                .sort((left, right) => left.priority - right.priority);
-                            const offeringError = error?.offeringId === offering.id ? error.message : undefined;
-                            const quotaCredential = offeringCredentials.find((credential) => credential.enabled)
-                                ?? offeringCredentials[0];
-                            const quotaState = quotas[offering.id];
-                            const visibleQuotaState = quotaCredential && quotaState?.credentialId === quotaCredential.id
-                                ? quotaState
-                                : undefined;
-                            const quotaCard = (_jsx(AiQuotaCard, { providerName: definition.name, offeringName: offeringTitle(offering), quota: visibleQuotaState?.quota, busy: visibleQuotaState?.busy ?? false, disabled: disabled || (Boolean(product) && !quotaCredential), credentialLabel: quotaCredential ? credentialDisplayLabel(quotaCredential) : undefined, error: visibleQuotaState?.error, onRefresh: () => onRefreshQuota?.(offering, quotaCredential) }));
-                            if (offering.lifecycle === 'unavailable') {
-                                return (_jsx(OfferingItem, { offering: offering, children: _jsx("p", { className: "text-sm text-muted-foreground", children: offering.kind === 'oauth-subscription'
-                                            ? '暂不可用：账号订阅需在 Xpod 桌面版中导入本机客户端（如 Codex CLI）的登录态，浏览器中无法完成。'
-                                            : '暂不可用：该 Offering 尚未提供可用的连接流程。' }) }, offering.id));
-                            }
-                            if (offeringError && offeringAttempt?.status === 'unsupported' && mode === 'deviceCodeOAuth') {
-                                return (_jsxs(OfferingItem, { offering: offering, children: [_jsxs("div", { className: "rounded-md border border-border/60 bg-muted/30 px-3 py-3", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "\u5F53\u524D\u90E8\u7F72\u672A\u542F\u7528\u8D26\u53F7\u6388\u6743" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "\u4ECD\u53EF\u4F7F\u7528\u5176\u4ED6\u5DF2\u63D0\u4F9B\u7684\u63A5\u5165\u65B9\u5F0F\u3002" })] }), quotaCard] }, offering.id));
-                            }
-                            if (offeringError && mode === 'deviceCodeOAuth') {
-                                return (_jsxs(OfferingItem, { offering: offering, children: [_jsx(LoginFailureView, { title: "\u767B\u5F55\u672A\u5B8C\u6210", description: offeringError, primaryLabel: "\u91CD\u8BD5\u767B\u5F55", onPrimary: () => onBeginOffering?.(offering, mode), secondaryLabel: "\u5173\u95ED", onSecondary: onDismissError ?? (() => undefined) }), quotaCard] }, offering.id));
-                            }
-                            if (isPendingAttempt(offeringAttempt) && mode === 'deviceCodeOAuth') {
-                                return (_jsxs(OfferingItem, { offering: offering, children: [_jsx(LoginConnectingView, { title: "\u6B63\u5728\u8FDE\u63A5", detail: offeringAttempt?.userCode ? `验证码：${offeringAttempt.userCode}` : '请在打开的页面完成授权。', providerLabel: offeringTitle(offering), providerHost: definition.name }), quotaCard] }, offering.id));
-                            }
-                            if (mode === 'deviceCodeOAuth') {
-                                return (_jsxs(OfferingItem, { offering: offering, children: [_jsx("div", { className: "space-y-2", children: offeringCredentials.map((credential) => (_jsx(CredentialRow, { credential: credential, label: credential.label ? maskAccountLabel(credential.label) : credentialDisplayLabel(credential), busy: busy, disabled: disabled, onToggle: onUpdateCredential, onTest: onTestCredential, onDelete: () => onDisconnect(credential), deleteAriaLabel: `${credential.label ? maskAccountLabel(credential.label) : credentialDisplayLabel(credential)} 移除` }, credential.id))) }), _jsx("div", { className: "flex flex-wrap gap-2", children: _jsxs(Button, { size: "sm", disabled: busy || disabled, onClick: () => onBeginOffering?.(offering, mode), children: [busy ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), offeringCredentials.length ? '添加账号' : '登录'] }) }), quotaCard] }, offering.id));
+    const [editing, setEditing] = useState();
+    const [showCreate, setShowCreate] = useState(false);
+    const [authorizationOfferingId, setAuthorizationOfferingId] = useState();
+    const [dialogError, setDialogError] = useState();
+    const [saving, setSaving] = useState(false);
+    const completedAttemptRef = useRef(attempt);
+    const apiOfferings = offerings.filter((offering) => authorizationMethodsForOffering(offering, definition).some((method) => method.lifecycle === 'active' && isApiKeyMethod(method)));
+    const authorizationPending = isPendingAttempt(attempt) && isOAuthMode(attempt?.mode);
+    const dialogOpen = showCreate || Boolean(editing) || Boolean(authorizationOfferingId);
+    const closeDialog = () => {
+        setShowCreate(false);
+        setAuthorizationOfferingId(undefined);
+        setEditing(undefined);
+        setDialogError(undefined);
+    };
+    useEffect(() => {
+        const previous = completedAttemptRef.current;
+        completedAttemptRef.current = attempt;
+        if (dialogOpen && attempt !== previous && attempt?.status === 'completed')
+            closeDialog();
+    }, [attempt, dialogOpen]);
+    const orderedCredentials = [...credentials].sort((a, b) => a.priority - b.priority);
+    const quotaBusy = credentials.some((credential) => quotas[credential.id]?.busy);
+    return (_jsx(TooltipProvider, { children: _jsxs("section", { className: "space-y-3", "aria-label": "\u5F53\u524D\u8FDE\u63A5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium text-foreground/90", children: [_jsx(Settings2, { className: "h-4 w-4 text-primary" }), "\u5F53\u524D\u8FDE\u63A5"] }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [credentials.length > 1 ? (_jsx(Button, { variant: "ghost", size: "sm", "aria-label": `刷新全部 ${definition.name}额度`, disabled: disabled || quotaBusy || !credentials.some((c) => c.enabled) || !onRefreshQuota, onClick: () => offerings.forEach((offering) => onRefreshQuota?.(offering)), children: quotaBusy ? '查询中' : '刷新全部额度' })) : null, offerings.map((offering) => {
+                                    const methods = authorizationMethodsForOffering(offering, definition).filter((method) => method.lifecycle === 'active' && (isOAuthMethod(method) || isLocalMethod(method)));
+                                    if (!methods.length)
+                                        return null;
+                                    return _jsx("div", { role: "group", "aria-label": `${offeringTitle(offering)}快捷接入`, children: _jsx(AuthorizationMethodActions, { methods: methods, offering: offering, hasCredentials: credentials.some((credential) => credential.offeringId === offering.id), busy: busy || saving, disabled: disabled || authorizationPending, onBeginOffering: onBeginOffering ? (target, mode, method) => {
+                                                setDialogError(undefined);
+                                                onDismissError?.();
+                                                setAuthorizationOfferingId(target.id);
+                                                onBeginOffering(target, mode, method);
+                                            } : undefined, onCreateLocalCredential: onCreateLocalCredential ? async (target, method) => {
+                                                setSaving(true);
+                                                setDialogError(undefined);
+                                                onDismissError?.();
+                                                try {
+                                                    await onCreateLocalCredential(target, method);
+                                                }
+                                                catch (cause) {
+                                                    setDialogError(cause instanceof Error ? cause.message : '连接失败，请重试');
+                                                }
+                                                finally {
+                                                    setSaving(false);
+                                                }
+                                            } : undefined }) }, offering.id);
+                                }), apiOfferings.length > 0 && !offerings.some((offering) => authorizationMethodsForOffering(offering, definition).some((method) => method.lifecycle === 'active' && (isOAuthMethod(method) || isLocalMethod(method))))
+                                    && definition.browserMode === 'browserAssistedApiKey' ? (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5 text-xs", "aria-label": `${definition.name} 登录`, disabled: busy || saving || disabled || authorizationPending, onClick: () => {
+                                        setDialogError(undefined);
+                                        onDismissError?.();
+                                        onBeginBrowser();
+                                    }, children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), definition.browserLabel] })) : null, apiOfferings.length > 0 ? (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5 text-xs", "aria-label": "\u65B0\u5EFA API Key \u8FDE\u63A5", disabled: busy || saving || disabled || authorizationPending || (!product && status === 'pending' && !attempt), onClick: () => {
+                                        setDialogError(undefined);
+                                        onDismissError?.();
+                                        setShowCreate(true);
+                                    }, children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "API Key"] })) : null] })] }), _jsxs("div", { "aria-label": "\u51ED\u636E\u5217\u8868", className: "space-y-2", children: [_jsx(SortableCredentialList, { credentials: orderedCredentials, disabled: busy || disabled, onMove: onReorderCredentials ? (from, to) => {
+                                const offering = offerings.find((item) => item.id === orderedCredentials[from]?.offeringId);
+                                if (offering)
+                                    onReorderCredentials(offering, orderedCredentials, from, to);
+                            } : undefined, children: (credential, handle) => {
+                                const offering = offerings.find((item) => item.id === credential.offeringId);
+                                if (!offering)
+                                    return null;
+                                const label = credential.authMode === 'apiKey' ? credentialDisplayLabel(credential)
+                                    : credential.label ? maskAccountLabel(credential.label) : credentialDisplayLabel(credential);
+                                const state = quotas[credential.id];
+                                const quotaState = state?.credentialId === credential.id ? state : undefined;
+                                return _jsx(CredentialRow, { credential: credential, label: label, dragHandle: handle, kindLabel: credential.authMode === 'apiKey' ? 'API Key' : offeringTitle(offering), busy: busy, disabled: disabled, onToggle: onUpdateCredential, onTest: onTestCredential, onEdit: credential.authMode === 'apiKey' ? () => setEditing(credential) : undefined, onDelete: () => credential.authMode === 'apiKey' ? onDeleteCredential?.(credential) : onDisconnect(credential), deleteAriaLabel: credential.authMode === 'apiKey' ? `删除 ${label}` : `${label} 移除`, quota: _jsx(AiQuotaCard, { compact: true, providerName: definition.name, offeringName: offeringTitle(offering), credentialLabel: credentialDisplayLabel(credential), multiple: credentials.length > 1, quota: quotaState?.quota, busy: quotaState?.busy ?? false, error: quotaState?.error, paused: !credential.enabled, disabled: disabled || !onRefreshQuota, onRefresh: () => onRefreshQuota?.(offering, credential) }) });
+                            } }), !credentials.length ? _jsx("p", { className: "py-2 text-xs text-muted-foreground", children: accountLabel ? maskAccountLabel(accountLabel) : '尚未添加连接' }) : null, credentials.length === 0 && (status === 'configured' || status === 'connected') ? (_jsx(Button, { variant: "ghost", size: "sm", disabled: busy || disabled, onClick: () => onDisconnect(), children: status === 'configured' ? '移除配置' : '断开连接' })) : null] }), _jsx(Dialog, { open: dialogOpen, onOpenChange: (open) => {
+                        if (open || saving)
+                            return;
+                        if (attempt && isPendingAttempt(attempt) && isOAuthMode(attempt.mode)) {
+                            onCancelConnect?.({ mode: attempt.mode, attemptId: attempt.attemptId, state: attempt.state,
+                                signature: attempt.signature, ...(attempt.offeringId ? { offeringId: attempt.offeringId } : {}) });
+                        }
+                        closeDialog();
+                    }, children: _jsxs(DialogContent, { className: "max-h-[85vh] overflow-y-auto sm:max-w-lg", "aria-describedby": undefined, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editing ? '编辑连接' : authorizationOfferingId ? '连接账号' : '新建连接' }) }), _jsx("div", { className: "space-y-5", "aria-label": "\u6DFB\u52A0\u8FDE\u63A5", children: (editing || authorizationOfferingId ? offerings.filter((offering) => offering.id === (editing?.offeringId ?? authorizationOfferingId)) : apiOfferings).map((offering) => {
+                                    const otherAuthorizationPending = isPendingAttempt(attempt) && isOAuthMode(attempt?.mode)
+                                        && (attemptOfferingId ?? attempt?.offeringId) !== offering.id;
+                                    const actionDisabled = disabled || saving || otherAuthorizationPending;
+                                    const methods = authorizationMethodsForOffering(offering, definition);
+                                    const activeMethods = methods.filter((method) => method.lifecycle === 'active');
+                                    const supportsApiKey = activeMethods.some(isApiKeyMethod);
+                                    const offeringAttempt = attemptOfferingId === offering.id ? attempt : undefined;
+                                    const authorizationError = error?.offeringId === offering.id ? error.authorization : undefined;
+                                    const attemptedMethod = methods.find((method) => method.id === (authorizationError?.authorizationMethodId ?? offeringAttempt?.authorizationMethodId))
+                                        ?? activeMethods.find(isOAuthMethod);
+                                    const attemptedMode = authorizationError?.mode ?? offeringAttempt?.mode ?? (attemptedMethod ? connectModeForMethod(attemptedMethod) : modeForOffering(offering, definition));
+                                    const offeringError = error?.offeringId === offering.id ? error.message : undefined;
+                                    if (offering.lifecycle === 'unavailable' && activeMethods.length === 0) {
+                                        return _jsxs("fieldset", { "data-create-offering": offering.id, className: "space-y-2 border-t border-border/50 pt-3 first:border-t-0 first:pt-0", children: [_jsx("legend", { className: "px-1 text-sm font-medium", children: offeringTitle(offering) }), _jsx("p", { className: "text-xs text-muted-foreground", children: offering.kind === 'oauth-subscription'
+                                                        ? '暂不可用：账号订阅需在 Xpod 桌面版中导入本机客户端（如 Codex CLI）的登录态，浏览器中无法完成。'
+                                                        : '暂不可用：该接入方式尚未提供可用的连接流程。' })] }, offering.id);
+                                    }
+                                    const failedAuthorizationMode = authorizationError?.mode;
+                                    if (offeringError && isOAuthMode(failedAuthorizationMode)) {
+                                        return _jsxs("fieldset", { "data-create-offering": offering.id, disabled: actionDisabled, className: "space-y-3 border-t border-border/50 pt-3 first:border-t-0 first:pt-0", "aria-label": `${offeringTitle(offering)}接入操作`, children: [_jsx("legend", { className: "px-1 text-sm font-medium", children: offeringTitle(offering) }), offeringAttempt?.status === 'unsupported'
+                                                    ? _jsx("p", { className: "text-sm", children: "\u5F53\u524D\u90E8\u7F72\u672A\u542F\u7528\u8D26\u53F7\u6388\u6743" })
+                                                    : _jsx(LoginFailureView, { title: "\u767B\u5F55\u672A\u5B8C\u6210", description: offeringError, primaryLabel: "\u91CD\u8BD5\u767B\u5F55", onPrimary: () => onBeginOffering?.(offering, failedAuthorizationMode, attemptedMethod), secondaryLabel: "\u5173\u95ED", onSecondary: () => { onDismissError?.(); closeDialog(); } })] }, offering.id);
+                                    }
+                                    if (isPendingAttempt(offeringAttempt) && isOAuthMode(attemptedMode)) {
+                                        return _jsxs("fieldset", { "data-create-offering": offering.id, disabled: actionDisabled, className: "space-y-3 border-t border-border/50 pt-3 first:border-t-0 first:pt-0", "aria-label": `${offeringTitle(offering)}接入操作`, children: [_jsx("legend", { className: "px-1 text-sm font-medium", children: offeringTitle(offering) }), _jsx(LoginConnectingView, { title: "\u6B63\u5728\u8FDE\u63A5", detail: attemptedMode === 'authorizationCodeOAuth' ? '等待网页授权，请在打开的页面完成登录。' : offeringAttempt?.userCode ? `验证码：${offeringAttempt.userCode}` : '请在打开的页面完成授权。', providerLabel: attemptedMethod?.label ?? offeringTitle(offering), providerHost: definition.name }), _jsx(Button, { variant: "ghost", size: "sm", disabled: disabled, onClick: () => {
+                                                        if (offeringAttempt)
+                                                            onCancelConnect?.({
+                                                                mode: offeringAttempt.mode,
+                                                                attemptId: offeringAttempt.attemptId,
+                                                                state: offeringAttempt.state,
+                                                                signature: offeringAttempt.signature,
+                                                                ...(offeringAttempt.offeringId ? { offeringId: offeringAttempt.offeringId } : {}),
+                                                            });
+                                                        closeDialog();
+                                                    }, children: "\u53D6\u6D88\u8FDE\u63A5" })] }, offering.id);
+                                    }
+                                    return _jsxs("fieldset", { "data-create-offering": offering.id, disabled: actionDisabled, className: "space-y-3 border-t border-border/50 pt-3 first:border-t-0 first:pt-0", "aria-label": `${offeringTitle(offering)}接入操作`, children: [_jsx("legend", { className: "px-1 text-sm font-medium", children: offeringTitle(offering) }), supportsApiKey ? _jsx(ApiKeyPool, { definition: definition, offering: offering, status: status, createOfferings: [offering], initialCreate: !editing, credentials: credentials, initialEditing: editing?.offeringId === offering.id ? editing : undefined, onCloseEdit: closeDialog, onSavingChange: setSaving, attempt: offeringAttempt ?? (attempt?.mode === 'browserAssistedApiKey' ? attempt : undefined), apiKey: apiKey, baseUrl: baseUrl, busy: busy, disabled: actionDisabled, onApiKeyChange: onApiKeyChange, onBaseUrlChange: onBaseUrlChange, onBeginApiKey: onBeginApiKey, onBeginBrowser: onBeginBrowser, onSaveApiKey: onSaveApiKey, onDisconnect: onDisconnect, onUpdateCredential: onUpdateCredential, onCreateApiKeyCredential: onCreateApiKeyCredential }, `${offering.id}:${editing?.id ?? ''}`) : null, authorizationOfferingId && !offeringError ? _jsx(LoginConnectingView, { title: "\u6B63\u5728\u8FDE\u63A5", detail: "\u6B63\u5728\u542F\u52A8\u6388\u6743\uFF0C\u8BF7\u7A0D\u5019\u3002", providerLabel: offeringTitle(offering), providerHost: definition.name }) : null, offeringError ? _jsx("p", { className: "w-full text-sm text-destructive", children: offeringError }) : null] }, offering.id);
+                                }) }), dialogError ? _jsx("p", { role: "alert", className: "text-sm text-destructive", children: dialogError }) : null] }) }), _jsxs("details", { className: "text-xs text-muted-foreground", children: [_jsx("summary", { className: "w-fit cursor-pointer", children: "\u63A5\u5165\u4FE1\u606F" }), _jsx("div", { className: "mt-2 space-y-3", children: offerings.map((offering) => _jsx(OfferingItem, { offering: offering }, offering.id)) })] }), dialogError && !dialogOpen && dialogError !== error?.message ? _jsx("p", { role: "alert", className: "text-sm text-destructive", children: dialogError }) : null, error && (error.offeringId ? !dialogOpen : !suppressError)
+                    ? _jsx("p", { role: "alert", className: "text-sm text-destructive", children: error.message }) : null] }) }));
+}
+function SortableCredentialList({ credentials, disabled, onMove, children }) {
+    const listRef = useRef(null);
+    const dragRef = useRef(null);
+    const frameRef = useRef(undefined);
+    const timerRef = useRef(undefined);
+    const dropRef = useRef(null);
+    const dropOrderRef = useRef(undefined);
+    const busyRef = useRef(disabled);
+    const [announcement, setAnnouncement] = useState('');
+    const unavailable = disabled || !onMove || credentials.length < 2;
+    const order = credentials.map((credential) => credential.id).join('\0');
+    const rows = () => Array.from(listRef.current?.querySelectorAll('[data-sortable-credential]') ?? []);
+    const clearMotion = () => {
+        if (frameRef.current !== undefined)
+            cancelAnimationFrame(frameRef.current);
+        if (timerRef.current !== undefined)
+            clearTimeout(timerRef.current);
+        frameRef.current = undefined;
+        timerRef.current = undefined;
+        for (const row of rows()) {
+            for (const key of ['transform', 'transition', 'zIndex', 'position', 'boxShadow', 'willChange', 'backgroundColor'])
+                row.style[key] = '';
+            delete row.dataset.dragging;
+        }
+    };
+    const settle = () => {
+        const positions = dropRef.current;
+        if (!positions)
+            return;
+        dropRef.current = null;
+        clearMotion();
+        const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+        const elements = rows();
+        for (const row of elements) {
+            const previous = positions.get(row.dataset.sortableCredential);
+            if (!previous || reduced)
+                continue;
+            const rect = row.getBoundingClientRect();
+            row.style.transition = 'none';
+            row.style.transform = `translateY(${previous.top - rect.top}px)`;
+        }
+        // Commit the inverse positions before animating to the new document order.
+        listRef.current?.getBoundingClientRect();
+        frameRef.current = requestAnimationFrame(() => {
+            frameRef.current = undefined;
+            for (const row of elements) {
+                row.style.transition = reduced ? 'none' : 'transform 160ms ease-out, box-shadow 160ms ease-out';
+                row.style.transform = 'translateY(0px)';
+            }
+            timerRef.current = setTimeout(clearMotion, reduced ? 0 : 180);
+        });
+    };
+    const finish = (commit) => {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        if (frameRef.current !== undefined)
+            cancelAnimationFrame(frameRef.current);
+        dropRef.current = new Map(drag.rows.map((row) => [row.dataset.sortableCredential, row.getBoundingClientRect()]));
+        dropOrderRef.current = order;
+        if (commit && drag.from !== drag.to && !unavailable) {
+            const source = drag.rects[drag.from];
+            const destination = drag.rects[drag.to];
+            const gap = Math.max(0, drag.rects[1].top - drag.rects[0].bottom);
+            const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+            drag.rows.forEach((row, index) => {
+                const shift = index === drag.from
+                    ? drag.from < drag.to ? destination.bottom - source.bottom : destination.top - source.top
+                    : drag.from < index && index <= drag.to ? -(source.height + gap)
+                        : drag.to <= index && index < drag.from ? source.height + gap : 0;
+                row.style.transition = reduced ? 'none' : 'transform 160ms ease-out';
+                row.style.transform = `translateY(${shift}px)`;
+                const rect = drag.rects[index];
+                dropRef.current.set(row.dataset.sortableCredential, { ...rect, top: rect.top + shift, bottom: rect.bottom + shift });
+            });
+        }
+        dragRef.current = null;
+        if (drag.handle.hasPointerCapture?.(drag.pointerId))
+            drag.handle.releasePointerCapture?.(drag.pointerId);
+        if (commit && !unavailable && credentials[drag.from]?.id === drag.id)
+            move(drag.from, drag.to);
+        // React's layout effect handles synchronous reorder; this handles no-op/async saves.
+        frameRef.current = requestAnimationFrame(() => {
+            frameRef.current = undefined;
+            if (!commit || !busyRef.current)
+                settle();
+        });
+        // A stalled save must not leave transformed rows indefinitely.
+        timerRef.current = setTimeout(settle, 10000);
+    };
+    const move = (from, to) => {
+        if (unavailable || from === to || to < 0 || to >= credentials.length)
+            return;
+        onMove?.(from, to);
+        setAnnouncement(`已请求将${credentialDisplayLabel(credentials[from])}移至第 ${to + 1} 位`);
+    };
+    const lifecycleRef = useRef({ finish, settle, clearMotion });
+    useLayoutEffect(() => {
+        lifecycleRef.current = { finish, settle, clearMotion };
+        busyRef.current = disabled;
+    });
+    useLayoutEffect(() => {
+        if (dragRef.current)
+            lifecycleRef.current.finish(false);
+        if (dropRef.current && (dropOrderRef.current !== order || !disabled))
+            lifecycleRef.current.settle();
+    }, [order, unavailable, disabled]);
+    useEffect(() => () => {
+        const drag = dragRef.current;
+        dragRef.current = null;
+        dropRef.current = null;
+        if (drag?.handle.hasPointerCapture?.(drag.pointerId))
+            drag.handle.releasePointerCapture?.(drag.pointerId);
+        lifecycleRef.current.clearMotion();
+    }, []);
+    const paintDrag = () => {
+        frameRef.current = undefined;
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        const source = drag.rects[drag.from];
+        const gap = drag.rects.length > 1
+            ? Math.max(0, drag.rects[1].top - drag.rects[0].bottom) : 0;
+        drag.rows.forEach((row, index) => {
+            const shift = index === drag.from ? drag.y - drag.startY
+                : drag.from < index && index <= drag.to ? -(source.height + gap)
+                    : drag.to <= index && index < drag.from ? source.height + gap : 0;
+            row.style.transform = `translateY(${shift}px)`;
+        });
+    };
+    return (_jsxs("div", { ref: listRef, className: "space-y-2", children: [_jsx("span", { className: "sr-only", role: "status", children: announcement }), credentials.map((credential, index) => (_jsx("div", { "data-sortable-credential": credential.id, className: "rounded-lg", children: children(credential, onMove ? (_jsx("button", { type: "button", disabled: unavailable, "aria-label": `拖动排序 ${credentialDisplayLabel(credential)}`, title: credentials.length < 2 ? '至少添加两条连接后可拖动排序' : '拖动调整优先级，或使用方向键、Home / End 排序', className: "flex h-8 w-6 shrink-0 touch-none select-none items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:opacity-40 enabled:cursor-grab active:cursor-grabbing", onKeyDown: (event) => {
+                        if (event.key === 'Escape') {
+                            finish(false);
+                            return;
+                        }
+                        const next = event.key === 'ArrowUp' ? index - 1 : event.key === 'ArrowDown' ? index + 1
+                            : event.key === 'Home' ? 0 : event.key === 'End' ? credentials.length - 1 : undefined;
+                        if (next === undefined)
+                            return;
+                        event.preventDefault();
+                        move(index, next);
+                    }, onPointerDown: (event) => {
+                        if (unavailable || event.button !== 0 || dragRef.current)
+                            return;
+                        event.preventDefault();
+                        dropRef.current = null;
+                        clearMotion();
+                        event.currentTarget.focus();
+                        event.currentTarget.setPointerCapture?.(event.pointerId);
+                        const elements = rows();
+                        const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+                        dragRef.current = { id: credential.id, from: index, to: index, pointerId: event.pointerId,
+                            startY: event.clientY, y: event.clientY, handle: event.currentTarget, rows: elements,
+                            rects: elements.map((row) => row.getBoundingClientRect()) };
+                        for (const [rowIndex, row] of elements.entries()) {
+                            row.style.willChange = 'transform';
+                            row.style.transition = reduced || rowIndex === index ? 'none' : 'transform 160ms ease-out';
+                            if (rowIndex === index) {
+                                row.dataset.dragging = 'true';
+                                row.style.position = 'relative';
+                                row.style.zIndex = '10';
+                                row.style.boxShadow = '0 8px 24px rgb(0 0 0 / 0.18)';
+                                row.style.backgroundColor = 'hsl(var(--card))';
                             }
-                            if (offering.authModes?.includes('local')) {
-                                const importsOpenAiSession = definition.id === 'openai' && offering.id === 'official-subscription';
-                                return (_jsx(OfferingItem, { offering: offering, children: _jsxs("div", { className: "space-y-2", children: [offeringCredentials.map((credential) => (_jsx(CredentialRow, { credential: credential, label: credential.label ?? '本地 Ollama', busy: busy, disabled: disabled, onToggle: onUpdateCredential, onTest: onTestCredential, onDelete: () => onDeleteCredential?.(credential), deleteAriaLabel: `删除 ${credential.label ?? '本地 Ollama'}` }, credential.id))), offeringCredentials.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [importsOpenAiSession ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "\u4ECE\u5F53\u524D\u8BBE\u5907\u5DF2\u6709\u7684 OpenAI \u767B\u5F55\u5BFC\u5165\uFF0C\u4E0D\u4F1A\u53D1\u8D77\u65B0\u7684\u6D4F\u89C8\u5668\u6388\u6743\u3002" })) : null, _jsxs(Button, { variant: "outline", size: "sm", disabled: busy || disabled || !onCreateLocalCredential, onClick: () => void onCreateLocalCredential?.(offering), children: [busy ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(Plus, { className: "mr-2 h-4 w-4" }), localOfferingActionLabel(offering)] })] })) : null] }) }, offering.id));
+                        }
+                    }, onPointerMove: (event) => {
+                        const drag = dragRef.current;
+                        if (!drag || drag.pointerId !== event.pointerId || unavailable)
+                            return;
+                        drag.y = event.clientY;
+                        let distance = Infinity;
+                        drag.rects.forEach((rect, rowIndex) => {
+                            const delta = Math.abs(event.clientY - (rect.top + rect.bottom) / 2);
+                            if (delta < distance) {
+                                distance = delta;
+                                drag.to = rowIndex;
                             }
-                            return (_jsxs(OfferingItem, { offering: offering, children: [_jsx(ApiKeyPool, { definition: definition, offering: offering, status: status, accountLabel: accountLabel, credentials: offeringCredentials, attempt: attempt, apiKey: apiKey, baseUrl: baseUrl, busy: busy, disabled: disabled, error: offeringError, onApiKeyChange: onApiKeyChange, onBaseUrlChange: onBaseUrlChange, onBeginApiKey: onBeginApiKey, onBeginBrowser: onBeginBrowser, onSaveApiKey: onSaveApiKey, onDisconnect: onDisconnect, onCreateApiKeyCredential: onCreateApiKeyCredential
-                                            ? (input) => onCreateApiKeyCredential(offering, input)
-                                            : undefined, onUpdateCredential: onUpdateCredential, onDeleteCredential: onDeleteCredential, onTestCredential: onTestCredential, onMoveCredential: (fromIndex, toIndex) => onReorderCredentials?.(offering, offeringCredentials, fromIndex, toIndex) }), quotaCard] }, offering.id));
-                        }), error && !error.offeringId && !suppressError ? (_jsx("p", { className: "rounded-md border border-destructive/30 px-3 py-2 text-sm text-destructive", children: error.message })) : null] })] }) }));
+                        });
+                        if (frameRef.current === undefined)
+                            frameRef.current = requestAnimationFrame(paintDrag);
+                    }, onPointerUp: (event) => {
+                        if (dragRef.current?.pointerId === event.pointerId)
+                            finish(true);
+                    }, onPointerCancel: (event) => {
+                        if (dragRef.current?.pointerId === event.pointerId)
+                            finish(false);
+                    }, onLostPointerCapture: (event) => {
+                        if (dragRef.current?.pointerId === event.pointerId)
+                            finish(false);
+                    }, children: _jsx(GripVertical, { "aria-hidden": "true", className: "h-4 w-4" }) })) : null) }, credential.id)))] }));
+}
+function AuthorizationMethodActions({ methods, offering, hasCredentials, busy, disabled, onBeginOffering, onCreateLocalCredential, }) {
+    if (methods.length === 0)
+        return null;
+    return (_jsx("div", { className: "space-y-2", children: _jsx("div", { className: "flex flex-wrap gap-2", children: methods.map((method) => {
+                const connectMode = connectModeForMethod(method);
+                if (isOAuthMode(connectMode)) {
+                    return (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5 text-xs", disabled: busy || disabled || !onBeginOffering, onClick: () => onBeginOffering?.(offering, connectMode, method), children: [busy ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(ExternalLink, { className: "h-3.5 w-3.5" }), method.label || (hasCredentials ? '添加账号' : '登录')] }, method.id));
+                }
+                if (isLocalMethod(method)) {
+                    return (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5 text-xs", title: "\u5BFC\u5165\u5F53\u524D\u8BBE\u5907\u5DF2\u6709\u767B\u5F55\u6001\uFF0C\u4E0D\u4F1A\u53D1\u8D77\u65B0\u7684\u6D4F\u89C8\u5668\u6388\u6743\u3002", disabled: busy || disabled || !onCreateLocalCredential, onClick: () => void onCreateLocalCredential?.(offering, method), children: [busy ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : _jsx(Plus, { className: "h-3.5 w-3.5" }), method.label || '已有登录态'] }, method.id));
+                }
+                return null;
+            }) }) }));
 }
-function OfferingItem({ offering, children }) {
+function OfferingItem({ offering, methods }) {
     const endpoints = offering.endpoints ?? [];
     const title = offeringTitle(offering);
     const kindLabel = offering.kind ? offeringKindLabel(offering.kind) : undefined;
     const subtitle = kindLabel && kindLabel !== title ? [kindLabel] : [];
-    return (_jsxs("section", { className: "space-y-3 rounded-lg border border-border/50 bg-card p-3", "aria-labelledby": `offering-${offering.id}`, children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h4", { id: `offering-${offering.id}`, className: "text-sm font-medium text-foreground", children: title }), subtitle.length ? (_jsx("div", { className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground", children: subtitle.map((part) => _jsx("span", { children: part }, part)) })) : null] }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-3 gap-y-1 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: authMethodLabel(offering) }), offering.consoleUrl ? _jsx(OfferingLink, { href: offering.consoleUrl, label: "\u63A7\u5236\u53F0" }) : null, offering.subscriptionUrl ? _jsx(OfferingLink, { href: offering.subscriptionUrl, label: "\u8BA2\u9605\u4E0E\u8D26\u5355" }) : null, offering.quota?.url ? _jsx(OfferingLink, { href: offering.quota.url, label: "\u989D\u5EA6\u4E0E\u7528\u91CF" }) : null, offering.usagePolicyUrl ? _jsx(OfferingLink, { href: offering.usagePolicyUrl, label: "\u4F7F\u7528\u653F\u7B56" }) : null] })] }), endpoints.length ? (_jsx("dl", { className: "space-y-1 text-[11px] text-muted-foreground", children: endpoints.map((endpoint) => (_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("dt", { className: "shrink-0 text-foreground/70", children: endpointProtocolLabel(endpoint.protocol) }), _jsx("dd", { className: "min-w-0 truncate font-mono", title: endpoint.baseUrl, children: endpointDisplayValue(endpoint.baseUrl) })] }, `${endpoint.protocol}:${endpoint.baseUrl}`))) })) : null, children] }));
+    return (_jsxs("section", { className: "space-y-2", "aria-labelledby": `offering-${offering.id}`, children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h4", { id: `offering-${offering.id}`, className: "text-sm font-medium text-foreground", children: title }), subtitle.length ? (_jsx("div", { className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground", children: subtitle.map((part) => _jsx("span", { children: part }, part)) })) : null] }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-3 gap-y-1 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: authMethodLabel(offering, methods) }), offering.consoleUrl ? _jsx(OfferingLink, { href: offering.consoleUrl, label: "\u63A7\u5236\u53F0" }) : null, offering.subscriptionUrl ? _jsx(OfferingLink, { href: offering.subscriptionUrl, label: "\u8BA2\u9605\u4E0E\u8D26\u5355" }) : null, offering.quota?.url ? _jsx(OfferingLink, { href: offering.quota.url, label: "\u989D\u5EA6\u4E0E\u7528\u91CF" }) : null, offering.usagePolicyUrl ? _jsx(OfferingLink, { href: offering.usagePolicyUrl, label: "\u4F7F\u7528\u653F\u7B56" }) : null] })] }), offering.lifecycle === 'unavailable' && !authorizationMethodsForOffering(offering).some((method) => method.lifecycle === 'active') ? (_jsx("p", { className: "text-xs text-muted-foreground", children: offering.kind === 'oauth-subscription'
+                    ? '暂不可用：账号订阅需在 Xpod 桌面版中导入本机客户端（如 Codex CLI）的登录态，浏览器中无法完成。'
+                    : '暂不可用：该接入方式尚未提供可用的连接流程。' })) : null, endpoints.length ? (_jsx("dl", { className: "space-y-1 text-[11px] text-muted-foreground", children: endpoints.map((endpoint) => (_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("dt", { className: "shrink-0 text-foreground/70", children: endpointProtocolLabel(endpoint.protocol) }), _jsx("dd", { className: "min-w-0 truncate font-mono", title: endpoint.baseUrl, children: endpointDisplayValue(endpoint.baseUrl) })] }, `${endpoint.protocol}:${endpoint.baseUrl}`))) })) : null] }));
 }
 function OfferingLink({ href, label }) {
     return _jsx("a", { href: href, target: "_blank", rel: "noreferrer", className: "text-primary hover:underline", children: label });
@@ -96,37 +380,95 @@ function offeringKindLabel(kind) {
         return 'Token 套餐';
     return kind;
 }
-function authMethodLabel(offering) {
-    const labels = (offering.authModes ?? []).map((mode) => mode === 'local'
-        ? localAuthLabel(offering)
-        : mode === 'oauth' || mode === 'deviceCode' ? '账号授权' : 'API Key');
+function authMethodLabel(offering, methods) {
+    const labels = (methods?.length ? methods : authorizationMethodsForOffering(offering))
+        .map((method) => method.authMode === 'apiKey'
+        ? 'API Key'
+        : method.authMode === 'local'
+            ? method.label
+            : '账号授权');
     return [...new Set(labels)].join(' / ');
 }
-function localAuthLabel(offering) {
-    return offering.id === 'official-subscription' && offering.productLabel === 'OpenAI'
-        ? '本地会话'
-        : '本地服务';
+function authorizationMethodsForOffering(offering, definition) {
+    if (offering.authorizationMethods?.length)
+        return offering.authorizationMethods;
+    const lifecycle = offering.lifecycle === 'unavailable' ? 'unavailable' : 'active';
+    return [...new Set(offering.authModes ?? [])].map((mode) => {
+        if (mode === 'apiKey') {
+            return {
+                id: 'api-key',
+                authMode: 'apiKey',
+                connectMode: 'browserAssistedApiKey',
+                label: 'API Key',
+                lifecycle,
+            };
+        }
+        if (mode === 'local') {
+            const localService = offering.kind === 'local';
+            return {
+                id: localService ? 'local-service' : 'local-session-import',
+                authMode: 'local',
+                label: localService ? '本地服务' : '已有登录态',
+                lifecycle,
+            };
+        }
+        return {
+            id: 'device-code',
+            authMode: mode,
+            connectMode: 'deviceCodeOAuth',
+            label: '',
+            lifecycle,
+        };
+    });
+}
+function connectModeForMethod(method) {
+    if (method.connectMode)
+        return method.connectMode;
+    if (method.authMode === 'oauth' || method.authMode === 'deviceCode')
+        return 'deviceCodeOAuth';
+    if (method.authMode === 'apiKey')
+        return 'browserAssistedApiKey';
+    return undefined;
+}
+function isOAuthMode(mode) {
+    return mode === 'deviceCodeOAuth' || mode === 'authorizationCodeOAuth';
+}
+function isOAuthMethod(method) {
+    return isOAuthMode(connectModeForMethod(method));
 }
-function localOfferingActionLabel(offering) {
-    return offering.id === 'official-subscription' && offering.productLabel === 'OpenAI'
-        ? '导入本机 OpenAI 登录'
-        : '连接本地 Ollama';
+function isApiKeyMethod(method) {
+    return method.authMode === 'apiKey' || connectModeForMethod(method) === 'browserAssistedApiKey';
 }
-function ApiKeyPool({ definition, offering, status, accountLabel, credentials, attempt, apiKey, baseUrl, busy, disabled, error, onApiKeyChange, onBaseUrlChange, onBeginApiKey, onBeginBrowser, onSaveApiKey, onDisconnect, onCreateApiKeyCredential, onUpdateCredential, onDeleteCredential, onTestCredential, onMoveCredential, }) {
+function isLocalMethod(method) {
+    return method.authMode === 'local';
+}
+function ApiKeyPool({ definition, offering, createOfferings, status, credentials, attempt, apiKey, baseUrl, busy, disabled, error, onApiKeyChange, onBaseUrlChange, onBeginApiKey, onBeginBrowser, onSaveApiKey, onDisconnect, onCreateApiKeyCredential, onUpdateCredential, initialEditing, initialCreate = false, onSavingChange, onCloseEdit, }) {
     const apiKeyAttempt = attempt?.mode === 'browserAssistedApiKey' && attempt.status === 'pending';
     const isConfigured = status === 'configured';
     const isConnected = status === 'connected';
     const hasPoolActions = Boolean(onCreateApiKeyCredential);
+    const [createOfferingId, setCreateOfferingId] = useState(offering.id);
+    const formOffering = createOfferings.find((item) => item.id === createOfferingId) ?? offering;
     const [showKey, setShowKey] = useState(false);
-    const [formMode, setFormMode] = useState();
-    const [editingCredential, setEditingCredential] = useState();
-    const [poolLabel, setPoolLabel] = useState('');
+    const [formMode, setFormMode] = useState(initialEditing ? 'edit' : initialCreate && onCreateApiKeyCredential ? 'create' : undefined);
+    const [editingCredential, setEditingCredential] = useState(initialEditing);
+    const [poolLabel, setPoolLabel] = useState(initialEditing?.label ?? '');
     const [poolApiKey, setPoolApiKey] = useState('');
-    const [poolBaseUrl, setPoolBaseUrl] = useState('');
-    const [poolProxyUrl, setPoolProxyUrl] = useState('');
+    const [poolBaseUrl, setPoolBaseUrl] = useState(initialEditing?.baseUrl ?? '');
+    const [poolProxyUrl, setPoolProxyUrl] = useState(initialEditing?.proxyUrl ?? '');
     const [poolFormError, setPoolFormError] = useState();
     const [showAdvanced, setShowAdvanced] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const saveInFlight = useRef(false);
+    const legacyBeginRef = useRef(false);
+    useEffect(() => {
+        if (initialCreate && !onCreateApiKeyCredential && !legacyBeginRef.current) {
+            legacyBeginRef.current = true;
+            onBeginApiKey();
+        }
+    }, [initialCreate, onCreateApiKeyCredential, onBeginApiKey]);
     const openCreateForm = () => {
+        setCreateOfferingId(offering.id);
         setFormMode('create');
         setEditingCredential(undefined);
         setPoolLabel('');
@@ -136,17 +478,8 @@ function ApiKeyPool({ definition, offering, status, accountLabel, credentials, a
         setPoolFormError(undefined);
         setShowAdvanced(false);
     };
-    const openEditForm = (credential) => {
-        setFormMode('edit');
-        setEditingCredential(credential);
-        setPoolLabel(credential.label ?? '');
-        setPoolApiKey('');
-        setPoolBaseUrl(credential.baseUrl ?? '');
-        setPoolProxyUrl(credential.proxyUrl ?? '');
-        setPoolFormError(undefined);
-        setShowAdvanced(false);
-    };
     const closePoolForm = () => {
+        onCloseEdit();
         setFormMode(undefined);
         setEditingCredential(undefined);
         setPoolLabel('');
@@ -157,6 +490,8 @@ function ApiKeyPool({ definition, offering, status, accountLabel, credentials, a
         setShowAdvanced(false);
     };
     const savePoolForm = async () => {
+        if (busy || disabled || saveInFlight.current)
+            return;
         let normalizedProxyUrl;
         try {
             normalizedProxyUrl = normalizeProxyUrl(poolProxyUrl);
@@ -170,23 +505,34 @@ function ApiKeyPool({ definition, offering, status, accountLabel, credentials, a
             const trimmedKey = poolApiKey.trim();
             if (!trimmedKey || !onCreateApiKeyCredential)
                 return;
+            saveInFlight.current = true;
+            setSaving(true);
+            onSavingChange?.(true);
             try {
-                await onCreateApiKeyCredential({
+                await onCreateApiKeyCredential(formOffering, {
                     apiKey: trimmedKey,
                     label: poolLabel.trim() || undefined,
                     baseUrl: poolBaseUrl.trim() || undefined,
                     proxyUrl: normalizedProxyUrl,
-                    priority: nextCredentialPriority(credentials),
+                    priority: nextCredentialPriority(credentials.filter((credential) => credential.offeringId === formOffering.id)),
                 });
                 closePoolForm();
             }
             catch (error) {
                 setPoolFormError(error instanceof Error ? error.message : '保存失败，请重试');
             }
+            finally {
+                saveInFlight.current = false;
+                setSaving(false);
+                onSavingChange?.(false);
+            }
             return;
         }
         if (formMode === 'edit' && editingCredential && onUpdateCredential) {
             const proxyChanged = poolProxyUrl.trim() !== (editingCredential.proxyUrl ?? '').trim();
+            saveInFlight.current = true;
+            setSaving(true);
+            onSavingChange?.(true);
             try {
                 await onUpdateCredential(editingCredential, {
                     label: poolLabel.trim() || undefined,
@@ -198,17 +544,24 @@ function ApiKeyPool({ definition, offering, status, accountLabel, credentials, a
             catch (error) {
                 setPoolFormError(error instanceof Error ? error.message : '保存失败，请重试');
             }
+            finally {
+                saveInFlight.current = false;
+                setSaving(false);
+                onSavingChange?.(false);
+            }
         }
     };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { children: credentials.length > 0 ? (_jsx("div", { className: "space-y-2", children: credentials.map((credential, index) => (_jsx(CredentialRow, { credential: credential, label: credentialDisplayLabel(credential), busy: busy, disabled: disabled, onToggle: onUpdateCredential, onTest: onTestCredential, onEdit: () => openEditForm(credential), onDelete: () => onDeleteCredential?.(credential), deleteAriaLabel: `删除 ${credentialDisplayLabel(credential)}`, beforeActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", "aria-label": `上移 ${credentialDisplayLabel(credential)}`, disabled: index === 0 || disabled || busy, onClick: () => onMoveCredential?.(index, index - 1), children: _jsx(ArrowUp, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", "aria-label": `下移 ${credentialDisplayLabel(credential)}`, disabled: index === credentials.length - 1 || disabled || busy, onClick: () => onMoveCredential?.(index, index + 1), children: _jsx(ArrowDown, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })] }) }, credential.id))) })) : accountLabel ? (_jsx("p", { className: "text-xs text-muted-foreground", children: maskAccountLabel(accountLabel) })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: "Provider \u51ED\u8BC1\u4FDD\u5B58\u5728\u5F53\u524D Pod\uFF0C\u7531 Pod \u6743\u9650\u4FDD\u62A4\u3002" })) }), attempt?.userCode ? (_jsxs("div", { className: "border-l-2 border-primary bg-muted/30 px-3 py-2 text-sm", children: ["\u9A8C\u8BC1\u7801\uFF1A", _jsx("strong", { className: "font-mono", children: attempt.userCode })] })) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [onCreateApiKeyCredential ? (_jsxs(Button, { variant: "outline", size: "sm", disabled: busy || disabled, onClick: openCreateForm, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "\u6DFB\u52A0 API Key"] })) : null, hasPoolActions ? null : isConnected ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: busy || disabled, onClick: onBeginBrowser, children: [busy ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(RotateCw, { className: "mr-2 h-4 w-4" }), "\u91CD\u65B0\u8FDE\u63A5"] }), _jsxs(Button, { variant: "ghost", size: "sm", disabled: busy || disabled, onClick: onDisconnect, children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), "\u65AD\u5F00\u8FDE\u63A5"] })] })) : isConfigured ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", "aria-label": "\u66F4\u65B0 API Key", disabled: busy || disabled, onClick: onBeginApiKey, children: [_jsx(KeyRound, { className: "mr-2 h-4 w-4" }), "\u66F4\u65B0 API Key"] }), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy || disabled, onClick: onDisconnect, children: "\u79FB\u9664\u914D\u7F6E" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: busy || disabled || definition.browserMode === 'connectUnsupported', onClick: onBeginBrowser, children: [busy ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), definition.browserLabel] }), _jsxs(Button, { variant: "outline", size: "sm", "aria-label": `${definition.name} API Key`, disabled: busy || disabled, onClick: onBeginApiKey, children: [_jsx(KeyRound, { className: "mr-2 h-4 w-4" }), "\u914D\u7F6E API Key"] })] }))] }), formMode ? (_jsxs("div", { className: "space-y-2 rounded-lg border border-border/50 bg-muted/10 p-3", children: [formMode === 'edit' ? (_jsx(Input, { autoComplete: "off", "aria-label": `${definition.name} API Key 标签`, placeholder: "\u540D\u79F0\uFF0C\u4F8B\u5982 Work key", value: poolLabel, onChange: (event) => setPoolLabel(event.target.value) })) : null, formMode === 'create' ? (_jsx(Input, { type: showKey ? 'text' : 'password', autoComplete: "new-password", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} API Key 输入`, placeholder: definition.apiKeyPlaceholder || '从官方控制台复制 API Key', value: poolApiKey, onChange: (event) => setPoolApiKey(event.target.value), className: "font-mono" })) : null, formMode === 'edit' || showAdvanced ? (_jsxs(_Fragment, { children: [_jsx(Input, { autoComplete: "off", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} Base URL 输入`, placeholder: offeringEndpoint(offering) || definition.defaultBaseUrl || '默认服务地址', value: poolBaseUrl, onChange: (event) => setPoolBaseUrl(event.target.value), className: "font-mono text-xs" }), _jsx(Input, { autoComplete: "off", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} Proxy URL 输入`, placeholder: "http://127.0.0.1:7890", value: poolProxyUrl, onChange: (event) => setPoolProxyUrl(event.target.value), className: "font-mono text-xs" })] })) : null, poolFormError ? _jsx("p", { className: "text-xs text-destructive", children: poolFormError }) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { size: "sm", "aria-label": formMode === 'create' ? `保存 ${definition.name} API Key` : '保存凭证', disabled: busy || disabled || (formMode === 'create' && !poolApiKey.trim()), onClick: savePoolForm, children: formMode === 'create' ? '保存 API Key' : '保存凭证' }), _jsx(Button, { variant: "ghost", size: "sm", onClick: closePoolForm, children: "\u53D6\u6D88" }), formMode === 'create' ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setShowAdvanced((current) => !current), children: showAdvanced ? '收起高级设置' : '高级设置' })) : null] })] })) : null, apiKeyAttempt ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "API Key" }), definition.apiKeyUrl ? (_jsx("a", { href: definition.apiKeyUrl, target: "_blank", rel: "noreferrer", className: "text-xs text-primary hover:underline", children: "\u83B7\u53D6 API Key" })) : null] }), _jsxs("div", { className: "group relative", children: [_jsx(Input, { type: showKey ? 'text' : 'password', autoComplete: "new-password", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} API Key 输入`, placeholder: definition.apiKeyPlaceholder || '从官方控制台复制 API Key', value: apiKey, onChange: (event) => onApiKeyChange(event.target.value), className: "border-border/60 bg-muted/20 pr-10 font-mono transition-colors focus:border-primary/50 focus:bg-background" }), _jsx("div", { className: "absolute bottom-1 right-1 top-1 flex items-center", children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-full w-8 rounded hover:bg-muted", onClick: () => setShowKey((current) => !current), "aria-label": showKey ? '隐藏 API Key' : '显示 API Key', children: showKey
+    return (_jsxs("div", { className: cn('space-y-3', formMode && 'w-full'), children: [attempt?.userCode ? (_jsxs("div", { className: "border-l-2 border-primary bg-muted/30 px-3 py-2 text-sm", children: ["\u9A8C\u8BC1\u7801\uFF1A", _jsx("strong", { className: "font-mono", children: attempt.userCode })] })) : null, !initialCreate && !initialEditing ? _jsxs("div", { className: "flex flex-wrap gap-2", children: [onCreateApiKeyCredential && createOfferings.length > 0 ? (_jsxs(Button, { variant: "outline", size: "sm", disabled: busy || disabled || saving, onClick: openCreateForm, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "\u6DFB\u52A0 API Key"] })) : null, hasPoolActions ? null : isConnected ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: busy || disabled || saving, onClick: onBeginBrowser, children: [busy ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(RotateCw, { className: "mr-2 h-4 w-4" }), "\u91CD\u65B0\u8FDE\u63A5"] }), _jsxs(Button, { variant: "ghost", size: "sm", disabled: busy || disabled || saving, onClick: onDisconnect, children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), "\u65AD\u5F00\u8FDE\u63A5"] })] })) : isConfigured ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", "aria-label": "\u66F4\u65B0 API Key", disabled: busy || disabled || saving, onClick: onBeginApiKey, children: [_jsx(KeyRound, { className: "mr-2 h-4 w-4" }), "\u66F4\u65B0 API Key"] }), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy || disabled || saving, onClick: onDisconnect, children: "\u79FB\u9664\u914D\u7F6E" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: busy || disabled || saving || definition.browserMode === 'connectUnsupported', onClick: onBeginBrowser, children: [busy ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), definition.browserLabel] }), _jsxs(Button, { variant: "outline", size: "sm", "aria-label": `${definition.name} API Key`, disabled: busy || disabled || saving, onClick: onBeginApiKey, children: [_jsx(KeyRound, { className: "mr-2 h-4 w-4" }), "\u914D\u7F6E API Key"] })] }))] }) : null, formMode ? (_jsxs("div", { className: "space-y-2 rounded-lg border border-border/50 bg-muted/10 p-3", children: [formMode === 'create' && createOfferings.length > 1 ? (_jsxs("label", { className: "block space-y-1 text-xs text-muted-foreground", children: [_jsx("span", { children: "\u5957\u9910 / \u533A\u57DF" }), _jsx("select", { "aria-label": `${definition.name} 套餐 / 区域`, value: createOfferingId, disabled: busy || disabled || saving, onChange: (event) => { setCreateOfferingId(event.target.value); setPoolFormError(undefined); }, className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground", children: createOfferings.map((item) => _jsx("option", { value: item.id, children: offeringTitle(item) }, item.id)) })] })) : null, formMode === 'edit' ? (_jsx(Input, { disabled: busy || disabled || saving, autoComplete: "off", "aria-label": `${definition.name} API Key 标签`, placeholder: "\u540D\u79F0\uFF0C\u4F8B\u5982 Work key", value: poolLabel, onChange: (event) => setPoolLabel(event.target.value) })) : null, formMode === 'create' ? (_jsx(Input, { disabled: busy || disabled || saving, type: showKey ? 'text' : 'password', autoComplete: "new-password", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} API Key 输入`, placeholder: definition.apiKeyPlaceholder || '从官方控制台复制 API Key', value: poolApiKey, onChange: (event) => setPoolApiKey(event.target.value), className: "font-mono" })) : null, formMode === 'edit' || showAdvanced ? (_jsxs(_Fragment, { children: [_jsx(Input, { disabled: busy || disabled || saving, autoComplete: "off", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} Base URL 输入`, placeholder: offeringEndpoint(formMode === 'edit' ? offering : formOffering) || definition.defaultBaseUrl || '默认服务地址', value: poolBaseUrl, onChange: (event) => setPoolBaseUrl(event.target.value), className: "font-mono text-xs" }), _jsx(Input, { disabled: busy || disabled || saving, autoComplete: "off", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} Proxy URL 输入`, placeholder: "http://127.0.0.1:7890", value: poolProxyUrl, onChange: (event) => setPoolProxyUrl(event.target.value), className: "font-mono text-xs" })] })) : null, poolFormError ? _jsx("p", { className: "text-xs text-destructive", children: poolFormError }) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { size: "sm", "aria-label": formMode === 'create' ? `保存 ${definition.name} API Key` : '保存凭证', disabled: busy || disabled || saving || (formMode === 'create' && !poolApiKey.trim()), onClick: savePoolForm, children: formMode === 'create' ? '保存 API Key' : '保存凭证' }), _jsx(Button, { variant: "ghost", size: "sm", disabled: saving, onClick: closePoolForm, children: "\u53D6\u6D88" }), formMode === 'create' ? (_jsx(Button, { variant: "ghost", size: "sm", disabled: saving, onClick: () => setShowAdvanced((current) => !current), children: showAdvanced ? '收起高级设置' : '高级设置' })) : null] })] })) : null, apiKeyAttempt && !formMode ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "API Key" }), definition.apiKeyUrl ? (_jsx("a", { href: definition.apiKeyUrl, target: "_blank", rel: "noreferrer", className: "text-xs text-primary hover:underline", children: "\u83B7\u53D6 API Key" })) : null] }), _jsxs("div", { className: "group relative", children: [_jsx(Input, { disabled: busy || disabled || saving, type: showKey ? 'text' : 'password', autoComplete: "new-password", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} API Key 输入`, placeholder: definition.apiKeyPlaceholder || '从官方控制台复制 API Key', value: apiKey, onChange: (event) => onApiKeyChange(event.target.value), className: "border-border/60 bg-muted/20 pr-10 font-mono transition-colors focus:border-primary/50 focus:bg-background" }), _jsx("div", { className: "absolute bottom-1 right-1 top-1 flex items-center", children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-full w-8 rounded hover:bg-muted", onClick: () => setShowKey((current) => !current), "aria-label": showKey ? '隐藏 API Key' : '显示 API Key', children: showKey
                                         ? _jsx(EyeOff, { className: "h-4 w-4 text-muted-foreground" })
-                                        : _jsx(Eye, { className: "h-4 w-4 text-muted-foreground" }) }) })] }), onBaseUrlChange ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Base URL\uFF08\u9009\u586B\uFF09" }), _jsx(Input, { autoComplete: "off", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} Base URL 输入`, placeholder: definition.defaultBaseUrl || '默认服务地址', value: baseUrl, onChange: (event) => onBaseUrlChange(event.target.value), className: "border-border/60 bg-muted/20 font-mono text-xs transition-colors focus:border-primary/50 focus:bg-background" }), _jsxs("p", { className: "break-all font-mono text-[11px] text-muted-foreground opacity-80", children: [_jsx("span", { className: "mr-1 select-none opacity-50", children: "\u9884\u89C8:" }), (baseUrl.trim() || definition.defaultBaseUrl || '').replace(/\/+$/, ''), "/chat/completions"] })] })) : null, _jsx(Button, { size: "sm", "aria-label": `保存 ${definition.name} API Key`, disabled: !apiKey.trim() || busy || disabled, onClick: onSaveApiKey, children: "\u4FDD\u5B58 API Key" })] })) : null, error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null] }));
+                                        : _jsx(Eye, { className: "h-4 w-4 text-muted-foreground" }) }) })] }), onBaseUrlChange ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Base URL\uFF08\u9009\u586B\uFF09" }), _jsx(Input, { disabled: busy || disabled || saving, autoComplete: "off", "data-lpignore": "true", "data-1p-ignore": true, "aria-label": `${definition.name} Base URL 输入`, placeholder: definition.defaultBaseUrl || '默认服务地址', value: baseUrl, onChange: (event) => onBaseUrlChange(event.target.value), className: "border-border/60 bg-muted/20 font-mono text-xs transition-colors focus:border-primary/50 focus:bg-background" }), _jsxs("p", { className: "break-all font-mono text-[11px] text-muted-foreground opacity-80", children: [_jsx("span", { className: "mr-1 select-none opacity-50", children: "\u9884\u89C8:" }), (baseUrl.trim() || definition.defaultBaseUrl || '').replace(/\/+$/, ''), "/chat/completions"] })] })) : null, _jsx(Button, { size: "sm", "aria-label": `保存 ${definition.name} API Key`, disabled: !apiKey.trim() || busy || disabled, onClick: onSaveApiKey, children: "\u4FDD\u5B58 API Key" })] })) : null, error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null] }));
 }
-function CredentialRow({ credential, label, busy, disabled, beforeActions, onToggle, onTest, onEdit, onDelete, deleteAriaLabel, }) {
+function CredentialRow({ credential, label, busy, disabled, dragHandle, kindLabel, quota, onToggle, onTest, onEdit, onDelete, deleteAriaLabel, }) {
     const actionDisabled = disabled || busy;
     const tone = healthTone(credential.health);
     const stateLabel = `${credential.enabled ? '已启用' : '已停用'} · ${healthLabel(credential.health)}`;
-    return (_jsxs("div", { "data-credential-state": credential.enabled ? 'enabled' : 'disabled', className: cn('flex items-center gap-3 rounded-lg border p-3 transition-colors', credential.enabled ? tone.row : 'border-border/50 bg-muted/40 opacity-70'), children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "aria-label": stateLabel, className: cn('h-2 w-2 shrink-0 rounded-full', credential.enabled ? tone.dot : 'bg-muted-foreground/40') }) }), _jsx(TooltipContent, { className: "text-xs", children: stateLabel })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium text-foreground", children: label }), credential.maskedHint ? _jsx("p", { className: "mt-1 truncate font-mono text-xs text-muted-foreground", children: credential.maskedHint }) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [beforeActions, onTest ? (_jsx(RowAction, { label: `测试连接 ${label}`, disabled: actionDisabled, onClick: () => onTest(credential), children: _jsx(PlugZap, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })) : null, onEdit ? (_jsx(RowAction, { label: `编辑 ${label}`, disabled: actionDisabled, onClick: onEdit, children: _jsx(Pencil, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })) : null, onToggle ? (_jsx(RowAction, { label: `${credential.enabled ? '停用' : '启用'} ${label}`, disabled: actionDisabled, onClick: () => onToggle(credential, { enabled: !credential.enabled }), children: credential.enabled
+    return (_jsxs("div", { "data-credential-state": credential.enabled ? 'enabled' : 'disabled', className: cn('flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg border px-3 py-2.5 transition-colors', credential.enabled ? tone.row : 'border-border/50 bg-muted/40 opacity-70'), children: [dragHandle, _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "aria-label": stateLabel, className: cn('h-2 w-2 shrink-0 rounded-full', credential.enabled ? tone.dot : 'bg-muted-foreground/40') }) }), _jsx(TooltipContent, { className: "text-xs", children: stateLabel })] }), _jsxs("div", { className: "min-w-0 flex-1 basis-24", children: [_jsx("p", { className: "truncate text-sm font-medium text-foreground", children: label }), kindLabel ? _jsx("p", { className: "text-xs text-muted-foreground", children: kindLabel }) : null, credential.maskedHint && !label.includes(credential.maskedHint)
+                        ? _jsx("p", { className: "mt-1 truncate font-mono text-xs text-muted-foreground", children: credential.maskedHint })
+                        : null] }), _jsx("div", { className: "order-last w-full min-w-0 sm:order-none sm:w-auto sm:max-w-[45%]", role: "group", "aria-label": `${credentialDisplayLabel(credential)}额度`, children: quota }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [onTest ? (_jsx(RowAction, { label: `测试连接 ${label}`, disabled: actionDisabled, onClick: () => onTest(credential), children: _jsx(PlugZap, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })) : null, onEdit ? (_jsx(RowAction, { label: `编辑 ${label}`, disabled: actionDisabled, onClick: onEdit, children: _jsx(Pencil, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })) : null, onToggle ? (_jsx(RowAction, { label: `${credential.enabled ? '停用' : '启用'} ${label}`, disabled: actionDisabled, onClick: () => onToggle(credential, { enabled: !credential.enabled }), children: credential.enabled
                             ? _jsx(Pause, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
                             : _jsx(Play, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })) : null, onDelete ? (_jsx(RowAction, { label: deleteAriaLabel ?? `删除 ${label}`, disabled: actionDisabled, onClick: onDelete, children: _jsx(Trash2, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })) : null] })] }));
 }
@@ -262,12 +615,12 @@ function maskAccountLabel(value) {
     const at = value.indexOf('@');
     if (at > 0) {
         const accountName = value.slice(0, at);
-        const visible = accountName.length > 1
-            ? `${accountName[0]}***${accountName[accountName.length - 1]}`
-            : `${accountName[0]}***`;
+        const visible = accountName.length > 6
+            ? `${accountName.slice(0, 3)}***${accountName.slice(-2)}`
+            : accountName.length > 1
+                ? `${accountName[0]}***${accountName[accountName.length - 1]}`
+                : `${accountName[0]}***`;
         return `${visible}${value.slice(at)}`;
     }
-    if (value.length <= 2)
-        return `${value[0] ?? ''}***`;
-    return `${value[0]}***${value[value.length - 1]}`;
+    return value;
 }