feat(web): update Tabs component styles for improved UI consistency

- Refactored TabsList and TabsTrigger components to enhance styling and responsiveness.
- Updated class names to ensure consistent appearance across different tabs, including adjustments for active states and background properties.
- Improved accessibility and visual feedback for active tab selections in the ResourcePage and AutomationLibraryGridView components.

Co-authored-by: Cursor <[email protected]>

.cursor/rules/frontend-ui-patterns.mdc

@@ -81,19 +81,26 @@ Max 1 primary (`default`) на экран; остальные `outline` / `ghost
 Эталон: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2).
 
 ```tsx
-<TabsList variant="line" className="h-auto! gap-5 overflow-visible">
+<TabsList variant="line" className="h-auto gap-5 bg-transparent p-0">
   <TabsTrigger
     value="…"
-    className="data-active:text-foreground gap-2 px-0 pb-3 text-sm font-medium [&[data-active]>span:last-child]:bg-foreground [&[data-active]>span:last-child]:text-background"
+    className={cn(
+      'h-auto flex-none gap-2 rounded-none bg-transparent px-0 pb-3 text-sm shadow-none',
+      'text-muted-foreground hover:text-foreground',
+      'data-active:bg-transparent data-active:text-foreground data-active:shadow-none',
+      'dark:data-active:border-transparent dark:data-active:bg-transparent',
+      'after:bottom-0 after:h-0.5',
+    )}
   >
     <span>Label</span>
-    <span className="bg-muted text-muted-foreground … tabular-nums">{count}</span>
+    <span className="bg-muted text-muted-foreground … tabular-nums rounded-md">{count}</span>
   </TabsTrigger>
 </TabsList>
 ```
 
-- `h-auto!` снимает клип underline у `TabsList` (`h-8`)
+- Active = яркий текст + **белый underline** (`after:`), без фона/инвертированного badge
-- Active count — контрастный chip (`bg-foreground` / `text-background`)
+- Count pill всегда `bg-muted` (как в preview)
+- `h-auto` / `flex-none` / `data-active:bg-transparent` — снять клип `h-8` и `dark:bg-input/30` у примитива
 - Active state — Base UI `data-active`, не Radix `data-[state=active]`
 
 ## Sidebar

apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx

@@ -562,12 +562,12 @@ export function AutomationLibraryGridView() {
                   resetPagination()
                 }}
               >
-                <TabsList variant="line" className="gap-5">
+                <TabsList variant="line" className="h-auto gap-5 bg-transparent p-0">
                   {AUTOMATION_TABS.map((tab) => (
                     <TabsTrigger
                       key={tab.value}
                       value={tab.value}
-                      className="gap-2 px-0 pb-3 text-sm"
+                      className="text-muted-foreground hover:text-foreground data-active:bg-transparent data-active:text-foreground dark:data-active:border-transparent dark:data-active:bg-transparent h-auto flex-none gap-2 rounded-none bg-transparent px-0 pb-3 text-sm shadow-none after:bottom-0 after:h-0.5 data-active:shadow-none"
                     >
                       <span>{tab.label}</span>
                       <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">

apps/web/src/components/reui-kit/resource-page.tsx

@@ -34,6 +34,7 @@ import { Separator } from '@cfdm/ui/components/separator'
 import { Skeleton } from '@cfdm/ui/components/skeleton'
 import { Tabs, TabsList, TabsTrigger } from '@cfdm/ui/components/tabs'
 import { Alert, AlertDescription, AlertTitle } from '@cfdm/ui/components/alert'
+import { cn } from '@cfdm/ui/lib/utils'
 import { EmptyState } from '@/components/empty-state'
 import { applyFiltersToData } from './filter-utils'
 import { debugAgentLog } from '@/lib/debug-agent-log'
@@ -289,17 +290,24 @@ export function ResourcePage<T extends object>({
         <FramePanel className="p-0 shadow-none!">
           {tabs && tabs.length > 0 ? (
             <>
-              <div className="overflow-visible px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
+              {/* Line tabs как @reui/data-grid-filtering-2: muted count + underline */}
+              <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
                 <Tabs value={activeTab} onValueChange={handleTabChange}>
                   <TabsList
                     variant="line"
-                    className="h-auto! gap-5 overflow-visible"
+                    className="h-auto gap-5 bg-transparent p-0"
                   >
                     {tabs.map((tab) => (
                       <TabsTrigger
                         key={tab.id}
                         value={tab.id}
-                        className="data-active:text-foreground gap-2 px-0 pb-3 text-sm font-medium [&[data-active]>span:last-child]:bg-foreground [&[data-active]>span:last-child]:text-background"
+                        className={cn(
+                          'h-auto flex-none gap-2 rounded-none bg-transparent px-0 pb-3 text-sm shadow-none',
+                          'text-muted-foreground hover:text-foreground',
+                          'data-active:bg-transparent data-active:text-foreground data-active:shadow-none',
+                          'dark:data-active:border-transparent dark:data-active:bg-transparent',
+                          'after:bottom-0 after:h-0.5',
+                        )}
                       >
                         <span>{tab.label}</span>
                         <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">