fix: improve channel test failure details UX (#4988)

* fix: improve channel test failure details UX

* fix: add accessible label to channel models region

web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx

@@ -26,8 +26,10 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { Loader2, Settings } from 'lucide-react'
+import { Check, Copy, Info, Loader2, Settings } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
+import { useIsMobile } from '@/hooks/use-mobile'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import {
@@ -48,6 +50,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
 import { Switch } from '@/components/ui/switch'
 import {
   Table,
@@ -114,6 +124,88 @@ const STREAM_INCOMPATIBLE_ENDPOINTS = new Set([
   'openai-response-compact',
 ])
 
+const MODEL_PRICE_ERROR_CODE = 'model_price_error'
+const FAILURE_SUMMARY_MAX_LENGTH = 96
+
+type FailureStatusDisplay = {
+  summary: string
+  details?: string
+}
+
+type FailureDetailsState = {
+  model: string
+  summary: string
+  details: string
+}
+
+function normalizeInlineError(errorText: string) {
+  return errorText.replace(/\s+/g, ' ').trim()
+}
+
+function getFirstErrorLine(errorText: string) {
+  return errorText
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .find(Boolean)
+}
+
+function truncateFailureSummary(summary: string) {
+  if (summary.length <= FAILURE_SUMMARY_MAX_LENGTH) {
+    return summary
+  }
+
+  return `${summary.slice(0, FAILURE_SUMMARY_MAX_LENGTH).trimEnd()}...`
+}
+
+function getFailureStatusDisplay({
+  errorText,
+  fallbackSummary,
+  isModelPriceError,
+  modelPriceSummary,
+}: {
+  errorText?: string
+  fallbackSummary: string
+  isModelPriceError: boolean
+  modelPriceSummary: string
+}): FailureStatusDisplay {
+  const rawError = errorText?.trim()
+
+  if (!rawError) {
+    return { summary: fallbackSummary }
+  }
+
+  if (isModelPriceError) {
+    return {
+      summary: modelPriceSummary,
+      details: rawError === modelPriceSummary ? undefined : rawError,
+    }
+  }
+
+  const firstLine = getFirstErrorLine(rawError) ?? rawError
+  const summary = truncateFailureSummary(normalizeInlineError(firstLine))
+  const normalizedRawError = normalizeInlineError(rawError)
+
+  return {
+    summary,
+    details: summary === normalizedRawError ? undefined : rawError,
+  }
+}
+
+function getTestTableColumnClass(columnId: string) {
+  switch (columnId) {
+    case 'select':
+      return 'w-10 min-w-10'
+    case 'model':
+      return 'w-auto whitespace-nowrap'
+    case 'status':
+      return 'w-70 min-w-70 max-w-70 whitespace-normal'
+    case 'actions':
+      return 'bg-popover sticky right-0 z-20 w-24 min-w-24 border-l shadow-[-8px_0_8px_-8px_rgb(0_0_0_/_0.2)] whitespace-nowrap sm:w-28 sm:min-w-28'
+    default:
+      return undefined
+  }
+}
+
 export function ChannelTestDialog({
   open,
   onOpenChange,
@@ -129,6 +221,8 @@ export function ChannelTestDialog({
     () => new Set()
   )
   const [isBatchTesting, setIsBatchTesting] = useState(false)
+  const [failureDetails, setFailureDetails] =
+    useState<FailureDetailsState | null>(null)
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: 10,
@@ -142,6 +236,7 @@ export function ChannelTestDialog({
     setRowSelection({})
     setTestingModels(() => new Set())
     setIsBatchTesting(false)
+    setFailureDetails(null)
     setPagination({ pageIndex: 0, pageSize: 10 })
   }, [])
 
@@ -199,6 +294,7 @@ export function ChannelTestDialog({
   }, [])
 
   const updateTestResult = useCallback((key: string, result: TestResult) => {
+    setFailureDetails((current) => (current?.model === key ? null : current))
     setTestResults((prev) => ({
       ...prev,
       [key]: result,
@@ -283,14 +379,16 @@ export function ChannelTestDialog({
             onCheckedChange={(value) =>
               table.toggleAllPageRowsSelected(!!value)
             }
-            aria-label='Select all models'
+            aria-label={t('Select all models')}
           />
         ),
         cell: ({ row }) => (
           <Checkbox
             checked={row.getIsSelected()}
             onCheckedChange={(value) => row.toggleSelected(!!value)}
-            aria-label={`Select model ${row.original.model}`}
+            aria-label={t('Select model {{model}}', {
+              model: row.original.model,
+            })}
           />
         ),
         enableSorting: false,
@@ -299,17 +397,19 @@ export function ChannelTestDialog({
       },
       {
         accessorKey: 'model',
-        header: 'Model',
+        header: t('Model'),
         cell: ({ row }) => {
           const model = row.original.model
           const isDefault = defaultTestModel === model
 
           return (
-            <div className='flex items-center gap-2'>
-              <span className='font-medium'>{model}</span>
+            <div className='flex w-max items-center gap-2 whitespace-nowrap'>
+              <span className='font-medium whitespace-nowrap' title={model}>
+                {model}
+              </span>
               {isDefault && (
                 <StatusBadge
-                  label='Default'
+                  label={t('Default')}
                   variant='info'
                   size='sm'
                   copyable={false}
@@ -321,69 +421,16 @@ export function ChannelTestDialog({
       },
       {
         id: 'status',
-        header: 'Status',
+        header: t('Status'),
         cell: ({ row }) => {
           const model = row.original.model
           const result = testResults[model]
-
-          if (!result || result.status === 'idle') {
-            return (
-              <StatusBadge
-                label={t('Not tested')}
-                variant='neutral'
-                copyable={false}
-              />
-            )
-          }
-
-          if (result.status === 'testing') {
-            return (
-              <div className='text-muted-foreground flex items-center gap-2 text-sm'>
-                <Loader2 className='h-4 w-4 animate-spin' />
-                Testing...
-              </div>
-            )
-          }
-
-          if (result.status === 'success') {
-            return (
-              <div className='flex flex-col gap-1 text-xs'>
-                <StatusBadge
-                  label='Success'
-                  variant='success'
-                  copyable={false}
-                />
-                {typeof result.responseTime === 'number' && (
-                  <span className='text-muted-foreground'>
-                    {formatResponseTime(result.responseTime, t)}
-                  </span>
-                )}
-              </div>
-            )
-          }
-
           return (
-            <div className='flex flex-col gap-1 text-xs'>
-              <StatusBadge label='Failed' variant='danger' copyable={false} />
-              {result.error && (
-                <span className='text-muted-foreground break-all'>
-                  {result.error}
-                </span>
-              )}
-              {result.errorCode === 'model_price_error' && (
-                <Button
-                  variant='outline'
-                  size='sm'
-                  className='w-fit'
-                  onClick={() =>
-                    window.open('/console/setting?tab=ratio', '_blank')
-                  }
-                >
-                  <Settings className='mr-1 h-3 w-3' />
-                  {t('Go to Settings')}
-                </Button>
-              )}
-            </div>
+            <TestStatusCell
+              result={result}
+              model={model}
+              onOpenDetails={setFailureDetails}
+            />
           )
         },
         enableSorting: false,
@@ -391,7 +438,7 @@ export function ChannelTestDialog({
       },
       {
         id: 'actions',
-        header: 'Actions',
+        header: t('Actions'),
         cell: ({ row }) => {
           const model = row.original.model
           const isTestingModel = testingModels.has(model)
@@ -406,7 +453,7 @@ export function ChannelTestDialog({
               {isTestingModel && (
                 <Loader2 className='mr-2 h-4 w-4 animate-spin' />
               )}
-              Test
+              {t('Test')}
             </Button>
           )
         },
@@ -443,160 +490,369 @@ export function ChannelTestDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className='max-h-[90vh] overflow-hidden sm:max-w-3xl'>
-        <DialogHeader>
-          <DialogTitle>{t('Test Channel Connection')}</DialogTitle>
-          <DialogDescription>
-            {t('Test connectivity for:')} <strong>{currentRow.name}</strong>
-          </DialogDescription>
-        </DialogHeader>
+    <>
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent className='max-h-[90vh] overflow-hidden sm:max-w-3xl'>
+          <DialogHeader>
+            <DialogTitle>{t('Test Channel Connection')}</DialogTitle>
+            <DialogDescription>
+              {t('Test connectivity for:')} <strong>{currentRow.name}</strong>
+            </DialogDescription>
+          </DialogHeader>
 
-        <div className='max-h-[78vh] space-y-4 overflow-y-auto py-4 pr-1'>
-          <div className='grid gap-4 md:grid-cols-2'>
-            <div className='grid gap-2'>
-              <Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
-              <Select
-                items={[
-                  ...endpointTypeOptions.map((option) => {
-                    const itemValue = option.value
-                    return { value: itemValue, label: t(option.label) }
-                  }),
-                ]}
-                value={endpointType}
-                onValueChange={(v) => v !== null && setEndpointType(v)}
-              >
-                <SelectTrigger id='endpoint-type'>
-                  <SelectValue placeholder={t('Auto detect (default)')} />
-                </SelectTrigger>
-                <SelectContent alignItemWithTrigger={false}>
-                  <SelectGroup>
-                    {endpointTypeOptions.map((option) => {
+          <div className='max-h-[78vh] space-y-4 overflow-y-auto py-4 pr-1'>
+            <div className='grid gap-4 md:grid-cols-2'>
+              <div className='grid gap-2'>
+                <Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
+                <Select
+                  items={[
+                    ...endpointTypeOptions.map((option) => {
                       const itemValue = option.value
-                      return (
-                        <SelectItem key={itemValue} value={itemValue}>
-                          {t(option.label)}
-                        </SelectItem>
-                      )
-                    })}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <p className='text-muted-foreground text-xs'>
-                {t(
-                  'Override the endpoint used for testing. Leave empty to auto detect.'
-                )}
-              </p>
-            </div>
-            <div className='grid gap-2'>
-              <Label htmlFor='stream-toggle'>{t('Stream Mode')}</Label>
-              <div className='flex items-center gap-2'>
-                <Switch
-                  id='stream-toggle'
-                  checked={isStreamTest}
-                  onCheckedChange={setIsStreamTest}
-                  disabled={streamDisabled}
-                />
-                <span className='text-sm'>
-                  {isStreamTest ? t('Enabled') : t('Disabled')}
-                </span>
-              </div>
-              <p className='text-muted-foreground text-xs'>
-                {t('Enable streaming mode for the test request.')}
-              </p>
-            </div>
-          </div>
-
-          <div className='space-y-3 max-sm:has-[div[role="toolbar"]]:pb-16'>
-            <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
-              <div>
-                <p className='text-sm font-medium'>{t('Channel models')}</p>
+                      return { value: itemValue, label: t(option.label) }
+                    }),
+                  ]}
+                  value={endpointType}
+                  onValueChange={(v) => v !== null && setEndpointType(v)}
+                >
+                  <SelectTrigger id='endpoint-type'>
+                    <SelectValue placeholder={t('Auto detect (default)')} />
+                  </SelectTrigger>
+                  <SelectContent alignItemWithTrigger={false}>
+                    <SelectGroup>
+                      {endpointTypeOptions.map((option) => {
+                        const itemValue = option.value
+                        return (
+                          <SelectItem key={itemValue} value={itemValue}>
+                            {t(option.label)}
+                          </SelectItem>
+                        )
+                      })}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
                 <p className='text-muted-foreground text-xs'>
-                  {t('Select models to run batch tests.')}
+                  {t(
+                    'Override the endpoint used for testing. Leave empty to auto detect.'
+                  )}
+                </p>
+              </div>
+              <div className='grid gap-2'>
+                <Label htmlFor='stream-toggle'>{t('Stream Mode')}</Label>
+                <div className='flex items-center gap-2'>
+                  <Switch
+                    id='stream-toggle'
+                    checked={isStreamTest}
+                    onCheckedChange={setIsStreamTest}
+                    disabled={streamDisabled}
+                  />
+                  <span className='text-sm'>
+                    {isStreamTest ? t('Enabled') : t('Disabled')}
+                  </span>
+                </div>
+                <p className='text-muted-foreground text-xs'>
+                  {t('Enable streaming mode for the test request.')}
                 </p>
               </div>
-              <Input
-                placeholder={t('Filter models...')}
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className='sm:w-64'
-              />
             </div>
 
-            <div className='space-y-3'>
-              <div className='overflow-hidden rounded-md border' role='region'>
-                <div className='max-h-[360px] overflow-y-auto'>
-                  <Table>
-                    <TableHeader>
-                      {table.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
-                          {headerGroup.headers.map((header) => (
-                            <TableHead key={header.id}>
-                              {header.isPlaceholder
-                                ? null
-                                : flexRender(
-                                    header.column.columnDef.header,
-                                    header.getContext()
-                                  )}
-                            </TableHead>
-                          ))}
-                        </TableRow>
-                      ))}
-                    </TableHeader>
-                    <TableBody>
-                      {table.getRowModel().rows.length ? (
-                        table.getRowModel().rows.map((row) => (
-                          <TableRow
-                            key={row.id}
-                            data-state={
-                              row.getIsSelected() ? 'selected' : undefined
-                            }
-                          >
-                            {row.getVisibleCells().map((cell) => (
-                              <TableCell key={cell.id}>
-                                {flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext()
-                                )}
-                              </TableCell>
-                            ))}
-                          </TableRow>
-                        ))
-                      ) : (
-                        <TableRow>
-                          <TableCell
-                            colSpan={table.getVisibleLeafColumns().length}
-                            className='text-muted-foreground h-16 text-center text-sm'
-                          >
-                            {models.length
-                              ? 'No models matched your search.'
-                              : 'This channel has no configured models.'}
-                          </TableCell>
-                        </TableRow>
-                      )}
-                    </TableBody>
-                  </Table>
+            <div className='space-y-3 max-sm:has-[div[role="toolbar"]]:pb-16'>
+              <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
+                <div>
+                  <p className='text-sm font-medium'>{t('Channel models')}</p>
+                  <p className='text-muted-foreground text-xs'>
+                    {t('Select models to run batch tests.')}
+                  </p>
                 </div>
+                <Input
+                  placeholder={t('Filter models...')}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className='sm:w-64'
+                />
               </div>
 
-              <DataTablePagination table={table} />
+              <div className='space-y-3'>
+                <div
+                  className='overflow-hidden rounded-md border'
+                  role='region'
+                  aria-label={t('Channel models')}
+                >
+                  <div className='max-h-90 overflow-auto **:data-[slot=table-container]:overflow-visible'>
+                    <Table className='w-max min-w-full table-auto'>
+                      <colgroup>
+                        <col className='w-10 min-w-10' />
+                        <col className='w-auto' />
+                        <col className='w-70' />
+                        <col className='w-24 sm:w-28' />
+                      </colgroup>
+                      <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                          <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => (
+                              <TableHead
+                                key={header.id}
+                                className={getTestTableColumnClass(
+                                  header.column.id
+                                )}
+                              >
+                                {header.isPlaceholder
+                                  ? null
+                                  : flexRender(
+                                      header.column.columnDef.header,
+                                      header.getContext()
+                                    )}
+                              </TableHead>
+                            ))}
+                          </TableRow>
+                        ))}
+                      </TableHeader>
+                      <TableBody>
+                        {table.getRowModel().rows.length ? (
+                          table.getRowModel().rows.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              data-state={
+                                row.getIsSelected() ? 'selected' : undefined
+                              }
+                            >
+                              {row.getVisibleCells().map((cell) => (
+                                <TableCell
+                                  key={cell.id}
+                                  className={getTestTableColumnClass(
+                                    cell.column.id
+                                  )}
+                                >
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext()
+                                  )}
+                                </TableCell>
+                              ))}
+                            </TableRow>
+                          ))
+                        ) : (
+                          <TableRow>
+                            <TableCell
+                              colSpan={table.getVisibleLeafColumns().length}
+                              className='text-muted-foreground h-16 text-center text-sm'
+                            >
+                              {models.length
+                                ? 'No models matched your search.'
+                                : 'This channel has no configured models.'}
+                            </TableCell>
+                          </TableRow>
+                        )}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+
+                <DataTablePagination table={table} />
+              </div>
+
+              <TestModelsBulkActions
+                table={table}
+                disabled={isAnyTesting}
+                onTestSelected={handleBatchTest}
+              />
             </div>
-
-            <TestModelsBulkActions
-              table={table}
-              disabled={isAnyTesting}
-              onTestSelected={handleBatchTest}
-            />
           </div>
-        </div>
 
-        <DialogFooter>
-          <Button variant='outline' onClick={handleClose}>
-            {t('Close')}
+          <DialogFooter>
+            <Button variant='outline' onClick={handleClose}>
+              {t('Close')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <FailureDetailsSheet
+        details={failureDetails}
+        onOpenChange={(sheetOpen) => {
+          if (!sheetOpen) {
+            setFailureDetails(null)
+          }
+        }}
+      />
+    </>
+  )
+}
+
+function TestStatusCell({
+  result,
+  model,
+  onOpenDetails,
+}: {
+  result?: TestResult
+  model: string
+  onOpenDetails: (details: FailureDetailsState) => void
+}) {
+  const { t } = useTranslation()
+
+  if (!result || result.status === 'idle') {
+    return (
+      <StatusBadge label={t('Not tested')} variant='neutral' copyable={false} />
+    )
+  }
+
+  if (result.status === 'testing') {
+    return (
+      <div className='text-muted-foreground flex min-w-0 items-center gap-2 text-sm'>
+        <Loader2 className='h-4 w-4 shrink-0 animate-spin' />
+        <span className='truncate'>{t('Testing...')}</span>
+      </div>
+    )
+  }
+
+  if (result.status === 'success') {
+    return (
+      <div className='flex min-w-0 flex-col gap-1 text-xs'>
+        <StatusBadge label={t('Success')} variant='success' copyable={false} />
+        {typeof result.responseTime === 'number' && (
+          <span className='text-muted-foreground truncate'>
+            {formatResponseTime(result.responseTime, t)}
+          </span>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <FailureStatusContent
+      result={result}
+      model={model}
+      onOpenDetails={onOpenDetails}
+    />
+  )
+}
+
+function FailureStatusContent({
+  result,
+  model,
+  onOpenDetails,
+}: {
+  result: TestResult
+  model: string
+  onOpenDetails: (details: FailureDetailsState) => void
+}) {
+  const { t } = useTranslation()
+  const errorText = result.error?.trim()
+  const isModelPriceError = result.errorCode === MODEL_PRICE_ERROR_CODE
+  const modelPriceSummary = t(
+    'Model price is not configured. Please complete model pricing in settings.'
+  )
+  const { summary, details } = getFailureStatusDisplay({
+    errorText,
+    fallbackSummary: t('Test failed'),
+    isModelPriceError,
+    modelPriceSummary,
+  })
+
+  return (
+    <div className='flex min-w-0 flex-col gap-1.5 text-xs whitespace-normal'>
+      <StatusBadge label={t('Failed')} variant='danger' copyable={false} />
+      <p className='text-muted-foreground line-clamp-2 min-w-0 leading-snug wrap-break-word'>
+        {summary}
+      </p>
+      <div className='flex min-w-0 flex-wrap items-center gap-1.5'>
+        {isModelPriceError && (
+          <Button
+            variant='outline'
+            size='sm'
+            className='h-7 w-fit px-2 text-xs'
+            onClick={() => window.open('/console/setting?tab=ratio', '_blank')}
+          >
+            <Settings className='mr-1 h-3 w-3 shrink-0' />
+            {t('Go to Settings')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        )}
+        {details && (
+          <Button
+            variant='ghost'
+            size='sm'
+            className='h-7 w-fit px-2 text-xs'
+            aria-haspopup='dialog'
+            onClick={() => onOpenDetails({ model, summary, details })}
+          >
+            <Info className='mr-1 h-3 w-3 shrink-0' />
+            {t('Details')}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function FailureDetailsSheet({
+  details,
+  onOpenChange,
+}: {
+  details: FailureDetailsState | null
+  onOpenChange: (open: boolean) => void
+}) {
+  const { t } = useTranslation()
+  const isMobile = useIsMobile()
+  const { copiedText, copyToClipboard } = useCopyToClipboard({ notify: false })
+
+  return (
+    <Sheet open={Boolean(details)} onOpenChange={onOpenChange}>
+      <SheetContent
+        side={isMobile ? 'bottom' : 'right'}
+        className={
+          isMobile
+            ? 'max-h-[85dvh] gap-0 overflow-hidden rounded-t-xl p-0'
+            : 'h-dvh w-full gap-0 overflow-hidden p-0 sm:max-w-lg'
+        }
+      >
+        {details && (
+          <>
+            <SheetHeader className='border-b px-4 py-3 text-start sm:px-5 sm:py-4'>
+              <SheetTitle className='pr-10'>{t('Details')}</SheetTitle>
+              <SheetDescription className='pr-10 wrap-break-word'>
+                {details.model}
+              </SheetDescription>
+            </SheetHeader>
+            <div className='min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-3 sm:px-5 sm:py-4'>
+              <section className='space-y-1'>
+                <div className='text-muted-foreground text-xs font-medium'>
+                  {t('Model')}
+                </div>
+                <p className='text-sm font-medium break-all'>{details.model}</p>
+              </section>
+              <section className='space-y-1'>
+                <div className='text-muted-foreground text-xs font-medium'>
+                  {t('Failed')}
+                </div>
+                <p className='text-muted-foreground text-sm leading-relaxed wrap-break-word'>
+                  {details.summary}
+                </p>
+              </section>
+              <section className='space-y-2'>
+                <div className='text-muted-foreground text-xs font-medium'>
+                  {t('Details')}
+                </div>
+                <pre className='bg-muted/30 text-muted-foreground m-0 max-w-full rounded-md border p-3 text-xs leading-relaxed wrap-break-word whitespace-pre-wrap'>
+                  {details.details}
+                </pre>
+              </section>
+            </div>
+            <SheetFooter className='border-t px-4 py-3 sm:flex-row sm:justify-end sm:px-5'>
+              <Button
+                variant='outline'
+                className='w-full sm:w-auto'
+                onClick={() => copyToClipboard(details.details)}
+              >
+                {copiedText === details.details ? (
+                  <Check className='mr-2 h-4 w-4 text-green-600' />
+                ) : (
+                  <Copy className='mr-2 h-4 w-4' />
+                )}
+                {t('Copy')}
+              </Button>
+            </SheetFooter>
+          </>
+        )}
+      </SheetContent>
+    </Sheet>
   )
 }
 
@@ -615,8 +871,8 @@ function TestModelsBulkActions({
 
   const buttonLabel =
     selectedModels.length > 0
-      ? `Test ${selectedModels.length} selected`
-      : 'Test selected models'
+      ? t('Test {{count}} selected', { count: selectedModels.length })
+      : t('Test selected models')
 
   return (
     <BulkActionsToolbar table={table} entityName='model'>

web/default/src/i18n/locales/en.json

@@ -2363,6 +2363,7 @@
     "Model performance metrics": "Model performance metrics",
     "Model Price": "Model Price",
     "Model Price Not Configured": "Model Price Not Configured",
+    "Model price is not configured. Please complete model pricing in settings.": "Model price is not configured. Please complete model pricing in settings.",
     "Model prices": "Model prices",
     "Model prices reset successfully": "Model prices reset successfully",
     "Model Pricing": "Model Pricing",
@@ -3512,6 +3513,7 @@
     "Select all (filtered)": "Select all (filtered)",
     "Select all models": "Select all models",
     "Select All Visible": "Select All Visible",
+    "Select model {{model}}": "Select model {{model}}",
     "Select an operation mode and enter the amount": "Select an operation mode and enter the amount",
     "Select announcement type": "Select announcement type",
     "Select at least one field to overwrite.": "Select at least one field to overwrite.",
@@ -3849,6 +3851,8 @@
     "Templates appended": "Templates appended",
     "Tencent": "Tencent",
     "Termination requested": "Termination requested",
+    "Test": "Test",
+    "Test {{count}} selected": "Test {{count}} selected",
     "Test All Channels": "Test All Channels",
     "Test Channel Connection": "Test Channel Connection",
     "Test Connection": "Test Connection",
@@ -3859,6 +3863,7 @@
     "Test Mode": "Test Mode",
     "Test Model": "Test Model",
     "Test models and prompts from the browser": "Test models and prompts from the browser",
+    "Test selected models": "Test selected models",
     "Testing all enabled channels started. Please refresh to see results.": "Testing all enabled channels started. Please refresh to see results.",
     "Testing...": "Testing...",
     "Text": "Text",

web/default/src/i18n/locales/fr.json

@@ -2363,6 +2363,7 @@
     "Model performance metrics": "Indicateurs de performance des modèles",
     "Model Price": "Prix du modèle",
     "Model Price Not Configured": "Prix du modèle non configuré",
+    "Model price is not configured. Please complete model pricing in settings.": "Le prix du modèle n'est pas configuré. Veuillez compléter la tarification du modèle dans les paramètres.",
     "Model prices": "Prix des modèles",
     "Model prices reset successfully": "Prix des modèles réinitialisés avec succès",
     "Model Pricing": "Tarification des modèles",
@@ -3512,6 +3513,7 @@
     "Select all (filtered)": "Tout sélectionner (filtré)",
     "Select all models": "Sélectionner tous les modèles",
     "Select All Visible": "Sélectionner tout ce qui est visible",
+    "Select model {{model}}": "Sélectionner le modèle {{model}}",
     "Select an operation mode and enter the amount": "Sélectionnez un mode d'opération et entrez le montant",
     "Select announcement type": "Sélectionner le type d'annonce",
     "Select at least one field to overwrite.": "Sélectionnez au moins un champ à écraser.",
@@ -3849,6 +3851,8 @@
     "Templates appended": "Modèles ajoutés",
     "Tencent": "Tencent",
     "Termination requested": "Arrêt demandé",
+    "Test": "Tester",
+    "Test {{count}} selected": "Tester {{count}} sélectionné(s)",
     "Test All Channels": "Tester tous les canaux",
     "Test Channel Connection": "Tester la connexion du canal",
     "Test Connection": "Tester la connexion",
@@ -3859,6 +3863,7 @@
     "Test Mode": "Mode test",
     "Test Model": "Tester le modèle",
     "Test models and prompts from the browser": "Tester les modèles et les prompts depuis le navigateur",
+    "Test selected models": "Tester les modèles sélectionnés",
     "Testing all enabled channels started. Please refresh to see results.": "Test de tous les canaux activés démarré. Veuillez actualiser pour voir les résultats.",
     "Testing...": "Test en cours...",
     "Text": "Texte",

web/default/src/i18n/locales/ja.json

@@ -2363,6 +2363,7 @@
     "Model performance metrics": "モデル性能メトリクス",
     "Model Price": "モデル価格",
     "Model Price Not Configured": "モデル価格が未設定",
+    "Model price is not configured. Please complete model pricing in settings.": "モデル価格が未設定です。設定でモデル料金を補完してください。",
     "Model prices": "モデル価格",
     "Model prices reset successfully": "モデル価格が正常にリセットされました",
     "Model Pricing": "モデル料金",
@@ -3512,6 +3513,7 @@
     "Select all (filtered)": "フィルタ結果をすべて選択(S)",
     "Select all models": "すべてのモデルを選択",
     "Select All Visible": "表示中のすべてを選択",
+    "Select model {{model}}": "モデル {{model}} を選択",
     "Select an operation mode and enter the amount": "操作モードを選択し、金額を入力してください",
     "Select announcement type": "アナウンスメントタイプを選択",
     "Select at least one field to overwrite.": "上書きするフィールドを少なくとも 1 つ選択してください。",
@@ -3849,6 +3851,8 @@
     "Templates appended": "テンプレートが追加されました",
     "Tencent": "テンセント",
     "Termination requested": "終了リクエスト済み",
+    "Test": "テスト",
+    "Test {{count}} selected": "選択済み {{count}} 件をテスト",
     "Test All Channels": "すべてのチャネルをテスト",
     "Test Channel Connection": "チャネル接続をテスト",
     "Test Connection": "接続をテスト",
@@ -3859,6 +3863,7 @@
     "Test Mode": "テストモード",
     "Test Model": "モデルをテスト",
     "Test models and prompts from the browser": "ブラウザでモデルとプロンプトをテスト",
+    "Test selected models": "選択したモデルをテスト",
     "Testing all enabled channels started. Please refresh to see results.": "有効な全チャネルのテストを開始しました。結果を確認するにはページを更新してください。",
     "Testing...": "テスト中...",
     "Text": "テキスト",

web/default/src/i18n/locales/ru.json

@@ -2363,6 +2363,7 @@
     "Model performance metrics": "Метрики производительности моделей",
     "Model Price": "Цена модели",
     "Model Price Not Configured": "Цена модели не настроена",
+    "Model price is not configured. Please complete model pricing in settings.": "Цена модели не настроена. Заполните тарификацию модели в настройках.",
     "Model prices": "Цены моделей",
     "Model prices reset successfully": "Цены моделей успешно сброшены",
     "Model Pricing": "Тарификация моделей",
@@ -3512,6 +3513,7 @@
     "Select all (filtered)": "& Выбрать все отфильтрованные",
     "Select all models": "Выбрать все модели",
     "Select All Visible": "Выбрать все видимые",
+    "Select model {{model}}": "Выбрать модель {{model}}",
     "Select an operation mode and enter the amount": "Выберите режим операции и введите сумму",
     "Select announcement type": "Выбрать тип объявления",
     "Select at least one field to overwrite.": "Выберите хотя бы одно поле для перезаписи.",
@@ -3849,6 +3851,8 @@
     "Templates appended": "Шаблоны добавлены",
     "Tencent": "Tencent",
     "Termination requested": "Запрошено завершение",
+    "Test": "Проверить",
+    "Test {{count}} selected": "Проверить {{count}} выбранных",
     "Test All Channels": "Проверить все каналы",
     "Test Channel Connection": "Проверить подключение канала",
     "Test Connection": "Проверить подключение",
@@ -3859,6 +3863,7 @@
     "Test Mode": "Тестовый режим",
     "Test Model": "Проверить модель",
     "Test models and prompts from the browser": "Тестируйте модели и промпты в браузере",
+    "Test selected models": "Проверить выбранные модели",
     "Testing all enabled channels started. Please refresh to see results.": "Тестирование всех включенных каналов начато. Пожалуйста, обновите страницу, чтобы увидеть результаты.",
     "Testing...": "Тестирование...",
     "Text": "Текст",

web/default/src/i18n/locales/vi.json

@@ -2363,6 +2363,7 @@
     "Model performance metrics": "Chỉ số hiệu năng mô hình",
     "Model Price": "Giá mô hình",
     "Model Price Not Configured": "Giá mô hình chưa được cấu hình",
+    "Model price is not configured. Please complete model pricing in settings.": "Giá mô hình chưa được cấu hình. Vui lòng hoàn tất định giá mô hình trong cài đặt.",
     "Model prices": "Giá mô hình",
     "Model prices reset successfully": "Đã đặt lại giá mô hình thành công",
     "Model Pricing": "Định giá mô hình",
@@ -3512,6 +3513,7 @@
     "Select all (filtered)": "Chọn tất cả (đã lọc)",
     "Select all models": "Chọn tất cả mô hình",
     "Select All Visible": "Chọn tất cả hiển thị",
+    "Select model {{model}}": "Chọn mô hình {{model}}",
     "Select an operation mode and enter the amount": "Chọn chế độ thao tác và nhập số tiền",
     "Select announcement type": "Select notification type",
     "Select at least one field to overwrite.": "Chọn ít nhất một trường để ghi đè.",
@@ -3849,6 +3851,8 @@
     "Templates appended": "Đã thêm mẫu",
     "Tencent": "Tencent",
     "Termination requested": "Yêu cầu chấm dứt",
+    "Test": "Kiểm tra",
+    "Test {{count}} selected": "Kiểm tra {{count}} mục đã chọn",
     "Test All Channels": "Kiểm tra tất cả các kênh",
     "Test Channel Connection": "Check channel connection",
     "Test Connection": "Kiểm tra kết nối",
@@ -3859,6 +3863,7 @@
     "Test Mode": "Chế độ thử nghiệm",
     "Test Model": "Kiểm tra Mô hình",
     "Test models and prompts from the browser": "Kiểm thử mô hình và prompt trong trình duyệt",
+    "Test selected models": "Kiểm tra các mô hình đã chọn",
     "Testing all enabled channels started. Please refresh to see results.": "Bắt đầu kiểm tra tất cả các kênh đã kích hoạt. Vui lòng làm mới để xem kết quả.",
     "Testing...": "Đang kiểm tra...",
     "Text": "Văn bản",

web/default/src/i18n/locales/zh.json

@@ -2363,6 +2363,7 @@
     "Model performance metrics": "模型性能指标",
     "Model Price": "模型价格",
     "Model Price Not Configured": "模型价格未配置",
+    "Model price is not configured. Please complete model pricing in settings.": "模型价格未配置，请前往设置补充模型价格。",
     "Model prices": "模型价格",
     "Model prices reset successfully": "模型价格重置成功",
     "Model Pricing": "模型定价",
@@ -3512,6 +3513,7 @@
     "Select all (filtered)": "全选（筛选结果）",
     "Select all models": "选择所有模型",
     "Select All Visible": "全选当前",
+    "Select model {{model}}": "选择模型 {{model}}",
     "Select an operation mode and enter the amount": "选择操作模式并输入金额",
     "Select announcement type": "选择公告类型",
     "Select at least one field to overwrite.": "请选择至少一个要覆盖的字段。",
@@ -3849,6 +3851,8 @@
     "Templates appended": "模板已追加",
     "Tencent": "腾讯",
     "Termination requested": "终止请求",
+    "Test": "测试",
+    "Test {{count}} selected": "测试 {{count}} 个已选择项",
     "Test All Channels": "测试所有渠道",
     "Test Channel Connection": "测试渠道连接",
     "Test Connection": "测试连接",
@@ -3859,6 +3863,7 @@
     "Test Mode": "测试模式",
     "Test Model": "测试模型",
     "Test models and prompts from the browser": "在浏览器中测试模型和提示词",
+    "Test selected models": "测试所选模型",
     "Testing all enabled channels started. Please refresh to see results.": "测试所有启用的通道已开始。请刷新以查看结果。",
     "Testing...": "测试中...",
     "Text": "文本",