@shipfox/client-workspace-settings 0.2.0

package/src/feature.ts

@@ -0,0 +1,120 @@
+import {defineClientFeature} from '@shipfox/client-shell';
+import type {IconName} from '@shipfox/react-ui/icon';
+
+export const workspaceSettingsFeature = defineClientFeature({
+  id: 'shipfox.workspace-settings',
+  routes: [
+    {
+      path: '/workspaces/$wid/settings',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/index',
+    },
+    {
+      path: '/workspaces/$wid/settings/members',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/members',
+    },
+    {
+      path: '/workspaces/$wid/settings/runners',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/runners',
+    },
+    {
+      path: '/workspaces/$wid/settings/provisioners',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/provisioners',
+    },
+    {
+      path: '/workspaces/$wid/settings/agents',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/agents',
+    },
+    {
+      path: '/workspaces/$wid/settings/secrets',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/secrets',
+    },
+    {
+      path: '/workspaces/$wid/settings/variables',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/variables',
+    },
+    {
+      path: '/workspaces/$wid/settings/integrations',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/integrations',
+    },
+    {
+      path: '/workspaces/$wid/settings/events',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/events',
+    },
+  ],
+  navigation: [
+    {
+      id: 'nav.settings',
+      scope: 'workspace',
+      label: 'Settings',
+      to: '/workspaces/$wid/settings',
+      order: 200,
+    },
+  ],
+  settingsSections: [
+    {
+      id: 'settings.members',
+      pathSegment: 'members',
+      label: 'Members',
+      icon: 'userLine' as IconName,
+      order: 100,
+    },
+    {
+      id: 'settings.runners',
+      pathSegment: 'runners',
+      label: 'Runners',
+      icon: 'settings3Line' as IconName,
+      order: 200,
+    },
+    {
+      id: 'settings.provisioners',
+      pathSegment: 'provisioners',
+      label: 'Runner provisioners',
+      icon: 'serverLine' as IconName,
+      order: 300,
+    },
+    {
+      id: 'settings.agents',
+      pathSegment: 'agents',
+      label: 'Agents',
+      icon: 'robot2Line' as IconName,
+      order: 400,
+    },
+    {
+      id: 'settings.secrets',
+      pathSegment: 'secrets',
+      label: 'Secrets',
+      icon: 'keyLine' as IconName,
+      order: 500,
+    },
+    {
+      id: 'settings.variables',
+      pathSegment: 'variables',
+      label: 'Variables',
+      icon: 'bracesLine' as IconName,
+      order: 600,
+    },
+    {
+      id: 'settings.integrations',
+      pathSegment: 'integrations',
+      label: 'Integrations',
+      icon: 'plugLine' as IconName,
+      order: 700,
+    },
+    {
+      id: 'settings.events',
+      pathSegment: 'events',
+      label: 'Events',
+      icon: 'pulseLine' as IconName,
+      order: 800,
+    },
+  ],
+});

package/src/hooks/api/create-invitation.ts

@@ -0,0 +1,21 @@
+import type {CreateInvitationBodyDto, InvitationDto} from '@shipfox/api-workspaces-dto';
+import {apiRequest} from '@shipfox/client-api';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {listInvitationsQueryKey} from './list-invitations.js';
+
+async function createInvitation(params: {workspaceId: string; body: CreateInvitationBodyDto}) {
+  return await apiRequest<InvitationDto>(`/workspaces/${params.workspaceId}/invitations`, {
+    method: 'POST',
+    body: params.body,
+  });
+}
+
+export function useCreateInvitation(workspaceId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: CreateInvitationBodyDto) => createInvitation({workspaceId, body}),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({queryKey: listInvitationsQueryKey(workspaceId)});
+    },
+  });
+}

package/src/hooks/api/list-invitations.ts

