@undefineds.co/xpod 0.4.3 → 0.4.5

package/node_modules/@undefineds.co/ai-connections/dist/AiGatewayKeysSection.d.ts

@@ -1,6 +1,7 @@
-import type { AiConnectionsClient } from './ai-connections-client';
+import type { AiConnectionsClient, AiGatewayModel } from './ai-connections-client';
 import { type AiClientConfigurationBridge } from './AiClientConfigurationSection';
-export declare function AiGatewayKeysSection({ client, clientConfigurationBridge, }: {
+export declare function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewayModels, }: {
     client: AiConnectionsClient;
     clientConfigurationBridge?: AiClientConfigurationBridge;
+    gatewayModels?: AiGatewayModel[];
 }): import("react").JSX.Element;

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

@@ -1,68 +1,178 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Badge, Button, Input, cn } from '@undefineds.co/shared-ui';
-import { Copy, KeyRound, Loader2, Play, Square, Trash2, } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, cn, dismissToast, toast } from '@undefineds.co/shared-ui';
+import { Check, ChevronDown, Copy, KeyRound, Loader2, Power, RefreshCw, Trash2, } from 'lucide-react';
 import { AI_CONNECTIONS_CLIENTS, AI_CLIENT_LABELS, AiClientIcon, manualConfigurationText, } from './AiClientConfigurationSection.js';
 const DEFAULT_KEY_NAME = '我的 API Key';
