@shipfox/client-agent 21.0.0 → 22.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +16 -0
  3. package/dist/components/add-custom-provider-card.d.ts.map +1 -1
  4. package/dist/components/add-custom-provider-card.js +11 -31
  5. package/dist/components/add-custom-provider-card.js.map +1 -1
  6. package/dist/components/available-provider-card.d.ts.map +1 -1
  7. package/dist/components/available-provider-card.js +11 -31
  8. package/dist/components/available-provider-card.js.map +1 -1
  9. package/dist/components/available-providers-grid.d.ts +0 -1
  10. package/dist/components/available-providers-grid.d.ts.map +1 -1
  11. package/dist/components/available-providers-grid.js +33 -27
  12. package/dist/components/available-providers-grid.js.map +1 -1
  13. package/dist/components/harnesses-section.d.ts.map +1 -1
  14. package/dist/components/harnesses-section.js +147 -134
  15. package/dist/components/harnesses-section.js.map +1 -1
  16. package/dist/components/model-provider-grid-skeleton.d.ts +4 -0
  17. package/dist/components/model-provider-grid-skeleton.d.ts.map +1 -0
  18. package/dist/components/model-provider-grid-skeleton.js +34 -0
  19. package/dist/components/model-provider-grid-skeleton.js.map +1 -0
  20. package/dist/components/model-providers-section.d.ts.map +1 -1
  21. package/dist/components/model-providers-section.js +253 -245
  22. package/dist/components/model-providers-section.js.map +1 -1
  23. package/dist/pages/model-provider-onboarding-page.d.ts.map +1 -1
  24. package/dist/pages/model-provider-onboarding-page.js +32 -64
  25. package/dist/pages/model-provider-onboarding-page.js.map +1 -1
  26. package/dist/tsconfig.test.tsbuildinfo +1 -1
  27. package/package.json +4 -4
  28. package/src/components/add-custom-provider-card.tsx +9 -23
  29. package/src/components/available-provider-card.tsx +9 -23
  30. package/src/components/available-providers-grid.tsx +36 -29
  31. package/src/components/harnesses-section.tsx +116 -106
  32. package/src/components/model-provider-grid-skeleton.tsx +21 -0
  33. package/src/components/model-providers-section.tsx +208 -191
  34. package/src/pages/model-provider-onboarding-page.tsx +26 -54
  35. package/tsconfig.build.tsbuildinfo +1 -1
package/dist/components/model-providers-section.js CHANGED
@@ -6,24 +6,24 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
6
6
  import { EmptyState } from '@shipfox/react-ui/empty-state';
7
7
  import { Icon } from '@shipfox/react-ui/icon';
8
8
  import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalTitle } from '@shipfox/react-ui/modal';
9
+ import { Panel, PanelBody, PanelRow } from '@shipfox/react-ui/panel';
9
10
  import { Skeleton } from '@shipfox/react-ui/skeleton';
10
11
  import { toast } from '@shipfox/react-ui/toast';
11
12
  import { Tooltip, TooltipContent, TooltipTrigger } from '@shipfox/react-ui/tooltip';
12
13
  import { Header, Text } from '@shipfox/react-ui/typography';
13
- import { cn } from '@shipfox/react-ui/utils';
14
14
  import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
15
15
  import { managementModalReducer } from '#core/model-provider-management-reducer.js';
16
16
  import { customProviderCardMatchesSearch, isSupportedProvider, availableProviders as selectAvailableProviders } from '#core/provider-policy.js';
17
17
  import { useDeleteModelProviderConfigMutation, useModelProviderCatalogQuery, useModelProviderConfigsQuery, useSetDefaultModelProviderMutation } from '#hooks/api/model-providers.js';
18
18
  import { AddCustomProviderCard } from './add-custom-provider-card.js';
