feat(table): support card layout

web/default/src/components/provider-badge.tsx

@@ -24,6 +24,8 @@ type ProviderBadgeProps = Omit<StatusBadgeProps, 'children' | 'label'> & {
   iconKey?: string | null
   iconSize?: number
   label: string
+  /** Color the label text by provider name. Set false for a neutral label. */
+  colorText?: boolean
 }
 
 export function ProviderBadge({
@@ -31,6 +33,7 @@ export function ProviderBadge({
   iconKey,
   iconSize = 14,
   label,
+  colorText = true,
   ...badgeProps
 }: ProviderBadgeProps) {
   const icon = iconKey ? getLobeIcon(iconKey, iconSize) : null
@@ -43,7 +46,8 @@ export function ProviderBadge({
       {icon && <span className='flex shrink-0 items-center'>{icon}</span>}
       <StatusBadge
         label={label}
-        autoColor={label}
+        autoColor={colorText ? label : undefined}
+        variant={colorText ? undefined : 'neutral'}
         size='sm'
         className={cn('min-w-0 shrink overflow-hidden', !icon && 'pl-0')}
         {...badgeProps}