@shipfox/client-agent 17.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-agent",
   "license": "MIT",
-  "version": "17.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -30,9 +30,9 @@
     "@tanstack/react-query": "^5.101.0",
     "@shipfox/api-agent-dto": "12.2.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "17.0.0",
-    "@shipfox/client-ui": "17.0.0",
-    "@shipfox/react-ui": "1.2.0"
+    "@shipfox/client-shell": "22.0.0",
+    "@shipfox/client-ui": "22.0.0",
+    "@shipfox/react-ui": "2.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

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

@@ -1,32 +1,18 @@
-import {Icon} from '@shipfox/react-ui/icon';
+import {PanelCell, PanelCellAction} from '@shipfox/react-ui/panel';
 import {Text} from '@shipfox/react-ui/typography';
-import {cn} from '@shipfox/react-ui/utils';
-
-const SURFACE_CLASS =
-  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
 
 export function AddCustomProviderCard({onConfigure}: {onConfigure: () => void}) {
   return (
-    <li>
-      <button
-        type="button"
-        className={cn(
-          '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,
-        )}
+    <PanelCell>
+      <PanelCellAction
+        action="Configure"
         aria-label="Configure custom provider"
         onClick={onConfigure}
       >
-        <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-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>
-        </div>
-      </button>
-    </li>
+        <Text as="span" size="md" bold className="min-w-0 truncate">
+          Custom
+        </Text>
+      </PanelCellAction>
+    </PanelCell>
   );
 }

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

@@ -1,11 +1,7 @@
-import {Icon} from '@shipfox/react-ui/icon';
+import {PanelCell, PanelCellAction} from '@shipfox/react-ui/panel';
 import {Text} from '@shipfox/react-ui/typography';
-import {cn} from '@shipfox/react-ui/utils';
 import type {SupportedProvider} from '#core/models.js';
 
