@shipfox/client-agent 0.2.0

package/src/components/provider-search.ts

@@ -0,0 +1,18 @@
+import type {ModelProviderCatalogEntryDto} from '@shipfox/api-agent-dto';
+
+export function providerMatchesSearch(entry: ModelProviderCatalogEntryDto, query: string): boolean {
+  const needle = query.trim().toLowerCase();
+  if (needle === '') return true;
+
+  const haystack = `${entry.label} ${entry.id} ${entry.models
+    .map((model) => `${model.id} ${model.label}`)
+    .join(' ')}`.toLowerCase();
+  return haystack.includes(needle);
+}
+
+export function customProviderCardMatchesSearch(query: string): boolean {
+  const needle = query.trim().toLowerCase();
+  if (needle === '') return true;
+
+  return 'custom provider openai anthropic google endpoint https public'.includes(needle);
+}

package/src/components/supported-model-provider-catalog-entry.ts

@@ -0,0 +1,19 @@
+import type {ModelProviderCatalogEntryDto, SupportedModelProviderId} from '@shipfox/api-agent-dto';
+
+export type SupportedModelProviderCatalogEntry = ModelProviderCatalogEntryDto & {
+  id: SupportedModelProviderId;
+  support_status: 'supported';
+};
+
+export function isSupportedCatalogEntry(
+  entry: ModelProviderCatalogEntryDto | undefined,
+): entry is SupportedModelProviderCatalogEntry {
+  return entry?.support_status === 'supported';
+}
+
+export function toSupportedCatalogEntry(
+  entry: ModelProviderCatalogEntryDto | undefined,
+): SupportedModelProviderCatalogEntry | undefined {
+  if (!isSupportedCatalogEntry(entry)) return undefined;
+  return entry;
+}

package/src/components/test-and-save-form.tsx

