@shipfox/client-agent 21.0.0 → 22.0.0

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

@@ -17,11 +17,11 @@ import {
   ModalHeader,
   ModalTitle,
 } from '@shipfox/react-ui/modal';
+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 {useEffect, useMemo, useReducer, useRef, useState} from 'react';
 import {
   type ManagementModal,
@@ -46,10 +46,11 @@ import {
   useSetDefaultModelProviderMutation,
 } from '#hooks/api/model-providers.js';
 import {AddCustomProviderCard} from './add-custom-provider-card.js';
-import {AvailableProvidersGrid, PROVIDER_GRID_CLASS} from './available-providers-grid.js';
+import {AvailableProvidersGrid} from './available-providers-grid.js';
 import {ChangeDefaultModelForm} from './change-default-model-form.js';
 import {CustomModelProviderForm} from './custom-model-provider-form.js';
 import {modelProviderConfigErrorToFormError} from './form-errors.js';
+import {ModelProviderGridSkeleton} from './model-provider-grid-skeleton.js';
 import {ModelProviderUsageModal} from './model-provider-usage-modal.js';
 import {
   type ModelProviderUsageTarget,
@@ -58,9 +59,6 @@ import {
 } from './model-provider-usage-target.js';
 import {ModelProviderTestAndSaveForm} from './test-and-save-form.js';
 
-const SURFACE_CLASS =
-  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
-
 type UsageTarget = {
   target: ModelProviderUsageTarget;
   initialModel: string | null;
@@ -132,74 +130,83 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
         ) : null}
 
         {configsQuery.isError && configsQuery.data === undefined ? (
-          <div className={cn(SURFACE_CLASS, 'px-row')}>
-            <QueryLoadError query={configsQuery} subject="model provider configs" />
-          </div>
+          <Panel>
+            <QueryLoadError query={configsQuery} subject="model provider configs" variant="panel" />
+          </Panel>
         ) : null}
 
         {configsQuery.data !== undefined && configs.length === 0 ? (
-          <div className={cn(SURFACE_CLASS, 'px-row')}>
+          <Panel>
             <EmptyState
               icon="key2Line"
               title="No providers configured"
               description="Configure a provider below to run agent steps with workspace-managed credentials."
+              variant="panel"
             />
-          </div>
+          </Panel>
         ) : null}
 
         {configs.length > 0 ? (
-          <ul className={cn('divide-y divide-border-neutral-base', SURFACE_CLASS)}>
-            {configs.map((config) => {
-              const catalogEntry = providerById.get(config.providerId);
-              const entry =
-                catalogEntry && isSupportedProvider(catalogEntry) ? catalogEntry : undefined;
-              const builtinConfig = isBuiltinModelProviderConfig(config) ? config : undefined;
-              const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
-              return (
-                <ConfiguredProviderRow
-                  key={config.providerId}
-                  workspaceId={workspaceId}
-                  config={config}
-                  entry={entry}
-                  isDefault={config.providerId === defaultProviderId}
-                  onEdit={() => {
-                    if (entry && builtinConfig) {
-                      dispatchModal({type: 'edit-builtin', provider: entry, config: builtinConfig});
-                    } else if (customConfig) {
-                      dispatchModal({type: 'edit-custom', config: customConfig});
-                    }
-                  }}
-                  onChangeDefaultModel={() => {
-                    if (entry && builtinConfig)
-                      dispatchModal({
-                        type: 'change-default-model',
-                        provider: entry,
-                        config: builtinConfig,
-                      });
-                  }}
-                  onShowUsage={() => {
-                    if (entry && builtinConfig) {
-                      setPendingUsageTarget(null);
-                      dispatchModal({
-                        type: 'show-usage',
-                        providerId: entry.id,
-                        initialModel: builtinConfig.defaultModel,
-                        restoreFocusToConfiguredProviders: false,
-                      });
-                    } else if (customConfig) {
-                      setPendingUsageTarget(null);
-                      dispatchModal({
-                        type: 'show-usage',
-                        providerId: customConfig.providerId,
-                        initialModel: customConfig.defaultModel,
-                        restoreFocusToConfiguredProviders: false,
-                      });
-                    }
-                  }}
-                />
-              );
-            })}
-          </ul>
+          <Panel>
+            <PanelBody asChild>
+              <ul>
+                {configs.map((config) => {
+                  const catalogEntry = providerById.get(config.providerId);
+                  const entry =
+                    catalogEntry && isSupportedProvider(catalogEntry) ? catalogEntry : undefined;
+                  const builtinConfig = isBuiltinModelProviderConfig(config) ? config : undefined;
+                  const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
+                  return (
+                    <ConfiguredProviderRow
+                      key={config.providerId}
+                      workspaceId={workspaceId}
+                      config={config}
+                      entry={entry}
+                      isDefault={config.providerId === defaultProviderId}
+                      onEdit={() => {
+                        if (entry && builtinConfig) {
+                          dispatchModal({
+                            type: 'edit-builtin',
+                            provider: entry,
+                            config: builtinConfig,
+                          });
+                        } else if (customConfig) {
+                          dispatchModal({type: 'edit-custom', config: customConfig});
+                        }
+                      }}
+                      onChangeDefaultModel={() => {
+                        if (entry && builtinConfig)
+                          dispatchModal({
+                            type: 'change-default-model',
+                            provider: entry,
+                            config: builtinConfig,
+                          });
+                      }}
+                      onShowUsage={() => {
+                        if (entry && builtinConfig) {
+                          setPendingUsageTarget(null);
+                          dispatchModal({
+                            type: 'show-usage',
+                            providerId: entry.id,
+                            initialModel: builtinConfig.defaultModel,
+                            restoreFocusToConfiguredProviders: false,
+                          });
+                        } else if (customConfig) {
+                          setPendingUsageTarget(null);
+                          dispatchModal({
+                            type: 'show-usage',
+                            providerId: customConfig.providerId,
+                            initialModel: customConfig.defaultModel,
+                            restoreFocusToConfiguredProviders: false,
+                          });
+                        }
+                      }}
+                    />
+                  );
+                })}
+              </ul>
+            </PanelBody>
+          </Panel>
         ) : null}
       </section>
 
@@ -211,12 +218,14 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
           </Text>
         </div>
 
-        {catalogQuery.isPending || configsQuery.isPending ? <ModelProviderGridSkeleton /> : null}
+        {catalogQuery.isPending || configsQuery.isPending ? (
+          <ModelProviderGridSkeleton label="Loading available providers" />
+        ) : null}
 
         {catalogQuery.isError && catalogQuery.data === undefined ? (
-          <div className={cn(SURFACE_CLASS, 'px-row')}>
-            <QueryLoadError query={catalogQuery} subject="model provider catalog" />
-          </div>
+          <Panel>
+            <QueryLoadError query={catalogQuery} subject="model provider catalog" variant="panel" />
+          </Panel>
         ) : null}
 
         {configsLoaded ? (
@@ -244,25 +253,35 @@ export function WorkspaceModelProvidersSection({workspaceId}: {workspaceId: stri
         ) : null}
 
         {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-cluster px-row py-row opacity-70">
-                <Icon
-                  name="forbid2Line"
-                  className="mt-[2px] size-18 shrink-0 text-foreground-neutral-muted"
-                  aria-hidden
-                />
-                <div className="flex min-w-0 flex-1 flex-col gap-tight">
-                  <Text size="md" bold className="truncate">
-                    {entry.label}
-                  </Text>
-                  <Text size="sm" className="text-foreground-neutral-muted">
-                    {entry.unsupportedReason}
-                  </Text>
-                </div>
-              </li>
-            ))}
-          </ul>
+          <Panel>
+            <PanelBody asChild>
+              <ul>
+                {unsupportedProviders.map((entry) => (
+                  <PanelRow
+                    asChild
+                    className="items-start justify-start gap-cluster opacity-70 hover:bg-background-neutral-base"
+                    key={entry.id}
+                  >
+                    <li>
+                      <Icon
+                        name="forbid2Line"
+                        className="mt-[2px] size-18 shrink-0 text-foreground-neutral-muted"
+                        aria-hidden
+                      />
+                      <div className="flex min-w-0 flex-1 flex-col gap-tight">
+                        <Text size="md" bold className="truncate">
+                          {entry.label}
+                        </Text>
+                        <Text size="sm" className="text-foreground-neutral-muted">
+                          {entry.unsupportedReason}
+                        </Text>
+                      </div>
+                    </li>
+                  </PanelRow>
+                ))}
+              </ul>
+            </PanelBody>
+          </Panel>
         ) : null}
       </section>
 
