@shipfox/client-agent 0.2.0

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

@@ -0,0 +1,284 @@
+import type {ModelProviderCatalogEntryDto, ModelProviderConfigDto} from '@shipfox/api-agent-dto';
+import {configureApiClient} from '@shipfox/client-api';
+import {Toaster} from '@shipfox/react-ui/toast';
+import type {Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {useMemo} from 'react';
+import {screen, userEvent, within} from 'storybook/test';
+import {ModelProviderOnboardingPage} from './model-provider-onboarding-page.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+
+type Scenario = 'available' | 'loading' | 'catalog-error' | 'no-providers' | 'long-names';
+
+interface ModelProviderOnboardingStoryProps {
+  scenario: Scenario;
+}
+
+const CATALOG: ModelProviderCatalogEntryDto[] = [
+  providerEntry({
+    id: 'anthropic',
+    label: 'Anthropic',
+    default_model: 'claude-opus-4-8',
+    models: [
+      {id: 'claude-opus-4-8', label: 'Claude Opus 4.8'},
+      {id: 'claude-haiku-4-5', label: 'Claude Haiku 4.5'},
+    ],
+  }),
+  providerEntry({
+    id: 'openai',
+    label: 'OpenAI',
+    default_model: 'gpt-5.5-pro',
+    models: [
+      {id: 'gpt-5.5-pro', label: 'GPT-5.5 Pro'},
+      {id: 'gpt-5-mini', label: 'GPT-5 Mini'},
+    ],
+  }),
+  providerEntry({
+    id: 'xai',
+    label: 'xAI',
+    default_model: 'grok-code-fast-1',
+    models: [{id: 'grok-code-fast-1', label: 'Grok Code Fast 1'}],
+  }),
+  providerEntry({
+    id: 'openrouter',
+    label: 'OpenRouter',
+    default_model: 'openrouter/auto',
+    models: [{id: 'openrouter/auto', label: 'OpenRouter Auto'}],
+  }),
+  providerEntry({
+    id: 'google',
+    label: 'Google Gemini',
+    default_model: 'gemini-3-pro',
+    models: [{id: 'gemini-3-pro', label: 'Gemini 3 Pro'}],
+  }),
+  providerEntry({
+    id: 'mistral',
+    label: 'Mistral AI',
+    default_model: 'codestral-latest',
+    models: [{id: 'codestral-latest', label: 'Codestral Latest'}],
+  }),
+  providerEntry({
+    id: 'groq',
+    label: 'Groq',
+    default_model: 'llama-4-fast',
+    models: [{id: 'llama-4-fast', label: 'Llama 4 Fast'}],
+  }),
+  providerEntry({
+    id: 'deepseek',
+    label: 'DeepSeek',
+    default_model: 'deepseek-coder',
+    models: [{id: 'deepseek-coder', label: 'DeepSeek Coder'}],
+  }),
+  providerEntry({
+    id: 'moonshotai',
+    label: 'Moonshot AI',
+    default_model: 'kimi-k2',
+    models: [{id: 'kimi-k2', label: 'Kimi K2'}],
+  }),
+  providerEntry({
+    id: 'azure-openai-responses',
+    label: 'Azure OpenAI Responses',
+    default_model: 'gpt-5.5-pro',
+    models: [{id: 'gpt-5.5-pro', label: 'GPT-5.5 Pro'}],
+  }),
+  providerEntry({
+    id: 'amazon-bedrock',
+    label: 'Amazon Bedrock',
+    support_status: 'unsupported',
+    credential_fields: [],
+    unsupported_reason: 'AWS cloud credentials are not supported yet.',
+    models: [],
+  }),
+];
+
+function ModelProviderOnboardingStory({scenario}: ModelProviderOnboardingStoryProps) {
+  configureApiClient({
+    baseUrl: 'https://api.example.test',
+    fetchImpl: fetchForScenario(scenario),
+  });
+
+  const queryClient = useMemo(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),
+    [],
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="bg-background-neutral-background px-24 py-32">
+        <ModelProviderOnboardingPage
+          workspaceId={WORKSPACE_ID}
+          onSkip={() => undefined}
+          onConfigured={() => undefined}
+        />
+      </div>
+      <Toaster />
+    </QueryClientProvider>
+  );
+}
+
+const meta = {
+  title: 'Agent/ProviderOnboarding',
+  component: ModelProviderOnboardingStory,
+  parameters: {layout: 'fullscreen'},
+  args: {scenario: 'available'},
+} satisfies Meta<typeof ModelProviderOnboardingStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+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'}));
+  },
+};
+
+export const LongNames: Story = {
+  args: {scenario: 'long-names'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', {name: 'Choose pi'}));
+  },
+};
+
+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.type(
+      await canvas.findByRole('searchbox', {name: 'Search providers'}),
+      'openrouter',
+    );
+    await canvas.findByRole('button', {name: 'Configure OpenRouter'});
+  },
+};
+
+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.type(
+      await canvas.findByRole('searchbox', {name: 'Search providers'}),
+      'not-a-provider',
+    );
+    await canvas.findByRole('button', {name: 'Clear search'});
+  },
+};
+
+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: 'Configure Anthropic'}));
+    await screen.findByLabelText('API key');
+  },
+};
+
+function fetchForScenario(scenario: Scenario): typeof fetch {
+  return (input) => {
+    const url = requestUrl(input);
+    const request = input instanceof Request ? input : undefined;
+    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)}));
+    }
+    if (request?.method === 'PUT' && url.pathname.includes('/agent/model-providers/')) {
+      return Promise.resolve(
+        jsonResponse(
+          providerConfig({
+            provider_id: url.pathname.endsWith('/openai') ? 'openai' : 'anthropic',
+          }),
+        ),
+      );
+    }
+    return Promise.resolve(jsonResponse({}, {status: 404}));
+  };
+}
+
+function catalogForScenario(scenario: Scenario): ModelProviderCatalogEntryDto[] {
+  if (scenario === 'no-providers') return [];
+  if (scenario !== 'long-names') return CATALOG;
+  return [
+    providerEntry({
+      id: 'anthropic',
+      label: 'Anthropic Enterprise Production Claude Provider With Long Label',
+      default_model: 'claude-opus-4-8',
+    }),
+    providerEntry({
+      id: 'openai',
+      label: 'OpenAI Platform Shared Workspace Credentials With Long Label',
+      default_model: 'gpt-5.5-pro',
+      models: [{id: 'gpt-5.5-pro', label: 'GPT-5.5 Pro'}],
+    }),
+  ];
+}
+
+function providerEntry(
+  overrides: Partial<ModelProviderCatalogEntryDto> = {},
+): ModelProviderCatalogEntryDto {
+  return {
+    id: 'anthropic',
+    label: 'Anthropic',
+    support_status: 'supported',
+    default_model: null,
+    credential_fields: [{key: 'api_key', label: 'API key', secret: true}],
+    unsupported_reason: null,
+    models: [{id: 'claude-opus-4-8', label: 'Claude Opus 4.8'}],
+    ...overrides,
+  };
+}
+
+function providerConfig(
+  overrides: Partial<Omit<ModelProviderConfigDto, 'kind'>> = {},
+): ModelProviderConfigDto {
+  return {
+    kind: 'builtin',
+    provider_id: 'anthropic',
+    default_model: null,
+    created_at: '2026-05-08T00:00:00.000Z',
+    updated_at: '2026-05-08T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+function requestUrl(input: RequestInfo | URL): URL {
+  if (typeof input === 'string') return new URL(input);
+  if (input instanceof URL) return input;
+  return new URL(input.url);
+}
+
+function jsonResponse(body: unknown, init: ResponseInit = {}) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: {'content-type': 'application/json'},
+    ...init,
+  });
+}
+
+function errorResponse() {
+  return jsonResponse({code: 'server-error'}, {status: 500, statusText: 'Server error'});
+}

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

