@undefineds.co/xpod 0.4.11 → 0.4.12

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { Badge, Button, Input, } from '@undefineds.co/shared-ui';
-import { Copy, RotateCcw, SquareTerminal } from 'lucide-react';
+import { RotateCcw, SquareTerminal } from 'lucide-react';
 import { normalizeAiConnectionsThrownError } from './ai-connections-client.js';
 import { getClientAvatar } from './client-visuals.js';
+import { normalizeMessagesEndpoint, normalizeV1Endpoint } from './endpoint-urls.js';
+import { AiCopyButton } from './AiCopyButton.js';
 export const AI_CONNECTIONS_CLIENTS = ['codex', 'claude-code', 'pi', 'codebuddy'];
 export const AI_CLIENT_LABELS = {
     codex: 'Codex',
@@ -23,12 +25,10 @@ export function AiClientConfigurationSection({ bridge, endpoint, client, createC
     const [dryRun, setDryRun] = useState();
     const [confirmationValue, setConfirmationValue] = useState('');
     const [busy, setBusy] = useState(false);
-    const [copiedManualConfig, setCopiedManualConfig] = useState(false);
     const autoApplyStarted = useRef(false);
     useEffect(() => {
         setDryRun(undefined);
         setConfirmationValue('');
-        setCopiedManualConfig(false);
         if (!bridge) {
             setStatus({ status: 'unavailable' });
             return;
@@ -149,13 +149,10 @@ export function AiClientConfigurationSection({ bridge, endpoint, client, createC
     const confirmationSatisfied = !confirmation?.required || confirmationValue === confirmation.token;
     const clientLabel = AI_CLIENT_LABELS[client];
     const manual = !bridge;
-    const copyManualConfig = async () => {
-        await navigator.clipboard?.writeText(manualConfigurationText(client, endpoint, manualApiKey));
-        setCopiedManualConfig(true);
-    };
+    const manualConfig = manualConfigurationText(client, endpoint, manualApiKey);
     return (_jsxs("div", { className: compact ? '' : 'overflow-hidden rounded-md border border-border/60', children: [!compact ? _jsxs("div", { className: "flex flex-wrap items-center gap-2 px-3 py-2", children: [_jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(AiClientIcon, { client: client }) }), _jsxs("div", { className: "min-w-[10rem] flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: clientLabel }), !manual ? _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: status.message ?? (status.status === 'configured'
                                     ? `${clientLabel} 正在使用 Xpod。`
-                                    : '可自动写入本机配置。') }) : null] }), !manual ? _jsx(Badge, { variant: "secondary", children: statusLabel(status.status) }) : null, manual ? (_jsxs(Button, { variant: "ghost", size: "icon", "aria-label": `复制 ${clientLabel} 配置`, title: `复制 ${clientLabel} 配置`, onClick: () => void copyManualConfig(), children: [_jsx(Copy, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: copiedManualConfig ? '已复制' : '复制配置' })] })) : (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "sm", "aria-label": `配置 ${clientLabel}`, disabled: busy, onClick: () => void plan(), children: "\u914D\u7F6E" }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": `恢复 ${clientLabel} 配置`, disabled: status.status === 'notConfigured' || busy, onClick: () => void restore(), children: _jsx(RotateCcw, { className: "h-4 w-4" }) })] }))] }) : null, compact && busy ? (_jsxs("div", { className: "py-1 text-xs text-muted-foreground", children: ["\u6B63\u5728\u5E94\u7528 ", clientLabel, " \u914D\u7F6E\u2026"] })) : null, compact && !busy && status.message ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 py-1 text-xs text-destructive", children: [_jsx("span", { children: status.message }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => void plan(), children: "\u91CD\u8BD5\u5E94\u7528\u914D\u7F6E" })] })) : null, dryRun ? (_jsxs("div", { className: "space-y-3 border-t border-border/60 bg-muted/20 px-4 py-3", children: [_jsx("div", { className: "text-xs font-medium", children: "\u5C06\u6267\u884C\u4EE5\u4E0B\u66F4\u6539" }), dryRun.changes.map((change) => (_jsxs("div", { className: "text-xs text-muted-foreground", children: [_jsx("span", { className: "font-mono", children: change.target }), ' · ', changeActionLabel(change.action), change.backup ? ' · 创建备份' : ''] }, `${change.target}:${change.action}`))), confirmation?.required ? (_jsxs("div", { className: "space-y-2", children: [confirmation.message ? _jsx("div", { className: "text-xs text-muted-foreground", children: confirmation.message }) : null, _jsxs("div", { className: "text-xs text-muted-foreground", children: ["\u786E\u8BA4\u7801\uFF1A", _jsx("code", { className: "font-mono text-foreground", children: confirmation.token })] }), _jsx(Input, { "aria-label": `输入确认码以应用 ${clientLabel} 配置`, value: confirmationValue, onChange: (event) => setConfirmationValue(event.target.value) })] })) : null, _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", "aria-label": confirmation?.required
+                                    : '可自动写入本机配置。') }) : null] }), !manual ? _jsx(Badge, { variant: "secondary", children: statusLabel(status.status) }) : null, manual ? (_jsx(AiCopyButton, { value: manualConfig, label: `${clientLabel} 配置`, variant: "ghost", size: "icon", iconClassName: "h-4 w-4" })) : (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "sm", "aria-label": `配置 ${clientLabel}`, disabled: busy, onClick: () => void plan(), children: "\u914D\u7F6E" }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": `恢复 ${clientLabel} 配置`, disabled: status.status === 'notConfigured' || busy, onClick: () => void restore(), children: _jsx(RotateCcw, { className: "h-4 w-4" }) })] }))] }) : null, compact && busy ? (_jsxs("div", { className: "py-1 text-xs text-muted-foreground", children: ["\u6B63\u5728\u5E94\u7528 ", clientLabel, " \u914D\u7F6E\u2026"] })) : null, compact && !busy && status.message ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 py-1 text-xs text-destructive", children: [_jsx("span", { children: status.message }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => void plan(), children: "\u91CD\u8BD5\u5E94\u7528\u914D\u7F6E" })] })) : null, dryRun ? (_jsxs("div", { className: "space-y-3 border-t border-border/60 bg-muted/20 px-4 py-3", children: [_jsx("div", { className: "text-xs font-medium", children: "\u5C06\u6267\u884C\u4EE5\u4E0B\u66F4\u6539" }), dryRun.changes.map((change) => (_jsxs("div", { className: "text-xs text-muted-foreground", children: [_jsx("span", { className: "font-mono", children: change.target }), ' · ', changeActionLabel(change.action), change.backup ? ' · 创建备份' : ''] }, `${change.target}:${change.action}`))), confirmation?.required ? (_jsxs("div", { className: "space-y-2", children: [confirmation.message ? _jsx("div", { className: "text-xs text-muted-foreground", children: confirmation.message }) : null, _jsxs("div", { className: "text-xs text-muted-foreground", children: ["\u786E\u8BA4\u7801\uFF1A", _jsx("code", { className: "font-mono text-foreground", children: confirmation.token })] }), _jsx(Input, { "aria-label": `输入确认码以应用 ${clientLabel} 配置`, value: confirmationValue, onChange: (event) => setConfirmationValue(event.target.value) })] })) : null, _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", "aria-label": confirmation?.required
                                     ? `确认并应用 ${clientLabel} 配置`
                                     : `应用 ${clientLabel} 配置`, disabled: !createClientCredential || busy || !confirmationSatisfied, onClick: () => void apply(), children: confirmation?.required ? '确认并应用' : '应用配置' }), _jsx(Button, { variant: "ghost", size: "sm", disabled: busy, onClick: () => {
                                     setDryRun(undefined);
@@ -179,11 +176,16 @@ function statusLabel(status) {
         default: return '未配置';
     }
 }
+/**
+ * The OpenAI-compatible base a client is pointed at, derived from the Xpod URL.
+ * The rule itself is shared with the client-config adapters, so what a copied
+ * config claims and what the adapters write cannot drift apart.
+ */
+export const openAiCompatibleBaseUrl = normalizeV1Endpoint;
 export function manualConfigurationText(client, endpoint, apiKey) {
     const secret = apiKey ?? '<粘贴 Xpod API Key>';
-    const baseUrl = endpoint.trim().replace(/\/+$/, '');
-    const v1Url = baseUrl.endsWith('/v1') ? baseUrl : `${baseUrl}/v1`;
-    const messagesUrl = baseUrl.replace(/\/v1$/, '');
+    const v1Url = normalizeV1Endpoint(endpoint);
+    const messagesUrl = normalizeMessagesEndpoint(endpoint);
     switch (client) {
         case 'codex':
             return [

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

@@ -33,7 +33,7 @@ export function AiConnectDialog({ controller, definition, offerings, apiOffering
                         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 attemptedMode = authorizationError?.mode ?? offeringAttempt?.mode ?? (attemptedMethod ? connectModeForMethod(attemptedMethod) : modeForOffering(offering));
                         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'

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

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef } from 'react';
 import { Avatar, AvatarFallback, AvatarImage, cn } from '@undefineds.co/shared-ui';
 import { WorkspaceLayoutContext } from '@undefineds.co/extension-sdk/react';
-import { getProviderAvatar, getProviderAvatarBackground } from './provider-visuals.js';
-import { AI_CONNECTIONS_PINNED_SECTIONS, PROVIDERS, useProviderLoadError, useProviderProducts, useProviderSearch, useProviderStates, useSelectedCredentialId, useSelectedProvider, useSelectedSection, } from './controller.js';
+import { XPOD_AVATAR, getProviderAvatar, getProviderAvatarBackground } from './provider-visuals.js';
+import { AI_CONNECTIONS_PINNED_SECTIONS, PROVIDERS, useAvailableProviders, useProviderLoadError, useProviderProducts, useProviderSearch, useProviderStates, useSelectedCredentialId, useSelectedProvider, useSelectedSection, } from './controller.js';
 export function AiConnectionsList({ controller }) {
+    const availableProviders = useAvailableProviders(controller);
     const workspace = useContext(WorkspaceLayoutContext);
     const selectedSection = useSelectedSection(controller);
     const selectedProvider = useSelectedProvider(controller);
@@ -13,7 +14,10 @@ export function AiConnectionsList({ controller }) {
     const providerStates = useProviderStates(controller);
     const providerProducts = useProviderProducts(controller);
     const providerLoadError = useProviderLoadError(controller);
-    const providerItems = PROVIDERS.reduce((items, provider) => {
+    const visibleProviders = availableProviders
+        ? PROVIDERS.filter((provider) => availableProviders.includes(provider.id))
+        : PROVIDERS;
+    const providerItems = visibleProviders.reduce((items, provider) => {
         if (provider.id !== 'custom')
             return [...items, { ...provider }];
         const credentials = providerProducts.custom?.credentials ?? [];
@@ -86,11 +90,11 @@ function moveSelection(items, requestedIndex, controller, optionRefs) {
 }
 /**
  * The pinned section is an issued-credential surface, i.e. another provider from
- * the client's point of view, so it uses the provider row's mark slot instead of
- * a generic key icon.
+ * the client's point of view, so it carries the Xpod provider mark and falls
+ * back to its initials only while that mark is unavailable.
  */
 function PinnedMark({ section: _section }) {
-    return (_jsx(Avatar, { className: "h-9 w-9 shrink-0 rounded-md border border-border/20 bg-muted", children: _jsx(AvatarFallback, { className: "rounded-md bg-muted text-[10px] font-bold uppercase text-muted-foreground", children: "XP" }) }));
+    return (_jsxs(Avatar, { className: "h-9 w-9 shrink-0 rounded-md border border-border/20", children: [_jsx(AvatarImage, { src: XPOD_AVATAR, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-md bg-muted text-[10px] font-bold uppercase text-muted-foreground", children: "XP" })] }));
 }
 function ProviderStateIndicator({ state, statusId, }) {
     const active = state === 'configured' || state === 'connected';

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

@@ -1,4 +1,19 @@
 import { type AiConnectionsController } from './controller';
+/**
+ * The page's live credentials table.
+ *
+ * `useCredentialRows` subscribes to the controller's snapshot of the collection:
+ * the rows it returns already include optimistic writes, so a create/update/
+ * delete shows before the Pod has confirmed it, and the projection diff keeps
+ * unchanged rows identical. Both the table and the layer that reads it are
+ * loaded lazily, so this hook is a plain `useSyncExternalStore` over whatever the
+ * controller has - which is nothing until the collection's first read lands.
+ *
+ * Until then - while the layer is still loading, after a failed first read, or
+ * when the host offers no collection at all - `credentialRows` stays undefined
+ * and the page keeps rendering what the store reported, so a table that cannot
+ * load is never shown as an empty table.
+ */
 export declare function AiConnectionsMain({ controller, renderToaster }: {
     controller: AiConnectionsController;
     renderToaster?: boolean;

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

@@ -1,14 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AI_CONNECTIONS_PINNED_SECTIONS, PROVIDERS, useProviderLoadError, useProviderProducts, useProviderSummaries, useSelectedCredentialId, useSelectedProvider, useSelectedSection, } from './controller.js';
+import { AI_CONNECTIONS_PINNED_SECTIONS, PROVIDERS, useLiveRevision, useProviderLoadError, useProviderProducts, useProviderSummaries, useSelectedCredentialId, useSelectedProvider, useSelectedSection, } from './controller.js';
+import { useCredentialRows } from './collections.js';
 import { AiConnectionsPanel } from './AiConnectionsPanel.js';
 import { useEffect } from 'react';
+/**
+ * The page's live credentials table.
+ *
+ * `useCredentialRows` subscribes to the controller's snapshot of the collection:
+ * the rows it returns already include optimistic writes, so a create/update/
+ * delete shows before the Pod has confirmed it, and the projection diff keeps
+ * unchanged rows identical. Both the table and the layer that reads it are
+ * loaded lazily, so this hook is a plain `useSyncExternalStore` over whatever the
+ * controller has - which is nothing until the collection's first read lands.
+ *
+ * Until then - while the layer is still loading, after a failed first read, or
+ * when the host offers no collection at all - `credentialRows` stays undefined
+ * and the page keeps rendering what the store reported, so a table that cannot
+ * load is never shown as an empty table.
+ */
 export function AiConnectionsMain({ controller, renderToaster = true }) {
+    const liveCredentialRows = useCredentialRows(controller);
+    return (_jsx(AiConnectionsMainBody, { controller: controller, renderToaster: renderToaster, liveCredentialRows: liveCredentialRows }));
+}
+function AiConnectionsMainBody({ controller, renderToaster, liveCredentialRows, }) {
     const selectedSection = useSelectedSection(controller);
     const selectedProvider = useSelectedProvider(controller);
     const selectedCredentialId = useSelectedCredentialId(controller);
     const providerSummaries = useProviderSummaries(controller);
     const providerProducts = useProviderProducts(controller);
     const providerLoadError = useProviderLoadError(controller);
+    const liveRevision = useLiveRevision(controller);
     const provider = PROVIDERS.find((item) => item.id === selectedProvider);
     const selectedCredential = selectedProvider === 'custom'
         ? providerProducts.custom?.credentials.find((credential) => credential.id === selectedCredentialId)
@@ -28,15 +49,20 @@ export function AiConnectionsMain({ controller, renderToaster = true }) {
             },
         }
         : providerProducts;
+    useEffect(() => {
+        // The open page holds the live subscriptions for the tables it renders, and
+        // releases them when it goes away. Re-entrant, so StrictMode is harmless.
+        return controller.watchPageTables();
+    }, [controller]);
     useEffect(() => {
         if (controller.client)
             void controller.loadProviders();
         return () => controller.cancelProviderLoads();
-    }, [controller]);
+    }, [controller, liveRevision]);
     if (!controller.client) {
         return (_jsxs("section", { role: "alert", "aria-label": "AI Connections unavailable", children: [_jsx("h2", { children: "AI Connections \u5C1A\u672A\u5C31\u7EEA" }), _jsx("p", { children: "\u5BBF\u4E3B\u9700\u8981\u5148\u63D0\u4F9B\u5DF2\u767B\u5F55\u7684 WebID \u548C\u53EF\u7528\u7684 Pod\u3002" })] }));
     }
-    return (_jsx("section", { role: "region", "aria-label": regionLabel, children: _jsx(AiConnectionsPanel, { client: controller.client, renderToaster: renderToaster, clientConfigurationBridge: controller.clientConfigurationBridge, selectedSection: selectedSection, selectedProvider: selectedProvider, selectedCredentialId: selectedCredentialId, openExternal: controller.openExternal, providerSummaries: providerSummaries, providerProducts: scopedProducts, providerLoadError: providerLoadError, providerLoading: !providerProducts[selectedProvider] && !providerLoadError, onProviderStateChange: controller.setProviderState }) }));
+    return (_jsx("section", { role: "region", "aria-label": regionLabel, children: _jsx(AiConnectionsPanel, { client: controller.client, renderToaster: renderToaster, clientConfigurationBridge: controller.clientConfigurationBridge, selectedSection: selectedSection, selectedProvider: selectedProvider, selectedCredentialId: selectedCredentialId, openExternal: controller.openExternal, providerSummaries: providerSummaries, providerProducts: scopedProducts, providerLoadError: providerLoadError, providerLoading: !providerProducts[selectedProvider] && !providerLoadError, onProviderStateChange: controller.setProviderState, liveRevision: liveRevision, liveCredentialRows: liveCredentialRows }) }));
 }
 function scopedCustomOfferings(product, credential) {
     if (!credential)

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

@@ -1,13 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AI_CONNECTIONS_PINNED_SECTIONS, PROVIDERS, useProviderProducts, useSelectedProvider, useSelectedSection, } from './controller.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AI_CONNECTIONS_PINNED_SECTIONS, PROVIDERS, useLiveUpdates, useProviderProducts, useSelectedProvider, useSelectedSection, } from './controller.js';
+/** One short line per state; the title carries the explanation. */
+const LIVE_UPDATE_AFFORDANCE = {
+    live: {
+        label: '实时',
+        title: '实时更新已开启：Pod 中的改动会立即反映到本页。',
+        dotClass: 'bg-emerald-500',
+    },
+    unavailable: {
+        label: '实时不可用',
+        title: '实时更新当前不可用；本页仍会正常读取与操作。',
+        dotClass: 'bg-muted-foreground/60',
+    },
+};
 export function AiConnectionsMainHeader({ controller, }) {
     const selectedSection = useSelectedSection(controller);
     const selectedProvider = useSelectedProvider(controller);
     const providerProducts = useProviderProducts(controller);
+    const liveUpdates = useLiveUpdates(controller);
     const provider = PROVIDERS.find((candidate) => candidate.id === selectedProvider);
     const title = AI_CONNECTIONS_PINNED_SECTIONS.find((item) => item.id === selectedSection)?.title
         ?? providerProducts[selectedProvider]?.name
         ?? provider?.name
         ?? selectedProvider;
-    return (_jsx("div", { className: "flex h-full min-w-0 items-center px-4", children: _jsx("h1", { className: "truncate text-sm font-medium text-foreground", children: title }) }));
+    const liveAffordance = liveUpdates === 'idle' ? undefined : LIVE_UPDATE_AFFORDANCE[liveUpdates];
+    return (_jsxs("div", { className: "flex h-full min-w-0 items-center gap-2 px-4", children: [_jsx("h1", { className: "truncate text-sm font-medium text-foreground", children: title }), liveAffordance && (_jsxs("span", { "data-live-updates": liveUpdates, title: liveAffordance.title, "aria-label": liveAffordance.title, className: "ml-auto inline-flex shrink-0 items-center gap-1 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { "aria-hidden": "true", className: `h-1.5 w-1.5 rounded-full ${liveAffordance.dotClass}` }), liveAffordance.label] }))] }));
 }

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

@@ -1,6 +1,7 @@
 import { type AiConnectionsClient, type AiConnectionsProvider, type AiProviderConnectionSummary, type AiProviderSummary } from './ai-connections-client';
 import { type AiConnectionsWorkspaceSection, type ProviderProductState } from './controller';
 import type { AiClientConfigurationBridge } from './AiClientConfigurationSection';
+import { type CredentialRow } from './collections';
 export interface AiConnectionsPanelProps {
     client: AiConnectionsClient;
     /** Disable when the embedding application already renders shared-ui Toaster. */
@@ -16,5 +17,19 @@ export interface AiConnectionsPanelProps {
     providerLoading?: boolean;
     onProviderStateChange?: (provider: AiConnectionsProvider, state: ProviderProductState) => void;
     onModelSelectionChange?: (provider: AiConnectionsProvider, modelIds: string[]) => void;
+    /**
+     * Advances when a watched Pod table document changed; the page re-reads the
+     * tables it renders through its existing loaders.
+     */
+    liveRevision?: number;
+    /**
+     * Live rows of the credentials table, when the host exposes a collection.
+     *
+     * Present, every credential list the page renders is rebuilt from these rows
+     * (including optimistic writes) instead of from the summary the store read, so
+     * one table has one owner. The store's summaries stay the enrichment source
+     * for the attributes the descriptor cannot project.
+     */
+    liveCredentialRows?: readonly CredentialRow[];
 }
-export declare function AiConnectionsPanel({ client, renderToaster, openExternal, clientConfigurationBridge, selectedSection, selectedProvider, selectedCredentialId, providerSummaries: providerSummariesInput, providerProducts, providerLoadError, providerLoading, onProviderStateChange, onModelSelectionChange, }: AiConnectionsPanelProps): import("react").JSX.Element;
+export declare function AiConnectionsPanel({ client, renderToaster, openExternal, clientConfigurationBridge, selectedSection, selectedProvider, selectedCredentialId, providerSummaries: providerSummariesInput, providerProducts, providerLoadError, providerLoading, onProviderStateChange, onModelSelectionChange, liveRevision, liveCredentialRows, }: AiConnectionsPanelProps): import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Toaster, toast, } from '@undefineds.co/shared-ui';
 import { normalizeAiConnectionsThrownError, } from './ai-connections-client.js';
 import { PROVIDERS, } from './controller.js';
@@ -7,8 +7,10 @@ import { offeringTitle } from './offering-label.js';
 import { AiProviderCard, } from './AiProviderCard.js';
 import { AiModelEditorDialog, } from './AiModelEditorDialog.js';
 import { AiGatewayKeysSection } from './AiGatewayKeysSection.js';
+import { credentialCarriers, withLiveCredentials } from './collections.js';
+import { modelCatalogId, withCatalogModelId } from './AiModelCatalog.js';
 const EMPTY_PROVIDER_SUMMARIES = {};
-export function AiConnectionsPanel({ client, renderToaster = true, openExternal = openExternalUrl, clientConfigurationBridge, selectedSection = 'provider', selectedProvider, selectedCredentialId, providerSummaries: providerSummariesInput = EMPTY_PROVIDER_SUMMARIES, providerProducts = {}, providerLoadError, providerLoading = false, onProviderStateChange, onModelSelectionChange, }) {
+export function AiConnectionsPanel({ client, renderToaster = true, openExternal = openExternalUrl, clientConfigurationBridge, selectedSection = 'provider', selectedProvider, selectedCredentialId, providerSummaries: providerSummariesInput = EMPTY_PROVIDER_SUMMARIES, providerProducts = {}, providerLoadError, providerLoading = false, onProviderStateChange, onModelSelectionChange, liveRevision = 0, liveCredentialRows, }) {
     const [connectionStates, setConnectionStates] = useState({});
     const [models, setModels] = useState([]);
     const [gatewayModels, setGatewayModels] = useState();
@@ -29,10 +31,17 @@ export function AiConnectionsPanel({ client, renderToaster = true, openExternal
     const [providerProductOverrides, setProviderProductOverrides] = useState({});
     const pollingGeneration = useRef(0);
     const modelSelectionGeneration = useRef({});
-    const effectiveProviderProducts = {
+    /**
+     * Credentials come from the live rows whenever the host has a collection for
+     * that table; the store's own list is only the enrichment carrier, and an
+     * override produced by a mutation is a projection of those same rows, never an
+     * independent read. Everything else about a product (offerings, models,
+     * status) still comes from the merged products.
+     */
+    const effectiveProviderProducts = withLiveCredentials({
         ...providerProducts,
         ...providerProductOverrides,
-    };
+    }, credentialCarriers(providerProducts, providerProductOverrides), liveCredentialRows);
     const updateConnectionState = useCallback((provider, state) => {
         setConnectionStates((current) => ({ ...current, [provider]: state }));
         onProviderStateChange?.(provider, productStateFromConnection(state));
@@ -80,7 +89,7 @@ export function AiConnectionsPanel({ client, renderToaster = true, openExternal
             active = false;
             pollingGeneration.current += 1;
         };
-    }, [client]);
+    }, [client, liveRevision]);
     useEffect(() => {
         let active = true;
         setGatewayModels(undefined);
@@ -130,14 +139,15 @@ export function AiConnectionsPanel({ client, renderToaster = true, openExternal
             setBusy(provider, false);
         }
     };
+    /**
+     * The provider-level browser entry the legacy connect path still calls.
+     *
+     * Which ways in exist is offering data, so a definition can no longer name a
+     * mode; the only mode left at this level is the API-key flow, which is what
+     * this handler starts.
+     */
     const beginBrowserConnect = async (definition) => {
-        if (definition.browserMode === 'connectUnsupported')
-            return;
-        if (definition.browserMode === 'browserAssistedApiKey') {
-            await beginApiKey(definition.id);
-            return;
-        }
-        await beginConnectMode(definition.id, definition.browserMode);
+        await beginApiKey(definition.id);
     };
     const beginOfferingConnect = async (provider, offering, mode, method) => {
         if (mode === 'browserAssistedApiKey') {
@@ -651,10 +661,39 @@ export function AiConnectionsPanel({ client, renderToaster = true, openExternal
             }
         })();
     }, [client, effectiveProviderProducts, modelSelectionGeneration, models, onModelSelectionChange, selectedCredentialId, selectedModelIds]);
+    /** Selection ids a provider currently has, however they were last reported. */
+    const selectionIdsFor = useCallback((provider) => (selectedModelIds[provider]
+        ?? effectiveProviderProducts[provider]?.selectedModels.map(modelSelectionId)
+        ?? []), [selectedModelIds, effectiveProviderProducts]);
+    /**
+     * The key a gateway row is selected under.
+     *
+     * The projection names a model by its id; the Pod stores the selection as the
+     * model's resource URI. Selecting by the bare id would therefore compare
+     * unequal against everything already stored and resolve to a resource the
+     * write cannot find, so the row's own id is used whenever the account has one.
+     */
+    const gatewaySelectionId = useCallback((model) => {
+        const stored = models.find((candidate) => candidate.provider === model.provider
+            && modelCatalogId(candidate) === modelCatalogId(model));
+        return stored ? modelSelectionId(stored) : modelSelectionId(model);
+    }, [models]);
+    /** The gateway list switches the same selection the provider pages switch. */
+    const gatewayModelSelection = useMemo(() => ({
+        isSelected: (model) => selectionIdsFor(model.provider).includes(gatewaySelectionId(model)),
+        toggle: (model) => {
+            const current = selectionIdsFor(model.provider);
+            const selectionId = gatewaySelectionId(model);
+            void handleModelSelectionChange(model.provider, current.includes(selectionId)
+                ? current.filter((id) => id !== selectionId)
+                : [...current, selectionId]);
+        },
+        disabled: providerLoading,
+    }), [gatewaySelectionId, handleModelSelectionChange, providerLoading, selectionIdsFor]);
     const providerContent = (_jsxs("section", { children: [providerLoadError ? (_jsxs("p", { className: "mb-4 rounded-md border border-destructive/30 px-3 py-2 text-sm text-destructive", children: ["Provider \u72B6\u6001\u8BFB\u53D6\u5931\u8D25\uFF1A", providerLoadError] })) : null, PROVIDERS.filter((definition) => definition.id === (selectedProvider ?? 'openai')).map((definition) => {
                 const providerProduct = effectiveProviderProducts[definition.id];
                 const providerModels = mergeProviderModelCatalog(models.filter((model) => model.provider === definition.id
-                    && (definition.id !== 'custom' || !selectedCredentialId || model.credentialId === selectedCredentialId)), providerProduct?.selectedModels ?? []);
+                    && (definition.id !== 'custom' || !selectedCredentialId || model.credentialId === selectedCredentialId)), providerProduct?.selectedModels ?? [], gatewayModels ?? []);
                 const providerSelectedModelIds = selectedModelIds[definition.id]
                     ?? providerProduct?.selectedModels.map(modelSelectionId)
                     ?? [];
@@ -666,7 +705,7 @@ export function AiConnectionsPanel({ client, renderToaster = true, openExternal
                         [definition.id]: value,
                     })), onBeginApiKey: () => void beginApiKey(definition.id), onBeginOffering: (offering, mode, method) => void beginOfferingConnect(definition.id, offering, mode, method), onCancelConnect: (attempt) => void cancelConnect(definition.id, attempt), onBeginBrowser: () => void beginBrowserConnect(definition), onSaveApiKey: () => void saveApiKey(definition), onDisconnect: (credential) => void disconnect(definition.id, credential?.id), onCreateApiKeyCredential: (offering, input) => createApiKeyCredential(definition.id, offering, input), onCreateLocalCredential: (offering, method) => createLocalCredential(definition.id, offering, method), onUpdateCredential: (credential, patch) => updateProviderCredential(definition.id, credential, patch), onDeleteCredential: (credential) => void deleteProviderCredential(definition.id, credential), onTestCredential: (credential) => void testProviderCredential(definition.id, credential), onReorderCredentials: (offering, credentials, fromIndex, toIndex) => void reorderProviderCredentials(definition.id, offering, credentials, fromIndex, toIndex), onRefreshQuota: (offering, credential) => void refreshQuota(definition.id, offering, credential), verifyPending: Boolean(verifyingProviders[definition.id]), onVerify: () => void verifyProvider(definition.id), onAddModel: () => openModelEditor(definition.id), onEditModel: (model) => openModelEditor(definition.id, model), onDeleteModel: (model) => void deleteProviderModel(definition.id, model), onModelSelectionChange: handleModelSelectionChange, onDismissError: () => setProviderError(definition.id) }, definition.id));
             })] }));
-    const keyContent = (_jsx(AiGatewayKeysSection, { client: client, clientConfigurationBridge: clientConfigurationBridge, gatewayModels: gatewayModels }));
+    const keyContent = (_jsx(AiGatewayKeysSection, { client: client, clientConfigurationBridge: clientConfigurationBridge, gatewayModels: gatewayModels, modelSelection: gatewayModelSelection, liveRevision: liveRevision }));
     return (_jsxs("div", { "data-testid": "ai-connections-panel", className: "mx-auto w-full max-w-5xl space-y-10 px-4 py-6 sm:px-8 sm:py-8", children: [renderToaster ? _jsx(Toaster, {}) : null, selectedSection === 'keys' ? keyContent : null, selectedSection === 'provider' ? providerContent : null, selectedSection === 'provider' && modelEditor ? (_jsx(AiModelEditorDialog, { open: true, providerName: PROVIDERS.find((definition) => definition.id === modelEditor.provider)?.name ?? modelEditor.provider, initialValue: modelEditor.model
                     ? {
                         id: modelEditor.model.id,
@@ -836,6 +875,9 @@ function delay(milliseconds) {
     return new Promise((resolve) => window.setTimeout(resolve, milliseconds));
 }
 function errorMessage(error) {
+    if (error instanceof TypeError && /failed to fetch|fetch failed|networkerror|load failed/i.test(error.message)) {
+        return '暂时无法连接 Xpod，请在连接恢复后确认操作结果，再重试。';
+    }
     const message = normalizeAiConnectionsThrownError(error);
     return message === 'AI Connection request failed. Please try again.'
         ? '请求未完成。请确认 Xpod 正在运行且登录仍有效，然后重试。'
@@ -936,22 +978,52 @@ function markMissingSelectedModelsUnavailable(current, provider, selectedModels,
     }
     return merged;
 }
-function mergeProviderModelCatalog(catalog, selectedModels) {
-    const merged = [...catalog];
-    for (const selectedModel of selectedModels) {
+/**
+ * Fold the discovered catalog and the Pod's pinned selections into one list.
+ *
+ * Entries are folded onto the model id they name first (`withCatalogModelId`),
+ * so a pinned selection which only carries its stored resource reference lands
+ * on the catalog row it belongs to instead of being listed a second time. The
+ * two rows still keep their own resource ids: the card collects every
+ * `selectionId` it sees, so unpicking the model releases all of them.
+ *
+ * `projection` carries the capability evidence. Capabilities are not Pod data -
+ * a row records what was discovered and nothing more - so they are derived from
+ * the model id against the provider catalog, and the Gateway projection is that
+ * derivation for the models it publishes.
+ */
+function mergeProviderModelCatalog(catalog, selectedModels, projection = []) {
+    const evidence = new Map();
+    for (const model of projection) {
+        evidence.set(`${model.provider}\0${modelCatalogId(model)}`, model);
+    }
+    const withEvidence = (model) => {
+        const source = evidence.get(`${model.provider}\0${modelCatalogId(model)}`);
+        const capabilities = [...new Set([...(model.capabilities ?? []), ...(source?.capabilities ?? [])])];
+        const inputModalities = model.inputModalities ?? source?.inputModalities;
+        if (capabilities.length === 0 && !inputModalities)
+            return model;
+        return compactModel({
+            ...model,
+            ...(capabilities.length > 0 ? { capabilities } : {}),
+            ...(inputModalities ? { inputModalities } : {}),
+        });
+    };
+    const merged = catalog.map((model) => withEvidence(withCatalogModelId(model)));
+    for (const selectedModel of selectedModels.map(withCatalogModelId)) {
         const index = merged.findIndex((model) => modelSelectionId(model) === modelSelectionId(selectedModel));
         if (index === -1) {
-            merged.push(selectedModel);
+            merged.push(withEvidence(selectedModel));
             continue;
         }
-        merged[index] = compactModel({
+        merged[index] = withEvidence(compactModel({
             ...merged[index],
             ...selectedModel,
             displayName: merged[index].displayName ?? selectedModel.displayName,
             availability: merged[index].availability === 'unavailable'
                 ? 'unavailable'
                 : selectedModel.availability,
-        });
+        }));
     }
     return merged;
 }

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

@@ -0,0 +1,35 @@
+import { type ComponentProps } from 'react';
+import { Button } from '@undefineds.co/shared-ui';
+/**
+ * One clipboard affordance for the whole applet: the copied flag, its reset
+ * timer, and the "no clipboard access" failure all live here instead of being
+ * re-implemented by every caller that hands a value to the user.
+ */
+export declare function useCopyToClipboard(resetMs?: number): {
+    copied: boolean;
+    copy: (value: string) => Promise<void>;
+};
+/**
+ * Copy button carrying the applet's established affordance: a `复制 <what>`
+ * accessible name, the visible label swapping to `已复制`, and a check glyph in
+ * place of the copy glyph for the length of the feedback window.
+ */
+export declare function AiCopyButton({ value, label, text, title, variant, size, disabled, className, iconClassName, copiedIconClassName, onError, }: {
+    /**
+     * Text to copy. A function is resolved when the button is pressed, for
+     * secrets that only exist for the length of one flow.
+     */
+    value: string | (() => string);
+    /** What is copied; the accessible name becomes `复制 ${label}`. */
+    label: string;
+    /** Visible label. Omit for an icon-only button. */
+    text?: string;
+    title?: string;
+    variant?: ComponentProps<typeof Button>['variant'];
+    size?: ComponentProps<typeof Button>['size'];
+    disabled?: boolean;
+    className?: string;
+    iconClassName?: string;
+    copiedIconClassName?: string;
+    onError?: (cause: unknown) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, cn } from '@undefineds.co/shared-ui';
+import { Check, Copy } from 'lucide-react';
+const CLIPBOARD_UNAVAILABLE = '当前浏览器无法访问剪贴板，请允许剪贴板访问后重试。';
+/**
+ * One clipboard affordance for the whole applet: the copied flag, its reset
+ * timer, and the "no clipboard access" failure all live here instead of being
+ * re-implemented by every caller that hands a value to the user.
+ */
+export function useCopyToClipboard(resetMs = 1500) {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const copy = useCallback(async (value) => {
+        if (!navigator.clipboard?.writeText)
+            throw new Error(CLIPBOARD_UNAVAILABLE);
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), resetMs);
+    }, [resetMs]);
+    return { copied, copy };
+}
+/**
+ * Copy button carrying the applet's established affordance: a `复制 <what>`
+ * accessible name, the visible label swapping to `已复制`, and a check glyph in
+ * place of the copy glyph for the length of the feedback window.
+ */
+export function AiCopyButton({ value, label, text, title, variant = 'outline', size = 'sm', disabled = false, className, iconClassName = 'h-3.5 w-3.5', copiedIconClassName, onError, }) {
+    const { copied, copy } = useCopyToClipboard();
+    const iconOnly = text === undefined;
+    const Icon = copied ? Check : Copy;
+    const handleClick = () => {
+        void (async () => {
+            try {
+                await copy(typeof value === 'function' ? value() : value);
+            }
+            catch (cause) {
+                onError?.(cause);
+            }
+        })();
+    };
+    return (_jsxs(Button, { type: "button", variant: variant, size: size, disabled: disabled, className: className, "aria-label": `复制 ${label}`, title: title ?? `复制 ${label}`, onClick: handleClick, children: [_jsx(Icon, { "aria-hidden": "true", className: cn(iconClassName, copied && copiedIconClassName) }), _jsx("span", { className: iconOnly ? 'sr-only' : 'ml-1.5', children: copied ? '已复制' : text ?? '复制' })] }));
+}