@shipfox/client-runners 0.2.0

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@shipfox/client-runners",
+  "license": "MIT",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
+    "directory": "libs/client/runners"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "imports": {
+    "#*": {
+      "types": "./src/*",
+      "workspace-source": "./src/*",
+      "development": "./src/*",
+      "default": "./dist/*"
+    }
+  },
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@tanstack/react-form": "^1.32.0",
+    "@shipfox/api-runners-dto": "2.0.0",
+    "@shipfox/client-api": "0.2.0",
+    "@shipfox/react-ui": "0.3.1",
+    "@shipfox/client-ui": "0.2.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.101.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@argos-ci/cli": "^5.0.0",
+    "@argos-ci/storybook": "^6.0.0",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.101.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/browser-playwright": "^4.1.5",
+    "jsdom": "^29.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^10.0.0",
+    "storybook-addon-pseudo-states": "^10.0.0",
+    "tailwindcss": "^4.1.13",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.5",
+    "@shipfox/biome": "1.8.1",
+    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/swc": "1.2.5",
+    "@shipfox/typescript": "1.1.6",
+    "@shipfox/vite": "1.2.4",
+    "@shipfox/ts-config": "1.3.8",
+    "@shipfox/vitest": "1.2.2"
+  },
+  "scripts": {
+    "build": "shipfox-swc",
+    "check": "shipfox-biome-check",
+    "check:fix": "shipfox-biome-check --write",
+    "storybook": "storybook dev -p 6012",
+    "storybook:build": "storybook build -o storybook-static",
+    "test": "shipfox-vitest-run",
+    "test:watch": "shipfox-vitest-watch",
+    "type": "shipfox-tsc-check",
+    "type:emit": "shipfox-tsc-emit"
+  }
+}

package/src/components/create-manual-registration-token-form.tsx