@@ -0,0 +1,17 @@
+import type {ListInvitationsResponseDto} from '@shipfox/api-workspaces-dto';
+import {apiRequest} from '@shipfox/client-api';
+import {useQuery} from '@tanstack/react-query';
+
+export const listInvitationsQueryKey = (workspaceId: string) =>
+  ['workspaces', workspaceId, 'invitations'] as const;
+
+async function listInvitations(workspaceId: string): Promise<ListInvitationsResponseDto> {
+  return await apiRequest<ListInvitationsResponseDto>(`/workspaces/${workspaceId}/invitations`);
+}
+
+export function useListInvitations(workspaceId: string) {
+  return useQuery({
+    queryKey: listInvitationsQueryKey(workspaceId),
+    queryFn: () => listInvitations(workspaceId),
+  });
+}

package/src/hooks/api/list-members.ts

@@ -0,0 +1,17 @@
+import type {ListMembersResponseDto} from '@shipfox/api-workspaces-dto';
+import {apiRequest} from '@shipfox/client-api';
+import {useQuery} from '@tanstack/react-query';
+
+export const listMembersQueryKey = (workspaceId: string) =>
+  ['workspaces', workspaceId, 'members'] as const;
+
+async function listMembers(workspaceId: string): Promise<ListMembersResponseDto> {
+  return await apiRequest<ListMembersResponseDto>(`/workspaces/${workspaceId}/members`);
+}
+
+export function useListMembers(workspaceId: string) {
+  return useQuery({
+    queryKey: listMembersQueryKey(workspaceId),
+    queryFn: () => listMembers(workspaceId),
+  });
+}

package/src/hooks/api/remove-member.ts

@@ -0,0 +1,19 @@
+import {apiRequest} from '@shipfox/client-api';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {listMembersQueryKey} from './list-members.js';
+
+async function removeMember(params: {workspaceId: string; userId: string}) {
+  await apiRequest<void>(`/workspaces/${params.workspaceId}/members/${params.userId}`, {
+    method: 'DELETE',
+  });
+}
+
+export function useRemoveMember(workspaceId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (userId: string) => removeMember({workspaceId, userId}),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({queryKey: listMembersQueryKey(workspaceId)});
+    },
+  });
+}

package/src/hooks/api/revoke-invitation.ts

@@ -0,0 +1,19 @@
+import {apiRequest} from '@shipfox/client-api';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {listInvitationsQueryKey} from './list-invitations.js';
+
+async function revokeInvitation(params: {workspaceId: string; invitationId: string}) {
+  await apiRequest<void>(`/workspaces/${params.workspaceId}/invitations/${params.invitationId}`, {
+    method: 'DELETE',
+  });
+}
+
+export function useRevokeInvitation(workspaceId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (invitationId: string) => revokeInvitation({workspaceId, invitationId}),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({queryKey: listInvitationsQueryKey(workspaceId)});
+    },
+  });
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './pages/events-settings-page.js';
+export * from './pages/integrations-settings-page.js';
+export * from './pages/members-settings-page.js';
+export * from './pages/model-providers-settings-page.js';
+export * from './pages/provisioners-settings-page.js';
+export * from './pages/runners-settings-page.js';
+export * from './pages/secrets-settings-page.js';
+export * from './pages/variables-settings-page.js';

package/src/pages/events-settings-page.tsx

@@ -0,0 +1,25 @@
+import {EventsPage, type TriggerEventFilters} from '@shipfox/client-triggers';
+import {getRouteApi} from '@tanstack/react-router';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+const routeApi = getRouteApi('/workspaces/$wid/_layout/settings/events');
+
+export function EventsSettingsPage() {
+  const search = routeApi.useSearch();
+  const navigate = routeApi.useNavigate();
+
+  // Merge the patch into the current URL search. Undefined values drop their key, so
+  // clearing a filter removes it from the URL. `replace` keeps filter tweaks off the
+  // back stack.
+  const onFiltersChange = (patch: Partial<TriggerEventFilters>) => {
+    void navigate({search: {...search, ...patch}, replace: true});
+  };
+
+  return (
+    <WorkspaceSettingsShell>
+      {(workspace) => (
+        <EventsPage workspaceId={workspace.id} filters={search} onFiltersChange={onFiltersChange} />
+      )}
+    </WorkspaceSettingsShell>
+  );
+}

