@shipfox/client-agent 14.0.1 → 16.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-agent",
   "license": "MIT",
-  "version": "14.0.1",
+  "version": "16.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -28,11 +28,11 @@
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
     "@tanstack/react-query": "^5.101.0",
-    "@shipfox/api-agent-dto": "12.0.0",
+    "@shipfox/api-agent-dto": "12.2.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "14.0.1",
-    "@shipfox/client-ui": "14.0.1",
-    "@shipfox/react-ui": "1.0.0"
+    "@shipfox/client-shell": "16.0.0",
+    "@shipfox/client-ui": "16.0.0",
+    "@shipfox/react-ui": "1.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/add-custom-provider-card.tsx

@@ -11,17 +11,17 @@ export function AddCustomProviderCard({onConfigure}: {onConfigure: () => void})
       <button
         type="button"
         className={cn(
-          'group block h-full w-full cursor-pointer p-16 text-left outline-none transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus',
+          'group block h-full w-full cursor-pointer p-panel-compact text-left outline-none transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus',
           SURFACE_CLASS,
         )}
         aria-label="Configure custom provider"
         onClick={onConfigure}
       >
-        <div className="flex min-w-0 items-center justify-between gap-12">
+        <div className="flex min-w-0 items-center justify-between gap-cluster">
           <Text size="md" bold className="min-w-0 truncate">
             Custom
           </Text>
-          <div className="flex shrink-0 items-center gap-4 text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
+          <div className="flex shrink-0 items-center gap-tight text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
             <Text size="sm">Configure</Text>
             <Icon name="chevronRight" className="size-16" />
           </div>

package/src/components/available-provider-card.tsx