@@ -0,0 +1,368 @@
+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 userEvent from '@testing-library/user-event';
+import type {ReactElement} from 'react';
+import {isModelProviderOnboardingDismissed} from '#state/model-provider-onboarding.js';
+import {
+  AGENT_TEST_WORKSPACE_ID,
+  modelProviderCatalogResponse,
+  modelProviderConfig,
+  modelProviderEntry,
+  testModelProviderEntries,
+} from '#test/fixtures/model-providers.js';
+import {ModelProviderOnboardingPage} from './model-provider-onboarding-page.js';
+
+function jsonResponse(body: unknown, init: ResponseInit = {}) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: {'content-type': 'application/json'},
+    ...init,
+  });
+}
+
+function requestPath(input: RequestInfo | URL): string {
+  return new URL((input as Request).url).pathname;
+}
+
+function renderOnboarding(element: ReactElement) {
+  const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {element}
+      <Toaster />
+    </QueryClientProvider>,
+  );
+}
+
+describe('ModelProviderOnboardingPage', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  test('skips setup, records the dismissed flag, and does not save a provider or harness', async () => {
+    const user = userEvent.setup();
+    const onSkip = vi.fn();
+    const onConfigured = vi.fn();
+    const fetchImpl = vi.fn().mockResolvedValue(jsonResponse(modelProviderCatalogResponse()));
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={onSkip}
+        onConfigured={onConfigured}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', {name: 'Skip for now'}));
+
+    expect(onSkip).toHaveBeenCalledTimes(1);
+    expect(onConfigured).not.toHaveBeenCalled();
+    expect(isModelProviderOnboardingDismissed(AGENT_TEST_WORKSPACE_ID)).toBe(true);
+    expect(fetchImpl.mock.calls.some(([input]) => (input as Request).method === 'PUT')).toBe(false);
+  });
+
+  test('places skip before the harness choices', () => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn().mockResolvedValue(jsonResponse(modelProviderCatalogResponse())),
+    });
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={vi.fn()}
+      />,
+    );
+
+    const skip = screen.getByRole('button', {name: 'Skip for now'});
+    const harness = screen.getByRole('button', {name: 'Choose pi'});
+
+    expect(skip.compareDocumentPosition(harness)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+  });
+
+  test('shows harnesses first, filters providers by harness, and supports going back', async () => {
+    const user = userEvent.setup();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn().mockResolvedValue(
+        jsonResponse(
+          modelProviderCatalogResponse([
+            modelProviderEntry(),
+            modelProviderEntry({
+              id: 'openai',
+              label: 'OpenAI',
+              default_model: 'gpt-5.5-pro',
+              models: [{id: 'gpt-5.5-pro', label: 'GPT-5.5 Pro'}],
+            }),
+          ]),
+        ),
+      ),
+    });
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('heading', {name: 'Choose agent harness'})).toBeVisible();
+    expect(screen.getByRole('button', {name: 'Choose pi'})).toBeVisible();
+    expect(screen.getByText('Works with 30+ model providers')).toBeVisible();
+    expect(screen.getByRole('button', {name: 'Choose Claude'})).toBeVisible();
+    expect(screen.getByText('Runs on your Anthropic API key')).toBeVisible();
+
+    await user.click(screen.getByRole('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'}));
+
+    expect(await screen.findByRole('button', {name: 'Configure Anthropic'})).toBeVisible();
+    expect(screen.getByRole('button', {name: 'Configure OpenAI'})).toBeVisible();
+  });
+
+  test('filters supported providers and clears a no-match search after choosing pi', async () => {
+    const user = userEvent.setup();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi
+        .fn()
+        .mockResolvedValue(jsonResponse(modelProviderCatalogResponse(testModelProviderEntries(9)))),
+    });
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={vi.fn()}
+      />,
+    );
+    await user.click(screen.getByRole('button', {name: 'Choose pi'}));
+    const search = await screen.findByRole('searchbox', {name: 'Search providers'});
+
+    await user.type(search, 'provider 6');
+
+    expect(screen.getByRole('button', {name: 'Configure Provider 6'})).toBeVisible();
+    expect(screen.queryByRole('button', {name: 'Configure Provider 1'})).not.toBeInTheDocument();
+    await user.clear(search);
+    await user.type(search, 'missing');
+    expect(screen.getByText('No providers match "missing"')).toBeVisible();
+    await user.click(screen.getByRole('button', {name: 'Clear search'}));
+
+    expect(screen.getByRole('button', {name: 'Configure Provider 1'})).toBeVisible();
+    await waitFor(() => expect(search).toHaveFocus());
+  });
+
+  test('skip still continues when localStorage rejects the dismissed write', async () => {
+    const user = userEvent.setup();
+    const onSkip = vi.fn();
+    const setItem = vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('quota exceeded');
+    });
+    try {
+      configureApiClient({
+        baseUrl: 'https://api.example.test',
+        fetchImpl: vi.fn().mockResolvedValue(jsonResponse(modelProviderCatalogResponse())),
+      });
+
+      renderOnboarding(
+        <ModelProviderOnboardingPage
+          workspaceId={AGENT_TEST_WORKSPACE_ID}
+          onSkip={onSkip}
+          onConfigured={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', {name: 'Skip for now'}));
+
+      expect(onSkip).toHaveBeenCalledTimes(1);
+    } finally {
+      setItem.mockRestore();
+    }
+  });
+
+  test('saves a pi provider as default and skips the default harness request', async () => {
+    const user = userEvent.setup();
+    const onConfigured = vi.fn();
+    const requestBodies: unknown[] = [];
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (requestPath(input).endsWith('/agent/model-provider-catalog')) {
+        return jsonResponse(
+          modelProviderCatalogResponse([
+            modelProviderEntry({
+              id: 'openai',
+              label: 'OpenAI',
+              default_model: 'gpt-5.5-pro',
+              models: [{id: 'gpt-5.5-pro', label: 'GPT-5.5 Pro'}],
+            }),
+          ]),
+        );
+      }
+      if (request.method === 'PUT') {
+        requestBodies.push(await request.clone().json());
+        return jsonResponse(modelProviderConfig({provider_id: 'openai', default_model: null}));
+      }
+      return jsonResponse({}, {status: 404});
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={onConfigured}
+      />,
+    );
+
+    await user.click(screen.getByRole('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'}));
+
+    await waitFor(() =>
+      expect(requestBodies).toEqual([
+        {
+          default_model: null,
+          credentials: {api_key: 'sk-proj-secret'},
+          set_as_default: true,
+        },
+      ]),
+    );
+    expect(onConfigured).toHaveBeenCalledTimes(1);
+    expect(
+      fetchImpl.mock.calls.some(([input]) => requestPath(input).endsWith('/agent/default-harness')),
+    ).toBe(false);
+  });
+
+  test('saves the chosen Claude harness after the provider is persisted', async () => {
+    const user = userEvent.setup();
+    const onConfigured = vi.fn();
+    const requests: Array<{path: string; body: unknown}> = [];
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      const request = input as Request;
+      const path = requestPath(input);
+      if (path.endsWith('/agent/model-provider-catalog')) {
+        return jsonResponse(modelProviderCatalogResponse());
+      }
+      if (request.method === 'PUT') {
+        const body = await request.clone().json();
+        requests.push({path, body});
+        if (path.endsWith('/agent/default-harness')) {
+          return jsonResponse({default_harness_id: 'claude'});
+        }
+        return jsonResponse(modelProviderConfig());
+      }
+      return jsonResponse({}, {status: 404});
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={onConfigured}
+      />,
+    );
+
+    await user.click(screen.getByRole('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'}));
+
+    await waitFor(() => expect(onConfigured).toHaveBeenCalledTimes(1));
+    expect(requests).toEqual([
+      {
+        path: `/workspaces/${AGENT_TEST_WORKSPACE_ID}/agent/model-providers/anthropic`,
+        body: {
+          default_model: null,
+          credentials: {api_key: 'sk-ant-secret'},
+          set_as_default: true,
+        },
+      },
+      {
+        path: `/workspaces/${AGENT_TEST_WORKSPACE_ID}/agent/default-harness`,
+        body: {harness_id: 'claude'},
+      },
+    ]);
+  });
+
+  test('keeps the user on the page when saving the default harness fails', async () => {
+    const user = userEvent.setup();
+    const onConfigured = vi.fn();
+    let harnessAttempts = 0;
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      const path = requestPath(input);
+      if (path.endsWith('/agent/model-provider-catalog')) {
+        return Promise.resolve(jsonResponse(modelProviderCatalogResponse()));
+      }
+      if (request.method === 'PUT' && path.endsWith('/agent/default-harness')) {
+        harnessAttempts += 1;
+        if (harnessAttempts === 1) {
+          return Promise.resolve(jsonResponse({code: 'server-error'}, {status: 500}));
+        }
+        return Promise.resolve(jsonResponse({default_harness_id: 'claude'}));
+      }
+      if (request.method === 'PUT') {
+        return Promise.resolve(jsonResponse(modelProviderConfig()));
+      }
+      return Promise.resolve(jsonResponse({}, {status: 404}));
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={vi.fn()}
+        onConfigured={onConfigured}
+      />,
+    );
+
+    await user.click(screen.getByRole('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'}));
+
+    await waitFor(() => expect(harnessAttempts).toBe(1));
+    expect(await screen.findByText('Could not save default harness')).toBeVisible();
+    expect(screen.getByRole('dialog', {name: 'Configure Anthropic'})).toBeVisible();
+    expect(onConfigured).not.toHaveBeenCalled();
+
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', {name: 'Test & save'}));
+
+    await waitFor(() => expect(onConfigured).toHaveBeenCalledTimes(1));
+  });
+
+  test('keeps skip available when the catalog fails to load after selecting a harness', async () => {
+    const user = userEvent.setup();
+    const onSkip = vi.fn();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn().mockResolvedValue(jsonResponse({code: 'server-error'}, {status: 500})),
+    });
+
+    renderOnboarding(
+      <ModelProviderOnboardingPage
+        workspaceId={AGENT_TEST_WORKSPACE_ID}
+        onSkip={onSkip}
+        onConfigured={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', {name: 'Choose pi'}));
+    expect(await screen.findByText("Couldn't load model provider catalog")).toBeInTheDocument();
+    await user.click(screen.getByRole('button', {name: 'Skip for now'}));
+
+    expect(onSkip).toHaveBeenCalledTimes(1);
+  });
+});