@@ -0,0 +1,166 @@
+import type {
+  ModelProviderCatalogEntryDto,
+  ModelProviderConfigDto,
+  SupportedModelProviderId,
+} from '@shipfox/api-agent-dto';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {ModalBody, ModalFooter} from '@shipfox/react-ui/modal';
+import {Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {useState} from 'react';
+import {useUpsertModelProviderConfigMutation} from '#hooks/api/model-providers.js';
+import {
+  DefaultModelField,
+  defaultModelFormValue,
+  LATEST_MODEL_VALUE,
+  selectedModelForCredentialsPayload,
+} from './default-model-field.js';
+import {modelProviderConfigErrorToFormError} from './form-errors.js';
+
+export const MODEL_PROVIDER_TEST_AND_SAVE_FORM_ID = 'model-provider-test-and-save-form';
+
+export function ModelProviderTestAndSaveForm({
+  workspaceId,
+  entry,
+  existingConfig,
+  onSaved,
+  setAsDefaultOnSave = false,
+}: {
+  workspaceId: string;
+  entry: ModelProviderCatalogEntryDto;
+  existingConfig?: ModelProviderConfigDto | undefined;
+  onSaved: (savedDefaultModel: string | null) => void;
+  setAsDefaultOnSave?: boolean | undefined;
+}) {
+  const upsertConfig = useUpsertModelProviderConfigMutation();
+  const [formError, setFormError] = useState<string | undefined>();
+  const form = useForm({
+    defaultValues: defaultFormValues(entry, existingConfig),
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      const credentials = Object.fromEntries(
+        entry.credential_fields.map((credentialField) => [
+          credentialField.key,
+          value[credentialField.key]?.trim() ?? '',
+        ]),
+      );
+      const selectedModel = value.default_model ?? LATEST_MODEL_VALUE;
+      const defaultModel =
+        existingConfig === undefined
+          ? selectedModelForCredentialsPayload(selectedModel)
+          : undefined;
+
+      try {
+        await upsertConfig.mutateAsync({
+          workspaceId,
+          providerId: entry.id as SupportedModelProviderId,
+          body: {
+            ...(defaultModel !== undefined ? {default_model: defaultModel} : {}),
+            credentials,
+            ...(setAsDefaultOnSave ? {set_as_default: true} : {}),
+          },
+        });
+        onSaved(selectedModelForCredentialsPayload(selectedModel));
+      } catch (error) {
+        const mapped = modelProviderConfigErrorToFormError(error);
+        setFormError(mapped.message);
+      }
+    },
+  });
+
+  return (
+    <>
+      <ModalBody className="gap-16">
+        <form
+          id={MODEL_PROVIDER_TEST_AND_SAVE_FORM_ID}
+          className="flex w-full flex-col gap-14"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          {existingConfig === undefined ? (
+            <form.Field
+              name="default_model"
+              validators={{
+                onBlur: ({value}) => (value.trim() ? undefined : 'Default model is required.'),
+                onSubmit: ({value}) => (value.trim() ? undefined : 'Default model is required.'),
+              }}
+            >
+              {(field) => (
+                <DefaultModelField
+                  entry={entry}
+                  value={field.state.value}
+                  error={fieldError(field)}
+                  onChange={(event) => field.handleChange(event.target.value)}
+                  onBlur={field.handleBlur}
+                />
+              )}
+            </form.Field>
+          ) : null}
+          {entry.credential_fields.map((credentialField) => (
+            <form.Field
+              key={credentialField.key}
+              name={credentialField.key}
+              validators={{
+                onBlur: ({value}) =>
+                  value.trim() ? undefined : `${credentialField.label} is required.`,
+                onSubmit: ({value}) =>
+                  value.trim() ? undefined : `${credentialField.label} is required.`,
+              }}
+            >
+              {(field) => (
+                <FormField
+                  label={credentialField.label}
+                  id={`model-provider-${entry.id}-${credentialField.key}`}
+                  error={fieldError(field)}
+                >
+                  <FormFieldInput
+                    type={credentialField.secret ? 'password' : 'text'}
+                    autoComplete="off"
+                    value={field.state.value}
+                    onChange={(event) => field.handleChange(event.target.value)}
+                    onBlur={field.handleBlur}
+                  />
+                </FormField>
+              )}
+            </form.Field>
+          ))}
+        </form>
+        {formError ? (
+          <Callout role="alert" type="error">
+            <div className="flex flex-col gap-8">
+              <Text size="sm" bold>
+                Could not save provider
+              </Text>
+              <Text size="sm">{formError}</Text>
+            </div>
+          </Callout>
+        ) : null}
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          type="submit"
+          form={MODEL_PROVIDER_TEST_AND_SAVE_FORM_ID}
+          isLoading={upsertConfig.isPending}
+        >
+          Test & save
+        </Button>
+      </ModalFooter>
+    </>
+  );
+}
+
+function defaultFormValues(
+  entry: ModelProviderCatalogEntryDto,
+  existingConfig: ModelProviderConfigDto | undefined,
+): Record<string, string> {
+  return {
+    default_model: defaultModelFormValue(existingConfig?.default_model),
+    ...Object.fromEntries(entry.credential_fields.map((field) => [field.key, ''])),
+  };
+}

package/src/feature.ts

@@ -0,0 +1,12 @@
+import {defineClientFeature} from '@shipfox/client-shell';
+
+export const agentFeature = defineClientFeature({
+  id: 'shipfox.agent',
+  routes: [
+    {
+      path: '/workspaces/$wid/model-provider',
+      parent: 'workspaceLayout',
+      impl: '@shipfox/client-agent/routes/model-provider',
+    },
+  ],
+});

package/src/hooks/api/model-providers.test.ts