19
- import { AvailableProvidersGrid, PROVIDER_GRID_CLASS } from './available-providers-grid.js';
19
+ import { AvailableProvidersGrid } from './available-providers-grid.js';
20
20
  import { ChangeDefaultModelForm } from './change-default-model-form.js';
21
21
  import { CustomModelProviderForm } from './custom-model-provider-form.js';
22
22
  import { modelProviderConfigErrorToFormError } from './form-errors.js';
23
+ import { ModelProviderGridSkeleton } from './model-provider-grid-skeleton.js';
23
24
  import { ModelProviderUsageModal } from './model-provider-usage-modal.js';
24
25
  import { usageTargetFromCatalogEntry, usageTargetFromCustomConfig } from './model-provider-usage-target.js';
25
26
  import { ModelProviderTestAndSaveForm } from './test-and-save-form.js';
26
- const SURFACE_CLASS = 'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
27
27
  const USAGE_MODAL_OPEN_DELAY_MS = 250;
28
28
  export function WorkspaceModelProvidersSection({ workspaceId }) {
29
29
  const catalogQuery = useModelProviderCatalogQuery();
@@ -98,74 +98,78 @@ export function WorkspaceModelProvidersSection({ workspaceId }) {
98
98
  configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
99
99
  label: "Loading configured providers"
100
100
  }) : null,