@@ -18,17 +18,17 @@ export function AvailableProviderCard({
       <button
         type="button"
         className={cn(
-          'group block w-full cursor-pointer p-16 text-left outline-none transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus',
+          'group block w-full cursor-pointer p-panel-compact text-left outline-none transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus',
           SURFACE_CLASS,
         )}
         aria-label={`Configure ${entry.label}`}
         onClick={onConfigure}
       >
-        <div className="flex min-w-0 items-center justify-between gap-12">
+        <div className="flex min-w-0 items-center justify-between gap-cluster">
           <Text size="md" bold className="min-w-0 truncate">
             {entry.label}
           </Text>
-          <div className="flex shrink-0 items-center gap-4 text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
+          <div className="flex shrink-0 items-center gap-tight text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
             <Text size="sm">Configure</Text>
             <Icon name="chevronRight" className="size-16" />
           </div>

package/src/components/available-providers-grid.tsx

@@ -8,7 +8,7 @@ import type {SupportedProvider} from '#core/models.js';
 import {providerMatchesSearch} from '#core/provider-policy.js';
 import {AvailableProviderCard} from './available-provider-card.js';
 
-export const PROVIDER_GRID_CLASS = 'grid grid-cols-2 gap-12 max-[760px]:grid-cols-1';
+export const PROVIDER_GRID_CLASS = 'grid grid-cols-2 gap-cluster max-[760px]:grid-cols-1';
 
 const SEARCH_VISIBILITY_THRESHOLD = 8;
 const MAX_ECHOED_QUERY_LENGTH = 40;
@@ -45,7 +45,7 @@ export function AvailableProvidersGrid<TEntry extends SupportedProvider>({
   }
 
   return (
-    <div className="flex flex-col gap-12">
+    <div className="flex flex-col gap-cluster">
       {showSearch ? (
         <Input
           ref={inputRef}

package/src/components/change-default-model-form.tsx

@@ -49,10 +49,10 @@ export function ChangeDefaultModelForm({
 
   return (
     <>
-      <ModalBody className="gap-16">
+      <ModalBody className="gap-group">
         <form
           id={CHANGE_DEFAULT_MODEL_FORM_ID}
-          className="flex w-full flex-col gap-14"
+          className="flex w-full flex-col gap-cluster"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();
@@ -80,7 +80,7 @@ export function ChangeDefaultModelForm({
         </form>
         {formError ? (
           <Callout role="alert" type="error">
-            <div className="flex flex-col gap-8">
+            <div className="flex flex-col gap-inline">
               <Text size="sm" bold>
                 Could not save default model
               </Text>

package/src/components/custom-model-provider-form.tsx

@@ -151,10 +151,10 @@ export function CustomModelProviderForm({
 
   return (
     <>
-      <ModalBody className="min-h-0 flex-1 gap-0 overflow-y-auto overflow-x-clip scrollbar">
+      <ModalBody className="min-h-0 flex-1 gap-group overflow-y-auto overflow-x-clip scrollbar">
         <form
           id={CUSTOM_MODEL_PROVIDER_FORM_ID}
-          className="flex w-full flex-col gap-24"
+          className="flex w-full flex-col gap-section"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();
@@ -166,7 +166,7 @@ export function CustomModelProviderForm({
             {(values) => (
               <>
                 <FormGroup title="Provider">
-                  <div className="grid grid-cols-2 gap-12 max-[640px]:grid-cols-1">
+                  <div className="grid grid-cols-2 gap-cluster max-[640px]:grid-cols-1">
                     <form.Field
                       name="display_name"
                       validators={{
@@ -234,7 +234,7 @@ export function CustomModelProviderForm({
                     </form.Field>
                   </div>
 
-                  <div className="grid grid-cols-2 gap-12 max-[640px]:grid-cols-1">
+                  <div className="grid grid-cols-2 gap-cluster max-[640px]:grid-cols-1">
                     <form.Field name="api">
                       {(field) => (
                         <FormField label="Protocol" id="custom-provider-api">
@@ -320,7 +320,7 @@ export function CustomModelProviderForm({
                 </FormGroup>
 
                 <FormGroup title="Models">
-                  <div className="flex flex-wrap items-center justify-between gap-8">
+                  <div className="flex flex-wrap items-center justify-between gap-inline">
                     <Button
                       type="button"
                       size="sm"
@@ -417,8 +417,8 @@ export function CustomModelProviderForm({
           </form.Subscribe>
         </form>
         {formError ? (
-          <Callout role="alert" type="error" className="mt-16">
-            <div className="flex flex-col gap-8">
+          <Callout role="alert" type="error">
+            <div className="flex flex-col gap-inline">
               <Text size="sm" bold>
                 Could not save provider
               </Text>
@@ -441,7 +441,7 @@ export function CustomModelProviderForm({
 
 function FormGroup({title, children}: {title: string; children: ReactNode}) {
   return (
-    <section className="flex flex-col gap-16 border-t border-border-neutral-base pt-16 first:border-t-0 first:pt-0">
+    <section className="flex flex-col gap-group border-t border-border-neutral-base pt-[16px] first:border-t-0 first:pt-0">
       <Text size="xs" className="font-medium uppercase text-foreground-neutral-muted">
         {title}
       </Text>
@@ -460,11 +460,11 @@ function HeaderRows({
   const addButtonRef = useRef<HTMLButtonElement>(null);
 
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-inline">
       {rows.map((row, index) => (
         <div
           key={row.client_id}
-          className="grid grid-cols-[1fr_1fr_auto_auto] items-end gap-x-8 gap-y-4 max-[760px]:grid-cols-1"
+          className="grid grid-cols-[1fr_1fr_auto_auto] items-end gap-x-inline gap-y-tight max-[760px]:grid-cols-1"
         >
           <FormField label="Name" id={`custom-header-name-${row.client_id}`}>
             <FormFieldInput
@@ -485,7 +485,7 @@ function HeaderRows({
               }
             />
           </FormField>
-          <div className="flex h-32 items-center gap-8 text-sm text-foreground-neutral-muted">
+          <div className="flex h-32 items-center gap-inline text-sm text-foreground-neutral-muted">
             <Switch
               size="sm"
               aria-label={`Mark header ${index + 1} as secret`}
@@ -553,10 +553,13 @@ function ModelRows({
   const addButtonRef = useRef<HTMLButtonElement>(null);
 
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-inline">
       {rows.map((row, index) => (
-        <div key={row.client_id} className="rounded-8 border border-border-neutral-base p-12">
-          <div className="grid grid-cols-[1fr_1fr_auto] items-end gap-8 max-[760px]:grid-cols-1">
+        <div
+          key={row.client_id}
+          className="flex flex-col gap-inline rounded-8 border border-border-neutral-base p-panel-compact"
+        >
+          <div className="grid grid-cols-[1fr_1fr_auto] items-end gap-inline max-[760px]:grid-cols-1">
             <FormField label="Model id" id={`custom-model-id-${row.client_id}`}>
               <FormFieldInput
                 className="font-code"
@@ -574,7 +577,7 @@ function ModelRows({
                 }
               />
             </FormField>
-            <div className="flex items-center gap-8">
+            <div className="flex items-center gap-inline">
               {defaultModel && row.id === defaultModel ? (
                 <Badge variant="neutral">Default</Badge>
               ) : null}
@@ -596,14 +599,14 @@ function ModelRows({
               />
             </div>
           </div>
-          <Collapsible>
+          <Collapsible className="flex flex-col">
             <CollapsibleTrigger asChild>
-              <Button type="button" size="sm" variant="transparentMuted" className="mt-8">
+              <Button type="button" size="sm" variant="transparentMuted">
                 Defaults: 128k context, 16k output, text-only
               </Button>
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <div className="mt-8 grid grid-cols-2 gap-8 max-[640px]:grid-cols-1">
+              <div className="grid grid-cols-2 gap-inline pt-[8px] max-[640px]:grid-cols-1">
                 <FormField label="Context window" id={`custom-model-context-${row.client_id}`}>
                   <FormFieldInput
                     type="number"
@@ -631,7 +634,7 @@ function ModelRows({
                     }
                   />
                 </FormField>
-                <div className="flex h-32 items-center gap-8 text-sm text-foreground-neutral-muted">
+                <div className="flex h-32 items-center gap-inline text-sm text-foreground-neutral-muted">
                   <Switch
                     size="sm"
                     aria-label={`Enable image input for model ${index + 1}`}
@@ -642,7 +645,7 @@ function ModelRows({
                   />
                   Image input
                 </div>
-                <div className="flex h-32 items-center gap-8 text-sm text-foreground-neutral-muted">
+                <div className="flex h-32 items-center gap-inline text-sm text-foreground-neutral-muted">
                   <Switch
                     size="sm"
                     aria-label={`Enable reasoning for model ${index + 1}`}

package/src/components/default-model-field.tsx

@@ -73,7 +73,7 @@ export function FormFieldSelect({className, ...props}: ComponentProps<'select'>)
   return (
     <select
       className={cn(
-        'w-full min-w-0 rounded-6 bg-background-field-base px-8 py-6 text-sm leading-20 text-foreground-neutral-base shadow-button-neutral outline-none transition-[color,box-shadow]',
+        'w-full min-w-0 rounded-6 bg-background-field-base px-tight py-[6px] text-sm leading-20 text-foreground-neutral-base shadow-button-neutral outline-none transition-[color,box-shadow]',
         'hover:bg-background-field-hover focus-visible:shadow-border-interactive-with-active disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled',
         'aria-invalid:shadow-border-error',
         className,

package/src/components/harnesses-section.tsx

@@ -84,8 +84,8 @@ export function WorkspaceHarnessesSection({workspaceId}: {workspaceId: string})
   }
 
   return (
-    <section className="flex flex-col gap-16" aria-label="Harnesses">
-      <div className="flex flex-col gap-4">
+    <section className="flex flex-col gap-group" aria-label="Harnesses">
+      <div className="flex flex-col gap-tight">
         <Header variant="h3">Harnesses</Header>
         <Text size="sm" className="text-foreground-neutral-muted">
           Harnesses available to run agent steps in this workspace.
@@ -95,7 +95,7 @@ export function WorkspaceHarnessesSection({workspaceId}: {workspaceId: string})
       {configsQuery.isPending ? <HarnessRowsSkeleton /> : null}
 
       {configsQuery.isError && configsQuery.data === undefined ? (
-        <div className={cn(SURFACE_CLASS, 'px-16')}>
+        <div className={cn(SURFACE_CLASS, 'px-row')}>
           <QueryLoadError query={configsQuery} subject="harnesses" />
         </div>
       ) : null}
@@ -141,9 +141,9 @@ function HarnessRow({
   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">
+    <li className="flex flex-col gap-inline px-row py-row transition-colors hover:bg-background-components-hover">
+      <div className="flex items-center justify-between gap-cluster">
+        <div className="flex min-w-0 items-center gap-inline">
           {isDefault ? (
             <>
               <Tooltip>
@@ -230,7 +230,7 @@ function HarnessRowsSkeleton() {
       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">
+        <li key={row} className="flex items-center gap-cluster px-row py-row">
           <Skeleton className="size-16 shrink-0" />
           <Skeleton className="h-16 w-120" />
           <Skeleton className="ml-auto size-28 shrink-0" />

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

@@ -109,7 +109,7 @@ export function ModelProviderUsageModal({
           {target ? `Use ${target.label} in a workflow` : 'Use provider in a workflow'}
         </ModalTitle>
         <ModalHeader>
-          <div className="flex min-w-0 flex-col gap-2">
+          <div className="flex min-w-0 flex-col gap-tight">
             <Text size="lg" aria-hidden="true" className="truncate">
               {target ? `Use ${target.label} in a workflow` : 'Use provider in a workflow'}
             </Text>
@@ -121,10 +121,10 @@ export function ModelProviderUsageModal({
         {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">
+              <div className="flex w-full flex-col gap-section">
                 {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">
+                  <div className="flex flex-col gap-cluster">
+                    <div className="flex min-h-40 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base px-row py-row">
                       <Text size="sm" className="text-foreground-neutral-muted">
                         Harness
                       </Text>
@@ -146,7 +146,7 @@ export function ModelProviderUsageModal({
                     />
                   </div>
                 ) : (
-                  <div className="flex flex-col gap-12 sm:flex-row sm:gap-12">
+                  <div className="flex flex-col gap-cluster sm:flex-row sm:gap-cluster">
                     <Combobox
                       aria-label="Harness"
                       options={harnessOptions}
@@ -174,7 +174,7 @@ export function ModelProviderUsageModal({
                   </div>
                 )}
 
-                <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-inline">
                   <CodeBlock data={data} className="h-auto min-h-0 rounded-8">
                     <CodeBlockHeader>
                       <CodeBlockFiles>
@@ -210,7 +210,7 @@ export function ModelProviderUsageModal({
                   </Text>
                 </div>
 
-                <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-inline">
                   <Text size="sm" bold>
                     Available models ({target.models.length})
                   </Text>
@@ -286,7 +286,7 @@ function ModelProviderModelRow({label, id}: {label: string; id: string}) {
           <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"
+            className="flex min-h-40 w-full min-w-0 flex-col items-start gap-tight px-row py-row 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-inline"
             onClick={() => {
               void handleCopy();
             }}

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

@@ -113,14 +113,14 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
   }, [configs, modal, providerById]);
 
   return (
-    <div className="flex min-w-0 flex-col gap-32">
+    <div className="flex min-w-0 flex-col gap-region">
       <section
         ref={configuredProvidersRegionRef}
-        className="flex flex-col gap-16 outline-none"
+        className="flex flex-col gap-group outline-none"
         aria-label="Configured providers"
         tabIndex={-1}
       >
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-tight">
           <Header variant="h3">Configured providers</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             Workspace credentials available to agent steps.
@@ -132,13 +132,13 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
         ) : null}
 
         {configsQuery.isError && configsQuery.data === undefined ? (
-          <div className={cn(SURFACE_CLASS, 'px-16')}>
+          <div className={cn(SURFACE_CLASS, 'px-row')}>
             <QueryLoadError query={configsQuery} subject="model provider configs" />
           </div>
         ) : null}
 
         {configsQuery.data !== undefined && configs.length === 0 ? (
-          <div className={cn(SURFACE_CLASS, 'px-16')}>
+          <div className={cn(SURFACE_CLASS, 'px-row')}>
             <EmptyState
               icon="key2Line"
               title="No providers configured"
@@ -203,8 +203,8 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
         ) : null}
       </section>
 
-      <section className="flex flex-col gap-16" aria-label="Available providers">
-        <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-group" aria-label="Available providers">
+        <div className="flex flex-col gap-tight">
           <Header variant="h3">Available providers</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             Providers that can be configured for agent steps in this workspace.
@@ -214,7 +214,7 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
         {catalogQuery.isPending || configsQuery.isPending ? <ModelProviderGridSkeleton /> : null}
 
         {catalogQuery.isError && catalogQuery.data === undefined ? (
-          <div className={cn(SURFACE_CLASS, 'px-16')}>
+          <div className={cn(SURFACE_CLASS, 'px-row')}>
             <QueryLoadError query={catalogQuery} subject="model provider catalog" />
           </div>
         ) : null}
@@ -231,8 +231,8 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
         ) : null}
       </section>
 
-      <section className="flex flex-col gap-16" aria-label="Unsupported providers">
-        <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-group" aria-label="Unsupported providers">
+        <div className="flex flex-col gap-tight">
           <Header variant="h3">Unsupported providers</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             Providers that cannot be configured in this workspace yet.
@@ -246,13 +246,13 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
         {unsupportedProviders.length > 0 ? (
           <ul className={cn('divide-y divide-border-neutral-base', SURFACE_CLASS)}>
             {unsupportedProviders.map((entry) => (
-              <li key={entry.id} className="flex items-start gap-12 px-16 py-12 opacity-70">
+              <li key={entry.id} className="flex items-start gap-cluster px-row py-row opacity-70">
                 <Icon
                   name="forbid2Line"
-                  className="mt-2 size-18 shrink-0 text-foreground-neutral-muted"
+                  className="mt-[2px] size-18 shrink-0 text-foreground-neutral-muted"
                   aria-hidden
                 />
-                <div className="flex min-w-0 flex-1 flex-col gap-2">
+                <div className="flex min-w-0 flex-1 flex-col gap-tight">
                   <Text size="md" bold className="truncate">
                     {entry.label}
                   </Text>
@@ -357,7 +357,7 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
         >
           <ModalTitle className="sr-only">{customModelProviderFormTitle(modal)}</ModalTitle>
           <ModalHeader>
-            <div className="flex min-w-0 flex-col gap-2">
+            <div className="flex min-w-0 flex-col gap-tight">
               <Text size="lg" aria-hidden="true" className="truncate">
                 {customModelProviderFormTitle(modal)}
               </Text>
@@ -468,9 +468,9 @@ function ConfiguredProviderRow({
   }
 
   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">
+    <li className="flex flex-col gap-inline px-row py-row transition-colors hover:bg-background-components-hover">
+      <div className="flex items-center justify-between gap-cluster">
+        <div className="flex min-w-0 items-center gap-inline">
           {isDefault ? (
             <>
               <Tooltip>
@@ -576,7 +576,7 @@ function DeleteModelProviderDialog({
       <ModalContent aria-describedby={undefined} className="max-w-[420px]">
         <ModalTitle className="sr-only">Delete model provider</ModalTitle>
         <ModalHeader title="Delete model provider" />
-        <ModalBody className="gap-16">
+        <ModalBody className="gap-group">
           <Text size="sm" className="text-foreground-neutral-muted">
             Delete {label} credentials from this workspace? Agent jobs cannot use this provider
             until it is configured again.
@@ -608,9 +608,9 @@ function ModelProviderRowsSkeleton({label}: {label: string}) {
       className={cn('divide-y divide-border-neutral-base', SURFACE_CLASS)}
     >
       {[0, 1, 2].map((row) => (
-        <li key={row} className="flex items-center gap-12 px-16 py-12">
+        <li key={row} className="flex items-center gap-cluster px-row py-row">
           <Skeleton className="size-32 shrink-0" />
-          <div className="flex min-w-0 flex-1 flex-col gap-6">
+          <div className="flex min-w-0 flex-1 flex-col gap-inline">
             <Skeleton className="h-16 w-120" />
             <Skeleton className="h-14 w-180" />
           </div>

package/src/components/test-and-save-form.tsx

@@ -68,10 +68,10 @@ export function ModelProviderTestAndSaveForm({
 
   return (
     <>
-      <ModalBody className="gap-16">
+      <ModalBody className="gap-group">
         <form
           id={MODEL_PROVIDER_TEST_AND_SAVE_FORM_ID}
-          className="flex w-full flex-col gap-14"
+          className="flex w-full flex-col gap-cluster"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();
@@ -129,7 +129,7 @@ export function ModelProviderTestAndSaveForm({
         </form>
         {formError ? (
           <Callout role="alert" type="error">
-            <div className="flex flex-col gap-8">
+            <div className="flex flex-col gap-inline">
               <Text size="sm" bold>
                 Could not save provider
               </Text>

package/src/pages/model-provider-onboarding-page.tsx

@@ -104,9 +104,9 @@ export function ModelProviderOnboardingPage({
       : 'model-provider-provider-step';
 
   return (
-    <div className="mx-auto flex w-full max-w-[640px] flex-col gap-20">
-      <header className="flex flex-col gap-12">
-        <div className="flex items-start justify-between gap-16 max-[520px]:flex-col max-[520px]:gap-8">
+    <div className="mx-auto flex w-full max-w-[640px] flex-col gap-section">
+      <header className="flex flex-col gap-cluster">
+        <div className="flex items-start justify-between gap-group max-[520px]:flex-col max-[520px]:gap-inline">
           <Header id={headingId} variant="h1" tabIndex={-1} className="outline-none">
             {selectedHarnessDescriptor
               ? `Configure ${selectedHarnessDescriptor.label}`
@@ -123,7 +123,7 @@ export function ModelProviderOnboardingPage({
         </Text>
       </header>
 
-      <section aria-labelledby={headingId} className="flex flex-col gap-16">
+      <section aria-labelledby={headingId} className="flex flex-col gap-group">
         {onboarding.step === 'choose-harness' ? (
           <HarnessPicker
             onSelect={(harnessId) => dispatch({type: 'harness-selected', harnessId})}
@@ -174,36 +174,40 @@ export function ModelProviderOnboardingPage({
                 : ''}
             </Text>
           </ModalHeader>
-          {onboarding.step === 'saving-default-harness' ? (
-            <div role="status" className="px-20 pb-8">
-              <Text size="sm" className="text-foreground-neutral-muted">
-                Saving harness default...
-              </Text>
-            </div>
-          ) : null}
-          {onboarding.step === 'saving-default-harness' && onboarding.error ? (
-            <div className="px-20 pb-8">
-              <Callout role="alert" type="error">
-                <div className="flex flex-col gap-8">
-                  <Text size="sm" bold>
-                    Could not save default harness
+          {onboarding.step === 'configure-provider' ||
+          onboarding.step === 'saving-default-harness' ? (
+            <div className="flex min-h-0 flex-1 flex-col gap-inline">
+              {onboarding.step === 'saving-default-harness' ? (
+                <div role="status" className="px-row">
+                  <Text size="sm" className="text-foreground-neutral-muted">
+                    Saving harness default...
                   </Text>
-                  <Text size="sm">{onboarding.error}</Text>
                 </div>
-              </Callout>
+              ) : null}
+              {onboarding.step === 'saving-default-harness' && onboarding.error ? (
+                <div className="px-row">
+                  <Callout role="alert" type="error">
+                    <div className="flex flex-col gap-inline">
+                      <Text size="sm" bold>
+                        Could not save default harness
+                      </Text>
+                      <Text size="sm">{onboarding.error}</Text>
+                    </div>
+                  </Callout>
+                </div>
+              ) : null}
+              <div className="flex min-h-0 flex-1 flex-col">
+                <ModelProviderTestAndSaveForm
+                  workspaceId={workspaceId}
+                  entry={onboarding.provider}
+                  setAsDefaultOnSave
+                  onSaved={() => {
+                    void handleProviderSaved();
+                  }}
+                />
+              </div>
             </div>
           ) : null}
-          {onboarding.step === 'configure-provider' ||
-          onboarding.step === 'saving-default-harness' ? (
-            <ModelProviderTestAndSaveForm
-              workspaceId={workspaceId}
-              entry={onboarding.provider}
-              setAsDefaultOnSave
-              onSaved={() => {
-                void handleProviderSaved();
-              }}
-            />
-          ) : null}
         </ModalContent>
       </Modal>
     </div>
@@ -226,14 +230,14 @@ function HarnessCard({harness, onChoose}: {harness: HarnessDescriptor; onChoose:
       <button
         type="button"
         className={cn(
-          'group block w-full cursor-pointer p-16 text-left outline-none transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus',
+          'group block w-full cursor-pointer p-panel-compact text-left outline-none transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus',
           SURFACE_CLASS,
         )}
         aria-label={`Choose ${harness.label}`}
         onClick={onChoose}
       >
-        <div className="flex min-w-0 items-center justify-between gap-12">
-          <div className="flex min-w-0 flex-col gap-4">
+        <div className="flex min-w-0 items-center justify-between gap-cluster">
+          <div className="flex min-w-0 flex-col gap-tight">
             <Text size="md" bold className="min-w-0 truncate">
               {harness.label}
             </Text>
@@ -241,7 +245,7 @@ function HarnessCard({harness, onChoose}: {harness: HarnessDescriptor; onChoose:
               {harness.description}
             </Text>
           </div>
-          <div className="flex shrink-0 items-center gap-4 text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
+          <div className="flex shrink-0 items-center gap-tight text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
             <Text size="sm">Choose</Text>
             <Icon name="chevronRight" className="size-16" />
           </div>

package/src/routes/agents-settings.tsx

@@ -5,7 +5,7 @@ export default defineRoute({
   component: () => {
     const workspace = useActiveWorkspace();
     return (
-      <div className="flex flex-col gap-32">
+      <div className="flex flex-col gap-region">
         <WorkspaceHarnessesSection workspaceId={workspace.id} />
         <WorkspaceModelProvidersSection workspaceId={workspace.id} />
       </div>