-const SURFACE_CLASS =
-  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
-
 export function AvailableProviderCard({
   entry,
   onConfigure,
@@ -14,26 +10,16 @@ export function AvailableProviderCard({
   onConfigure: () => void;
 }) {
   return (
-    <li>
-      <button
-        type="button"
-        className={cn(
-          '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,
-        )}
+    <PanelCell>
+      <PanelCellAction
+        action="Configure"
         aria-label={`Configure ${entry.label}`}
         onClick={onConfigure}
       >
-        <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-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>
-        </div>
-      </button>
-    </li>
+        <Text as="span" size="md" bold className="min-w-0 truncate">
+          {entry.label}
+        </Text>
+      </PanelCellAction>
+    </PanelCell>
   );
 }

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

@@ -2,14 +2,13 @@ import {Button} from '@shipfox/react-ui/button';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Icon} from '@shipfox/react-ui/icon';
 import {Input} from '@shipfox/react-ui/input';
+import {Panel, PanelBody, PanelGrid, PanelHeader} from '@shipfox/react-ui/panel';
 import type {ReactNode} from 'react';
 import {useMemo, useRef, useState} from 'react';
 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-cluster max-[760px]:grid-cols-1';
-
 const SEARCH_VISIBILITY_THRESHOLD = 8;
 const MAX_ECHOED_QUERY_LENGTH = 40;
 
@@ -45,38 +44,46 @@ export function AvailableProvidersGrid<TEntry extends SupportedProvider>({
   }
 
   return (
-    <div className="flex flex-col gap-cluster">
-      {showSearch ? (
-        <Input
-          ref={inputRef}
-          type="search"
-          aria-label="Search providers"
-          placeholder="Search providers..."
-          value={search}
-          iconLeft={<Icon name="searchLine" className="size-16 text-foreground-neutral-muted" />}
-          onChange={(event) => setSearch(event.target.value)}
-        />
-      ) : null}
-
-      {visibleCount > 0 ? (
-        <ul className={PROVIDER_GRID_CLASS} aria-label={providerListLabel}>
-          {filteredEntries.map((entry) => (
-            <AvailableProviderCard
-              key={entry.id}
-              entry={entry}
-              onConfigure={() => onSelect(entry)}
+    <>
+      <Panel>
+        {showSearch ? (
+          <PanelHeader>
+            <Input
+              ref={inputRef}
+              type="search"
+              aria-label="Search providers"
+              placeholder="Search providers..."
+              value={search}
+              iconLeft={
+                <Icon name="searchLine" className="size-16 text-foreground-neutral-muted" />
+              }
+              onChange={(event) => setSearch(event.target.value)}
             />
-          ))}
-          {trailingCardVisible ? trailingCard : null}
-        </ul>
-      ) : (
-        <NoProviderSearchResults search={trimmedSearch} onClear={clearSearch} />
-      )}
+          </PanelHeader>
+        ) : null}
+
+        <PanelBody>
+          {visibleCount > 0 ? (
+            <PanelGrid aria-label={providerListLabel}>
+              {filteredEntries.map((entry) => (
+                <AvailableProviderCard
+                  key={entry.id}
+                  entry={entry}
+                  onConfigure={() => onSelect(entry)}
+                />
+              ))}
+              {trailingCardVisible ? trailingCard : null}
+            </PanelGrid>
+          ) : (
+            <NoProviderSearchResults search={trimmedSearch} onClear={clearSearch} />
+          )}
+        </PanelBody>
+      </Panel>
 
       <p role="status" aria-live="polite" className="sr-only">
         {resultCountText}
       </p>
-    </div>
+    </>
   );
 }
 

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

@@ -23,7 +23,7 @@ function CustomModelProviderFormStory({mode}: CustomModelProviderFormStoryProps)
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="min-h-screen bg-background-neutral-background p-24">
+      <div className="min-h-screen bg-background-subtle-base p-24">
         <Modal open={open} onOpenChange={setOpen}>
           <ModalContent
             className="max-h-[min(760px,calc(100vh-32px))]"

package/src/components/harnesses-section.stories.tsx

@@ -33,7 +33,7 @@ function HarnessesStory({scenario}: HarnessesStoryProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="mx-auto w-full max-w-[760px] bg-background-neutral-background p-24">
+      <div className="mx-auto w-full max-w-[760px] bg-background-subtle-base p-24">
         <WorkspaceHarnessesSection workspaceId={WORKSPACE_ID} />
       </div>
       <Toaster />

package/src/components/harnesses-section.tsx

@@ -8,11 +8,11 @@ import {
   DropdownMenuTrigger,
 } from '@shipfox/react-ui/dropdown-menu';
 import {Icon} from '@shipfox/react-ui/icon';
+import {Panel, PanelBody, PanelRow} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {toast} from '@shipfox/react-ui/toast';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Header, Text} from '@shipfox/react-ui/typography';
-import {cn} from '@shipfox/react-ui/utils';
 import {useRef, useState} from 'react';
 import {DEFAULT_HARNESS, listHarnesses} from '#core/harness-policy.js';
 import type {HarnessDescriptor, HarnessId} from '#core/models.js';
@@ -23,9 +23,6 @@ import {
 import {modelProviderConfigErrorToFormError} from './form-errors.js';
 import {isHarnessAvailable} from './harness-availability.js';
 
-const SURFACE_CLASS =
-  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
-
 export function WorkspaceHarnessesSection({workspaceId}: {workspaceId: string}) {
   const configsQuery = useModelProviderConfigsQuery(workspaceId);
   const setDefaultHarness = useSetDefaultHarnessMutation();
@@ -95,29 +92,34 @@ export function WorkspaceHarnessesSection({workspaceId}: {workspaceId: string})
       {configsQuery.isPending ? <HarnessRowsSkeleton /> : null}
 
       {configsQuery.isError && configsQuery.data === undefined ? (
-        <div className={cn(SURFACE_CLASS, 'px-row')}>
-          <QueryLoadError query={configsQuery} subject="harnesses" />
-        </div>
+        <Panel>
+          <QueryLoadError query={configsQuery} subject="harnesses" variant="panel" />
+        </Panel>
       ) : null}
 
       {configsQuery.data !== undefined ? (
-        <ul className={cn('divide-y divide-border-neutral-base', SURFACE_CLASS)}>
-          {listHarnesses().map((harness) => (
-            <HarnessRow
-              key={harness.id}
-              harness={harness}
-              isDefault={harness.id === defaultHarnessId}
-              isAvailable={isHarnessAvailable(harness, configs)}
-              isSettingDefault={pendingDefaultHarness?.workspaceId === workspaceId}
-              defaultError={
-                defaultError?.workspaceId === workspaceId && defaultError.harnessId === harness.id
-                  ? defaultError.message
-                  : undefined
-              }
-              onSetDefault={handleSetDefault}
-            />
-          ))}
-        </ul>
+        <Panel>
+          <PanelBody asChild>
+            <ul>
+              {listHarnesses().map((harness) => (
+                <HarnessRow
+                  key={harness.id}
+                  harness={harness}
+                  isDefault={harness.id === defaultHarnessId}
+                  isAvailable={isHarnessAvailable(harness, configs)}
+                  isSettingDefault={pendingDefaultHarness?.workspaceId === workspaceId}
+                  defaultError={
+                    defaultError?.workspaceId === workspaceId &&
+                    defaultError.harnessId === harness.id
+                      ? defaultError.message
+                      : undefined
+                  }
+                  onSetDefault={handleSetDefault}
+                />
+              ))}
+            </ul>
+          </PanelBody>
+        </Panel>
       ) : null}
     </section>
   );
@@ -141,78 +143,80 @@ function HarnessRow({
   const unavailableCopy = harnessUnavailableCopy(isDefault);
 
   return (
-    <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>
-                <TooltipTrigger asChild>
-                  <span className="inline-flex size-16 shrink-0 items-center justify-center">
-                    <Icon
-                      name="starLine"
-                      className="size-16 text-foreground-neutral-muted"
-                      aria-hidden
-                    />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>Default harness</TooltipContent>
-              </Tooltip>
-              <span className="sr-only">Default harness</span>
-            </>
-          ) : null}
-          <Text size="md" bold className="truncate">
-            {harness.label}
-          </Text>
-          {!isAvailable ? (
-            <>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="inline-flex size-16 shrink-0 items-center justify-center">
-                    <Icon
-                      name="errorWarningLine"
-                      className="size-16 text-foreground-warning-base"
-                      aria-hidden
-                    />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>{unavailableCopy}</TooltipContent>
-              </Tooltip>
-              <span className="sr-only">{unavailableCopy}</span>
-            </>
+    <PanelRow asChild className="flex-col items-stretch gap-inline">
+      <li>
+        <div className="flex items-center justify-between gap-cluster">
+          <div className="flex min-w-0 items-center gap-inline">
+            {isDefault ? (
+              <>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="inline-flex size-16 shrink-0 items-center justify-center">
+                      <Icon
+                        name="starLine"
+                        className="size-16 text-foreground-neutral-muted"
+                        aria-hidden
+                      />
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>Default harness</TooltipContent>
+                </Tooltip>
+                <span className="sr-only">Default harness</span>
+              </>
+            ) : null}
+            <Text size="md" bold className="truncate">
+              {harness.label}
+            </Text>
+            {!isAvailable ? (
+              <>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="inline-flex size-16 shrink-0 items-center justify-center">
+                      <Icon
+                        name="errorWarningLine"
+                        className="size-16 text-foreground-warning-base"
+                        aria-hidden
+                      />
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>{unavailableCopy}</TooltipContent>
+                </Tooltip>
+                <span className="sr-only">{unavailableCopy}</span>
+              </>
+            ) : null}
+          </div>
+          {!isDefault ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <IconButton
+                  size="sm"
+                  variant="transparent"
+                  icon="more2Line"
+                  disabled={isSettingDefault}
+                  aria-label={`Open ${harness.label} harness actions`}
+                />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  icon="starLine"
+                  disabled={isSettingDefault || !isAvailable}
+                  onSelect={() => {
+                    onSetDefault(harness);
+                  }}
+                >
+                  Set as default
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           ) : null}
         </div>
-        {!isDefault ? (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <IconButton
-                size="sm"
-                variant="transparent"
-                icon="more2Line"
-                disabled={isSettingDefault}
-                aria-label={`Open ${harness.label} harness actions`}
-              />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                icon="starLine"
-                disabled={isSettingDefault || !isAvailable}
-                onSelect={() => {
-                  onSetDefault(harness);
-                }}
-              >
-                Set as default
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+        {defaultError ? (
+          <Callout role="alert" type="error">
+            <Text size="sm">{defaultError}</Text>
+          </Callout>
         ) : null}
-      </div>
-      {defaultError ? (
-        <Callout role="alert" type="error">
-          <Text size="sm">{defaultError}</Text>
-        </Callout>
-      ) : null}
-    </li>
+      </li>
+    </PanelRow>
   );
 }
 
@@ -224,18 +228,24 @@ function harnessUnavailableCopy(isDefault: boolean): string {
 
 function HarnessRowsSkeleton() {
   return (
-    <ul
-      role="status"
-      aria-label="Loading harnesses"
-      className={cn('divide-y divide-border-neutral-base', SURFACE_CLASS)}
-    >
-      {[0, 1].map((row) => (
-        <li key={row} className="flex items-center gap-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" />
-        </li>
-      ))}
-    </ul>
+    <Panel>
+      <PanelBody asChild>
+        <ul role="status" aria-label="Loading harnesses">
+          {[0, 1].map((row) => (
+            <PanelRow
+              asChild
+              className="justify-start gap-cluster hover:bg-background-neutral-base"
+              key={row}
+            >
+              <li>
+                <Skeleton className="size-16 shrink-0" />
+                <Skeleton className="h-16 w-120" />
+                <Skeleton className="ml-auto size-28 shrink-0" />
+              </li>
+            </PanelRow>
+          ))}
+        </ul>
+      </PanelBody>
+    </Panel>
   );
 }

package/src/components/model-provider-grid-skeleton.tsx

@@ -0,0 +1,21 @@
+import {Panel, PanelBody, PanelCell, PanelGrid} from '@shipfox/react-ui/panel';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+
+export function ModelProviderGridSkeleton({label}: {label: string}) {
+  return (
+    <Panel>
+      <PanelBody>
+        <PanelGrid role="status" aria-busy="true" aria-label={label}>
+          {[0, 1, 2, 3].map((tile) => (
+            <PanelCell key={tile}>
+              <div className="flex items-center justify-between gap-cluster px-row py-row">
+                <Skeleton className="h-16 w-100" />
+                <Skeleton className="h-16 w-64 shrink-0" />
+              </div>
+            </PanelCell>
+          ))}
+        </PanelGrid>
+      </PanelBody>
+    </Panel>
+  );
+}

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

@@ -20,7 +20,7 @@ function ModelProviderUsageModalStory({variant}: ModelProviderUsageModalStoryPro
       : usageTargetFromCatalogEntry(entry);
 
   return (
-    <div className="min-h-screen bg-background-neutral-background p-24">
+    <div className="min-h-screen bg-background-subtle-base p-24">
       <ModelProviderUsageModal
         target={target}
         initialModel={target.defaultModel}

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

@@ -118,7 +118,7 @@ function ModelProvidersStory({scenario}: ModelProvidersStoryProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="mx-auto w-full max-w-[760px] bg-background-neutral-background p-24">
+      <div className="mx-auto w-full max-w-[760px] bg-background-subtle-base p-24">
         <WorkspaceModelProvidersSection workspaceId={WORKSPACE_ID} />
       </div>
       <Toaster />