@shipfox/client-agent 0.2.0

package/src/components/model-provider-usage-modal.tsx

@@ -0,0 +1,326 @@
+import {
+  DEFAULT_HARNESS,
+  getHarnessDescriptor,
+  type Harness,
+  listHarnessDescriptors,
+} from '@shipfox/api-agent-dto';
+import {Button} from '@shipfox/react-ui/button';
+import {
+  CodeBlock,
+  CodeBlockBody,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockFiles,
+  CodeBlockHeader,
+  CodeBlockItem,
+} from '@shipfox/react-ui/code-block';
+import {Combobox} from '@shipfox/react-ui/combobox';
+import {useCopyToClipboard} from '@shipfox/react-ui/hooks';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+} from '@shipfox/react-ui/modal';
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {useEffect, useMemo, useRef, useState} from 'react';
+import {buildAgentWorkflowExample} from './agent-workflow-example.js';
+import {compatibleHarnessIds} from './harness-availability.js';
+import type {ModelProviderUsageTarget} from './model-provider-usage-target.js';
+
+type CopyState = 'idle' | 'copied' | 'failed';
+
+const WORKFLOW_EXAMPLE_FILENAME = '.shipfox/workflows/agent.yml';
+
+export function ModelProviderUsageModal({
+  target,
+  initialModel,
+  open,
+  onOpenChange,
+  closeFocusTarget,
+  workspaceDefaultHarnessId,
+}: {
+  target: ModelProviderUsageTarget | null;
+  initialModel?: string | null | undefined;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  closeFocusTarget?: HTMLElement | null | undefined;
+  workspaceDefaultHarnessId?: Harness | null | undefined;
+}) {
+  const [selectedModel, setSelectedModel] = useState('');
+  const [selectedHarness, setSelectedHarness] = useState<Harness>(DEFAULT_HARNESS);
+
+  useEffect(() => {
+    if (!target) return;
+    setSelectedModel(initialModel ?? target.default_model ?? target.models[0]?.id ?? '');
+  }, [target, initialModel]);
+
+  useEffect(() => {
+    if (!target) return;
+    const nextCompatibleHarnessIds = compatibleHarnessIds({
+      isCustom: target.isCustom,
+      providerId: target.id,
+    });
+    setSelectedHarness(selectInitialHarness(nextCompatibleHarnessIds, workspaceDefaultHarnessId));
+  }, [target, workspaceDefaultHarnessId]);
+
+  const compatibleIds = useMemo(
+    () =>
+      target
+        ? compatibleHarnessIds({isCustom: target.isCustom, providerId: target.id})
+        : ([] as Harness[]),
+    [target],
+  );
+  const harnessOptions = useMemo(
+    () =>
+      compatibleIds.map((harnessId) => ({
+        value: harnessId,
+        label: getHarnessDescriptor(harnessId).label,
+      })),
+    [compatibleIds],
+  );
+  const modelOptions = useMemo(
+    () => target?.models.map((model) => ({value: model.id, label: model.label})) ?? [],
+    [target],
+  );
+  const example = target
+    ? buildAgentWorkflowExample({
+        harness: selectedHarness,
+        providerId: target.id,
+        model: selectedModel,
+      })
+    : null;
+  const data =
+    example === null
+      ? []
+      : [{language: 'yaml', filename: WORKFLOW_EXAMPLE_FILENAME, code: example.code}];
+
+  function handleOpenChange(nextOpen: boolean) {
+    onOpenChange(nextOpen);
+    if (!nextOpen && closeFocusTarget) {
+      window.setTimeout(() => closeFocusTarget.focus(), 0);
+    }
+  }
+
+  return (
+    <Modal open={open && target !== null} onOpenChange={handleOpenChange}>
+      <ModalContent aria-describedby={undefined} className="max-h-[calc(100vh-32px)] max-w-[640px]">
+        <ModalTitle className="sr-only">
+          {target ? `Use ${target.label} in a workflow` : 'Use provider in a workflow'}
+        </ModalTitle>
+        <ModalHeader>
+          <div className="flex min-w-0 flex-col gap-2">
+            <Text size="lg" aria-hidden="true" className="truncate">
+              {target ? `Use ${target.label} in a workflow` : 'Use provider in a workflow'}
+            </Text>
+            <Text size="sm" className="text-foreground-neutral-muted">
+              Reference this provider from a workflow agent step.
+            </Text>
+          </div>
+        </ModalHeader>
+        {target && example ? (
+          <>
+            <ModalBody className="min-h-0 flex-1 gap-0 overflow-y-auto overflow-x-clip scrollbar">
+              <div className="flex w-full flex-col gap-20">
+                {compatibleIds.length === 1 ? (
+                  <div className="flex flex-col gap-12">
+                    <div className="flex min-h-40 items-center justify-between gap-12 rounded-8 border border-border-neutral-base px-12 py-8">
+                      <Text size="sm" className="text-foreground-neutral-muted">
+                        Harness
+                      </Text>
+                      <Code as="span" variant="label">
+                        {compatibleIds[0]}
+                      </Code>
+                    </div>
+                    <Combobox
+                      aria-label="Model"
+                      options={modelOptions}
+                      value={selectedModel}
+                      onValueChange={(value) => {
+                        if (value) setSelectedModel(value);
+                      }}
+                      placeholder="Select model..."
+                      searchPlaceholder="Search models..."
+                      emptyState="No model found."
+                      className="w-full"
+                    />
+                  </div>
+                ) : (
+                  <div className="flex flex-col gap-12 sm:flex-row sm:gap-12">
+                    <Combobox
+                      aria-label="Harness"
+                      options={harnessOptions}
+                      value={selectedHarness}
+                      onValueChange={(value) => {
+                        if (isHarness(value)) setSelectedHarness(value);
+                      }}
+                      placeholder="Select harness..."
+                      searchPlaceholder="Search harnesses..."
+                      emptyState="No harness found."
+                      className="w-full sm:flex-1"
+                    />
+                    <Combobox
+                      aria-label="Model"
+                      options={modelOptions}
+                      value={selectedModel}
+                      onValueChange={(value) => {
+                        if (value) setSelectedModel(value);
+                      }}
+                      placeholder="Select model..."
+                      searchPlaceholder="Search models..."
+                      emptyState="No model found."
+                      className="w-full sm:flex-1"
+                    />
+                  </div>
+                )}
+
+                <div className="flex flex-col gap-8">
+                  <CodeBlock data={data} className="h-auto min-h-0 rounded-8">
+                    <CodeBlockHeader>
+                      <CodeBlockFiles>
+                        {(item) => (
+                          <CodeBlockFilename value={item.filename}>
+                            {item.filename}
+                          </CodeBlockFilename>
+                        )}
+                      </CodeBlockFiles>
+                      <CodeBlockCopyButton />
+                    </CodeBlockHeader>
+                    <CodeBlockBody>
+                      {(item) => (
+                        <CodeBlockItem value={item.filename}>
+                          <CodeBlockContent
+                            language="yaml"
+                            syntaxHighlighting
+                            highlightedLineRange={example.highlightedLineRange}
+                          >
+                            {item.code}
+                          </CodeBlockContent>
+                        </CodeBlockItem>
+                      )}
+                    </CodeBlockBody>
+                  </CodeBlock>
+
+                  <Text size="sm" className="text-foreground-neutral-muted">
+                    Add this to a workflow file under{' '}
+                    <Code as="span" variant="label">
+                      .shipfox/workflows/
+                    </Code>{' '}
+                    in your repository to run it.
+                  </Text>
+                </div>
+
+                <div className="flex flex-col gap-8">
+                  <Text size="sm" bold>
+                    Available models ({target.models.length})
+                  </Text>
+                  <ul className="rounded-8 border border-border-neutral-base">
+                    {target.models.map((model) => (
+                      <ModelProviderModelRow key={model.id} label={model.label} id={model.id} />
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </ModalBody>
+            <ModalFooter>
+              <Button type="button" onClick={() => handleOpenChange(false)}>
+                Done
+              </Button>
+            </ModalFooter>
+          </>
+        ) : null}
+      </ModalContent>
+    </Modal>
+  );
+}
+
+function selectInitialHarness(
+  compatibleIds: Harness[],
+  workspaceDefaultHarnessId: Harness | null | undefined,
+): Harness {
+  if (workspaceDefaultHarnessId && compatibleIds.includes(workspaceDefaultHarnessId)) {
+    return workspaceDefaultHarnessId;
+  }
+  if (compatibleIds.includes(DEFAULT_HARNESS)) return DEFAULT_HARNESS;
+  return compatibleIds[0] ?? DEFAULT_HARNESS;
+}
+
+function isHarness(value: string): value is Harness {
+  return listHarnessDescriptors().some((descriptor) => descriptor.id === value);
+}
+
+function ModelProviderModelRow({label, id}: {label: string; id: string}) {
+  const [copyState, setCopyState] = useState<CopyState>('idle');
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const {copy} = useCopyToClipboard({
+    text: id,
+    onCopy: () => {
+      setTemporaryCopyState('copied');
+    },
+  });
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  function setTemporaryCopyState(state: Exclude<CopyState, 'idle'>) {
+    setCopyState(state);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setCopyState('idle'), 2500);
+  }
+
+  async function handleCopy() {
+    try {
+      await copy();
+    } catch {
+      setTemporaryCopyState('failed');
+    }
+  }
+
+  return (
+    <li className="border-b border-border-neutral-base last:border-b-0">
+      <Tooltip open={copyState === 'copied'}>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={`Copy ${label} model id ${id}`}
+            className="flex min-h-40 w-full min-w-0 flex-col items-start gap-2 px-12 py-8 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none sm:flex-row sm:items-center sm:gap-8"
+            onClick={() => {
+              void handleCopy();
+            }}
+          >
+            <Text as="span" size="sm" bold className="max-w-full shrink-0 truncate sm:max-w-[48%]">
+              {label}
+            </Text>
+            <Code
+              as="span"
+              variant="label"
+              className="min-w-0 max-w-full truncate text-left text-foreground-neutral-muted sm:flex-1 sm:text-right"
+            >
+              {id}
+            </Code>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" align="center">
+          Copied
+        </TooltipContent>
+      </Tooltip>
+      {copyState === 'copied' ? (
+        <span className="sr-only" role="status">
+          Copied {label} id
+        </span>
+      ) : null}
+      {copyState === 'failed' ? (
+        <span className="sr-only" role="status">
+          Could not copy {label} id
+        </span>
+      ) : null}
+    </li>
+  );
+}

package/src/components/model-provider-usage-target.ts

@@ -0,0 +1,36 @@
+import type {
+  CustomModelProviderConfigDto,
+  ModelProviderCatalogEntryDto,
+} from '@shipfox/api-agent-dto';
+
+export interface ModelProviderUsageTarget {
+  id: string;
+  label: string;
+  isCustom: boolean;
+  models: Array<{id: string; label: string}>;
+  default_model: string | null;
+}
+
+export function usageTargetFromCatalogEntry(
+  entry: ModelProviderCatalogEntryDto,
+): ModelProviderUsageTarget {
+  return {
+    id: entry.id,
+    label: entry.label,
+    isCustom: false,
+    models: entry.models,
+    default_model: entry.default_model,
+  };
+}
+
+export function usageTargetFromCustomConfig(
+  config: CustomModelProviderConfigDto,
+): ModelProviderUsageTarget {
+  return {
+    id: config.provider_id,
+    label: config.display_name,
+    isCustom: true,
+    models: config.models,
+    default_model: config.default_model,
+  };
+}

package/src/components/model-providers-section.stories.tsx

@@ -0,0 +1,345 @@
+import type {
+  CustomModelProviderConfigDto,
+  ModelProviderCatalogEntryDto,
+  ModelProviderConfigDto,
+  SupportedModelProviderId,
+} 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 {WorkspaceModelProvidersSection} from './model-providers-section.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+
+type Scenario =
+  | 'mixed'
+  | 'empty-configured'
+  | 'all-configured'
+  | 'custom-configured'
+  | 'loading'
+  | 'configs-error'
+  | 'catalog-error'
+  | 'long-names';
+
+interface ModelProvidersStoryProps {
+  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 ModelProvidersStory({scenario}: ModelProvidersStoryProps) {
+  configureApiClient({
+    baseUrl: 'https://api.example.test',
+    fetchImpl: fetchForScenario(scenario),
+  });
+
+  const queryClient = useMemo(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),
+    [],
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="mx-auto w-full max-w-[760px] bg-background-neutral-background p-24">
+        <WorkspaceModelProvidersSection workspaceId={WORKSPACE_ID} />
+      </div>
+      <Toaster />
+    </QueryClientProvider>
+  );
+}
+
+const meta = {
+  title: 'Agent/ProviderSettings',
+  component: ModelProvidersStory,
+  parameters: {layout: 'fullscreen'},
+  args: {scenario: 'mixed'},
+} satisfies Meta<typeof ModelProvidersStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const EmptyConfigured: Story = {
+  args: {scenario: 'empty-configured'},
+};
+
+export const AllConfigured: Story = {
+  args: {scenario: 'all-configured'},
+};
+
+export const CustomConfigured: Story = {
+  args: {scenario: 'custom-configured'},
+};
+
+export const Loading: Story = {
+  args: {scenario: 'loading'},
+};
+
+export const ConfigsError: Story = {
+  args: {scenario: 'configs-error'},
+};
+
+export const CatalogError: Story = {
+  args: {scenario: 'catalog-error'},
+};
+
+export const LongNames: Story = {
+  args: {scenario: 'long-names'},
+};
+
+export const FilteredAvailableProviders: Story = {
+  args: {scenario: 'empty-configured'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(
+      await canvas.findByRole('searchbox', {name: 'Search providers'}),
+      'openrouter',
+    );
+    await canvas.findByRole('button', {name: 'Configure OpenRouter'});
+  },
+};
+
+export const NoMatchingAvailableProviders: Story = {
+  args: {scenario: 'empty-configured'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    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: 'empty-configured'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByRole('button', {name: 'Configure Anthropic'}));
+    await screen.findByLabelText('API key');
+  },
+};
+
+export const CustomProviderModalOpen: Story = {
+  args: {scenario: 'empty-configured'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByRole('button', {name: 'Configure custom provider'}));
+    await screen.findByRole('dialog', {name: 'Add custom provider'});
+  },
+};
+
+export const WorkflowExampleModalOpen: Story = {
+  args: {scenario: 'mixed'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(
+      await canvas.findByRole('button', {name: 'Open Anthropic provider actions'}),
+    );
+    await userEvent.click(await screen.findByRole('menuitem', {name: 'View workflow example'}));
+    await screen.findByRole('dialog', {name: 'Use Anthropic in a workflow'});
+  },
+};
+
+function fetchForScenario(scenario: Scenario): typeof fetch {
+  return (input) => {
+    const url = requestUrl(input);
+    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 (url.pathname.endsWith('/agent/model-providers')) {
+      if (scenario === 'configs-error') return Promise.resolve(errorResponse());
+      return Promise.resolve(jsonResponse(configsForScenario(scenario)));
+    }
+    return Promise.resolve(jsonResponse({}, {status: 404}));
+  };
+}
+
+function catalogForScenario(scenario: Scenario): ModelProviderCatalogEntryDto[] {
+  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 configsForScenario(scenario: Scenario) {
+  if (scenario === 'empty-configured' || scenario === 'configs-error') {
+    return {configs: [], default_provider_id: null};
+  }
+  if (scenario === 'all-configured') {
+    return {
+      configs: CATALOG.filter((entry) => entry.support_status === 'supported').map((entry) =>
+        providerConfig({
+          provider_id: entry.id as SupportedModelProviderId,
+        }),
+      ),
+      default_provider_id: 'anthropic',
+    };
+  }
+  if (scenario === 'custom-configured') {
+    return {
+      configs: [providerConfig({provider_id: 'anthropic'}), customProviderConfig()],
+      default_provider_id: 'local-vllm',
+    };
+  }
+  return {
+    configs: [providerConfig({provider_id: 'anthropic'})],
+    default_provider_id: 'anthropic',
+  };
+}
+
+function customProviderConfig(): CustomModelProviderConfigDto {
+  return {
+    kind: 'custom',
+    provider_id: 'local-vllm',
+    display_name: 'Local vLLM',
+    api: 'openai-completions',
+    base_url: 'http://localhost:8000/v1',
+    headers: [{name: 'x-region', value: 'us'}],
+    secret_header_names: ['authorization'],
+    models: [
+      {id: 'llama-3.1', label: 'Llama 3.1'},
+      {id: 'qwen-coder', label: 'Qwen Coder'},
+    ],
+    default_model: 'llama-3.1',
+    created_at: '2026-05-08T00:00:00.000Z',
+    updated_at: '2026-05-08T00:00:00.000Z',
+  };
+}
+
+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'});
+}