-export function AiGatewayKeysSection({ client, clientConfigurationBridge, }) {
+export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewayModels, }) {
     const [keys, setKeys] = useState([]);
     const [loading, setLoading] = useState(true);
     const [name, setName] = useState(DEFAULT_KEY_NAME);
-    const [target, setTarget] = useState('');
+    const [showCreate, setShowCreate] = useState(false);
+    const applicationVersions = useRef({});
+    const [openMenuKeyId, setOpenMenuKeyId] = useState();
+    const [applications, setApplications] = useState({});
+    const plaintexts = useRef(new Map());
+    const operation = useRef(false);
     const [creating, setCreating] = useState(false);
     const [busyKeyId, setBusyKeyId] = useState();
-    const [newPlaintext, setNewPlaintext] = useState();
+    const [applying, setApplying] = useState();
     const [error, setError] = useState();
+    const [copied, setCopied] = useState({});
+    const copyTimers = useRef(new Map());
+    const copyGeneration = useRef(0);
+    const notification = useRef(undefined);
+    const notify = useCallback((options) => {
+        if (notification.current)
+            dismissToast(notification.current);
+        notification.current = toast(options);
+    }, []);
+    const notifyError = useCallback((cause) => {
+        notify({ variant: 'destructive', description: errorMessage(cause), duration: 8000 });
+    }, [notify]);
+    const clearCopyFeedback = (keyId) => {
+        clearTimeout(copyTimers.current.get(keyId));
+        copyTimers.current.delete(keyId);
+        setCopied((current) => {
+            const next = { ...current };
+            delete next[keyId];
+            return next;
+        });
+    };
     useEffect(() => {
         let active = true;
+        copyGeneration.current += 1;
+        const timers = copyTimers.current;
         setLoading(true);
         setError(undefined);
+        setApplications({});
+        plaintexts.current.clear();
+        const versions = { ...applicationVersions.current };
         void client.listGatewayKeys()
             .then((records) => {
-            if (active)
-                setKeys(records.filter((record) => !record.revokedAt));
+            if (!active)
+                return;
+            const visible = records.filter((record) => !record.revokedAt);
+            setKeys(visible);
+            if (!clientConfigurationBridge)
+                return;
+            void Promise.all(AI_CONNECTIONS_CLIENTS.map(async (clientId) => {
+                try {
+                    const status = await clientConfigurationBridge.inspect(clientId);
+                    if (!active || applicationVersions.current[clientId] !== versions[clientId] ||
+                        status.status !== 'configured' || !status.appliedKeyFingerprint)
+                        return;
+                    const matches = visible.filter((record) => record.fingerprint === status.appliedKeyFingerprint);
+                    if (matches.length !== 1)
+                        return;
+                    const keyId = matches[0].id;
+                    setApplications((current) => ({ ...current, [clientId]: keyId }));
+                }
+                catch {
+                    // Unavailable inspection must not infer ownership from historical metadata.
+                }
+            }));
         })
             .catch((cause) => {
             if (active)
-                setError(errorMessage(cause));
+                notifyError(cause);
         })
             .finally(() => {
-            if (active)
+            if (active) {
+                setCopied({});
+                setOpenMenuKeyId(undefined);
                 setLoading(false);
+            }
         });
         return () => {
             active = false;
+            copyGeneration.current += 1;
+            timers.forEach(clearTimeout);
+            timers.clear();
+            if (notification.current)
+                dismissToast(notification.current);
         };
-    }, [client]);
-    const copyConfiguration = async (plaintext, selectedTarget = target) => {
-        const content = selectedTarget
-            ? manualConfigurationText(selectedTarget, client.apiBase, plaintext)
-            : genericConfigurationText(client.apiBase, plaintext);
-        if (!navigator.clipboard?.writeText) {
-            throw new Error('当前浏览器无法访问剪贴板，请从下方复制新创建的 API Key。');
-        }
-        await navigator.clipboard.writeText(content);
-    };
-    const applyConfiguration = async (plaintext, selectedTarget) => {
-        if (!clientConfigurationBridge) {
-            await copyConfiguration(plaintext, selectedTarget);
+    }, [client, clientConfigurationBridge, notifyError]);
+    useEffect(() => {
+        if (!openMenuKeyId)
             return;
+        const closeOutside = (event) => {
+            const target = event.target;
+            if (target instanceof Element && target.closest('[data-client-menu]')?.getAttribute('data-client-menu') === openMenuKeyId)
+                return;
+            setOpenMenuKeyId(undefined);
+        };
+        document.addEventListener('pointerdown', closeOutside);
+        return () => document.removeEventListener('pointerdown', closeOutside);
+    }, [openMenuKeyId]);
+    const runKeyOperation = async (keyId, action) => {
+        if (operation.current)
+            return;
+        operation.current = true;
+        setBusyKeyId(keyId);
+        setError(undefined);
+        try {
+            await action();
+        }
+        catch (cause) {
+            notifyError(cause);
         }
-        const plan = await clientConfigurationBridge.plan({ client: selectedTarget, endpoint: client.apiBase });
-        if (plan.confirmation?.required) {
-            await copyConfiguration(plaintext, selectedTarget);
-            throw new Error(`${AI_CLIENT_LABELS[selectedTarget]} 需要确认后才能写入；配置已复制。`);
+        finally {
+            operation.current = false;
+            setBusyKeyId(undefined);
+            setApplying(undefined);
         }
+    };
+    const applyPlan = async (keyId, plan, refresh = false) => {
+        if (!clientConfigurationBridge)
+            return;
+        setApplying({ keyId, clientId: plan.client });
+        const plaintext = plaintexts.current.get(keyId) ?? await client.revealGatewayKey(keyId);
         await clientConfigurationBridge.apply({
-            client: selectedTarget,
+            client: plan.client,
             planId: plan.planId,
             apiKey: plaintext,
+            ...(plan.confirmation?.required ? { confirmation: {
+                    token: plan.confirmation.token,
+                    targetHash: plan.confirmation.targetHash,
+                } } : {}),
         });
-        const status = await clientConfigurationBridge.verify({ client: selectedTarget, planId: plan.planId });
-        if (status.status !== 'configured') {
-            throw new Error(status.message ?? `${AI_CLIENT_LABELS[selectedTarget]} 配置验证失败。`);
-        }
+        setApplications((current) => ({ ...current, [plan.client]: keyId }));
+        notify({ variant: 'success', description: plan.client === 'codex' && gatewayModels === undefined
+                ? 'Codex 连接配置已应用，模型目录尚未加载，请稍后刷新配置。'
+                : `${AI_CLIENT_LABELS[plan.client]} ${refresh ? 'endpoint 已刷新。' : '配置已应用。'}` });
     };
+    const applyExistingConfiguration = (record, selectedTarget, refresh = false) => runKeyOperation(record.id, async () => {
+        if (!clientConfigurationBridge || (refresh && applications[selectedTarget] !== record.id))
+            return;
+        setApplying({ keyId: record.id, clientId: selectedTarget });
+        applicationVersions.current[selectedTarget] = (applicationVersions.current[selectedTarget] ?? 0) + 1;
+        const plan = await clientConfigurationBridge.plan({
+            client: selectedTarget,
+            endpoint: client.apiBase,
+            ...(selectedTarget === 'codex' && gatewayModels !== undefined ? {
+                activeModels: gatewayModels.map(({ id, provider, displayName, availability, contextWindow, inputModalities, capabilities }) => ({
+                    id, provider, displayName, availability, contextWindow, inputModalities, capabilities,
+                })),
+            } : {}),
+        });
+        await applyPlan(record.id, plan, refresh);
+    });
+    const restore = (record, selectedTarget) => runKeyOperation(record.id, async () => {
+        if (!clientConfigurationBridge || applications[selectedTarget] !== record.id)
+            return;
+        applicationVersions.current[selectedTarget] = (applicationVersions.current[selectedTarget] ?? 0) + 1;
+        const status = await clientConfigurationBridge.restore(selectedTarget);
+        if (status.status !== 'notConfigured' && status.status !== 'failedAndRestored') {
+            throw new Error(status.message ?? '撤回未完成，请重试。');
+        }
+        setApplications((current) => {
+            const next = { ...current };
+            delete next[selectedTarget];
+            return next;
+        });
+        notify({ description: `${AI_CLIENT_LABELS[selectedTarget]} 配置已撤回，API Key 已保留。` });
+    });
     const create = async () => {
         const trimmedName = name.trim();
         if (!trimmedName) {
@@ -71,19 +181,15 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, }) {
         }
         setCreating(true);
         setError(undefined);
-        setNewPlaintext(undefined);
         try {
             const created = await client.createGatewayKey({
                 name: trimmedName,
-                ...(target ? { appliedClient: target } : {}),
             });
             setKeys((current) => [created.record, ...current.filter((record) => record.id !== created.record.id)]);
-            setNewPlaintext(created.plaintext);
+            plaintexts.current.set(created.record.id, created.plaintext);
+            notify({ variant: 'success', description: 'API Key 已创建，可在列表中复制或应用配置。' });
             setName(DEFAULT_KEY_NAME);
-            if (target)
-                await applyConfiguration(created.plaintext, target);
-            else
-                await copyConfiguration(created.plaintext);
+            setShowCreate(false);
         }
         catch (cause) {
             setError(errorMessage(cause));
@@ -100,58 +206,78 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, }) {
             setKeys((current) => current.map((item) => item.id === record.id ? updated : item));
         }
         catch (cause) {
-            setError(errorMessage(cause));
+            notifyError(cause);
         }
         finally {
             setBusyKeyId(undefined);
         }
     };