@@ -0,0 +1,167 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {
+  AGENT_TEST_WORKSPACE_ID,
+  modelProviderCatalogResponse,
+  modelProviderConfig,
+  modelProviderConfigsResponse,
+} from '#test/fixtures/model-providers.js';
+import {
+  deleteModelProviderConfig,
+  getModelProviderCatalog,
+  listModelProviderConfigs,
+  setDefaultHarness,
+  setDefaultModelProvider,
+  updateModelProviderDefaultModel,
+  upsertModelProviderConfig,
+} from './model-providers.js';
+
+function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(body), {
+    headers: {'content-type': 'application/json'},
+    status: 200,
+    ...init,
+  });
+}
+
+describe('model provider transport', () => {
+  beforeEach(() => {
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl: undefined});
+  });
+
+  test('fetches the model provider catalog', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(jsonResponse(modelProviderCatalogResponse()));
+    configureApiClient({fetchImpl});
+
+    const result = await getModelProviderCatalog();
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.providers[0]?.label).toBe('Anthropic');
+    expect(request.url).toBe('https://api.example.test/agent/model-provider-catalog');
+    expect(request.method).toBe('GET');
+  });
+
+  test('fetches workspace model provider configs', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(jsonResponse(modelProviderConfigsResponse()));
+    configureApiClient({fetchImpl});
+
+    const result = await listModelProviderConfigs({workspaceId: AGENT_TEST_WORKSPACE_ID});
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.default_provider_id).toBe('anthropic');
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${AGENT_TEST_WORKSPACE_ID}/agent/model-providers`,
+    );
+    expect(request.method).toBe('GET');
+  });
+
+  test('puts model provider credentials', async () => {
+    let requestBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      requestBody = await (input as Request).clone().json();
+      return jsonResponse(modelProviderConfig(), {status: 201});
+    });
+    configureApiClient({fetchImpl});
+    const body = {default_model: 'claude-haiku-4-5', credentials: {api_key: 'sk-ant-secret'}};
+
+    const result = await upsertModelProviderConfig({
+      workspaceId: AGENT_TEST_WORKSPACE_ID,
+      providerId: 'anthropic',
+      body,
+    });
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.provider_id).toBe('anthropic');
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${AGENT_TEST_WORKSPACE_ID}/agent/model-providers/anthropic`,
+    );
+    expect(request.method).toBe('PUT');
+    expect(requestBody).toEqual(body);
+  });
+
+  test('deletes model provider credentials', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(new Response(null, {status: 204}));
+    configureApiClient({fetchImpl});
+
+    const result = await deleteModelProviderConfig({
+      workspaceId: AGENT_TEST_WORKSPACE_ID,
+      providerId: 'anthropic',
+    });
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result).toBeUndefined();
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${AGENT_TEST_WORKSPACE_ID}/agent/model-providers/anthropic`,
+    );
+    expect(request.method).toBe('DELETE');
+  });
+
+  test('puts a model provider default model without credentials', async () => {
+    let requestBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      requestBody = await (input as Request).clone().json();
+      return jsonResponse(modelProviderConfig({default_model: null}));
+    });
+    configureApiClient({fetchImpl});
+    const body = {default_model: null};
+
+    const result = await updateModelProviderDefaultModel({
+      workspaceId: AGENT_TEST_WORKSPACE_ID,
+      providerId: 'anthropic',
+      body,
+    });
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.default_model).toBeNull();
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${AGENT_TEST_WORKSPACE_ID}/agent/model-providers/anthropic/default-model`,
+    );
+    expect(request.method).toBe('PUT');
+    expect(requestBody).toEqual(body);
+  });
+
+  test('sets the default model provider', async () => {
+    let requestBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      requestBody = await (input as Request).clone().json();
+      return jsonResponse({default_provider_id: 'anthropic'});
+    });
+    configureApiClient({fetchImpl});
+    const body = {provider_id: 'anthropic'} as const;
+
+    const result = await setDefaultModelProvider({
+      workspaceId: AGENT_TEST_WORKSPACE_ID,
+      body,
+    });
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.default_provider_id).toBe('anthropic');
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${AGENT_TEST_WORKSPACE_ID}/agent/default-model-provider`,
+    );
+    expect(request.method).toBe('PUT');
+    expect(requestBody).toEqual(body);
+  });
+
+  test('sets the default harness', async () => {
+    let requestBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      requestBody = await (input as Request).clone().json();
+      return jsonResponse({default_harness_id: 'claude'});
+    });
+    configureApiClient({fetchImpl});
+    const body = {harness_id: 'claude'} as const;
+
+    const result = await setDefaultHarness({
+      workspaceId: AGENT_TEST_WORKSPACE_ID,
+      body,
+    });
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.default_harness_id).toBe('claude');
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${AGENT_TEST_WORKSPACE_ID}/agent/default-harness`,
+    );
+    expect(request.method).toBe('PUT');
+    expect(requestBody).toEqual(body);
+  });
+});

package/src/hooks/api/model-providers.ts