@@ -0,0 +1,197 @@
+import type {CreateManualRegistrationTokenResponseDto} from '@shipfox/api-runners-dto';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout, CalloutContent, CalloutDescription, CalloutTitle} from '@shipfox/react-ui/callout';
+import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {useCopyToClipboard} from '@shipfox/react-ui/hooks';
+import {ModalBody, ModalFooter} from '@shipfox/react-ui/modal';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {useQueryClient} from '@tanstack/react-query';
+import {useState} from 'react';
+import {
+  manualRegistrationTokenQueryKeys,
+  useCreateManualRegistrationTokenMutation,
+} from '#hooks/api/manual-registration-tokens.js';
+import {manualRegistrationTokenCreateErrorToFormError} from './form-errors.js';
+import {
+  ExpirationSelect,
+  expirationHint,
+  type TokenExpirationOption,
+} from './token-expiration-select.js';
+
+export const CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID = 'create-manual-registration-token-form';
+
+export function CreateManualRegistrationTokenForm({
+  workspaceId,
+  onCreated,
+}: {
+  workspaceId: string;
+  onCreated: (token: CreateManualRegistrationTokenResponseDto) => void;
+}) {
+  const queryClient = useQueryClient();
+  const createToken = useCreateManualRegistrationTokenMutation();
+  const [formError, setFormError] = useState<string | undefined>();
+
+  const form = useForm({
+    defaultValues: {name: '', expiration: '86400' as TokenExpirationOption},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      const trimmedName = value.name.trim();
+      const body = {
+        ...(trimmedName ? {name: trimmedName} : {}),
+        ...(value.expiration === 'never' ? {} : {ttl_seconds: Number(value.expiration)}),
+      };
+
+      try {
+        const token = await createToken.mutateAsync({workspaceId, body});
+        await queryClient.invalidateQueries({
+          queryKey: manualRegistrationTokenQueryKeys.list(workspaceId),
+        });
+        onCreated(token);
+      } catch (error) {
+        const mapped = manualRegistrationTokenCreateErrorToFormError(error);
+        setFormError(mapped.message);
+      }
+    },
+  });
+
+  return (
+    <>
+      <ModalBody className="gap-16">
+        <form
+          id={CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID}
+          className="flex w-full flex-col gap-8"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          <div className="flex w-full items-end gap-16 max-[640px]:flex-col max-[640px]:items-stretch">
+            <form.Field
+              name="name"
+              validators={{
+                onBlur: ({value}) =>
+                  value.length <= 80 ? undefined : 'Token name must be 80 characters or fewer.',
+              }}
+            >
+              {(field) => (
+                <FormField
+                  className="flex-1"
+                  label="Token name"
+                  id="manual-registration-token-name"
+                  error={fieldError(field)}
+                >
+                  <FormFieldInput
+                    placeholder="Local runner"
+                    maxLength={80}
+                    value={field.state.value}
+                    onChange={(event) => field.handleChange(event.target.value)}
+                    onBlur={field.handleBlur}
+                  />
+                </FormField>
+              )}
+            </form.Field>
+            <form.Field name="expiration">
+              {(field) => (
+                <FormField
+                  className="flex-1"
+                  label="Expires"
+                  id="manual-registration-token-expiration"
+                  error={fieldError(field)}
+                >
+                  <ExpirationSelect
+                    value={field.state.value}
+                    onValueChange={(next) => field.handleChange(next)}
+                  />
+                </FormField>
+              )}
+            </form.Field>
+          </div>
+          <form.Subscribe selector={(state) => state.values.expiration}>
+            {(expiration) => (
+              <Text size="sm" className="text-foreground-neutral-muted">
+                {expirationHint(expiration)}
+              </Text>
+            )}
+          </form.Subscribe>
+        </form>
+        {formError ? (
+          <Callout role="alert" type="error">
+            <div className="flex flex-col gap-8">
+              <Text size="sm" bold>
+                Could not create token
+              </Text>
+              <Text size="sm">{formError}</Text>
+            </div>
+          </Callout>
+        ) : null}
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          type="submit"
+          form={CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID}
+          isLoading={createToken.isPending}
+        >
+          Create token
+        </Button>
+      </ModalFooter>
+    </>
+  );
+}
+
+export function CreatedManualRegistrationTokenPanel({
+  token,
+}: {
+  token: CreateManualRegistrationTokenResponseDto;
+}) {
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');
+  const {copy} = useCopyToClipboard({
+    text: token.raw_token,
+    onCopy: () => {
+      setCopyState('copied');
+      window.setTimeout(() => setCopyState('idle'), 1500);
+    },
+  });
+
+  async function handleCopy() {
+    try {
+      await copy();
+    } catch {
+      setCopyState('failed');
+      window.setTimeout(() => setCopyState('idle'), 2500);
+    }
+  }
+
+  return (
+    <Callout type="success" variant="secondary" icon={null}>
+      <CalloutContent className="flex flex-col gap-12">
+        <div className="flex flex-col gap-2">
+          <CalloutTitle className="mb-0">Token created</CalloutTitle>
+          <CalloutDescription>
+            Copy this registration token now. It will not be shown again.
+          </CalloutDescription>
+        </div>
+        <div className="flex items-center gap-8 max-[640px]:flex-col max-[640px]:items-stretch">
+          <Code variant="paragraph" className="min-w-0 flex-1 break-all">
+            {token.raw_token}
+          </Code>
+          <Button
+            size="sm"
+            variant="secondary"
+            iconLeft="fileCopyLine"
+            onClick={() => void handleCopy()}
+          >
+            {copyState === 'copied' ? 'Copied' : 'Copy'}
+          </Button>
+        </div>
+        {copyState === 'failed' ? (
+          <Text size="sm" className="text-foreground-neutral-muted">
+            Copy failed: select and copy manually.
+          </Text>
+        ) : null}
+      </CalloutContent>
+    </Callout>
+  );
+}

package/src/components/create-provisioner-token-form.tsx