-    const copyExistingConfiguration = async (record) => {
-        setBusyKeyId(record.id);
-        setError(undefined);
-        try {
-            const plaintext = await client.revealGatewayKey(record.id);
-            const selectedTarget = asClientId(record.appliedClients?.[0]) ?? target;
-            await copyConfiguration(plaintext, selectedTarget);
-        }
-        catch (cause) {
-            setError(errorMessage(cause));
-        }
-        finally {
-            setBusyKeyId(undefined);
+    const copyExistingConfiguration = (record, selectedTarget) => runKeyOperation(record.id, async () => {
+        const generation = copyGeneration.current;
+        const plaintext = plaintexts.current.get(record.id) ?? await client.revealGatewayKey(record.id);
+        if (generation !== copyGeneration.current)
+            return;
+        if (!navigator.clipboard?.writeText) {
+            throw new Error('当前浏览器无法访问剪贴板，请允许剪贴板访问后重试。');
         }
-    };
+        await navigator.clipboard.writeText(selectedTarget === 'key'
+            ? plaintext
+            : manualConfigurationText(selectedTarget, client.apiBase, plaintext));
+        if (generation !== copyGeneration.current)
+            return;
+        clearTimeout(copyTimers.current.get(record.id));
+        setCopied((current) => ({ ...current, [record.id]: selectedTarget }));
+        copyTimers.current.set(record.id, setTimeout(() => clearCopyFeedback(record.id), 2000));
+    });
     const remove = async (record) => {
         setBusyKeyId(record.id);
         setError(undefined);
         try {
             await client.deleteGatewayKey(record.id);
+            plaintexts.current.delete(record.id);
+            clearCopyFeedback(record.id);
             setKeys((current) => current.filter((item) => item.id !== record.id));
         }
         catch (cause) {
-            setError(errorMessage(cause));
+            notifyError(cause);
         }
         finally {
             setBusyKeyId(undefined);
         }
     };
-    return (_jsxs("section", { className: "space-y-6", "aria-label": "API Keys", children: [_jsx("p", { className: "max-w-3xl text-sm text-muted-foreground", children: "API Key \u7528\u4E8E\u8BBF\u95EE Xpod Gateway\u3002Provider \u5BC6\u94A5\u4E0D\u4F1A\u5199\u5165\u5BA2\u6237\u7AEF\uFF1B\u5BA2\u6237\u7AEF\u53EA\u83B7\u5F97 Xpod \u5730\u5740\u548C\u8FD9\u91CC\u521B\u5EFA\u7684 Key\u3002" }), _jsxs("div", { className: "rounded-xl border border-border/70 p-4", children: [_jsxs("div", { className: "grid gap-3 lg:grid-cols-[minmax(14rem,1fr)_minmax(12rem,20rem)_auto] lg:items-end", children: [_jsxs("label", { className: "space-y-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "\u540D\u79F0" }), _jsx(Input, { "aria-label": "API Key \u540D\u79F0", value: name, onChange: (event) => setName(event.target.value) })] }), _jsxs("label", { className: "space-y-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "\u5E94\u7528\u5230\uFF08\u53EF\u9009\uFF09" }), _jsxs("select", { "aria-label": "\u5E94\u7528\u5230\u5BA2\u6237\u7AEF", value: target, onChange: (event) => setTarget(event.target.value), className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:border-ring", children: [_jsx("option", { value: "", children: "\u4EC5\u590D\u5236\u901A\u7528\u914D\u7F6E" }), AI_CONNECTIONS_CLIENTS.map((clientId) => (_jsx("option", { value: clientId, children: AI_CLIENT_LABELS[clientId] }, clientId)))] })] }), _jsxs(Button, { "aria-label": "\u521B\u5EFA API Key", className: "w-full whitespace-nowrap lg:w-auto", disabled: creating || !name.trim(), onClick: () => void create(), children: [creating ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(KeyRound, { className: "mr-2 h-4 w-4" }), target && clientConfigurationBridge ? '创建并应用配置' : '创建并复制配置'] })] }), target && !clientConfigurationBridge ? (_jsxs("p", { className: "mt-3 text-xs text-muted-foreground", children: ["\u5F53\u524D Web \u73AF\u5883\u4E0D\u652F\u6301\u81EA\u52A8\u5199\u5165\uFF0C\u5C06\u590D\u5236 ", AI_CLIENT_LABELS[target], " \u914D\u7F6E\u3002"] })) : null] }), newPlaintext ? (_jsxs("div", { "aria-label": "\u65B0\u521B\u5EFA\u7684 API Key", className: "rounded-lg border border-primary/25 bg-primary/5 p-4", children: [_jsx("p", { className: "text-sm font-medium", children: "API Key \u5DF2\u521B\u5EFA\uFF0C\u914D\u7F6E\u5DF2\u590D\u5236" }), _jsx("code", { className: "mt-2 block overflow-x-auto text-xs text-muted-foreground", children: newPlaintext })] })) : null, error ? (_jsx("p", { role: "alert", className: "rounded-md border border-destructive/30 px-3 py-2 text-sm text-destructive", children: error })) : null, _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border/60 pb-2", children: [_jsx("h2", { className: "text-sm font-medium", children: "\u5DF2\u521B\u5EFA" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [keys.length, " \u4E2A API Key"] })] }), loading ? (_jsxs("div", { className: "flex items-center gap-2 py-6 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "\u6B63\u5728\u8BFB\u53D6 API Keys"] })) : keys.length === 0 ? (_jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "\u5C1A\u672A\u521B\u5EFA API Key\u3002" })) : (_jsx("div", { className: "overflow-hidden rounded-xl border border-border/70", children: keys.map((record) => {
-                            const disabled = Boolean(record.disabledAt);
-                            const label = record.name || '未命名 API Key';
-                            const busy = busyKeyId === record.id;
-                            return (_jsxs("div", { "data-key-state": disabled ? 'disabled' : 'active', className: cn('grid min-h-16 grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-b border-border/60 px-4 py-3 last:border-b-0 md:grid-cols-[minmax(0,1.4fr)_minmax(10rem,.8fr)_auto]', disabled ? 'bg-muted/30 text-muted-foreground' : 'bg-emerald-500/[0.035]'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: "truncate text-sm font-medium", children: label }), _jsx("code", { className: "shrink-0 text-xs text-muted-foreground", children: record.maskedHint ?? suffixHint(record.id) }), _jsx(Badge, { variant: "secondary", children: disabled ? '已停用' : '已启用' })] }), _jsx("div", { className: "hidden min-w-0 text-xs text-muted-foreground md:block", children: record.lastUsedAt ? `最后使用 ${formatTimestamp(record.lastUsedAt)}` : '暂无调用记录 · 尚未使用' }), _jsxs("div", { className: "flex items-center justify-end gap-1", children: [(record.appliedClients ?? []).map(asClientId).filter(isDefined).map((clientId) => (_jsx("span", { title: AI_CLIENT_LABELS[clientId], className: "flex h-8 w-8 items-center justify-center text-muted-foreground", children: _jsx(AiClientIcon, { client: clientId }) }, clientId))), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": `${disabled ? '启用' : '停用'} ${label}`, title: `${disabled ? '启用' : '停用'} ${label}`, disabled: busy, onClick: () => void setEnabled(record, disabled), children: disabled ? _jsx(Play, { className: "h-4 w-4" }) : _jsx(Square, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": `复制 ${label} 配置`, title: `复制 ${label} 配置`, disabled: busy, onClick: () => void copyExistingConfiguration(record), children: _jsx(Copy, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": `删除 ${label}`, title: `删除 ${label}`, disabled: busy, onClick: () => void remove(record), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, record.id));
-                        }) }))] })] }));
-}
-function asClientId(value) {
-    return value && AI_CONNECTIONS_CLIENTS.includes(value)
-        ? value
-        : undefined;
-}
-function genericConfigurationText(endpoint, apiKey) {
-    return [
-        `XPOD_BASE_URL=${endpoint.replace(/\/+$/u, '')}/v1`,
-        `XPOD_API_KEY=${apiKey}`,
-    ].join('\n');
+    return (_jsxs("section", { className: "[container-type:inline-size] space-y-6", "aria-label": "API Keys", children: [_jsx("p", { className: "max-w-3xl text-sm text-muted-foreground", children: "API Key \u7528\u4E8E\u8BBF\u95EE Xpod Gateway\u3002Provider \u5BC6\u94A5\u4E0D\u4F1A\u5199\u5165\u5BA2\u6237\u7AEF\uFF1B\u5BA2\u6237\u7AEF\u53EA\u83B7\u5F97 Xpod \u5730\u5740\u548C\u8FD9\u91CC\u521B\u5EFA\u7684 Key\u3002" }), _jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border/60 pb-2", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: [keys.length, " \u4E2A API Key"] }), _jsxs(Button, { size: "sm", "aria-label": "\u65B0\u5EFA API Key", disabled: creating || loading, onClick: () => { setError(undefined); setName(DEFAULT_KEY_NAME); setShowCreate(true); }, children: [_jsx(KeyRound, { className: "mr-2 h-4 w-4" }), "\u65B0\u5EFA API Key"] })] }), _jsx(Dialog, { open: showCreate, onOpenChange: (open) => { if (!creating)
+                    setShowCreate(open); }, children: _jsxs(DialogContent, { className: "sm:max-w-md", "aria-describedby": undefined, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "\u65B0\u5EFA API Key" }) }), _jsxs("form", { className: "space-y-5", onSubmit: (event) => { event.preventDefault(); if (!creating)
+                                void create(); }, children: [_jsxs("label", { className: "block space-y-2", children: [_jsx("span", { className: "text-sm font-medium", children: "\u540D\u79F0" }), _jsx(Input, { autoFocus: true, "aria-label": "API Key \u540D\u79F0", value: name, disabled: creating, onChange: (event) => setName(event.target.value) })] }), error ? _jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", disabled: creating, onClick: () => setShowCreate(false), children: "\u53D6\u6D88" }), _jsxs(Button, { type: "submit", "aria-label": "\u521B\u5EFA API Key", disabled: creating || !name.trim(), children: [creating ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, creating ? '正在创建…' : '创建 API Key'] })] })] })] }) }), !clientConfigurationBridge ? _jsx("p", { className: "text-xs text-muted-foreground", children: "\u5F53\u524D Web \u73AF\u5883\u53EF\u590D\u5236\u914D\u7F6E\uFF1B\u81EA\u52A8\u5E94\u7528\u548C\u64A4\u56DE\u9700\u8981\u672C\u673A\u8FDE\u63A5\u3002" }) : null, _jsx("div", { className: "space-y-2", children: loading ? (_jsxs("div", { className: "flex items-center gap-2 py-6 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "\u6B63\u5728\u8BFB\u53D6 API Keys"] })) : keys.length === 0 ? (_jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "\u5C1A\u672A\u521B\u5EFA API Key\u3002" })) : (_jsx("div", { className: "rounded-xl border border-border/70", children: keys.map((record) => {
+                        const disabled = Boolean(record.disabledAt);
+                        const label = record.name || '未命名 API Key';
+                        const busy = Boolean(busyKeyId);
+                        const appliedClients = AI_CONNECTIONS_CLIENTS.filter((clientId) => applications[clientId] === record.id);
+                        const hasApplication = appliedClients.length > 0;
+                        return (_jsxs("div", { "data-key-state": disabled ? 'disabled' : 'active', className: cn('flex min-w-0 items-center gap-1 border-b border-border/60 px-2 py-2.5 sm:gap-2 sm:px-4 first:rounded-t-xl last:rounded-b-xl last:border-b-0', disabled ? 'bg-muted/30 text-muted-foreground' : 'bg-emerald-500/[0.035]'), children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 sm:gap-2", children: [_jsx("span", { className: "min-w-0 truncate text-sm font-medium", title: label, children: label }), _jsx("code", { dir: "rtl", className: "min-w-0 max-w-36 truncate text-left text-xs text-muted-foreground", children: _jsx("span", { dir: "ltr", children: record.maskedHint ?? suffixHint(record.id) }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", "aria-label": `复制 ${label}`, title: copied[record.id] === 'key' ? '已复制' : '复制 API Key', disabled: busy, onClick: () => void copyExistingConfiguration(record, 'key'), children: copied[record.id] === 'key' ? _jsx(Check, { className: "h-4 w-4 text-emerald-600" }) : _jsx(Copy, { className: "h-4 w-4" }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: copied[record.id] === 'key' ? 'API Key 已复制' : '' }), hasApplication ? _jsx("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: appliedClients.map((clientId) => _jsx("span", { role: "img", "aria-label": `${AI_CLIENT_LABELS[clientId]} 已应用`, title: `${AI_CLIENT_LABELS[clientId]} 已应用`, className: "shrink-0", children: _jsx(AiClientIcon, { client: clientId }) }, clientId)) }) : null] }), _jsx("span", { className: "hidden shrink-0 text-xs text-muted-foreground [@container(min-width:850px)]:inline", children: record.lastUsedAt ? `最后使用 ${formatTimestamp(record.lastUsedAt)}` : '暂无调用记录 · 尚未使用' }), _jsxs("details", { "data-client-menu": record.id, open: openMenuKeyId === record.id, className: "relative shrink-0", onKeyDown: (event) => {
+                                        if (event.key !== 'Escape')
+                                            return;
+                                        event.preventDefault();
+                                        setOpenMenuKeyId(undefined);
+                                        event.currentTarget.querySelector('summary')?.focus();
+                                    }, children: [_jsxs("summary", { role: "button", "aria-label": `${label} 客户端配置`, "aria-expanded": openMenuKeyId === record.id, onClick: (event) => {
+                                                event.preventDefault();
+                                                if (busy && openMenuKeyId !== record.id)
+                                                    return;
+                                                setOpenMenuKeyId((current) => current === record.id ? undefined : record.id);
+                                            }, className: "inline-flex min-h-9 max-w-full cursor-pointer list-none items-center gap-2 rounded-md border border-input bg-background px-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-details-marker]:hidden", children: [_jsx("span", { children: "\u5E94\u7528" }), _jsx(ChevronDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0" })] }), _jsx("div", { role: "group", "aria-label": `${label} 客户端选项`, className: "absolute right-0 top-full z-20 mt-1 w-72 max-w-[calc(100cqw-6rem)] space-y-1 rounded-lg border border-border bg-popover p-2 text-popover-foreground shadow-lg", children: AI_CONNECTIONS_CLIENTS.map((clientId) => {
+                                                const application = applications[clientId];
+                                                const checked = application === record.id;
+                                                const copiedClient = copied[record.id] === clientId;
+                                                return _jsxs("div", { className: "flex items-center gap-2 rounded-md px-2 py-1.5", children: [clientConfigurationBridge ? _jsxs("label", { className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", "aria-label": `${label} 应用到 ${AI_CLIENT_LABELS[clientId]}`, checked: checked, disabled: busy || (disabled && !checked), className: "h-4 w-4 shrink-0 accent-primary", onChange: (event) => {
+                                                                        if (event.target.checked)
+                                                                            void applyExistingConfiguration(record, clientId);
+                                                                        else
+                                                                            void restore(record, clientId);
+                                                                    } }), _jsx("span", { children: AI_CLIENT_LABELS[clientId] }), applying?.keyId === record.id && applying.clientId === clientId
+                                                                    ? _jsx("span", { role: "status", className: "text-xs text-muted-foreground", children: "\u5E94\u7528\u4E2D\u2026" })
+                                                                    : null] }) : _jsx("span", { className: "min-w-0 flex-1 text-sm", children: AI_CLIENT_LABELS[clientId] }), clientConfigurationBridge ? _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", "aria-label": `刷新 ${label} 的 ${AI_CLIENT_LABELS[clientId]} endpoint`, title: checked ? '保留当前 Key，刷新客户端连接地址' : '应用后可刷新连接地址', disabled: busy || disabled || !checked, onClick: () => void applyExistingConfiguration(record, clientId, true), children: _jsx(RefreshCw, { className: cn('h-4 w-4', applying?.keyId === record.id && applying.clientId === clientId && 'animate-spin') }) }) : null, _jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: copiedClient ? '已复制' : '' }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", "aria-label": `复制 ${label} 的 ${AI_CLIENT_LABELS[clientId]} 配置`, title: copiedClient ? '已复制' : `复制 ${AI_CLIENT_LABELS[clientId]} 配置`, disabled: busy, onClick: () => void copyExistingConfiguration(record, clientId), children: copiedClient ? _jsx(Check, { className: "h-4 w-4 text-emerald-600" }) : _jsx(Copy, { className: "h-4 w-4" }) })] }, clientId);
+                                            }) })] }), _jsxs("div", { className: "flex shrink-0 items-center", children: [record.kind !== 'client-credentials' ? (_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", "aria-pressed": !disabled, "aria-label": `${disabled ? '启用' : '停用'} ${label}`, title: `${disabled ? '启用' : '停用'} ${label}`, disabled: busy, onClick: () => void setEnabled(record, disabled), children: _jsx(Power, { className: cn('h-4 w-4', !disabled && 'text-emerald-600') }) })) : null, _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", "aria-label": `删除 ${label}`, title: hasApplication ? '请先撤回已应用的配置' : `删除 ${label}`, disabled: busy || hasApplication, onClick: () => void remove(record), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, record.id));
+                    }) })) })] }));
 }
 function suffixHint(id) {
     return `••••••••${id.slice(-8)}`;
@@ -161,8 +287,18 @@ function formatTimestamp(value) {
     return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
 }
 function errorMessage(error) {
-    return error instanceof Error && error.message ? error.message : 'API Key 操作失败，请重试。';
-}
-function isDefined(value) {
-    return value !== undefined;
+    const message = error instanceof Error ? error.message.trim() : '';
+    if (/failed to fetch|networkerror|load failed/i.test(message)) {
+        return '无法连接配置服务，请检查连接后重试。';
+    }
+    if (/EACCES|permission denied/i.test(message)) {
+        return '没有权限写入配置文件，请检查文件权限后重试。';
+    }
+    if (message === 'Client configuration could not be verified locally.') {
+        return '配置文件写入后的本地检查未通过，请检查文件内容和权限后重试。';
+    }
+    if (!message || /^(?:AI Connection |AI client configuration )?request failed(?:\. Please try again\.)?$/i.test(message)) {
+        return 'API Key 操作失败，请重试。';
+    }
+    return message;
 }

package/node_modules/@undefineds.co/ai-connections/dist/AiProviderCard.d.ts

@@ -1,9 +1,9 @@
-import type { AiConnectAttempt, AiConnectionsMode, AiGatewayModel, AiProviderCredentialSummary, AiProviderOffering, AiProviderSummary } from './ai-connections-client';
+import type { AiConnectAttempt, AiConnectionsMode, AiGatewayModel, AiProviderCredentialSummary, AiProviderAuthorizationMethod, AiProviderOffering, AiProviderSummary } from './ai-connections-client';
 import { type AiOfferingActionError, type AiOfferingQuotaState } from './AiCredentialPoolSection';
 export type { AiProviderDefinition } from './controller';
 import type { AiProviderDefinition } from './controller';
 export type ProviderConnectionState = 'unknown' | 'pending' | 'configured' | 'connected' | 'disconnected' | 'reauthRequired' | 'failed';
-export declare function AiProviderCard({ definition, product, status, accountLabel, attempt, attemptOfferingId, apiKey, baseUrl, busy, disabled, error, quotas, models, verifyPending, onApiKeyChange, onBaseUrlChange, onBeginApiKey, onBeginOffering, onBeginBrowser, onSaveApiKey, onDisconnect, onCreateApiKeyCredential, onCreateLocalCredential, onUpdateCredential, onDeleteCredential, onTestCredential, onReorderCredentials, onRefreshQuota, onVerify, onAddModel, onEditModel, onDeleteModel, selectedModelIds, onModelSelectionChange, onDismissError, }: {
+export declare function AiProviderCard({ definition, product, status, accountLabel, attempt, attemptOfferingId, apiKey, baseUrl, busy, disabled, error, quotas, models, verifyPending, onApiKeyChange, onBaseUrlChange, onBeginApiKey, onBeginOffering, onCancelConnect, onBeginBrowser, onSaveApiKey, onDisconnect, onCreateApiKeyCredential, onCreateLocalCredential, onUpdateCredential, onDeleteCredential, onTestCredential, onReorderCredentials, onRefreshQuota, onVerify, onAddModel, onEditModel, onDeleteModel, selectedModelIds, modelSelectionStatus, onModelSelectionChange, onDismissError, }: {
     definition: AiProviderDefinition;
     product?: AiProviderSummary;
     status: ProviderConnectionState;
@@ -21,7 +21,8 @@ export declare function AiProviderCard({ definition, product, status, accountLab
     onApiKeyChange: (value: string) => void;
     onBaseUrlChange?: (value: string) => void;
     onBeginApiKey: () => void;
-    onBeginOffering?: (offering: AiProviderOffering, mode: AiConnectionsMode) => void;
+    onBeginOffering?: (offering: AiProviderOffering, mode: AiConnectionsMode, method?: AiProviderAuthorizationMethod) => void;
+    onCancelConnect?: (attempt: Pick<AiConnectAttempt, 'attemptId' | 'state' | 'signature'>) => void;
     onBeginBrowser: () => void;
     onSaveApiKey: () => void;
     onDisconnect: (credential?: AiProviderCredentialSummary) => void;
@@ -32,7 +33,7 @@ export declare function AiProviderCard({ definition, product, status, accountLab
         proxyUrl?: string;
         priority: number;
     }) => Promise<void>;
-    onCreateLocalCredential?: (offering: AiProviderOffering) => Promise<void>;
+    onCreateLocalCredential?: (offering: AiProviderOffering, method?: AiProviderAuthorizationMethod) => Promise<void>;
     onUpdateCredential?: (credential: AiProviderCredentialSummary, patch: {
         label?: string;
         enabled?: boolean;
@@ -48,6 +49,7 @@ export declare function AiProviderCard({ definition, product, status, accountLab
     onAddModel?: () => void;
     onEditModel?: (model: AiGatewayModel) => void;
     onDeleteModel?: (model: AiGatewayModel) => void;
+    modelSelectionStatus?: 'saving' | 'saved' | 'error';
     selectedModelIds?: string[];
     onModelSelectionChange?: (provider: AiProviderSummary['id'], modelIds: string[]) => void;
     onDismissError?: () => void;