@shipfox/client-agent 0.2.0

package/src/components/harnesses-section.tsx

@@ -0,0 +1,245 @@
+import {
+  DEFAULT_HARNESS,
+  type Harness,
+  type HarnessDescriptor,
+  listHarnessDescriptors,
+} from '@shipfox/api-agent-dto';
+import {QueryLoadError} from '@shipfox/client-ui';
+import {IconButton} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
+import {Icon} from '@shipfox/react-ui/icon';
+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 {cn} from '@shipfox/react-ui/utils';
+import {useRef, useState} from 'react';
+import {
+  useModelProviderConfigsQuery,
+  useSetDefaultHarnessMutation,
+} from '#hooks/api/model-providers.js';
+import {modelProviderConfigErrorToFormError} from './form-errors.js';
+import {isHarnessAvailable} from './harness-availability.js';
+
+const SURFACE_CLASS =
+  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
+
+export function WorkspaceHarnessesSection({workspaceId}: {workspaceId: string}) {
+  const configsQuery = useModelProviderConfigsQuery(workspaceId);
+  const setDefaultHarness = useSetDefaultHarnessMutation();
+  const activeWorkspaceIdRef = useRef(workspaceId);
+  const defaultRequestSeqRef = useRef(0);
+  const activeDefaultRequestRef = useRef<{workspaceId: string; id: number} | null>(null);
+  const [pendingDefaultHarness, setPendingDefaultHarness] = useState<{
+    workspaceId: string;
+    harnessId: Harness;
+  } | null>(null);
+  const [defaultError, setDefaultError] = useState<
+    {workspaceId: string; harnessId: Harness; message: string} | undefined
+  >();
+  const configs = configsQuery.data?.configs ?? [];
+  const defaultHarnessId = configsQuery.data?.default_harness_id ?? DEFAULT_HARNESS;
+  activeWorkspaceIdRef.current = workspaceId;
+
+  function isActiveDefaultRequest(request: {workspaceId: string; id: number}) {
+    const activeRequest = activeDefaultRequestRef.current;
+    return (
+      activeWorkspaceIdRef.current === request.workspaceId &&
+      activeRequest?.workspaceId === request.workspaceId &&
+      activeRequest.id === request.id
+    );
+  }
+
+  async function handleSetDefault(harness: HarnessDescriptor) {
+    if (activeDefaultRequestRef.current?.workspaceId === workspaceId) return;
+
+    const request = {workspaceId, id: defaultRequestSeqRef.current + 1};
+    defaultRequestSeqRef.current = request.id;
+    activeDefaultRequestRef.current = request;
+    setPendingDefaultHarness({workspaceId, harnessId: harness.id});
+    setDefaultError(undefined);
+    try {
+      await setDefaultHarness.mutateAsync({
+        workspaceId,
+        body: {harness_id: harness.id},
+      });
+      if (!isActiveDefaultRequest(request)) return;
+      toast.success(`${harness.label} is now the default harness`);
+    } catch (error) {
+      if (!isActiveDefaultRequest(request)) return;
+      const mapped = modelProviderConfigErrorToFormError(error);
+      setDefaultError({
+        workspaceId,
+        harnessId: harness.id,
+        message: mapped.message || 'Could not save default harness. Try again.',
+      });
+    } finally {
+      if (isActiveDefaultRequest(request)) {
+        activeDefaultRequestRef.current = null;
+        setPendingDefaultHarness(null);
+      }
+    }
+  }
+
+  return (
+    <section className="flex flex-col gap-16" aria-label="Harnesses">
+      <div className="flex flex-col gap-4">
+        <Header variant="h3">Harnesses</Header>
+        <Text size="sm" className="text-foreground-neutral-muted">
+          Harnesses available to run agent steps in this workspace.
+        </Text>
+      </div>
+
+      {configsQuery.isPending ? <HarnessRowsSkeleton /> : null}
+
+      {configsQuery.isError && configsQuery.data === undefined ? (
+        <div className={cn(SURFACE_CLASS, 'px-16')}>
+          <QueryLoadError query={configsQuery} subject="harnesses" />
+        </div>
+      ) : null}
+
+      {configsQuery.data !== undefined ? (
+        <ul className={cn('divide-y divide-border-neutral-base', SURFACE_CLASS)}>
+          {listHarnessDescriptors().map((harness) => (
+            <HarnessRow
+              key={harness.id}
+              harness={harness}
+              isDefault={harness.id === defaultHarnessId}
+              isAvailable={isHarnessAvailable(harness, configs)}
+              isSettingDefault={pendingDefaultHarness?.workspaceId === workspaceId}
+              defaultError={
+                defaultError?.workspaceId === workspaceId && defaultError.harnessId === harness.id
+                  ? defaultError.message
+                  : undefined
+              }
+              onSetDefault={handleSetDefault}
+            />
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+}
+
+function HarnessRow({
+  harness,
+  isDefault,
+  isAvailable,
+  isSettingDefault,
+  defaultError,
+  onSetDefault,
+}: {
+  harness: HarnessDescriptor;
+  isDefault: boolean;
+  isAvailable: boolean;
+  isSettingDefault: boolean;
+  defaultError: string | undefined;
+  onSetDefault: (harness: HarnessDescriptor) => void;
+}) {
+  const unavailableCopy = harnessUnavailableCopy(isDefault);
+
+  return (
+    <li className="flex flex-col gap-10 px-16 py-12 transition-colors hover:bg-background-components-hover">
+      <div className="flex items-center justify-between gap-12">
+        <div className="flex min-w-0 items-center gap-8">
+          {isDefault ? (
+            <>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex size-16 shrink-0 items-center justify-center">
+                    <Icon
+                      name="starLine"
+                      className="size-16 text-foreground-neutral-muted"
+                      aria-hidden
+                    />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>Default harness</TooltipContent>
+              </Tooltip>
+              <span className="sr-only">Default harness</span>
+            </>
+          ) : null}
+          <Text size="md" bold className="truncate">
+            {harness.label}
+          </Text>
+          {!isAvailable ? (
+            <>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex size-16 shrink-0 items-center justify-center">
+                    <Icon
+                      name="errorWarningLine"
+                      className="size-16 text-foreground-warning-base"
+                      aria-hidden
+                    />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>{unavailableCopy}</TooltipContent>
+              </Tooltip>
+              <span className="sr-only">{unavailableCopy}</span>
+            </>
+          ) : null}
+        </div>
+        {!isDefault ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton
+                size="sm"
+                variant="transparent"
+                icon="more2Line"
+                disabled={isSettingDefault}
+                aria-label={`Open ${harness.label} harness actions`}
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                icon="starLine"
+                disabled={isSettingDefault || !isAvailable}
+                onSelect={() => {
+                  onSetDefault(harness);
+                }}
+              >
+                Set as default
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </div>
+      {defaultError ? (
+        <Callout role="alert" type="error">
+          <Text size="sm">{defaultError}</Text>
+        </Callout>
+      ) : null}
+    </li>
+  );
+}
+
+function harnessUnavailableCopy(isDefault: boolean): string {
+  const base = 'Configure a compatible model provider to use this harness.';
+  if (!isDefault) return base;
+  return `${base} The stored default harness cannot currently run in this workspace.`;
+}
+
+function HarnessRowsSkeleton() {
+  return (
+    <ul
+      role="status"
+      aria-label="Loading harnesses"
+      className={cn('divide-y divide-border-neutral-base', SURFACE_CLASS)}
+    >
+      {[0, 1].map((row) => (
+        <li key={row} className="flex items-center gap-12 px-16 py-12">
+          <Skeleton className="size-16 shrink-0" />
+          <Skeleton className="h-16 w-120" />
+          <Skeleton className="ml-auto size-28 shrink-0" />
+        </li>
+      ))}
+    </ul>
+  );
+}

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

@@ -0,0 +1,106 @@
+import type {
+  CustomModelProviderConfigDto,
+  ModelProviderCatalogEntryDto,
+} from '@shipfox/api-agent-dto';
+import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
+import {ModelProviderUsageModal} from './model-provider-usage-modal.js';
+import {
+  usageTargetFromCatalogEntry,
+  usageTargetFromCustomConfig,
+} from './model-provider-usage-target.js';
+
+interface ModelProviderUsageModalStoryProps {
+  variant: 'anthropic' | 'custom' | 'long-list';
+}
+
+function ModelProviderUsageModalStory({variant}: ModelProviderUsageModalStoryProps) {
+  const [open, setOpen] = useState(true);
+  const entry = variant === 'long-list' ? longListEntry() : anthropicEntry();
+  const target =
+    variant === 'custom'
+      ? usageTargetFromCustomConfig(customProviderConfig())
+      : usageTargetFromCatalogEntry(entry);
+
+  return (
+    <div className="min-h-screen bg-background-neutral-background p-24">
+      <ModelProviderUsageModal
+        target={target}
+        initialModel={target.default_model}
+        workspaceDefaultHarnessId="claude"
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Agent/ProviderUsageModal',
+  component: ModelProviderUsageModalStory,
+  parameters: {layout: 'fullscreen'},
+  args: {variant: 'anthropic'},
+} satisfies Meta<typeof ModelProviderUsageModalStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const LongModelList: Story = {
+  args: {variant: 'long-list'},
+};
+
+export const CustomProvider: Story = {
+  args: {variant: 'custom'},
+};
+
+function anthropicEntry(): ModelProviderCatalogEntryDto {
+  return {
+    id: 'anthropic',
+    label: 'Anthropic',
+    support_status: 'supported',
+    default_model: 'claude-opus-4-8',
+    credential_fields: [{key: 'api_key', label: 'API key', secret: true}],
+    unsupported_reason: null,
+    models: [
+      {id: 'claude-opus-4-8', label: 'Claude Opus 4.8'},
+      {id: 'claude-sonnet-4-8', label: 'Claude Sonnet 4.8'},
+      {id: 'claude-haiku-4-5', label: 'Claude Haiku 4.5'},
+    ],
+  };
+}
+
+function longListEntry(): ModelProviderCatalogEntryDto {
+  return {
+    id: 'cloudflare-workers-ai',
+    label: 'Cloudflare Workers AI',
+    support_status: 'supported',
+    default_model: '@cf/moonshotai/kimi-k2.7-code',
+    credential_fields: [{key: 'api_token', label: 'API token', secret: true}],
+    unsupported_reason: null,
+    models: Array.from({length: 56}, (_, index) => ({
+      id:
+        index === 0
+          ? '@cf/moonshotai/kimi-k2.7-code'
+          : `provider/research-lab/model-family-${String(index).padStart(2, '0')}-large-context`,
+      label: index === 0 ? 'Kimi K2.7 Code' : `Research Model ${index}`,
+    })),
+  };
+}
+
+function customProviderConfig(): CustomModelProviderConfigDto {
+  return {
+    kind: 'custom',
+    provider_id: 'local-vllm',
+    display_name: 'Local vLLM',
+    api: 'openai-completions',
+    base_url: 'http://localhost:8000/v1',
+    headers: [],
+    secret_header_names: [],
+    models: [{id: 'llama-3.1', label: 'Llama 3.1'}],
+    default_model: 'llama-3.1',
+    created_at: '2026-05-08T00:00:00.000Z',
+    updated_at: '2026-05-08T00:00:00.000Z',
+  };
+}

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

@@ -0,0 +1,210 @@
+import {fireEvent, render, screen, waitFor, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {customModelProviderConfig, modelProviderEntry} from '#test/fixtures/model-providers.js';
+import {ModelProviderUsageModal} from './model-provider-usage-modal.js';
+import {
+  usageTargetFromCatalogEntry,
+  usageTargetFromCustomConfig,
+} from './model-provider-usage-target.js';
+
+const CLAUDE_MODEL_ROW_NAME = 'Copy Claude Opus 4.8 model id claude-opus-4-8';
+const KIMI_MODEL_ROW_NAME = 'Copy Kimi K2.7 Code model id @cf/moonshotai/kimi-k2.7-code';
+
+function renderUsageModal() {
+  const onOpenChange = vi.fn();
+  const entry = modelProviderEntry({
+    default_model: 'claude-opus-4-8',
+    models: [
+      {id: 'claude-opus-4-8', label: 'Claude Opus 4.8'},
+      {id: '@cf/moonshotai/kimi-k2.7-code', label: 'Kimi K2.7 Code'},
+    ],
+  });
+
+  render(
+    <ModelProviderUsageModal
+      target={usageTargetFromCatalogEntry(entry)}
+      initialModel="claude-opus-4-8"
+      open
+      onOpenChange={onOpenChange}
+    />,
+  );
+
+  return {entry, onOpenChange};
+}
+
+describe('ModelProviderUsageModal', () => {
+  test('changes the selected model in the workflow example', async () => {
+    renderUsageModal();
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {name: 'Use Anthropic in a workflow'})).toHaveTextContent(
+        'harness: pi',
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {name: 'Use Anthropic in a workflow'})).toHaveTextContent(
+        'model: claude-opus-4-8',
+      ),
+    );
+
+    fireEvent.click(screen.getByRole('button', {name: 'Model'}));
+    fireEvent.click(await screen.findByRole('option', {name: 'Kimi K2.7 Code'}));
+
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {name: 'Use Anthropic in a workflow'})).toHaveTextContent(
+        "model: '@cf/moonshotai/kimi-k2.7-code'",
+      ),
+    );
+    expect(screen.getByRole('dialog', {name: 'Use Anthropic in a workflow'})).not.toHaveTextContent(
+      'model: claude-opus-4-8',
+    );
+  }, 10_000);
+
+  test('changes the selected harness in the workflow example', async () => {
+    renderUsageModal();
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {name: 'Use Anthropic in a workflow'})).toHaveTextContent(
+        'harness: pi',
+      ),
+    );
+
+    fireEvent.click(screen.getByRole('button', {name: 'Harness'}));
+    fireEvent.click(await screen.findByRole('option', {name: 'Claude'}));
+
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {name: 'Use Anthropic in a workflow'})).toHaveTextContent(
+        'harness: claude',
+      ),
+    );
+  });
+
+  test('uses the workspace default harness when it is compatible', async () => {
+    const onOpenChange = vi.fn();
+    const entry = modelProviderEntry();
+
+    render(
+      <ModelProviderUsageModal
+        target={usageTargetFromCatalogEntry(entry)}
+        initialModel="claude-opus-4-8"
+        workspaceDefaultHarnessId="claude"
+        open
+        onOpenChange={onOpenChange}
+      />,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {name: 'Use Anthropic in a workflow'})).toHaveTextContent(
+        'harness: claude',
+      ),
+    );
+  });
+
+  test('clamps the selected harness when the target changes', async () => {
+    const onOpenChange = vi.fn();
+    const anthropic = modelProviderEntry();
+    const openai = modelProviderEntry({
+      id: 'openai',
+      label: 'OpenAI',
+      models: [{id: 'gpt-5.5-pro', label: 'GPT-5.5 Pro'}],
+    });
+    const {rerender} = render(
+      <ModelProviderUsageModal
+        target={usageTargetFromCatalogEntry(anthropic)}
+        initialModel="claude-opus-4-8"
+        workspaceDefaultHarnessId="claude"
+        open
+        onOpenChange={onOpenChange}
+      />,
+    );
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {name: 'Use Anthropic in a workflow'})).toHaveTextContent(
+        'harness: claude',
+      ),
+    );
+
+    rerender(
+      <ModelProviderUsageModal
+        target={usageTargetFromCatalogEntry(openai)}
+        initialModel="gpt-5.5-pro"
+        workspaceDefaultHarnessId="claude"
+        open
+        onOpenChange={onOpenChange}
+      />,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', {name: 'Use OpenAI in a workflow'})).toHaveTextContent(
+        'harness: pi',
+      ),
+    );
+    expect(screen.queryByRole('button', {name: 'Harness'})).not.toBeInTheDocument();
+  });
+
+  test('renders a static pi harness line for custom providers', async () => {
+    const onOpenChange = vi.fn();
+
+    render(
+      <ModelProviderUsageModal
+        target={usageTargetFromCustomConfig(customModelProviderConfig())}
+        initialModel="custom-model"
+        workspaceDefaultHarnessId="claude"
+        open
+        onOpenChange={onOpenChange}
+      />,
+    );
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole('dialog', {name: 'Use OpenAI Compatible in a workflow'}),
+      ).toHaveTextContent('harness: pi'),
+    );
+    expect(screen.getByText('Harness')).toBeVisible();
+    expect(screen.getAllByText('pi').length).toBeGreaterThan(0);
+    expect(screen.queryByRole('button', {name: 'Harness'})).not.toBeInTheDocument();
+  });
+
+  test('renders reference models as clickable rows with inline ids', async () => {
+    renderUsageModal();
+
+    const list = await screen.findByRole('list');
+    expect(within(list).getByText('Claude Opus 4.8')).toBeVisible();
+    expect(within(list).getByText('@cf/moonshotai/kimi-k2.7-code')).toBeVisible();
+    expect(within(list).getByRole('button', {name: KIMI_MODEL_ROW_NAME})).toBeVisible();
+  });
+
+  test('copies the full model id', async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {writeText},
+    });
+
+    renderUsageModal();
+    await user.click(await screen.findByRole('button', {name: KIMI_MODEL_ROW_NAME}));
+
+    expect(writeText).toHaveBeenCalledWith('@cf/moonshotai/kimi-k2.7-code');
+    expect(await screen.findAllByText('Copied')).toHaveLength(2);
+    expect(await screen.findByRole('status')).toHaveTextContent('Copied Kimi K2.7 Code id');
+  });
+
+  test('shows failed copy feedback', async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockRejectedValue(new Error('denied'));
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {writeText},
+    });
+    Object.defineProperty(document, 'execCommand', {
+      configurable: true,
+      value: vi.fn().mockReturnValue(false),
+    });
+
+    renderUsageModal();
+    await user.click(await screen.findByRole('button', {name: CLAUDE_MODEL_ROW_NAME}));
+
+    await waitFor(() => expect(document.execCommand).toHaveBeenCalledWith('copy'));
+    expect(await screen.findByRole('status')).toHaveTextContent(
+      'Could not copy Claude Opus 4.8 id',
+    );
+  });
+});