@@ -468,91 +487,93 @@ function ConfiguredProviderRow({
   }
 
   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 provider</TooltipContent>
-              </Tooltip>
-              <span className="sr-only">Default provider</span>
-            </>
-          ) : null}
-          <Text size="md" bold className="truncate">
-            {label}
-          </Text>
-        </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <IconButton
-              size="sm"
-              variant="transparent"
-              icon="more2Line"
-              aria-label={`Open ${label} provider actions`}
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {!isDefault ? (
+    <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 provider</TooltipContent>
+                </Tooltip>
+                <span className="sr-only">Default provider</span>
+              </>
+            ) : null}
+            <Text size="md" bold className="truncate">
+              {label}
+            </Text>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton
+                size="sm"
+                variant="transparent"
+                icon="more2Line"
+                aria-label={`Open ${label} provider actions`}
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {!isDefault ? (
+                <DropdownMenuItem
+                  icon="starLine"
+                  disabled={setDefault.isPending || (!entry && !customConfig)}
+                  onSelect={() => {
+                    void handleSetDefault();
+                  }}
+                >
+                  Set as default
+                </DropdownMenuItem>
+              ) : null}
+              {isBuiltinConfig ? (
+                <DropdownMenuItem
+                  icon="settings3Line"
+                  disabled={!entry}
+                  onSelect={onChangeDefaultModel}
+                >
+                  Change default model
+                </DropdownMenuItem>
+              ) : null}
+              <DropdownMenuItem icon="bookOpenLine" disabled={!canUse} onSelect={onShowUsage}>
+                View workflow example
+              </DropdownMenuItem>
+              <DropdownMenuItem icon="editLine" disabled={!canEdit} onSelect={onEdit}>
+                {customConfig ? 'Edit' : 'Edit credentials'}
+              </DropdownMenuItem>
               <DropdownMenuItem
