@shipfox/client-runners 0.2.0

package/src/components/provisioner-tokens-settings-section.test.tsx

@@ -0,0 +1,362 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {Toaster} from '@shipfox/react-ui/toast';
+import {formatDate, formatTimestamp} from '@shipfox/react-ui/utils';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {fireEvent, render, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type {ReactElement} from 'react';
+import {WorkspaceProvisionerTokensSettingsSection} from './provisioner-tokens-settings-section.js';
+
+const RUNNERS_TEST_WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const PROVISIONER_TOKEN_ID = '33333333-3333-4333-8333-333333333333';
+const LAST_SEEN_TEXT = /Last seen/;
+
+function jsonResponse(body: unknown, init: ResponseInit = {}) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: {'content-type': 'application/json'},
+    ...init,
+  });
+}
+
+function provisionerToken(overrides: Partial<Record<string, string | null>> = {}) {
+  return {
+    id: PROVISIONER_TOKEN_ID,
+    workspace_id: RUNNERS_TEST_WORKSPACE_ID,
+    prefix: 'sf_pt_abcde',
+    name: 'Docker provisioner',
+    created_by_user_id: '22222222-2222-4222-8222-222222222222',
+    revoked_by_user_id: null,
+    expires_at: '2026-05-09T00:00:00.000Z',
+    revoked_at: null,
+    last_seen_at: null,
+    created_at: '2026-05-08T00:00:00.000Z',
+    updated_at: '2026-05-08T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+function activeProvisioner(overrides: Partial<Record<string, string | null>> = {}) {
+  return {
+    id: PROVISIONER_TOKEN_ID,
+    name: 'Docker provisioner',
+    prefix: 'sf_pt_abcde',
+    last_seen_at: '2026-05-08T01:00:00.000Z',
+    ...overrides,
+  };
+}
+
+function renderProvisionerTokens(element: ReactElement) {
+  const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {element}
+      <Toaster />
+    </QueryClientProvider>,
+  );
+}
+
+function firstButton(name: string): HTMLElement {
+  const button = screen.getAllByRole('button', {name})[0];
+  if (!button) throw new Error(`Button not found: ${name}`);
+  return button;
+}
+
+function lastButton(name: string): HTMLElement {
+  const buttons = screen.getAllByRole('button', {name});
+  const button = buttons.at(-1);
+  if (!button) throw new Error(`Button not found: ${name}`);
+  return button;
+}
+
+async function chooseTokenAction(user: ReturnType<typeof userEvent.setup>, tokenName: string) {
+  await user.click(firstButton(`Open ${tokenName} token actions`));
+  const menuItem = await screen.findByRole('menuitem', {name: 'Revoke token'});
+  expect(menuItem.querySelector('svg')).not.toBeInTheDocument();
+
+  await user.click(menuItem);
+  expect(await screen.findByRole('dialog')).toBeVisible();
+  expect(screen.getByText('Revoke token?')).toBeVisible();
+}
+
+describe('WorkspaceProvisionerTokensSettingsSection', () => {
+  test('renders an empty usable-token state', 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});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+
+    expect(await screen.findByText('No usable provisioner registration tokens')).toBeVisible();
+    expect(screen.getByRole('button', {name: 'Create token'})).toBeVisible();
+  });
+
+  test('creates a token and reveals the raw token inline once', async () => {
+    const user = userEvent.setup();
+    let tokens = [] as ReturnType<typeof provisionerToken>[];
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.endsWith('/provisioners/active')) {
+        return Promise.resolve(jsonResponse({provisioners: []}));
+      }
+      if (request.method === 'POST' && request.url.endsWith('/provisioners/tokens')) {
+        tokens = [provisionerToken({name: 'Docker provisioner'})];
+        return Promise.resolve(
+          jsonResponse(
+            {
+              ...provisionerToken({name: 'Docker provisioner'}),
+              raw_token: 'sf_pt_raw-created-token',
+            },
+            {status: 201},
+          ),
+        );
+      }
+      return Promise.resolve(jsonResponse({tokens}));
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+    await screen.findByText('No usable provisioner registration tokens');
+    await user.click(screen.getByRole('button', {name: 'Create token'}));
+    fireEvent.change(await screen.findByLabelText('Token name'), {
+      target: {value: 'Docker provisioner'},
+    });
+    await user.click(lastButton('Create token'));
+
+    expect(await screen.findByText('Token created')).toBeVisible();
+    expect(screen.getByText('sf_pt_raw-created-token')).toBeVisible();
+  });
+
+  test('renders compact dates with exact timestamp tooltips', async () => {
+    const user = userEvent.setup();
+    const createdAt = '2026-05-08T00:00:00.000Z';
+    const expiresAt = '2026-05-09T00:00:00.000Z';
+    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: [provisionerToken({created_at: createdAt, expires_at: expiresAt})],
+        }),
+      );
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+    const expiresDate = await screen.findAllByText(formatDate(expiresAt));
+    const createdDate = await screen.findAllByText(formatDate(createdAt));
+    const expiresDateTrigger = expiresDate[0];
+    const createdDateTrigger = createdDate[0];
+    if (!expiresDateTrigger || !createdDateTrigger) throw new Error('Token dates not rendered');
+
+    expect(screen.queryByText(formatTimestamp(expiresAt))).not.toBeInTheDocument();
+    await user.hover(expiresDateTrigger);
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(formatTimestamp(expiresAt));
+
+    await user.unhover(expiresDateTrigger);
+    await user.hover(createdDateTrigger);
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(formatTimestamp(createdAt));
+  });
+
+  test('truncates long token names and shows the full name in a tooltip', async () => {
+    const user = userEvent.setup();
+    const tokenName = 'docker-provisioner-for-west-coast-gpu-burst-capacity-and-fallback';
+    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: [provisionerToken({name: tokenName})]}));
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+    const nameTrigger = await screen.findAllByRole('button', {name: tokenName});
+    const visibleNameTrigger = nameTrigger[0];
+    if (!visibleNameTrigger) throw new Error('Token name not rendered');
+
+    expect(screen.getByRole('table')).toHaveClass('table-fixed');
+    expect(visibleNameTrigger).toHaveClass('truncate');
+    await user.hover(visibleNameTrigger);
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(tokenName);
+  });
+
+  test('surfaces create errors without clearing the form', async () => {
+    const user = userEvent.setup();
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.endsWith('/provisioners/active')) {
+        return Promise.resolve(jsonResponse({provisioners: []}));
+      }
+      if (request.method === 'POST' && request.url.endsWith('/provisioners/tokens')) {
+        return Promise.resolve(
+          jsonResponse({message: 'Token quota reached', code: 'quota-reached'}, {status: 422}),
+        );
+      }
+      return Promise.resolve(jsonResponse({tokens: []}));
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+    await screen.findByText('No usable provisioner registration tokens');
+    await user.click(screen.getByRole('button', {name: 'Create token'}));
+    fireEvent.change(await screen.findByLabelText('Token name'), {
+      target: {value: 'Docker provisioner'},
+    });
+    await user.click(lastButton('Create token'));
+
+    expect(await screen.findByText('Could not create token')).toBeVisible();
+    expect(screen.getByText('Token quota reached')).toBeVisible();
+    expect(screen.getByLabelText('Token name')).toHaveValue('Docker provisioner');
+  });
+
+  test('renders connected, last-seen, and never-connected statuses', async () => {
+    const activeId = '44444444-4444-4444-8444-444444444444';
+    const staleId = '55555555-5555-4555-8555-555555555555';
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.endsWith('/provisioners/active')) {
+        return Promise.resolve(
+          jsonResponse({
+            provisioners: [activeProvisioner({id: activeId, name: 'Active provisioner'})],
+          }),
+        );
+      }
+      return Promise.resolve(
+        jsonResponse({
+          tokens: [
+            provisionerToken({id: activeId, name: 'Active provisioner'}),
+            provisionerToken({
+              id: staleId,
+              name: 'Stale provisioner',
+              last_seen_at: '2026-05-08T01:00:00.000Z',
+            }),
+            provisionerToken({name: 'New provisioner'}),
+          ],
+        }),
+      );
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+
+    expect((await screen.findAllByText('Connected')).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(LAST_SEEN_TEXT).length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Never connected').length).toBeGreaterThan(0);
+  });
+
+  test('renders recency when active provisioners cannot load', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.endsWith('/provisioners/active')) {
+        return Promise.resolve(
+          jsonResponse({message: 'Server error', code: 'server-error'}, {status: 500}),
+        );
+      }
+      return Promise.resolve(
+        jsonResponse({
+          tokens: [
+            provisionerToken({
+              last_seen_at: '2026-05-08T01:00:00.000Z',
+            }),
+          ],
+        }),
+      );
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+
+    expect((await screen.findAllByText(LAST_SEEN_TEXT)).length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Docker provisioner').length).toBeGreaterThan(0);
+    expect(
+      screen.queryByText('Could not load provisioner registration tokens'),
+    ).not.toBeInTheDocument();
+  });
+
+  test('revokes a token after row confirmation and removes it from the list', async () => {
+    const user = userEvent.setup();
+    let tokens = [provisionerToken()];
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.endsWith('/provisioners/active')) {
+        return Promise.resolve(jsonResponse({provisioners: []}));
+      }
+      if (request.method === 'POST' && request.url.includes('/revoke')) {
+        tokens = [];
+        return Promise.resolve(
+          jsonResponse(
+            provisionerToken({
+              revoked_at: '2026-05-08T01:00:00.000Z',
+              revoked_by_user_id: '22222222-2222-4222-8222-222222222222',
+            }),
+          ),
+        );
+      }
+      return Promise.resolve(jsonResponse({tokens}));
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+    expect((await screen.findAllByText('Docker provisioner')).length).toBeGreaterThan(0);
+    await chooseTokenAction(user, 'Docker provisioner');
+    await user.click(lastButton('Revoke'));
+
+    await waitFor(() => expect(screen.queryByText('Docker provisioner')).not.toBeInTheDocument());
+    expect(screen.getByText('No usable provisioner registration tokens')).toBeVisible();
+  });
+
+  test('shows a recoverable revoke error', async () => {
+    const user = userEvent.setup();
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.endsWith('/provisioners/active')) {
+        return Promise.resolve(jsonResponse({provisioners: []}));
+      }
+      if (request.method === 'POST' && request.url.includes('/revoke')) {
+        return Promise.resolve(
+          jsonResponse({message: 'Provisioner token not found', code: 'not-found'}, {status: 404}),
+        );
+      }
+      return Promise.resolve(jsonResponse({tokens: [provisionerToken()]}));
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProvisionerTokens(
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={RUNNERS_TEST_WORKSPACE_ID} />,
+    );
+    expect((await screen.findAllByText('Docker provisioner')).length).toBeGreaterThan(0);
+    await chooseTokenAction(user, 'Docker provisioner');
+    await user.click(lastButton('Revoke'));
+
+    expect(await screen.findByText('Provisioner token not found')).toBeVisible();
+    expect(screen.getAllByText('Docker provisioner').length).toBeGreaterThan(0);
+  });
+});

