@undefineds.co/xpod 0.4.10 → 0.4.12

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

@@ -1,13 +1,22 @@
 import type { AiConnectionsClient, AiGatewayModel } from './ai-connections-client';
 import { type AiClientConfigurationBridge } from './AiClientConfigurationSection';
+import { type GatewayModelSelection } from './AiGatewayModelsSection';
 /**
  * The Xpod provider page. From a coding client's point of view Xpod is just
- * another provider, so this surface shares the provider pages' chrome: a
- * provider-style header, a credential-pool-style section, and rows that only
- * record what the issued credential means.
+ * another provider, so this surface shares the provider pages' components: the
+ * same header (`AiProviderHeader`), the same model list (`AiGatewayModelsSection`
+ * over `AiModelCatalog`), and the same endpoint list (`AiEndpointList`) that the
+ * provider pages use for their offerings' protocols.
  */
-export declare function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewayModels, }: {
+export declare function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewayModels, modelSelection, liveRevision, }: {
     client: AiConnectionsClient;
     clientConfigurationBridge?: AiClientConfigurationBridge;
     gatewayModels?: AiGatewayModel[];
+    /** Publishes or withdraws models on the models list endpoint, from this page. */
+    modelSelection?: GatewayModelSelection;
+    /**
+     * Advances when the credentials table changed outside this page (another
+     * client, a script); the Key list lives in that table and re-reads with it.
+     */
+    liveRevision?: number;
 }): import("react").JSX.Element;

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

@@ -1,13 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Avatar, AvatarFallback, Badge, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, controlFocusClass, dismissToast, toast, } from '@undefineds.co/shared-ui';
-import { Check, Copy, KeyRound, Loader2, Plus } from 'lucide-react';
+import { Badge, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, TooltipProvider, controlFocusClass, dismissToast, toast, } from '@undefineds.co/shared-ui';
+import { Check, Loader2, Plus, Settings2 } from 'lucide-react';
 import { AI_CONNECTIONS_CLIENTS, AI_CLIENT_LABELS, manualConfigurationText, } from './AiClientConfigurationSection.js';
+import { AiCopyButton } from './AiCopyButton.js';
+import { AiEndpointList } from './AiEndpointList.js';
+import { AiProviderHeader } from './AiProviderHeader.js';
+import { xpodProtocolEndpoints } from './gateway-endpoints.js';
+import { XPOD_AVATAR } from './provider-visuals.js';
 import { AiGatewayKeyRow } from './AiGatewayKeyRow.js';
+import { AiGatewayModelsSection } from './AiGatewayModelsSection.js';
 const DEFAULT_KEY_NAME = '我的 API Key';
 const CREATED_NOTIFICATION = 'API Key 已创建，请复制或应用到客户端。';
 const UNPERSISTED_COPY_MESSAGE = '这个 API Key 只在创建时可见：请销毁它，然后重新创建并立即复制或应用。';
 const UNPERSISTED_APPLY_MESSAGE = '这个 API Key 只在创建时可见：请销毁它，然后重新创建并直接应用到客户端。';
+/** Header tooltip: what Xpod is, then how the Key itself is protected. */
+const XPOD_DESCRIPTION = '把已接入的 Provider 模型统一发布给编码客户端，兼容 OpenAI 与 Anthropic 协议。';
+const XPOD_CREDENTIAL_NOTE = 'API Key 保存在当前 Pod，由 Pod 权限保护；Xpod 不保存明文。';
 const SELECT_CLASS = [
     'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-[border-color]',
     'disabled:cursor-not-allowed disabled:opacity-50',
@@ -15,11 +24,12 @@ const SELECT_CLASS = [
 ].join(' ');
 /**
  * The Xpod provider page. From a coding client's point of view Xpod is just
- * another provider, so this surface shares the provider pages' chrome: a
- * provider-style header, a credential-pool-style section, and rows that only
- * record what the issued credential means.
+ * another provider, so this surface shares the provider pages' components: the
+ * same header (`AiProviderHeader`), the same model list (`AiGatewayModelsSection`
+ * over `AiModelCatalog`), and the same endpoint list (`AiEndpointList`) that the
+ * provider pages use for their offerings' protocols.
  */
-export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewayModels, }) {
+export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewayModels, modelSelection, liveRevision = 0, }) {
     const [keys, setKeys] = useState([]);
     const [loading, setLoading] = useState(true);
     const [showCreate, setShowCreate] = useState(false);
@@ -32,13 +42,11 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewa
     const [issuedClient, setIssuedClient] = useState();
     const [appliedClient, setAppliedClient] = useState();
     const [applying, setApplying] = useState(false);
-    const [copied, setCopied] = useState();
     const [busyKeyId, setBusyKeyId] = useState();
     const [error, setError] = useState();
     const plaintexts = useRef(new Map());
     const operation = useRef(false);
     const notification = useRef(undefined);
-    const copyTimer = useRef(undefined);
     const notify = useCallback((options) => {
         if (notification.current)
             dismissToast(notification.current);
@@ -69,16 +77,30 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewa
         });
         return () => {
             active = false;
-            clearTimeout(copyTimer.current);
             if (notification.current)
                 dismissToast(notification.current);
         };
     }, [client, notifyError]);