-                icon="starLine"
-                disabled={setDefault.isPending || (!entry && !customConfig)}
+                icon="deleteBinLine"
                 onSelect={() => {
-                  void handleSetDefault();
+                  setDeleteOpen(true);
                 }}
               >
-                Set as default
-              </DropdownMenuItem>
-            ) : null}
-            {isBuiltinConfig ? (
-              <DropdownMenuItem
-                icon="settings3Line"
-                disabled={!entry}
-                onSelect={onChangeDefaultModel}
-              >
-                Change default model
+                Delete
               </DropdownMenuItem>
-            ) : null}
-            <DropdownMenuItem icon="bookOpenLine" disabled={!canUse} onSelect={onShowUsage}>
-              View workflow example
-            </DropdownMenuItem>
-            <DropdownMenuItem icon="editLine" disabled={!canEdit} onSelect={onEdit}>
-              {customConfig ? 'Edit' : 'Edit credentials'}
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              icon="deleteBinLine"
-              onSelect={() => {
-                setDeleteOpen(true);
-              }}
-            >
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      {defaultError ? (
-        <Callout role="alert" type="error">
-          <Text size="sm">{defaultError}</Text>
-        </Callout>
-      ) : null}
-      <DeleteModelProviderDialog
-        open={deleteOpen}
-        onOpenChange={handleDeleteOpenChange}
-        label={label}
-        errorMessage={deleteError}
-        isLoading={deleteConfig.isPending}
-        onDelete={handleDelete}
-      />
-    </li>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        {defaultError ? (
+          <Callout role="alert" type="error">
+            <Text size="sm">{defaultError}</Text>
+          </Callout>
+        ) : null}
+        <DeleteModelProviderDialog
+          open={deleteOpen}
+          onOpenChange={handleDeleteOpenChange}
+          label={label}
+          errorMessage={deleteError}
+          isLoading={deleteConfig.isPending}
+          onDelete={handleDelete}
+        />
+      </li>
+    </PanelRow>
   );
 }
 
