@shipfox/client-agent 22.0.2 → 23.0.0

package/dist/components/model-providers-section.js

@@ -10,10 +10,10 @@ import { Panel, PanelBody, PanelRow } from '@shipfox/react-ui/panel';
 import { Skeleton } from '@shipfox/react-ui/skeleton';
 import { toast } from '@shipfox/react-ui/toast';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@shipfox/react-ui/tooltip';
-import { Header, Text } from '@shipfox/react-ui/typography';
+import { Code, Header, Text } from '@shipfox/react-ui/typography';
 import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { managementModalReducer } from '#core/model-provider-management-reducer.js';
-import { customProviderCardMatchesSearch, isSupportedProvider, availableProviders as selectAvailableProviders } from '#core/provider-policy.js';
+import { customProviderCardMatchesSearch, isManagedOnlyCatalog, isSupportedProvider, managedProviderFromCatalog, availableProviders as selectAvailableProviders } from '#core/provider-policy.js';
 import { useDeleteModelProviderConfigMutation, useModelProviderCatalogQuery, useModelProviderConfigsQuery, useSetDefaultModelProviderMutation } from '#hooks/api/model-providers.js';
 import { AddCustomProviderCard } from './add-custom-provider-card.js';
 import { AvailableProvidersGrid } from './available-providers-grid.js';
@@ -25,6 +25,93 @@ import { ModelProviderUsageModal } from './model-provider-usage-modal.js';
 import { usageTargetFromCatalogEntry, usageTargetFromCustomConfig } from './model-provider-usage-target.js';
 import { ModelProviderTestAndSaveForm } from './test-and-save-form.js';
 const USAGE_MODAL_OPEN_DELAY_MS = 250;