package/src/components/provisioner-tokens-settings-section.tsx

@@ -0,0 +1,114 @@
+import type {CreateProvisionerTokenResponseDto} from '@shipfox/api-runners-dto';
+import {QueryLoadError} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+import {Icon} from '@shipfox/react-ui/icon';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger,
+} from '@shipfox/react-ui/modal';
+import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {Header, Text} from '@shipfox/react-ui/typography';
+import {useMemo, useState} from 'react';
+import {
+  useActiveProvisionersQuery,
+  useProvisionerTokensQuery,
+} from '#hooks/api/provisioner-tokens.js';
+import {
+  CreatedProvisionerTokenPanel,
+  CreateProvisionerTokenForm,
+} from './create-provisioner-token-form.js';
+import {
+  EmptyProvisionerTokens,
+  ProvisionerTokenList,
+  ProvisionerTokenTableSkeleton,
+} from './provisioner-token-list.js';
+
+export function WorkspaceProvisionerTokensSettingsSection({workspaceId}: {workspaceId: string}) {
+  const tokensQuery = useProvisionerTokensQuery(workspaceId);
+  const activeProvisionersQuery = useActiveProvisionersQuery(workspaceId);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [createdToken, setCreatedToken] = useState<CreateProvisionerTokenResponseDto | null>(null);
+  const tokens = tokensQuery.data?.tokens ?? [];
+  const activeIds = useMemo(
+    () => new Set(activeProvisionersQuery.data?.provisioners.map((provisioner) => provisioner.id)),
+    [activeProvisionersQuery.data],
+  );
+
+  function handleOpenChange(nextOpen: boolean) {
+    setIsModalOpen(nextOpen);
+    if (!nextOpen) {
+      setCreatedToken(null);
+    }
+  }
+
+  return (
+    <div className="flex min-w-0 flex-col gap-32">
+      <section className="flex flex-col gap-16">
+        <div className="flex items-center justify-between gap-16 max-[640px]:items-start">
+          <div className="flex flex-col gap-4">
+            <Header variant="h3">Runner provisioner registration tokens</Header>
+            <Text size="sm" className="text-foreground-neutral-muted">
+              Register runner provisioners that connect to this workspace and create runners
+              dynamically based on demand.
+            </Text>
+          </div>
+          <div className="flex items-center gap-12">
+            {(tokensQuery.isFetching && !tokensQuery.isPending) ||
+            (activeProvisionersQuery.isFetching && !activeProvisionersQuery.isPending) ? (
+              <Icon
+                name="loader4Line"
+                className="mt-2 size-18 text-foreground-neutral-muted"
+                aria-label="Refreshing provisioner tokens"
+              />
+            ) : null}
+            <Modal open={isModalOpen} onOpenChange={handleOpenChange}>
+              <ModalTrigger asChild>
+                <Button>Create token</Button>
+              </ModalTrigger>
+              <ModalContent aria-describedby={undefined}>
+                <ModalTitle className="sr-only">Create provisioner registration token</ModalTitle>
+                <ModalHeader>
+                  <Text
+                    size="lg"
+                    aria-hidden="true"
+                    className="overflow-ellipsis overflow-hidden whitespace-nowrap"
+                  >
+                    Create provisioner registration token
+                  </Text>
+                </ModalHeader>
+                {createdToken ? (
+                  <ModalBody className="gap-16">
+                    <CreatedProvisionerTokenPanel token={createdToken} />
+                  </ModalBody>
+                ) : (
+                  <CreateProvisionerTokenForm
+                    workspaceId={workspaceId}
+                    onCreated={setCreatedToken}
+                  />
+                )}
+              </ModalContent>
+            </Modal>
+          </div>
+        </div>
+
+        {tokensQuery.isPending ? <ProvisionerTokenTableSkeleton /> : null}
+
+        {tokensQuery.isError && tokensQuery.data === undefined ? (
+          <QueryLoadError query={tokensQuery} subject="provisioner registration tokens" />
+        ) : null}
+
+        {tokensQuery.data !== undefined && tokens.length === 0 ? <EmptyProvisionerTokens /> : null}
+
+        {tokens.length > 0 ? (
+          <RelativeTimeProvider>
+            <ProvisionerTokenList workspaceId={workspaceId} tokens={tokens} activeIds={activeIds} />
+          </RelativeTimeProvider>
+        ) : null}
+      </section>
+    </div>
+  );
+}