@@ -0,0 +1,281 @@
+import type {
+  CreateCustomModelProviderBodyDto,
+  CustomModelProviderConfigDto,
+  DiscoverCustomModelProviderModelsBodyDto,
+  DiscoverCustomModelProviderModelsBySlugBodyDto,
+  DiscoverCustomModelProviderModelsResponseDto,
+  ListModelProviderConfigsResponseDto,
+  ModelProviderCatalogResponseDto,
+  ModelProviderConfigDto,
+  ModelProviderRef,
+  SetDefaultHarnessBodyDto,
+  SetDefaultHarnessResponseDto,
+  SetDefaultModelProviderBodyDto,
+  SetDefaultModelProviderResponseDto,
+  SupportedModelProviderId,
+  UpdateCustomModelProviderBodyDto,
+  UpdateModelProviderConfigBodyDto,
+  UpdateModelProviderDefaultModelBodyDto,
+} from '@shipfox/api-agent-dto';
+import {apiRequest} from '@shipfox/client-api';
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+
+export const modelProviderQueryKeys = {
+  all: ['model-providers'] as const,
+  catalog: () => [...modelProviderQueryKeys.all, 'catalog'] as const,
+  configs: (workspaceId: string) =>
+    [...modelProviderQueryKeys.all, 'configs', workspaceId] as const,
+};
+
+export async function getModelProviderCatalog({signal}: {signal?: AbortSignal} = {}) {
+  return await apiRequest<ModelProviderCatalogResponseDto>('/agent/model-provider-catalog', {
+    signal,
+  });
+}
+
+export async function listModelProviderConfigs({
+  workspaceId,
+  signal,
+}: {
+  workspaceId: string;
+  signal?: AbortSignal;
+}) {
+  return await apiRequest<ListModelProviderConfigsResponseDto>(
+    `/workspaces/${workspaceId}/agent/model-providers`,
+    {signal},
+  );
+}
+
+export async function upsertModelProviderConfig({
+  workspaceId,
+  providerId,
+  body,
+}: {
+  workspaceId: string;
+  providerId: SupportedModelProviderId;
+  body: UpdateModelProviderConfigBodyDto;
+}) {
+  return await apiRequest<ModelProviderConfigDto>(
+    `/workspaces/${workspaceId}/agent/model-providers/${providerId}`,
+    {method: 'PUT', body},
+  );
+}
+
+export async function createCustomModelProviderConfig({
+  workspaceId,
+  body,
+}: {
+  workspaceId: string;
+  body: CreateCustomModelProviderBodyDto;
+}) {
+  return await apiRequest<CustomModelProviderConfigDto>(
+    `/workspaces/${workspaceId}/agent/custom-model-providers`,
+    {method: 'POST', body},
+  );
+}
+
+export async function updateCustomModelProviderConfig({
+  workspaceId,
+  providerId,
+  body,
+}: {
+  workspaceId: string;
+  providerId: ModelProviderRef;
+  body: UpdateCustomModelProviderBodyDto;
+}) {
+  return await apiRequest<CustomModelProviderConfigDto>(
+    `/workspaces/${workspaceId}/agent/custom-model-providers/${providerId}`,
+    {method: 'PUT', body},
+  );
+}
+
+export async function discoverCustomModelProviderModels({
+  workspaceId,
+  body,
+}: {
+  workspaceId: string;
+  body: DiscoverCustomModelProviderModelsBodyDto;
+}) {
+  return await apiRequest<DiscoverCustomModelProviderModelsResponseDto>(
+    `/workspaces/${workspaceId}/agent/custom-model-providers/discover-models`,
+    {method: 'POST', body},
+  );
+}
+
+export async function discoverCustomModelProviderModelsBySlug({
+  workspaceId,
+  providerId,
+  body,
+}: {
+  workspaceId: string;
+  providerId: ModelProviderRef;
+  body: DiscoverCustomModelProviderModelsBySlugBodyDto;
+}) {
+  return await apiRequest<DiscoverCustomModelProviderModelsResponseDto>(
+    `/workspaces/${workspaceId}/agent/custom-model-providers/${providerId}/discover-models`,
+    {method: 'POST', body},
+  );
+}
+
+export async function deleteModelProviderConfig({
+  workspaceId,
+  providerId,
+}: {
+  workspaceId: string;
+  providerId: ModelProviderRef;
+}) {
+  return await apiRequest<void>(`/workspaces/${workspaceId}/agent/model-providers/${providerId}`, {
+    method: 'DELETE',
+  });
+}
+
+export async function updateModelProviderDefaultModel({
+  workspaceId,
+  providerId,
+  body,
+}: {
+  workspaceId: string;
+  providerId: SupportedModelProviderId;
+  body: UpdateModelProviderDefaultModelBodyDto;
+}) {
+  return await apiRequest<ModelProviderConfigDto>(
+    `/workspaces/${workspaceId}/agent/model-providers/${providerId}/default-model`,
+    {method: 'PUT', body},
+  );
+}
+
+export async function setDefaultModelProvider({
+  workspaceId,
+  body,
+}: {
+  workspaceId: string;
+  body: SetDefaultModelProviderBodyDto;
+}) {
+  return await apiRequest<SetDefaultModelProviderResponseDto>(
+    `/workspaces/${workspaceId}/agent/default-model-provider`,
+    {method: 'PUT', body},
+  );
+}
+
+export async function setDefaultHarness({
+  workspaceId,
+  body,
+}: {
+  workspaceId: string;
+  body: SetDefaultHarnessBodyDto;
+}) {
+  return await apiRequest<SetDefaultHarnessResponseDto>(
+    `/workspaces/${workspaceId}/agent/default-harness`,
+    {method: 'PUT', body},
+  );
+}
+
+export function useModelProviderCatalogQuery() {
+  return useQuery({
+    queryKey: modelProviderQueryKeys.catalog(),
+    queryFn: ({signal}) => getModelProviderCatalog({signal}),
+    staleTime: 1000 * 60 * 60,
+  });
+}
+
+export function useModelProviderConfigsQuery(workspaceId: string | undefined) {
+  return useQuery({
+    queryKey: workspaceId
+      ? modelProviderQueryKeys.configs(workspaceId)
+      : [...modelProviderQueryKeys.all, 'configs'],
+    enabled: Boolean(workspaceId),
+    queryFn: ({signal}) => listModelProviderConfigs({workspaceId: workspaceId ?? '', signal}),
+  });
+}
+
+export function useUpsertModelProviderConfigMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: upsertModelProviderConfig,
+    onSuccess: async (_config, variables) => {
+      await queryClient.invalidateQueries({
+        queryKey: modelProviderQueryKeys.configs(variables.workspaceId),
+      });
+    },
+  });
+}
+
+export function useCreateCustomModelProviderMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createCustomModelProviderConfig,
+    onSuccess: async (_config, variables) => {
+      await queryClient.invalidateQueries({
+        queryKey: modelProviderQueryKeys.configs(variables.workspaceId),
+      });
+    },
+  });
+}
+
+export function useUpdateCustomModelProviderMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: updateCustomModelProviderConfig,
+    onSuccess: async (_config, variables) => {
+      await queryClient.invalidateQueries({
+        queryKey: modelProviderQueryKeys.configs(variables.workspaceId),
+      });
+    },
+  });
+}
+
+export function useDiscoverCustomModelProviderModelsMutation() {
+  return useMutation({mutationFn: discoverCustomModelProviderModels});
+}
+
+export function useDiscoverCustomModelProviderModelsBySlugMutation() {
+  return useMutation({mutationFn: discoverCustomModelProviderModelsBySlug});
+}
+
+export function useDeleteModelProviderConfigMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: deleteModelProviderConfig,
+    onSuccess: async (_config, variables) => {
+      await queryClient.invalidateQueries({
+        queryKey: modelProviderQueryKeys.configs(variables.workspaceId),
+      });
+    },
+  });
+}
+
+export function useUpdateModelProviderDefaultModelMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: updateModelProviderDefaultModel,
+    onSuccess: async (_config, variables) => {
+      await queryClient.invalidateQueries({
+        queryKey: modelProviderQueryKeys.configs(variables.workspaceId),
+      });
+    },
+  });
+}
+
+export function useSetDefaultModelProviderMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: setDefaultModelProvider,
+    onSuccess: async (_config, variables) => {
+      await queryClient.invalidateQueries({
+        queryKey: modelProviderQueryKeys.configs(variables.workspaceId),
+      });
+    },
+  });
+}
+
+export function useSetDefaultHarnessMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: setDefaultHarness,
+    onSuccess: async (_config, variables) => {
+      await queryClient.invalidateQueries({
+        queryKey: modelProviderQueryKeys.configs(variables.workspaceId),
+      });
+    },
+  });
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './components/available-provider-card.js';
+export * from './components/form-errors.js';
+export * from './components/harnesses-section.js';
+export * from './components/model-providers-section.js';
+export * from './components/test-and-save-form.js';
+export * from './hooks/api/model-providers.js';
+export * from './pages/model-provider-onboarding-page.js';
+export * from './state/model-provider-onboarding.js';