package/src/pages/integrations-settings-page.test.tsx

@@ -0,0 +1,72 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {screen} from '@testing-library/react';
+import {
+  jsonResponse,
+  renderWorkspaceSettingsPage,
+  WORKSPACE_SETTINGS_TEST_WID,
+} from '#test/pages.js';
+import {IntegrationsSettingsPage} from './integrations-settings-page.js';
+
+const providers = {
+  providers: [
+    {provider: 'sentry', display_name: 'Sentry', capabilities: []},
+    {provider: 'github', display_name: 'GitHub', capabilities: ['source_control']},
+  ],
+};
+
+const githubConnection = {
+  id: '44444444-4444-4444-8444-444444444444',
+  workspace_id: WORKSPACE_SETTINGS_TEST_WID,
+  provider: 'github',
+  external_account_id: 'installation-1',
+  slug: 'github_acme_corp',
+  display_name: 'acme-corp',
+  lifecycle_status: 'active',
+  capabilities: ['source_control'],
+  external_url: 'https://github.com/organizations/acme-corp/settings/installations/1',
+  created_at: '2026-03-12T00:00:00.000Z',
+  updated_at: '2026-03-12T00:00:00.000Z',
+};
+
+function fetchForIntegrations({connections = [githubConnection] as unknown[]} = {}) {
+  return vi.fn((input: RequestInfo | URL) => {
+    const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+    if (url.includes('/integration-providers')) {
+      return Promise.resolve(jsonResponse(providers));
+    }
+    if (url.includes('/integration-connections')) {
+      return Promise.resolve(jsonResponse({connections}));
+    }
+    return Promise.resolve(jsonResponse({}, {status: 404}));
+  });
+}
+
+function renderPage() {
+  return renderWorkspaceSettingsPage(
+    `/workspaces/${WORKSPACE_SETTINGS_TEST_WID}/settings/integrations`,
+    <IntegrationsSettingsPage />,
+  );
+}
+
+// The provider is named once (icon + account name); the meta line carries only
+// the date.
+const ADDED_META_RE = /^Added /;
+
+describe('IntegrationsSettingsPage', () => {
+  test('renders the settings shell and delegates to the integration gallery', async () => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: fetchForIntegrations(),
+    });
+
+    renderPage();
+
+    expect(await screen.findByRole('region', {name: 'Installed integrations'})).toBeInTheDocument();
+    expect(screen.getByRole('region', {name: 'Available integrations'})).toBeInTheDocument();
+    expect(await screen.findByText('acme-corp')).toBeVisible();
+    expect(screen.queryByText('Connected')).not.toBeInTheDocument();
+    expect(screen.queryByText('Connect')).not.toBeInTheDocument();
+    expect(screen.getByRole('link', {name: 'Install GitHub'})).toBeVisible();
+    expect(screen.getByText(ADDED_META_RE)).toBeVisible();
+  });
+});

package/src/pages/integrations-settings-page.tsx

@@ -0,0 +1,6 @@
+import {IntegrationGallery} from '@shipfox/client-integrations';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+export function IntegrationsSettingsPage() {
+  return <WorkspaceSettingsShell>{() => <IntegrationGallery />}</WorkspaceSettingsShell>;
+}

package/src/pages/members-settings-page.tsx

@@ -0,0 +1,17 @@
+import {WorkspaceMembersSettingsSection} from '#components/members/workspace-members-section.js';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+export function MembersSettingsPage() {
+  return (
+    <WorkspaceSettingsShell>
+      {(workspace) => (
+        <div>
+          <WorkspaceMembersSettingsSection
+            workspaceId={workspace.id}
+            workspaceName={workspace.name}
+          />
+        </div>
+      )}
+    </WorkspaceSettingsShell>
+  );
+}