101
- configsQuery.isError && configsQuery.data === undefined ? /*#__PURE__*/ _jsx("div", {
102
- className: cn(SURFACE_CLASS, 'px-row'),
101
+ configsQuery.isError && configsQuery.data === undefined ? /*#__PURE__*/ _jsx(Panel, {
103
102
  children: /*#__PURE__*/ _jsx(QueryLoadError, {
104
103
  query: configsQuery,
105
- subject: "model provider configs"
104
+ subject: "model provider configs",
105
+ variant: "panel"
106
106
  })
107
107
  }) : null,
108
- configsQuery.data !== undefined && configs.length === 0 ? /*#__PURE__*/ _jsx("div", {
109
- className: cn(SURFACE_CLASS, 'px-row'),
108
+ configsQuery.data !== undefined && configs.length === 0 ? /*#__PURE__*/ _jsx(Panel, {
110
109
  children: /*#__PURE__*/ _jsx(EmptyState, {
111
110
  icon: "key2Line",
112
111
  title: "No providers configured",
113
- description: "Configure a provider below to run agent steps with workspace-managed credentials."
112
+ description: "Configure a provider below to run agent steps with workspace-managed credentials.",
113
+ variant: "panel"
114
114
  })
115
115
  }) : null,
116
- configs.length > 0 ? /*#__PURE__*/ _jsx("ul", {
117
- className: cn('divide-y divide-border-neutral-base', SURFACE_CLASS),
118
- children: configs.map((config)=>{
119
- const catalogEntry = providerById.get(config.providerId);
120
- const entry = catalogEntry && isSupportedProvider(catalogEntry) ? catalogEntry : undefined;
121
- const builtinConfig = isBuiltinModelProviderConfig(config) ? config : undefined;
122
- const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
123
- return /*#__PURE__*/ _jsx(ConfiguredProviderRow, {
124
- workspaceId: workspaceId,
125
- config: config,
126
- entry: entry,
127
- isDefault: config.providerId === defaultProviderId,
128
- onEdit: ()=>{
129
- if (entry && builtinConfig) {
130
- dispatchModal({
131
- type: 'edit-builtin',
132
- provider: entry,
133
- config: builtinConfig
134
- });
135
- } else if (customConfig) {
136
- dispatchModal({
137
- type: 'edit-custom',
138
- config: customConfig
139
- });
140
- }
141
- },
142
- onChangeDefaultModel: ()=>{
143
- if (entry && builtinConfig) dispatchModal({
144
- type: 'change-default-model',
145
- provider: entry,
146
- config: builtinConfig
147
- });
148
- },
149
- onShowUsage: ()=>{
150
- if (entry && builtinConfig) {
151
- setPendingUsageTarget(null);
152
- dispatchModal({
153
- type: 'show-usage',
154
- providerId: entry.id,
155
- initialModel: builtinConfig.defaultModel,
156
- restoreFocusToConfiguredProviders: false
157
- });
158
- } else if (customConfig) {
159
- setPendingUsageTarget(null);
160
- dispatchModal({
161
- type: 'show-usage',
162
- providerId: customConfig.providerId,
163
- initialModel: customConfig.defaultModel,
164
- restoreFocusToConfiguredProviders: false
165
- });
166
- }
167
- }
168
- }, config.providerId);
116
+ configs.length > 0 ? /*#__PURE__*/ _jsx(Panel, {
117
+ children: /*#__PURE__*/ _jsx(PanelBody, {
118
+ asChild: true,
119
+ children: /*#__PURE__*/ _jsx("ul", {
120
+ children: configs.map((config)=>{
121
+ const catalogEntry = providerById.get(config.providerId);
122
+ const entry = catalogEntry && isSupportedProvider(catalogEntry) ? catalogEntry : undefined;
123
+ const builtinConfig = isBuiltinModelProviderConfig(config) ? config : undefined;
124
+ const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
125
+ return /*#__PURE__*/ _jsx(ConfiguredProviderRow, {
126
+ workspaceId: workspaceId,
127
+ config: config,
128
+ entry: entry,
129
+ isDefault: config.providerId === defaultProviderId,
130
+ onEdit: ()=>{
131
+ if (entry && builtinConfig) {
132
+ dispatchModal({
133
+ type: 'edit-builtin',
134
+ provider: entry,
135
+ config: builtinConfig
136
+ });
137
+ } else if (customConfig) {
138
+ dispatchModal({
139
+ type: 'edit-custom',
140
+ config: customConfig
141
+ });
142
+ }
143
+ },
144
+ onChangeDefaultModel: ()=>{
145
+ if (entry && builtinConfig) dispatchModal({
146
+ type: 'change-default-model',
147
+ provider: entry,
148
+ config: builtinConfig
149
+ });
150
+ },
151
+ onShowUsage: ()=>{
152
+ if (entry && builtinConfig) {
153
+ setPendingUsageTarget(null);
154
+ dispatchModal({
155
+ type: 'show-usage',
156
+ providerId: entry.id,
157
+ initialModel: builtinConfig.defaultModel,
158
+ restoreFocusToConfiguredProviders: false
159
+ });
160
+ } else if (customConfig) {
161
+ setPendingUsageTarget(null);
162
+ dispatchModal({
163
+ type: 'show-usage',
164
+ providerId: customConfig.providerId,
165
+ initialModel: customConfig.defaultModel,
166
+ restoreFocusToConfiguredProviders: false
167
+ });
168
+ }
169
+ }
170
+ }, config.providerId);
171
+ })
172
+ })
169
173
  })
170
174
  }) : null
171
175
  ]
@@ -188,12 +192,14 @@ export function WorkspaceModelProvidersSection({ workspaceId }) {
188
192
  })
189
193
  ]
190
194
  }),
191
- catalogQuery.isPending || configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderGridSkeleton, {}) : null,
192
- catalogQuery.isError && catalogQuery.data === undefined ? /*#__PURE__*/ _jsx("div", {
193
- className: cn(SURFACE_CLASS, 'px-row'),
195
+ catalogQuery.isPending || configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderGridSkeleton, {
196
+ label: "Loading available providers"
197
+ }) : null,
198
+ catalogQuery.isError && catalogQuery.data === undefined ? /*#__PURE__*/ _jsx(Panel, {
194
199
  children: /*#__PURE__*/ _jsx(QueryLoadError, {
195
200
  query: catalogQuery,
196
- subject: "model provider catalog"
201
+ subject: "model provider catalog",
202
+ variant: "panel"
197
203
  })
198
204
  }) : null,
199
205
  configsLoaded ? /*#__PURE__*/ _jsx(AvailableProvidersGrid, {
@@ -232,34 +238,41 @@ export function WorkspaceModelProvidersSection({ workspaceId }) {
232
238
  catalogQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
233
239
  label: "Loading unsupported providers"
234
240
  }) : null,
235
- unsupportedProviders.length > 0 ? /*#__PURE__*/ _jsx("ul", {
236
- className: cn('divide-y divide-border-neutral-base', SURFACE_CLASS),
237
- children: unsupportedProviders.map((entry)=>/*#__PURE__*/ _jsxs("li", {
238
- className: "flex items-start gap-cluster px-row py-row opacity-70",
239
- children: [
240
- /*#__PURE__*/ _jsx(Icon, {
241
- name: "forbid2Line",
242
- className: "mt-[2px] size-18 shrink-0 text-foreground-neutral-muted",
243
- "aria-hidden": true
244
- }),
245
- /*#__PURE__*/ _jsxs("div", {
246
- className: "flex min-w-0 flex-1 flex-col gap-tight",
247
- children: [
248
- /*#__PURE__*/ _jsx(Text, {
249
- size: "md",
250
- bold: true,
251
- className: "truncate",
252
- children: entry.label
253
- }),
254
- /*#__PURE__*/ _jsx(Text, {
255
- size: "sm",
256
- className: "text-foreground-neutral-muted",
257
- children: entry.unsupportedReason
258
- })
259
- ]
260
- })
261
- ]
262
- }, entry.id))
241
+ unsupportedProviders.length > 0 ? /*#__PURE__*/ _jsx(Panel, {
242
+ children: /*#__PURE__*/ _jsx(PanelBody, {
243
+ asChild: true,
244
+ children: /*#__PURE__*/ _jsx("ul", {
245
+ children: unsupportedProviders.map((entry)=>/*#__PURE__*/ _jsx(PanelRow, {
246
+ asChild: true,
247
+ className: "items-start justify-start gap-cluster opacity-70 hover:bg-background-neutral-base",
248
+ children: /*#__PURE__*/ _jsxs("li", {
249
+ children: [
250
+ /*#__PURE__*/ _jsx(Icon, {
251
+ name: "forbid2Line",
252
+ className: "mt-[2px] size-18 shrink-0 text-foreground-neutral-muted",
253
+ "aria-hidden": true
254
+ }),
255
+ /*#__PURE__*/ _jsxs("div", {
256
+ className: "flex min-w-0 flex-1 flex-col gap-tight",
257
+ children: [
258
+ /*#__PURE__*/ _jsx(Text, {
259
+ size: "md",
260
+ bold: true,
261
+ className: "truncate",
262
+ children: entry.label
263
+ }),
264
+ /*#__PURE__*/ _jsx(Text, {
265
+ size: "sm",
266
+ className: "text-foreground-neutral-muted",
267
+ children: entry.unsupportedReason
268
+ })
269
+ ]
270
+ })
271
+ ]
272
+ })
273
+ }, entry.id))
274
+ })
275
+ })
263
276
  }) : null
264
277
  ]
265
278
  }),
@@ -461,119 +474,122 @@ function ConfiguredProviderRow({ workspaceId, config, entry, isDefault, onEdit,
461
474
  deleteConfig.reset();
462
475
  }
463
476
  }
464
- return /*#__PURE__*/ _jsxs("li", {
465
- className: "flex flex-col gap-inline px-row py-row transition-colors hover:bg-background-components-hover",
466
- children: [
467
- /*#__PURE__*/ _jsxs("div", {
468
- className: "flex items-center justify-between gap-cluster",
469
- children: [
470
- /*#__PURE__*/ _jsxs("div", {
471
- className: "flex min-w-0 items-center gap-inline",
472
- children: [
473
- isDefault ? /*#__PURE__*/ _jsxs(_Fragment, {
474
- children: [
475
- /*#__PURE__*/ _jsxs(Tooltip, {
476
- children: [
477
- /*#__PURE__*/ _jsx(TooltipTrigger, {
478
- asChild: true,
479
- children: /*#__PURE__*/ _jsx("span", {
480
- className: "inline-flex size-16 shrink-0 items-center justify-center",
481
- children: /*#__PURE__*/ _jsx(Icon, {
482
- name: "starLine",
483
- className: "size-16 text-foreground-neutral-muted",
484
- "aria-hidden": true
477
+ return /*#__PURE__*/ _jsx(PanelRow, {
478
+ asChild: true,
479
+ className: "flex-col items-stretch gap-inline",
480
+ children: /*#__PURE__*/ _jsxs("li", {
481
+ children: [
482
+ /*#__PURE__*/ _jsxs("div", {
483
+ className: "flex items-center justify-between gap-cluster",
484
+ children: [
485
+ /*#__PURE__*/ _jsxs("div", {
486
+ className: "flex min-w-0 items-center gap-inline",
487
+ children: [
488
+ isDefault ? /*#__PURE__*/ _jsxs(_Fragment, {
489
+ children: [
490
+ /*#__PURE__*/ _jsxs(Tooltip, {
491
+ children: [
492
+ /*#__PURE__*/ _jsx(TooltipTrigger, {
493
+ asChild: true,
494
+ children: /*#__PURE__*/ _jsx("span", {
495
+ className: "inline-flex size-16 shrink-0 items-center justify-center",
496
+ children: /*#__PURE__*/ _jsx(Icon, {
497
+ name: "starLine",
498
+ className: "size-16 text-foreground-neutral-muted",
499
+ "aria-hidden": true
500
+ })
485
501
  })
502
+ }),
503
+ /*#__PURE__*/ _jsx(TooltipContent, {
504
+ children: "Default provider"
486
505
  })
487
- }),
488
- /*#__PURE__*/ _jsx(TooltipContent, {
489
- children: "Default provider"
490
- })
491
- ]
492
- }),
493
- /*#__PURE__*/ _jsx("span", {
494
- className: "sr-only",
495
- children: "Default provider"
496
- })
497
- ]
498
- }) : null,
499
- /*#__PURE__*/ _jsx(Text, {
500
- size: "md",
501
- bold: true,
502
- className: "truncate",
503
- children: label
504
- })
505
- ]
506
- }),
507
- /*#__PURE__*/ _jsxs(DropdownMenu, {
508
- children: [
509
- /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
510
- asChild: true,
511
- children: /*#__PURE__*/ _jsx(IconButton, {
512
- size: "sm",
513
- variant: "transparent",
514
- icon: "more2Line",
515
- "aria-label": `Open ${label} provider actions`
506
+ ]
507
+ }),
508
+ /*#__PURE__*/ _jsx("span", {
509
+ className: "sr-only",
510
+ children: "Default provider"
511
+ })
512
+ ]
513
+ }) : null,
514
+ /*#__PURE__*/ _jsx(Text, {
515
+ size: "md",
516
+ bold: true,
517
+ className: "truncate",
518
+ children: label
516
519
  })
517
- }),
518
- /*#__PURE__*/ _jsxs(DropdownMenuContent, {
519
- align: "end",
520
- children: [
521
- !isDefault ? /*#__PURE__*/ _jsx(DropdownMenuItem, {
522
- icon: "starLine",
523
- disabled: setDefault.isPending || !entry && !customConfig,
524
- onSelect: ()=>{
525
- void handleSetDefault();
526
- },
527
- children: "Set as default"
528
- }) : null,
529
- isBuiltinConfig ? /*#__PURE__*/ _jsx(DropdownMenuItem, {
530
- icon: "settings3Line",
531
- disabled: !entry,
532
- onSelect: onChangeDefaultModel,
533
- children: "Change default model"
534
- }) : null,
535
- /*#__PURE__*/ _jsx(DropdownMenuItem, {
536
- icon: "bookOpenLine",
537
- disabled: !canUse,
538
- onSelect: onShowUsage,
539
- children: "View workflow example"
540
- }),
541
- /*#__PURE__*/ _jsx(DropdownMenuItem, {
542
- icon: "editLine",
543
- disabled: !canEdit,
544
- onSelect: onEdit,
545
- children: customConfig ? 'Edit' : 'Edit credentials'
546
- }),
547
- /*#__PURE__*/ _jsx(DropdownMenuItem, {
548
- icon: "deleteBinLine",
549
- onSelect: ()=>{
550
- setDeleteOpen(true);
551
- },
552
- children: "Delete"
520
+ ]
521
+ }),
522
+ /*#__PURE__*/ _jsxs(DropdownMenu, {
523
+ children: [
524
+ /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
525
+ asChild: true,
526
+ children: /*#__PURE__*/ _jsx(IconButton, {
527
+ size: "sm",
528
+ variant: "transparent",
529
+ icon: "more2Line",
530
+ "aria-label": `Open ${label} provider actions`
553
531
  })
554
- ]
555
- })
556
- ]
532
+ }),
533
+ /*#__PURE__*/ _jsxs(DropdownMenuContent, {
534
+ align: "end",
535
+ children: [
536
+ !isDefault ? /*#__PURE__*/ _jsx(DropdownMenuItem, {
537
+ icon: "starLine",
538
+ disabled: setDefault.isPending || !entry && !customConfig,
539
+ onSelect: ()=>{
540
+ void handleSetDefault();
541
+ },
542
+ children: "Set as default"
543
+ }) : null,
544
+ isBuiltinConfig ? /*#__PURE__*/ _jsx(DropdownMenuItem, {
545
+ icon: "settings3Line",
546
+ disabled: !entry,
547
+ onSelect: onChangeDefaultModel,
548
+ children: "Change default model"
549
+ }) : null,
550
+ /*#__PURE__*/ _jsx(DropdownMenuItem, {
551
+ icon: "bookOpenLine",
552
+ disabled: !canUse,
553
+ onSelect: onShowUsage,
554
+ children: "View workflow example"
555
+ }),
556
+ /*#__PURE__*/ _jsx(DropdownMenuItem, {
557
+ icon: "editLine",
558
+ disabled: !canEdit,
559
+ onSelect: onEdit,
560
+ children: customConfig ? 'Edit' : 'Edit credentials'
561
+ }),
562
+ /*#__PURE__*/ _jsx(DropdownMenuItem, {
563
+ icon: "deleteBinLine",
564
+ onSelect: ()=>{
565
+ setDeleteOpen(true);
566
+ },
567
+ children: "Delete"
568
+ })
569
+ ]
570
+ })
571
+ ]
572
+ })
573
+ ]
574
+ }),
575
+ defaultError ? /*#__PURE__*/ _jsx(Callout, {
576
+ role: "alert",
577
+ type: "error",
578
+ children: /*#__PURE__*/ _jsx(Text, {
579
+ size: "sm",
580
+ children: defaultError
557
581
  })
558
- ]
559
- }),
560
- defaultError ? /*#__PURE__*/ _jsx(Callout, {
561
- role: "alert",
562
- type: "error",
563
- children: /*#__PURE__*/ _jsx(Text, {
564
- size: "sm",
565
- children: defaultError
582
+ }) : null,
583
+ /*#__PURE__*/ _jsx(DeleteModelProviderDialog, {
584
+ open: deleteOpen,
585
+ onOpenChange: handleDeleteOpenChange,
586
+ label: label,
587
+ errorMessage: deleteError,
588
+ isLoading: deleteConfig.isPending,
589
+ onDelete: handleDelete
566
590
  })
567
- }) : null,
568
- /*#__PURE__*/ _jsx(DeleteModelProviderDialog, {
569
- open: deleteOpen,
570
- onOpenChange: handleDeleteOpenChange,
571
- label: label,
572
- errorMessage: deleteError,
573
- isLoading: deleteConfig.isPending,
574
- onDelete: handleDelete
575
- })
576
- ]
591
+ ]
592
+ })
577
593
  });
578
594
  }
579
595
  function DeleteModelProviderDialog({ open, onOpenChange, label, errorMessage, isLoading, onDelete }) {
@@ -635,51 +651,43 @@ function DeleteModelProviderDialog({ open, onOpenChange, label, errorMessage, is
635
651
  });
636
652
  }
637
653
  function ModelProviderRowsSkeleton({ label }) {
638
- return /*#__PURE__*/ _jsx("ul", {
639
- role: "status",
640
- "aria-label": label,
641
- className: cn('divide-y divide-border-neutral-base', SURFACE_CLASS),
642
- children: [
643
- 0,
644
- 1,
645
- 2
646
- ].map((row)=>/*#__PURE__*/ _jsxs("li", {
647
- className: "flex items-center gap-cluster px-row py-row",
654
+ return /*#__PURE__*/ _jsx(Panel, {
655
+ children: /*#__PURE__*/ _jsx(PanelBody, {
656
+ asChild: true,
657
+ children: /*#__PURE__*/ _jsx("ul", {
658
+ role: "status",
659
+ "aria-label": label,
648
660
  children: [
649
- /*#__PURE__*/ _jsx(Skeleton, {
650
- className: "size-32 shrink-0"
651
- }),
652
- /*#__PURE__*/ _jsxs("div", {
653
- className: "flex min-w-0 flex-1 flex-col gap-inline",
654
- children: [
655
- /*#__PURE__*/ _jsx(Skeleton, {
656
- className: "h-16 w-120"
657
- }),
658
- /*#__PURE__*/ _jsx(Skeleton, {
659
- className: "h-14 w-180"
660
- })
661
- ]
662
- }),
663
- /*#__PURE__*/ _jsx(Skeleton, {
664
- className: "h-28 w-96 shrink-0"
665
- })
666
- ]
667
- }, row))
668
- });
669
- }
670
- function ModelProviderGridSkeleton() {
671
- return /*#__PURE__*/ _jsx("div", {
672
- role: "status",
673
- "aria-label": "Loading available providers",
674
- className: PROVIDER_GRID_CLASS,
675
- children: [
676
- 0,
677
- 1,
678
- 2,
679
- 3
680
- ].map((card)=>/*#__PURE__*/ _jsx(Skeleton, {
681
- className: "h-136 w-full"
682
- }, card))
661
+ 0,
662
+ 1,
663
+ 2
664
+ ].map((row)=>/*#__PURE__*/ _jsx(PanelRow, {
665
+ asChild: true,
666
+ className: "justify-start gap-cluster hover:bg-background-neutral-base",
667
+ children: /*#__PURE__*/ _jsxs("li", {
668
+ children: [
669
+ /*#__PURE__*/ _jsx(Skeleton, {
670
+ className: "size-32 shrink-0"
671
+ }),
672
+ /*#__PURE__*/ _jsxs("div", {
673
+ className: "flex min-w-0 flex-1 flex-col gap-inline",
674
+ children: [
675
+ /*#__PURE__*/ _jsx(Skeleton, {
676
+ className: "h-16 w-120"
677
+ }),
678
+ /*#__PURE__*/ _jsx(Skeleton, {
679
+ className: "h-14 w-180"
680
+ })
681
+ ]
682
+ }),
683
+ /*#__PURE__*/ _jsx(Skeleton, {
684
+ className: "h-28 w-96 shrink-0"
685
+ })
686
+ ]
687
+ })
688
+ }, row))
689
+ })
690
+ })
683
691
  });
684
692
  }
685
693