fix(ui): выровнять очередь внимания дашборда под Frame и IconTile

Соседние Frame-колонки как в EvoBGP вместо вложенной оболочки; compact empty через IconTile elevated; счётчики ReUI Badge.

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

apps/web/src/components/empty-state.tsx

@@ -1,5 +1,6 @@
 import { InboxIcon, type LucideIcon } from 'lucide-react'
 import { IconStack } from '@/components/reui/icon-stack'
+import { IconTile } from '@/components/reui/icon-tile'
 import {
   Empty,
   EmptyContent,
@@ -46,20 +47,29 @@ export function EmptyState({
         !centered && className,
       )}
     >
-      <EmptyHeader className="gap-5 text-center">
+      <EmptyHeader className={cn('text-center', stackedIcon ? 'gap-5' : 'gap-3')}>
         <EmptyMedia className="mb-0">
           {stackedIcon ? (
             <IconStack aria-hidden="true" className="h-14 w-12">
               <Icon strokeWidth={1.9} aria-hidden="true" className="size-5" />
             </IconStack>
           ) : (
-            <span className="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-lg [&_svg]:size-5">
-              <Icon aria-hidden="true" />
-            </span>
+            <IconTile
+              variant="elevated"
+              className="size-10.5 text-muted-foreground"
+              aria-hidden="true"
+            >
+              <Icon />
+            </IconTile>
           )}
         </EmptyMedia>
         <div className="flex flex-col items-center gap-2">
-          <EmptyTitle className="text-base font-semibold tracking-tight">
+          <EmptyTitle
+            className={cn(
+              'font-semibold tracking-tight',
+              stackedIcon ? 'text-base' : 'text-sm',
+            )}
+          >
             {title}
           </EmptyTitle>
           {description ? (

apps/web/src/components/reui-kit/attention-queue.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { EmptyState } from '@/components/empty-state'
+import { Badge } from '@/components/reui/badge'
+import {
+  Frame,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { IconTile } from '@/components/reui/icon-tile'
+import { cn } from '@cfdm/ui/lib/utils'
+
+/**
+ * Sibling Frame columns for dashboard attention queue.
+ * Preview: https://reui.io/preview/base/dashboard-1 · https://reui.io/preview/base/stats-12
+ * Docs: https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/icon-tile
+ */
+export interface AttentionQueueColumn {
+  id: string
+  title: string
+  icon: LucideIcon
+  iconClassName?: string
+  count: number
+  countVariant?: 'destructive' | 'warning' | 'secondary' | 'destructive-light' | 'warning-light'
+  emptyTitle: string
+  emptyDescription: string
+  emptyAction?: ReactNode
+  children: ReactNode
+}
+
+interface AttentionQueueProps {
+  columns: AttentionQueueColumn[]
+  className?: string
+}
+
+const DEFAULT_ICON_CLASS = 'text-muted-foreground [&_svg]:text-current'
+
+export function AttentionQueue({ columns, className }: AttentionQueueProps) {
+  return (
+    <div
+      className={cn(
+        'grid min-w-0 items-start gap-2 @3xl:grid-cols-3',
+        className,
+      )}
+    >
+      {columns.map((column) => {
+        const Icon = column.icon
+        const isEmpty = column.count === 0
+        return (
+          <Frame key={column.id} dense spacing="sm" className="min-w-0 w-full">
+            <FrameHeader>
+              <div className="flex min-w-0 items-center gap-2">
+                <IconTile
+                  variant="elevated"
+                  size="sm"
+                  className={cn(DEFAULT_ICON_CLASS, column.iconClassName)}
+                  aria-hidden="true"
+                >
+                  <Icon />
+                </IconTile>
+                <FrameTitle className="min-w-0 truncate">{column.title}</FrameTitle>
+                {column.count > 0 ? (
+                  <Badge
+                    size="sm"
+                    variant={column.countVariant ?? 'secondary'}
+                    className="tabular-nums"
+                  >
+                    {column.count}
+                  </Badge>
+                ) : null}
+              </div>
+            </FrameHeader>
+            <FramePanel className="min-w-0">
+              {isEmpty ? (
+                <div className="flex min-h-28 items-center justify-center py-4">
+                  <EmptyState
+                    icon={Icon}
+                    title={column.emptyTitle}
+                    description={column.emptyDescription}
+                    action={column.emptyAction}
+                    centered={false}
+                    stackedIcon={false}
+                  />
+                </div>
+              ) : (
+                column.children
+              )}
+            </FramePanel>
+          </Frame>
+        )
+      })}
+    </div>
+  )
+}

apps/web/src/components/reui-kit/index.ts

@@ -13,6 +13,7 @@ export {
   type OpsKpiCard,
 } from './kpi-stat-grid'
 export { QuickActionGrid, type QuickActionItem } from './quick-action-grid'
+export { AttentionQueue, type AttentionQueueColumn } from './attention-queue'
 export { OpsDashboard } from './ops-dashboard'
 export { KanbanBoard, KanbanBoardSkeleton, type KanbanBoardProps, type KanbanColumnConfig } from './kanban-board'
 export { DetailPanel, type DetailMetricCard } from './detail-panel'

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -1,11 +1,4 @@
 import type { ReactNode } from 'react'
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
 import { Skeleton } from '@cfdm/ui/components/skeleton'
 import { KpiStatGrid, type KpiStatCard } from './kpi-stat-grid'
 
@@ -17,10 +10,18 @@ interface OpsDashboardProps {
   afterKpi?: ReactNode
   charts: ReactNode
   queue: ReactNode
+  queueTitle?: string
+  queueDescription?: string
   isLoading?: boolean
 }
 
-/** Denser stack for KPI / charts / queue. PageHeader lives outside via PageShell. */
+/**
+ * Ops dashboard: KPI → optional Quick Actions → charts → queue.
+ * Queue is a sibling Frame grid — never wrap Frames inside another Frame.
+ * @see https://reui.io/preview/base/dashboard-1
+ * @see https://reui.io/preview/base/stats-12
+ * @see https://reui.io/docs/components/base/frame
+ */
 const rootClassName =
   'text-foreground @container flex w-full flex-col gap-2 md:gap-3'
 
@@ -32,7 +33,11 @@ function OpsDashboardSkeleton() {
         <Skeleton className="h-64 w-full rounded-xl" />
         <Skeleton className="h-64 w-full rounded-xl" />
       </div>
-      <Skeleton className="h-48 w-full rounded-xl" />
+      <div className="grid gap-2 @3xl:grid-cols-3">
+        <Skeleton className="h-40 w-full rounded-xl" />
+        <Skeleton className="h-40 w-full rounded-xl" />
+        <Skeleton className="h-40 w-full rounded-xl" />
+      </div>
     </div>
   )
 }
@@ -42,6 +47,8 @@ export function OpsDashboard({
   afterKpi,
   charts,
   queue,
+  queueTitle = 'Требуют внимания',
+  queueDescription = 'Проблемы health-check, истекающие сертификаты и домены без группы',
   isLoading = false,
 }: OpsDashboardProps) {
   if (isLoading) {
@@ -63,16 +70,16 @@ export function OpsDashboard({
         {charts}
       </section>
 
-      <section aria-label="Требуют внимания">
-        <Frame dense spacing="sm" className="w-full">
-          <FrameHeader>
-            <FrameTitle>Требуют внимания</FrameTitle>
-            <FrameDescription>
-              Проблемы health-check, истекающие сертификаты и домены без группы
-            </FrameDescription>
-          </FrameHeader>
-          <FramePanel>{queue}</FramePanel>
-        </Frame>
+      <section aria-label={queueTitle} className="flex min-w-0 flex-col gap-2">
+        <div className="flex min-w-0 flex-col gap-1">
+          <h2 className="text-sm font-semibold tracking-tight">{queueTitle}</h2>
+          {queueDescription ? (
+            <p className="text-muted-foreground max-w-prose text-sm">
+              {queueDescription}
+            </p>
+          ) : null}
+        </div>
+        {queue}
       </section>
     </div>
   )