+    // A change made elsewhere only needs new rows: it must not drop the wrapper
+    // copies this session is still showing, nor flash the loading state.
+    useEffect(() => {
+        if (liveRevision === 0)
+            return;
+        let active = true;
+        void client.listGatewayKeys()
+            .then((records) => {
+            if (active)
+                setKeys(records.filter((record) => !record.revokedAt));
+        })
+            .catch(() => undefined);
+        return () => {
+            active = false;
+        };
+    }, [client, liveRevision]);
     const openCreate = () => {
         setError(undefined);
         setName(DEFAULT_KEY_NAME);
         setPurpose('');
-        setCopied(undefined);
         // A key issued earlier in this session keeps its wrapper in the cache, so
         // the flow resumes there instead of pretending the key was never created.
         setShowCreate(true);
@@ -87,7 +109,6 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewa
         setIssued(undefined);
         setIssuedClient(undefined);
         setAppliedClient(undefined);
-        setCopied(undefined);
         setError(undefined);
         setName(DEFAULT_KEY_NAME);
         setPurpose('');
@@ -116,7 +137,6 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewa
             setIssued(created.record);
             setIssuedClient(purpose);
             setAppliedClient(undefined);
-            setCopied(undefined);
             notify({ variant: 'success', description: CREATED_NOTIFICATION });
         }
         catch (cause) {
@@ -132,24 +152,6 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewa
             throw new Error(message);
         return plaintext;
     };