package/src/pages/model-providers-settings-page.test.tsx

@@ -0,0 +1,48 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {screen} from '@testing-library/react';
+import {
+  jsonResponse,
+  renderWorkspaceSettingsPage,
+  WORKSPACE_SETTINGS_TEST_WID,
+} from '#test/pages.js';
+import {ModelProvidersSettingsPage} from './model-providers-settings-page.js';
+
+describe('ModelProvidersSettingsPage', () => {
+  test('renders the settings shell and model providers section', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = new URL((input as Request).url);
+      if (url.pathname.endsWith('/agent/model-provider-catalog')) {
+        return Promise.resolve(
+          jsonResponse({
+            providers: [
+              {
+                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'}],
+              },
+            ],
+          }),
+        );
+      }
+      return Promise.resolve(
+        jsonResponse({configs: [], default_provider_id: null, default_harness_id: null}),
+      );
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderWorkspaceSettingsPage(
+      `/workspaces/${WORKSPACE_SETTINGS_TEST_WID}/settings/agents`,
+      <ModelProvidersSettingsPage />,
+    );
+
+    expect(await screen.findByText('Harnesses')).toBeVisible();
+    expect(await screen.findByText('No providers configured')).toBeVisible();
+    expect(screen.getByText('Available providers')).toBeVisible();
+    expect(screen.getByRole('button', {name: 'Configure Anthropic'})).toBeVisible();
+    expect(screen.queryByText('Connect')).not.toBeInTheDocument();
+  });
+});

package/src/pages/model-providers-settings-page.tsx

@@ -0,0 +1,15 @@
+import {WorkspaceHarnessesSection, WorkspaceModelProvidersSection} from '@shipfox/client-agent';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+export function ModelProvidersSettingsPage() {
+  return (
+    <WorkspaceSettingsShell>
+      {(workspace) => (
+        <div className="flex flex-col gap-32">
+          <WorkspaceHarnessesSection workspaceId={workspace.id} />
+          <WorkspaceModelProvidersSection workspaceId={workspace.id} />
+        </div>
+      )}
+    </WorkspaceSettingsShell>
+  );
+}

package/src/pages/provisioners-settings-page.test.tsx

@@ -0,0 +1,29 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {screen} from '@testing-library/react';
+import {
+  jsonResponse,
+  renderWorkspaceSettingsPage,
+  WORKSPACE_SETTINGS_TEST_WID,
+} from '#test/pages.js';
+import {ProvisionersSettingsPage} from './provisioners-settings-page.js';
+
+describe('ProvisionersSettingsPage', () => {
+  test('renders the settings shell and provisioner token section', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.endsWith('/provisioners/active')) {
+        return Promise.resolve(jsonResponse({provisioners: []}));
+      }
+      return Promise.resolve(jsonResponse({tokens: []}));
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderWorkspaceSettingsPage(
+      `/workspaces/${WORKSPACE_SETTINGS_TEST_WID}/settings/provisioners`,
+      <ProvisionersSettingsPage />,
+    );
+
+    expect(await screen.findByText('No usable provisioner registration tokens')).toBeVisible();
+    expect(screen.getByRole('button', {name: 'Create token'})).toBeVisible();
+  });
+});

package/src/pages/provisioners-settings-page.tsx

@@ -0,0 +1,14 @@
+import {WorkspaceProvisionerTokensSettingsSection} from '@shipfox/client-runners';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+export function ProvisionersSettingsPage() {
+  return (
+    <WorkspaceSettingsShell>
+      {(workspace) => (
+        <div>
+          <WorkspaceProvisionerTokensSettingsSection workspaceId={workspace.id} />
+        </div>
+      )}
+    </WorkspaceSettingsShell>
+  );
+}

package/src/pages/runners-settings-page.test.tsx