@@ -0,0 +1,193 @@
+import type {CreateProvisionerTokenResponseDto} from '@shipfox/api-runners-dto';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout, CalloutContent, CalloutDescription, CalloutTitle} from '@shipfox/react-ui/callout';
+import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {useCopyToClipboard} from '@shipfox/react-ui/hooks';
+import {ModalBody, ModalFooter} from '@shipfox/react-ui/modal';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {useQueryClient} from '@tanstack/react-query';
+import {useState} from 'react';
+import {
+  provisionerTokenQueryKeys,
+  useCreateProvisionerTokenMutation,
+} from '#hooks/api/provisioner-tokens.js';
+import {provisionerTokenCreateErrorToFormError} from './provisioner-token-form-errors.js';
+import {
+  ExpirationSelect,
+  expirationHint,
+  type TokenExpirationOption,
+} from './token-expiration-select.js';
+
+export const CREATE_PROVISIONER_TOKEN_FORM_ID = 'create-provisioner-token-form';
+
+export function CreateProvisionerTokenForm({
+  workspaceId,
+  onCreated,
+}: {
+  workspaceId: string;
+  onCreated: (token: CreateProvisionerTokenResponseDto) => void;
+}) {
+  const queryClient = useQueryClient();
+  const createToken = useCreateProvisionerTokenMutation();
+  const [formError, setFormError] = useState<string | undefined>();
+
+  const form = useForm({
+    defaultValues: {name: '', expiration: '86400' as TokenExpirationOption},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      const trimmedName = value.name.trim();
+      const body = {
+        ...(trimmedName ? {name: trimmedName} : {}),
+        ...(value.expiration === 'never' ? {} : {ttl_seconds: Number(value.expiration)}),
+      };
+
+      try {
+        const token = await createToken.mutateAsync({workspaceId, body});
+        await queryClient.invalidateQueries({
+          queryKey: provisionerTokenQueryKeys.list(workspaceId),
+        });
+        onCreated(token);
+      } catch (error) {
+        const mapped = provisionerTokenCreateErrorToFormError(error);
+        setFormError(mapped.message);
+      }
+    },
+  });
+
+  return (
+    <>
+      <ModalBody className="gap-16">
+        <form
+          id={CREATE_PROVISIONER_TOKEN_FORM_ID}
+          className="flex w-full flex-col gap-8"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          <div className="flex w-full items-end gap-16 max-[640px]:flex-col max-[640px]:items-stretch">
+            <form.Field
+              name="name"
+              validators={{
+                onBlur: ({value}) =>
+                  value.length <= 80 ? undefined : 'Token name must be 80 characters or fewer.',
+              }}
+            >
+              {(field) => (
+                <FormField
+                  className="flex-1"
+                  label="Token name"
+                  id="provisioner-token-name"
+                  error={fieldError(field)}
+                >
+                  <FormFieldInput
+                    placeholder="Docker provisioner"
+                    maxLength={80}
+                    value={field.state.value}
+                    onChange={(event) => field.handleChange(event.target.value)}
+                    onBlur={field.handleBlur}
+                  />
+                </FormField>
+              )}
+            </form.Field>
+            <form.Field name="expiration">
+              {(field) => (
+                <FormField
+                  className="flex-1"
+                  label="Expires"
+                  id="provisioner-token-expiration"
+                  error={fieldError(field)}
+                >
+                  <ExpirationSelect
+                    value={field.state.value}
+                    onValueChange={(next) => field.handleChange(next)}
+                  />
+                </FormField>
+              )}
+            </form.Field>
+          </div>
+          <form.Subscribe selector={(state) => state.values.expiration}>
+            {(expiration) => (
+              <Text size="sm" className="text-foreground-neutral-muted">
+                {expirationHint(expiration)}
+              </Text>
+            )}
+          </form.Subscribe>
+        </form>
+        {formError ? (
+          <Callout role="alert" type="error">
+            <div className="flex flex-col gap-8">
+              <Text size="sm" bold>
+                Could not create token
+              </Text>
+              <Text size="sm">{formError}</Text>
+            </div>
+          </Callout>
+        ) : null}
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          type="submit"
+          form={CREATE_PROVISIONER_TOKEN_FORM_ID}
+          isLoading={createToken.isPending}
+        >
+          Create token
+        </Button>
+      </ModalFooter>
+    </>
+  );
+}
+
+export function CreatedProvisionerTokenPanel({token}: {token: CreateProvisionerTokenResponseDto}) {
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');
+  const {copy} = useCopyToClipboard({
+    text: token.raw_token,
+    onCopy: () => {
+      setCopyState('copied');
+      window.setTimeout(() => setCopyState('idle'), 1500);
+    },
+  });
+
+  async function handleCopy() {
+    try {
+      await copy();
+    } catch {
+      setCopyState('failed');
+      window.setTimeout(() => setCopyState('idle'), 2500);
+    }
+  }
+
+  return (
+    <Callout type="success" variant="secondary" icon={null}>
+      <CalloutContent className="flex flex-col gap-12">
+        <div className="flex flex-col gap-2">
+          <CalloutTitle className="mb-0">Token created</CalloutTitle>
+          <CalloutDescription>
+            Copy this provisioner token now. It will not be shown again.
+          </CalloutDescription>
+        </div>
+        <div className="flex items-center gap-8 max-[640px]:flex-col max-[640px]:items-stretch">
+          <Code variant="paragraph" className="min-w-0 flex-1 break-all">
+            {token.raw_token}
+          </Code>
+          <Button
+            size="sm"
+            variant="secondary"
+            iconLeft="fileCopyLine"
+            onClick={() => void handleCopy()}
+          >
+            {copyState === 'copied' ? 'Copied' : 'Copy'}
+          </Button>
+        </div>
+        {copyState === 'failed' ? (
+          <Text size="sm" className="text-foreground-neutral-muted">
+            Copy failed: select and copy manually.
+          </Text>
+        ) : null}
+      </CalloutContent>
+    </Callout>
+  );
+}

