feat(ui): improve table controls and analytics filters

web/default/src/features/pricing/components/pricing-columns.tsx

@@ -8,6 +8,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 import { DataTableColumnHeader } from '@/components/data-table/column-header'
+import { GroupBadge } from '@/components/group-badge'
 import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants'
 import { parseTags } from '../lib/filters'
 import { isTokenBasedModel } from '../lib/model-helpers'
@@ -49,6 +50,28 @@ function renderLimitedTags(
   )
 }
 
+function renderLimitedGroupBadges(
+  groups: string[],
+  maxDisplay: number = 2
+): React.ReactNode {
+  if (groups.length === 0)
+    return <span className='text-muted-foreground/50 text-xs'>—</span>
+
+  const displayed = groups.slice(0, maxDisplay)
+  const remaining = groups.length - maxDisplay
+
+  return (
+    <div className='flex max-w-full items-center gap-1 overflow-hidden'>
+      {displayed.map((group) => (
+        <GroupBadge key={group} group={group} size='sm' />
+      ))}
+      {remaining > 0 && (
+        <span className='text-muted-foreground/50 text-xs'>+{remaining}</span>
+      )}
+    </div>
+  )
+}
+
 export function usePricingColumns(
   options: PricingColumnsOptions = {}
 ): ColumnDef<PricingModel>[] {
@@ -312,11 +335,15 @@ export function usePricingColumns(
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
-                <div>{renderLimitedTags(groups, 2)}</div>
+                <div>{renderLimitedGroupBadges(groups, 2)}</div>
               </TooltipTrigger>
               {groups.length > 2 && (
                 <TooltipContent side='top' className='max-w-[280px] p-2'>
-                  <span className='text-xs'>{groups.join(', ')}</span>
+                  <div className='flex flex-wrap gap-1'>
+                    {groups.map((group) => (
+                      <GroupBadge key={group} group={group} size='sm' />
+                    ))}
+                  </div>
                 </TooltipContent>
               )}
             </Tooltip>