-    const copy = async (record, target) => {
-        setError(undefined);
-        try {
-            const plaintext = sessionPlaintext(record, UNPERSISTED_COPY_MESSAGE);
-            if (!navigator.clipboard?.writeText) {
-                throw new Error('当前浏览器无法访问剪贴板，请允许剪贴板访问后重试。');
-            }
-            await navigator.clipboard.writeText(target === 'key'
-                ? plaintext
-                : manualConfigurationText(target, client.apiBase, plaintext));
-            setCopied(target);
-            clearTimeout(copyTimer.current);
-            copyTimer.current = setTimeout(() => setCopied(undefined), 2000);
-        }
-        catch (cause) {
-            setError(errorMessage(cause));
-        }
-    };
     const apply = async () => {
         if (!issued || !issuedClient || !clientConfigurationBridge)
             return;
@@ -212,7 +214,6 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewa
                 setIssued(undefined);
                 setIssuedClient(undefined);
                 setAppliedClient(undefined);
-                setCopied(undefined);
             }
         }
         catch (cause) {
@@ -223,13 +224,9 @@ export function AiGatewayKeysSection({ client, clientConfigurationBridge, gatewa
             setBusyKeyId(undefined);
         }
     };
-    return (_jsxs("section", { className: "space-y-8 [container-type:inline-size]", "aria-label": "API Keys", children: [_jsxs("header", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { className: "h-9 w-9 shrink-0 rounded-lg border border-border/50 bg-muted/50 shadow-sm", children: _jsx(AvatarFallback, { className: "rounded-lg bg-transparent text-sm font-bold uppercase text-muted-foreground", children: "XP" }) }), _jsxs("div", { className: "flex flex-col justify-center gap-1", children: [_jsx("h2", { className: "text-base font-semibold leading-none tracking-tight text-foreground", children: "Xpod" }), _jsx("p", { className: "max-w-3xl text-xs leading-snug text-muted-foreground", children: "API Key \u7528\u4E8E\u8BA9\u5BA2\u6237\u7AEF\u628A Xpod \u5F53\u4F5C Provider \u63A5\u5165\uFF1BXpod \u4E0D\u4FDD\u5B58 Key \u660E\u6587\u3002" })] })] }), _jsx(Badge, { variant: keys.length > 0 ? 'default' : 'secondary', children: keys.length > 0 ? `已签发 ${keys.length} 个` : '未配置' })] }), _jsxs("section", { className: "space-y-3", "aria-label": "\u5DF2\u7B7E\u53D1 API Key", 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(KeyRound, { "aria-hidden": "true", className: "h-4 w-4 text-primary" }), "\u5DF2\u7B7E\u53D1 API Key"] }), _jsxs(Button, { size: "sm", "aria-label": "\u65B0\u5EFA API Key", disabled: creating || loading, onClick: openCreate, children: [_jsx(Plus, { "aria-hidden": "true", className: "mr-2 h-4 w-4" }), "\u65B0\u5EFA API Key"] })] }), loading ? (_jsxs("div", { className: "flex items-center gap-2 py-6 text-sm text-muted-foreground", children: [_jsx(Loader2, { "aria-hidden": "true", className: "h-4 w-4 animate-spin" }), "\u6B63\u5728\u8BFB\u53D6 API Key"] })) : keys.length === 0 ? (_jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "\u5C1A\u672A\u7B7E\u53D1 API Key\u3002" })) : (_jsx("ul", { "aria-label": "API Key \u5217\u8868", className: "rounded-xl border border-border/70", children: keys.map((record) => (_jsx(AiGatewayKeyRow, { record: record, busy: Boolean(busyKeyId), onDestroy: () => void destroy(record) }, record.id))) }))] }), _jsx(Dialog, { open: showCreate, onOpenChange: (open) => { if (!open && (creating || applying))
-                    return; setShowCreate(open); }, children: _jsxs(DialogContent, { className: "sm:max-w-md", "aria-describedby": undefined, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: issued ? 'API Key 已签发' : '新建 API Key' }) }), issued && issuedClient ? (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("p", { className: "text-sm", children: ["\u5DF2\u7B7E\u53D1\u300C", issued.name || '未命名 API Key', "\u300D\uFF0C\u7528\u9014\uFF1A", AI_CLIENT_LABELS[issuedClient], "\u3002"] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Xpod \u4E0D\u4FDD\u5B58 Key \u660E\u6587\uFF0C\u8BF7\u7ACB\u5373\u590D\u5236\u6216\u76F4\u63A5\u5E94\u7528\u5230\u5BA2\u6237\u7AEF\uFF1B\u79BB\u5F00\u672C\u6B21\u4F1A\u8BDD\u540E\u65E0\u6CD5\u518D\u6B21\u83B7\u53D6\u3002" })] }), issued.maskedHint ? (_jsx("code", { className: "block truncate rounded-md border border-border/60 bg-muted/30 px-3 py-2 font-mono text-xs text-muted-foreground", children: issued.maskedHint })) : null, !clientConfigurationBridge ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "\u5F53\u524D Web \u73AF\u5883\u65E0\u6CD5\u81EA\u52A8\u5199\u5165\u5BA2\u6237\u7AEF\u914D\u7F6E\uFF0C\u8BF7\u590D\u5236\u540E\u624B\u52A8\u7C98\u8D34\uFF1B\u81EA\u52A8\u5E94\u7528\u9700\u8981\u672C\u673A\u8FDE\u63A5\u3002" })) : null, error ? _jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-label": "\u590D\u5236 API Key", disabled: applying, onClick: () => void copy(issued, 'key'), children: [copied === 'key'
-                                                    ? _jsx(Check, { "aria-hidden": "true", className: "mr-1.5 h-3.5 w-3.5 text-emerald-600" })
-                                                    : _jsx(Copy, { "aria-hidden": "true", className: "mr-1.5 h-3.5 w-3.5" }), copied === 'key' ? '已复制' : '复制 API Key'] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: applying, "aria-label": `复制 ${AI_CLIENT_LABELS[issuedClient]} 配置`, onClick: () => void copy(issued, issuedClient), children: [copied === issuedClient
-                                                    ? _jsx(Check, { "aria-hidden": "true", className: "mr-1.5 h-3.5 w-3.5 text-emerald-600" })
-                                                    : _jsx(Copy, { "aria-hidden": "true", className: "mr-1.5 h-3.5 w-3.5" }), copied === issuedClient ? '已复制' : `复制 ${AI_CLIENT_LABELS[issuedClient]} 配置`] }), clientConfigurationBridge ? (appliedClient ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Check, { "aria-hidden": "true", className: "h-3.5 w-3.5" }), "\u5DF2\u5E94\u7528\u5230 ", AI_CLIENT_LABELS[appliedClient]] })) : (_jsxs(Button, { type: "button", size: "sm", disabled: applying, "aria-label": `应用到 ${AI_CLIENT_LABELS[issuedClient]}`, onClick: () => void apply(), children: [applying ? _jsx(Loader2, { "aria-hidden": "true", className: "mr-2 h-4 w-4 animate-spin" }) : null, applying ? '正在应用…' : `应用到 ${AI_CLIENT_LABELS[issuedClient]}`] }))) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", disabled: applying, onClick: beginAnother, children: "\u518D\u5EFA\u4E00\u4E2A" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setShowCreate(false), children: "\u5B8C\u6210" })] })] })) : (_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) })] }), _jsxs("label", { className: "block space-y-2", children: [_jsx("span", { className: "text-sm font-medium", children: "\u7528\u9014" }), _jsxs("select", { "aria-label": "API Key \u7528\u9014", className: SELECT_CLASS, value: purpose, disabled: creating, onChange: (event) => setPurpose(event.target.value), children: [_jsx("option", { value: "", disabled: true, children: "\u9009\u62E9\u5BA2\u6237\u7AEF\u5E94\u7528" }), AI_CONNECTIONS_CLIENTS.map((clientId) => (_jsx("option", { value: clientId, children: AI_CLIENT_LABELS[clientId] }, clientId)))] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "\u7528\u9014\u5728\u521B\u5EFA\u65F6\u786E\u5B9A\uFF0CKey \u4F1A\u7ED1\u5B9A\u5230\u8BE5\u5BA2\u6237\u7AEF\u5E94\u7528\u3002" }), 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() || !purpose, children: [creating ? _jsx(Loader2, { "aria-hidden": "true", className: "mr-2 h-4 w-4 animate-spin" }) : null, creating ? '正在创建…' : '创建 API Key'] })] })] }))] }) })] }));
+    return (_jsx(TooltipProvider, { children: _jsxs("section", { className: "space-y-8", "aria-label": "API Keys", children: [_jsx(AiProviderHeader, { name: "Xpod", mark: "XP", avatar: XPOD_AVATAR, infoLabel: "Xpod \u8BF4\u660E", infoLines: [XPOD_DESCRIPTION, XPOD_CREDENTIAL_NOTE], link: { href: client.apiBase, label: '访问 Xpod' }, badge: (_jsx(Badge, { variant: keys.length > 0 ? 'default' : 'secondary', children: keys.length > 0 ? `已签发 ${keys.length} 个` : '未配置' })) }), _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, { "aria-hidden": "true", className: "h-4 w-4 text-primary" }), "\u5F53\u524D\u8FDE\u63A5"] }), _jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5 text-xs", "aria-label": "\u65B0\u5EFA API Key", disabled: creating || loading, onClick: openCreate, children: [_jsx(Plus, { "aria-hidden": "true", className: "h-3.5 w-3.5" }), "API Key"] }) })] }), loading ? (_jsxs("div", { className: "flex items-center gap-2 py-6 text-sm text-muted-foreground", children: [_jsx(Loader2, { "aria-hidden": "true", className: "h-4 w-4 animate-spin" }), "\u6B63\u5728\u8BFB\u53D6 API Key"] })) : keys.length === 0 ? (_jsx("p", { className: "py-2 text-xs text-muted-foreground", children: "\u5C1A\u672A\u7B7E\u53D1 API Key" })) : (_jsx("ul", { "aria-label": "API Key \u5217\u8868", className: "rounded-xl border border-border/70", children: keys.map((record) => (_jsx(AiGatewayKeyRow, { record: record, busy: Boolean(busyKeyId), onDestroy: () => void destroy(record) }, record.id))) })), _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: _jsxs("section", { className: "space-y-2", "aria-labelledby": "xpod-access-info", children: [_jsx("h4", { id: "xpod-access-info", className: "text-sm font-medium text-foreground", children: "Xpod \u63A5\u5165\u4FE1\u606F" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "API Key \u662F\u7B7E\u53D1\u7ED9\u5BA2\u6237\u7AEF\u5E94\u7528\u7684 CSS \u5BA2\u6237\u7AEF\u51ED\u636E\uFF1BPod \u53EA\u8BB0\u5F55\u5B83\u7ED1\u5B9A\u5230\u54EA\u4E2A\u5BA2\u6237\u7AEF\uFF0C\u4E0D\u4FDD\u5B58 Key \u660E\u6587\u3002" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "\u540C\u4E00\u4E2A API Key \u652F\u6301\u4EE5\u4E0B\u517C\u5BB9\u534F\u8BAE\uFF0C\u6309\u5BA2\u6237\u7AEF\u9009\u62E9\u5E76\u590D\u5236\u5BF9\u5E94\u5730\u5740\uFF1A" }), _jsx(AiEndpointList, { endpoints: xpodProtocolEndpoints(client.apiBase), copy: true, display: "protocol" })] }) })] })] }), _jsx(AiGatewayModelsSection, { models: gatewayModels, selection: modelSelection }), _jsx(Dialog, { open: showCreate, onOpenChange: (open) => { if (!open && (creating || applying))
+                        return; setShowCreate(open); }, children: _jsxs(DialogContent, { className: "sm:max-w-md", "aria-describedby": undefined, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: issued ? 'API Key 已签发' : '新建 API Key' }) }), issued && issuedClient ? (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("p", { className: "text-sm", children: ["\u5DF2\u7B7E\u53D1\u300C", issued.name || '未命名 API Key', "\u300D\uFF0C\u7528\u9014\uFF1A", AI_CLIENT_LABELS[issuedClient], "\u3002"] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Xpod \u4E0D\u4FDD\u5B58 Key \u660E\u6587\uFF0C\u8BF7\u7ACB\u5373\u590D\u5236\u6216\u76F4\u63A5\u5E94\u7528\u5230\u5BA2\u6237\u7AEF\uFF1B\u79BB\u5F00\u672C\u6B21\u4F1A\u8BDD\u540E\u65E0\u6CD5\u518D\u6B21\u83B7\u53D6\u3002" })] }), issued.maskedHint ? (_jsx("code", { className: "block truncate rounded-md border border-border/60 bg-muted/30 px-3 py-2 font-mono text-xs text-muted-foreground", children: issued.maskedHint })) : null, !clientConfigurationBridge ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "\u5F53\u524D Web \u73AF\u5883\u65E0\u6CD5\u81EA\u52A8\u5199\u5165\u5BA2\u6237\u7AEF\u914D\u7F6E\uFF0C\u8BF7\u590D\u5236\u540E\u624B\u52A8\u7C98\u8D34\uFF1B\u81EA\u52A8\u5E94\u7528\u9700\u8981\u672C\u673A\u8FDE\u63A5\u3002" })) : null, error ? _jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(AiCopyButton, { value: () => sessionPlaintext(issued, UNPERSISTED_COPY_MESSAGE), label: "API Key", text: "\u590D\u5236 API Key", disabled: applying, iconClassName: "mr-1.5 h-3.5 w-3.5", copiedIconClassName: "mr-1.5 h-3.5 w-3.5 text-emerald-600", onError: (cause) => setError(errorMessage(cause)) }), _jsx(AiCopyButton, { value: () => manualConfigurationText(issuedClient, client.apiBase, sessionPlaintext(issued, UNPERSISTED_COPY_MESSAGE)), label: `${AI_CLIENT_LABELS[issuedClient]} 配置`, text: `复制 ${AI_CLIENT_LABELS[issuedClient]} 配置`, disabled: applying, iconClassName: "mr-1.5 h-3.5 w-3.5", copiedIconClassName: "mr-1.5 h-3.5 w-3.5 text-emerald-600", onError: (cause) => setError(errorMessage(cause)) }), clientConfigurationBridge ? (appliedClient ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Check, { "aria-hidden": "true", className: "h-3.5 w-3.5" }), "\u5DF2\u5E94\u7528\u5230 ", AI_CLIENT_LABELS[appliedClient]] })) : (_jsxs(Button, { type: "button", size: "sm", disabled: applying, "aria-label": `应用到 ${AI_CLIENT_LABELS[issuedClient]}`, onClick: () => void apply(), children: [applying ? _jsx(Loader2, { "aria-hidden": "true", className: "mr-2 h-4 w-4 animate-spin" }) : null, applying ? '正在应用…' : `应用到 ${AI_CLIENT_LABELS[issuedClient]}`] }))) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", disabled: applying, onClick: beginAnother, children: "\u518D\u5EFA\u4E00\u4E2A" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setShowCreate(false), children: "\u5B8C\u6210" })] })] })) : (_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) })] }), _jsxs("label", { className: "block space-y-2", children: [_jsx("span", { className: "text-sm font-medium", children: "\u7528\u9014" }), _jsxs("select", { "aria-label": "API Key \u7528\u9014", className: SELECT_CLASS, value: purpose, disabled: creating, onChange: (event) => setPurpose(event.target.value), children: [_jsx("option", { value: "", disabled: true, children: "\u9009\u62E9\u5BA2\u6237\u7AEF\u5E94\u7528" }), AI_CONNECTIONS_CLIENTS.map((clientId) => (_jsx("option", { value: clientId, children: AI_CLIENT_LABELS[clientId] }, clientId)))] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "\u7528\u9014\u5728\u521B\u5EFA\u65F6\u786E\u5B9A\uFF0CKey \u4F1A\u7ED1\u5B9A\u5230\u8BE5\u5BA2\u6237\u7AEF\u5E94\u7528\u3002" }), 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() || !purpose, children: [creating ? _jsx(Loader2, { "aria-hidden": "true", className: "mr-2 h-4 w-4 animate-spin" }) : null, creating ? '正在创建…' : '创建 API Key'] })] })] }))] }) })] }) }));
 }
 function errorMessage(error) {
     const message = error instanceof Error ? error.message.trim() : '';

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

@@ -0,0 +1,21 @@
+import type { AiGatewayModel } from './ai-connections-client';
+/**
+ * What the gateway list shares with the provider pages.
+ *
+ * A published model is a joined one, so switching here writes the same
+ * selection the provider pages write rather than a second flag to keep in sync.
+ */
+export interface GatewayModelSelection {
+    isSelected(model: AiGatewayModel): boolean;
+    toggle(model: AiGatewayModel): void;
+    disabled?: boolean;
+}
+/**
+ * The catalog the Gateway publishes to clients (`/v1/models`), switched with the
+ * same row the provider pages use: 停用 withdraws a model from the models list
+ * endpoint, 启用 publishes it again.
+ */
+export declare function AiGatewayModelsSection({ models, selection }: {
+    models?: AiGatewayModel[];
+    selection?: GatewayModelSelection;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Badge } from '@undefineds.co/shared-ui';
+import { Box } from 'lucide-react';
+import { AiModelEmptyPanel, AiModelSearchInput, AiModelRow, modelIconTokens, withCatalogModelId, } from './AiModelCatalog.js';
+/**
+ * The catalog the Gateway publishes to clients (`/v1/models`), switched with the
+ * same row the provider pages use: 停用 withdraws a model from the models list
+ * endpoint, 启用 publishes it again.
+ */
+export function AiGatewayModelsSection({ models, selection }) {
+    const [search, setSearch] = useState('');
+    const catalog = useMemo(() => aggregateGatewayModels(models ?? []), [models]);
+    const query = search.trim().toLocaleLowerCase();
+    const visibleModels = query
+        ? catalog.filter((model) => model.searchText.includes(query))
+        : catalog;
+    const unavailableCount = catalog.filter((model) => model.availability === 'unavailable').length;
+    const publishedCount = selection
+        ? catalog.filter((model) => selection.isSelected(model)).length
+        : catalog.length;
+    return (_jsxs("section", { className: "space-y-8", "aria-label": "\u53EF\u7528\u6A21\u578B", children: [_jsxs("div", { "data-testid": "gateway-models-header", className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium text-foreground/90", children: [_jsx(Box, { "aria-hidden": "true", className: "h-4 w-4 text-primary" }), "\u53EF\u7528\u6A21\u578B"] }), _jsx("span", { className: "text-xs text-muted-foreground", children: selection
+                                    ? `共 ${catalog.length} · 已发布 ${publishedCount} · 已失效 ${unavailableCount}`
+                                    : `共 ${catalog.length} · 已失效 ${unavailableCount}` }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Xpod \u5F53\u524D\u53D1\u5E03\u7684\u6A21\u578B" })] }), _jsx(AiModelSearchInput, { value: search, onChange: setSearch })] }), models === undefined ? (_jsx(AiModelEmptyPanel, { children: "Xpod \u6A21\u578B\u76EE\u5F55\u5C1A\u672A\u5C31\u7EEA" })) : catalog.length === 0 ? (_jsx(AiModelEmptyPanel, { children: "\u6682\u65E0\u53EF\u7528\u6A21\u578B" })) : visibleModels.length === 0 ? (_jsx(AiModelEmptyPanel, { children: "\u672A\u627E\u5230\u5339\u914D\u7684\u6A21\u578B" })) : (_jsx("div", { className: "grid gap-2", children: visibleModels.map((model) => (_jsx(AiModelRow, { label: model.displayName ?? model.id, modelId: model.id, iconTokens: model.iconTokens, enabled: selection?.isSelected(model) ?? false, toggleDisabled: selection?.disabled, onToggle: selection ? () => selection.toggle(model) : undefined, unavailable: model.availability === 'unavailable', badges: (_jsxs(_Fragment, { children: [model.custom ? _jsx(Badge, { variant: "outline", className: "shrink-0 text-[10px] font-normal", children: "\u624B\u5DE5" }) : null, model.availability === 'unavailable' ? (_jsx(Badge, { variant: "destructive", className: "shrink-0 text-[10px] font-normal", children: "\u5DF2\u5931\u6548" })) : null] })) }, model.key))) }))] }));
+}
+/**
+ * One gateway model can be published once per credential/offering, so the
+ * read surface folds those entries the same way the provider page does.
+ */
+function aggregateGatewayModels(models) {
+    const catalog = new Map();
+    for (const entry of models) {
+        const model = withCatalogModelId(entry);
+        const key = `${model.provider}\0${model.id}`;
+        const iconTokens = modelIconTokens(model);
+        const searchText = [model.id, model.displayName].filter(Boolean).join('\n').toLocaleLowerCase();
+        const existing = catalog.get(key);
+        if (!existing) {
+            catalog.set(key, { ...model, key, iconTokens, searchText });
+            continue;
+        }
+        if (model.availability !== 'unavailable')
+            existing.availability = model.availability;
+        if (existing.displayName === undefined && model.displayName !== undefined) {
+            existing.displayName = model.displayName;
+        }
+        existing.iconTokens = [...new Set([...existing.iconTokens, ...iconTokens])];
+        existing.searchText += `\n${searchText}`;
+    }
+    return [...catalog.values()];
+}

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+/**
+ * The ⓘ affordance that explains a provider-style page.
+ *
+ * It owns its `TooltipProvider` on purpose. Radix keeps one "pointer in transit"
+ * flag per provider, and every trigger inside that provider ignores pointer
+ * moves while the flag is set. Sharing a provider with the model list below the
+ * header meant that leaving a capability glyph silently swallowed the next hover
+ * of the ⓘ, so it never opened on the pages whose catalog carries capability
+ * metadata. An island per ⓘ keeps that state out of everyone else's way.
+ */
+export declare function AiInfoTooltip({ label, lines }: {
+    label: string;
+    lines: ReactNode[];
+}): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@undefineds.co/shared-ui';
+import { Info } from 'lucide-react';
+/**
+ * The ⓘ affordance that explains a provider-style page.
+ *
+ * It owns its `TooltipProvider` on purpose. Radix keeps one "pointer in transit"
+ * flag per provider, and every trigger inside that provider ignores pointer
+ * moves while the flag is set. Sharing a provider with the model list below the
+ * header meant that leaving a capability glyph silently swallowed the next hover
+ * of the ⓘ, so it never opened on the pages whose catalog carries capability
+ * metadata. An island per ⓘ keeps that state out of everyone else's way.
+ */
+export function AiInfoTooltip({ label, lines }) {
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, className: "cursor-help rounded-sm text-muted-foreground/50 focus:outline-none focus-visible:text-foreground", children: _jsx(Info, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { className: "max-w-xs space-y-2 text-xs", children: lines.map((line, index) => _jsx("p", { children: line }, index)) })] }) }));
+}

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

@@ -0,0 +1,175 @@
+import { type ReactNode } from 'react';
+/**
+ * Presentation of a model catalog, shared by the provider pages and the Xpod
+ * keys page: both list models, so the search box, the inline placeholder and the
+ * model rows must stay one implementation.
+ */
+/**
+ * Every capability a model row can show, and the glyph that carries it.
+ *
+ * This is the single definition of the vocabulary: a row renders a glyph for
+ * every token it is given, so a token without an entry here would leave a hole.
+ * `modelIconTokens` therefore filters through it. The two lists used to be
+ * maintained separately, which is how `embedding` and the non-image input
+ * modalities (`pdf`, `audio`, `video`) reached the row with nothing to draw.
+ */
+export declare const MODEL_CAPABILITY_PRESENTATION: {
+    readonly image: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "视觉识别";
+        readonly className: "text-green-500";
+    };
+    readonly pdf: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "文档输入";
+        readonly className: "text-teal-500";
+    };
+    readonly audio: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "音频输入";
+        readonly className: "text-cyan-500";
+    };
+    readonly video: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "视频输入";
+        readonly className: "text-indigo-500";
+    };
+    readonly web: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "联网搜索";
+        readonly className: "text-blue-500";
+    };
+    readonly tool_call: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "函数调用";
+        readonly className: "text-orange-500";
+    };
+    readonly reasoning: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "推理";
+        readonly className: "text-purple-500";
+    };
+    readonly embedding: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "向量模型";
+        readonly className: "text-sky-500";
+    };
+    readonly fast: {
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+        readonly label: "快速模型";
+        readonly className: "text-amber-500";
+    };
+};
+export type ModelCapabilityToken = keyof typeof MODEL_CAPABILITY_PRESENTATION;
+export declare function isPresentedCapability(token: string): token is ModelCapabilityToken;
+/**
+ * Capability glyph shown beside a model name.
+ *
+ * Each glyph owns its `TooltipProvider` on purpose. Radix keeps one "pointer in
+ * transit" flag per provider and every trigger inside it ignores pointer moves
+ * while that flag is set, so a glyph whose tooltip is mid-transit would silently
+ * swallow the next hover of any other tooltip in the same provider - including
+ * the ⓘ next to the provider name. Isolating the glyphs keeps that state local.
+ */
+export declare function CapabilityIcon({ type }: {
+    type: string;
+}): import("react").JSX.Element | null;
+/**
+ * Capability tokens for one model row.
+ *
+ * Both surfaces that list models fold the same two sources, and both used to
+ * build the list inline. Duplicates are folded too: a model whose catalog entry
+ * declares an `image` input modality *and* `imageInput: true` describes one
+ * capability, but the two sources would render it twice under one React key.
+ *
+ * Tokens outside the vocabulary are dropped here rather than handed to a glyph
+ * that would render nothing, so a row never carries a mark it cannot show.
+ */
+export declare function modelIconTokens(model: {
+    inputModalities?: readonly string[];
+    capabilities?: readonly string[];
+}): ModelCapabilityToken[];
+/**
+ * The id a model is listed under, however the Pod stored it.
+ *
+ * A Pod persists a picked model as the resource it selected, so an entry can
+ * arrive with that resource reference where the model id belongs - typically a
+ * pinned selection whose document moved to another offering
+ * (`…/settings/providers/openai-official-subscription.ttl#gpt-6-astra`). The
+ * fragment names the model and the document only says where it is stored, so a
+ * reference folds down to the id it names instead of listing that model twice,
+ * once as `GPT-6-Astra` and once as a URL-shaped row.
+ *
+ * `@undefineds.co/models` owns this rule for Pod reads (`normalizeAIConfigModelId`
+ * in its `ai-config` module); the catalog repeats just the identity both lists
+ * fold on, because this package carries no Pod schema.
+ */
+export declare function modelCatalogId(model: {
+    id: string;
+}): string;
+/** Fold one entry onto the model id both surfaces list it under. */
+export declare function withCatalogModelId<T extends {
+    id: string;
+}>(model: T): T;
+/**
+ * Turns one model in a list on or off.
+ *
+ * A checkbox reads as "pick some of these" and says nothing about what picking
+ * does. This is a state with a consequence - the model joins the account's
+ * models, or it is withdrawn from the models list endpoint - so it uses the same
+ * affordance the credential rows already use for 启用/停用, and names the action.
+ */
+export declare function AiModelEnableToggle({ enabled, disabled, label, onToggle, }: {
+    enabled: boolean;
+    disabled?: boolean;
+    /** The model name; the action verb is added around it. */
+    label: string;
+    onToggle(): void;
+}): import("react").JSX.Element;
+/** Magnifier-prefixed model search, sat on the right of a model list header. */
+export declare function AiModelSearchInput({ value, onChange }: {
+    value: string;
+    onChange: (value: string) => void;
+}): import("react").JSX.Element;
+/** Inline placeholder used when a model list has nothing to show. */
+export declare function AiModelEmptyPanel({ tone, children }: {
+    tone?: 'destructive';
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * One model row, as every list of models renders it.
+ *
+ * This is the component both surfaces use. They used to assemble `AiModelTile`
+ * themselves - each with its own leading control, its own badges and its own
+ * spacing - which is exactly how one list drifted away from the other. A caller
+ * supplies the model, the switch state and any per-row extras; the row itself
+ * is decided here.
+ */
+export declare function AiModelRow({ label, modelId, iconTokens, enabled, toggleDisabled, onToggle, onEdit, onDelete, unavailable, badges, }: {
+    label: string;
+    modelId?: string;
+    iconTokens?: string[];
+    /** The model is on: it is joined to the account and published to clients. */
+    enabled: boolean;
+    toggleDisabled?: boolean;
+    /** Omit for a list that cannot be switched. */
+    onToggle?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    unavailable?: boolean;
+    badges?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * One model row. `leading` carries the provider page's selection checkbox and
+ * `actions` its edit/delete buttons; a read-only list passes neither.
+ */
+export declare function AiModelTile({ label, modelId, iconTokens, badges, leading, actions, selected, unavailable, }: {
+    label: string;
+    modelId?: string;
+    iconTokens?: string[];
+    badges?: ReactNode;
+    leading?: ReactNode;
+    actions?: ReactNode;
+    selected?: boolean;
+    unavailable?: boolean;
+}): import("react").JSX.Element;