+function ManagedProviderSection({ provider, onShowUsage }) {
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "flex flex-col gap-group",
+        "aria-label": "Managed provider",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-col gap-tight",
+                children: /*#__PURE__*/ _jsx(Header, {
+                    variant: "h3",
+                    children: "Managed provider"
+                })
+            }),
+            provider ? /*#__PURE__*/ _jsx(Panel, {
+                children: /*#__PURE__*/ _jsxs(PanelBody, {
+                    className: "gap-group p-panel",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex min-w-0 flex-col gap-tight",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    size: "md",
+                                    bold: true,
+                                    children: provider.label
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    size: "sm",
+                                    className: "text-foreground-neutral-muted",
+                                    children: "Managed by this instance. No workspace credentials are required."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-inline",
+                            children: [
+                                /*#__PURE__*/ _jsxs(Text, {
+                                    size: "sm",
+                                    bold: true,
+                                    children: [
+                                        "Available models (",
+                                        provider.models.length,
+                                        ")"
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("ul", {
+                                    "aria-label": `${provider.label} models`,
+                                    className: "rounded-8 border border-border-neutral-base",
+                                    children: provider.models.map((model)=>/*#__PURE__*/ _jsxs("li", {
+                                            className: "flex min-w-0 items-center justify-between gap-inline border-b border-border-neutral-base px-row py-row last:border-b-0",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    as: "span",
+                                                    size: "sm",
+                                                    bold: true,
+                                                    className: "min-w-0 truncate",
+                                                    children: model.label
+                                                }),
+                                                /*#__PURE__*/ _jsx(Code, {
+                                                    as: "span",
+                                                    variant: "label",
+                                                    className: "min-w-0 truncate text-foreground-neutral-muted",
+                                                    children: model.id
+                                                })
+                                            ]
+                                        }, model.id))
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            size: "sm",
+                            variant: "secondary",
+                            onClick: onShowUsage,
+                            children: "Use in a workflow"
+                        })
+                    ]
+                })
+            }) : /*#__PURE__*/ _jsx(Panel, {
+                children: /*#__PURE__*/ _jsx(EmptyState, {
+                    icon: "errorWarningLine",
+                    title: "Managed provider unavailable",
+                    description: "This instance is configured without workspace providers, but no managed provider was returned.",
+                    variant: "panel"
+                })
+            })
+        ]
+    });
+}
 export function WorkspaceModelProvidersSection({ workspaceId }) {
     const catalogQuery = useModelProviderCatalogQuery();
     const configsQuery = useModelProviderConfigsQuery(workspaceId);
@@ -37,6 +124,8 @@ export function WorkspaceModelProvidersSection({ workspaceId }) {
     const configs = configsQuery.data?.configs ?? [];
     const configsLoaded = configsQuery.data !== undefined;
     const defaultProviderId = configsQuery.data?.defaultProviderId ?? null;
+    const managedOnly = isManagedOnlyCatalog(catalogQuery.data);
+    const managedProvider = managedProviderFromCatalog(catalogQuery.data);
     const providerById = useMemo(()=>new Map(providers.map((provider)=>[
                 provider.id,
                 provider
@@ -66,193 +155,211 @@ export function WorkspaceModelProvidersSection({ workspaceId }) {
         const config = configs.find((item)=>item.providerId === modal.providerId);
         if (config?.kind === 'custom') return usageTargetFromCustomConfig(config);
         const entry = providerById.get(modal.providerId);
-        return entry && isSupportedProvider(entry) ? usageTargetFromCatalogEntry(entry) : null;
+        return entry && isSupportedProvider(entry) ? usageTargetFromCatalogEntry(entry, {
+            isManaged: managedOnly
+        }) : null;
     }, [
         configs,
+        managedOnly,
         modal,
         providerById
     ]);
     return /*#__PURE__*/ _jsxs("div", {
         className: "flex min-w-0 flex-col gap-region",
         children: [
-            /*#__PURE__*/ _jsxs("section", {
-                ref: configuredProvidersRegionRef,
-                className: "flex flex-col gap-group outline-none",
-                "aria-label": "Configured providers",
-                tabIndex: -1,
+            managedOnly ? /*#__PURE__*/ _jsx(ManagedProviderSection, {
+                provider: managedProvider,
+                onShowUsage: ()=>{
+                    if (!managedProvider) return;
+                    dispatchModal({
+                        type: 'show-usage',
+                        providerId: managedProvider.id,
+                        initialModel: managedProvider.defaultModel,
+                        restoreFocusToConfiguredProviders: false
+                    });
+                }
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "flex flex-col gap-tight",
-                        children: /*#__PURE__*/ _jsx(Header, {
-                            variant: "h3",
-                            children: "Configured providers"
-                        })
-                    }),
-                    configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
-                        label: "Loading configured providers"
-                    }) : null,
-                    configsQuery.isError && configsQuery.data === undefined ? /*#__PURE__*/ _jsx(Panel, {
-                        children: /*#__PURE__*/ _jsx(QueryLoadError, {
-                            query: configsQuery,
-                            subject: "model provider configs",
-                            variant: "panel"
-                        })
-                    }) : null,
-                    configsQuery.data !== undefined && configs.length === 0 ? /*#__PURE__*/ _jsx(Panel, {
-                        children: /*#__PURE__*/ _jsx(EmptyState, {
-                            icon: "key2Line",
-                            title: "No providers configured",
-                            description: "Configure a provider below to run agent steps with workspace-managed credentials.",
-                            variant: "panel"
-                        })
-                    }) : null,
-                    configs.length > 0 ? /*#__PURE__*/ _jsx(Panel, {
-                        children: /*#__PURE__*/ _jsx(PanelBody, {
-                            asChild: true,
-                            children: /*#__PURE__*/ _jsx("ul", {
-                                children: configs.map((config)=>{
-                                    const catalogEntry = providerById.get(config.providerId);
-                                    const entry = catalogEntry && isSupportedProvider(catalogEntry) ? catalogEntry : undefined;
-                                    const builtinConfig = isBuiltinModelProviderConfig(config) ? config : undefined;
-                                    const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
-                                    return /*#__PURE__*/ _jsx(ConfiguredProviderRow, {
-                                        workspaceId: workspaceId,
-                                        config: config,
-                                        entry: entry,
-                                        isDefault: config.providerId === defaultProviderId,
-                                        onEdit: ()=>{
-                                            if (entry && builtinConfig) {
-                                                dispatchModal({
-                                                    type: 'edit-builtin',
-                                                    provider: entry,
-                                                    config: builtinConfig
-                                                });
-                                            } else if (customConfig) {
-                                                dispatchModal({
-                                                    type: 'edit-custom',
-                                                    config: customConfig
-                                                });
-                                            }
-                                        },
-                                        onChangeDefaultModel: ()=>{
-                                            if (entry && builtinConfig) dispatchModal({
-                                                type: 'change-default-model',
-                                                provider: entry,
-                                                config: builtinConfig
-                                            });
-                                        },
-                                        onShowUsage: ()=>{
-                                            if (entry && builtinConfig) {
-                                                setPendingUsageTarget(null);
-                                                dispatchModal({
-                                                    type: 'show-usage',
-                                                    providerId: entry.id,
-                                                    initialModel: builtinConfig.defaultModel,
-                                                    restoreFocusToConfiguredProviders: false
-                                                });
-                                            } else if (customConfig) {
-                                                setPendingUsageTarget(null);
-                                                dispatchModal({
-                                                    type: 'show-usage',
-                                                    providerId: customConfig.providerId,
-                                                    initialModel: customConfig.defaultModel,
-                                                    restoreFocusToConfiguredProviders: false
-                                                });
-                                            }
-                                        }
-                                    }, config.providerId);
+                    /*#__PURE__*/ _jsxs("section", {
+                        ref: configuredProvidersRegionRef,
+                        className: "flex flex-col gap-group outline-none",
+                        "aria-label": "Configured providers",
+                        tabIndex: -1,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "flex flex-col gap-tight",
+                                children: /*#__PURE__*/ _jsx(Header, {
+                                    variant: "h3",
+                                    children: "Configured providers"
                                 })
-                            })
-                        })
-                    }) : null
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("section", {
-                className: "flex flex-col gap-group",
-                "aria-label": "Available providers",
-                children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "flex flex-col gap-tight",
-                        children: /*#__PURE__*/ _jsx(Header, {
-                            variant: "h3",
-                            children: "Available providers"
-                        })
+                            }),
+                            configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
+                                label: "Loading configured providers"
+                            }) : null,
+                            configsQuery.isError && configsQuery.data === undefined ? /*#__PURE__*/ _jsx(Panel, {
+                                children: /*#__PURE__*/ _jsx(QueryLoadError, {
+                                    query: configsQuery,
+                                    subject: "model provider configs",
+                                    variant: "panel"
+                                })
+                            }) : null,
+                            configsQuery.data !== undefined && configs.length === 0 ? /*#__PURE__*/ _jsx(Panel, {
+                                children: /*#__PURE__*/ _jsx(EmptyState, {
+                                    icon: "key2Line",
+                                    title: "No providers configured",
+                                    description: "Configure a provider below to run agent steps with workspace-managed credentials.",
+                                    variant: "panel"
+                                })
+                            }) : null,
+                            configs.length > 0 ? /*#__PURE__*/ _jsx(Panel, {
+                                children: /*#__PURE__*/ _jsx(PanelBody, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ _jsx("ul", {
+                                        children: configs.map((config)=>{
+                                            const catalogEntry = providerById.get(config.providerId);
+                                            const entry = catalogEntry && isSupportedProvider(catalogEntry) ? catalogEntry : undefined;
+                                            const builtinConfig = isBuiltinModelProviderConfig(config) ? config : undefined;
+                                            const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
+                                            return /*#__PURE__*/ _jsx(ConfiguredProviderRow, {
+                                                workspaceId: workspaceId,
+                                                config: config,
+                                                entry: entry,
+                                                isDefault: config.providerId === defaultProviderId,
+                                                onEdit: ()=>{
+                                                    if (entry && builtinConfig) {
+                                                        dispatchModal({
+                                                            type: 'edit-builtin',
+                                                            provider: entry,
+                                                            config: builtinConfig
+                                                        });
+                                                    } else if (customConfig) {
+                                                        dispatchModal({
+                                                            type: 'edit-custom',
+                                                            config: customConfig
+                                                        });
+                                                    }
+                                                },
+                                                onChangeDefaultModel: ()=>{
+                                                    if (entry && builtinConfig) dispatchModal({
+                                                        type: 'change-default-model',
+                                                        provider: entry,
+                                                        config: builtinConfig
+                                                    });
+                                                },
+                                                onShowUsage: ()=>{
+                                                    if (entry && builtinConfig) {
+                                                        setPendingUsageTarget(null);
+                                                        dispatchModal({
+                                                            type: 'show-usage',
+                                                            providerId: entry.id,
+                                                            initialModel: builtinConfig.defaultModel,
+                                                            restoreFocusToConfiguredProviders: false
+                                                        });
+                                                    } else if (customConfig) {
+                                                        setPendingUsageTarget(null);
+                                                        dispatchModal({
+                                                            type: 'show-usage',
+                                                            providerId: customConfig.providerId,
+                                                            initialModel: customConfig.defaultModel,
+                                                            restoreFocusToConfiguredProviders: false
+                                                        });
+                                                    }
+                                                }
+                                            }, config.providerId);
+                                        })
+                                    })
+                                })
+                            }) : null
+                        ]
                     }),
-                    catalogQuery.isPending || configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderGridSkeleton, {
-                        label: "Loading available providers"
-                    }) : null,
-                    catalogQuery.isError && catalogQuery.data === undefined ? /*#__PURE__*/ _jsx(Panel, {
-                        children: /*#__PURE__*/ _jsx(QueryLoadError, {
-                            query: catalogQuery,
-                            subject: "model provider catalog",
-                            variant: "panel"
-                        })
-                    }) : null,
-                    configsLoaded ? /*#__PURE__*/ _jsx(AvailableProvidersGrid, {
-                        entries: availableProviders,
-                        onSelect: (entry)=>dispatchModal({
-                                type: 'configure-builtin',
-                                provider: entry
+                    /*#__PURE__*/ _jsxs("section", {
+                        className: "flex flex-col gap-group",
+                        "aria-label": "Available providers",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "flex flex-col gap-tight",
+                                children: /*#__PURE__*/ _jsx(Header, {
+                                    variant: "h3",
+                                    children: "Available providers"
+                                })
                             }),
-                        trailingCard: /*#__PURE__*/ _jsx(AddCustomProviderCard, {
-                            onConfigure: ()=>dispatchModal({
-                                    type: 'create-custom'
+                            catalogQuery.isPending || configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderGridSkeleton, {
+                                label: "Loading available providers"
+                            }) : null,
+                            catalogQuery.isError && catalogQuery.data === undefined ? /*#__PURE__*/ _jsx(Panel, {
+                                children: /*#__PURE__*/ _jsx(QueryLoadError, {
+                                    query: catalogQuery,
+                                    subject: "model provider catalog",
+                                    variant: "panel"
                                 })
-                        }),
-                        trailingCardMatchesSearch: customProviderCardMatchesSearch
-                    }) : null
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("section", {
-                className: "flex flex-col gap-group",
-                "aria-label": "Unsupported providers",
-                children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "flex flex-col gap-tight",
-                        children: /*#__PURE__*/ _jsx(Header, {
-                            variant: "h3",
-                            children: "Unsupported providers"
-                        })
+                            }) : null,
+                            configsLoaded ? /*#__PURE__*/ _jsx(AvailableProvidersGrid, {
+                                entries: availableProviders,
+                                onSelect: (entry)=>dispatchModal({
+                                        type: 'configure-builtin',
+                                        provider: entry
+                                    }),
+                                trailingCard: /*#__PURE__*/ _jsx(AddCustomProviderCard, {
+                                    onConfigure: ()=>dispatchModal({
+                                            type: 'create-custom'
+                                        })
+                                }),
+                                trailingCardMatchesSearch: customProviderCardMatchesSearch
+                            }) : null
+                        ]
                     }),
-                    catalogQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
-                        label: "Loading unsupported providers"
-                    }) : null,
-                    unsupportedProviders.length > 0 ? /*#__PURE__*/ _jsx(Panel, {
-                        children: /*#__PURE__*/ _jsx(PanelBody, {
-                            asChild: true,
-                            children: /*#__PURE__*/ _jsx("ul", {
-                                children: unsupportedProviders.map((entry)=>/*#__PURE__*/ _jsx(PanelRow, {
-                                        asChild: true,
-                                        className: "items-start justify-start gap-cluster opacity-70 hover:bg-background-neutral-base",
-                                        children: /*#__PURE__*/ _jsxs("li", {
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Icon, {
-                                                    name: "forbid2Line",
-                                                    className: "mt-[2px] size-18 shrink-0 text-foreground-neutral-muted",
-                                                    "aria-hidden": true
-                                                }),
-                                                /*#__PURE__*/ _jsxs("div", {
-                                                    className: "flex min-w-0 flex-1 flex-col gap-tight",
+                    /*#__PURE__*/ _jsxs("section", {
+                        className: "flex flex-col gap-group",
+                        "aria-label": "Unsupported providers",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "flex flex-col gap-tight",
+                                children: /*#__PURE__*/ _jsx(Header, {
+                                    variant: "h3",
+                                    children: "Unsupported providers"
+                                })
+                            }),
+                            catalogQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
+                                label: "Loading unsupported providers"
+                            }) : null,
+                            unsupportedProviders.length > 0 ? /*#__PURE__*/ _jsx(Panel, {
+                                children: /*#__PURE__*/ _jsx(PanelBody, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ _jsx("ul", {
+                                        children: unsupportedProviders.map((entry)=>/*#__PURE__*/ _jsx(PanelRow, {
+                                                asChild: true,
+                                                className: "items-start justify-start gap-cluster opacity-70 hover:bg-background-neutral-base",
+                                                children: /*#__PURE__*/ _jsxs("li", {
                                                     children: [
-                                                        /*#__PURE__*/ _jsx(Text, {
-                                                            size: "md",
-                                                            bold: true,
-                                                            className: "truncate",
-                                                            children: entry.label
+                                                        /*#__PURE__*/ _jsx(Icon, {
+                                                            name: "forbid2Line",
+                                                            className: "mt-[2px] size-18 shrink-0 text-foreground-neutral-muted",
+                                                            "aria-hidden": true
                                                         }),
-                                                        /*#__PURE__*/ _jsx(Text, {
-                                                            size: "sm",
-                                                            className: "text-foreground-neutral-muted",
-                                                            children: entry.unsupportedReason
+                                                        /*#__PURE__*/ _jsxs("div", {
+                                                            className: "flex min-w-0 flex-1 flex-col gap-tight",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(Text, {
+                                                                    size: "md",
+                                                                    bold: true,
+                                                                    className: "truncate",
+                                                                    children: entry.label
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(Text, {
+                                                                    size: "sm",
+                                                                    className: "text-foreground-neutral-muted",
+                                                                    children: entry.unsupportedReason
+                                                                })
+                                                            ]
                                                         })
                                                     ]
                                                 })
-                                            ]
-                                        })
-                                    }, entry.id))
-                            })
-                        })
-                    }) : null
+                                            }, entry.id))
+                                    })
+                                })
+                            }) : null
+                        ]
+                    })
                 ]
             }),
             /*#__PURE__*/ _jsx(Modal, {