refactor: enhance UI components with PanelCard integration and improved layout consistency

Updated multiple components to utilize the new PanelCard for better organization and presentation of content. Refactored DataGridShell, DataGridCard, and various analytics components to streamline layouts and enhance user experience. Adjusted styles for consistency across components, including pagination and toolbar elements, ensuring a cohesive interface throughout the application.

apps/web/src/components/access/access-api-keys-grid.tsx

@@ -4,8 +4,9 @@ import { useMemo } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
-import { Badge } from '@/components/reui/badge'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
@@ -33,16 +34,14 @@ export function AccessApiKeysGrid({
       {
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.name} accent="primary" />,
         meta: { headerTitle: 'Имя' },
       },
       {
         accessorKey: 'role',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Роль" />,
         cell: ({ row }) => (
-          <Badge variant="outline" className="font-mono text-xs">
+          <CategoryBadge className="font-mono text-xs">{row.original.role}</CategoryBadge>
-            {row.original.role}
-          </Badge>
         ),
         meta: { headerTitle: 'Роль' },
       },
@@ -71,9 +70,7 @@ export function AccessApiKeysGrid({
         accessorFn: (row) => row.expires_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Истекает" />,
         cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">
+          <DataGridMutedCell>{formatApiKeyDate(row.original.expires_at)}</DataGridMutedCell>
-            {formatApiKeyDate(row.original.expires_at)}
-          </span>
         ),
         meta: { headerTitle: 'Истекает' },
       },
@@ -82,9 +79,7 @@ export function AccessApiKeysGrid({
         accessorFn: (row) => row.last_used_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Последнее использование" />,
         cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">
+          <DataGridMutedCell>{formatApiKeyDate(row.original.last_used_at)}</DataGridMutedCell>
-            {formatApiKeyDate(row.original.last_used_at)}
-          </span>
         ),
         meta: { headerTitle: 'Последнее использование' },
       },

apps/web/src/components/access/api-key-create-dialog.tsx

@@ -2,16 +2,10 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
 import { API_KEY_ROLE_ITEMS } from '@/lib/access/api-key-labels'
@@ -68,48 +62,48 @@ export function ApiKeyCreateDialog({ open, onOpenChange, onCreated }: ApiKeyCrea
   }
 
   return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <FormDrawer
-      <DialogContent className="sm:max-w-sm">
+      open={open}
-        <DialogHeader>
+      onOpenChange={handleOpenChange}
-          <DialogTitle>Новый API-ключ</DialogTitle>
+      title="Новый API-ключ"
-        </DialogHeader>
+      className="sm:max-w-sm"
-        <div className="flex flex-col gap-4 py-2">
+      footer={
-          <div className="flex flex-col gap-2">
+        <>
-            <Label htmlFor="key-name">Имя</Label>
-            <Input
-              id="key-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="CI / оператор UI"
-            />
-          </div>
-          <SelectField
-            id="key-role"
-            label="Роль"
-            items={[...API_KEY_ROLE_ITEMS]}
-            value={role}
-            placeholder="Выберите роль"
-            onValueChange={(v) => v && setRole(v as ApiKeyRole)}
-          />
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="key-expires">Истекает (опционально)</Label>
-            <Input
-              id="key-expires"
-              type="datetime-local"
-              value={expiresLocal}
-              onChange={(e) => setExpiresLocal(e.target.value)}
-            />
-          </div>
-        </div>
-        <DialogFooter>
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
             Отмена
           </Button>
           <LoadingButton onClick={save} loading={createMutation.isPending}>
             Создать
           </LoadingButton>
-        </DialogFooter>
+        </>
-      </DialogContent>
+      }
-    </Dialog>
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="key-name">Имя</Label>
+        <Input
+          id="key-name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="CI / оператор UI"
+        />
+      </div>
+      <SelectField
+        id="key-role"
+        label="Роль"
+        items={[...API_KEY_ROLE_ITEMS]}
+        value={role}
+        placeholder="Выберите роль"
+        onValueChange={(v) => v && setRole(v as ApiKeyRole)}
+      />
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="key-expires">Истекает (опционально)</Label>
+        <Input
+          id="key-expires"
+          type="datetime-local"
+          value={expiresLocal}
+          onChange={(e) => setExpiresLocal(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
   )
 }

apps/web/src/components/analytics/analytics-card-shell.tsx

@@ -1,14 +1,6 @@
 import type { ReactNode } from 'react'
 import { Info } from 'lucide-react'
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@evobgp/ui/components/card'
 import { cn } from '@evobgp/ui/lib/utils'
 import {
   Tooltip,
@@ -16,6 +8,8 @@ import {
   TooltipTrigger,
 } from '@evobgp/ui/components/tooltip'
 
+import { PanelCard } from '@/components/panel-card'
+
 export function AnalyticsCardShell({
   title,
   description,
@@ -33,32 +27,36 @@ export function AnalyticsCardShell({
   className?: string
   children: ReactNode
 }) {
+  const titleNode = (
+    <span className="flex items-center gap-2">
+      {title}
+      {info ? (
+        <Tooltip>
+          <TooltipTrigger
+            className="inline-flex text-muted-foreground transition-colors hover:text-foreground"
+            aria-label="Подробнее"
+          >
+            <Info className="size-3.5" />
+          </TooltipTrigger>
+          <TooltipContent side="top" className="max-w-xs text-xs">
+            {info}
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
+    </span>
+  )
+
   return (
-    <Card className={cn('flex h-full flex-col gap-0 overflow-hidden', className)}>
+    <PanelCard
-      <CardHeader className="flex flex-row items-start justify-between gap-3 border-b py-4">
+      title={titleNode}
-        <div className="min-w-0 space-y-1">
+      description={description}
-          <CardTitle className="flex items-center gap-2 text-base">
+      actions={actions}
-            {title}
+      footer={footer}
-            {info ? (
+      className={cn('overflow-hidden', className)}
-              <Tooltip>
+      contentClassName="flex flex-col gap-4 py-4"
-                <TooltipTrigger
+      footerClassName={footer ? 'gap-2 p-3' : undefined}
-                  className="inline-flex text-muted-foreground transition-colors hover:text-foreground"
+    >
-                  aria-label="Подробнее"
+      {children}
-                >
+    </PanelCard>
-                  <Info className="size-3.5" />
-                </TooltipTrigger>
-                <TooltipContent side="top" className="max-w-xs text-xs">
-                  {info}
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
-          </CardTitle>
-          {description ? <CardDescription>{description}</CardDescription> : null}
-        </div>
-        {actions ? <div className="shrink-0">{actions}</div> : null}
-      </CardHeader>
-      <CardContent className="flex flex-1 flex-col gap-5 p-5">{children}</CardContent>
-      {footer ? <CardFooter className="gap-2 border-t p-4">{footer}</CardFooter> : null}
-    </Card>
   )
 }

apps/web/src/components/analytics/analytics-progress.tsx

@@ -7,10 +7,12 @@ import { cn } from '@evobgp/ui/lib/utils'
 
 export function AnalyticsProgress({
   label,
+  hint,
   value,
   className,
 }: {
   label: string
+  hint?: string
   value: number
   className?: string
 }) {
@@ -21,9 +23,10 @@ export function AnalyticsProgress({
         <span className="text-muted-foreground">{label}</span>
         <span className="font-medium tabular-nums">{clamped}%</span>
       </div>
-      <Progress value={clamped} className="gap-0">
+      {hint ? <p className="text-xs leading-snug text-muted-foreground">{hint}</p> : null}
+      <Progress value={clamped} className="w-full gap-0">
         <ProgressTrack className="h-2">
-          <ProgressIndicator className="bg-foreground" />
+          <ProgressIndicator />
         </ProgressTrack>
       </Progress>
     </div>

apps/web/src/components/analytics/dashboard-network-capacity-card.tsx

@@ -50,14 +50,14 @@ export function DashboardNetworkCapacityCard({
 
   const deltaLabel =
     mode === 'peers'
-      ? `${peers.filter((p) => p.enabled !== false && p.session_state === 'Established').length} Established`
+      ? `${peers.filter((p) => p.enabled !== false && p.session_state === 'Established').length} установлено`
-      : `${speakers.filter((s) => s.live?.agent_ok).length} online`
+      : `${speakers.filter((s) => s.live?.agent_ok).length} в сети`
 
   return (
     <AnalyticsCardShell
       title="Загрузка BGP"
       description="Текущая утилизация сессий по пирам и спикерам"
-      info="Каждый столбец — enabled peer или speaker. Высота отражает Established/online."
+      info="Каждый столбец — включённый пир или спикер. Высота отражает установленную сессию или доступность."
       actions={
         <AnalyticsSegmentControl
           value={mode}

apps/web/src/components/analytics/dashboard-platform-card.tsx

@@ -9,6 +9,7 @@ import { AnalyticsKpiRow } from '@/components/analytics/analytics-kpi-row'
 import { AnalyticsProgress } from '@/components/analytics/analytics-progress'
 import {
   deploymentProgress,
+  deploymentProgressMeta,
   recentPlatformActivity,
 } from '@/lib/metrics'
 import { runningJobCount } from '@/queries/overview'
@@ -48,6 +49,7 @@ export function DashboardPlatformCard({
     peersEnabled > 0 ? Math.round((peersEstablished / peersEnabled) * 100) : null
 
   const deploy = useMemo(() => deploymentProgress(speakers), [speakers])
+  const deployMeta = useMemo(() => deploymentProgressMeta(deploy), [deploy])
   const activity = useMemo(
     () => recentPlatformActivity(jobs, revisions, peers, speakers),
     [jobs, revisions, peers, speakers],
@@ -74,7 +76,7 @@ export function DashboardPlatformCard({
         label:
           bgpPct === null
             ? 'нет включённых пиров'
-            : `${peersEstablished} Established`,
+            : `${peersEstablished} установлено`,
         tone: (bgpPct !== null && bgpPct >= 90
           ? 'success'
           : bgpPct !== null && bgpPct < 70
@@ -87,16 +89,14 @@ export function DashboardPlatformCard({
       value: loading ? '—' : String(riskCount),
       delta: {
         direction: (riskCount > 0 ? 'down' : 'up') as 'up' | 'down',
-        label: riskCount > 0 ? `${failedJobs} задач, ${peersMismatch} mismatch` : 'в норме',
+        label: riskCount > 0 ? `${failedJobs} задач, ${peersMismatch} расхождений` : 'в норме',
         tone: (riskCount > 0 ? 'destructive' : 'success') as 'destructive' | 'success',
       },
     },
   ]
 
-  const progressLabel =
+  const progressLabel = deployMeta.label
-    deploy.mode === 'revision'
+  const progressHint = deployMeta.hint
-      ? `Синхронизация ревизий (${deploy.synced}/${deploy.total})`
-      : `Спикеры online (${deploy.synced}/${deploy.total})`
 
   return (
     <AnalyticsCardShell
@@ -122,7 +122,11 @@ export function DashboardPlatformCard({
       }
     >
       <AnalyticsKpiRow items={kpis} />
-      <AnalyticsProgress label={progressLabel} value={loading ? 0 : deploy.percent} />
+      <AnalyticsProgress
+        label={progressLabel}
+        hint={progressHint}
+        value={loading ? 0 : deploy.percent}
+      />
       <div className="space-y-3">
         <div className="flex items-center justify-between text-sm">
           <span className="text-muted-foreground">Недавняя активность</span>

apps/web/src/components/analytics/monitoring-health-card.tsx

@@ -18,15 +18,15 @@ export function MonitoringHealthCard({
   return (
     <AnalyticsCardShell
       title="Доступность системы"
-      description="Health и readiness checks"
+      description="Проверки живучести и готовности"
-      info="Donut отражает результат GET /v1/health и checks из GET /v1/ready."
+      info="Диаграмма отражает результат GET /v1/health и проверок из GET /v1/ready."
     >
       {loading ? (
         <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
           Загрузка…
         </div>
       ) : (
-        <ChartDonutMetric slices={slices} centerLabel="Checks" centerValue={total} />
+        <ChartDonutMetric slices={slices} centerLabel="Проверки" centerValue={total} />
       )}
     </AnalyticsCardShell>
   )

apps/web/src/components/analytics/network-overview-analytics-card.tsx

@@ -21,29 +21,29 @@ export function NetworkOverviewAnalyticsCard({
   return (
     <AnalyticsCardShell
       title="Сводка BGP"
-      description="Established, online и mismatch по live-данным"
+      description="Установленные сессии, доступность спикеров и расхождения по live-данным"
       info="Снимок текущего состояния пиров и спикеров."
     >
       <AnalyticsKpiRow
         items={[
           {
-            label: 'Пиры Established',
+            label: 'Пиры с установленной сессией',
             value: loading ? '—' : `${net.peersEstablished}/${net.peersEnabled}`,
             delta: {
               direction: net.peersMismatch > 0 ? 'down' : 'up',
-              label: net.peersMismatch > 0 ? `${net.peersMismatch} mismatch` : 'сессии в норме',
+              label: net.peersMismatch > 0 ? `${net.peersMismatch} расхождений` : 'сессии в норме',
               tone: net.peersMismatch > 0 ? 'warning' : 'success',
             },
           },
           {
-            label: 'Спикеры online',
+            label: 'Спикеры в сети',
             value: loading ? '—' : `${net.speakersOnline}/${net.speakersTotal}`,
             delta: {
               direction: net.speakersOnline < net.speakersTotal ? 'down' : 'up',
               label:
                 net.speakersOnline < net.speakersTotal
-                  ? `${net.speakersTotal - net.speakersOnline} offline`
+                  ? `${net.speakersTotal - net.speakersOnline} не в сети`
-                  : 'все online',
+                  : 'все в сети',
               tone: net.speakersOnline < net.speakersTotal ? 'warning' : 'success',
             },
           },

apps/web/src/components/badge-tabs.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react'
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import { cn } from '@evobgp/ui/lib/utils'
 
 import { Badge } from '@/components/reui/badge'
 
@@ -39,9 +40,15 @@ export function BadgeTabs({
       value={value}
       defaultValue={defaultValue}
       onValueChange={onValueChange}
-      className={className}
+      className={cn('w-full', className)}
     >
-      <TabsList variant="line" className={listClassName ?? 'mb-3.5 w-full'}>
+      <TabsList
+        variant="line"
+        className={cn(
+          'mb-4 w-full justify-start gap-6',
+          listClassName,
+        )}
+      >
         {items.map((item) => (
           <TabsTrigger key={item.value} value={item.value} className="gap-2">
             {item.icon}
@@ -54,7 +61,7 @@ export function BadgeTabs({
           </TabsTrigger>
         ))}
       </TabsList>
-      <div className={contentClassName}>{children}</div>
+      <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
     </Tabs>
   )
 }

apps/web/src/components/category-badge.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps, ReactNode } from 'react'
+
+import { Badge } from '@/components/reui/badge'
+
+type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
+
+const TONE_VARIANT: Record<string, BadgeVariant> = {
+  neutral: 'outline',
+  info: 'info-light',
+  warning: 'warning-light',
+  success: 'success-light',
+}
+
+export function ModeBadge({
+  enabled,
+  onLabel = 'включён',
+  offLabel = 'выключен',
+  className,
+}: {
+  enabled: boolean
+  onLabel?: string
+  offLabel?: string
+  className?: string
+}) {
+  return enabled ? (
+    <Badge variant="success-light" size="sm" radius="full" className={className}>
+      {onLabel}
+    </Badge>
+  ) : (
+    <Badge variant="secondary" size="sm" radius="full" className={className}>
+      {offLabel}
+    </Badge>
+  )
+}
+
+export function CategoryBadge({
+  children,
+  tone = 'neutral',
+  className,
+}: {
+  children: ReactNode
+  tone?: keyof typeof TONE_VARIANT
+  className?: string
+}) {
+  return (
+    <Badge variant={TONE_VARIANT[tone]} size="sm" radius="full" className={className}>
+      {children}
+    </Badge>
+  )
+}

apps/web/src/components/confirm-dialog.tsx

@@ -1,53 +1,130 @@
+import { Button } from '@evobgp/ui/components/button'
 import {
-  AlertDialog,
+  Drawer,
-  AlertDialogAction,
+  DrawerClose,
-  AlertDialogCancel,
+  DrawerContent,
-  AlertDialogContent,
+  DrawerDescription,
-  AlertDialogDescription,
+  DrawerHeader,
-  AlertDialogFooter,
+  DrawerTitle,
-  AlertDialogHeader,
+  DrawerTrigger,
-  AlertDialogTitle,
+} from '@evobgp/ui/components/drawer'
-  AlertDialogTrigger,
-} from '@evobgp/ui/components/alert-dialog'
 import type { ReactElement, ReactNode } from 'react'
 
-interface ConfirmDialogProps {
+import {
-  trigger: ReactElement
+  confirmDrawerContentClassName,
+  DrawerActionsFooter,
+} from '@/components/drawer-layout'
+
+type ConfirmDialogBaseProps = {
   title: string
   description?: ReactNode
   confirmLabel?: string
   cancelLabel?: string
   destructive?: boolean
   onConfirm: () => void
+  confirmDisabled?: boolean
+  confirmLoading?: boolean
+  confirmLoadingLabel?: string
 }
 
-export function ConfirmDialog({
+type ConfirmDialogWithTrigger = ConfirmDialogBaseProps & {
-  trigger,
+  trigger: ReactElement
+  open?: never
+  onOpenChange?: never
+}
+
+type ConfirmDialogControlled = ConfirmDialogBaseProps & {
+  trigger?: never
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+type ConfirmDialogProps = ConfirmDialogWithTrigger | ConfirmDialogControlled
+
+function ConfirmDrawerBody({
   title,
   description,
   confirmLabel = 'Подтвердить',
   cancelLabel = 'Отмена',
   destructive,
   onConfirm,
-}: ConfirmDialogProps) {
+  confirmDisabled,
+  confirmLoading,
+  confirmLoadingLabel,
+  controlled,
+}: ConfirmDialogBaseProps & { controlled?: boolean }) {
+  const confirmText =
+    confirmLoading && confirmLoadingLabel
+      ? confirmLoadingLabel
+      : confirmLoading
+        ? `${confirmLabel}…`
+        : confirmLabel
+
   return (
-    <AlertDialog>
+    <>
-      <AlertDialogTrigger render={trigger} />
+      <DrawerHeader className="shrink-0 border-b border-border pb-4">
-      <AlertDialogContent>
+        <DrawerTitle>{title}</DrawerTitle>
-        <AlertDialogHeader>
+        {description ? <DrawerDescription>{description}</DrawerDescription> : null}
-          <AlertDialogTitle>{title}</AlertDialogTitle>
+      </DrawerHeader>
-          {description ? <AlertDialogDescription>{description}</AlertDialogDescription> : null}
+      <DrawerActionsFooter>
-        </AlertDialogHeader>
+        <DrawerClose render={<Button variant="outline" disabled={confirmLoading} />}>
-        <AlertDialogFooter>
+          {cancelLabel}
-          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
+        </DrawerClose>
-          <AlertDialogAction
+        {controlled ? (
+          <Button
             variant={destructive ? 'destructive' : 'default'}
+            disabled={confirmDisabled || confirmLoading}
             onClick={onConfirm}
           >
-            {confirmLabel}
+            {confirmText}
-          </AlertDialogAction>
+          </Button>
-        </AlertDialogFooter>
+        ) : (
-      </AlertDialogContent>
+          <DrawerClose
-    </AlertDialog>
+            render={
+              <Button
+                variant={destructive ? 'destructive' : 'default'}
+                disabled={confirmDisabled || confirmLoading}
+              />
+            }
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </DrawerClose>
+        )}
+      </DrawerActionsFooter>
+    </>
+  )
+}
+
+export function ConfirmDialog(props: ConfirmDialogProps) {
+  const bodyProps: ConfirmDialogBaseProps = {
+    title: props.title,
+    description: props.description,
+    confirmLabel: props.confirmLabel,
+    cancelLabel: props.cancelLabel,
+    destructive: props.destructive,
+    onConfirm: props.onConfirm,
+    confirmDisabled: props.confirmDisabled,
+    confirmLoading: props.confirmLoading,
+    confirmLoadingLabel: props.confirmLoadingLabel,
+  }
+
+  if (props.trigger) {
+    return (
+      <Drawer swipeDirection="right">
+        <DrawerTrigger render={props.trigger} />
+        <DrawerContent className={confirmDrawerContentClassName}>
+          <ConfirmDrawerBody {...bodyProps} />
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Drawer open={props.open} onOpenChange={props.onOpenChange} swipeDirection="right">
+      <DrawerContent className={confirmDrawerContentClassName}>
+        <ConfirmDrawerBody {...bodyProps} controlled />
+      </DrawerContent>
+    </Drawer>
   )
 }

apps/web/src/components/dashboard/dashboard-network-panel.tsx

@@ -28,10 +28,10 @@ export function DashboardNetworkPanel({
   const m = aggregateNetworkMetrics(peers, speakers)
   return (
     <div className="flex flex-col gap-2 p-3">
-      <Row label="Пиры Established" value={`${m.peersEstablished} / ${m.peersEnabled}`} />
+      <Row label="Пиры с установленной сессией" value={`${m.peersEstablished} / ${m.peersEnabled}`} />
-      <Row label="Спикеры online" value={`${m.speakersOnline} / ${m.speakersTotal}`} />
+      <Row label="Спикеры в сети" value={`${m.speakersOnline} / ${m.speakersTotal}`} />
       {m.peersMismatch > 0 ? (
-        <Row label="Mismatches" value={String(m.peersMismatch)} variant="warning" />
+        <Row label="Расхождения сессий" value={String(m.peersMismatch)} variant="warning" />
       ) : null}
     </div>
   )

apps/web/src/components/dashboard/dashboard-quick-actions.tsx

@@ -2,18 +2,17 @@ import { Link } from '@tanstack/react-router'
 import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { CardFooter } from '@evobgp/ui/components/card'
 
 export function DashboardQuickActions() {
   return (
-    <CardFooter className="flex flex-wrap gap-2 border-t-0 bg-transparent">
+    <div className="flex flex-wrap gap-2">
       <Button variant="outline" size="sm" type="button" render={<Link to="/modules" />}>
         <Plus className="size-4" />
         Создать модуль
       </Button>
       <Button variant="outline" size="sm" type="button" render={<Link to="/directories" />}>
         <Tags className="size-4" />
-        Добавить community
+        Добавить BGP-сообщество
       </Button>
       <Button variant="outline" size="sm" type="button" render={<Link to="/network" search={{ tab: 'overview' }} />}>
         <Network className="size-4" />
@@ -30,12 +29,12 @@ export function DashboardQuickActions() {
         render={<Link to="/operations" search={{ tab: 'revisions' }} />}
       >
         <Play className="size-4" />
-        Деплой (Apply)
+        Деплой
       </Button>
       <Button variant="outline" size="sm" type="button" render={<Link to="/monitoring" search={{ tab: 'system' }} />}>
         <Gauge className="size-4" />
         Мониторинг
       </Button>
-    </CardFooter>
+    </div>
   )
 }

apps/web/src/components/dashboard/dashboard-recent-jobs-grid.tsx

@@ -1,22 +1,15 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
+import { jobKindRu } from '@/lib/ui-labels'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { JobRow } from '@/types/api'
 
-function StatusText({ status }: { status: string }) {
-  const cls =
-    status === 'succeeded'
-      ? 'text-success'
-      : status === 'failed' || status === 'cancelled'
-        ? 'text-destructive'
-        : 'text-muted-foreground'
-  return <span className={`text-xs font-medium ${cls}`}>{status}</span>
-}
-
 export function DashboardRecentJobsGrid({
   jobs,
   nameById,
@@ -34,21 +27,22 @@ export function DashboardRecentJobsGrid({
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
         cell: ({ row }) => (
-          <div className="min-w-0">
+          <DataGridPrimaryCell
-            <div className="truncate font-mono text-xs text-muted-foreground">{row.original.kind}</div>
+            title={jobKindRu(row.original.kind)}
-            {row.original.meta?.module_id ? (
+            accent="mono"
-              <div className="truncate text-xs">
+            subtitle={
-                {nameById.get(String(row.original.meta.module_id)) ?? ''}
+              row.original.meta?.module_id
-              </div>
+                ? (nameById.get(String(row.original.meta.module_id)) ?? undefined)
-            ) : null}
+                : undefined
-          </div>
+            }
+          />
         ),
         meta: { headerTitle: 'Вид' },
       },
       {
         accessorKey: 'status',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) => <StatusText status={row.original.status} />,
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
         meta: { headerTitle: 'Статус' },
       },
     ],
@@ -62,7 +56,7 @@ export function DashboardRecentJobsGrid({
       const moduleName = row.meta?.module_id
         ? (nameById.get(String(row.meta.module_id)) ?? '')
         : ''
-      return `${row.kind} ${row.status} ${moduleName}`
+      return `${jobKindRu(row.kind)} ${row.status} ${moduleName}`
     },
     getRowId: (row) => row.job_id,
     pageSize: 8,

apps/web/src/components/dashboard/dashboard-recent-revisions-grid.tsx

@@ -1,6 +1,7 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
@@ -23,9 +24,7 @@ export function DashboardRecentRevisionsGrid({
         accessorFn: (row) => row.id,
         header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
         cell: ({ row }) => (
-          <span className="truncate font-mono text-xs text-muted-foreground">
+          <DataGridPrimaryCell title={`${row.original.id.slice(0, 10)}…`} accent="mono" />
-            {row.original.id.slice(0, 10)}…
-          </span>
         ),
         meta: { headerTitle: 'ID' },
       },
@@ -33,9 +32,9 @@ export function DashboardRecentRevisionsGrid({
         accessorKey: 'created_at',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
         cell: ({ row }) => (
-          <span className="text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {new Date(row.original.created_at).toLocaleString('ru-RU')}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Создана' },
       },

apps/web/src/components/data-grid-cell.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+
+const ACCENT_CLASS = {
+  primary: 'font-medium text-primary',
+  default: 'font-medium text-foreground',
+  mono: 'font-mono text-sm text-primary',
+} as const
+
+export function DataGridPrimaryCell({
+  title,
+  subtitle,
+  accent = 'default',
+  className,
+}: {
+  title: ReactNode
+  subtitle?: ReactNode
+  accent?: keyof typeof ACCENT_CLASS
+  className?: string
+}) {
+  return (
+    <div className={cn('flex min-w-0 flex-col gap-0.5', className)}>
+      <span className={cn('truncate', ACCENT_CLASS[accent])}>{title}</span>
+      {subtitle ? (
+        <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
+      ) : null}
+    </div>
+  )
+}
+
+export function DataGridMutedCell({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <span className={cn('whitespace-nowrap text-xs text-muted-foreground', className)}>
+      {children}
+    </span>
+  )
+}

apps/web/src/components/data-grid-shell.tsx

@@ -1,13 +1,15 @@
 import type { ReactNode } from 'react'
 import type { Table } from '@tanstack/react-table'
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { cn } from '@evobgp/ui/lib/utils'
 
 import { DataGridToolbar } from '@/components/data-grid-toolbar'
+import { PanelCard, panelCardContentFlushClassName, panelCardFooterClassName } from '@/components/panel-card'
 import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
 import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
 import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
 import {
+  DATA_GRID_MESSAGES_RU,
   DATA_GRID_PAGINATION_RU,
   DATA_GRID_TABLE_LAYOUT,
 } from '@/lib/data-grid-defaults'
@@ -38,7 +40,8 @@ export function DataGridShell<TData extends object>({
       table={table}
       recordCount={recordCount}
       isLoading={isLoading}
-      emptyMessage={emptyMessage}
+      emptyMessage={emptyMessage ?? DATA_GRID_MESSAGES_RU.emptyMessage}
+      loadingMessage={DATA_GRID_MESSAGES_RU.loadingMessage}
       tableLayout={tableLayout}
       className={className}
       onRowClick={onRowClick}
@@ -46,7 +49,11 @@ export function DataGridShell<TData extends object>({
       <DataGridContainer>
         <DataGridTable />
       </DataGridContainer>
-      {showPagination ? <DataGridPagination {...DATA_GRID_PAGINATION_RU} /> : null}
+      {showPagination ? (
+        <div className={cn(panelCardFooterClassName, 'px-3 py-2')}>
+          <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
+        </div>
+      ) : null}
     </DataGrid>
   )
 }
@@ -60,20 +67,16 @@ interface DataGridCardProps {
 }
 
 export function DataGridCard({ title, description, actions, children, className }: DataGridCardProps) {
-  const hasHeader = Boolean(title || description || actions)
   return (
-    <Card className={className ?? 'gap-0'}>
+    <PanelCard
-      {hasHeader ? (
+      title={title}
-        <CardHeader className="flex flex-row items-center justify-between border-b py-3">
+      description={description}
-          <div className="flex flex-col gap-0.5">
+      actions={actions}
-            {title ? <CardTitle className="text-base">{title}</CardTitle> : null}
+      className={className}
-            {description ? <CardDescription>{description}</CardDescription> : null}
+      contentClassName={panelCardContentFlushClassName}
-          </div>
+    >
-          {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+      {children}
-        </CardHeader>
+    </PanelCard>
-      ) : null}
-      <CardContent className="p-0">{children}</CardContent>
-    </Card>
   )
 }
 

apps/web/src/components/data-grid-toolbar.tsx

@@ -28,7 +28,7 @@ export function DataGridToolbar({
   className,
 }: DataGridToolbarProps) {
   return (
-    <div className={`flex flex-wrap items-center gap-2 border-b px-3 py-3 ${className ?? ''}`}>
+    <div className={`flex flex-wrap items-center gap-2 border-b px-3 py-2 ${className ?? ''}`}>
       <Field className="min-w-[200px] flex-1">
         <InputGroup>
           <InputGroupAddon align="inline-start">

apps/web/src/components/directories/directories-communities-grid.tsx

@@ -1,8 +1,8 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
+import { CategoryBadge } from '@/components/category-badge'
-
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
@@ -20,20 +20,22 @@ export function DirectoriesCommunitiesGrid({
       {
         accessorKey: 'title',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.title}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.title} accent="primary" />,
         meta: { headerTitle: 'Название' },
       },
       {
         accessorKey: 'community',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Значение" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.community}</span>,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell title={row.original.community} accent="mono" />
+        ),
         meta: { headerTitle: 'Значение' },
       },
       {
         id: 'type',
         enableSorting: false,
         header: 'Тип',
-        cell: () => <Badge variant="outline">community</Badge>,
+        cell: () => <CategoryBadge>community</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
     ],

apps/web/src/components/directories/directories-doh-grid.tsx

@@ -1,8 +1,8 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
+import { CategoryBadge } from '@/components/category-badge'
-
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
@@ -21,20 +21,26 @@ export function DirectoriesDohGrid({
         id: 'name',
         accessorFn: (row) => row.name ?? row.url,
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.name ?? row.original.url}</span>,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell
+            title={row.original.name ?? row.original.url}
+            subtitle={row.original.name ? row.original.url : undefined}
+            accent="primary"
+          />
+        ),
         meta: { headerTitle: 'Название' },
       },
       {
         accessorKey: 'url',
         header: ({ column }) => <DataGridColumnHeader column={column} title="URL" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.url}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.url} accent="mono" />,
         meta: { headerTitle: 'URL' },
       },
       {
         id: 'default',
         enableSorting: false,
         header: 'По умолчанию',
-        cell: () => <Badge variant="outline">—</Badge>,
+        cell: () => <CategoryBadge>—</CategoryBadge>,
         meta: { headerTitle: 'По умолчанию' },
       },
     ],

apps/web/src/components/drawer-layout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import { DrawerFooter } from '@evobgp/ui/components/drawer'
+
+/** Shared footer layout for right-side form and confirm drawers. */
+export function DrawerActionsFooter({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <DrawerFooter
+      className={cn(
+        'mt-0 shrink-0 border-t border-border bg-muted/50 p-4',
+        className,
+      )}
+    >
+      <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
+        {children}
+      </div>
+    </DrawerFooter>
+  )
+}
+
+export const formDrawerContentClassName =
+  'flex h-full max-h-dvh flex-col sm:max-w-lg'
+
+export const confirmDrawerContentClassName = 'flex h-auto max-h-dvh flex-col sm:max-w-sm'

apps/web/src/components/firewall/firewall-clients-grid.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
@@ -42,12 +43,11 @@ export function FirewallClientsGrid({
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
         cell: ({ row }) => (
-          <div>
+          <DataGridPrimaryCell
-            <div className="font-medium">{row.original.name}</div>
+            title={row.original.name}
-            <div className="text-muted-foreground text-xs">
+            subtitle={row.original.hostname || row.original.token_prefix}
-              {row.original.hostname || row.original.token_prefix}
+            accent="primary"
-            </div>
+          />
-          </div>
         ),
         meta: { headerTitle: 'Имя' },
       },
@@ -60,21 +60,21 @@ export function FirewallClientsGrid({
       {
         id: 'last_seen_at',
         accessorFn: (row) => row.last_seen_at ?? '',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Last seen" />,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Последняя активность" />,
         cell: ({ row }) => (
-          <span className="text-xs">{row.original.last_seen_at?.slice(0, 19) ?? '—'}</span>
+          <DataGridMutedCell>{row.original.last_seen_at?.slice(0, 19) ?? '—'}</DataGridMutedCell>
         ),
         sortingFn: (a, b) => {
           const av = a.original.last_seen_at ?? ''
           const bv = b.original.last_seen_at ?? ''
           return av.localeCompare(bv)
         },
-        meta: { headerTitle: 'Last seen' },
+        meta: { headerTitle: 'Последняя активность' },
       },
       {
         id: 'apply',
         enableSorting: false,
-        header: 'Apply',
+        header: 'Применение',
         cell: ({ row }) => {
           const c = row.original
           return (
@@ -84,7 +84,7 @@ export function FirewallClientsGrid({
             </span>
           )
         },
-        meta: { headerTitle: 'Apply' },
+        meta: { headerTitle: 'Применение' },
       },
       {
         id: 'packets',

apps/web/src/components/firewall/firewall-rule-create-dialog.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { FormDrawer } from '@/components/form-drawer'
+import { LoadingButton } from '@/components/loading-button'
+import { CommunitySelect } from '@/components/modules/community-select'
+import { SelectField } from '@/components/select-field'
+import { useCreateFirewallRule } from '@/queries/firewall'
+import type { BgpCommunity } from '@/types/api'
+
+const FIREWALL_ACTION_ITEMS = [
+  { value: 'block', label: 'block' },
+  { value: 'accept', label: 'accept' },
+] as const
+
+interface FirewallRuleCreateDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  communities: BgpCommunity[]
+}
+
+export function FirewallRuleCreateDialog({
+  open,
+  onOpenChange,
+  communities,
+}: FirewallRuleCreateDialogProps) {
+  const createMutation = useCreateFirewallRule()
+  const [action, setAction] = useState<'block' | 'accept'>('block')
+  const [communityId, setCommunityId] = useState<string | null>(null)
+  const [comment, setComment] = useState('')
+
+  useEffect(() => {
+    if (!open) return
+    setAction('block')
+    setCommunityId(null)
+    setComment('')
+  }, [open])
+
+  async function save() {
+    try {
+      await createMutation.mutateAsync({
+        scope: 'tenant',
+        action,
+        community_id: communityId,
+        comment: comment.trim(),
+      })
+      onOpenChange(false)
+    } catch {
+      // toast handled in mutation
+    }
+  }
+
+  return (
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Новое правило"
+      className="sm:max-w-md"
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton type="button" onClick={save} loading={createMutation.isPending}>
+            Добавить
+          </LoadingButton>
+        </>
+      }
+    >
+      <SelectField
+        id="fw-rule-action"
+        label="Действие"
+        items={[...FIREWALL_ACTION_ITEMS]}
+        value={action}
+        placeholder="Выберите действие"
+        onValueChange={(v) => v && setAction(v as 'block' | 'accept')}
+      />
+      <CommunitySelect
+        id="fw-rule-community"
+        label="Community"
+        value={communityId}
+        onValueChange={setCommunityId}
+        communities={communities}
+        nullable
+        placeholder="Все communities"
+      />
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="fw-rule-comment">Комментарий</Label>
+        <Input
+          id="fw-rule-comment"
+          placeholder="Комментарий"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
+  )
+}

apps/web/src/components/form-drawer.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from '@evobgp/ui/components/drawer'
+import { ScrollArea } from '@evobgp/ui/components/scroll-area'
+
+import {
+  DrawerActionsFooter,
+  formDrawerContentClassName,
+} from '@/components/drawer-layout'
+
+interface FormDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+  children: ReactNode
+  footer: ReactNode
+  className?: string
+}
+
+export function FormDrawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  className,
+}: FormDrawerProps) {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} swipeDirection="right">
+      <DrawerContent className={cn(formDrawerContentClassName, className)}>
+        <DrawerHeader className="shrink-0 border-b border-border pb-4">
+          <DrawerTitle>{title}</DrawerTitle>
+          {description ? <DrawerDescription>{description}</DrawerDescription> : null}
+        </DrawerHeader>
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="space-y-4 px-4 py-4">{children}</div>
+        </ScrollArea>
+        <DrawerActionsFooter>{footer}</DrawerActionsFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

apps/web/src/components/layout/app-shell.tsx

@@ -56,7 +56,7 @@ interface NavGroup {
 const NAV_GROUPS: NavGroup[] = [
   {
     label: 'Обзор',
-    items: [{ to: '/dashboard', label: 'Dashboard', icon: LayoutDashboard }],
+    items: [{ to: '/dashboard', label: 'Панель', icon: LayoutDashboard }],
   },
   {
     label: 'Маршрутизация',
@@ -70,7 +70,7 @@ const NAV_GROUPS: NavGroup[] = [
     label: 'Операции',
     items: [
       { to: '/operations', label: 'Операции', icon: Cog },
-      { to: '/firewall', label: 'Firewall', icon: Shield },
+      { to: '/firewall', label: 'Файрвол', icon: Shield },
       { to: '/schedule', label: 'Задачи', icon: ListChecks },
       { to: '/monitoring', label: 'Мониторинг', icon: Activity },
     ],
@@ -111,7 +111,7 @@ export function AppShell({ children }: { children: ReactNode }) {
             </div>
             <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
               <span className="truncate text-sm font-semibold">EvoBGP</span>
-              <span className="truncate text-xs text-muted-foreground">Control Plane</span>
+              <span className="truncate text-xs text-muted-foreground">Плоскость управления</span>
             </div>
           </div>
         </SidebarHeader>

apps/web/src/components/modules/module-as-entry-dialog.tsx

@@ -1,17 +1,10 @@
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
 import { ApiError, apiMutate } from '@/lib/api-client'
@@ -72,45 +65,43 @@ export function ModuleAsEntryDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <FormDrawer
-      <DialogContent className="sm:max-w-sm">
+      open={open}
-        <DialogHeader>
+      onOpenChange={onOpenChange}
-          <DialogTitle>{edit ? 'Редактировать запись' : 'Новая AS-запись'}</DialogTitle>
+      title={edit ? 'Редактировать запись' : 'Новая AS-запись'}
-          <DialogDescription>
+      description="Номер автономной системы и community для политики анонса."
-            Номер автономной системы и community для политики анонса.
+      className="sm:max-w-sm"
-          </DialogDescription>
+      footer={
-        </DialogHeader>
+        <>
-        <div className="space-y-4 py-2">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="as-asn">ASN</Label>
-            <Input
-              id="as-asn"
-              type="number"
-              placeholder="12345"
-              value={form.asn || ''}
-              min={1}
-              max={4294967295}
-              onChange={(e) => setForm((s) => ({ ...s, asn: Number(e.target.value) }))}
-            />
-          </div>
-          <CommunitySelect
-            id="as-comm"
-            label="Community"
-            value={form.community_id ?? null}
-            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
-            communities={communities}
-            nullable
-          />
-        </div>
-        <DialogFooter>
           <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
             Отмена
           </LoadingButton>
           <LoadingButton loading={saving} onClick={() => void save()}>
             {edit ? 'Сохранить' : 'Добавить'}
           </LoadingButton>
-        </DialogFooter>
+        </>
-      </DialogContent>
+      }
-    </Dialog>
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="as-asn">ASN</Label>
+        <Input
+          id="as-asn"
+          type="number"
+          placeholder="12345"
+          value={form.asn || ''}
+          min={1}
+          max={4294967295}
+          onChange={(e) => setForm((s) => ({ ...s, asn: Number(e.target.value) }))}
+        />
+      </div>
+      <CommunitySelect
+        id="as-comm"
+        label="Community"
+        value={form.community_id ?? null}
+        onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+        communities={communities}
+        nullable
+      />
+    </FormDrawer>
   )
 }

apps/web/src/components/modules/module-cdn-source-dialog.tsx

@@ -1,21 +1,14 @@
 import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
-import {
+import { Button } from '@evobgp/ui/components/button'
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
-import { SelectField } from '@/components/select-field'
+import { FormDrawer } from '@/components/form-drawer'
-import { Button } from '@evobgp/ui/components/button'
-
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
+import { SelectField } from '@/components/select-field'
 import { ApiError, apiMutate } from '@/lib/api-client'
 import { normalizeCdnSourceKind } from '@/lib/modules/helpers'
 import type { BgpCommunity, CdnPreviewResponse, CdnSource, CdnSourceCreate } from '@/types/api'
@@ -154,107 +147,107 @@ export function ModuleCdnSourceDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <FormDrawer
-      <DialogContent className="sm:max-w-lg">
+      open={open}
-        <DialogHeader>
+      onOpenChange={onOpenChange}
-          <DialogTitle>{edit ? 'Редактировать источник' : 'Новый CDN-источник'}</DialogTitle>
+      title={edit ? 'Редактировать источник' : 'Новый CDN-источник'}
-        </DialogHeader>
+      className="sm:max-w-lg"
-        <div className="space-y-4 py-2">
+      footer={
-          <div className="flex flex-col gap-1.5">
+        <>
-            <Label htmlFor="cdn-url">URL</Label>
-            <Input
-              id="cdn-url"
-              placeholder="https://example.com/list.txt"
-              value={form.url}
-              onChange={(e) => setForm((s) => ({ ...s, url: e.target.value }))}
-            />
-          </div>
-          <SelectField
-            id="cdn-kind"
-            label="Тип источника"
-            items={kindItems}
-            value={form.source_kind}
-            onValueChange={(v) => v && setForm((s) => ({ ...s, source_kind: v }))}
-          />
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="cdn-prefix-path">JSON path (prefix_path)</Label>
-            <Input
-              id="cdn-prefix-path"
-              placeholder="напр. prefixes[] или data.items[].cidr"
-              value={form.prefix_path ?? ''}
-              onChange={(e) => setForm((s) => ({ ...s, prefix_path: e.target.value }))}
-            />
-            {form.source_kind === 'json' && !form.prefix_path?.trim() ? (
-              <p className="text-xs text-muted-foreground">
-                Для JSON укажите путь к полям с CIDR; пустой путь может не дать префиксов.
-              </p>
-            ) : null}
-          </div>
-          <CommunitySelect
-            id="cdn-comm"
-            label="Community"
-            value={form.community_id ?? null}
-            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
-            communities={communities}
-            nullable
-          />
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="cdn-interval">Интервал обновления (сек)</Label>
-            <Input
-              id="cdn-interval"
-              type="number"
-              placeholder="3600"
-              value={form.refresh_interval_sec ?? ''}
-              onChange={(e) =>
-                setForm((s) => ({
-                  ...s,
-                  refresh_interval_sec: e.target.value ? Number(e.target.value) : null,
-                }))
-              }
-            />
-          </div>
-          <div className="flex flex-col gap-2 rounded-lg border border-border p-3">
-            <div className="flex flex-wrap items-center gap-2">
-              <Button
-                type="button"
-                variant="secondary"
-                size="sm"
-                onClick={() => void previewCdn()}
-                disabled={previewLoading}
-              >
-                {previewLoading ? 'Загрузка…' : 'Предпросмотр'}
-              </Button>
-              {previewError ? (
-                <span className="text-sm text-destructive">{previewError}</span>
-              ) : previewOk ? (
-                <span className="text-sm text-muted-foreground">
-                  Всего: {previewTotal}
-                  {previewTruncated ? (
-                    <span className="text-amber-600 dark:text-amber-500"> (обрезано)</span>
-                  ) : null}
-                </span>
-              ) : null}
-            </div>
-            {previewItems.length > 0 ? (
-              <ul className="max-h-48 overflow-y-auto rounded-md border bg-muted/40 p-2 font-mono text-xs">
-                {previewItems.map((item, i) => (
-                  <li key={`${i}-${item}`} className="py-0.5">
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            ) : null}
-          </div>
-        </div>
-        <DialogFooter>
           <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
             Отмена
           </LoadingButton>
           <LoadingButton loading={saving} onClick={() => void save()}>
             {edit ? 'Сохранить' : 'Добавить'}
           </LoadingButton>
-        </DialogFooter>
+        </>
-      </DialogContent>
+      }
-    </Dialog>
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="cdn-url">URL</Label>
+        <Input
+          id="cdn-url"
+          placeholder="https://example.com/list.txt"
+          value={form.url}
+          onChange={(e) => setForm((s) => ({ ...s, url: e.target.value }))}
+        />
+      </div>
+      <SelectField
+        id="cdn-kind"
+        label="Тип источника"
+        items={kindItems}
+        value={form.source_kind}
+        onValueChange={(v) => v && setForm((s) => ({ ...s, source_kind: v }))}
+      />
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="cdn-prefix-path">JSON path (prefix_path)</Label>
+        <Input
+          id="cdn-prefix-path"
+          placeholder="напр. prefixes[] или data.items[].cidr"
+          value={form.prefix_path ?? ''}
+          onChange={(e) => setForm((s) => ({ ...s, prefix_path: e.target.value }))}
+        />
+        {form.source_kind === 'json' && !form.prefix_path?.trim() ? (
+          <p className="text-xs text-muted-foreground">
+            Для JSON укажите путь к полям с CIDR; пустой путь может не дать префиксов.
+          </p>
+        ) : null}
+      </div>
+      <CommunitySelect
+        id="cdn-comm"
+        label="Community"
+        value={form.community_id ?? null}
+        onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+        communities={communities}
+        nullable
+      />
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="cdn-interval">Интервал обновления (сек)</Label>
+        <Input
+          id="cdn-interval"
+          type="number"
+          placeholder="3600"
+          value={form.refresh_interval_sec ?? ''}
+          onChange={(e) =>
+            setForm((s) => ({
+              ...s,
+              refresh_interval_sec: e.target.value ? Number(e.target.value) : null,
+            }))
+          }
+        />
+      </div>
+      <div className="flex flex-col gap-2 rounded-lg border border-border p-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() => void previewCdn()}
+            disabled={previewLoading}
+          >
+            {previewLoading ? 'Загрузка…' : 'Предпросмотр'}
+          </Button>
+          {previewError ? (
+            <span className="text-sm text-destructive">{previewError}</span>
+          ) : previewOk ? (
+            <span className="text-sm text-muted-foreground">
+              Всего: {previewTotal}
+              {previewTruncated ? (
+                <span className="text-amber-600 dark:text-amber-500"> (обрезано)</span>
+              ) : null}
+            </span>
+          ) : null}
+        </div>
+        {previewItems.length > 0 ? (
+          <ul className="max-h-48 overflow-y-auto rounded-md border bg-muted/40 p-2 font-mono text-xs">
+            {previewItems.map((item, i) => (
+              <li key={`${i}-${item}`} className="py-0.5">
+                {item}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </FormDrawer>
   )
 }

apps/web/src/components/modules/module-domain-entry-dialog.tsx

@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
 import { ApiError, apiMutate } from '@/lib/api-client'
@@ -70,39 +64,39 @@ export function ModuleDomainEntryDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <FormDrawer
-      <DialogContent className="sm:max-w-sm">
+      open={open}
-        <DialogHeader>
+      onOpenChange={onOpenChange}
-          <DialogTitle>{edit ? 'Редактировать домен' : 'Новый домен'}</DialogTitle>
+      title={edit ? 'Редактировать домен' : 'Новый домен'}
-        </DialogHeader>
+      className="sm:max-w-sm"
-        <div className="space-y-4 py-2">
+      footer={
-          <div className="flex flex-col gap-1.5">
+        <>
-            <Label htmlFor="dom-fqdn">FQDN</Label>
-            <Input
-              id="dom-fqdn"
-              placeholder="example.com"
-              value={form.fqdn}
-              onChange={(e) => setForm((s) => ({ ...s, fqdn: e.target.value }))}
-            />
-          </div>
-          <CommunitySelect
-            id="dom-comm"
-            label="Community"
-            value={form.community_id ?? null}
-            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
-            communities={communities}
-            nullable
-          />
-        </div>
-        <DialogFooter>
           <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
             Отмена
           </LoadingButton>
           <LoadingButton loading={saving} onClick={() => void save()}>
             {edit ? 'Сохранить' : 'Добавить'}
           </LoadingButton>
-        </DialogFooter>
+        </>
-      </DialogContent>
+      }
-    </Dialog>
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="dom-fqdn">FQDN</Label>
+        <Input
+          id="dom-fqdn"
+          placeholder="example.com"
+          value={form.fqdn}
+          onChange={(e) => setForm((s) => ({ ...s, fqdn: e.target.value }))}
+        />
+      </div>
+      <CommunitySelect
+        id="dom-comm"
+        label="Community"
+        value={form.community_id ?? null}
+        onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+        communities={communities}
+        nullable
+      />
+    </FormDrawer>
   )
 }

apps/web/src/components/modules/module-entries-grid.tsx

@@ -4,6 +4,8 @@ import { useMemo } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { formatDateTime } from '@/lib/modules/display'
@@ -68,7 +70,7 @@ export function ModuleEntriesGrid({
             <DataGridColumnHeader column={column as never} title="FQDN" />
           ),
           cell: ({ row }: { row: { original: DomainEntry } }) => (
-            <span className="font-mono text-sm">{row.original.fqdn}</span>
+            <DataGridPrimaryCell title={row.original.fqdn} accent="mono" />
           ),
         },
         {
@@ -102,7 +104,7 @@ export function ModuleEntriesGrid({
             <DataGridColumnHeader column={column as never} title="Префикс (CIDR)" />
           ),
           cell: ({ row }: { row: { original: IpRangeEntry } }) => (
-            <span className="font-mono text-sm">{row.original.prefix}</span>
+            <DataGridPrimaryCell title={row.original.prefix} accent="mono" />
           ),
         },
         {
@@ -136,14 +138,14 @@ export function ModuleEntriesGrid({
             <DataGridColumnHeader column={column as never} title="URL" />
           ),
           cell: ({ row }: { row: { original: CdnSource } }) => (
-            <span className="max-w-xs truncate font-mono text-xs">{row.original.url}</span>
+            <DataGridPrimaryCell title={row.original.url} accent="mono" className="max-w-xs" />
           ),
         },
         {
           accessorKey: 'source_kind',
           header: 'Тип',
           cell: ({ row }: { row: { original: CdnSource } }) => (
-            <span className="text-sm">{row.original.source_kind}</span>
+            <CategoryBadge>{row.original.source_kind}</CategoryBadge>
           ),
         },
         {
@@ -162,9 +164,7 @@ export function ModuleEntriesGrid({
             <DataGridColumnHeader column={column as never} title="Обновлено" />
           ),
           cell: ({ row }: { row: { original: CdnSource } }) => (
-            <span className="text-xs text-muted-foreground">
+            <DataGridMutedCell>{formatDateTime(row.original.last_refreshed_at)}</DataGridMutedCell>
-              {formatDateTime(row.original.last_refreshed_at)}
-            </span>
           ),
         },
         {

apps/web/src/components/modules/module-entries-section.tsx

@@ -2,18 +2,9 @@ import { useState } from 'react'
 import { Plus } from 'lucide-react'
 import { toast } from 'sonner'
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@evobgp/ui/components/alert-dialog'
 import { Button } from '@evobgp/ui/components/button'
 
+import { ConfirmDialog } from '@/components/confirm-dialog'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { QueryState } from '@/components/query-state'
 import { TableSkeleton } from '@/components/skeletons'
@@ -218,24 +209,17 @@ export function ModuleEntriesSection({
         />
       ) : null}
 
-      <AlertDialog open={deleteTarget !== null} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+      <ConfirmDialog
-        <AlertDialogContent>
+        open={deleteTarget !== null}
-          <AlertDialogHeader>
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
-            <AlertDialogTitle>Удалить запись?</AlertDialogTitle>
+        title="Удалить запись?"
-            <AlertDialogDescription>{deleteDescription(deleteTarget)}</AlertDialogDescription>
+        description={deleteDescription(deleteTarget)}
-          </AlertDialogHeader>
+        confirmLabel="Удалить"
-          <AlertDialogFooter>
+        confirmLoadingLabel="Удаление…"
-            <AlertDialogCancel disabled={deleting}>Отмена</AlertDialogCancel>
+        destructive
-            <AlertDialogAction
+        confirmLoading={deleting}
-              variant="destructive"
+        onConfirm={() => void confirmDelete()}
-              disabled={deleting}
+      />
-              onClick={() => void confirmDelete()}
-            >
-              {deleting ? 'Удаление…' : 'Удалить'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </>
   )
 }

apps/web/src/components/modules/module-ip-range-entry-dialog.tsx

@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
 import { ApiError, apiMutate } from '@/lib/api-client'
@@ -70,39 +64,39 @@ export function ModuleIpRangeEntryDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <FormDrawer
-      <DialogContent className="sm:max-w-sm">
+      open={open}
-        <DialogHeader>
+      onOpenChange={onOpenChange}
-          <DialogTitle>{edit ? 'Редактировать диапазон' : 'Новый IP-диапазон'}</DialogTitle>
+      title={edit ? 'Редактировать диапазон' : 'Новый IP-диапазон'}
-        </DialogHeader>
+      className="sm:max-w-sm"
-        <div className="space-y-4 py-2">
+      footer={
-          <div className="flex flex-col gap-1.5">
+        <>
-            <Label htmlFor="ip-prefix">Префикс (CIDR)</Label>
-            <Input
-              id="ip-prefix"
-              placeholder="203.0.113.0/24"
-              value={form.prefix}
-              onChange={(e) => setForm((s) => ({ ...s, prefix: e.target.value }))}
-            />
-          </div>
-          <CommunitySelect
-            id="ip-comm"
-            label="Community (обязательно)"
-            value={form.community_id || null}
-            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v ?? '' }))}
-            communities={communities}
-            placeholder="Выберите community"
-          />
-        </div>
-        <DialogFooter>
           <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
             Отмена
           </LoadingButton>
           <LoadingButton loading={saving} onClick={() => void save()}>
             {edit ? 'Сохранить' : 'Добавить'}
           </LoadingButton>
-        </DialogFooter>
+        </>
-      </DialogContent>
+      }
-    </Dialog>
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="ip-prefix">Префикс (CIDR)</Label>
+        <Input
+          id="ip-prefix"
+          placeholder="203.0.113.0/24"
+          value={form.prefix}
+          onChange={(e) => setForm((s) => ({ ...s, prefix: e.target.value }))}
+        />
+      </div>
+      <CommunitySelect
+        id="ip-comm"
+        label="Community (обязательно)"
+        value={form.community_id || null}
+        onValueChange={(v) => setForm((s) => ({ ...s, community_id: v ?? '' }))}
+        communities={communities}
+        placeholder="Выберите community"
+      />
+    </FormDrawer>
   )
 }

apps/web/src/components/modules/modules-list-grid.tsx

@@ -3,11 +3,12 @@ import { useNavigate } from '@tanstack/react-router'
 import { Boxes } from 'lucide-react'
 import { useMemo } from 'react'
 
+import { CategoryBadge, ModeBadge } from '@/components/category-badge'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
-import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { TruncatedText } from '@/components/truncated-text'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
 
 export function ModulesListGrid({
@@ -26,8 +27,8 @@ export function ModulesListGrid({
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
-            <Boxes className="size-4 text-muted-foreground" />
+            <Boxes className="size-4 shrink-0 text-muted-foreground" />
-            <TruncatedText className="max-w-[280px] font-medium">{row.original.name}</TruncatedText>
+            <DataGridPrimaryCell title={row.original.name} accent="primary" className="max-w-[280px]" />
           </div>
         ),
         meta: { headerTitle: 'Название' },
@@ -35,7 +36,7 @@ export function ModulesListGrid({
       {
         accessorKey: 'type',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
-        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+        cell: ({ row }) => <CategoryBadge>{moduleTypeRu(row.original.type)}</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
       {
@@ -50,12 +51,7 @@ export function ModulesListGrid({
         id: 'enabled',
         accessorFn: (row) => (row.enabled ? 'enabled' : 'disabled'),
         header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
-        cell: ({ row }) =>
+        cell: ({ row }) => <ModeBadge enabled={row.original.enabled} />,
-          row.original.enabled ? (
-            <Badge variant="success">включён</Badge>
-          ) : (
-            <Badge variant="secondary">выключен</Badge>
-          ),
         meta: { headerTitle: 'Состояние' },
       },
       {
@@ -63,11 +59,11 @@ export function ModulesListGrid({
         accessorFn: (row) => row.last_refreshed_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
         cell: ({ row }) => (
-          <span className="text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.last_refreshed_at
               ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         sortingFn: (a, b) => {
           const av = a.original.last_refreshed_at ?? ''

apps/web/src/components/monitoring/monitoring-ready-grid.tsx

@@ -2,11 +2,12 @@ import { ColumnDef } from '@tanstack/react-table'
 import { Database, HardDrive, HeartPulse, ListTodo, ShieldCheck } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-
 import { DataGridSection } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { jobStatusRu, readyCheckRu } from '@/lib/ui-labels'
 import type { ReadyStatus } from '@/queries/monitoring'
 
 const READY_CHECK_ICONS: Record<string, typeof Database> = {
@@ -20,9 +21,8 @@ interface ReadyCheckRow {
   label: string
   subtitle?: string
   icon: typeof Database
-  ok: boolean
+  status: string
   statusLabel: string
-  variant: 'default' | 'destructive' | 'secondary'
 }
 
 export function MonitoringReadyGrid({
@@ -37,21 +37,19 @@ export function MonitoringReadyGrid({
     const rows: ReadyCheckRow[] = [
       {
         id: 'liveness',
-        label: 'Liveness',
+        label: 'Живучесть',
         subtitle: '/v1/health',
         icon: HeartPulse,
-        ok: health?.ok === true,
+        status: health?.ok ? 'ok' : 'error',
-        statusLabel: health?.ok ? 'OK' : 'Ошибка',
+        statusLabel: health?.ok ? 'В норме' : 'Ошибка',
-        variant: health?.ok ? 'default' : 'destructive',
       },
       {
         id: 'readiness',
-        label: 'Readiness',
+        label: 'Готовность',
         subtitle: '/v1/ready',
         icon: ShieldCheck,
-        ok: ready.status === 'ok',
+        status: ready.status === 'ok' ? 'ok' : 'warning',
-        statusLabel: ready.status ?? '—',
+        statusLabel: ready.status === 'ok' ? 'Готов' : jobStatusRu(ready.status ?? 'pending'),
-        variant: ready.status === 'ok' ? 'default' : 'secondary',
       },
     ]
     for (const key of Object.keys(checks)) {
@@ -59,11 +57,10 @@ export function MonitoringReadyGrid({
       const ok = typeof value === 'boolean' ? value : value?.ok !== false
       rows.push({
         id: key,
-        label: key,
+        label: readyCheckRu(key),
         icon: READY_CHECK_ICONS[key] ?? ListTodo,
-        ok,
+        status: ok ? 'ok' : 'error',
-        statusLabel: ok ? 'OK' : 'Ошибка',
+        statusLabel: ok ? 'В норме' : 'Ошибка',
-        variant: ok ? 'default' : 'destructive',
       })
     }
     return rows
@@ -79,12 +76,10 @@ export function MonitoringReadyGrid({
           return (
             <div className="flex items-center gap-2">
               <Icon className="size-4 shrink-0 text-muted-foreground" />
-              <div>
+              <DataGridPrimaryCell
-                <p className="text-sm font-medium">{row.original.label}</p>
+                title={row.original.label}
-                {row.original.subtitle ? (
+                subtitle={row.original.subtitle}
-                  <p className="text-xs text-muted-foreground">{row.original.subtitle}</p>
+              />
-                ) : null}
-              </div>
             </div>
           )
         },
@@ -95,7 +90,7 @@ export function MonitoringReadyGrid({
         enableSorting: false,
         header: 'Статус',
         cell: ({ row }) => (
-          <Badge variant={row.original.variant}>{row.original.statusLabel}</Badge>
+          <StatusBadge status={row.original.status} label={row.original.statusLabel} />
         ),
         meta: { headerTitle: 'Статус' },
       },

apps/web/src/components/network/network-peers-grid.tsx

@@ -1,12 +1,14 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
-import { Badge } from '@/components/reui/badge'
+import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { bgpSessionStateRu } from '@/lib/ui-labels'
 import type { PeerRow } from '@/types/api'
-import { StatusBadge } from '@/components/status-badge'
 
 export function NetworkPeersGrid({
   items,
@@ -22,15 +24,21 @@ export function NetworkPeersGrid({
         accessorFn: (row) => row.name ?? row.neighbor,
         header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
         cell: ({ row }) => (
-          <span className="font-medium">{row.original.name ?? row.original.neighbor}</span>
+          <DataGridPrimaryCell
+            title={row.original.name ?? row.original.neighbor}
+            subtitle={row.original.name ? row.original.neighbor : undefined}
+            accent="primary"
+          />
         ),
         meta: { headerTitle: 'Имя' },
       },
       {
         accessorKey: 'neighbor',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Neighbor" />,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Адрес соседа" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.neighbor}</span>,
+        cell: ({ row }) => (
-        meta: { headerTitle: 'Neighbor' },
+          <DataGridPrimaryCell title={row.original.neighbor} accent="mono" />
+        ),
+        meta: { headerTitle: 'Адрес соседа' },
       },
       {
         accessorKey: 'remote_asn',
@@ -45,11 +53,12 @@ export function NetworkPeersGrid({
         header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
         cell: ({ row }) => (
           <div className="flex items-center gap-1">
-            <StatusBadge status={row.original.session_state} />
+            <StatusBadge
+              status={row.original.session_state ?? '—'}
+              label={bgpSessionStateRu(row.original.session_state)}
+            />
             {row.original.session_mismatch ? (
-              <Badge variant="warning" className="ml-1">
+              <CategoryBadge tone="warning">расхождение</CategoryBadge>
-                mismatch
-              </Badge>
             ) : null}
           </div>
         ),

apps/web/src/components/network/network-speakers-grid.tsx

@@ -1,11 +1,14 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { speakerOnlineLabel } from '@/lib/ui-labels'
 import type { SpeakerRow } from '@/types/api'
 
 export function NetworkSpeakersGrid({
@@ -19,27 +22,29 @@ export function NetworkSpeakersGrid({
     () => [
       {
         accessorKey: 'endpoint',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Endpoint" />,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Конечная точка" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.endpoint}</span>,
+        cell: ({ row }) => (
-        meta: { headerTitle: 'Endpoint' },
+          <DataGridPrimaryCell title={row.original.endpoint} accent="mono" />
+        ),
+        meta: { headerTitle: 'Конечная точка' },
       },
       {
         accessorKey: 'role',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Роль" />,
-        cell: ({ row }) => <Badge variant="outline">{row.original.role}</Badge>,
+        cell: ({ row }) => <CategoryBadge>{row.original.role}</CategoryBadge>,
         meta: { headerTitle: 'Роль' },
       },
       {
         id: 'agent',
         enableSorting: false,
-        header: 'Agent',
+        header: 'Агент',
         cell: ({ row }) => {
           const live = row.original.live
-          if (live?.agent_ok === true) return <StatusBadge status="ok" label="online" />
+          if (live?.agent_ok === true) return <StatusBadge status="ok" label={speakerOnlineLabel(true)} />
-          if (live?.agent_ok === false) return <StatusBadge status="error" label="offline" />
+          if (live?.agent_ok === false) return <StatusBadge status="error" label={speakerOnlineLabel(false)} />
-          return <Badge variant="outline">—</Badge>
+          return <Badge variant="outline" size="sm" radius="full">—</Badge>
         },
-        meta: { headerTitle: 'Agent' },
+        meta: { headerTitle: 'Агент' },
       },
       {
         id: 'bgp',

apps/web/src/components/network/peer-form-dialog.tsx

@@ -2,18 +2,11 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-import {
+import { Checkbox } from '@evobgp/ui/components/checkbox'
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
-import { Checkbox } from '@evobgp/ui/components/checkbox'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
 import { useCreatePeerMutation, useUpdatePeerMutation } from '@/queries/network'
@@ -102,74 +95,74 @@ export function PeerFormDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <FormDrawer
-      <DialogContent className="sm:max-w-sm">
+      open={open}
-        <DialogHeader>
+      onOpenChange={onOpenChange}
-          <DialogTitle>{editTarget ? 'Редактировать пира' : 'Новый пир'}</DialogTitle>
+      title={editTarget ? 'Редактировать пира' : 'Новый пир'}
-          <DialogDescription>BGP-сосед для установки сессии</DialogDescription>
+      description="BGP-сосед для установки сессии"
-        </DialogHeader>
+      className="sm:max-w-sm"
-        <div className="flex flex-col gap-4 py-2">
+      footer={
-          <div className="flex flex-col gap-2">
+        <>
-            <Label htmlFor="peer-name">Имя пира (опционально)</Label>
-            <Input
-              id="peer-name"
-              placeholder="Core-RTR-1"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="peer-neighbor">Адрес соседа</Label>
-            <Input
-              id="peer-neighbor"
-              placeholder="192.0.2.1"
-              value={neighbor}
-              onChange={(e) => setNeighbor(e.target.value)}
-              required
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="peer-asn">Remote ASN</Label>
-            <Input
-              id="peer-asn"
-              type="number"
-              placeholder="65000"
-              value={remoteAsn}
-              onChange={(e) => setRemoteAsn(e.target.value)}
-              required
-            />
-          </div>
-          <SelectField
-            id="peer-speaker"
-            label="Спикер (опционально)"
-            items={speakerItems}
-            value={bgpSpeakerId ?? ''}
-            onValueChange={(v) => setBgpSpeakerId(v || null)}
-            placeholder="Все спикеры"
-          />
-          <div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3">
-            <div className="grid min-w-0 flex-1 gap-1 pr-2">
-              <Label htmlFor="peer-enabled">Включён</Label>
-              <p className="text-xs text-muted-foreground">
-                Выключенный пир не попадает в конфиг BIRD до следующей ревизии.
-              </p>
-            </div>
-            <Checkbox
-              id="peer-enabled"
-              checked={enabled}
-              onCheckedChange={(v) => setEnabled(v === true)}
-            />
-          </div>
-        </div>
-        <DialogFooter>
           <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
             Отмена
           </Button>
           <LoadingButton type="button" loading={saving} onClick={save}>
             {editTarget ? 'Сохранить' : 'Создать'}
           </LoadingButton>
-        </DialogFooter>
+        </>
-      </DialogContent>
+      }
-    </Dialog>
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="peer-name">Имя пира (опционально)</Label>
+        <Input
+          id="peer-name"
+          placeholder="Core-RTR-1"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="peer-neighbor">Адрес соседа</Label>
+        <Input
+          id="peer-neighbor"
+          placeholder="192.0.2.1"
+          value={neighbor}
+          onChange={(e) => setNeighbor(e.target.value)}
+          required
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="peer-asn">Remote ASN</Label>
+        <Input
+          id="peer-asn"
+          type="number"
+          placeholder="65000"
+          value={remoteAsn}
+          onChange={(e) => setRemoteAsn(e.target.value)}
+          required
+        />
+      </div>
+      <SelectField
+        id="peer-speaker"
+        label="Спикер (опционально)"
+        items={speakerItems}
+        value={bgpSpeakerId ?? ''}
+        onValueChange={(v) => setBgpSpeakerId(v || null)}
+        placeholder="Все спикеры"
+      />
+      <div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3">
+        <div className="grid min-w-0 flex-1 gap-1 pr-2">
+          <Label htmlFor="peer-enabled">Включён</Label>
+          <p className="text-xs text-muted-foreground">
+            Выключенный пир не попадает в конфиг BIRD до следующей ревизии.
+          </p>
+        </div>
+        <Checkbox
+          id="peer-enabled"
+          checked={enabled}
+          onCheckedChange={(v) => setEnabled(v === true)}
+        />
+      </div>
+    </FormDrawer>
   )
 }

apps/web/src/components/network/speaker-form-dialog.tsx

@@ -2,17 +2,10 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
 import { useCreateSpeakerMutation } from '@/queries/network'
@@ -98,72 +91,72 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <FormDrawer
-      <DialogContent className="sm:max-w-md">
+      open={open}
-        <DialogHeader>
+      onOpenChange={onOpenChange}
-          <DialogTitle>Новый спикер</DialogTitle>
+      title="Новый спикер"
-          <DialogDescription>BIRD-агент на ноде реплики или control plane</DialogDescription>
+      description="BIRD-агент на ноде реплики или control plane"
-        </DialogHeader>
+      className="sm:max-w-md"
-        <div className="flex flex-col gap-4 py-2">
+      footer={
-          <div className="flex flex-col gap-2">
+        <>
-            <Label htmlFor="speaker-endpoint">Endpoint</Label>
-            <Input
-              id="speaker-endpoint"
-              placeholder="https://node.example.com:8443"
-              value={endpoint}
-              onChange={(e) => handleEndpointChange(e.target.value)}
-            />
-          </div>
-          <SelectField
-            id="speaker-role"
-            label="Роль"
-            items={[
-              { value: 'replica', label: 'replica' },
-              { value: 'master', label: 'master (CP)' },
-            ]}
-            value={role}
-            onValueChange={(v) => setRole(v ?? 'replica')}
-          />
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="speaker-agent-domain">Agent domain</Label>
-            <Input
-              id="speaker-agent-domain"
-              placeholder="bird-agent.example.com"
-              value={agentDomain}
-              onChange={(e) => setAgentDomain(e.target.value)}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="speaker-node-ipv4">Node IPv4</Label>
-            <Input
-              id="speaker-node-ipv4"
-              placeholder="203.0.113.10"
-              value={nodeIpv4}
-              onChange={(e) => handleNodeIpv4Change(e.target.value)}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="speaker-bgp-source">BGP source IPv4</Label>
-            <Input
-              id="speaker-bgp-source"
-              placeholder="203.0.113.10"
-              value={bgpSourceIpv4}
-              onChange={(e) => {
-                setBgpSourceManual(true)
-                setBgpSourceIpv4(e.target.value)
-              }}
-            />
-          </div>
-        </div>
-        <DialogFooter>
           <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
             Отмена
           </Button>
           <LoadingButton type="button" loading={createMutation.isPending} onClick={save}>
             Создать
           </LoadingButton>
-        </DialogFooter>
+        </>
-      </DialogContent>
+      }
-    </Dialog>
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-endpoint">Конечная точка</Label>
+        <Input
+          id="speaker-endpoint"
+          placeholder="https://node.example.com:8443"
+          value={endpoint}
+          onChange={(e) => handleEndpointChange(e.target.value)}
+        />
+      </div>
+      <SelectField
+        id="speaker-role"
+        label="Роль"
+        items={[
+          { value: 'replica', label: 'Реплика' },
+          { value: 'master', label: 'Мастер (CP)' },
+        ]}
+        value={role}
+        onValueChange={(v) => setRole(v ?? 'replica')}
+      />
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-agent-domain">Домен агента</Label>
+        <Input
+          id="speaker-agent-domain"
+          placeholder="bird-agent.example.com"
+          value={agentDomain}
+          onChange={(e) => setAgentDomain(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-node-ipv4">IPv4 ноды</Label>
+        <Input
+          id="speaker-node-ipv4"
+          placeholder="203.0.113.10"
+          value={nodeIpv4}
+          onChange={(e) => handleNodeIpv4Change(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-bgp-source">BGP source IPv4</Label>
+        <Input
+          id="speaker-bgp-source"
+          placeholder="203.0.113.10"
+          value={bgpSourceIpv4}
+          onChange={(e) => {
+            setBgpSourceManual(true)
+            setBgpSourceIpv4(e.target.value)
+          }}
+        />
+      </div>
+    </FormDrawer>
   )
 }

apps/web/src/components/operations/operations-jobs-grid.tsx

@@ -5,23 +5,16 @@ import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
 
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import { apiMutate } from '@/lib/api-client'
+import { jobKindRu } from '@/lib/ui-labels'
 import type { JobRow } from '@/types/api'
 import type { QueryClient } from '@tanstack/react-query'
 
-function StatusBadgeColored({ status }: { status: string }) {
-  const cls =
-    status === 'succeeded'
-      ? 'text-success'
-      : status === 'failed' || status === 'cancelled'
-        ? 'text-destructive'
-        : 'text-info'
-  return <span className={`text-sm font-medium ${cls}`}>{status}</span>
-}
-
 export function OperationsJobsGrid({
   items,
   nameById,
@@ -48,22 +41,29 @@ export function OperationsJobsGrid({
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
         cell: ({ row }) => (
-          <div className="flex flex-col gap-0.5">
+          <DataGridPrimaryCell
-            <span className="font-medium">{row.original.kind}</span>
+            title={jobKindRu(row.original.kind)}
-            {row.original.meta?.module_id ? (
+            accent="mono"
-              <span className="text-xs text-muted-foreground">
+            subtitle={
-                {nameById.get(String(row.original.meta.module_id)) ??
+              row.original.meta?.module_id
-                  String(row.original.meta.module_id)}
+                ? (nameById.get(String(row.original.meta.module_id)) ??
-              </span>
+                  String(row.original.meta.module_id))
-            ) : null}
+                : undefined
-          </div>
+            }
+          />
         ),
         meta: { headerTitle: 'Вид' },
       },
       {
         accessorKey: 'status',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) => <StatusBadgeColored status={row.original.status} />,
+        cell: ({ row }) => {
+          const finished = row.original.finished_at
+          const hint = finished
+            ? new Date(finished).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
+            : undefined
+          return <StatusBadge status={row.original.status} hint={hint} />
+        },
         meta: { headerTitle: 'Статус' },
       },
       {
@@ -71,11 +71,11 @@ export function OperationsJobsGrid({
         accessorFn: (row) => row.created_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
         cell: ({ row }) => (
-          <span className="whitespace-nowrap text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.created_at
               ? new Date(row.original.created_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Создана' },
       },
@@ -84,11 +84,11 @@ export function OperationsJobsGrid({
         accessorFn: (row) => row.finished_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Завершена" />,
         cell: ({ row }) => (
-          <span className="whitespace-nowrap text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.finished_at
               ? new Date(row.original.finished_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Завершена' },
       },
@@ -120,7 +120,7 @@ export function OperationsJobsGrid({
       const moduleName = row.meta?.module_id
         ? (nameById.get(String(row.meta.module_id)) ?? String(row.meta.module_id))
         : ''
-      return `${row.kind} ${row.status} ${row.job_id} ${moduleName}`
+      return `${jobKindRu(row.kind)} ${row.status} ${row.job_id} ${moduleName}`
     },
     getRowId: (row) => row.job_id,
   })

apps/web/src/components/operations/operations-revisions-grid.tsx

@@ -6,6 +6,7 @@ import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
 
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
@@ -40,7 +41,7 @@ export function OperationsRevisionsGrid({
         accessorFn: (row) => row.id,
         header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
         cell: ({ row }) => (
-          <span className="font-mono text-xs">{row.original.id.slice(0, 12)}…</span>
+          <DataGridPrimaryCell title={`${row.original.id.slice(0, 12)}…`} accent="mono" />
         ),
         meta: { headerTitle: 'ID' },
       },
@@ -48,9 +49,9 @@ export function OperationsRevisionsGrid({
         accessorKey: 'created_at',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
         cell: ({ row }) => (
-          <span className="text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {new Date(row.original.created_at).toLocaleString('ru-RU')}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Создана' },
       },

apps/web/src/components/panel-card.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react'
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@evobgp/ui/components/card'
+import { cn } from '@evobgp/ui/lib/utils'
+
+/** REUI c-data-grid-19: flush card shell with compact header spacing. */
+export const panelCardClassName = 'gap-0 py-0'
+export const panelCardHeaderClassName = 'border-b [.border-b]:pb-3'
+export const panelCardContentFlushClassName = 'px-0'
+export const panelCardFooterClassName = 'border-t bg-transparent py-0'
+
+interface PanelCardProps {
+  title?: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+  footer?: ReactNode
+  children?: ReactNode
+  className?: string
+  headerClassName?: string
+  contentClassName?: string
+  footerClassName?: string
+  size?: 'default' | 'sm'
+}
+
+export function PanelCard({
+  title,
+  description,
+  actions,
+  footer,
+  children,
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  size = 'sm',
+}: PanelCardProps) {
+  const hasHeader = Boolean(title || description || actions)
+
+  return (
+    <Card size={size} className={cn(panelCardClassName, className)}>
+      {hasHeader ? (
+        <CardHeader className={cn(panelCardHeaderClassName, headerClassName)}>
+          {title ? <CardTitle>{title}</CardTitle> : null}
+          {description ? <CardDescription>{description}</CardDescription> : null}
+          {actions ? <CardAction>{actions}</CardAction> : null}
+        </CardHeader>
+      ) : null}
+      {children != null && children !== false ? (
+        <CardContent className={contentClassName}>{children}</CardContent>
+      ) : null}
+      {footer ? (
+        <CardFooter className={cn(panelCardFooterClassName, footerClassName)}>{footer}</CardFooter>
+      ) : null}
+    </Card>
+  )
+}

apps/web/src/components/reui/data-grid/data-grid-pagination.tsx

@@ -140,12 +140,12 @@ function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
         mergedProps?.className
       )}
     >
-      <div className="order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0">
+      <div className="order-2 flex flex-wrap items-center gap-2 pb-2.5 sm:order-1 sm:pb-0">
         {isLoading ? (
           mergedProps?.sizesSkeleton
         ) : (
           <>
-            <div className="text-muted-foreground text-sm">
+            <div className="shrink-0 text-sm text-muted-foreground whitespace-nowrap">
               {mergedProps.rowsPerPageLabel}
             </div>
             <SelectMenu
@@ -156,10 +156,10 @@ function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
                 })) ?? []
               }
               value={`${pageSize}`}
-              triggerClassName="w-14"
+              triggerClassName="min-w-20 w-auto tabular-nums"
               size="sm"
               side="top"
-              contentClassName="min-w-18"
+              contentClassName="min-w-20"
               onValueChange={(value) => {
                 if (!value) return
                 table.setPageSize(Number(value))

apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx

@@ -21,6 +21,7 @@ import {
   DataGridTableViewport,
   getDataGridTableRowSections,
 } from "@/components/reui/data-grid/data-grid-table"
+import { DATA_GRID_MESSAGES_RU } from "@/lib/data-grid-defaults"
 import { flexRender, HeaderGroup, Row, Table } from "@tanstack/react-table"
 import {
   useVirtualizer,
@@ -304,9 +305,9 @@ function DataGridTableVirtual<TData>({
 
   const isVirtualizationEnabled = virtualizerOptions?.enabled !== false
   const loadingMoreMessage =
-    props.fetchingMoreMessage || props.loadingMessage || "Loading..."
+    props.fetchingMoreMessage || props.loadingMessage || DATA_GRID_MESSAGES_RU.loadingMessage
   const allRowsLoadedMessage =
-    props.allRowsLoadedMessage || "All records loaded"
+    props.allRowsLoadedMessage || DATA_GRID_MESSAGES_RU.allRecordsLoadedMessage
 
   const handleViewportRef = useCallback((node: HTMLDivElement | null) => {
     setViewportElements({

apps/web/src/components/reui/data-grid/data-grid-table.tsx

@@ -28,6 +28,7 @@ import { cva } from "class-variance-authority"
 import { cn } from "@evobgp/ui/lib/utils"
 import { Checkbox } from "@evobgp/ui/components/checkbox"
 import { Spinner } from "@evobgp/ui/components/spinner"
+import { DATA_GRID_MESSAGES_RU } from "@/lib/data-grid-defaults"
 
 const headerCellSpacingVariants = cva("", {
   variants: {
@@ -1098,7 +1099,7 @@ function DataGridTableEmpty() {
         colSpan={Math.max(visibleColumnCount, 1)}
         className="text-muted-foreground text-sm py-6 text-center"
       >
-        {props.emptyMessage || "No data available"}
+        {props.emptyMessage || DATA_GRID_MESSAGES_RU.emptyMessage}
       </td>
     </tr>
   )
@@ -1111,7 +1112,7 @@ function DataGridTableLoader() {
     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
       <div className="text-muted-foreground bg-card rounded-lg text-sm flex items-center gap-2 border px-4 py-2 leading-none font-medium">
         <Spinner className="size-5 opacity-60" />
-        {props.loadingMessage || "Loading..."}
+        {props.loadingMessage || DATA_GRID_MESSAGES_RU.loadingMessage}
       </div>
     </div>
   )
@@ -1123,7 +1124,7 @@ function DataGridTableRowPin<TData>({ row }: { row: Row<TData> }) {
   return (
     <button
       type="button"
-      aria-label={isPinned ? "Unpin row" : "Pin row"}
+      aria-label={isPinned ? DATA_GRID_MESSAGES_RU.unpinRowLabel : DATA_GRID_MESSAGES_RU.pinRowLabel}
       onClick={() => {
         if (isPinned) {
           row.pin(false)
@@ -1179,7 +1180,7 @@ function DataGridTableRowSelect<TData>({ row }: { row: Row<TData> }) {
       <Checkbox
         checked={row.getIsSelected()}
         onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
+        aria-label={DATA_GRID_MESSAGES_RU.selectRowLabel}
         className="align-[inherit]"
       />
     </>
@@ -1198,7 +1199,7 @@ function DataGridTableRowSelectAll() {
       indeterminate={isSomeSelected && !isAllSelected}
       disabled={isLoading || recordCount === 0}
       onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-      aria-label="Select all"
+      aria-label={DATA_GRID_MESSAGES_RU.selectAllLabel}
       className="align-[inherit]"
     />
   )
@@ -1249,7 +1250,7 @@ function DataGridTableBodyRows<TData>({ table }: { table: Table<TData> }) {
                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
               ></path>
             </svg>
-            {props.loadingMessage || "Loading..."}
+            {props.loadingMessage || DATA_GRID_MESSAGES_RU.loadingMessage}
           </div>
         </td>
       </tr>

apps/web/src/components/schedule/schedule-jobs-grid.tsx

@@ -1,11 +1,12 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-
 import { DataGridSection } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { jobKindRu } from '@/lib/ui-labels'
 import type { JobRow } from '@/types/api'
 
 export function ScheduleJobsGrid({
@@ -20,25 +21,19 @@ export function ScheduleJobsGrid({
       {
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.kind}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={jobKindRu(row.original.kind)} accent="mono" />,
         meta: { headerTitle: 'Вид' },
       },
       {
         accessorKey: 'status',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) => (
+        cell: ({ row }) => {
-          <Badge
+          const finished = row.original.finished_at
-            variant={
+          const hint = finished
-              row.original.status === 'succeeded'
+            ? new Date(finished).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
-                ? 'default'
+            : undefined
-                : row.original.status === 'failed'
+          return <StatusBadge status={row.original.status} hint={hint} />
-                  ? 'destructive'
+        },
-                  : 'secondary'
-            }
-          >
-            {row.original.status}
-          </Badge>
-        ),
         meta: { headerTitle: 'Статус' },
       },
       {
@@ -46,11 +41,11 @@ export function ScheduleJobsGrid({
         accessorFn: (row) => row.created_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Создана" />,
         cell: ({ row }) => (
-          <span className="whitespace-nowrap text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.created_at
               ? new Date(row.original.created_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Создана' },
       },
@@ -59,11 +54,11 @@ export function ScheduleJobsGrid({
         accessorFn: (row) => row.finished_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Завершена" />,
         cell: ({ row }) => (
-          <span className="whitespace-nowrap text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.finished_at
               ? new Date(row.original.finished_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Завершена' },
       },
@@ -85,7 +80,7 @@ export function ScheduleJobsGrid({
   const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,
     columns,
-    getSearchText: (row) => `${row.kind} ${row.status} ${row.error ?? ''}`,
+    getSearchText: (row) => `${jobKindRu(row.kind)} ${row.status} ${row.error ?? ''}`,
     getRowId: (row) => row.job_id,
   })
 

apps/web/src/components/schedule/schedule-modules-grid.tsx

@@ -2,12 +2,13 @@ import { ColumnDef } from '@tanstack/react-table'
 import { RefreshCw } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { Badge } from '@evobgp/ui/components/badge'
+import { CategoryBadge, ModeBadge } from '@/components/category-badge'
-
+import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { LoadingButton } from '@/components/loading-button'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
 
 export function ScheduleModulesGrid({
@@ -26,13 +27,13 @@ export function ScheduleModulesGrid({
       {
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Модуль" />,
-        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.name} accent="primary" />,
         meta: { headerTitle: 'Модуль' },
       },
       {
         accessorKey: 'type',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
-        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+        cell: ({ row }) => <CategoryBadge>{moduleTypeRu(row.original.type)}</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
       {
@@ -52,11 +53,11 @@ export function ScheduleModulesGrid({
         accessorFn: (row) => row.last_refreshed_at ?? '',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
         cell: ({ row }) => (
-          <span className="whitespace-nowrap text-xs text-muted-foreground">
+          <DataGridMutedCell>
             {row.original.last_refreshed_at
               ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
               : '—'}
-          </span>
+          </DataGridMutedCell>
         ),
         meta: { headerTitle: 'Обновлено' },
       },
@@ -64,12 +65,9 @@ export function ScheduleModulesGrid({
         id: 'enabled',
         accessorFn: (row) => (row.enabled ? 'on' : 'off'),
         header: ({ column }) => <DataGridColumnHeader column={column} title="Статус" />,
-        cell: ({ row }) =>
+        cell: ({ row }) => (
-          row.original.enabled ? (
+          <ModeBadge enabled={row.original.enabled} onLabel="Вкл" offLabel="Выкл" />
-            <Badge variant="default">Вкл</Badge>
+        ),
-          ) : (
-            <Badge variant="secondary">Выкл</Badge>
-          ),
         meta: { headerTitle: 'Статус' },
       },
       {

apps/web/src/components/section-cards.tsx

@@ -42,7 +42,7 @@ export function SectionCards({ items, className }: { items: SectionCardItem[]; c
       {items.map((item, idx) => {
         const clickable = Boolean(item.onClick)
         const content = (
-          <CardContent className="flex items-start gap-2.5 px-3 py-2.5">
+          <CardContent className="flex items-start gap-2.5 px-3 py-2">
             {item.icon ? (
               <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground">
                 {item.icon}
@@ -80,8 +80,9 @@ export function SectionCards({ items, className }: { items: SectionCardItem[]; c
         return (
           <Card
             key={typeof item.label === 'string' ? item.label : idx}
+            size="sm"
             className={cn(
-              'gap-0',
+              'gap-0 py-0',
               VARIANT_CLASS[item.variant ?? 'default'],
               item.active && 'border-primary ring-1 ring-primary/30',
               clickable && 'cursor-pointer transition-colors hover:bg-muted/40',

apps/web/src/components/settings/settings-kv-grid.tsx

@@ -1,6 +1,7 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
@@ -23,13 +24,13 @@ export function SettingsKvGrid({
       {
         accessorKey: 'key',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Ключ" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.key}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.key} accent="mono" />,
         meta: { headerTitle: 'Ключ' },
       },
       {
         accessorKey: 'value',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Значение" />,
-        cell: ({ row }) => <span className="font-mono text-xs">{row.original.value}</span>,
+        cell: ({ row }) => <DataGridPrimaryCell title={row.original.value} accent="mono" />,
         meta: { headerTitle: 'Значение' },
       },
     ],

apps/web/src/components/skeletons.tsx

@@ -17,9 +17,9 @@ export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
 
 export function AnalyticsDashboardSkeleton() {
   return (
-    <div className="grid gap-4 lg:grid-cols-3 lg:grid-rows-2">
+    <div className="grid gap-4 lg:grid-cols-3 lg:items-start">
-      <Card className="gap-0 lg:row-span-2">
+      <Card size="sm" className="gap-0 py-0">
-        <CardContent className="space-y-4 p-5">
+        <CardContent className="space-y-4 py-4">
           <Skeleton className="h-4 w-40" />
           <div className="grid gap-4 sm:grid-cols-3">
             {Array.from({ length: 3 }).map((_, i) => (
@@ -30,15 +30,15 @@ export function AnalyticsDashboardSkeleton() {
           <Skeleton className="h-32 w-full" />
         </CardContent>
       </Card>
-      <Card className="gap-0">
+      <Card size="sm" className="gap-0 py-0">
-        <CardContent className="space-y-4 p-5">
+        <CardContent className="space-y-4 py-4">
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-10 w-24" />
           <Skeleton className="h-36 w-full" />
         </CardContent>
       </Card>
-      <Card className="gap-0">
+      <Card size="sm" className="gap-0 py-0">
-        <CardContent className="space-y-4 p-5">
+        <CardContent className="space-y-4 py-4">
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-44 w-full" />
         </CardContent>
@@ -49,16 +49,16 @@ export function AnalyticsDashboardSkeleton() {
 
 export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
   return (
-    <Card className="gap-0">
+    <Card size="sm" className="gap-0 py-0">
       <CardContent className="p-0">
         <div className="flex flex-col">
-          <div className="flex gap-2 border-b p-3">
+          <div className="flex gap-2 border-b px-3 py-2">
             {Array.from({ length: cols }).map((_, i) => (
               <Skeleton className="h-4 flex-1" key={`h-${i}`} />
             ))}
           </div>
           {Array.from({ length: rows }).map((_, r) => (
-            <div className="flex gap-2 border-b p-3" key={`r-${r}`}>
+            <div className="flex gap-2 border-b px-3 py-2" key={`r-${r}`}>
               {Array.from({ length: cols }).map((_, c) => (
                 <Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
               ))}

apps/web/src/components/status-badge.tsx

@@ -1,35 +1,72 @@
 import type { ComponentProps } from 'react'
 
+import { cn } from '@evobgp/ui/lib/utils'
+
 import { Badge } from '@/components/reui/badge'
+import { jobStatusRu } from '@/lib/ui-labels'
 
 type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
 
 const STATUS_VARIANT: Record<string, BadgeVariant> = {
-  active: 'success',
+  active: 'success-light',
-  ok: 'success',
+  ok: 'success-light',
-  paid: 'success',
+  paid: 'success-light',
-  established: 'success',
+  established: 'success-light',
-  succeeded: 'success',
+  succeeded: 'success-light',
-  healthy: 'success',
+  healthy: 'success-light',
-  paused: 'secondary',
+  approved: 'success-light',
-  disabled: 'secondary',
+  accept: 'success-light',
+  paused: 'invert-light',
+  disabled: 'invert-light',
   archived: 'outline',
-  error: 'destructive',
+  error: 'destructive-light',
-  failed: 'destructive',
+  failed: 'destructive-light',
-  running: 'info',
+  revoked: 'destructive-light',
-  queued: 'info',
+  block: 'destructive-light',
-  overdue: 'warning',
+  cancelled: 'destructive-light',
-  stale: 'warning',
+  running: 'info-light',
-  warning: 'warning',
+  queued: 'info-light',
-  mismatch: 'warning',
+  overdue: 'warning-light',
-  pending: 'warning',
+  stale: 'warning-light',
-  approved: 'success',
+  warning: 'warning-light',
-  revoked: 'destructive',
+  mismatch: 'warning-light',
-  block: 'destructive',
+  pending: 'warning-light',
-  accept: 'success',
 }
 
-export function StatusBadge({ status, label }: { status: string; label?: string }) {
+const DOT_COLOR: Record<string, string> = {
-  const variant = STATUS_VARIANT[status.toLowerCase()] ?? 'outline'
+  'success-light': 'bg-success',
-  return <Badge variant={variant}>{label ?? status}</Badge>
+  'info-light': 'bg-info',
+  'warning-light': 'bg-warning',
+  'destructive-light': 'bg-destructive',
+  'invert-light': 'bg-muted-foreground',
+  outline: 'bg-muted-foreground',
+}
+
+export function jobStatusVariant(status: string): BadgeVariant {
+  return STATUS_VARIANT[status.toLowerCase()] ?? 'outline'
+}
+
+export function StatusBadge({
+  status,
+  label,
+  hint,
+  className,
+}: {
+  status: string
+  label?: string
+  hint?: string
+  className?: string
+}) {
+  const variant = jobStatusVariant(status)
+  const dotColor = DOT_COLOR[variant] ?? 'bg-muted-foreground'
+
+  return (
+    <div className={cn('flex flex-col gap-0.5', className)}>
+      <Badge variant={variant} size="sm" radius="full" className="gap-1.5">
+        <span className={cn('size-1.5 shrink-0 rounded-full', dotColor)} aria-hidden />
+        {label ?? jobStatusRu(status)}
+      </Badge>
+      {hint ? <span className="text-xs text-muted-foreground">{hint}</span> : null}
+    </div>
+  )
 }

apps/web/src/lib/access/api-key-labels.ts

@@ -1,10 +1,12 @@
 import type { ApiKeyRole } from '@/types/api'
 
+import { apiKeyRoleRu } from '@/lib/ui-labels'
+
 export const API_KEY_ROLE_ITEMS: ReadonlyArray<{ value: ApiKeyRole; label: string }> = [
-  { value: 'viewer', label: 'viewer — только чтение' },
+  { value: 'viewer', label: `${apiKeyRoleRu('viewer')} — только чтение` },
-  { value: 'editor', label: 'editor — CRUD без apply' },
+  { value: 'editor', label: `${apiKeyRoleRu('editor')} — CRUD без применения` },
-  { value: 'operator', label: 'operator — полный доступ' },
+  { value: 'operator', label: `${apiKeyRoleRu('operator')} — полный доступ` },
-  { value: 'node', label: 'node — только API ноды' },
+  { value: 'node', label: `${apiKeyRoleRu('node')} — только API ноды` },
 ]
 
 export function apiKeyRoleLabel(role: ApiKeyRole): string {

apps/web/src/lib/data-grid-defaults.ts

@@ -25,6 +25,17 @@ export const DATA_GRID_PAGINATION_RU = {
   nextPageLabel: 'Следующая страница',
 }
 
+export const DATA_GRID_MESSAGES_RU = {
+  emptyMessage: 'Нет данных',
+  loadingMessage: 'Загрузка…',
+  fetchingMoreMessage: 'Загрузка…',
+  selectAllLabel: 'Выбрать все',
+  selectRowLabel: 'Выбрать строку',
+  pinRowLabel: 'Закрепить строку',
+  unpinRowLabel: 'Открепить строку',
+  allRecordsLoadedMessage: 'Все записи загружены',
+}
+
 export const DATA_GRID_DENSE_LAYOUT: NonNullable<DataGridProps<object>['tableLayout']> = {
   ...DATA_GRID_TABLE_LAYOUT,
   dense: true,

apps/web/src/lib/metrics/deployment-progress.ts

@@ -30,3 +30,25 @@ export function deploymentProgress(speakers: SpeakerRow[]): DeploymentProgress {
     mode: 'online',
   }
 }
+
+export function deploymentProgressMeta(deploy: DeploymentProgress): {
+  label: string
+  hint: string
+} {
+  if (deploy.total === 0) {
+    return {
+      label: 'Деплой на спикерах',
+      hint: 'Нет зарегистрированных BIRD-спикеров',
+    }
+  }
+  if (deploy.mode === 'revision') {
+    return {
+      label: `Применена ревизия (${deploy.synced} из ${deploy.total} спикеров)`,
+      hint: 'Доля спикеров, на которых последняя опубликованная ревизия уже применена',
+    }
+  }
+  return {
+    label: `Спикеры в сети (${deploy.synced} из ${deploy.total})`,
+    hint: 'Ревизии ещё не публиковались — показана доступность агента на нодах',
+  }
+}

apps/web/src/lib/metrics/peer-session-breakdown.ts

@@ -14,7 +14,7 @@ export function peerSessionBreakdown(peers: PeerRow[]): BreakdownSlice[] {
   if (established > 0) {
     slices.push({
       key: 'established',
-      label: 'Established',
+      label: 'Установлена',
       count: established,
       color: 'var(--color-chart-2)',
     })
@@ -22,7 +22,7 @@ export function peerSessionBreakdown(peers: PeerRow[]): BreakdownSlice[] {
   if (pending > 0) {
     slices.push({
       key: 'pending',
-      label: 'Не Established',
+      label: 'Не установлена',
       count: pending,
       color: 'var(--color-warning)',
     })

apps/web/src/lib/metrics/readiness-breakdown.ts

@@ -35,7 +35,7 @@ export function readinessBreakdown(
   const slices: BreakdownSlice[] = [
     {
       key: 'health',
-      label: 'Health OK',
+      label: 'API доступен',
       count: 1,
       color: 'var(--color-chart-2)',
     },
@@ -44,7 +44,7 @@ export function readinessBreakdown(
   if (okCount > 0) {
     slices.push({
       key: 'checks-ok',
-      label: 'Checks OK',
+      label: 'Проверки в норме',
       count: okCount,
       color: 'var(--color-chart-1)',
     })
@@ -52,7 +52,7 @@ export function readinessBreakdown(
   if (failCount > 0) {
     slices.push({
       key: 'checks-fail',
-      label: 'Checks fail',
+      label: 'Ошибки проверок',
       count: failCount,
       color: 'var(--color-warning)',
     })
@@ -61,7 +61,7 @@ export function readinessBreakdown(
   if (slices.length === 1 && okCount === 0 && failCount === 0) {
     slices.push({
       key: 'ready',
-      label: ready?.status === 'ok' ? 'Ready' : 'Ready pending',
+      label: ready?.status === 'ok' ? 'Готов' : 'Ожидает готовности',
       count: 1,
       color: 'var(--color-chart-4)',
     })

apps/web/src/lib/metrics/recent-platform-activity.ts

@@ -1,17 +1,11 @@
 import type { JobRow, PeerRow, RevisionRow, SpeakerRow } from '@/types/api'
 
+import { jobKindRu, jobStatusRu } from '@/lib/ui-labels'
+
 import type { PlatformActivityItem } from './types'
 
-const JOB_KIND_RU: Record<string, string> = {
-  module_refresh: 'Обновление модуля',
-  apply: 'Применение конфигурации',
-  rollback: 'Откат ревизии',
-  bird_reload: 'Перезагрузка BIRD',
-}
-
 function jobMessage(job: JobRow): string {
-  const kind = JOB_KIND_RU[job.kind] ?? job.kind
+  return `${jobKindRu(job.kind)} · ${jobStatusRu(job.status)}`
-  return `${kind} · ${job.status}`
 }
 
 export function recentPlatformActivity(
@@ -45,7 +39,7 @@ export function recentPlatformActivity(
   for (const peer of peers.filter((p) => p.session_mismatch).slice(0, 2)) {
     items.push({
       id: `peer-${peer.id}`,
-      message: `Mismatch сессии: ${peer.name ?? peer.neighbor}`,
+      message: `Расхождение сессии: ${peer.name ?? peer.neighbor}`,
       status: 'mismatch',
       kind: 'network',
     })

apps/web/src/lib/ui-labels.ts

@@ -27,3 +27,97 @@ export function moduleTypeRu(type: string): string {
       return type
   }
 }
+
+const JOB_KIND_RU: Record<string, string> = {
+  module_refresh: 'Обновление модуля',
+  apply: 'Применение конфигурации',
+  rollback: 'Откат ревизии',
+  bird_reload: 'Перезагрузка BIRD',
+}
+
+export function jobKindRu(kind: string): string {
+  return JOB_KIND_RU[kind] ?? kind
+}
+
+const JOB_STATUS_RU: Record<string, string> = {
+  queued: 'В очереди',
+  running: 'Выполняется',
+  succeeded: 'Успешно',
+  failed: 'Ошибка',
+  error: 'Ошибка',
+  cancelled: 'Отменена',
+  canceled: 'Отменена',
+  pending: 'Ожидает',
+  approved: 'Одобрен',
+  revoked: 'Отозван',
+  active: 'Активен',
+  ok: 'В норме',
+  mismatch: 'Расхождение',
+  established: 'Установлена',
+  healthy: 'В норме',
+  warning: 'Предупреждение',
+  stale: 'Устарело',
+  overdue: 'Просрочено',
+  paused: 'Приостановлен',
+  disabled: 'Выключен',
+  archived: 'В архиве',
+  block: 'block',
+  accept: 'accept',
+}
+
+export function jobStatusRu(status: string): string {
+  return JOB_STATUS_RU[status.toLowerCase()] ?? status
+}
+
+export function bgpSessionStateRu(state: string | null | undefined): string {
+  if (!state) return '—'
+  if (state === 'Established') return 'Установлена'
+  return state
+}
+
+export function speakerOnlineLabel(agentOk: boolean | undefined): string {
+  if (agentOk === true) return 'В сети'
+  if (agentOk === false) return 'Не в сети'
+  return '—'
+}
+
+export function firewallClientStatusRu(status: string): string {
+  switch (status) {
+    case 'pending':
+      return 'Ожидает'
+    case 'approved':
+      return 'Одобрен'
+    case 'revoked':
+      return 'Отозван'
+    default:
+      return status
+  }
+}
+
+export function apiKeyRoleRu(role: string): string {
+  switch (role) {
+    case 'viewer':
+      return 'Наблюдатель'
+    case 'editor':
+      return 'Редактор'
+    case 'operator':
+      return 'Оператор'
+    case 'node':
+      return 'Нода'
+    default:
+      return role
+  }
+}
+
+export function readyCheckRu(key: string): string {
+  switch (key) {
+    case 'postgres':
+      return 'PostgreSQL'
+    case 'store':
+      return 'Хранилище'
+    case 'jobs':
+      return 'Очередь задач'
+    default:
+      return key
+  }
+}

apps/web/src/queries/firewall.ts

@@ -83,8 +83,10 @@ export function useCreateFirewallRule() {
         body: JSON.stringify(body),
       }),
     onSuccess: () => {
+      toast.success('Правило добавлено')
       void qc.invalidateQueries({ queryKey: firewallKeys.all })
     },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось добавить правило'),
   })
 }
 

apps/web/src/routes/_auth/access.tsx

@@ -1,11 +1,10 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { Info, KeyRound, RefreshCw, ShieldCheck, ShieldOff } from 'lucide-react'
+import { KeyRound, RefreshCw, ShieldCheck, ShieldOff } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { PanelCard } from '@/components/panel-card'
 
 import { AccessApiKeysCard } from '@/components/access/access-api-keys-card'
 import { PageHeader } from '@/components/page-header'
@@ -79,29 +78,12 @@ function AccessComponent() {
         }
       />
 
-      <Alert className="border-info/30 bg-info/5">
-        <Info className="text-info" />
-        <AlertTitle>О API-ключах</AlertTitle>
-        <AlertDescription>
-          Роли: <code className="text-xs">viewer</code> (чтение),{' '}
-          <code className="text-xs">editor</code> (CRUD), <code className="text-xs">operator</code>{' '}
-          (apply и настройки), <code className="text-xs">node</code> (API ноды). Полный токен
-          показывается один раз при создании и ротации. Токен браузера — в{' '}
-          <Link to="/settings" className="text-primary underline-offset-4 hover:underline">
-            настройках
-          </Link>
-          ; для локальной разработки с demo-seed подойдёт <code className="text-xs">dev</code>{' '}
-          (роль operator).
-        </AlertDescription>
-      </Alert>
-
       {session ? (
-        <Card>
+        <PanelCard
-          <CardHeader className="border-b py-3">
+          title="Текущая сессия"
-            <CardTitle className="text-base">Текущая сессия</CardTitle>
+          description="Tenant и роль ключа, с которым открыта панель."
-            <CardDescription>Tenant и роль ключа, с которым открыта панель.</CardDescription>
+          contentClassName="grid gap-3 py-4 text-sm sm:grid-cols-2"
-          </CardHeader>
+        >
-          <CardContent className="grid gap-3 p-4 text-sm sm:grid-cols-2">
             <div>
               <p className="text-muted-foreground">Tenant</p>
               <p className="break-all font-mono text-xs">{session.tenant_id}</p>
@@ -110,11 +92,9 @@ function AccessComponent() {
               <p className="text-muted-foreground">Роль</p>
               <p className="font-mono">{session.role}</p>
             </div>
-          </CardContent>
+        </PanelCard>
-        </Card>
       ) : (
-        <Card>
+        <PanelCard contentClassName="py-4 text-sm text-muted-foreground">
-          <CardContent className="py-6 text-sm text-muted-foreground">
             Не удалось определить сессию. Укажите токен в{' '}
             <Link to="/settings" className="text-primary underline-offset-4 hover:underline">
               настройках
@@ -123,8 +103,7 @@ function AccessComponent() {
             {sessionQuery.isError && sessionQuery.error instanceof Error ? (
               <span className="mt-2 block text-destructive">{sessionQuery.error.message}</span>
             ) : null}
-          </CardContent>
+        </PanelCard>
-        </Card>
       )}
 
       {isOperator ? (
@@ -143,14 +122,12 @@ function AccessComponent() {
           />
         </>
       ) : session ? (
-        <Card>
+        <PanelCard contentClassName="py-4 text-sm text-muted-foreground">
-          <CardContent className="py-6 text-sm text-muted-foreground">
+          Управление API-ключами доступно только роли <strong>operator</strong>. Текущая роль:{' '}
-            Управление API-ключами доступно только роли <strong>operator</strong>. Текущая роль:{' '}
+          <span className="font-mono">{session.role}</span>. Для выдачи ключей войдите с
-            <span className="font-mono">{session.role}</span>. Для выдачи ключей войдите с
+          operator-ключом или создайте ключ через API / переменную{' '}
-            operator-ключом или создайте ключ через API / переменную{' '}
+          <code className="text-xs">EVOBGP_API_KEYS</code>.
-            <code className="text-xs">EVOBGP_API_KEYS</code>.
+        </PanelCard>
-          </CardContent>
-        </Card>
       ) : null}
     </div>
   )

apps/web/src/routes/_auth/dashboard.tsx

@@ -1,16 +1,10 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQueries } from '@tanstack/react-query'
-import { CheckCircle, Info, RefreshCw, XCircle } from 'lucide-react'
+import { RefreshCw } from 'lucide-react'
 import { useState } from 'react'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import {
+import { PanelCard } from '@/components/panel-card'
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@evobgp/ui/components/card'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 
 import {
@@ -27,7 +21,6 @@ import { AnalyticsDashboardSkeleton } from '@/components/skeletons'
 
 import {
   moduleNameById,
-  overviewHealthQueryOptions,
   overviewJobsQueryOptions,
   overviewModulesQueryOptions,
   overviewPeersQueryOptions,
@@ -44,7 +37,6 @@ function DashboardComponent() {
 
   const results = useQueries({
     queries: [
-      overviewHealthQueryOptions(),
       overviewModulesQueryOptions(),
       overviewPeersQueryOptions(),
       overviewSpeakersQueryOptions(),
@@ -53,7 +45,7 @@ function DashboardComponent() {
     ],
   })
 
-  const [healthQ, modulesQ, peersQ, speakersQ, revisionsQ, jobsQ] = results
+  const [modulesQ, peersQ, speakersQ, revisionsQ, jobsQ] = results
   const initialLoading =
     modulesQ.isLoading || peersQ.isLoading || speakersQ.isLoading || revisionsQ.isLoading || jobsQ.isLoading
   const refreshing = results.some((r) => r.isFetching && !r.isLoading)
@@ -94,34 +86,17 @@ function DashboardComponent() {
         }
       />
 
-      <Alert className="border-info/30 bg-info/5">
-        <Info className="text-info" />
-        <AlertTitle>Панель управления EvoBGP</AlertTitle>
-        <AlertDescription>
-          Сводка по модулям, сети и фоновым задачам. BGP и ноды — «Сеть», префиксы — «Модули»,
-          деплой — «Операции», здоровье API — «Мониторинг».
-        </AlertDescription>
-      </Alert>
-
-      <HealthAlert
-        loading={healthQ.isLoading}
-        ok={healthQ.data === true}
-        loadError={modulesQ.isError || peersQ.isError ? 'Некоторые данные не загружены' : null}
-      />
-
       {initialLoading ? (
         <AnalyticsDashboardSkeleton />
       ) : (
-        <div className="grid gap-4 lg:grid-cols-3 lg:grid-rows-2">
+        <div className="grid gap-4 lg:grid-cols-3 lg:items-start">
-          <div className="lg:row-span-2">
+          <DashboardPlatformCard
-            <DashboardPlatformCard
+            modules={modules}
-              modules={modules}
+            peers={peers}
-              peers={peers}
+            speakers={speakers}
-              speakers={speakers}
+            jobs={jobs}
-              jobs={jobs}
+            revisions={revisions}
-              revisions={revisions}
+          />
-            />
-          </div>
           <DashboardNetworkCapacityCard peers={peers} speakers={speakers} jobs={jobs} />
           <DashboardOperationsFlowCard jobs={jobs} modules={modules} />
         </div>
@@ -153,63 +128,12 @@ function DashboardComponent() {
         </DataGridCard>
       </div>
 
-      <Card className="gap-0">
+      <PanelCard
-        <CardHeader className="border-b py-3">
+        title="Быстрые действия"
-          <CardTitle className="text-base">Быстрые действия</CardTitle>
+        description="Частые переходы к настройке и деплою"
-          <CardDescription>Частые переходы к настройке и деплою</CardDescription>
+        footer={<DashboardQuickActions />}
-        </CardHeader>
+        footerClassName="gap-2 p-3"
-        <DashboardQuickActions />
+      />
-      </Card>
     </div>
   )
 }
-
-function HealthAlert({
-  loading,
-  ok,
-  loadError,
-}: {
-  loading: boolean
-  ok: boolean | undefined
-  loadError: string | null
-}) {
-  if (loading) {
-    return (
-      <Alert>
-        <Skeleton className="size-5 rounded-full" />
-        <AlertTitle>Проверка API…</AlertTitle>
-        <AlertDescription>
-          Запрос к <code className="text-xs">/v1/health</code>
-        </AlertDescription>
-      </Alert>
-    )
-  }
-  if (ok && !loadError) {
-    return (
-      <Alert className="border-success/30 bg-success/5">
-        <CheckCircle className="text-success" />
-        <AlertTitle>API работает</AlertTitle>
-        <AlertDescription>Сервер отвечает на запросы health-check.</AlertDescription>
-      </Alert>
-    )
-  }
-  if (ok && loadError) {
-    return (
-      <Alert className="border-warning/30 bg-warning/5">
-        <Info className="text-warning" />
-        <AlertTitle>API доступен, данные не загружены</AlertTitle>
-        <AlertDescription>{loadError}. Проверьте Bearer-токен в «Настройках».</AlertDescription>
-      </Alert>
-    )
-  }
-  return (
-    <Alert variant="destructive" className="border-destructive/30 bg-destructive/5">
-      <XCircle className="text-destructive" />
-      <AlertTitle>API недоступен</AlertTitle>
-      <AlertDescription>
-        Не удалось получить ответ от сервера. Проверьте, что API запущен (порт 8080) и в dev работает
-        прокси Vite.
-      </AlertDescription>
-    </Alert>
-  )
-}

apps/web/src/routes/_auth/directories.tsx

@@ -1,8 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { BookText, Globe, Info, RefreshCw, Tags } from 'lucide-react'
+import { BookText, Globe, RefreshCw, Tags } from 'lucide-react'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
@@ -68,15 +67,6 @@ function DirectoriesComponent() {
         }
       />
 
-      <Alert className="border-info/30 bg-info/5">
-        <Info className="text-info" />
-        <AlertTitle>О справочниках</AlertTitle>
-        <AlertDescription>
-          Сообщества BGP используются в AS- и CDN-модулях для тегирования префиксов. DoH-профили — в
-          доменных модулях для DNS-over-HTTPS резолвинга.
-        </AlertDescription>
-      </Alert>
-
       {loading ? <SectionCardsSkeleton count={3} /> : <SectionCards items={items} />}
 
       <BadgeTabs

apps/web/src/routes/_auth/firewall.tsx

@@ -1,19 +1,19 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { Copy, Info, RefreshCw, Shield } from 'lucide-react'
+import { Copy, Plus, RefreshCw, Shield } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { PanelCard } from '@/components/panel-card'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+import { DataGridCard } from '@/components/data-grid-shell'
 import { FirewallClientsGrid } from '@/components/firewall/firewall-clients-grid'
+import { FirewallRuleCreateDialog } from '@/components/firewall/firewall-rule-create-dialog'
 import { FirewallRulesGrid } from '@/components/firewall/firewall-rules-grid'
 import { PageHeader } from '@/components/page-header'
-import { CommunitySelect } from '@/components/modules/community-select'
 import { QueryState } from '@/components/query-state'
 import { TableSkeleton } from '@/components/skeletons'
 import { directoriesCommunitiesQueryOptions } from '@/queries/directories'
@@ -22,7 +22,6 @@ import {
   firewallInstallContextQueryOptions,
   firewallRulesQueryOptions,
   useApproveFirewallClient,
-  useCreateFirewallRule,
   useDeleteFirewallClient,
   useDeleteFirewallRule,
 } from '@/queries/firewall'
@@ -48,7 +47,6 @@ function FirewallPage() {
   const rulesQ = useQuery(firewallRulesQueryOptions('tenant'))
   const approve = useApproveFirewallClient()
   const deleteClient = useDeleteFirewallClient()
-  const createRule = useCreateFirewallRule()
   const deleteRule = useDeleteFirewallRule()
 
   const installCtx = installCtxQ.data
@@ -58,6 +56,7 @@ function FirewallPage() {
     typeof window !== 'undefined' ? httpsOrigin(window.location.origin) : 'https://api.example.com',
   )
   const [seed, setSeed] = useState('')
+  const [createRuleOpen, setCreateRuleOpen] = useState(false)
 
   useEffect(() => {
     if (installCtx?.suggested_cp_url) {
@@ -67,9 +66,6 @@ function FirewallPage() {
       setSeed(installCtx.bundle_seed)
     }
   }, [installCtx?.bundle_seed, installCtx?.suggested_cp_url])
-  const [ruleAction, setRuleAction] = useState<'block' | 'accept'>('block')
-  const [ruleCommunityId, setRuleCommunityId] = useState<string | null>(null)
-  const [ruleComment, setRuleComment] = useState('')
 
   const communities = communitiesQ.data?.items ?? []
 
@@ -96,7 +92,7 @@ function FirewallPage() {
       toast.error(
         installCtx?.bundle_seed_configured === false
           ? 'На CP не задан EVOBGP_BUNDLE_SEED_HEX'
-          : 'Bundle seed недоступен (нужна роль operator)',
+          : 'Seed бандла недоступен (нужна роль оператора)',
       )
       return
     }
@@ -111,7 +107,7 @@ function FirewallPage() {
   return (
     <div className="flex flex-col gap-6">
       <PageHeader
-        title="Firewall blocklist"
+        title="Файрвол: blocklist"
         description="Linux-серверы: синхронизация CIDR по policy block/accept"
         actions={
           <Button
@@ -129,25 +125,16 @@ function FirewallPage() {
         }
       />
 
-      <Alert className="border-info/30 bg-info/5">
+      <PanelCard
-        <Info className="text-info" />
+        title={
-        <AlertTitle>Политика</AlertTitle>
+          <span className="flex items-center gap-2">
-        <AlertDescription>
+            <Shield className="size-4" />
-          Правила сопоставляются с <strong>BGP community</strong> префиксов опубликованной revision.{' '}
-          <strong>block</strong> добавляет префиксы community в kernel; <strong>accept</strong> — не блокирует.
-          Community «Все» — правило для любого community. Default без совпадений — accept.
-        </AlertDescription>
-      </Alert>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Shield className="size-5" />
             Установка на сервер
-          </CardTitle>
+          </span>
-          <CardDescription>One-liner для root на целевом Linux (bash, curl). После enroll — approve в «Запросы».</CardDescription>
+        }
-        </CardHeader>
+        description="Команда для root на целевом Linux (bash, curl). После регистрации — одобрите клиента во вкладке «Запросы»."
-        <CardContent className="flex flex-col gap-4">
+        contentClassName="flex flex-col gap-4 py-4"
+      >
           <div className="grid gap-4 sm:grid-cols-3">
             <div className="space-y-2">
               <Label htmlFor="fw-name">Имя сервера</Label>
@@ -158,7 +145,7 @@ function FirewallPage() {
               <Input id="fw-url" value={cpUrl} onChange={(e) => setCpUrl(e.target.value)} />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="fw-seed">Bundle seed</Label>
+              <Label htmlFor="fw-seed">Seed бандла</Label>
               <Input
                 id="fw-seed"
                 type="password"
@@ -169,10 +156,10 @@ function FirewallPage() {
               />
               <p className="text-muted-foreground text-xs">
                 {installCtxQ.isLoading
-                  ? 'Загрузка из control plane…'
+                  ? 'Загрузка с плоскости управления…'
                   : installCtx?.bundle_seed_configured
                     ? 'Из переменной EVOBGP_BUNDLE_SEED_HEX на CP (docker compose / .env)'
-                    : 'На CP не задан EVOBGP_BUNDLE_SEED_HEX — enroll невозможен'}
+                    : 'На CP не задан EVOBGP_BUNDLE_SEED_HEX — регистрация невозможна'}
               </p>
             </div>
           </div>
@@ -181,8 +168,7 @@ function FirewallPage() {
             <Copy />
             Копировать команду
           </Button>
-        </CardContent>
+        </PanelCard>
-      </Card>
 
       <BadgeTabs
         defaultValue="clients"
@@ -198,115 +184,91 @@ function FirewallPage() {
         ]}
       >
         <TabsContent value="clients" className="mt-0">
-          <QueryState
+          <DataGridCard title="Клиенты" description="Активные Linux-серверы с синхронизацией списка блокировок">
-            data={clientsQ.data}
+            <QueryState
-            isLoading={clientsQ.isLoading}
+              data={clientsQ.data}
-            isError={clientsQ.isError}
+              isLoading={clientsQ.isLoading}
-            error={clientsQ.error}
+              isError={clientsQ.isError}
-            onRetry={() => void clientsQ.refetch()}
+              error={clientsQ.error}
-            skeleton={<TableSkeleton rows={5} cols={6} />}
+              onRetry={() => void clientsQ.refetch()}
-          >
+              skeleton={<TableSkeleton rows={5} cols={6} />}
-            {() => (
+            >
-              <FirewallClientsGrid
+              {() => (
-                clients={activeClients}
+                <FirewallClientsGrid
-                isLoading={clientsQ.isFetching && !clientsQ.isLoading}
+                  clients={activeClients}
-                onApprove={(id) => approve.mutate(id)}
+                  isLoading={clientsQ.isFetching && !clientsQ.isLoading}
-                onReject={(id) => deleteClient.mutate(id)}
+                  onApprove={(id) => approve.mutate(id)}
-                approvePending={approve.isPending}
+                  onReject={(id) => deleteClient.mutate(id)}
-                rejectPending={deleteClient.isPending}
+                  approvePending={approve.isPending}
-              />
+                  rejectPending={deleteClient.isPending}
-            )}
+                />
-          </QueryState>
+              )}
+            </QueryState>
+          </DataGridCard>
         </TabsContent>
 
-        <TabsContent value="rules" className="mt-0 space-y-4">
+        <TabsContent value="rules" className="mt-0">
-          <div className="flex flex-wrap items-end gap-3">
+          <DataGridCard
-            <div className="space-y-1">
+            title="Правила"
-              <Label>Действие</Label>
+            actions={
-              <select
+              <Button size="sm" type="button" onClick={() => setCreateRuleOpen(true)}>
-                className="border-input bg-background h-9 rounded-md border px-2 text-sm"
+                <Plus />
-                value={ruleAction}
+                Добавить правило
-                onChange={(e) => setRuleAction(e.target.value as 'block' | 'accept')}
+              </Button>
-              >
+            }
-                <option value="block">block</option>
-                <option value="accept">accept</option>
-              </select>
-            </div>
-            <CommunitySelect
-              id="fw-rule-community"
-              label="Community"
-              value={ruleCommunityId}
-              onValueChange={setRuleCommunityId}
-              communities={communities}
-              nullable
-              placeholder="Все communities"
-            />
-            <div className="space-y-1">
-              <Label htmlFor="fw-rule-comment">Комментарий</Label>
-              <Input
-                id="fw-rule-comment"
-                className="max-w-xs"
-                placeholder="Комментарий"
-                value={ruleComment}
-                onChange={(e) => setRuleComment(e.target.value)}
-              />
-            </div>
-            <Button
-              size="sm"
-              className="mb-0.5"
-              onClick={() =>
-                createRule.mutate({
-                  scope: 'tenant',
-                  action: ruleAction,
-                  community_id: ruleCommunityId,
-                  comment: ruleComment,
-                })
-              }
-            >
-              Добавить правило
-            </Button>
-          </div>
-          <QueryState
-            data={rulesQ.data}
-            isLoading={rulesQ.isLoading}
-            isError={rulesQ.isError}
-            error={rulesQ.error}
-            onRetry={() => void rulesQ.refetch()}
-            skeleton={<TableSkeleton rows={5} cols={5} />}
           >
-            {() => (
+            <QueryState
-              <FirewallRulesGrid
+              data={rulesQ.data}
-                rules={rules}
+              isLoading={rulesQ.isLoading}
-                communities={communities}
+              isError={rulesQ.isError}
-                isLoading={rulesQ.isFetching && !rulesQ.isLoading}
+              error={rulesQ.error}
-                onDelete={(id) => deleteRule.mutate(id)}
+              onRetry={() => void rulesQ.refetch()}
-                deletePending={deleteRule.isPending}
+              skeleton={<TableSkeleton rows={5} cols={5} />}
-              />
+            >
-            )}
+              {() => (
-          </QueryState>
+                <FirewallRulesGrid
+                  rules={rules}
+                  communities={communities}
+                  isLoading={rulesQ.isFetching && !rulesQ.isLoading}
+                  onDelete={(id) => deleteRule.mutate(id)}
+                  deletePending={deleteRule.isPending}
+                />
+              )}
+            </QueryState>
+          </DataGridCard>
+          <FirewallRuleCreateDialog
+            open={createRuleOpen}
+            onOpenChange={setCreateRuleOpen}
+            communities={communities}
+          />
         </TabsContent>
 
         <TabsContent value="requests" className="mt-0">
-          <QueryState
+          <DataGridCard
-            data={clientsQ.data}
+            title="Запросы"
-            isLoading={clientsQ.isLoading}
+            description="Запросы на регистрацию — одобрите или отклоните новые клиенты"
-            isError={clientsQ.isError}
-            error={clientsQ.error}
-            onRetry={() => void clientsQ.refetch()}
-            skeleton={<TableSkeleton rows={3} cols={6} />}
           >
-            {() => (
+            <QueryState
-              <FirewallClientsGrid
+              data={clientsQ.data}
-                clients={pending}
+              isLoading={clientsQ.isLoading}
-                isLoading={clientsQ.isFetching && !clientsQ.isLoading}
+              isError={clientsQ.isError}
-                onApprove={(id) => approve.mutate(id)}
+              error={clientsQ.error}
-                onReject={(id) => deleteClient.mutate(id)}
+              onRetry={() => void clientsQ.refetch()}
-                approvePending={approve.isPending}
+              skeleton={<TableSkeleton rows={3} cols={6} />}
-                rejectPending={deleteClient.isPending}
+            >
-                emptyTitle="Нет pending-запросов"
+              {() => (
-              />
+                <FirewallClientsGrid
-            )}
+                  clients={pending}
-          </QueryState>
+                  isLoading={clientsQ.isFetching && !clientsQ.isLoading}
+                  onApprove={(id) => approve.mutate(id)}
+                  onReject={(id) => deleteClient.mutate(id)}
+                  approvePending={approve.isPending}
+                  rejectPending={deleteClient.isPending}
+                  emptyTitle="Нет ожидающих запросов"
+                />
+              )}
+            </QueryState>
+          </DataGridCard>
         </TabsContent>
       </BadgeTabs>
     </div>

apps/web/src/routes/_auth/modules/$moduleId.tsx

@@ -1,8 +1,7 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { ArrowLeft, Info, RefreshCw } from 'lucide-react'
+import { ArrowLeft, RefreshCw } from 'lucide-react'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
 
 import { PageHeader } from '@/components/page-header'
@@ -17,25 +16,12 @@ import {
   directoriesDohQueryOptions,
 } from '@/queries/directories'
 import { moduleDetailQueryOptions, moduleEntriesQueryOptions, modulesKeys } from '@/queries/modules'
-import type { AsEntry, ModuleRow } from '@/types/api'
+import type { AsEntry } from '@/types/api'
 
 export const Route = createFileRoute('/_auth/modules/$moduleId')({
   component: ModuleDetailComponent,
 })
 
-function moduleTypeAlert(type: ModuleRow['type']): string {
-  switch (type) {
-    case 'AS_PREFIXES':
-      return 'Модуль AS получает префиксы через RIPEstat по указанным ASN. После refresh счётчики префиксов обновляются в таблице записей.'
-    case 'CDN_CIDRS':
-      return 'Модуль CDN скачивает списки CIDR по URL (plaintext или JSON). Используйте предпросмотр при добавлении источника.'
-    case 'DOMAINS':
-      return 'Модуль доменов резолвит FQDN через DoH-профили и конвертирует IP в префиксы. Политика и профили настраиваются в редактировании модуля.'
-    case 'IP_RANGES':
-      return 'Модуль IP-диапазонов использует статические CIDR без внешнего refresh (сервер может вернуть 204). Записи участвуют в агрегации напрямую.'
-  }
-}
-
 function ModuleDetailComponent() {
   const { moduleId } = Route.useParams()
   const queryClient = useQueryClient()
@@ -114,12 +100,6 @@ function ModuleDetailComponent() {
               )}
             </div>
 
-            <Alert>
-              <Info />
-              <AlertTitle>О модуле</AlertTitle>
-              <AlertDescription>{moduleTypeAlert(m.type)}</AlertDescription>
-            </Alert>
-
             <ModuleKpiCards
               mod={m}
               communities={communities}

apps/web/src/routes/_auth/monitoring.tsx

@@ -1,13 +1,14 @@
 import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { Activity, AlertTriangle, Bird, Database, HeartPulse, Info, ListTodo, RefreshCw } from 'lucide-react'
+import { Activity, AlertTriangle, Bird, RefreshCw } from 'lucide-react'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
-import { Badge } from '@evobgp/ui/components/badge'
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { PanelCard } from '@/components/panel-card'
 import { Separator } from '@evobgp/ui/components/separator'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+import { DataGridCard } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
+import { jobKindRu } from '@/lib/ui-labels'
 import {
   DashboardOperationsFlowCard,
   MonitoringHealthCard,
@@ -21,7 +22,6 @@ import {
   monitoringHealthQueryOptions,
   monitoringReadyQueryOptions,
   monitoringVersionQueryOptions,
-  type ReadyStatus,
   type VersionInfo,
 } from '@/queries/monitoring'
 import { networkBirdQueryOptions } from '@/queries/network'
@@ -83,7 +83,13 @@ function MonitoringComponent() {
     <div className="flex flex-col gap-6">
       <PageHeader
         title="Мониторинг"
-        description="Состояние API, BGP и задач для диагностики инцидентов"
+        description={`Состояние API, BGP и задач для диагностики инцидентов${
+          versionText !== '—'
+            ? ` · версия ${versionText}${
+                versionQ.data?.git_sha ? ` (${versionQ.data.git_sha.slice(0, 8)})` : ''
+              }`
+            : ''
+        }`}
         actions={
           <Button variant="outline" size="sm" onClick={refetchAll} disabled={refreshing}>
             <RefreshCw className={refreshing ? 'animate-spin' : ''} />
@@ -117,46 +123,33 @@ function MonitoringComponent() {
             </div>
           )}
 
-          <Alert className="border-muted bg-muted/30">
-            <Info className="size-4" />
-            <AlertTitle className="text-sm">
-              Версия API: {versionText}
-              {versionQ.data?.git_sha ? ` · ${versionQ.data.git_sha.slice(0, 8)}` : ''}
-            </AlertTitle>
-            <AlertDescription className="text-xs">
-              {overallHint({ health: healthQ.data, jobsFailed: failed })}
-            </AlertDescription>
-          </Alert>
-
           <div className="grid gap-4 lg:grid-cols-2">
-            <Card>
+            <DataGridCard
-              <CardHeader>
+              title="Доступность и готовность"
-                <CardTitle className="text-base">Доступность и готовность</CardTitle>
+              description="GET /v1/health · GET /v1/ready"
-                <CardDescription>GET /v1/health · GET /v1/ready</CardDescription>
+            >
-              </CardHeader>
+              <QueryState
-              <CardContent className="space-y-4">
+                data={readyQ.data}
-                <QueryState
+                isLoading={readyQ.isLoading}
-                  data={readyQ.data}
+                isError={readyQ.isError}
-                  isLoading={readyQ.isLoading}
+                error={readyQ.error}
-                  isError={readyQ.isError}
+                skeleton={<div className="h-40" />}
-                  error={readyQ.error}
+                onRetry={() => readyQ.refetch()}
-                  skeleton={<div className="h-40" />}
+              >
-                  onRetry={() => readyQ.refetch()}
+                {(ready) => <MonitoringReadyGrid health={healthQ.data} ready={ready} />}
-                >
+              </QueryState>
-                  {(ready) => <MonitoringReadyGrid health={healthQ.data} ready={ready} />}
+            </DataGridCard>
-                </QueryState>
-              </CardContent>
-            </Card>
 
-            <Card>
+            <PanelCard
-              <CardHeader>
+              title={
-                <CardTitle className="flex items-center gap-2 text-base">
+                <span className="flex items-center gap-2">
                   <Bird className="size-4" />
                   BGP на API-хосте
-                </CardTitle>
+                </span>
-                <CardDescription>GET /v1/bird/status</CardDescription>
+              }
-              </CardHeader>
+              description="GET /v1/bird/status"
-              <CardContent>
+              contentClassName="py-4"
+            >
                 <QueryState
                   data={birdQ.data}
                   isLoading={birdQ.isLoading}
@@ -167,20 +160,20 @@ function MonitoringComponent() {
                 >
                   {(bird) => <BirdSummary bird={bird} />}
                 </QueryState>
-              </CardContent>
+            </PanelCard>
-            </Card>
           </div>
 
           <div className="grid gap-4 lg:grid-cols-2">
-            <Card>
+            <PanelCard
-              <CardHeader>
+              title={
-                <CardTitle className="flex items-center gap-2 text-base">
+                <span className="flex items-center gap-2">
                   <Activity className="size-4" />
                   Задачи
-                </CardTitle>
+                </span>
-                <CardDescription>Последние 100 задач · GET /v1/jobs</CardDescription>
+              }
-              </CardHeader>
+              description="Последние 100 задач · GET /v1/jobs"
-              <CardContent className="space-y-4">
+              contentClassName="space-y-4 py-4"
+            >
                 <div className="flex flex-wrap gap-4 text-sm">
                   <Metric label="Активных" value={jobs.filter((j) => j.status === 'running' || j.status === 'queued').length} />
                   <Metric
@@ -198,8 +191,8 @@ function MonitoringComponent() {
                       {failedJobs.map((job) => (
                         <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
                           <div className="flex items-start justify-between gap-2">
-                            <p className="font-medium">{job.kind}</p>
+                            <p className="font-medium">{jobKindRu(job.kind)}</p>
-                            <Badge variant="destructive">{job.status}</Badge>
+                            <StatusBadge status={job.status} />
                           </div>
                           {job.error ? (
                             <p className="mt-1 text-xs text-muted-foreground">
@@ -216,89 +209,66 @@ function MonitoringComponent() {
                     Критичных сбоев в последних 100 задачах нет.
                   </p>
                 )}
-              </CardContent>
+            </PanelCard>
-            </Card>
 
-            <Card>
+            <PanelCard
-              <CardHeader>
+              title={
-                <CardTitle className="flex items-center gap-2 text-base">
+                <span className="flex items-center gap-2">
                   <AlertTriangle className="size-4 text-muted-foreground" />
                   Что проверять при деградации
-                </CardTitle>
+                </span>
-                <CardDescription>Короткая шпаргалка для triage</CardDescription>
+              }
-              </CardHeader>
+              description="Краткая шпаргалка для первичной диагностики"
-              <CardContent className="space-y-3">
+              contentClassName="py-4"
-                <Alert>
+            >
-                  <HeartPulse className="size-4" />
+                <ul className="space-y-3 text-sm text-muted-foreground">
-                  <AlertTitle>API недоступен</AlertTitle>
+                  <li>
-                  <AlertDescription>
+                    <span className="font-medium text-foreground">API недоступен.</span> Если{' '}
-                    Если <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс
+                    <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс API и
-                    API и его логи.
+                    его логи.
-                  </AlertDescription>
+                  </li>
-                </Alert>
+                  <li>
-                <Alert>
+                    <span className="font-medium text-foreground">Готовность не «Готов».</span> Сначала{' '}
-                  <Database className="size-4" />
+                    <code className="text-xs">postgres</code>, затем <code className="text-xs">store</code>{' '}
-                  <AlertTitle>Readiness не «Готов»</AlertTitle>
+                    и <code className="text-xs">jobs</code> в проверках.
-                  <AlertDescription>
+                  </li>
-                    Сначала <code className="text-xs">postgres</code>, затем{' '}
+                  <li>
-                    <code className="text-xs">store</code> и <code className="text-xs">jobs</code> в checks.
+                    <span className="font-medium text-foreground">Низкий ratio BGP.</span> Проверьте{' '}
-                  </AlertDescription>
+                    <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
-                </Alert>
+                  </li>
-                <Alert>
+                  <li>
-                  <Bird className="size-4" />
+                    <span className="font-medium text-foreground">Ошибки задач.</span> Откройте Операции и
-                  <AlertTitle>Низкий ratio BGP</AlertTitle>
+                    проверьте последние неуспешные задачи.
-                  <AlertDescription>
+                  </li>
-                    Проверьте <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
+                </ul>
-                  </AlertDescription>
+            </PanelCard>
-                </Alert>
-                <Alert>
-                  <ListTodo className="size-4" />
-                  <AlertTitle>Ошибки задач</AlertTitle>
-                  <AlertDescription>
-                    Откройте Операции и проверьте последние неуспешные jobs.
-                  </AlertDescription>
-                </Alert>
-              </CardContent>
-            </Card>
           </div>
         </TabsContent>
 
         <TabsContent value="postgres" className="mt-0">
-          <Card>
+          <PanelCard
-            <CardHeader>
+            title="PostgreSQL"
-              <CardTitle className="text-base">PostgreSQL</CardTitle>
+            description={
-              <CardDescription>Статус соединения и пул</CardDescription>
+              <>
-            </CardHeader>
+                Статус соединения и пул. PostgreSQL отображается в readiness-проверке на вкладке «Система»
-            <CardContent>
+                (check <code className="text-xs">postgres</code>).
-              <Alert>
+              </>
-                <Database className="size-4" />
+            }
-                <AlertTitle>Статус готовности</AlertTitle>
+            contentClassName="py-4"
-                <AlertDescription>
+          />
-                  PostgreSQL-соединение отображается в readiness-проверке на вкладке «Система» (check{' '}
-                  <code className="text-xs">postgres</code>).
-                </AlertDescription>
-              </Alert>
-            </CardContent>
-          </Card>
         </TabsContent>
 
         <TabsContent value="runtime-logs" className="mt-0">
-          <Card>
+          <PanelCard
-            <CardHeader>
+            title="Файловые логи"
-              <CardTitle className="text-base">Файловые логи</CardTitle>
+            description={
-              <CardDescription>Логи API и pipeline</CardDescription>
+              <>
-            </CardHeader>
+                Логи API и pipeline настраиваются переменной <code className="text-xs">EVOBGP_LOG_*</code> и
-            <CardContent>
+                управляются в tenant-settings.
-              <Alert>
+              </>
-                <Info className="size-4" />
+            }
-                <AlertTitle>Логи на сервере</AlertTitle>
+            contentClassName="py-4"
-                <AlertDescription>
+          />
-                  Файловые логи настраиваются переменной <code className="text-xs">EVOBGP_LOG_*</code> и
-                  управляются tenant-settings на странице «Настройки BIRD».
-                </AlertDescription>
-              </Alert>
-            </CardContent>
-          </Card>
         </TabsContent>
       </BadgeTabs>
     </div>
@@ -319,18 +289,6 @@ function formatVersion(version?: VersionInfo | null): string {
   return version.version ?? version.app ?? '—'
 }
 
-interface OverallInput {
-  health?: { ok?: boolean } | null
-  ready?: ReadyStatus | null
-  jobsFailed: number
-}
-
-function overallHint(input: OverallInput): string {
-  if (!input.health?.ok) return 'API недоступен или возвращает ошибку'
-  if (input.jobsFailed > 0) return `Есть провальные задачи (${input.jobsFailed})`
-  return 'Все системы работают в штатном режиме'
-}
-
 function BirdSummary({ bird }: { bird: import('@/types/api').BirdStatus }) {
   if (!bird.birdc_configured) {
     return (
@@ -346,7 +304,7 @@ function BirdSummary({ bird }: { bird: import('@/types/api').BirdStatus }) {
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between text-sm">
-        <span className="text-muted-foreground">Established / total</span>
+        <span className="text-muted-foreground">Установлено / всего</span>
         <span className="font-medium tabular-nums">
           {bird.bgp_established} / {bird.bgp_sessions_total}
           {ratio !== null ? <span className="text-muted-foreground"> ({ratio}%)</span> : null}

apps/web/src/routes/_auth/network.tsx

@@ -1,9 +1,8 @@
 import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { PanelCard } from '@/components/panel-card'
-import { Info, RefreshCw } from 'lucide-react'
+import { RefreshCw } from 'lucide-react'
 
 import {
   DashboardNetworkCapacityCard,
@@ -60,14 +59,6 @@ function NetworkComponent() {
         }
       />
 
-      <Alert className="border-info/30 bg-info/5">
-        <Info className="text-info" />
-        <AlertTitle>О сетевой конфигурации</AlertTitle>
-        <AlertDescription>
-          Вкладка «Обзор» — live-статус agent и BGP на CP и репликах. Apply и ревизии — на странице «Операции».
-        </AlertDescription>
-      </Alert>
-
       <BadgeTabs
         value={search.tab}
         onValueChange={(tab) =>
@@ -81,7 +72,7 @@ function NetworkComponent() {
           { value: 'overview', label: 'Обзор' },
           { value: 'peers', label: 'Пиры', count: peers.length },
           { value: 'speakers', label: 'Спикеры', count: speakers.length, badgeVariant: 'info-light' },
-          { value: 'control-plane', label: 'Control plane' },
+          { value: 'control-plane', label: 'Плоскость управления' },
         ]}
       >
         <TabsContent value="overview" className="mt-0">
@@ -98,12 +89,12 @@ function NetworkComponent() {
               loading={overviewLoading}
             />
           </div>
-          <Card className="mt-4">
+          <PanelCard
-            <CardHeader className="border-b py-3">
+            className="mt-4"
-              <CardTitle className="text-base">BIRD (control plane)</CardTitle>
+            title="BIRD (control plane)"
-              <CardDescription>Статус birdc на хосте API</CardDescription>
+            description="Статус birdc на хосте API"
-            </CardHeader>
+            contentClassName="py-4"
-            <CardContent className="p-4">
+          >
               <QueryState
                 data={birdQ.data}
                 isLoading={birdQ.isLoading}
@@ -114,8 +105,7 @@ function NetworkComponent() {
               >
                 {(bird) => <BirdSummary bird={bird} />}
               </QueryState>
-            </CardContent>
+          </PanelCard>
-          </Card>
         </TabsContent>
 
         <TabsContent value="peers" className="mt-0">
@@ -140,15 +130,13 @@ function NetworkComponent() {
         </TabsContent>
 
         <TabsContent value="control-plane" className="mt-0">
-          <Card>
+          <PanelCard
-            <CardHeader className="border-b py-3">
+            title="Настройки Control Plane (BIRD)"
-              <CardTitle className="text-base">Настройки Control Plane (BIRD)</CardTitle>
+            description="Конфигурация tenant-level — в разделе «Настройки BIRD»"
-              <CardDescription>Конфигурация tenant-level — в разделе «Настройки BIRD»</CardDescription>
+            contentClassName="py-4 text-sm text-muted-foreground"
-            </CardHeader>
+          >
-            <CardContent className="p-4 text-sm text-muted-foreground">
+            См. раздел «Настройки BIRD».
-              См. раздел «Настройки BIRD».
+          </PanelCard>
-            </CardContent>
-          </Card>
         </TabsContent>
       </BadgeTabs>
     </div>

apps/web/src/routes/_auth/operations.tsx

@@ -1,12 +1,11 @@
 import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Info, RefreshCw } from 'lucide-react'
+import { RefreshCw } from 'lucide-react'
 import { toast } from 'sonner'
 import { useState, useMemo } from 'react'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { PanelCard } from '@/components/panel-card'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { OperationsAnalyticsCard } from '@/components/analytics'
@@ -94,35 +93,26 @@ function OperationsComponent() {
         }
       />
 
-      <Alert className="border-info/30 bg-info/5">
-        <Info className="text-info" />
-        <AlertTitle>Три раздела на одной странице</AlertTitle>
-        <AlertDescription>
-          <strong>Ревизии</strong> — история конфигов и откат; <strong>Сравнение</strong> — diff
-          префиксов; <strong>Задачи</strong> — ingest, apply, rollback.
-        </AlertDescription>
-      </Alert>
-
       <div className="flex flex-wrap gap-2">
         <ConfirmDialog
           trigger={
             <Button variant="default" size="sm" disabled={applyMutation.isPending}>
-              Apply
+              Применить
             </Button>
           }
           title="Применить конфигурацию на всех спикерах?"
-          description="Текущая конфигурация будет применена на всех BIRD-агентах. Требуется роль operator."
+          description="Текущая конфигурация будет применена на всех BIRD-агентах. Требуется роль оператора."
           confirmLabel="Применить"
           onConfirm={() => applyMutation.mutate()}
         />
         <ConfirmDialog
           trigger={
             <Button variant="outline" size="sm" disabled={birdReloadMutation.isPending}>
-              BIRD reload
+              Перезагрузка BIRD
             </Button>
           }
           title="Перезагрузить BIRD?"
-          description="BIRD перезагрузит конфигурацию. Требуется роль operator."
+          description="BIRD перезагрузит конфигурацию. Требуется роль оператора."
           confirmLabel="Перезагрузить"
           onConfirm={() => birdReloadMutation.mutate()}
         />
@@ -212,11 +202,7 @@ function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[]
   )
 
   return (
-    <Card>
+    <PanelCard title="Сравнение ревизий" contentClassName="flex flex-col gap-4 py-4">
-      <CardHeader className="border-b py-3">
-        <CardTitle className="text-base">Сравнение ревизий</CardTitle>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4 p-4">
         <div className="flex flex-wrap items-end gap-3">
           <div className="flex w-full max-w-xs flex-col gap-1">
             <span className="text-xs text-muted-foreground">Ревизия A</span>
@@ -252,8 +238,7 @@ function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[]
         >
           {(diff) => <DiffView diff={diff} />}
         </QueryState>
-      </CardContent>
+    </PanelCard>
-    </Card>
   )
 }
 

apps/web/src/routes/_auth/schedule.tsx

@@ -1,10 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { AlertTriangle, Clock, Info, ListTodo, RefreshCw } from 'lucide-react'
+import { AlertTriangle, Clock, ListTodo, RefreshCw } from 'lucide-react'
 import { toast } from 'sonner'
 import { useState } from 'react'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
@@ -40,7 +39,7 @@ function ScheduleComponent() {
 
   const items: SectionCardItem[] = [
     { label: 'Всего задач', value: jobs.length, icon: <ListTodo className="size-4" />, hint: 'в выборке' },
-    { label: 'В работе', value: running, icon: <Clock className="size-4" />, hint: 'queued и running' },
+    { label: 'В работе', value: running, icon: <Clock className="size-4" />, hint: 'в очереди и выполняются' },
     {
       label: 'С ошибкой',
       value: failed,
@@ -87,21 +86,11 @@ function ScheduleComponent() {
         }
       />
 
-      <Alert className="border-info/30 bg-info/5">
-        <Info className="text-info" />
-        <AlertTitle>Как работает расписание</AlertTitle>
-        <AlertDescription>
-          Планировщик использует <code className="text-xs">refresh_interval_sec</code> и опционально{' '}
-          <code className="text-xs">cron_expr</code>. Ручной запуск —{' '}
-          <code className="text-xs">POST /v1/modules/&#123;id&#125;/refresh</code>.
-        </AlertDescription>
-      </Alert>
-
       {loading ? <SectionCardsSkeleton count={3} /> : <SectionCards items={items} />}
 
       <DataGridCard
         title="Модули"
-        description="Расписание обновления и ручной запуск ingest"
+        description="Расписание обновления и ручной запуск обновления"
       >
         <QueryState
           data={modules}

apps/web/src/routes/_auth/settings.tsx

@@ -1,9 +1,8 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { PanelCard } from '@/components/panel-card'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
@@ -13,7 +12,7 @@ import { SelectField } from '@/components/select-field'
 import { DEV_API_TOKEN, normalizeApiToken, setToken, TOKEN_STORAGE_KEY } from '@/lib/api-client'
 import { authKeys, authSessionQueryOptions } from '@/queries/auth'
 import { toast } from 'sonner'
-import { Info, Save } from 'lucide-react'
+import { Save } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 
@@ -70,25 +69,11 @@ function SettingsComponent() {
         description="Параметры интерфейса и подключения браузера к API."
       />
 
-      <Alert className="border-info/30 bg-info/5">
+      <PanelCard
-        <Info className="text-info" />
+        title="Подключение к API"
-        <AlertTitle>Локальная разработка</AlertTitle>
+        description="Токен хранится только в этом браузере (localStorage). Управление ключами tenant — в разделе «Права доступа»."
-        <AlertDescription>
+        contentClassName="flex flex-col gap-4 py-4"
-          При включённом demo-seed API принимает токен <code className="text-xs">dev</code> (роль{' '}
+      >
-          <code className="text-xs">operator</code>). Вводите только значение токена, без префикса{' '}
-          <code className="text-xs">Bearer</code> — он добавляется автоматически.
-        </AlertDescription>
-      </Alert>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Подключение к API</CardTitle>
-          <CardDescription>
-            Токен хранится только в этом браузере (localStorage). Управление ключами tenant — в
-            разделе «Права доступа».
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-4">
           <div className="flex flex-col gap-2">
             <Label htmlFor="token">Токен для запросов</Label>
             <Input
@@ -124,17 +109,13 @@ function SettingsComponent() {
               <code className="text-xs">EVOBGP_SEED_DEMO</code> ≠ 0) и запущенный API.
             </p>
           ) : null}
-        </CardContent>
+      </PanelCard>
-      </Card>
 
-      <Card>
+      <PanelCard
-        <CardHeader>
+        title="Оформление"
-          <CardTitle>Оформление</CardTitle>
+        description="Тема интерфейса. Быстрый переключатель также доступен в боковой панели."
-          <CardDescription>
+        contentClassName="flex flex-col gap-2 py-4"
-            Тема интерфейса. Быстрый переключатель также доступен в боковой панели.
+      >
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-2">
           <SelectField
             id="theme-select"
             label="Тема"
@@ -144,8 +125,7 @@ function SettingsComponent() {
             triggerClassName="max-w-xs"
             onValueChange={(v) => v && setTheme(v)}
           />
-        </CardContent>
+      </PanelCard>
-      </Card>
     </div>
   )
 }

apps/web/src/routes/_auth/tenant-settings.tsx

@@ -1,14 +1,14 @@
 import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Info, Save } from 'lucide-react'
+import { Save } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
-import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { PanelCard } from '@/components/panel-card'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+import { DataGridCard } from '@/components/data-grid-shell'
 import { SelectField } from '@/components/select-field'
 import { SettingsKvGrid } from '@/components/settings/settings-kv-grid'
 import { PageHeader } from '@/components/page-header'
@@ -42,8 +42,8 @@ const RUNTIME_LOGS_ENABLED_ITEMS = [
 ] as const
 
 const RUNTIME_LOGS_MODE_ITEMS = [
-  { value: 'truncate', label: 'truncate — обнулить' },
+  { value: 'truncate', label: 'обнулить (truncate)' },
-  { value: 'delete', label: 'delete — удалить файл' },
+  { value: 'delete', label: 'удалить файл (delete)' },
 ] as const
 
 const BIRD_LABELS: Record<BirdSettingKey, string> = {
@@ -99,19 +99,10 @@ function TenantSettingsComponent() {
   return (
     <div className="flex flex-col gap-6">
       <PageHeader
-        title="Параметры tenant"
+        title="Параметры арендатора"
-        description="Параметры control plane для текущего tenant (API /v1/settings)"
+        description="Параметры плоскости управления для текущего арендатора (API /v1/settings)"
       />
 
-      <Alert className="border-info/30 bg-info/5">
-        <Info className="text-info" />
-        <AlertTitle>Operator-only</AlertTitle>
-        <AlertDescription>
-          Изменение значений через <code className="text-xs">PATCH /v1/settings</code> требует роли
-          operator. При отсутствии прав API вернёт 403.
-        </AlertDescription>
-      </Alert>
-
       <BadgeTabs
         value={search.tab}
         onValueChange={(tab) =>
@@ -127,23 +118,16 @@ function TenantSettingsComponent() {
         ]}
       >
         <TabsContent value="bird" className="mt-0">
-          <Card>
+          <PanelCard
-            <CardHeader>
+            title="BIRD control plane"
-              <CardTitle>BIRD control plane</CardTitle>
+            description={
-              <CardDescription>
+              <>
                 Глобальные параметры BIRD для pipeline refresh/apply. Сохранение через{' '}
                 <code className="text-xs">PATCH /v1/settings</code> (роль operator).
-              </CardDescription>
+              </>
-            </CardHeader>
+            }
-            <CardContent className="space-y-4">
+            contentClassName="space-y-4 py-4"
-              <Alert className="border-info/30 bg-info/5">
+          >
-                <Info className="text-info" />
-                <AlertTitle>Подстановка в конфиг</AlertTitle>
-                <AlertDescription>
-                  Значения используются при генерации BIRD-конфигурации (router id, local AS, адреса).
-                  Пиры и спикеры настраиваются в разделе «Сеть».
-                </AlertDescription>
-              </Alert>
               <QueryState
                 data={partitioned}
                 isLoading={settingsQ.isLoading}
@@ -175,17 +159,15 @@ function TenantSettingsComponent() {
                   </div>
                 )}
               </QueryState>
-            </CardContent>
+          </PanelCard>
-          </Card>
         </TabsContent>
 
         <TabsContent value="revision" className="mt-0">
-          <Card>
+          <PanelCard
-            <CardHeader>
+            title="Ревизии"
-              <CardTitle>Ревизии</CardTitle>
+            description="Время хранения ревизий в БД"
-              <CardDescription>Время хранения ревизий в БД</CardDescription>
+            contentClassName="space-y-4 py-4"
-            </CardHeader>
+          >
-            <CardContent className="space-y-4">
               <QueryState
                 data={partitioned}
                 isLoading={settingsQ.isLoading}
@@ -222,17 +204,15 @@ function TenantSettingsComponent() {
                   </div>
                 )}
               </QueryState>
-            </CardContent>
+          </PanelCard>
-          </Card>
         </TabsContent>
 
         <TabsContent value="runtime-logs" className="mt-0">
-          <Card>
+          <PanelCard
-            <CardHeader>
+            title="Файловые логи"
-              <CardTitle>Файловые логи</CardTitle>
+            description="Автоматическая очистка логов"
-              <CardDescription>Автоматическая очистка логов</CardDescription>
+            contentClassName="space-y-4 py-4"
-            </CardHeader>
+          >
-            <CardContent className="space-y-4">
               <QueryState
                 data={partitioned}
                 isLoading={settingsQ.isLoading}
@@ -313,38 +293,32 @@ function TenantSettingsComponent() {
                   </div>
                 )}
               </QueryState>
-            </CardContent>
+          </PanelCard>
-          </Card>
         </TabsContent>
 
         <TabsContent value="additional" className="mt-0">
-          <Card>
+          <DataGridCard
-            <CardHeader>
+            title="Дополнительные параметры"
-              <CardTitle>Дополнительные параметры</CardTitle>
+            description="Параметры вне стандартных групп (только чтение — изменяются через API)"
-              <CardDescription>
+          >
-                Параметры вне стандартных групп (readonly — изменяются только через API)
+            <QueryState
-              </CardDescription>
+              data={partitioned?.additional ?? []}
-            </CardHeader>
+              isLoading={settingsQ.isLoading}
-            <CardContent className="p-0">
+              isError={settingsQ.isError}
-              <QueryState
+              error={settingsQ.error}
-                data={partitioned?.additional ?? []}
+              empty={(partitioned?.additional ?? []).length === 0}
-                isLoading={settingsQ.isLoading}
+              emptyTitle="Нет дополнительных параметров"
-                isError={settingsQ.isError}
+              skeleton={<div className="h-32" />}
-                error={settingsQ.error}
+              onRetry={() => settingsQ.refetch()}
-                empty={(partitioned?.additional ?? []).length === 0}
+            >
-                emptyTitle="Нет дополнительных параметров"
+              {(items) => (
-                skeleton={<div className="h-32" />}
+                <SettingsKvGrid
-                onRetry={() => settingsQ.refetch()}
+                  items={items}
-              >
+                  isLoading={settingsQ.isFetching && !settingsQ.isLoading}
-                {(items) => (
+                />
-                  <SettingsKvGrid
+              )}
-                    items={items}
+            </QueryState>
-                    isLoading={settingsQ.isFetching && !settingsQ.isLoading}
+          </DataGridCard>
-                  />
-                )}
-              </QueryState>
-            </CardContent>
-          </Card>
         </TabsContent>
       </BadgeTabs>
     </div>

packages/ui/src/components/drawer.tsx

@@ -0,0 +1,226 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+type DrawerContextProps = {
+  hasSnapPoints: boolean
+  modal: DrawerPrimitive.Root.Props["modal"]
+  showSwipeHandle: boolean
+  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>
+}
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null)
+
+function useDrawer() {
+  const context = React.useContext(DrawerContext)
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.")
+  }
+
+  return context
+}
+
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props & {
+  showSwipeHandle?: boolean
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
+  const contextValue = React.useMemo(
+    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
+    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
+  )
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        modal={modal}
+        snapPoints={snapPoints}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  )
+}
+
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerSwipeHandle({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-swipe-handle"
+      aria-hidden="true"
+      className={cn(
+        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: DrawerPrimitive.Popup.Props) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
+  const swipeAxis =
+    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      {modal === true && (
+        <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
+      )}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        data-modal={modal}
+        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis={swipeAxis}
+          data-snap-points={hasSnapPoints ? "" : undefined}
+          className={cn(
+            // Base.
+            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+            // Nested.
+            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+            // Bleed.
+            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+            // Sizing.
+            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+            // Stack.
+            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+            // Transitions.
+            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+            // Axis: y.
+            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+            // Axis: x.
+            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+            // Direction: down.
+            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+            className
+          )}
+          {...props}
+        >
+          {showSwipeHandle && <DrawerSwipeHandle />}
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+            )}
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-balance text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerSwipeHandle,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

packages/ui/src/components/progress.tsx

@@ -1,33 +1,13 @@
+import * as React from "react"
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
 
 import { cn } from "@evobgp/ui/lib/utils"
 
-function Progress({
-  className,
-  children,
-  value,
-  ...props
-}: ProgressPrimitive.Root.Props) {
-  return (
-    <ProgressPrimitive.Root
-      value={value}
-      data-slot="progress"
-      className={cn("flex flex-wrap gap-3", className)}
-      {...props}
-    >
-      {children}
-      <ProgressTrack>
-        <ProgressIndicator />
-      </ProgressTrack>
-    </ProgressPrimitive.Root>
-  )
-}
-
 function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
   return (
     <ProgressPrimitive.Track
       className={cn(
-        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        "relative flex h-1 w-full items-center overflow-hidden rounded-full bg-muted",
         className
       )}
       data-slot="progress-track"
@@ -43,12 +23,39 @@ function ProgressIndicator({
   return (
     <ProgressPrimitive.Indicator
       data-slot="progress-indicator"
-      className={cn("h-full bg-primary transition-all", className)}
+      className={cn("h-full rounded-full bg-primary transition-all", className)}
       {...props}
     />
   )
 }
 
+function Progress({
+  className,
+  children,
+  value,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  const hasCustomTrack = React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === ProgressTrack,
+  )
+
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-3", className)}
+      {...props}
+    >
+      {children}
+      {!hasCustomTrack ? (
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      ) : null}
+    </ProgressPrimitive.Root>
+  )
+}
+
 function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
   return (
     <ProgressPrimitive.Label

packages/ui/src/components/tabs.tsx

@@ -13,7 +13,8 @@ function Tabs({
       data-slot="tabs"
       data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
+        "group/tabs flex gap-2",
+        orientation === "horizontal" ? "flex-col" : "flex-row",
         className
       )}
       {...props}
@@ -22,7 +23,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:h-auto data-[variant=line]:rounded-none data-[variant=line]:border-b data-[variant=line]:border-border data-[variant=line]:bg-transparent data-[variant=line]:p-0",
   {
     variants: {
       variant: {
@@ -56,10 +57,11 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:h-auto group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:px-0 group-data-[variant=line]/tabs-list:pb-3 group-data-[variant=line]/tabs-list:pt-1 group-data-[variant=line]/tabs-list:shadow-none",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:group-data-[variant=line]/tabs-list:after:bottom-0 group-data-[orientation=horizontal]/tabs:group-data-[variant=line]/tabs-list:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100 group-data-[variant=line]/tabs-list:data-active:after:z-10",
         className
       )}
       {...props}