@@ -0,0 +1,23 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {screen} from '@testing-library/react';
+import {
+  jsonResponse,
+  renderWorkspaceSettingsPage,
+  WORKSPACE_SETTINGS_TEST_WID,
+} from '#test/pages.js';
+import {RunnersSettingsPage} from './runners-settings-page.js';
+
+describe('RunnersSettingsPage', () => {
+  test('renders the manual registration token section', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(jsonResponse({manual_registration_tokens: []}));
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderWorkspaceSettingsPage(
+      `/workspaces/${WORKSPACE_SETTINGS_TEST_WID}/settings/runners`,
+      <RunnersSettingsPage />,
+    );
+
+    expect(await screen.findByText('No usable manual registration tokens')).toBeVisible();
+    expect(screen.getByRole('button', {name: 'Create token'})).toBeVisible();
+  });
+});

package/src/pages/runners-settings-page.tsx

@@ -0,0 +1,14 @@
+import {WorkspaceManualRegistrationTokensSettingsSection} from '@shipfox/client-runners';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+export function RunnersSettingsPage() {
+  return (
+    <WorkspaceSettingsShell>
+      {(workspace) => (
+        <div>
+          <WorkspaceManualRegistrationTokensSettingsSection workspaceId={workspace.id} />
+        </div>
+      )}
+    </WorkspaceSettingsShell>
+  );
+}

package/src/pages/secrets-settings-page.tsx

@@ -0,0 +1,14 @@
+import {WorkspaceSecretsSection} from '@shipfox/client-secrets';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+export function SecretsSettingsPage() {
+  return (
+    <WorkspaceSettingsShell>
+      {(workspace) => (
+        <div>
+          <WorkspaceSecretsSection workspaceId={workspace.id} />
+        </div>
+      )}
+    </WorkspaceSettingsShell>
+  );
+}

package/src/pages/variables-settings-page.tsx

@@ -0,0 +1,14 @@
+import {WorkspaceVariablesSection} from '@shipfox/client-secrets';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+export function VariablesSettingsPage() {
+  return (
+    <WorkspaceSettingsShell>
+      {(workspace) => (
+        <div>
+          <WorkspaceVariablesSection workspaceId={workspace.id} />
+        </div>
+      )}
+    </WorkspaceSettingsShell>
+  );
+}

package/src/routes/agents.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {ModelProvidersSettingsPage} from '#pages/model-providers-settings-page.js';
+export default defineRoute({component: ModelProvidersSettingsPage});

package/src/routes/events.tsx

@@ -0,0 +1,7 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {validateTriggerEventsSearch} from '@shipfox/client-triggers';
+import {EventsSettingsPage} from '#pages/events-settings-page.js';
+export default defineRoute({
+  validateSearch: validateTriggerEventsSearch,
+  component: EventsSettingsPage,
+});

package/src/routes/index.tsx

@@ -0,0 +1,8 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {redirect} from '@tanstack/react-router';
+
+export default defineRoute({
+  beforeLoad: ({params}: {params: {wid: string}}) => {
+    throw redirect({to: '/workspaces/$wid/settings/members', params: {wid: params.wid}});
+  },
+});

package/src/routes/integrations.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {IntegrationsSettingsPage} from '#pages/integrations-settings-page.js';
+export default defineRoute({component: IntegrationsSettingsPage});

package/src/routes/members.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {MembersSettingsPage} from '#pages/members-settings-page.js';
+export default defineRoute({component: MembersSettingsPage});

package/src/routes/provisioners.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {ProvisionersSettingsPage} from '#pages/provisioners-settings-page.js';
+export default defineRoute({component: ProvisionersSettingsPage});

package/src/routes/runners.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {RunnersSettingsPage} from '#pages/runners-settings-page.js';
+export default defineRoute({component: RunnersSettingsPage});

package/src/routes/secrets.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {SecretsSettingsPage} from '#pages/secrets-settings-page.js';
+export default defineRoute({component: SecretsSettingsPage});

package/src/routes/variables.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {VariablesSettingsPage} from '#pages/variables-settings-page.js';
+export default defineRoute({component: VariablesSettingsPage});