package/src/components/form-errors.test.ts

@@ -0,0 +1,24 @@
+import {ApiError} from '@shipfox/client-api';
+import {manualRegistrationTokenCreateErrorToFormError} from './form-errors.js';
+
+describe('manualRegistrationTokenCreateErrorToFormError', () => {
+  test('routes ApiError to a form-level alert with the server message', () => {
+    const error = new ApiError({code: 'rate-limited', message: 'Try later', status: 429});
+
+    const result = manualRegistrationTokenCreateErrorToFormError(error);
+
+    expect(result).toEqual({kind: 'form', message: 'Try later'});
+  });
+
+  test('routes Error to a form-level alert with the error message', () => {
+    const result = manualRegistrationTokenCreateErrorToFormError(new Error('boom'));
+
+    expect(result).toEqual({kind: 'form', message: 'boom'});
+  });
+
+  test('falls back to generic copy for non-Error throwables', () => {
+    const result = manualRegistrationTokenCreateErrorToFormError('weird');
+
+    expect(result).toEqual({kind: 'form', message: 'Something went wrong. Try again.'});
+  });
+});

package/src/components/form-errors.ts

@@ -0,0 +1,9 @@
+import {manualRegistrationTokenErrorMessage} from './manual-registration-token-errors.js';
+
+export type ManualRegistrationTokenCreateFormErrorMapping = {kind: 'form'; message: string};
+
+export function manualRegistrationTokenCreateErrorToFormError(
+  error: unknown,
+): ManualRegistrationTokenCreateFormErrorMapping {
+  return {kind: 'form', message: manualRegistrationTokenErrorMessage(error)};
+}

package/src/components/manual-registration-token-errors.ts

@@ -0,0 +1,13 @@
+import {ApiError} from '@shipfox/client-api';
+
+export function manualRegistrationTokenErrorMessage(error: unknown): string {
+  if (error instanceof ApiError) {
+    // `network-error` carries the raw request URL in its message; never surface it.
+    if (error.code === 'network-error') {
+      return "We couldn't reach the server. Check your connection and try again.";
+    }
+    return error.message;
+  }
+  if (error instanceof Error) return error.message;
+  return 'Something went wrong. Try again.';
+}

package/src/components/manual-registration-token-format.test.ts

@@ -0,0 +1,48 @@
+import {
+  formatManualRegistrationTokenDate,
+  formatManualRegistrationTokenTimestamp,
+  manualRegistrationTokenDisplayName,
+} from './manual-registration-token-format.js';
+
+describe('manualRegistrationTokenDisplayName', () => {
+  test('uses the token name when present', () => {
+    const result = manualRegistrationTokenDisplayName({name: 'Deploy runner'});
+
+    expect(result).toBe('Deploy runner');
+  });
+
+  test('falls back for unnamed tokens', () => {
+    const result = manualRegistrationTokenDisplayName({name: null});
+
+    expect(result).toBe('Unnamed token');
+  });
+});
+
+describe('formatManualRegistrationTokenDate', () => {
+  test('formats timestamps as dates', () => {
+    const result = formatManualRegistrationTokenDate('2026-05-08T00:00:00.000Z');
+
+    expect(result).not.toBe('Never');
+    expect(result).not.toContain(':');
+  });
+
+  test('formats null as never', () => {
+    const result = formatManualRegistrationTokenDate(null);
+
+    expect(result).toBe('Never');
+  });
+});
+
+describe('formatManualRegistrationTokenTimestamp', () => {
+  test('formats timestamps with time', () => {
+    const result = formatManualRegistrationTokenTimestamp('2026-05-08T00:00:00.000Z');
+
+    expect(result).toContain(':');
+  });
+
+  test('formats null as undefined', () => {
+    const result = formatManualRegistrationTokenTimestamp(null);
+
+    expect(result).toBeUndefined();
+  });
+});

package/src/components/manual-registration-token-format.ts

@@ -0,0 +1,18 @@
+import type {ManualRegistrationTokenDto} from '@shipfox/api-runners-dto';
+import {formatDate, formatTimestamp} from '@shipfox/react-ui/utils';
+
+export function formatManualRegistrationTokenDate(value: string | null): string {
+  if (!value) return 'Never';
+  return formatDate(value);
+}
+
+export function formatManualRegistrationTokenTimestamp(value: string | null): string | undefined {
+  if (!value) return undefined;
+  return formatTimestamp(value);
+}
+
+export function manualRegistrationTokenDisplayName(
+  token: Pick<ManualRegistrationTokenDto, 'name'>,
+): string {
+  return token.name || 'Unnamed token';
+}