@@ -602,31 +623,27 @@ function DeleteModelProviderDialog({
 
 function ModelProviderRowsSkeleton({label}: {label: string}) {
   return (
-    <ul
-      role="status"
-      aria-label={label}
-      className={cn('divide-y divide-border-neutral-base', SURFACE_CLASS)}
-    >
-      {[0, 1, 2].map((row) => (
-        <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-inline">
-            <Skeleton className="h-16 w-120" />
-            <Skeleton className="h-14 w-180" />
-          </div>
-          <Skeleton className="h-28 w-96 shrink-0" />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function ModelProviderGridSkeleton() {
-  return (
-    <div role="status" aria-label="Loading available providers" className={PROVIDER_GRID_CLASS}>
-      {[0, 1, 2, 3].map((card) => (
-        <Skeleton key={card} className="h-136 w-full" />
-      ))}
-    </div>
+    <Panel>
+      <PanelBody asChild>
+        <ul role="status" aria-label={label}>
+          {[0, 1, 2].map((row) => (
+            <PanelRow
+              asChild
+              className="justify-start gap-cluster hover:bg-background-neutral-base"
+              key={row}
+            >
+              <li>
+                <Skeleton className="size-32 shrink-0" />
+                <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>
+                <Skeleton className="h-28 w-96 shrink-0" />
+              </li>
+            </PanelRow>
+          ))}
+        </ul>
+      </PanelBody>
+    </Panel>
   );
 }

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

@@ -2,15 +2,14 @@ import {QueryLoadError} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
-import {Icon} from '@shipfox/react-ui/icon';
 import {Modal, ModalContent, ModalHeader, ModalTitle} from '@shipfox/react-ui/modal';
-import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {Panel, PanelBody, PanelCell, PanelCellAction, PanelGrid} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
-import {cn} from '@shipfox/react-ui/utils';
 import {useEffect, useMemo, useReducer} from 'react';
-import {AvailableProvidersGrid, PROVIDER_GRID_CLASS} from '#components/available-providers-grid.js';
+import {AvailableProvidersGrid} from '#components/available-providers-grid.js';
 import {modelProviderConfigErrorToFormError} from '#components/form-errors.js';
+import {ModelProviderGridSkeleton} from '#components/model-provider-grid-skeleton.js';
 import {ModelProviderTestAndSaveForm} from '#components/test-and-save-form.js';
 import {DEFAULT_HARNESS, harnessSupportsProvider, listHarnesses} from '#core/harness-policy.js';
 import type {HarnessDescriptor, HarnessId, SupportedProvider} from '#core/models.js';
@@ -22,9 +21,6 @@ import {
 } from '#hooks/api/model-providers.js';
 import {dismissModelProviderOnboarding} from '#state/model-provider-onboarding.js';
 
-const SURFACE_CLASS =
-  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
-
 export function ModelProviderOnboardingPage({
   workspaceId,
   onSkip,
@@ -104,7 +100,7 @@ export function ModelProviderOnboardingPage({
       : 'model-provider-provider-step';
 
   return (
-    <div className="mx-auto flex w-full flex-col gap-section">
+    <div className="flex w-full 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">
@@ -216,42 +212,32 @@ export function ModelProviderOnboardingPage({
 
 function HarnessPicker({onSelect}: {onSelect: (harness: HarnessId) => void}) {
   return (
-    <ul className={PROVIDER_GRID_CLASS} aria-label="Agent harnesses">
-      {listHarnesses().map((harness) => (
-        <HarnessCard key={harness.id} harness={harness} onChoose={() => onSelect(harness.id)} />
-      ))}
-    </ul>
+    <Panel>
+      <PanelBody>
+        <PanelGrid aria-label="Agent harnesses">
+          {listHarnesses().map((harness) => (
+            <HarnessCard key={harness.id} harness={harness} onChoose={() => onSelect(harness.id)} />
+          ))}
+        </PanelGrid>
+      </PanelBody>
+    </Panel>
   );
 }
 
 function HarnessCard({harness, onChoose}: {harness: HarnessDescriptor; onChoose: () => 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,
-        )}
-        aria-label={`Choose ${harness.label}`}
-        onClick={onChoose}
-      >
-        <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>
-            <Text size="sm" className="text-foreground-neutral-muted">
-              {harness.description}
-            </Text>
-          </div>
-          <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>
-        </div>
-      </button>
-    </li>
+    <PanelCell>
+      <PanelCellAction action="Choose" aria-label={`Choose ${harness.label}`} onClick={onChoose}>
+        <span className="flex min-w-0 flex-col gap-tight">
+          <Text as="span" size="md" bold className="min-w-0 truncate">
+            {harness.label}
+          </Text>
+          <Text as="span" size="sm" className="text-foreground-neutral-muted">
+            {harness.description}
+          </Text>
+        </span>
+      </PanelCellAction>
+    </PanelCell>
   );
 }
 
@@ -265,11 +251,7 @@ function ModelProviderPicker({
   onSelect: (entry: SupportedProvider) => void;
 }) {
   if (catalogQuery.isPending) {
-    return (
-      <div role="status" aria-busy="true" aria-label="Loading model providers">
-        <ModelProviderGridSkeleton />
-      </div>
-    );
+    return <ModelProviderGridSkeleton label="Loading model providers" />;
   }
 
   if (catalogQuery.isError && catalogQuery.data === undefined) {
@@ -288,13 +270,3 @@ function ModelProviderPicker({
 
   return <AvailableProvidersGrid entries={supportedProviders} onSelect={onSelect} />;
 }
-
-function ModelProviderGridSkeleton() {
-  return (
-    <div className={PROVIDER_GRID_CLASS}>
-      {[0, 1, 2, 3].map((card) => (
-        <Skeleton key={card} className="h-136 w-full" />
-      ))}
-    </div>
-  );
-}