package/src/components/token-date.tsx

@@ -0,0 +1,27 @@
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+
+export function TokenDate({
+  value,
+  date,
+  timestamp,
+}: {
+  value: string | null;
+  date: string;
+  timestamp: string | undefined;
+}) {
+  if (!value || !timestamp) return <>{date}</>;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className="cursor-help rounded-4 outline-none focus-visible:shadow-button-neutral-focus"
+        >
+          <time dateTime={value}>{date}</time>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{timestamp}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/components/token-expiration-select.tsx

@@ -0,0 +1,64 @@
+import {useFormField} from '@shipfox/react-ui/form-field';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@shipfox/react-ui/select';
+
+export type TokenExpirationOption =
+  | '86400'
+  | '604800'
+  | '2592000'
+  | '7776000'
+  | '15552000'
+  | '31536000'
+  | 'never';
+
+export const expirationOptions: Array<{value: TokenExpirationOption; label: string}> = [
+  {value: '86400', label: '1 day'},
+  {value: '604800', label: '7 days'},
+  {value: '2592000', label: '30 days'},
+  {value: '7776000', label: '90 days'},
+  {value: '15552000', label: '180 days'},
+  {value: '31536000', label: '1 year'},
+  {value: 'never', label: 'Never'},
+];
+
+export function expirationHint(expiration: TokenExpirationOption): string {
+  if (expiration === 'never') return 'Token will not expire.';
+  const expiresAt = new Date(Date.now() + Number(expiration) * 1000);
+  const formatted = new Intl.DateTimeFormat(undefined, {dateStyle: 'medium'}).format(expiresAt);
+  return `Expires on ${formatted}.`;
+}
+
+export function ExpirationSelect({
+  value,
+  onValueChange,
+}: {
+  value: TokenExpirationOption;
+  onValueChange: (next: TokenExpirationOption) => void;
+}) {
+  const wiring = useFormField();
+  return (
+    <Select value={value} onValueChange={(next) => onValueChange(next as TokenExpirationOption)}>
+      <SelectTrigger
+        id={wiring.id}
+        aria-invalid={wiring['aria-invalid']}
+        aria-describedby={wiring['aria-describedby']}
+        aria-label="Token expiration"
+        className="w-full"
+      >
+        <SelectValue placeholder="Select expiration" />
+      </SelectTrigger>
+      <SelectContent>
+        {expirationOptions.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/token-name.tsx

@@ -0,0 +1,19 @@
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+
+export function TokenName({name}: {name: string}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className="block w-full min-w-0 cursor-help truncate rounded-4 text-left text-sm leading-20 font-medium text-foreground-neutral-base outline-none focus-visible:shadow-button-neutral-focus"
+        >
+          {name}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <span className="block max-w-[360px] break-words">{name}</span>
+      </TooltipContent>
+    </Tooltip>
+  );
+}