@shipfox/client-agent 21.0.0 → 22.0.1

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 (39) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +24 -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 +152 -146
  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 +268 -281
  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/routes/agents-settings.js +15 -5
  27. package/dist/routes/agents-settings.js.map +1 -1
  28. package/dist/tsconfig.test.tsbuildinfo +1 -1
  29. package/package.json +4 -4
  30. package/src/components/add-custom-provider-card.tsx +9 -23
  31. package/src/components/available-provider-card.tsx +9 -23
  32. package/src/components/available-providers-grid.tsx +36 -29
  33. package/src/components/harnesses-section.tsx +116 -109
  34. package/src/components/model-provider-grid-skeleton.tsx +21 -0
  35. package/src/components/model-providers-section.test.tsx +2 -2
  36. package/src/components/model-providers-section.tsx +208 -200
  37. package/src/pages/model-provider-onboarding-page.tsx +26 -54
  38. package/src/routes/agents-settings.tsx +7 -3
  39. 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();
@@ -81,91 +81,88 @@ export function WorkspaceModelProvidersSection({ workspaceId }) {
81
81
  "aria-label": "Configured providers",
82
82
  tabIndex: -1,
83
83
  children: [
84
- /*#__PURE__*/ _jsxs("div", {
84
+ /*#__PURE__*/ _jsx("div", {
85
85
  className: "flex flex-col gap-tight",
86
- children: [
87
- /*#__PURE__*/ _jsx(Header, {
88
- variant: "h3",
89
- children: "Configured providers"
90
- }),
91
- /*#__PURE__*/ _jsx(Text, {
92
- size: "sm",
93
- className: "text-foreground-neutral-muted",
94
- children: "Workspace credentials available to agent steps."
95
- })
96
- ]
86
+ children: /*#__PURE__*/ _jsx(Header, {
87
+ variant: "h3",
88
+ children: "Configured providers"
89
+ })
97
90
  }),
98
91
  configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
99
92
  label: "Loading configured providers"
100
93
  }) : null,
101
- configsQuery.isError && configsQuery.data === undefined ? /*#__PURE__*/ _jsx("div", {
102
- className: cn(SURFACE_CLASS, 'px-row'),
94
+ configsQuery.isError && configsQuery.data === undefined ? /*#__PURE__*/ _jsx(Panel, {
103
95
  children: /*#__PURE__*/ _jsx(QueryLoadError, {
104
96
  query: configsQuery,
105
- subject: "model provider configs"
97
+ subject: "model provider configs",
98
+ variant: "panel"
106
99
  })
107
100
  }) : null,
108
- configsQuery.data !== undefined && configs.length === 0 ? /*#__PURE__*/ _jsx("div", {
109
- className: cn(SURFACE_CLASS, 'px-row'),
101
+ configsQuery.data !== undefined && configs.length === 0 ? /*#__PURE__*/ _jsx(Panel, {
110
102
  children: /*#__PURE__*/ _jsx(EmptyState, {
111
103
  icon: "key2Line",
112
104
  title: "No providers configured",
113
- description: "Configure a provider below to run agent steps with workspace-managed credentials."
105
+ description: "Configure a provider below to run agent steps with workspace-managed credentials.",
106
+ variant: "panel"
114
107
  })
115
108
  }) : 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);
109
+ configs.length > 0 ? /*#__PURE__*/ _jsx(Panel, {
110
+ children: /*#__PURE__*/ _jsx(PanelBody, {
111
+ asChild: true,
112
+ children: /*#__PURE__*/ _jsx("ul", {
113
+ children: configs.map((config)=>{
114
+ const catalogEntry = providerById.get(config.providerId);
115
+ const entry = catalogEntry && isSupportedProvider(catalogEntry) ? catalogEntry : undefined;
116
+ const builtinConfig = isBuiltinModelProviderConfig(config) ? config : undefined;
117
+ const customConfig = isCustomModelProviderConfig(config) ? config : undefined;
118
+ return /*#__PURE__*/ _jsx(ConfiguredProviderRow, {
119
+ workspaceId: workspaceId,
120
+ config: config,
121
+ entry: entry,
122
+ isDefault: config.providerId === defaultProviderId,
123
+ onEdit: ()=>{
124
+ if (entry && builtinConfig) {
125
+ dispatchModal({
126
+ type: 'edit-builtin',
127
+ provider: entry,
128
+ config: builtinConfig
129
+ });
130
+ } else if (customConfig) {
131
+ dispatchModal({
132
+ type: 'edit-custom',
133
+ config: customConfig
134
+ });
135
+ }
136
+ },
137
+ onChangeDefaultModel: ()=>{
138
+ if (entry && builtinConfig) dispatchModal({
139
+ type: 'change-default-model',
140
+ provider: entry,
141
+ config: builtinConfig
142
+ });
143
+ },
144
+ onShowUsage: ()=>{
145
+ if (entry && builtinConfig) {
146
+ setPendingUsageTarget(null);
147
+ dispatchModal({
148
+ type: 'show-usage',
149
+ providerId: entry.id,
150
+ initialModel: builtinConfig.defaultModel,
151
+ restoreFocusToConfiguredProviders: false
152
+ });
153
+ } else if (customConfig) {
154
+ setPendingUsageTarget(null);
155
+ dispatchModal({
156
+ type: 'show-usage',
157
+ providerId: customConfig.providerId,
158
+ initialModel: customConfig.defaultModel,
159
+ restoreFocusToConfiguredProviders: false
160
+ });
161
+ }
162
+ }
163
+ }, config.providerId);
164
+ })
165
+ })
169
166
  })
170
167
  }) : null
171
168
  ]
@@ -174,26 +171,21 @@ export function WorkspaceModelProvidersSection({ workspaceId }) {
174
171
  className: "flex flex-col gap-group",
175
172
  "aria-label": "Available providers",
176
173
  children: [
177
- /*#__PURE__*/ _jsxs("div", {
174
+ /*#__PURE__*/ _jsx("div", {
178
175
  className: "flex flex-col gap-tight",
179
- children: [
180
- /*#__PURE__*/ _jsx(Header, {
181
- variant: "h3",
182
- children: "Available providers"
183
- }),
184
- /*#__PURE__*/ _jsx(Text, {
185
- size: "sm",
186
- className: "text-foreground-neutral-muted",
187
- children: "Providers that can be configured for agent steps in this workspace."
188
- })
189
- ]
176
+ children: /*#__PURE__*/ _jsx(Header, {
177
+ variant: "h3",
178
+ children: "Available providers"
179
+ })
190
180
  }),
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'),
181
+ catalogQuery.isPending || configsQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderGridSkeleton, {
182
+ label: "Loading available providers"
183
+ }) : null,
184
+ catalogQuery.isError && catalogQuery.data === undefined ? /*#__PURE__*/ _jsx(Panel, {
194
185
  children: /*#__PURE__*/ _jsx(QueryLoadError, {
195
186
  query: catalogQuery,
196
- subject: "model provider catalog"
187
+ subject: "model provider catalog",
188
+ variant: "panel"
197
189
  })
198
190
  }) : null,
199
191
  configsLoaded ? /*#__PURE__*/ _jsx(AvailableProvidersGrid, {
@@ -215,51 +207,51 @@ export function WorkspaceModelProvidersSection({ workspaceId }) {
215
207
  className: "flex flex-col gap-group",
216
208
  "aria-label": "Unsupported providers",
217
209
  children: [
218
- /*#__PURE__*/ _jsxs("div", {
210
+ /*#__PURE__*/ _jsx("div", {
219
211
  className: "flex flex-col gap-tight",
220
- children: [
221
- /*#__PURE__*/ _jsx(Header, {
222
- variant: "h3",
223
- children: "Unsupported providers"
224
- }),
225
- /*#__PURE__*/ _jsx(Text, {
226
- size: "sm",
227
- className: "text-foreground-neutral-muted",
228
- children: "Providers that cannot be configured in this workspace yet."
229
- })
230
- ]
212
+ children: /*#__PURE__*/ _jsx(Header, {
213
+ variant: "h3",
214
+ children: "Unsupported providers"
215
+ })
231
216
  }),
232
217
  catalogQuery.isPending ? /*#__PURE__*/ _jsx(ModelProviderRowsSkeleton, {
233
218
  label: "Loading unsupported providers"
234
219
  }) : 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))
220
+ unsupportedProviders.length > 0 ? /*#__PURE__*/ _jsx(Panel, {
221
+ children: /*#__PURE__*/ _jsx(PanelBody, {
222
+ asChild: true,
223
+ children: /*#__PURE__*/ _jsx("ul", {
224
+ children: unsupportedProviders.map((entry)=>/*#__PURE__*/ _jsx(PanelRow, {
225
+ asChild: true,
226
+ className: "items-start justify-start gap-cluster opacity-70 hover:bg-background-neutral-base",
227
+ children: /*#__PURE__*/ _jsxs("li", {
228
+ children: [
229
+ /*#__PURE__*/ _jsx(Icon, {
230
+ name: "forbid2Line",
231
+ className: "mt-[2px] size-18 shrink-0 text-foreground-neutral-muted",
232
+ "aria-hidden": true
233
+ }),
234
+ /*#__PURE__*/ _jsxs("div", {
235
+ className: "flex min-w-0 flex-1 flex-col gap-tight",
236
+ children: [
237
+ /*#__PURE__*/ _jsx(Text, {
238
+ size: "md",
239
+ bold: true,
240
+ className: "truncate",
241
+ children: entry.label
242
+ }),
243
+ /*#__PURE__*/ _jsx(Text, {
244
+ size: "sm",
245
+ className: "text-foreground-neutral-muted",
246
+ children: entry.unsupportedReason
247
+ })
248
+ ]
249
+ })
250
+ ]
251
+ })
252
+ }, entry.id))
253
+ })
254
+ })
263
255
  }) : null
264
256
  ]
265
257
  }),
@@ -461,119 +453,122 @@ function ConfiguredProviderRow({ workspaceId, config, entry, isDefault, onEdit,
461
453
  deleteConfig.reset();
462
454
  }
463
455
  }
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
456
+ return /*#__PURE__*/ _jsx(PanelRow, {
457
+ asChild: true,
458
+ className: "flex-col items-stretch gap-inline",
459
+ children: /*#__PURE__*/ _jsxs("li", {
460
+ children: [
461
+ /*#__PURE__*/ _jsxs("div", {
462
+ className: "flex items-center justify-between gap-cluster",
463
+ children: [
464
+ /*#__PURE__*/ _jsxs("div", {
465
+ className: "flex min-w-0 items-center gap-inline",
466
+ children: [
467
+ isDefault ? /*#__PURE__*/ _jsxs(_Fragment, {
468
+ children: [
469
+ /*#__PURE__*/ _jsxs(Tooltip, {
470
+ children: [
471
+ /*#__PURE__*/ _jsx(TooltipTrigger, {
472
+ asChild: true,
473
+ children: /*#__PURE__*/ _jsx("span", {
474
+ className: "inline-flex size-16 shrink-0 items-center justify-center",
475
+ children: /*#__PURE__*/ _jsx(Icon, {
476
+ name: "starLine",
477
+ className: "size-16 text-foreground-neutral-muted",
478
+ "aria-hidden": true
479
+ })
485
480
  })
481
+ }),
482
+ /*#__PURE__*/ _jsx(TooltipContent, {
483
+ children: "Default provider"
486
484
  })
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`
485
+ ]
486
+ }),
487
+ /*#__PURE__*/ _jsx("span", {
488
+ className: "sr-only",
489
+ children: "Default provider"
490
+ })
491
+ ]
492
+ }) : null,
493
+ /*#__PURE__*/ _jsx(Text, {
494
+ size: "md",
495
+ bold: true,
496
+ className: "truncate",
497
+ children: label
516
498
  })
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"
499
+ ]
500
+ }),
501
+ /*#__PURE__*/ _jsxs(DropdownMenu, {
502
+ children: [
503
+ /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
504
+ asChild: true,
505
+ children: /*#__PURE__*/ _jsx(IconButton, {
506
+ size: "sm",
507
+ variant: "transparent",
508
+ icon: "more2Line",
509
+ "aria-label": `Open ${label} provider actions`
553
510
  })
554
- ]
555
- })
556
- ]
511
+ }),
512
+ /*#__PURE__*/ _jsxs(DropdownMenuContent, {
513
+ align: "end",
514
+ children: [
515
+ !isDefault ? /*#__PURE__*/ _jsx(DropdownMenuItem, {
516
+ icon: "starLine",
517
+ disabled: setDefault.isPending || !entry && !customConfig,
518
+ onSelect: ()=>{
519
+ void handleSetDefault();
520
+ },
521
+ children: "Set as default"
522
+ }) : null,
523
+ isBuiltinConfig ? /*#__PURE__*/ _jsx(DropdownMenuItem, {
524
+ icon: "settings3Line",
525
+ disabled: !entry,
526
+ onSelect: onChangeDefaultModel,
527
+ children: "Change default model"
528
+ }) : null,
529
+ /*#__PURE__*/ _jsx(DropdownMenuItem, {
530
+ icon: "bookOpenLine",
531
+ disabled: !canUse,
532
+ onSelect: onShowUsage,
533
+ children: "View workflow example"
534
+ }),
535
+ /*#__PURE__*/ _jsx(DropdownMenuItem, {
536
+ icon: "editLine",
537
+ disabled: !canEdit,
538
+ onSelect: onEdit,
539
+ children: customConfig ? 'Edit' : 'Edit credentials'
540
+ }),
541
+ /*#__PURE__*/ _jsx(DropdownMenuItem, {
542
+ icon: "deleteBinLine",
543
+ onSelect: ()=>{
544
+ setDeleteOpen(true);
545
+ },
546
+ children: "Delete"
547
+ })
548
+ ]
549
+ })
550
+ ]
551
+ })
552
+ ]
553
+ }),
554
+ defaultError ? /*#__PURE__*/ _jsx(Callout, {
555
+ role: "alert",
556
+ type: "error",
557
+ children: /*#__PURE__*/ _jsx(Text, {
558
+ size: "sm",
559
+ children: defaultError
557
560
  })
558
- ]
559
- }),
560
- defaultError ? /*#__PURE__*/ _jsx(Callout, {
561
- role: "alert",
562
- type: "error",
563
- children: /*#__PURE__*/ _jsx(Text, {
564
- size: "sm",
565
- children: defaultError
561
+ }) : null,
562
+ /*#__PURE__*/ _jsx(DeleteModelProviderDialog, {
563
+ open: deleteOpen,
564
+ onOpenChange: handleDeleteOpenChange,
565
+ label: label,
566
+ errorMessage: deleteError,
567
+ isLoading: deleteConfig.isPending,
568
+ onDelete: handleDelete
566
569
  })
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
- ]
570
+ ]
571
+ })
577
572
  });
578
573
  }
579
574
  function DeleteModelProviderDialog({ open, onOpenChange, label, errorMessage, isLoading, onDelete }) {
@@ -635,51 +630,43 @@ function DeleteModelProviderDialog({ open, onOpenChange, label, errorMessage, is
635
630
  });
636
631
  }
637
632
  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",
633
+ return /*#__PURE__*/ _jsx(Panel, {
634
+ children: /*#__PURE__*/ _jsx(PanelBody, {
635
+ asChild: true,
636
+ children: /*#__PURE__*/ _jsx("ul", {
637
+ role: "status",
638
+ "aria-label": label,
648
639
  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))
640
+ 0,
641
+ 1,
642
+ 2
643
+ ].map((row)=>/*#__PURE__*/ _jsx(PanelRow, {
644
+ asChild: true,
645
+ className: "justify-start gap-cluster hover:bg-background-neutral-base",
646
+ children: /*#__PURE__*/ _jsxs("li", {
647
+ children: [
648
+ /*#__PURE__*/ _jsx(Skeleton, {
649
+ className: "size-32 shrink-0"
650
+ }),
651
+ /*#__PURE__*/ _jsxs("div", {
652
+ className: "flex min-w-0 flex-1 flex-col gap-inline",
653
+ children: [
654
+ /*#__PURE__*/ _jsx(Skeleton, {
655
+ className: "h-16 w-120"
656
+ }),
657
+ /*#__PURE__*/ _jsx(Skeleton, {
658
+ className: "h-14 w-180"
659
+ })
660
+ ]
661
+ }),
662
+ /*#__PURE__*/ _jsx(Skeleton, {
663
+ className: "h-28 w-96 shrink-0"
664
+ })
665
+ ]
666
+ })
667
+ }, row))
668
+ })
669
+ })
683
670
  });
684
671
  }
685
672