@shipfox/client-agent 22.0.2 → 22.0.3

package/src/pages/model-provider-onboarding-page.stories.tsx

@@ -131,25 +131,17 @@ export const Playground: Story = {};
 
 export const Loading: Story = {
   args: {scenario: 'loading'},
-  play: async ({canvasElement}) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button', {name: 'Choose pi'}));
-  },
 };
 
 export const CatalogError: Story = {
   args: {scenario: 'catalog-error'},
-  play: async ({canvasElement}) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button', {name: 'Choose pi'}));
-  },
 };
 
 export const NoProvidersAvailable: Story = {
   args: {scenario: 'no-providers'},
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button', {name: 'Choose pi'}));
+    await userEvent.click(await canvas.findByRole('button', {name: 'Choose pi'}));
   },
 };
 
@@ -157,7 +149,7 @@ export const LongNames: Story = {
   args: {scenario: 'long-names'},
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button', {name: 'Choose pi'}));
+    await userEvent.click(await canvas.findByRole('button', {name: 'Choose pi'}));
   },
 };
 
@@ -165,7 +157,7 @@ export const FilteredProviders: Story = {
   args: {scenario: 'available'},
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button', {name: 'Choose pi'}));
+    await userEvent.click(await canvas.findByRole('button', {name: 'Choose pi'}));
     await userEvent.type(
       await canvas.findByRole('searchbox', {name: 'Search providers'}),
       'openrouter',
@@ -178,7 +170,7 @@ export const NoMatchingProviders: Story = {
   args: {scenario: 'available'},
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button', {name: 'Choose pi'}));
+    await userEvent.click(await canvas.findByRole('button', {name: 'Choose pi'}));
     await userEvent.type(
       await canvas.findByRole('searchbox', {name: 'Search providers'}),
       'not-a-provider',
@@ -191,7 +183,7 @@ export const ConfigureModalOpen: Story = {
   args: {scenario: 'available'},
   play: async ({canvasElement}) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button', {name: 'Choose pi'}));
+    await userEvent.click(await canvas.findByRole('button', {name: 'Choose pi'}));
     await userEvent.click(await canvas.findByRole('button', {name: 'Configure Anthropic'}));
     await screen.findByLabelText('API key');
   },
@@ -204,7 +196,11 @@ function fetchForScenario(scenario: Scenario): typeof fetch {
     if (scenario === 'loading') return new Promise<Response>(() => undefined);
     if (url.pathname.endsWith('/agent/model-provider-catalog')) {
       if (scenario === 'catalog-error') return Promise.resolve(errorResponse());
-      return Promise.resolve(jsonResponse({providers: catalogForScenario(scenario)}));
+      return Promise.resolve(
+        jsonResponse({
+          providers: catalogForScenario(scenario),
+        }),
+      );
     }
     if (request?.method === 'PUT' && url.pathname.includes('/agent/model-providers/')) {
       return Promise.resolve(

package/src/pages/model-provider-onboarding-page.test.tsx

@@ -1,12 +1,14 @@
 import {configureApiClient} from '@shipfox/client-api';
 import {Toaster} from '@shipfox/react-ui/toast';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
-import {render, screen, waitFor, within} from '@testing-library/react';
+import {act, render, screen, waitFor, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type {ReactElement} from 'react';
+import {modelProviderQueryKeys} from '#hooks/api/model-providers.js';
 import {isModelProviderOnboardingDismissed} from '#state/model-provider-onboarding.js';
 import {
   AGENT_TEST_WORKSPACE_ID,
+  managedModelProviderEntry,
   modelProviderCatalogResponse,
   modelProviderConfig,
   modelProviderEntry,
@@ -29,12 +31,15 @@ function requestPath(input: RequestInfo | URL): string {
 function renderOnboarding(element: ReactElement) {
   const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
 
-  return render(
-    <QueryClientProvider client={queryClient}>
-      {element}
-      <Toaster />
-    </QueryClientProvider>,
-  );
+  return {
+    queryClient,
+    ...render(
+      <QueryClientProvider client={queryClient}>
+        {element}
+        <Toaster />
+      </QueryClientProvider>,
+    ),
+  };
 }
 
 describe('ModelProviderOnboardingPage', () => {
@@ -42,6 +47,61 @@ describe('ModelProviderOnboardingPage', () => {
     window.localStorage.clear();
   });
 
+  test('waits for the catalog policy before rendering harness selection', async () => {
+    let resolveCatalog!: (response: Response) => void;
+    const catalogResponse = new Promise<Response>((resolve) => {
+      resolveCatalog = resolve;
+    });
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn().mockReturnValue(catalogResponse),
+    });
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('status', {name: 'Loading model providers'})).toBeVisible();
+    expect(screen.queryByRole('button', {name: 'Choose pi'})).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Skip for now'})).toBeVisible();
+
+    resolveCatalog(jsonResponse(modelProviderCatalogResponse()));
+
+    expect(await screen.findByRole('button', {name: 'Choose pi'})).toBeVisible();
+    await waitFor(() =>
+      expect(screen.getByRole('heading', {name: 'Choose agent harness'})).toHaveFocus(),
+    );
+  });
+
+  test('continues directly when workspace providers are managed by the instance', async () => {
+    const onConfigured = vi.fn();
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse(modelProviderCatalogResponse([managedModelProviderEntry()], 'disabled')),
+      );
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={onConfigured}
+      />,
+    );
+
+    await waitFor(() => expect(onConfigured).toHaveBeenCalledTimes(1));
+    expect(
+      screen.queryByRole('heading', {name: 'Managed inference is ready'}),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: 'Choose pi'})).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('API key')).not.toBeInTheDocument();
+  });
+
   test('skips setup, records the dismissed flag, and does not save a provider or harness', async () => {
     const user = userEvent.setup();
     const onSkip = vi.fn();
@@ -57,7 +117,7 @@ describe('ModelProviderOnboardingPage', () => {
       />,
     );
 
-    await user.click(screen.getByRole('button', {name: 'Skip for now'}));
+    await user.click(await screen.findByRole('button', {name: 'Skip for now'}));
 
     expect(onSkip).toHaveBeenCalledTimes(1);
     expect(onConfigured).not.toHaveBeenCalled();
@@ -65,7 +125,7 @@ describe('ModelProviderOnboardingPage', () => {
     expect(fetchImpl.mock.calls.some(([input]) => (input as Request).method === 'PUT')).toBe(false);
   });
 
-  test('places skip before the harness choices', () => {
+  test('places skip before the harness choices', async () => {
     configureApiClient({
       baseUrl: 'https://api.example.test',
       fetchImpl: vi.fn().mockResolvedValue(jsonResponse(modelProviderCatalogResponse())),
@@ -79,8 +139,8 @@ describe('ModelProviderOnboardingPage', () => {
       />,
     );
 
-    const skip = screen.getByRole('button', {name: 'Skip for now'});
-    const harness = screen.getByRole('button', {name: 'Choose pi'});
+    const skip = await screen.findByRole('button', {name: 'Skip for now'});
+    const harness = await screen.findByRole('button', {name: 'Choose pi'});
 
     expect(skip.compareDocumentPosition(harness)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
   });
@@ -112,19 +172,19 @@ describe('ModelProviderOnboardingPage', () => {
       />,
     );
 
-    expect(screen.getByRole('heading', {name: 'Choose agent harness'})).toBeVisible();
-    expect(screen.getByRole('button', {name: 'Choose pi'})).toBeVisible();
+    expect(await screen.findByRole('heading', {name: 'Choose agent harness'})).toBeVisible();
+    expect(await screen.findByRole('button', {name: 'Choose pi'})).toBeVisible();
     expect(screen.getByText('Works with 30+ model providers')).toBeVisible();
-    expect(screen.getByRole('button', {name: 'Choose Claude'})).toBeVisible();
+    expect(await screen.findByRole('button', {name: 'Choose Claude'})).toBeVisible();
     expect(screen.getByText('Runs on your Anthropic API key')).toBeVisible();
 
-    await user.click(screen.getByRole('button', {name: 'Choose Claude'}));
+    await user.click(await screen.findByRole('button', {name: 'Choose Claude'}));
 
     expect(await screen.findByRole('button', {name: 'Configure Anthropic'})).toBeVisible();
     expect(screen.queryByRole('button', {name: 'Configure OpenAI'})).not.toBeInTheDocument();
 
     await user.click(screen.getByRole('button', {name: 'Back'}));
-    await user.click(screen.getByRole('button', {name: 'Choose pi'}));
+    await user.click(await screen.findByRole('button', {name: 'Choose pi'}));
 
     expect(await screen.findByRole('button', {name: 'Configure Anthropic'})).toBeVisible();
     expect(screen.getByRole('button', {name: 'Configure OpenAI'})).toBeVisible();
@@ -146,7 +206,7 @@ describe('ModelProviderOnboardingPage', () => {
         onConfigured={vi.fn()}
       />,
     );
-    await user.click(screen.getByRole('button', {name: 'Choose pi'}));
+    await user.click(await screen.findByRole('button', {name: 'Choose pi'}));
     const search = await screen.findByRole('searchbox', {name: 'Search providers'});
 
     await user.type(search, 'provider 6');
@@ -182,7 +242,7 @@ describe('ModelProviderOnboardingPage', () => {
         />,
       );
 
-      await user.click(screen.getByRole('button', {name: 'Skip for now'}));
+      await user.click(await screen.findByRole('button', {name: 'Skip for now'}));
 
       expect(onSkip).toHaveBeenCalledTimes(1);
     } finally {
@@ -224,7 +284,7 @@ describe('ModelProviderOnboardingPage', () => {
       />,
     );
 
-    await user.click(screen.getByRole('button', {name: 'Choose pi'}));
+    await user.click(await screen.findByRole('button', {name: 'Choose pi'}));
     await user.click(await screen.findByRole('button', {name: 'Configure OpenAI'}));
     await user.type(await screen.findByLabelText('API key'), 'sk-proj-secret');
     await user.click(screen.getByRole('button', {name: 'Test & save'}));
@@ -274,7 +334,7 @@ describe('ModelProviderOnboardingPage', () => {
       />,
     );
 
-    await user.click(screen.getByRole('button', {name: 'Choose Claude'}));
+    await user.click(await screen.findByRole('button', {name: 'Choose Claude'}));
     await user.click(await screen.findByRole('button', {name: 'Configure Anthropic'}));
     await user.type(await screen.findByLabelText('API key'), 'sk-ant-secret');
     await user.click(screen.getByRole('button', {name: 'Test & save'}));
@@ -328,7 +388,7 @@ describe('ModelProviderOnboardingPage', () => {
       />,
     );
 
-    await user.click(screen.getByRole('button', {name: 'Choose Claude'}));
+    await user.click(await screen.findByRole('button', {name: 'Choose Claude'}));
     await user.click(await screen.findByRole('button', {name: 'Configure Anthropic'}));
     await user.type(await screen.findByLabelText('API key'), 'sk-ant-secret');
     await user.click(screen.getByRole('button', {name: 'Test & save'}));
@@ -343,7 +403,7 @@ describe('ModelProviderOnboardingPage', () => {
     await waitFor(() => expect(onConfigured).toHaveBeenCalledTimes(1));
   });
 
-  test('keeps skip available when the catalog fails to load after selecting a harness', async () => {
+  test('renders the catalog load error and keeps skip available', async () => {
     const user = userEvent.setup();
     const onSkip = vi.fn();
     configureApiClient({
@@ -359,10 +419,59 @@ describe('ModelProviderOnboardingPage', () => {
       />,
     );
 
-    await user.click(screen.getByRole('button', {name: 'Choose pi'}));
     expect(await screen.findByText("Couldn't load model provider catalog")).toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: 'Choose pi'})).not.toBeInTheDocument();
     await user.click(screen.getByRole('button', {name: 'Skip for now'}));
-
     expect(onSkip).toHaveBeenCalledTimes(1);
   });
+
+  test('recovers from a catalog load error after retry', async () => {
+    const user = userEvent.setup();
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse({code: 'server-error'}, {status: 500}))
+      .mockResolvedValueOnce(jsonResponse(modelProviderCatalogResponse()));
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={vi.fn()}
+      />,
+    );
+
+    expect(await screen.findByText("Couldn't load model provider catalog")).toBeInTheDocument();
+    await user.click(screen.getByRole('button', {name: 'Retry loading model provider catalog'}));
+
+    expect(await screen.findByRole('button', {name: 'Choose pi'})).toBeVisible();
+    await waitFor(() =>
+      expect(screen.getByRole('heading', {name: 'Choose agent harness'})).toHaveFocus(),
+    );
+  });
+
+  test('keeps the loaded harness choices when a catalog refetch fails', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(modelProviderCatalogResponse()))
+      .mockResolvedValueOnce(jsonResponse({code: 'server-error'}, {status: 500}));
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    const {queryClient} = renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={vi.fn()}
+      />,
+    );
+
+    expect(await screen.findByRole('button', {name: 'Choose pi'})).toBeVisible();
+
+    await act(async () => {
+      await queryClient.refetchQueries({queryKey: modelProviderQueryKeys.catalog()});
+    });
+
+    expect(screen.getByRole('button', {name: 'Choose pi'})).toBeVisible();
+    expect(screen.queryByText("Couldn't load model provider catalog")).not.toBeInTheDocument();
+  });
 });

package/src/pages/model-provider-onboarding-page.tsx

@@ -6,7 +6,7 @@ import {Modal, ModalContent, ModalHeader, ModalTitle} from '@shipfox/react-ui/mo
 import {Panel, PanelBody, PanelCell, PanelCellAction, PanelGrid} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
-import {useEffect, useMemo, useReducer} from 'react';
+import {useEffect, useMemo, useReducer, useRef} from 'react';
 import {AvailableProvidersGrid} from '#components/available-providers-grid.js';
 import {modelProviderConfigErrorToFormError} from '#components/form-errors.js';
 import {ModelProviderGridSkeleton} from '#components/model-provider-grid-skeleton.js';
@@ -14,7 +14,7 @@ import {ModelProviderTestAndSaveForm} from '#components/test-and-save-form.js';
 import {DEFAULT_HARNESS, harnessSupportsProvider, listHarnesses} from '#core/harness-policy.js';
 import type {HarnessDescriptor, HarnessId, SupportedProvider} from '#core/models.js';
 import {initialOnboardingState, onboardingReducer} from '#core/onboarding-reducer.js';
-import {isSupportedProvider} from '#core/provider-policy.js';
+import {isManagedOnlyCatalog, isSupportedProvider} from '#core/provider-policy.js';
 import {
   useModelProviderCatalogQuery,
   useSetDefaultHarnessMutation,
@@ -34,6 +34,11 @@ export function ModelProviderOnboardingPage({
   const setDefaultHarness = useSetDefaultHarnessMutation();
   const [onboarding, dispatch] = useReducer(onboardingReducer, initialOnboardingState);
   const supportedProviders = catalogQuery.data?.providers.filter(isSupportedProvider) ?? [];
+  const catalogLoaded = catalogQuery.data !== undefined;
+  const catalogLoading = catalogQuery.isPending;
+  const catalogLoadError = catalogQuery.isError && catalogQuery.data === undefined;
+  const managedOnly = isManagedOnlyCatalog(catalogQuery.data);
+  const managedOnlyForwarded = useRef(false);
   const filteredProviders = useMemo(() => {
     if (onboarding.step === 'choose-harness') return [];
     return supportedProviders.filter((provider) =>
@@ -42,6 +47,13 @@ export function ModelProviderOnboardingPage({
   }, [onboarding, supportedProviders]);
 
   useEffect(() => {
+    if (!managedOnly || managedOnlyForwarded.current) return;
+    managedOnlyForwarded.current = true;
+    onConfigured();
+  }, [managedOnly, onConfigured]);
+
+  useEffect(() => {
+    if (managedOnly || !catalogLoaded) return;
     document
       .getElementById(
         onboarding.step === 'choose-harness'
@@ -49,7 +61,9 @@ export function ModelProviderOnboardingPage({
           : 'model-provider-provider-step',
       )
       ?.focus();
-  }, [onboarding.step]);
+  }, [catalogLoaded, managedOnly, onboarding.step]);
+
+  if (managedOnly) return null;
 
   function handleSkip() {
     try {
@@ -120,27 +134,36 @@ export function ModelProviderOnboardingPage({
       </header>
 
       <section aria-labelledby={headingId} className="flex flex-col gap-group">
-        {onboarding.step === 'choose-harness' ? (
-          <HarnessPicker
-            onSelect={(harnessId) => dispatch({type: 'harness-selected', harnessId})}
-          />
-        ) : (
-          <>
-            <div>
-              <Button type="button" variant="transparent" onClick={() => dispatch({type: 'back'})}>
-                Back
-              </Button>
-            </div>
-            <ModelProviderPicker
-              key={onboarding.harnessId}
-              catalogQuery={catalogQuery}
-              supportedProviders={filteredProviders}
-              onSelect={(entry) => {
-                dispatch({type: 'provider-selected', provider: entry});
-              }}
+        {catalogLoading ? <ModelProviderGridSkeleton label="Loading model providers" /> : null}
+        {catalogLoadError ? (
+          <QueryLoadError query={catalogQuery} subject="model provider catalog" />
+        ) : null}
+        {!catalogLoading && !catalogLoadError ? (
+          onboarding.step === 'choose-harness' ? (
+            <HarnessPicker
+              onSelect={(harnessId) => dispatch({type: 'harness-selected', harnessId})}
             />
-          </>
-        )}
+          ) : (
+            <>
+              <div>
+                <Button
+                  type="button"
+                  variant="transparent"
+                  onClick={() => dispatch({type: 'back'})}
+                >
+                  Back
+                </Button>
+              </div>
+              <ModelProviderPicker
+                key={onboarding.harnessId}
+                supportedProviders={filteredProviders}
+                onSelect={(entry) => {
+                  dispatch({type: 'provider-selected', provider: entry});
+                }}
+              />
+            </>
+          )
+        ) : null}
       </section>
 
       <Modal
@@ -242,23 +265,13 @@ function HarnessCard({harness, onChoose}: {harness: HarnessDescriptor; onChoose:
 }
 
 function ModelProviderPicker({
-  catalogQuery,
   supportedProviders,
   onSelect,
 }: {
-  catalogQuery: ReturnType<typeof useModelProviderCatalogQuery>;
   supportedProviders: SupportedProvider[];
   onSelect: (entry: SupportedProvider) => void;
 }) {
-  if (catalogQuery.isPending) {
-    return <ModelProviderGridSkeleton label="Loading model providers" />;
-  }
-
-  if (catalogQuery.isError && catalogQuery.data === undefined) {
-    return <QueryLoadError query={catalogQuery} subject="model provider catalog" />;
-  }
-
-  if (catalogQuery.data !== undefined && supportedProviders.length === 0) {
+  if (supportedProviders.length === 0) {
     return (
       <EmptyState
         icon="componentLine"

package/test/fixtures/model-providers.ts

@@ -4,6 +4,7 @@ import type {
   ModelProviderCatalogEntryDto,
   ModelProviderCatalogResponseDto,
   ModelProviderConfigDto,
+  WorkspaceProvidersPolicy,
 } from '@shipfox/api-agent-dto';
 
 export const AGENT_TEST_WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
@@ -35,6 +36,22 @@ export function modelProviderEntry(
   };
 }
 
+export function managedModelProviderEntry(
+  overrides: Partial<ModelProviderCatalogEntryDto> = {},
+): ModelProviderCatalogEntryDto {
+  return modelProviderEntry({
+    id: 'shipfox',
+    label: 'Shipfox Managed',
+    default_model: 'claude-opus-4-8',
+    credential_fields: [],
+    models: [
+      {id: 'claude-opus-4-8', label: 'Claude Opus 4.8', api: 'anthropic-messages'},
+      {id: 'gpt-5.5-pro', label: 'GPT-5.5 Pro', api: 'openai-responses'},
+    ],
+    ...overrides,
+  });
+}
+
 export function unsupportedModelProviderEntry(
   overrides: Partial<ModelProviderCatalogEntryDto> = {},
 ): ModelProviderCatalogEntryDto {
@@ -95,8 +112,12 @@ export function customModelProviderConfig(
 
 export function modelProviderCatalogResponse(
   modelProviders: ModelProviderCatalogEntryDto[] = [modelProviderEntry()],
+  workspaceProviders?: WorkspaceProvidersPolicy,
 ): ModelProviderCatalogResponseDto {
-  return {providers: modelProviders};
+  return {
+    providers: modelProviders,
+    ...(workspaceProviders === undefined ? {} : {workspace_providers: workspaceProviders}),
+  };
 }
 
 export function modelProviderConfigsResponse(