feat(lookup): resolve domain to IPs for membership check

Для FQDN после проверки DOMAINS выполняется live DNS (A/AAAA), каждый IP проверяется по IP_RANGES и snapshots; в ответе resolved_ips / resolved_ip, UI KPI и OpenAPI обновлены.

Co-authored-by: Cursor <cursoragent@cursor.com>

.codegraph/daemon.pid

@@ -1,6 +1,6 @@
 {
-  "pid": 43636,
+  "pid": 51184,
   "version": "0.9.9",
   "socketPath": "\\\\.\\pipe\\codegraph-97b92efdcc5351da",
-  "startedAt": 1783570299043
+  "startedAt": 1784215907952
 }

.cursor/rules/web-shadcn.mdc

@@ -22,9 +22,12 @@ alwaysApply: false
 |------|------|------------|
 | shadcn-примитивы | `packages/ui/src/components/` | output `shadcn add` (не трогать под кейс) |
 | ReUI enterprise | `apps/web/src/components/reui/` | output `shadcn add @reui/*` |
-| Shared обёртки | `apps/web/src/components/` | PageHeader, QueryState, ConfirmDialog, StatusBadge, SectionCards, LoadingButton |
+| Shared обёртки | `apps/web/src/components/` | PageHeader, QueryState, ConfirmDialog, StatusBadge, LoadingButton |
+| ReUI kit | `apps/web/src/components/reui-kit/` | ResourcePage, KpiStatGrid, OpsDashboard, SettingsShell |
 | Роуты | `apps/web/src/routes/` | TanStack Router (file-based) |
 
+**Design contract:** [`docs/ui-design-contract.md`](../../docs/ui-design-contract.md). Surface: **frame**. KPI: [stats-12](https://reui.io/preview/base/stats-12). Lists: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2).
+
 Тема: `packages/ui/src/styles/globals.css`. CLI из `apps/web`: `pnpm dlx shadcn@latest add <component>`.
 
 ## Правила
@@ -45,8 +48,8 @@ alwaysApply: false
 **WEB-05** | MUST | Формы — `react-hook-form` + Zod; через `FormField`/`Form` обёртки.
 *Проверка:* https://ui.shadcn.com/docs/components/form
 
-**WEB-06** | MUST | Сложные data-списки — ReUI `DataGridCard` (ReUI data-grid, не shadcn Data Table). Простые списки — shadcn `Table`.
-*Проверка:* `@/components/reui/data-grid` или `@evobgp/ui/components/table`.
+**WEB-06** | MUST | Сложные data-списки — Frame + ReUI DataGrid через `reui-kit/ResourcePage` или `DataGridSection` (не Card shell, не shadcn Data Table). Surface lock: `UI_SURFACE = 'frame'` (`lib/ui-surface.ts`). Простые списки — shadcn `Table`.
+*Проверка:* `@/components/reui-kit`, `@/components/reui/data-grid`, `docs/ui-design-contract.md`.
 
 **WEB-07** | MUST | Toast — `sonner` (`Toaster` в `main.tsx`); `toast.success/error/message` из `sonner`.
 *Проверка:* https://ui.shadcn.com/docs/components/sonner

.gitignore

@@ -21,6 +21,7 @@ Thumbs.db
 
 # Env / secrets (local only)
 .env
+.env.local
 .env.*
 !.env.example
 !.env.*.example

AGENTS.md

@@ -71,4 +71,6 @@ pnpm --filter @evobgp/web run build
 
 Стек: React 19, TanStack Router/Query, shadcn/ui (base-nova, registry `@shadcn` + `@reui`), Tailwind v4, lucide-react. Legacy Svelte — в `web-legacy-svelte/` (архив, только референс при миграции).
 
-UI-задачи начинаются с MCP `plugin-shadcn-shadcn` (search → examples → add command), затем CLI `pnpm dlx shadcn@latest add ...` из `apps/web`. См. также [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc) для Context7 ID стека.
+**UI design contract:** [`docs/ui-design-contract.md`](docs/ui-design-contract.md) — surface `frame`, kit `apps/web/src/components/reui-kit/`.
+
+UI-задачи начинаются с MCP `user-reui` (`surface: "frame"`) + `plugin-shadcn-shadcn`, затем CLI `pnpm dlx shadcn@latest add ...` из `apps/web`. См. также [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc) для Context7 ID стека.

apps/web/src/components/app-switcher.tsx

@@ -0,0 +1,97 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@evobgp/ui/components/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@evobgp/ui/components/sidebar'
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
+
+import {
+  APP_SWITCHER_ICONS,
+  CURRENT_APP_ID,
+  getCurrentApp,
+} from '@/lib/app-switcher-config'
+import { useAppSwitcherConfig } from '@/hooks/use-app-switcher'
+
+/** Sidebar app switcher — shared chrome etalon EvoBGP. @see https://reui.io/preview/base/app-shell-12 */
+export function AppSwitcher() {
+  const { isMobile } = useSidebar()
+  const { config, isLoading } = useAppSwitcherConfig()
+  const current = getCurrentApp(config)
+  const CurrentIcon = APP_SWITCHER_ICONS[current.icon]
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton size="lg" className="aria-expanded:bg-muted" />
+            }
+          >
+            <div
+              className="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-primary-foreground"
+              aria-hidden
+            >
+              <CurrentIcon className="size-4" />
+            </div>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">{current.name}</span>
+              {current.subtitle ? (
+                <span className="truncate text-xs text-muted-foreground">
+                  {current.subtitle}
+                </span>
+              ) : null}
+            </div>
+            <ChevronsUpDownIcon className="ml-auto size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="min-w-56 rounded-lg"
+            side={isMobile ? 'bottom' : 'right'}
+            align="start"
+            sideOffset={4}
+          >
+            <div className="px-2 py-1.5 text-xs text-muted-foreground">
+              {isLoading ? 'Загрузка…' : config.menuLabel}
+            </div>
+            {config.apps.map((app) => {
+              const Icon = APP_SWITCHER_ICONS[app.icon]
+              const isCurrent = app.id === CURRENT_APP_ID
+
+              if (isCurrent) {
+                return (
+                  <DropdownMenuItem key={app.id} disabled>
+                    <Icon />
+                    {app.name}
+                    <CheckIcon className="ml-auto size-4" />
+                  </DropdownMenuItem>
+                )
+              }
+
+              return (
+                <DropdownMenuItem
+                  key={app.id}
+                  nativeButton={false}
+                  render={<a href={app.url} />}
+                >
+                  <Icon />
+                  {app.name}
+                  {app.shortcut ? (
+                    <DropdownMenuShortcut>{app.shortcut}</DropdownMenuShortcut>
+                  ) : null}
+                </DropdownMenuItem>
+              )
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

apps/web/src/components/blocks/settings-7/components/settings-card.tsx

@@ -1,16 +1,14 @@
-"use client"
+import { type ReactNode } from 'react'
 
-import { type ReactNode } from "react"
-
-import { cn } from "@evobgp/ui/lib/utils"
+import { cn } from '@evobgp/ui/lib/utils'
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@evobgp/ui/components/card"
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
 
 interface SettingsCardProps {
   title: string
@@ -22,6 +20,7 @@ interface SettingsCardProps {
   footerClassName?: string
 }
 
+/** Settings section — Frame surface. Preview: https://reui.io/preview/base/settings-16 */
 export function SettingsCard({
   title,
   description,
@@ -32,28 +31,23 @@ export function SettingsCard({
   footerClassName,
 }: SettingsCardProps) {
   return (
-    <Card className={cn("gap-0 p-0", className)}>
-      {/* Header */}
-      <CardHeader className="gap-0 border-b px-5 py-3">
-        <CardTitle>{title}</CardTitle>
-        {description ? <CardDescription>{description}</CardDescription> : null}
-      </CardHeader>
+    <Frame dense spacing="sm" className={cn('w-full gap-0 p-0', className)}>
+      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
+        <FrameHeader className="gap-0 border-b px-5 py-3">
+          <FrameTitle>{title}</FrameTitle>
+          {description ? <FrameDescription>{description}</FrameDescription> : null}
+        </FrameHeader>
 
-      {/* Content */}
-      <CardContent className={cn("p-0", contentClassName)}>
-        {children}
-      </CardContent>
+        <div className={cn('min-w-0', contentClassName)}>{children}</div>
 
-      {footer ? (
-        <CardFooter
-          className={cn(
-            "justify-end gap-2 border-t px-5 py-3",
-            footerClassName
-          )}
-        >
-          {footer}
-        </CardFooter>
-      ) : null}
-    </Card>
+        {footer ? (
+          <FrameFooter
+            className={cn('justify-end gap-2 border-t px-5 py-3', footerClassName)}
+          >
+            {footer}
+          </FrameFooter>
+        ) : null}
+      </FramePanel>
+    </Frame>
   )
-}
+}

apps/web/src/components/counted-line-tabs.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import { cn } from '@evobgp/ui/lib/utils'
+
+export interface CountedLineTab {
+  id: string
+  label: string
+  count?: number
+}
+
+interface CountedLineTabsProps {
+  tabs: CountedLineTab[]
+  value: string
+  onValueChange: (value: string) => void
+  className?: string
+  listClassName?: string
+  children?: ReactNode
+}
+
+/** Line tabs with count pills (c-tabs-2 / data-grid-filtering-2). */
+export function CountedLineTabs({
+  tabs,
+  value,
+  onValueChange,
+  className,
+  listClassName,
+  children,
+}: CountedLineTabsProps) {
+  return (
+    <Tabs value={value} onValueChange={onValueChange} className={className}>
+      <TabsList variant="line" className={cn('gap-5', listClassName)}>
+        {tabs.map((tab) => (
+          <TabsTrigger
+            key={tab.id}
+            value={tab.id}
+            className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
+          >
+            <span>{tab.label}</span>
+            {tab.count !== undefined ? (
+              <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">
+                {tab.count}
+              </span>
+            ) : null}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {children}
+    </Tabs>
+  )
+}

apps/web/src/components/dashboard/dashboard-kpi-grid.tsx

@@ -122,6 +122,7 @@ function buildKpis({
       iconClassName: 'text-destructive',
       value: loading ? '—' : String(riskCount),
       label: 'Риски',
+      variant: riskCount > 0 ? 'destructive' : 'default',
       footer: (
         <Badge variant={riskCount > 0 ? 'destructive-light' : 'success-light'} size="sm">
           {loading

apps/web/src/components/dashboard/dashboard-quick-link-card.tsx

@@ -1,69 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import { ChevronRight } from 'lucide-react'
-import type { ReactNode } from 'react'
-
-import { CardDotField } from '@/components/dashboard/card-dot-field'
-import { Card, CardContent } from '@evobgp/ui/components/card'
-import { cn } from '@evobgp/ui/lib/utils'
-import { Item, ItemMedia } from '@evobgp/ui/components/item'
-
-export type QuickLinkCardProps = {
-  icon: ReactNode
-  label: string
-  description: string
-  to: string
-  search?: Record<string, string>
-  iconClass: string
-}
-
-export function DashboardQuickLinkCard({
-  icon,
-  label,
-  description,
-  to,
-  search,
-  iconClass,
-}: QuickLinkCardProps) {
-  return (
-    <Link
-      to={to}
-      search={search}
-      className="group block h-full rounded-[inherit] focus-visible:outline-none"
-      aria-label={`${label}: ${description}`}
-    >
-      <Card
-        size="sm"
-        className={cn(
-          'relative isolate h-full overflow-hidden transition-colors',
-          'hover:border-foreground/20',
-          'group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background',
-        )}
-      >
-        <CardDotField className="text-muted-foreground [mask-image:linear-gradient(to_bottom_left,black,transparent_60%)]" />
-        <CardContent className="relative z-10 flex h-full flex-col gap-7.5 p-5">
-          <Item
-            className={cn(
-              'border-background flex size-11 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5',
-              iconClass,
-            )}
-          >
-            <ItemMedia variant="icon" className="size-auto">
-              {icon}
-            </ItemMedia>
-          </Item>
-          <div className="mt-auto flex flex-col gap-3">
-            <span className="text-foreground block text-sm leading-tight font-medium">{label}</span>
-            <p className="text-muted-foreground text-xs leading-relaxed">{description}</p>
-            <span className="text-primary inline-flex items-center gap-1 text-xs font-medium underline-offset-2 group-hover:underline">
-              Перейти
-              <ChevronRight
-                aria-hidden
-                className="size-2.5 shrink-0 transition-transform group-hover:translate-x-0.5"
-              />
-            </span>
-          </div>
-        </CardContent>
-      </Card>
-    </Link>
-  )
-}

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

@@ -1,78 +1,76 @@
-import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
-import type { ReactNode } from 'react'
+import { Gauge, Network, Play, Plus, Search, Share2, Tags } from 'lucide-react'
 
-import { DashboardQuickLinkCard } from '@/components/dashboard/dashboard-quick-link-card'
-import { PanelCard } from '@/components/panel-card'
+import { QuickActionGrid, type QuickActionItem } from '@/components/reui-kit'
 
-type QuickLink = {
-  icon: ReactNode
-  label: string
-  description: string
-  to: string
-  search?: Record<string, string>
-  iconClass: string
-}
-
-const LINKS: QuickLink[] = [
+/** iconClassName: semantic text only (shared chrome with CFDM). @see https://reui.io/preview/base/stats-12 */
+const ACTIONS: QuickActionItem[] = [
   {
-    icon: <Plus aria-hidden />,
-    label: 'Создать модуль',
+    id: 'lookup',
+    title: 'Проверка IP/домена',
+    description: 'Membership в списках и community (entry + snapshot).',
+    to: '/lookup',
+    icon: <Search aria-hidden />,
+    iconClassName: 'text-primary',
+  },
+  {
+    id: 'new-module',
+    title: 'Создать модуль',
     description: 'Новый модуль маршрутизации и источники префиксов.',
     to: '/modules/new',
-    iconClass: 'bg-primary text-primary-foreground [&_svg]:text-primary-foreground',
+    icon: <Plus aria-hidden />,
+    iconClassName: 'text-primary',
   },
   {
-    icon: <Tags aria-hidden />,
-    label: 'BGP-сообщества',
+    id: 'communities',
+    title: 'BGP-сообщества',
     description: 'Справочник communities для политик экспорта.',
     to: '/directories',
-    iconClass: 'bg-info text-info-foreground [&_svg]:text-info-foreground',
+    icon: <Tags aria-hidden />,
+    iconClassName: 'text-info',
   },
   {
-    icon: <Network aria-hidden />,
-    label: 'Сеть',
+    id: 'network',
+    title: 'Сеть',
     description: 'Обзор пиров, спикеров и live-сессий BGP.',
     to: '/network',
     search: { tab: 'overview' },
-    iconClass: 'bg-success text-success-foreground [&_svg]:text-success-foreground',
+    icon: <Network aria-hidden />,
+    iconClassName: 'text-success',
   },
   {
-    icon: <Share2 aria-hidden />,
-    label: 'Добавить пира',
+    id: 'add-peer',
+    title: 'Добавить пира',
     description: 'Настройка BGP-соседа и шаблонов сессии.',
     to: '/network',
     search: { tab: 'peers' },
-    iconClass: 'bg-warning text-warning-foreground [&_svg]:text-warning-foreground',
+    icon: <Share2 aria-hidden />,
+    iconClassName: 'text-warning',
   },
   {
-    icon: <Play aria-hidden />,
-    label: 'Деплой',
+    id: 'deploy',
+    title: 'Деплой',
     description: 'Ревизии конфигурации и применение на нодах.',
     to: '/operations',
     search: { tab: 'revisions' },
-    iconClass: 'bg-focus text-focus-foreground [&_svg]:text-focus-foreground',
+    icon: <Play aria-hidden />,
+    iconClassName: 'text-muted-foreground',
   },
   {
-    icon: <Gauge aria-hidden />,
-    label: 'Мониторинг',
+    id: 'monitoring',
+    title: 'Мониторинг',
     description: 'Состояние системы, BIRD и PostgreSQL.',
     to: '/monitoring',
     search: { tab: 'system' },
-    iconClass: 'bg-destructive text-destructive-foreground [&_svg]:text-destructive-foreground',
+    icon: <Gauge aria-hidden />,
+    iconClassName: 'text-destructive',
   },
 ]
 
 export function DashboardQuickLinks() {
   return (
-    <PanelCard
-      title="Быстрые действия"
+    <QuickActionGrid
+      actions={ACTIONS}
       description="Частые переходы к настройке и деплою"
-      className="@container w-full"
-      contentClassName="grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3"
-    >
-      {LINKS.map((link) => (
-        <DashboardQuickLinkCard key={link.label} {...link} />
-      ))}
-    </PanelCard>
+    />
   )
 }

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

@@ -4,10 +4,15 @@ import type { Table } from '@tanstack/react-table'
 import { cn } from '@evobgp/ui/lib/utils'
 
 import { DataGridToolbar } from '@/components/data-grid-toolbar'
-import { PanelCard, panelCardContentFlushClassName, panelCardFooterClassName, panelCardInsetClassName } from '@/components/panel-card'
+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 { FrameFooter } from '@/components/reui/frame'
 import {
   DATA_GRID_MESSAGES_RU,
   DATA_GRID_PAGINATION_RU,
@@ -52,9 +57,9 @@ export function DataGridShell<TData extends object>({
         <DataGridTable />
       </DataGridContainer>
       {showPagination ? (
-        <div className={cn(panelCardFooterClassName, panelCardInsetClassName)}>
+        <FrameFooter className={cn(panelCardFooterClassName)}>
           <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
-        </div>
+        </FrameFooter>
       ) : null}
     </DataGrid>
   )

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

@@ -16,12 +16,13 @@ interface DataGridToolbarProps {
   searchValue: string
   onSearchChange: (value: string) => void
   searchPlaceholder?: string
+  /** ReUI Filters trigger or custom filter controls. Preview: https://reui.io/preview/base/data-grid-filtering-2 */
   filters?: ReactNode
   actions?: ReactNode
   className?: string
 }
 
-/** Search row for data grids (ReUI c-input-group-37 pattern). */
+/** Search + optional ReUI Filters row for Frame data grids. */
 export function DataGridToolbar({
   searchValue,
   onSearchChange,
@@ -58,19 +59,19 @@ export function DataGridToolbar({
               filters
             ) : (
               <InputGroupButton
+                aria-label="Фильтры"
+                size="icon-xs"
                 variant="ghost"
-                size="xs"
-                className="pointer-events-none gap-1.5 opacity-0"
-                aria-hidden="true"
-                tabIndex={-1}
+                disabled
+                title="Передайте filters={<Filters … />} из @/components/reui/filters"
               >
-                <ListFilterIcon className="size-3.5" />
+                <ListFilterIcon aria-hidden="true" />
               </InputGroupButton>
             )}
           </InputGroupAddon>
         </InputGroup>
       </Field>
-      {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
     </div>
   )
 }

apps/web/src/components/kpi-stat-grid.tsx

@@ -1,126 +1,14 @@
-import type { KeyboardEvent, ReactNode } from 'react'
-
-import { Frame, FramePanel } from '@/components/reui/frame'
-import { cn } from '@evobgp/ui/lib/utils'
-import { Item, ItemMedia } from '@evobgp/ui/components/item'
-
-export type KpiStatItem = {
-  id?: string
-  icon?: ReactNode
-  iconClassName?: string
-  value: ReactNode
-  label: ReactNode
-  footer?: ReactNode
-  active?: boolean
-  onClick?: () => void
-}
-
-const DEFAULT_ICON_CLASS =
-  'text-muted-foreground [&_svg]:text-current'
-
-function kpiStatGridClassName(count: number): string {
-  if (count <= 1) return 'grid-cols-1'
-  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
-  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
-  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
-  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
-  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
-  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
-}
-
-function handleCardKeyDown(onClick: () => void, event: KeyboardEvent<HTMLDivElement>) {
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault()
-    onClick()
-  }
-}
-
-/** Single KPI tile (ReUI stats-12 / dashboard PRO pattern). */
-export function KpiStatCard({
-  item,
-  embedded = false,
-  className,
-}: {
-  item: KpiStatItem
-  embedded?: boolean
-  className?: string
-}) {
-  const clickable = Boolean(item.onClick)
-
-  const panel = (
-    <FramePanel
-      className={cn(
-        'flex h-full flex-col items-start gap-6',
-        clickable && 'cursor-pointer transition-colors hover:bg-muted/30',
-        item.active && 'ring-1 ring-primary/30',
-        className,
-      )}
-      onClick={item.onClick}
-      role={clickable ? 'button' : undefined}
-      tabIndex={clickable ? 0 : undefined}
-      onKeyDown={clickable && item.onClick ? (e) => handleCardKeyDown(item.onClick!, e) : undefined}
-    >
-      {item.icon ? (
-        <Item
-          className={cn(
-            'border-background bg-muted flex size-10.5 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
-            item.iconClassName ?? DEFAULT_ICON_CLASS,
-          )}
-        >
-          <ItemMedia variant="icon" className="size-auto">
-            {item.icon}
-          </ItemMedia>
-        </Item>
-      ) : null}
-
-      <div className="space-y-0.5">
-        <div className="text-foreground text-2xl leading-none font-bold tabular-nums">{item.value}</div>
-        <div className="text-muted-foreground text-sm font-medium">{item.label}</div>
-      </div>
-
-      {item.footer ? <div className="mt-auto w-full">{item.footer}</div> : null}
-    </FramePanel>
-  )
-
-  if (embedded) {
-    return (
-      <Frame className="h-full ring-1 ring-foreground/10">
-        {panel}
-      </Frame>
-    )
-  }
-
-  return <Frame className="h-full">{panel}</Frame>
-}
-
-export function KpiStatGrid({
-  items,
-  className,
-  embedded = false,
-  'aria-label': ariaLabel,
-}: {
-  items: KpiStatItem[]
-  className?: string
-  embedded?: boolean
-  'aria-label'?: string
-}) {
-  return (
-    <section aria-label={ariaLabel} className={cn('@container w-full', className)}>
-      <div className={cn('grid gap-5', kpiStatGridClassName(items.length))}>
-        {items.map((item, index) => (
-          <KpiStatCard
-            key={item.id ?? (typeof item.label === 'string' ? item.label : `kpi-${index}`)}
-            item={item}
-            embedded={embedded}
-          />
-        ))}
-      </div>
-    </section>
-  )
-}
-
-export function kpiStatItemKey(item: KpiStatItem, index: number): string {
-  if (item.id) return item.id
-  if (typeof item.label === 'string') return item.label
-  return `kpi-${index}`
-}
+/**
+ * Re-export from reui-kit — keep `@/components/kpi-stat-grid` imports stable.
+ * @see https://reui.io/preview/base/stats-12
+ */
+export {
+  KpiStatGrid,
+  KpiStatCard,
+  KpiStatCardTile,
+  kpiStatItemKey,
+  type KpiStatItem,
+  type KpiStatCardData,
+  type KpiStatVariant,
+  type OpsKpiCard,
+} from '@/components/reui-kit/kpi-stat-grid'

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

@@ -10,6 +10,7 @@ import {
   KeyRound,
   ServerCog,
   Shield,
+  Search,
 } from 'lucide-react'
 
 import {
@@ -41,6 +42,8 @@ import { TooltipProvider } from '@evobgp/ui/components/tooltip'
 import { Link, useRouterState } from '@tanstack/react-router'
 import type { ComponentType, CSSProperties, ReactNode } from 'react'
 
+import { AppSwitcher } from '@/components/app-switcher'
+import { AppsMenu } from '@/components/layout/apps-menu'
 import { CommandPalette, type CommandPaletteItem } from '@/components/layout/command-palette'
 import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
 import { ModeToggle } from '@/components/mode-toggle'
@@ -74,6 +77,7 @@ const NAV_GROUPS: NavGroup[] = [
     label: 'Маршрутизация',
     items: [
       { to: '/modules', label: 'Модули', icon: Boxes, description: 'Списки префиксов и AS' },
+      { to: '/lookup', label: 'Проверка', icon: Search, description: 'IP/домен в списках и community' },
       { to: '/network', label: 'Сеть', icon: Network, description: 'BGP-пиры и спикеры', search: { tab: 'overview' } },
       { to: '/directories', label: 'Справочники', icon: BookText, description: 'Communities и DoH' },
     ],
@@ -116,6 +120,11 @@ const COMMAND_ITEMS: CommandPaletteItem[] = ALL_NAV_ITEMS.map((item) => ({
   keywords: [item.to.replace(/^\//, '')],
 }))
 
+/**
+ * Shared ops chrome etalon for CFDM / vps-tracker.
+ * @see https://reui.io/preview/base/app-shell-12
+ * @see docs/ui-design-contract.md — Shared App Shell chrome
+ */
 export function AppShell({ children }: { children: ReactNode }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const activeItem =
@@ -134,26 +143,13 @@ export function AppShell({ children }: { children: ReactNode }) {
       <SidebarProvider
         style={
           {
-            '--sidebar-width': '260px',
-            '--sidebar-width-icon': '62px',
-            '--header-height': '56px',
+            '--sidebar-width': '240px',
           } as CSSProperties
         }
       >
         <Sidebar collapsible="icon">
-          <SidebarHeader className="gap-2">
-            <div className="flex items-center gap-2 px-2 py-1.5">
-              <div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-bold">
-                B
-              </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">Плоскость управления</span>
-              </div>
-            </div>
-            <div className="px-2 group-data-[collapsible=icon]:px-0">
-              <CommandPalette items={COMMAND_ITEMS} />
-            </div>
+          <SidebarHeader>
+            <AppSwitcher />
           </SidebarHeader>
           <SidebarContent>
             {NAV_GROUPS.map((group) => (
@@ -185,8 +181,8 @@ export function AppShell({ children }: { children: ReactNode }) {
           <SidebarFooter />
         </Sidebar>
         <SidebarInset>
-          <header className="sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-            <SidebarTrigger />
+          <header className="bg-background sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b px-4 md:px-6">
+            <SidebarTrigger className="-ml-1" />
             <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
             <Breadcrumb>
               <BreadcrumbList>
@@ -204,12 +200,16 @@ export function AppShell({ children }: { children: ReactNode }) {
               </BreadcrumbList>
             </Breadcrumb>
             <div className="ml-auto flex items-center gap-2">
+              <AppsMenu />
               <SystemMonitorPopover />
               <ModeToggle />
             </div>
           </header>
-          <main className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">{children}</main>
+          <main className="flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">
+            {children}
+          </main>
         </SidebarInset>
+        <CommandPalette items={COMMAND_ITEMS} hotkeyOnly />
       </SidebarProvider>
     </TooltipProvider>
   )

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

@@ -0,0 +1,93 @@
+import { Link } from '@tanstack/react-router'
+import { LayoutGridIcon } from 'lucide-react'
+import { Button } from '@evobgp/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@evobgp/ui/components/dropdown-menu'
+import {
+  APP_SWITCHER_ICONS,
+  CURRENT_APP_ID,
+} from '@/lib/app-switcher-config'
+import { useAppSwitcherConfig } from '@/hooks/use-app-switcher'
+
+/** Header apps grid — app-shell-12 AppsMenu. @see https://reui.io/preview/base/app-shell-12 */
+export function AppsMenu() {
+  const { config, isLoading } = useAppSwitcherConfig()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="icon" aria-label="Приложения" />
+        }
+      >
+        <LayoutGridIcon
+          className="size-4.5 transition-colors"
+          aria-hidden="true"
+        />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        side="bottom"
+        align="end"
+        sideOffset={8}
+        className="w-72"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>
+            {isLoading ? 'Загрузка…' : config.menuLabel}
+          </DropdownMenuLabel>
+          <div className="grid grid-cols-3 gap-1 p-1">
+            {config.apps.map((app) => {
+              const Icon = APP_SWITCHER_ICONS[app.icon]
+              const isCurrent = app.id === CURRENT_APP_ID
+
+              if (isCurrent) {
+                return (
+                  <DropdownMenuItem
+                    key={app.id}
+                    disabled
+                    className="h-auto flex-col gap-1.5 py-3 text-center [&_svg]:size-5"
+                  >
+                    <span className="text-muted-foreground">
+                      <Icon aria-hidden="true" />
+                    </span>
+                    <span className="text-xs font-medium">{app.name}</span>
+                  </DropdownMenuItem>
+                )
+              }
+
+              return (
+                <DropdownMenuItem
+                  key={app.id}
+                  nativeButton={false}
+                  render={<a href={app.url} />}
+                  className="h-auto flex-col gap-1.5 py-3 text-center [&_svg]:size-5"
+                >
+                  <span className="text-muted-foreground">
+                    <Icon aria-hidden="true" />
+                  </span>
+                  <span className="text-xs font-medium">{app.name}</span>
+                </DropdownMenuItem>
+              )
+            })}
+          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            nativeButton={false}
+            render={<Link to="/settings" search={{ tab: 'connection' }} />}
+            className="justify-center text-sm font-medium"
+          >
+            Настройки
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/web/src/components/layout/command-palette.tsx

@@ -29,9 +29,11 @@ export type CommandPaletteItem = {
 interface CommandPaletteProps {
   items: CommandPaletteItem[]
   className?: string
+  /** Hotkey-only: no sidebar search trigger (chrome parity with CFDM). */
+  hotkeyOnly?: boolean
 }
 
-export function CommandPalette({ items }: CommandPaletteProps) {
+export function CommandPalette({ items, hotkeyOnly = false }: CommandPaletteProps) {
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
   const searchInputId = useId()
@@ -68,25 +70,27 @@ export function CommandPalette({ items }: CommandPaletteProps) {
 
   return (
     <>
-      <SidebarGroup className="p-0">
-        <SidebarGroupContent className="relative">
-          <Button
-            type="button"
-            variant="outline"
-            className="hover:bg-background h-8 w-full justify-start pl-7 font-normal transition-[width] duration-200 ease-linear in-data-[state=collapsed]:w-8! in-data-[state=collapsed]:pl-4! in-data-[state=collapsed]:text-transparent"
-            onClick={() => setOpen(true)}
-          >
-            Поиск…
-          </Button>
-          <Search
-            aria-hidden
-            className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 opacity-50 select-none"
-          />
-          <Kbd className="absolute top-1/2 right-2 -translate-y-1/2 in-data-[state=collapsed]:hidden">
-            ⌘K
-          </Kbd>
-        </SidebarGroupContent>
-      </SidebarGroup>
+      {!hotkeyOnly ? (
+        <SidebarGroup className="p-0">
+          <SidebarGroupContent className="relative">
+            <Button
+              type="button"
+              variant="outline"
+              className="hover:bg-background h-8 w-full justify-start pl-7 font-normal transition-[width] duration-200 ease-linear in-data-[state=collapsed]:w-8! in-data-[state=collapsed]:pl-4! in-data-[state=collapsed]:text-transparent"
+              onClick={() => setOpen(true)}
+            >
+              Поиск…
+            </Button>
+            <Search
+              aria-hidden
+              className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 opacity-50 select-none"
+            />
+            <Kbd className="absolute top-1/2 right-2 -translate-y-1/2 in-data-[state=collapsed]:hidden">
+              ⌘K
+            </Kbd>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      ) : null}
 
       <Dialog
         open={open}

apps/web/src/components/layout/system-monitor-popover.tsx

@@ -181,7 +181,7 @@ export function SystemMonitorPopover() {
         </Badge>
       </PopoverTrigger>
 
-      <PopoverContent align="end" sideOffset={8} className="w-80 gap-0! space-y-0! p-0!">
+      <PopoverContent align="end" sideOffset={8} className="flex w-80 flex-col gap-0! p-0!">
         <div className="border-border flex items-center justify-between border-b px-3 py-2.5">
           <span className="text-foreground text-xs font-medium">Монитор EvoBGP</span>
           <span className="text-muted-foreground text-[11px] tabular-nums">

apps/web/src/components/lookup/lookup-matches-grid.tsx

@@ -0,0 +1,133 @@
+import { ColumnDef } from '@tanstack/react-table'
+import { useMemo } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridCard, DataGridSection } from '@/components/data-grid-shell'
+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 type { LookupMatch } from '@/types/api'
+
+/**
+ * Lookup matches grid — data-grid-filtering-2 pattern.
+ * @see https://reui.io/preview/base/data-grid-filtering-2
+ * @see https://reui.io/docs/components/base/badge
+ */
+export function LookupMatchesGrid({
+  items,
+  isLoading = false,
+}: {
+  items: LookupMatch[]
+  isLoading?: boolean
+}) {
+  const navigate = useNavigate()
+
+  const columns = useMemo<ColumnDef<LookupMatch>[]>(
+    () => [
+      {
+        accessorKey: 'layer',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Слой" />,
+        cell: ({ row }) => (
+          <Badge
+            variant={row.original.layer === 'entry' ? 'info-light' : 'primary-light'}
+            size="sm"
+          >
+            {row.original.layer}
+          </Badge>
+        ),
+        meta: { headerTitle: 'Слой' },
+      },
+      {
+        accessorKey: 'module_name',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Модуль" />,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell
+            title={row.original.module_name}
+            subtitle={row.original.module_type}
+            accent="primary"
+          />
+        ),
+        meta: { headerTitle: 'Модуль' },
+      },
+      {
+        accessorKey: 'matched_value',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Совпадение" />,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell
+            title={row.original.matched_value}
+            subtitle={
+              row.original.resolved_ip
+                ? `${row.original.match_kind} · via ${row.original.resolved_ip}`
+                : row.original.match_kind
+            }
+            accent="mono"
+          />
+        ),
+        meta: { headerTitle: 'Совпадение' },
+      },
+      {
+        id: 'community',
+        accessorFn: (row) => row.community_title || row.community || '',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Community" />,
+        cell: ({ row }) => {
+          const title = row.original.community_title?.trim()
+          const value = row.original.community?.trim()
+          if (!title && !value) {
+            return <span className="text-muted-foreground text-sm">—</span>
+          }
+          return (
+            <DataGridPrimaryCell
+              title={title || value || '—'}
+              subtitle={title && value && title !== value ? value : undefined}
+            />
+          )
+        },
+        meta: { headerTitle: 'Community' },
+      },
+      {
+        id: 'source',
+        enableSorting: false,
+        header: 'Источник',
+        cell: ({ row }) =>
+          row.original.source ? (
+            <CategoryBadge>{row.original.source}</CategoryBadge>
+          ) : (
+            <span className="text-muted-foreground text-sm">—</span>
+          ),
+        meta: { headerTitle: 'Источник' },
+      },
+    ],
+    [],
+  )
+
+  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
+    data: items,
+    columns,
+    getSearchText: (row) =>
+      `${row.layer} ${row.module_name} ${row.module_type} ${row.matched_value} ${row.community ?? ''} ${row.community_title ?? ''} ${row.source ?? ''}`,
+    getRowId: (row) =>
+      `${row.layer}|${row.module_id}|${row.match_kind}|${row.matched_value}|${row.entry_id ?? ''}|${row.source ?? ''}|${row.community_id ?? ''}`,
+  })
+
+  return (
+    <DataGridCard
+      title="Совпадения"
+      description="Entries и snapshots · клик по строке открывает модуль"
+    >
+      <DataGridSection
+        table={table}
+        recordCount={filteredCount}
+        isLoading={isLoading}
+        emptyMessage="Нет совпадений"
+        searchValue={globalFilter}
+        onSearchChange={setGlobalFilter}
+        searchPlaceholder="Фильтр совпадений…"
+        onRowClick={(row) =>
+          void navigate({ to: '/modules/$moduleId', params: { moduleId: row.module_id } })
+        }
+      />
+    </DataGridCard>
+  )
+}

apps/web/src/components/lookup/lookup-search-form.tsx

@@ -0,0 +1,76 @@
+import { useState, type FormEvent } from 'react'
+import { Search } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Field, FieldLabel } from '@evobgp/ui/components/field'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@evobgp/ui/components/input-group'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+
+/**
+ * Lookup search form — Frame + InputGroup (form-7 pattern).
+ * @see https://reui.io/preview/base/form-7
+ * @see https://reui.io/docs/components/base/frame
+ */
+export function LookupSearchForm({
+  initialQuery = '',
+  isPending = false,
+  onSubmit,
+}: {
+  initialQuery?: string
+  isPending?: boolean
+  onSubmit: (q: string) => void
+}) {
+  const [value, setValue] = useState(initialQuery)
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    const q = value.trim()
+    if (!q) return
+    onSubmit(q)
+  }
+
+  return (
+    <Frame spacing="sm" className="w-full">
+      <FrameHeader>
+        <FrameTitle>Проверка списка</FrameTitle>
+        <FrameDescription>
+          IP или FQDN — поиск в entries и материализованных snapshots с community.
+        </FrameDescription>
+      </FrameHeader>
+      <FramePanel>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4 sm:flex-row sm:items-end">
+          <Field className="min-w-0 flex-1">
+            <FieldLabel htmlFor="lookup-q">IP или домен</FieldLabel>
+            <InputGroup>
+              <InputGroupAddon align="inline-start">
+                <Search aria-hidden />
+              </InputGroupAddon>
+              <InputGroupInput
+                id="lookup-q"
+                name="q"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                placeholder="8.8.8.8 или example.com"
+                autoComplete="off"
+                autoFocus
+              />
+            </InputGroup>
+          </Field>
+          <Button type="submit" disabled={isPending || !value.trim()}>
+            Проверить
+          </Button>
+        </form>
+      </FramePanel>
+    </Frame>
+  )
+}

apps/web/src/components/lookup/lookup-summary-kpi.tsx

@@ -0,0 +1,62 @@
+import { Globe, Layers, ListChecks, Radar } from 'lucide-react'
+
+import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
+import type { LookupResponse } from '@/types/api'
+
+/**
+ * Lookup summary KPI — stats-12 via KpiStatGrid.
+ * @see https://reui.io/preview/base/stats-12
+ */
+export function LookupSummaryKpi({ data }: { data: LookupResponse }) {
+  const entryCount = data.matches.filter((m) => m.layer === 'entry').length
+  const snapshotCount = data.matches.filter((m) => m.layer === 'snapshot').length
+  const resolvedCount = data.resolved_ips?.length ?? 0
+
+  const items: KpiStatItem[] = [
+    {
+      id: 'matched',
+      label: 'Результат',
+      value: data.matched ? 'Найдено' : 'Не найдено',
+      hint: data.normalized,
+      icon: <Radar aria-hidden />,
+      iconClassName: data.matched
+        ? 'bg-success text-success-foreground [&_svg]:text-success-foreground'
+        : 'bg-muted text-muted-foreground [&_svg]:text-muted-foreground',
+      variant: data.matched ? 'default' : 'warning',
+    },
+    {
+      id: 'entry',
+      label: 'Слой entry',
+      value: entryCount,
+      hint: 'сырые списки',
+      icon: <ListChecks aria-hidden />,
+      iconClassName: 'bg-info text-info-foreground [&_svg]:text-info-foreground',
+    },
+    {
+      id: 'snapshot',
+      label: 'Слой snapshot',
+      value: snapshotCount,
+      hint: 'материализация',
+      icon: <Layers aria-hidden />,
+      iconClassName: 'bg-focus text-focus-foreground [&_svg]:text-focus-foreground',
+    },
+  ]
+
+  if (data.query_kind === 'domain') {
+    items.push({
+      id: 'resolved',
+      label: 'DNS IP',
+      value: resolvedCount,
+      hint: resolvedCount > 0 ? data.resolved_ips?.slice(0, 3).join(', ') : 'нет A/AAAA',
+      icon: <Globe aria-hidden />,
+      iconClassName: 'bg-primary text-primary-foreground [&_svg]:text-primary-foreground',
+    })
+  }
+
+  return (
+    <KpiStatGrid
+      items={items}
+      aria-label={`Запрос: ${data.query_kind} · ${data.query}`}
+    />
+  )
+}

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

@@ -1,21 +1,24 @@
 import type { ReactNode } from 'react'
 
 import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@evobgp/ui/components/card'
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
 import { cn } from '@evobgp/ui/lib/utils'
 
-/** REUI c-data-grid-19: card shell with default spacing and flush grid body. */
-export const panelCardClassName = 'gap-0 has-data-[slot=card-footer]:pb-0'
+/**
+ * Frame shell class constants (legacy Card names kept for DataGridShell / toolbar).
+ * @see https://reui.io/docs/components/base/frame
+ */
+export const panelCardClassName = 'w-full gap-0 p-0'
 export const panelCardHeaderClassName = 'border-b'
-export const panelCardContentFlushClassName = 'px-0'
-/** Horizontal inset for toolbar / pagination rows (matches edgeCell px-5). */
+/** Flush body inside FramePanel (toolbar / data-grid). */
+export const panelCardContentFlushClassName = 'p-0'
+/** Horizontal inset for toolbar / pagination rows. */
 export const panelCardInsetClassName = 'px-5 py-3'
 export const panelCardFooterClassName = 'border-t bg-transparent'
 
@@ -45,22 +48,45 @@ export function PanelCard({
   size = 'default',
 }: PanelCardProps) {
   const hasHeader = Boolean(title || description || actions)
+  const spacing = size === 'sm' ? 'sm' : 'default'
 
   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>
+    <Frame
+      dense
+      spacing={spacing}
+      className={cn(panelCardClassName, className)}
+    >
+      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
+        {hasHeader ? (
+          <FrameHeader
+            className={cn(
+              panelCardHeaderClassName,
+              'flex-row items-start justify-between gap-3',
+              headerClassName,
+            )}
+          >
+            <div className="flex min-w-0 flex-1 flex-col gap-px">
+              {title ? <FrameTitle>{title}</FrameTitle> : null}
+              {description ? (
+                <FrameDescription>{description}</FrameDescription>
+              ) : null}
+            </div>
+            {actions ? (
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                {actions}
+              </div>
+            ) : null}
+          </FrameHeader>
+        ) : null}
+        {children != null && children !== false ? (
+          <div className={cn('min-w-0 flex-1', contentClassName)}>{children}</div>
+        ) : null}
+        {footer ? (
+          <FrameFooter className={cn(panelCardFooterClassName, footerClassName)}>
+            {footer}
+          </FrameFooter>
+        ) : null}
+      </FramePanel>
+    </Frame>
   )
 }

apps/web/src/components/reui-kit/detail-panel.tsx

@@ -0,0 +1,116 @@
+import type { ReactNode } from 'react'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { cn } from '@evobgp/ui/lib/utils'
+
+export interface DetailMetricCard {
+  id: string
+  icon: ReactNode
+  label: string
+  description: string
+  footer?: ReactNode
+}
+
+interface DetailPanelProps {
+  children: ReactNode
+  className?: string
+}
+
+function DetailPanelRoot({ children, className }: DetailPanelProps) {
+  return <div className={cn('flex flex-col gap-4 md:gap-6', className)}>{children}</div>
+}
+
+interface DetailPanelHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+  children?: ReactNode
+}
+
+function DetailPanelHeader({
+  title,
+  description,
+  actions,
+  children,
+}: DetailPanelHeaderProps) {
+  return (
+    <Frame dense spacing="sm" className="w-full">
+      <FrameHeader className="flex-row items-start justify-between gap-3">
+        <div className="flex min-w-0 flex-1 flex-col gap-px">
+          <FrameTitle>{title}</FrameTitle>
+          {description ? (
+            <FrameDescription>{description}</FrameDescription>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+            {actions}
+          </div>
+        ) : null}
+      </FrameHeader>
+      {children ? <FramePanel className="flex flex-col gap-4">{children}</FramePanel> : null}
+    </Frame>
+  )
+}
+
+function DetailPanelMetrics({ cards }: { cards: DetailMetricCard[] }) {
+  return (
+    <div className="@container w-full">
+      <div className="grid gap-4 @2xl:grid-cols-3">
+        {cards.map((card) => (
+          <Frame key={card.id} spacing="sm">
+            <FrameHeader className="px-1! py-1!">
+              <div className="[&_svg]:text-muted-foreground flex items-center gap-2 [&_svg]:size-4">
+                {card.icon}
+                <span className="text-foreground text-sm font-medium">
+                  {card.label}
+                </span>
+              </div>
+            </FrameHeader>
+            <FramePanel className="flex flex-col gap-2">
+              <p className="text-muted-foreground text-xs leading-relaxed">
+                {card.description}
+              </p>
+              {card.footer}
+            </FramePanel>
+          </Frame>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function DetailPanelSection({
+  title,
+  description,
+  children,
+}: {
+  title?: string
+  description?: string
+  children: ReactNode
+}) {
+  return (
+    <section className="flex flex-col gap-3">
+      {title ? (
+        <header className="px-1">
+          <h2 className="text-sm font-semibold">{title}</h2>
+          {description ? (
+            <p className="text-muted-foreground text-sm">{description}</p>
+          ) : null}
+        </header>
+      ) : null}
+      {children}
+    </section>
+  )
+}
+
+export const DetailPanel = Object.assign(DetailPanelRoot, {
+  Header: DetailPanelHeader,
+  Metrics: DetailPanelMetrics,
+  Section: DetailPanelSection,
+})

apps/web/src/components/reui-kit/filter-utils.ts

@@ -0,0 +1,91 @@
+import type { Filter } from '@/components/reui/filters'
+
+export function getActiveFilters(filters: Filter[]) {
+  return filters.filter((filter) => {
+    const { values } = filter
+    if (!values || values.length === 0) return false
+    if (values.every((value) => typeof value === 'string' && value.trim() === '')) {
+      return false
+    }
+    if (values.every((value) => value === null || value === undefined)) {
+      return false
+    }
+    if (values.every((value) => Array.isArray(value) && value.length === 0)) {
+      return false
+    }
+    return true
+  })
+}
+
+export function applyFiltersToData<T>(
+  data: T[],
+  filters: Filter[],
+  getFieldValue: (item: T, field: string) => unknown,
+): T[] {
+  const active = getActiveFilters(filters)
+  let result = [...data]
+
+  for (const filter of active) {
+    const { field, operator, values } = filter
+    result = result.filter((item) => {
+      const raw = getFieldValue(item, field)
+      const fieldValue = raw != null ? raw : ''
+
+      switch (operator) {
+        case 'is':
+          return values.includes(fieldValue)
+        case 'is_not':
+          return !values.includes(fieldValue)
+        case 'is_any_of':
+          return values.some((value) => fieldValue === value)
+        case 'is_not_any_of':
+          return !values.some((value) => fieldValue === value)
+        case 'contains': {
+          const tokens = values
+            .map((value) => String(value).trim())
+            .filter(Boolean)
+          if (tokens.length === 0) return true
+          return tokens.some((token) =>
+            String(fieldValue).toLowerCase().includes(token.toLowerCase()),
+          )
+        }
+        case 'not_contains':
+          return !values.some((value) =>
+            String(fieldValue).toLowerCase().includes(String(value).toLowerCase()),
+          )
+        case 'starts_with':
+          return values.some((value) =>
+            String(fieldValue).toLowerCase().startsWith(String(value).toLowerCase()),
+          )
+        case 'ends_with':
+          return values.some((value) =>
+            String(fieldValue).toLowerCase().endsWith(String(value).toLowerCase()),
+          )
+        case 'empty':
+          return fieldValue === '' || fieldValue == null
+        case 'not_empty':
+          return fieldValue !== '' && fieldValue != null
+        default:
+          return true
+      }
+    })
+  }
+
+  return result
+}
+
+export function renderSelectedCount(values: unknown[]) {
+  if (values.length === 0) return 'Выберите…'
+  if (values.length > 1) return `${values.length} выбрано`
+  return null
+}
+
+export function renderSingleSelectedLabel(
+  values: unknown[],
+  options: { value: string; label: string }[],
+) {
+  const state = renderSelectedCount(values)
+  if (state) return state
+  const option = options.find((item) => item.value === values[0])
+  return option?.label ?? String(values[0])
+}

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

@@ -0,0 +1,26 @@
+export {
+  applyFiltersToData,
+  getActiveFilters,
+  renderSelectedCount,
+  renderSingleSelectedLabel,
+} from './filter-utils'
+export {
+  ResourcePage,
+  type ResourcePageProps,
+  type ResourcePageTab,
+} from './resource-page'
+export {
+  KpiStatGrid,
+  KpiStatCard,
+  KpiStatCardTile,
+  kpiStatItemKey,
+  type KpiStatItem,
+  type KpiStatCardData,
+  type KpiStatCard as KpiStatCardType,
+  type KpiStatVariant,
+  type OpsKpiCard,
+} from './kpi-stat-grid'
+export { QuickActionGrid, type QuickActionItem } from './quick-action-grid'
+export { OpsDashboard } from './ops-dashboard'
+export { DetailPanel, type DetailMetricCard } from './detail-panel'
+export { SettingsShell, type SettingsTabConfig } from './settings-shell'

apps/web/src/components/reui-kit/kpi-stat-grid.tsx

@@ -0,0 +1,334 @@
+import type { KeyboardEvent, ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
+
+import { Frame, FramePanel } from '@/components/reui/frame'
+import { Badge } from '@/components/reui/badge'
+import { cn } from '@evobgp/ui/lib/utils'
+import { Item, ItemMedia } from '@evobgp/ui/components/item'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+
+export type KpiStatVariant = 'default' | 'warning' | 'destructive'
+
+/**
+ * KPI tile data — horizontal compact hybrid (icon left + label/Badge + value).
+ * @see https://reui.io/preview/base/stats-12
+ */
+export type KpiStatItem = {
+  id?: string
+  label: ReactNode
+  value: ReactNode
+  hint?: ReactNode
+  to?: string
+  search?: Record<string, unknown>
+  onSelect?: () => void
+  onClick?: () => void
+  selected?: boolean
+  active?: boolean
+  icon?: ReactNode
+  iconClassName?: string
+  variant?: KpiStatVariant
+  footer?: ReactNode
+}
+
+/** CFDM-compatible card shape (id required). */
+export type KpiStatCardData = KpiStatItem & { id: string }
+
+/** @deprecated Use KpiStatCardData */
+export type OpsKpiCard = KpiStatCardData
+
+/** @deprecated Use KpiStatCardData — type alias for CFDM kit parity */
+export type KpiStatCard = KpiStatCardData
+
+const DEFAULT_ICON_CLASS = 'text-muted-foreground [&_svg]:text-current'
+
+const VALUE_VARIANT_CLASS: Record<KpiStatVariant, string> = {
+  default: 'text-foreground',
+  warning: 'text-warning',
+  destructive: 'text-destructive',
+}
+
+function kpiCols(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
+  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
+  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
+  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
+  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
+  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+}
+
+function handleCardKeyDown(onActivate: () => void, event: KeyboardEvent<HTMLDivElement>) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    onActivate()
+  }
+}
+
+function resolveActivate(item: KpiStatItem): (() => void) | undefined {
+  return item.onClick ?? item.onSelect
+}
+
+function isSelected(item: KpiStatItem): boolean {
+  return Boolean(item.selected ?? item.active)
+}
+
+function resolveFooter(item: KpiStatItem): ReactNode {
+  if (item.footer) return item.footer
+  if (typeof item.hint === 'string') {
+    return (
+      <Badge variant="outline" size="sm">
+        {item.hint}
+      </Badge>
+    )
+  }
+  if (item.hint) return item.hint
+  return null
+}
+
+function KpiStatCardBody({ item }: { item: KpiStatItem }) {
+  const footer = resolveFooter(item)
+  const valueVariant = item.variant ?? 'default'
+
+  return (
+    <div className="relative z-10 flex h-full items-start gap-3">
+      {item.icon ? (
+        <Item
+          className={cn(
+            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
+            item.iconClassName ?? DEFAULT_ICON_CLASS,
+          )}
+        >
+          <ItemMedia variant="icon" className="size-auto">
+            {item.icon}
+          </ItemMedia>
+        </Item>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="text-muted-foreground text-sm font-medium">{item.label}</div>
+          {footer ? <div className="shrink-0">{footer}</div> : null}
+        </div>
+        <div
+          className={cn(
+            'text-2xl leading-none font-bold tabular-nums',
+            VALUE_VARIANT_CLASS[valueVariant],
+          )}
+        >
+          {item.value}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function panelClassName(item: KpiStatItem, className?: string) {
+  const onActivate = resolveActivate(item)
+  const clickable = Boolean(item.to || onActivate)
+  const selected = isSelected(item)
+
+  return cn(
+    'relative isolate flex h-full flex-col',
+    clickable &&
+      'hover:bg-muted/40 focus-within:ring-ring cursor-pointer transition-colors focus-within:ring-2',
+    selected && 'ring-primary/30 bg-muted/30 ring-1',
+    className,
+  )
+}
+
+/** Single KPI tile — used for embedded / standalone contexts. */
+export function KpiStatCardTile({
+  item,
+  embedded = false,
+  className,
+}: {
+  item: KpiStatItem
+  embedded?: boolean
+  className?: string
+}) {
+  const onActivate = resolveActivate(item)
+  const panelClass = panelClassName(item, className)
+
+  let panel: ReactNode
+
+  if (item.to) {
+    panel = (
+      <FramePanel className={panelClass}>
+        <Link to={item.to} search={item.search} className="focus-visible:outline-none">
+          <KpiStatCardBody item={item} />
+        </Link>
+      </FramePanel>
+    )
+  } else if (onActivate) {
+    panel = (
+      <FramePanel
+        className={panelClass}
+        onClick={onActivate}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => handleCardKeyDown(onActivate, e)}
+      >
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  } else {
+    panel = (
+      <FramePanel className={panelClass}>
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  }
+
+  if (embedded) {
+    return <Frame className="h-full ring-1 ring-foreground/10">{panel}</Frame>
+  }
+
+  return <Frame className="h-full">{panel}</Frame>
+}
+
+/** @deprecated Prefer KpiStatCardTile — kept for existing imports */
+export function KpiStatCard({
+  item,
+  embedded = false,
+  className,
+}: {
+  item: KpiStatItem
+  embedded?: boolean
+  className?: string
+}) {
+  return <KpiStatCardTile item={item} embedded={embedded} className={className} />
+}
+
+function KpiStatGridSkeleton({ count }: { count: number }) {
+  return (
+    <Frame className="@container w-full">
+      <div className={cn('grid gap-2', kpiCols(count))}>
+        {Array.from({ length: count }).map((_, index) => (
+          <FramePanel key={index} className="flex items-start gap-3">
+            <Skeleton className="size-10.5 shrink-0 rounded-lg" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+              <div className="flex items-center justify-between gap-2">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4.5 w-14 rounded-full" />
+              </div>
+              <Skeleton className="h-7 w-16" />
+            </div>
+          </FramePanel>
+        ))}
+      </div>
+    </Frame>
+  )
+}
+
+interface KpiStatGridProps {
+  /** EvoBGP primary API */
+  items?: KpiStatItem[]
+  /** CFDM-compatible API */
+  cards?: KpiStatCardData[]
+  isLoading?: boolean
+  emptyMessage?: ReactNode
+  emptyIcon?: ReactNode
+  className?: string
+  skeletonCount?: number
+  /** Wrap each tile in its own Frame (analytics panels). */
+  embedded?: boolean
+  'aria-label'?: string
+}
+
+function KpiStatCardItem({ item }: { item: KpiStatItem }) {
+  const onActivate = resolveActivate(item)
+  const panelClass = panelClassName(item)
+
+  if (item.to) {
+    return (
+      <FramePanel className={panelClass}>
+        <Link to={item.to} search={item.search} className="focus-visible:outline-none">
+          <KpiStatCardBody item={item} />
+        </Link>
+      </FramePanel>
+    )
+  }
+
+  if (onActivate) {
+    return (
+      <FramePanel
+        className={panelClass}
+        onClick={onActivate}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => handleCardKeyDown(onActivate, e)}
+      >
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  }
+
+  return (
+    <FramePanel className={panelClass}>
+      <KpiStatCardBody item={item} />
+    </FramePanel>
+  )
+}
+
+/**
+ * Hybrid KPI — EvoBGP visual + horizontal compact layout (icon left).
+ * Preview: https://reui.io/preview/base/stats-12
+ */
+export function KpiStatGrid({
+  items,
+  cards,
+  isLoading = false,
+  emptyMessage,
+  emptyIcon,
+  className,
+  skeletonCount = 4,
+  embedded = false,
+  'aria-label': ariaLabel,
+}: KpiStatGridProps) {
+  if (isLoading) {
+    return <KpiStatGridSkeleton count={skeletonCount} />
+  }
+
+  const list = items ?? cards ?? []
+
+  if (list.length === 0 && (emptyMessage || emptyIcon)) {
+    return (
+      <Frame dense spacing="sm" className={cn('w-full', className)}>
+        <FramePanel className="flex items-center gap-3 p-4">
+          {emptyIcon}
+          {emptyMessage ? (
+            <p className="text-muted-foreground text-sm">{emptyMessage}</p>
+          ) : null}
+        </FramePanel>
+      </Frame>
+    )
+  }
+
+  if (embedded) {
+    return (
+      <section aria-label={ariaLabel} className={cn('@container w-full', className)}>
+        <div className={cn('grid gap-2', kpiCols(list.length || 1))}>
+          {list.map((item, index) => (
+            <KpiStatCardTile key={kpiStatItemKey(item, index)} item={item} embedded />
+          ))}
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <Frame className={cn('@container w-full', className)} aria-label={ariaLabel}>
+      <div className={cn('grid gap-2', kpiCols(list.length || 1))}>
+        {list.map((item, index) => (
+          <KpiStatCardItem key={kpiStatItemKey(item, index)} item={item} />
+        ))}
+      </div>
+    </Frame>
+  )
+}
+
+export function kpiStatItemKey(item: KpiStatItem, index: number): string {
+  if (item.id) return item.id
+  if (typeof item.label === 'string') return item.label
+  return `kpi-${index}`
+}

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

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+import { PageHeader } from '@/components/page-header'
+import { KpiStatGrid, type KpiStatCardData } from './kpi-stat-grid'
+
+export type OpsKpiCard = KpiStatCardData
+
+interface OpsDashboardProps {
+  title?: string
+  description?: string
+  kpiCards: OpsKpiCard[]
+  charts: ReactNode
+  queue: ReactNode
+  queueTitle?: string
+  queueDescription?: string
+  isLoading?: boolean
+}
+
+const rootClassName =
+  'text-foreground @container flex w-full flex-col gap-2 md:gap-3'
+
+function OpsDashboardSkeleton() {
+  return (
+    <div className={rootClassName}>
+      <header className="px-1">
+        <Skeleton className="h-7 w-56" />
+        <Skeleton className="mt-2 h-4 w-80 max-w-full" />
+      </header>
+      <KpiStatGrid cards={[]} isLoading skeletonCount={4} />
+      <div className="grid gap-2 @3xl:grid-cols-2">
+        <Skeleton className="h-64 w-full rounded-xl" />
+        <Skeleton className="h-64 w-full rounded-xl" />
+      </div>
+      <Skeleton className="h-48 w-full rounded-xl" />
+    </div>
+  )
+}
+
+export function OpsDashboard({
+  title = 'Панель управления',
+  description = 'Обзор модулей, сети, задач и состояния плоскости управления',
+  kpiCards,
+  charts,
+  queue,
+  queueTitle = 'Требуют внимания',
+  queueDescription = 'Проблемы BGP, сбои задач и офлайн-спикеры',
+  isLoading = false,
+}: OpsDashboardProps) {
+  if (isLoading) {
+    return <OpsDashboardSkeleton />
+  }
+
+  return (
+    <div className={rootClassName}>
+      <PageHeader title={title} description={description} />
+
+      <section aria-label="Ключевые метрики">
+        <KpiStatGrid cards={kpiCards} skeletonCount={4} />
+      </section>
+
+      <section
+        aria-label="Аналитика"
+        className="grid min-w-0 items-start gap-2 @3xl:grid-cols-2"
+      >
+        {charts}
+      </section>
+
+      <section aria-label={queueTitle}>
+        <Frame dense spacing="sm" className="w-full">
+          <FrameHeader>
+            <FrameTitle>{queueTitle}</FrameTitle>
+            <FrameDescription>{queueDescription}</FrameDescription>
+          </FrameHeader>
+          <FramePanel>{queue}</FramePanel>
+        </Frame>
+      </section>
+    </div>
+  )
+}

apps/web/src/components/reui-kit/quick-action-grid.tsx

@@ -0,0 +1,113 @@
+import type { ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { Badge } from '@/components/reui/badge'
+import { Item, ItemMedia } from '@evobgp/ui/components/item'
+import { cn } from '@evobgp/ui/lib/utils'
+
+export interface QuickActionItem {
+  id: string
+  title: string
+  description: string
+  to: string
+  search?: Record<string, unknown>
+  icon?: ReactNode
+  iconClassName?: string
+}
+
+interface QuickActionGridProps {
+  actions: QuickActionItem[]
+  title?: string
+  description?: string
+  className?: string
+}
+
+const DEFAULT_ICON_CLASS = 'text-muted-foreground [&_svg]:text-current'
+
+function kpiCols(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
+  if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
+  if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
+  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
+  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
+  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+}
+
+function QuickActionBody({ action }: { action: QuickActionItem }) {
+  return (
+    <div className="relative z-10 flex h-full items-start gap-3">
+      {action.icon ? (
+        <Item
+          className={cn(
+            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
+            action.iconClassName ?? DEFAULT_ICON_CLASS,
+          )}
+        >
+          <ItemMedia variant="icon" className="size-auto">
+            {action.icon}
+          </ItemMedia>
+        </Item>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex items-start justify-between gap-2">
+          <span className="text-foreground text-sm font-medium">{action.title}</span>
+          <Badge variant="outline" size="sm" className="shrink-0">
+            Перейти
+          </Badge>
+        </div>
+        <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+          {action.description}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * KPI-like quick actions strip (horizontal Frame tiles).
+ * Preview: https://reui.io/preview/base/stats-12
+ */
+export function QuickActionGrid({
+  actions,
+  title = 'Быстрые действия',
+  description,
+  className,
+}: QuickActionGridProps) {
+  if (actions.length === 0) return null
+
+  return (
+    <Frame dense spacing="sm" className={cn('@container w-full', className)}>
+      {(title || description) && (
+        <FrameHeader>
+          {title ? <FrameTitle>{title}</FrameTitle> : null}
+          {description ? <FrameDescription>{description}</FrameDescription> : null}
+        </FrameHeader>
+      )}
+      <div className={cn('grid gap-2', kpiCols(actions.length))}>
+        {actions.map((action) => (
+          <FramePanel
+            key={action.id}
+            className="relative isolate flex h-full flex-col hover:bg-muted/40 focus-within:ring-ring cursor-pointer transition-colors focus-within:ring-2"
+          >
+            <Link
+              to={action.to}
+              search={action.search}
+              className="focus-visible:outline-none"
+              aria-label={`${action.title}: ${action.description}`}
+            >
+              <QuickActionBody action={action} />
+            </Link>
+          </FramePanel>
+        ))}
+      </div>
+    </Frame>
+  )
+}

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

@@ -0,0 +1,370 @@
+import { useCallback, useMemo, useState, type ReactNode } from 'react'
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+} from '@tanstack/react-table'
+import { CircleAlertIcon, FilterIcon, FilterXIcon } from 'lucide-react'
+
+import { CountedLineTabs } from '@/components/counted-line-tabs'
+import { Badge } from '@/components/reui/badge'
+import { DataGrid } from '@/components/reui/data-grid/data-grid'
+import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
+import { DataGridScrollArea } from '@/components/reui/data-grid/data-grid-scroll-area'
+import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
+import {
+  Filters,
+  type Filter,
+  type FilterFieldConfig,
+} from '@/components/reui/filters'
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { Button } from '@evobgp/ui/components/button'
+import { Separator } from '@evobgp/ui/components/separator'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
+import { EmptyState } from '@/components/empty-state'
+import { applyFiltersToData } from './filter-utils'
+
+export interface ResourcePageTab {
+  id: string
+  label: string
+  count?: number
+}
+
+export interface ResourcePageProps<T extends object> {
+  title: string
+  description?: string
+  tabs?: ResourcePageTab[]
+  activeTab?: string
+  onTabChange?: (tabId: string) => void
+  tabFilter?: (item: T, tabId: string) => boolean
+  filterFields: FilterFieldConfig[]
+  filters: Filter[]
+  onFiltersChange: (filters: Filter[]) => void
+  onClearFilters?: () => void
+  getFilterFieldValue: (item: T, field: string) => unknown
+  columns: ColumnDef<T, unknown>[]
+  data: T[]
+  getRowId: (row: T) => string
+  isLoading?: boolean
+  isError?: boolean
+  error?: Error | null
+  onRetry?: () => void
+  primaryAction?: ReactNode
+  emptyState?: { title: string; description?: string; action?: ReactNode }
+  pageSize?: number
+  enableRowSelection?: boolean
+  selectionToolbar?: (ctx: {
+    selectedIds: string[]
+    selectedCount: number
+    clearSelection: () => void
+  }) => ReactNode
+  toolbarExtra?: ReactNode
+  hideHeader?: boolean
+}
+
+function ResourcePageSkeleton() {
+  return (
+    <Frame dense variant="default" spacing="sm" className="w-full">
+      <FrameHeader>
+        <Skeleton className="h-5 w-48" />
+        <Skeleton className="mt-1 h-4 w-72" />
+      </FrameHeader>
+      <FramePanel className="p-0">
+        <div className="flex flex-col gap-3 p-4">
+          <Skeleton className="h-9 w-full max-w-md" />
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </div>
+      </FramePanel>
+    </Frame>
+  )
+}
+
+export function ResourcePage<T extends object>({
+  title,
+  description,
+  tabs,
+  activeTab: controlledTab,
+  onTabChange,
+  tabFilter,
+  filterFields,
+  filters,
+  onFiltersChange,
+  onClearFilters,
+  getFilterFieldValue,
+  columns,
+  data,
+  getRowId,
+  isLoading = false,
+  isError = false,
+  error = null,
+  onRetry,
+  primaryAction,
+  emptyState,
+  pageSize = 10,
+  enableRowSelection = false,
+  selectionToolbar,
+  toolbarExtra,
+  hideHeader = false,
+}: ResourcePageProps<T>) {
+  const [internalTab, setInternalTab] = useState(tabs?.[0]?.id ?? 'all')
+  const activeTab = controlledTab ?? internalTab
+
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize,
+  })
+
+  const resetPagination = useCallback(() => {
+    setPagination((current) =>
+      current.pageIndex === 0 ? current : { ...current, pageIndex: 0 },
+    )
+  }, [])
+
+  const filteredData = useMemo(() => {
+    let result = applyFiltersToData(data, filters, getFilterFieldValue)
+    if (tabs && tabs.length > 0 && tabFilter && activeTab !== 'all') {
+      result = result.filter((item) => tabFilter(item, activeTab))
+    }
+    return result
+  }, [data, filters, getFilterFieldValue, tabs, tabFilter, activeTab])
+
+  const tabCounts = useMemo(() => {
+    if (!tabs?.length || !tabFilter) return {}
+    const base = applyFiltersToData(data, filters, getFilterFieldValue)
+    const counts: Record<string, number> = {}
+    for (const tab of tabs) {
+      counts[tab.id] =
+        tab.id === 'all'
+          ? base.length
+          : base.filter((item) => tabFilter(item, tab.id)).length
+    }
+    return counts
+  }, [tabs, tabFilter, data, filters, getFilterFieldValue])
+
+  const selectedIds = useMemo(
+    () => Object.keys(rowSelection).filter((id) => rowSelection[id]),
+    [rowSelection],
+  )
+
+  const selectedCount = selectedIds.length
+
+  const clearSelection = useCallback(() => {
+    setRowSelection({})
+  }, [])
+
+  const table = useReactTable({
+    data: filteredData,
+    columns,
+    getRowId,
+    state: { sorting, rowSelection, pagination },
+    enableRowSelection,
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  const handleTabChange = useCallback(
+    (value: string) => {
+      if (onTabChange) onTabChange(value)
+      else setInternalTab(value)
+      resetPagination()
+    },
+    [onTabChange, resetPagination],
+  )
+
+  const handleFiltersChange = useCallback(
+    (next: Filter[]) => {
+      onFiltersChange(next)
+      resetPagination()
+    },
+    [onFiltersChange, resetPagination],
+  )
+
+  const handleClear = useCallback(() => {
+    onClearFilters?.()
+    resetPagination()
+  }, [onClearFilters, resetPagination])
+
+  const countedTabs = useMemo(
+    () =>
+      (tabs ?? []).map((tab) => ({
+        id: tab.id,
+        label: tab.label,
+        count: tabCounts[tab.id] ?? tab.count ?? 0,
+      })),
+    [tabs, tabCounts],
+  )
+
+  if (isLoading) {
+    return <ResourcePageSkeleton />
+  }
+
+  if (isError) {
+    return (
+      <Alert variant="destructive">
+        <CircleAlertIcon />
+        <AlertTitle>Ошибка загрузки</AlertTitle>
+        <AlertDescription className="flex flex-col gap-2">
+          <span>{error?.message ?? 'Не удалось загрузить данные'}</span>
+          {onRetry ? (
+            <Button type="button" variant="outline" size="sm" onClick={onRetry}>
+              Повторить
+            </Button>
+          ) : null}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (data.length === 0 && emptyState) {
+    return (
+      <EmptyState
+        title={emptyState.title}
+        description={emptyState.description}
+        action={emptyState.action}
+      />
+    )
+  }
+
+  const emptyMessage = 'Нет записей по выбранным фильтрам.'
+
+  return (
+    <div className="w-full">
+      {selectionToolbar && selectedCount > 0
+        ? selectionToolbar({
+            selectedIds,
+            selectedCount,
+            clearSelection,
+          })
+        : null}
+      <DataGrid
+        table={table}
+        recordCount={filteredData.length}
+        emptyMessage={emptyMessage}
+        tableLayout={{ dense: true }}
+      >
+        <Frame dense variant="default" spacing="sm" className="w-full">
+          {!hideHeader ? (
+            <FrameHeader className="flex-row items-start justify-between gap-3">
+              <div className="flex min-w-0 flex-col gap-px">
+                <FrameTitle className="text-balance">{title}</FrameTitle>
+                {description ? (
+                  <FrameDescription className="flex flex-wrap items-center gap-1.5 text-xs text-pretty">
+                    <span>{description}</span>
+                    <span
+                      className="bg-input size-1 shrink-0 rounded-full"
+                      aria-hidden="true"
+                    />
+                    <span className="tabular-nums">
+                      {filteredData.length} записей
+                    </span>
+                    {selectedCount > 0 ? (
+                      <>
+                        <span
+                          className="bg-input size-1 shrink-0 rounded-full"
+                          aria-hidden="true"
+                        />
+                        <span>{selectedCount} выбрано</span>
+                      </>
+                    ) : null}
+                  </FrameDescription>
+                ) : null}
+              </div>
+              {primaryAction ? (
+                <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                  {primaryAction}
+                </div>
+              ) : null}
+            </FrameHeader>
+          ) : null}
+
+          <FramePanel className="p-0 shadow-none!">
+            {countedTabs.length > 0 ? (
+              <>
+                <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
+                  <CountedLineTabs
+                    tabs={countedTabs}
+                    value={activeTab}
+                    onValueChange={handleTabChange}
+                  />
+                </div>
+                <Separator />
+              </>
+            ) : null}
+
+            <div className="flex flex-wrap items-center justify-between gap-3 px-(--frame-panel-header-px) py-(--frame-panel-header-py)">
+              <Filters
+                filters={filters}
+                fields={filterFields}
+                onChange={handleFiltersChange}
+                size="default"
+                trigger={
+                  <Button type="button" variant="outline" aria-label="Фильтры">
+                    <FilterIcon className="size-4" aria-hidden="true" />
+                    Фильтры
+                  </Button>
+                }
+              />
+              <div className="flex flex-wrap items-center justify-end gap-2">
+                {toolbarExtra}
+                {selectedCount > 0 ? (
+                  <Badge size="sm" variant="secondary">
+                    {selectedCount} выбрано
+                  </Badge>
+                ) : null}
+                {onClearFilters ? (
+                  <Button type="button" variant="outline" onClick={handleClear}>
+                    <FilterXIcon className="size-4" aria-hidden="true" />
+                    Сбросить
+                  </Button>
+                ) : null}
+              </div>
+            </div>
+
+            <Separator />
+
+            <DataGridScrollArea>
+              <DataGridTable />
+            </DataGridScrollArea>
+
+            <Separator />
+
+            <FrameFooter>
+              <DataGridPagination
+                sizes={[5, 10, 20, 50]}
+                rowsPerPageLabel="Строк на странице"
+                info="{from} - {to} of {count}"
+                previousPageLabel="Предыдущая"
+                nextPageLabel="Следующая"
+              />
+            </FrameFooter>
+          </FramePanel>
+        </Frame>
+      </DataGrid>
+    </div>
+  )
+}

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react'
+import { Link, Outlet, useRouterState } from '@tanstack/react-router'
+import { ServerCogIcon, SettingsIcon } from 'lucide-react'
+
+import { useIsMobile } from '@evobgp/ui/hooks/use-mobile'
+import { cn } from '@evobgp/ui/lib/utils'
+import { PageShell } from '@/components/page-shell'
+import { PageHeader } from '@/components/page-header'
+import { Separator } from '@evobgp/ui/components/separator'
+
+export interface SettingsTabConfig {
+  id: string
+  to: string
+  label: string
+  icon?: ReactNode
+}
+
+/** Default nav for EvoBGP settings routes (`/settings`, `/tenant-settings`). */
+const DEFAULT_TABS: SettingsTabConfig[] = [
+  {
+    id: 'ui',
+    to: '/settings',
+    label: 'Настройки UI',
+    icon: <SettingsIcon className="size-4" aria-hidden="true" />,
+  },
+  {
+    id: 'tenant',
+    to: '/tenant-settings',
+    label: 'Настройки BIRD',
+    icon: <ServerCogIcon className="size-4" aria-hidden="true" />,
+  },
+]
+
+interface SettingsShellProps {
+  title?: string
+  description?: string
+  tabs?: SettingsTabConfig[]
+}
+
+export function SettingsShell({
+  title = 'Настройки',
+  description = 'Подключение UI и параметры плоскости управления',
+  tabs = DEFAULT_TABS,
+}: SettingsShellProps) {
+  const isMobile = useIsMobile()
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+
+  return (
+    <PageShell>
+      <div className="mx-auto flex w-full max-w-4xl flex-col gap-5">
+        <div className="flex flex-col gap-3">
+          <PageHeader title={title} description={description} />
+          <Separator />
+        </div>
+
+        <div
+          className={cn(
+            'flex gap-5',
+            isMobile ? 'flex-col' : 'flex-row items-start',
+          )}
+        >
+          {tabs.length > 1 ? (
+            <nav
+              aria-label="Разделы настроек"
+              className={cn(
+                'flex gap-1',
+                isMobile
+                  ? 'scrollbar-none -mx-1 overflow-x-auto overflow-y-hidden pb-1'
+                  : 'w-44 shrink-0 flex-col',
+              )}
+            >
+              {tabs.map((tab) => {
+                const isActive = pathname.startsWith(tab.to)
+                return (
+                  <Link
+                    key={tab.id}
+                    to={tab.to}
+                    aria-current={isActive ? 'page' : undefined}
+                    className={cn(
+                      'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
+                      isMobile && 'shrink-0',
+                      !isMobile && 'w-full',
+                      isActive
+                        ? 'bg-muted text-foreground font-medium shadow-sm ring-1 ring-border/60'
+                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+                    )}
+                  >
+                    {tab.icon}
+                    {tab.label}
+                  </Link>
+                )
+              })}
+            </nav>
+          ) : null}
+
+          <div className="min-w-0 flex-1">
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </PageShell>
+  )
+}

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

@@ -32,15 +32,17 @@ function hintToFooter(hint: ReactNode) {
 }
 
 function toKpiStatItem(item: SectionCardItem, index: number): KpiStatItem {
+  const variant = item.variant ?? 'default'
   const footer =
     item.badge ?? (item.hint ? hintToFooter(item.hint) : undefined)
 
   return {
     id: typeof item.label === 'string' ? item.label : `section-${index}`,
     icon: item.icon,
-    iconClassName: VARIANT_ICON_CLASS[item.variant ?? 'default'],
+    iconClassName: VARIANT_ICON_CLASS[variant],
     value: item.value,
     label: item.label,
+    variant,
     footer,
     active: item.active,
     onClick: item.onClick,

apps/web/src/components/settings/appearance-settings-tab.tsx

@@ -1,5 +1,7 @@
 import { Moon, Sun, SunMoon } from 'lucide-react'
 import { useTheme } from 'next-themes'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
 
 import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
 import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
@@ -9,6 +11,9 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from '@evobgp/ui/components/toggle-group'
+import { Switch } from '@evobgp/ui/components/switch'
+import { apiMutate } from '@/lib/api-client'
+import { settingsKeys, settingsQueryOptions } from '@/queries/settings'
 
 const THEME_OPTIONS = [
   { value: 'light', label: 'Светлая', icon: Sun },
@@ -16,8 +21,27 @@ const THEME_OPTIONS = [
   { value: 'system', label: 'Система', icon: SunMoon },
 ] as const
 
+function parseShowQuickActions(value: unknown): boolean {
+  if (value === false || value === 0 || value === 'false' || value === '0') return false
+  return true
+}
+
 export function AppearanceSettingsTab() {
   const { theme, setTheme } = useTheme()
+  const qc = useQueryClient()
+  const settingsQ = useQuery(settingsQueryOptions())
+  const showQuickActions = parseShowQuickActions(settingsQ.data?.ui_show_quick_actions)
+
+  const patchMut = useMutation({
+    mutationFn: (payload: Record<string, boolean>) =>
+      apiMutate('/v1/settings', 'PATCH', payload),
+    onSuccess: () => {
+      toast.success('Настройки интерфейса сохранены')
+      void qc.invalidateQueries({ queryKey: settingsKeys.all })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось сохранить'),
+  })
 
   return (
     <div className="space-y-6">
@@ -63,6 +87,31 @@ export function AppearanceSettingsTab() {
           </SettingRow>
         </SettingsFieldGroup>
       </SettingsCard>
+
+      <SettingsCard
+        title="Дашборд"
+        description="Блоки на экране «Обзор»"
+      >
+        <SettingsFieldGroup
+          legend="Быстрые действия"
+          description="Показывать KPI-like плитки быстрых переходов под метриками."
+        >
+          <SettingRow
+            title="Быстрые действия"
+            description="Блок с частыми переходами (модули, сеть, деплой) на дашборде."
+            last
+          >
+            <Switch
+              checked={showQuickActions}
+              disabled={settingsQ.isLoading || patchMut.isPending}
+              onCheckedChange={(checked) =>
+                patchMut.mutate({ ui_show_quick_actions: checked })
+              }
+              aria-label="Показывать быстрые действия"
+            />
+          </SettingRow>
+        </SettingsFieldGroup>
+      </SettingsCard>
     </div>
   )
 }

apps/web/src/hooks/use-app-switcher.ts

@@ -0,0 +1,22 @@
+import {
+  DEFAULT_APP_SWITCHER_CONFIG,
+  getAppSwitcherConfig,
+  getAppUrl as getAppUrlFromConfig,
+  type AppSwitcherConfig,
+} from '@/lib/app-switcher-config'
+
+/** Env-backed app switcher (no DB API in EvoBGP v1). */
+export function useAppSwitcherConfig(): {
+  config: AppSwitcherConfig
+  isLoading: boolean
+} {
+  return {
+    config: getAppSwitcherConfig(),
+    isLoading: false,
+  }
+}
+
+export function useAppUrl(appId: string): string | undefined {
+  const { config } = useAppSwitcherConfig()
+  return getAppUrlFromConfig(appId, config ?? DEFAULT_APP_SWITCHER_CONFIG)
+}

apps/web/src/lib/app-switcher-config.ts

@@ -0,0 +1,102 @@
+import {
+  ChartBarIcon,
+  CloudIcon,
+  GlobeIcon,
+  LayoutDashboardIcon,
+  ServerIcon,
+  type LucideIcon,
+} from 'lucide-react'
+import { z } from 'zod'
+
+export const CURRENT_APP_ID = 'evobgp'
+
+const appSwitcherIconSchema = z.enum(['server', 'cloud', 'globe', 'dashboard', 'chart'])
+
+export type AppSwitcherIconName = z.infer<typeof appSwitcherIconSchema>
+
+export const APP_SWITCHER_ICONS: Record<AppSwitcherIconName, LucideIcon> = {
+  server: ServerIcon,
+  cloud: CloudIcon,
+  globe: GlobeIcon,
+  dashboard: LayoutDashboardIcon,
+  chart: ChartBarIcon,
+}
+
+const appSwitcherEntrySchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  subtitle: z.string().optional(),
+  url: z.string(),
+  icon: appSwitcherIconSchema.default('server'),
+  shortcut: z.string().optional(),
+})
+
+const appSwitcherConfigSchema = z.object({
+  menuLabel: z.string().default('Приложения'),
+  apps: z.array(appSwitcherEntrySchema).min(1),
+})
+
+export type AppSwitcherEntry = z.infer<typeof appSwitcherEntrySchema>
+export type AppSwitcherConfig = z.infer<typeof appSwitcherConfigSchema>
+
+/** Shared defaults across ops apps — chrome app switcher. */
+export const DEFAULT_APP_SWITCHER_CONFIG: AppSwitcherConfig = {
+  menuLabel: 'Приложения',
+  apps: [
+    {
+      id: 'vps-tracker',
+      name: 'VPS Tracker',
+      subtitle: 'Учёт виртуальных серверов',
+      url: 'http://192.168.100.67:3001',
+      icon: 'server',
+      shortcut: '⌘1',
+    },
+    {
+      id: 'cfdm',
+      name: 'CF Domain Manager',
+      subtitle: 'Управление доменами',
+      url: 'http://192.168.100.67:6363',
+      icon: 'cloud',
+      shortcut: '⌘2',
+    },
+    {
+      id: 'evobgp',
+      name: 'EvoBGP',
+      subtitle: 'BGP маршрутизация',
+      url: 'http://192.168.100.67:3000',
+      icon: 'globe',
+      shortcut: '⌘3',
+    },
+  ],
+}
+
+export function parseAppSwitcherConfig(raw?: string): AppSwitcherConfig {
+  if (!raw?.trim()) {
+    return DEFAULT_APP_SWITCHER_CONFIG
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as unknown
+    return appSwitcherConfigSchema.parse(parsed)
+  } catch (error) {
+    console.warn('Invalid VITE_APP_SWITCHER, using defaults:', error)
+    return DEFAULT_APP_SWITCHER_CONFIG
+  }
+}
+
+export function getAppSwitcherConfig(): AppSwitcherConfig {
+  return parseAppSwitcherConfig(import.meta.env.VITE_APP_SWITCHER)
+}
+
+export function getAppUrl(
+  appId: string,
+  config: AppSwitcherConfig = getAppSwitcherConfig(),
+): string | undefined {
+  return config.apps.find((app) => app.id === appId)?.url
+}
+
+export function getCurrentApp(
+  config: AppSwitcherConfig = getAppSwitcherConfig(),
+): AppSwitcherEntry {
+  return config.apps.find((app) => app.id === CURRENT_APP_ID) ?? config.apps[0]!
+}

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

@@ -1,13 +1,16 @@
 /**
  * EvoBGP UI surface contract (ReUI Pro).
  *
- * KPI tiles: **stats-12** pattern via `KpiStatGrid` / `SectionCards` (Frame + icon tile + badge).
- * Panels and data grids: shadcn Card via `PanelCard` / `DataGridCard`.
+ * Ops / list / dashboard / detail / settings: **Frame** only.
+ * KPI tiles: **stats-12** via `KpiStatGrid` / `reui-kit/KpiStatGrid`.
+ * Lists: Frame + DataGrid (`ResourcePage` / `DataGridSection`), not Card shell.
  *
- * @see https://reui.io/blocks — stats-12, dashboard-1
- * @see `.agents/skills/shadcn-react/SKILL.md`
+ * @see https://reui.io/preview/base/stats-12
+ * @see https://reui.io/preview/base/dashboard-1
+ * @see https://reui.io/preview/base/data-grid-filtering-2
+ * @see docs/ui-design-contract.md
  */
-export const UI_SURFACE = 'card' as const
+export const UI_SURFACE = 'frame' as const
 
 /** Grid for ReUI stats-12 KPI rows (3–6 tiles). */
 export const kpiStatGridClassName = '@container w-full'

apps/web/src/queries/lookup.ts

@@ -0,0 +1,21 @@
+import { queryOptions } from '@tanstack/react-query'
+
+import { apiJSON } from '@/lib/api-client'
+import type { LookupResponse } from '@/types/api'
+
+export const lookupKeys = {
+  all: ['lookup'] as const,
+  query: (q: string) => [...lookupKeys.all, q] as const,
+}
+
+/** GET /v1/lookup?q= — dual-layer membership (entry + snapshot). */
+export function lookupQueryOptions(q: string) {
+  const trimmed = q.trim()
+  return queryOptions<LookupResponse>({
+    queryKey: lookupKeys.query(trimmed),
+    queryFn: () =>
+      apiJSON<LookupResponse>(`/v1/lookup?q=${encodeURIComponent(trimmed)}`),
+    enabled: trimmed.length > 0,
+    staleTime: 15_000,
+  })
+}

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

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { useQueries } from '@tanstack/react-query'
+import { useQueries, useQuery } from '@tanstack/react-query'
 import { RefreshCw } from 'lucide-react'
 import { useState } from 'react'
 
@@ -27,13 +27,21 @@ import {
   overviewRevisionsQueryOptions,
   overviewSpeakersQueryOptions,
 } from '@/queries/overview'
+import { settingsQueryOptions } from '@/queries/settings'
 
 export const Route = createFileRoute('/_auth/dashboard')({
   component: DashboardComponent,
 })
 
+function parseShowQuickActions(value: unknown): boolean {
+  if (value === false || value === 0 || value === 'false' || value === '0') return false
+  return true
+}
+
 function DashboardComponent() {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
+  const settingsQ = useQuery(settingsQueryOptions())
+  const showQuickActions = parseShowQuickActions(settingsQ.data?.ui_show_quick_actions)
 
   const results = useQueries({
     queries: [
@@ -86,8 +94,6 @@ function DashboardComponent() {
         }
       />
 
-      <DashboardQuickLinks />
-
       {initialLoading ? (
         <AnalyticsDashboardSkeleton />
       ) : (
@@ -99,6 +105,8 @@ function DashboardComponent() {
             jobs={jobs}
           />
 
+          {showQuickActions ? <DashboardQuickLinks /> : null}
+
           <div className={dashboardMainSidebarClassName}>
             <div className="xl:col-span-8">
               <DashboardModulesGrid modules={modules} isLoading={refreshing} />

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

@@ -0,0 +1,86 @@
+import { createFileRoute, useSearch } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { Search } from 'lucide-react'
+
+import { LookupMatchesGrid } from '@/components/lookup/lookup-matches-grid'
+import { LookupSearchForm } from '@/components/lookup/lookup-search-form'
+import { LookupSummaryKpi } from '@/components/lookup/lookup-summary-kpi'
+import { PageHeader } from '@/components/page-header'
+import { EmptyState } from '@/components/empty-state'
+import { QueryState } from '@/components/query-state'
+import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
+import { lookupQueryOptions } from '@/queries/lookup'
+
+/**
+ * Quick membership lookup page.
+ * Surface: frame · KPI: stats-12 · form: form-7 · grid: data-grid-filtering-2 · empty: empty-state-2
+ * @see https://reui.io/preview/base/stats-12
+ * @see https://reui.io/preview/base/form-7
+ * @see https://reui.io/preview/base/data-grid-filtering-2
+ * @see https://reui.io/preview/base/empty-state-2
+ */
+export const Route = createFileRoute('/_auth/lookup')({
+  component: LookupComponent,
+  validateSearch: (search: Record<string, unknown>) => ({
+    q: typeof search.q === 'string' ? search.q : '',
+  }),
+})
+
+function LookupComponent() {
+  const { q } = useSearch({ from: '/_auth/lookup' })
+  const navigate = Route.useNavigate()
+  const lookupQ = useQuery(lookupQueryOptions(q))
+
+  return (
+    <div className="flex flex-col gap-4 md:gap-6">
+      <PageHeader
+        title="Проверка"
+        description="Быстрая проверка IP или домена в списках и community (entry + snapshot)"
+      />
+
+      <LookupSearchForm
+        key={q}
+        initialQuery={q}
+        isPending={lookupQ.isFetching}
+        onSubmit={(next) => void navigate({ search: { q: next } })}
+      />
+
+      {!q.trim() ? (
+        <EmptyState
+          icon={<Search className="size-8" />}
+          title="Введите IP или домен"
+          description="Например 8.8.8.8 или example.com — проверка по сырым entries и материализованным префиксам."
+        />
+      ) : (
+        <QueryState
+          data={lookupQ.data}
+          isLoading={lookupQ.isLoading}
+          isError={lookupQ.isError}
+          error={lookupQ.error}
+          onRetry={() => void lookupQ.refetch()}
+          skeleton={
+            <div className="flex flex-col gap-4 md:gap-6">
+              <SectionCardsSkeleton />
+              <TableSkeleton rows={5} />
+            </div>
+          }
+        >
+          {(data) => (
+            <div className="flex flex-col gap-4 md:gap-6">
+              <LookupSummaryKpi data={data} />
+              {data.matched ? (
+                <LookupMatchesGrid items={data.matches} isLoading={lookupQ.isFetching} />
+              ) : (
+                <EmptyState
+                  icon={<Search className="size-8" />}
+                  title="Не найдено в списках"
+                  description={`«${data.normalized}» отсутствует в entries и snapshots tenant.`}
+                />
+              )}
+            </div>
+          )}
+        </QueryState>
+      )}
+    </div>
+  )
+}

apps/web/src/types/api.ts

@@ -151,6 +151,37 @@ export type BgpCommunityCreate = {
 export type BgpCommunityPatch = Partial<BgpCommunityCreate>
 export type CommunitiesResponse = Page<BgpCommunity>
 
+// ---- Lookup (GET /v1/lookup) ----
+/** @see https://reui.io/preview/base/stats-12 — KPI summary on /lookup */
+export type LookupQueryKind = 'ip' | 'domain'
+export type LookupLayer = 'entry' | 'snapshot'
+export type LookupMatchKind = 'ip_range' | 'domain' | 'prefix'
+
+export type LookupMatch = {
+  layer: LookupLayer
+  module_id: string
+  module_name: string
+  module_type: ModuleType
+  match_kind: LookupMatchKind
+  matched_value: string
+  entry_id?: string
+  source?: string
+  community_id?: string | null
+  community?: string
+  community_title?: string
+  resolved_ip?: string
+}
+
+export type LookupResponse = {
+  query: string
+  query_kind: LookupQueryKind
+  normalized: string
+  matched: boolean
+  match_count: number
+  matches: LookupMatch[]
+  resolved_ips?: string[]
+}
+
 // ---- Peers ----
 export type PeerSessionOnSpeaker = {
   speaker_id: string

apps/web/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_SWITCHER?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

docs/api.md

@@ -33,6 +33,15 @@
 - `POST /v1/modules`, `PATCH /v1/modules/{module_id}`, `DELETE /v1/modules/{module_id}`
 - `GET|POST|PATCH|DELETE` для `.../cdn-sources`, `.../as-entries`, `.../domain-entries`, `.../ip-range-entries`
 - `POST /v1/modules/{module_id}/refresh`
+- `GET /v1/router-lists/catalog` — агрегированный каталог модулей/entries/communities
+
+### Lookup
+
+- `GET /v1/lookup?q=` — быстрая проверка IP или FQDN в списках (viewer+).
+  - Слой `entry`: `IP_RANGES` (`CIDR.Contains`) / `DOMAINS` (нормализованный FQDN).
+  - Слой `snapshot`: материализованные `module_prefix_snapshot` (для IP — Contains по всем модулям; для домена — `source=domain` у matched DOMAINS-модулей).
+  - В каждом матче — community (`community_id` / значение / title).
+  - Live DoH не выполняется. Контракт: OpenAPI `lookupMembership`.
 
 ### DoH profiles
 

docs/openapi.yaml

@@ -27,6 +27,8 @@ tags:
     description: Liveness, readiness и метаданные сборки. Обычно без чувствительных данных; доступ может быть шире.
   - name: Modules
     description: Экземпляры модулей префиксов (AS, CDN, домены, статические IP-диапазоны) и вложенные записи. Чтение - viewer+; изменение - editor+.
+  - name: Lookup
+    description: Быстрая проверка membership IP/FQDN в списках (entries + module prefix snapshots) и community. Чтение - viewer+.
   - name: DoH profiles
     description: Профили DNS-over-HTTPS для модулей типа домены. Секрет в ответах не возвращается.
   - name: Communities
@@ -221,6 +223,12 @@ components:
         application/problem+json:
           schema:
             $ref: "#/components/schemas/Problem"
+    BadRequest:
+      description: Некорректный запрос (пустой или невалидный параметр).
+      content:
+        application/problem+json:
+          schema:
+            $ref: "#/components/schemas/Problem"
     Forbidden:
       description: Недостаточно прав для операции.
       content:
@@ -751,6 +759,100 @@ components:
           description: Человекочитаемое название для UI и фильтров.
       additionalProperties: true
 
+    LookupQueryKind:
+      type: string
+      enum: [ip, domain]
+      description: Определённый тип запроса после нормализации.
+
+    LookupLayer:
+      type: string
+      enum: [entry, snapshot]
+      description: |
+        `entry` — сырые IP_RANGES / DOMAINS entries;
+        `snapshot` — материализованные префиксы `module_prefix_snapshot`.
+
+    LookupMatchKind:
+      type: string
+      enum: [ip_range, domain, prefix]
+      description: Вид совпадения (entry CIDR, entry FQDN или snapshot prefix).
+
+    LookupMatch:
+      type: object
+      required:
+        - layer
+        - module_id
+        - module_name
+        - module_type
+        - match_kind
+        - matched_value
+      properties:
+        layer:
+          $ref: "#/components/schemas/LookupLayer"
+        module_id:
+          $ref: "#/components/schemas/ResourceId"
+        module_name:
+          type: string
+        module_type:
+          $ref: "#/components/schemas/ModuleType"
+        match_kind:
+          $ref: "#/components/schemas/LookupMatchKind"
+        matched_value:
+          type: string
+          description: CIDR, FQDN или prefix, с которым совпал запрос.
+        entry_id:
+          type: string
+          description: ID entry (только для layer=entry).
+        source:
+          type: string
+          description: Источник строки snapshot (ip_range, domain, as, cdn, …).
+        community_id:
+          type: ["string", "null"]
+        community:
+          type: string
+          description: Техническое значение BGP community.
+        community_title:
+          type: string
+          description: Человекочитаемое название community.
+        resolved_ip:
+          type: string
+          description: |
+            IP, полученный DNS-resolve domain-запроса, из-за которого появился этот матч.
+            Пусто для прямого IP-запроса и для FQDN entry/snapshot без resolve.
+
+    LookupResponse:
+      type: object
+      required:
+        - query
+        - query_kind
+        - normalized
+        - matched
+        - match_count
+        - matches
+      properties:
+        query:
+          type: string
+          description: Исходная строка запроса.
+        query_kind:
+          $ref: "#/components/schemas/LookupQueryKind"
+        normalized:
+          type: string
+          description: Нормализованный IP или FQDN.
+        matched:
+          type: boolean
+          description: true, если есть хотя бы одно совпадение.
+        match_count:
+          type: integer
+          minimum: 0
+        matches:
+          type: array
+          items:
+            $ref: "#/components/schemas/LookupMatch"
+        resolved_ips:
+          type: array
+          description: IP-адреса после live DNS resolve (только для query_kind=domain; A/AAAA).
+          items:
+            type: string
+
     BgpPeer:
       type: object
       required:
@@ -1455,6 +1557,10 @@ components:
           description: UTC cron для автоочистки (по умолчанию `0 */6 * * *`).
         runtime_logs_auto_mode:
           $ref: "#/components/schemas/RuntimeLogCleanupMode"
+        ui_show_quick_actions:
+          type: boolean
+          description: Показывать блок «Быстрые действия» на дашборде (UI preference).
+          default: true
       additionalProperties: true
 
     RevisionDiff:
@@ -1776,6 +1882,50 @@ paths:
         default:
           $ref: "#/components/responses/DefaultProblem"
 
+  /v1/lookup:
+    get:
+      tags: [Lookup]
+      summary: Проверка IP или домена в списках
+      description: |
+        Быстрая membership-проверка по tenant:
+
+        - **IP** — слой `entry` (`IP_RANGES`, `CIDR.Contains`) и слой `snapshot`
+          (все module prefix snapshots, `Prefix.Contains`);
+        - **Domain** — слой `entry` (нормализованный FQDN в `DOMAINS`) и слой `snapshot`
+          (префиксы `source=domain` у matched DOMAINS-модулей, если snapshot есть);
+          затем **live DNS resolve** (A/AAAA через системный резолвер) и проверка
+          каждого полученного IP так же, как для IP-запроса (ranges + все snapshots).
+
+        Community на матче: `entry.community_id || module.default_community_id` (entry)
+        или `PrefixRow.community_id` (snapshot), с join к справочнику communities.
+
+        Поля `resolved_ips` / `resolved_ip` заполняются только для domain-запросов
+        (после успешного DNS). Ошибка DNS не даёт 5xx: FQDN-слой всё равно возвращается.
+      operationId: lookupMembership
+      parameters:
+        - $ref: "#/components/parameters/TenantId"
+        - name: q
+          in: query
+          required: true
+          schema:
+            type: string
+            minLength: 1
+            maxLength: 253
+          description: IP-адрес или FQDN для проверки.
+      responses:
+        "200":
+          description: Результат проверки (в т.ч. matched=false при отсутствии совпадений).
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/LookupResponse"
+        "400":
+          $ref: "#/components/responses/BadRequest"
+        "401":
+          $ref: "#/components/responses/Unauthorized"
+        default:
+          $ref: "#/components/responses/DefaultProblem"
+
   /v1/router-lists/catalog:
     get:
       tags: [Modules]

docs/ui-design-contract.md

@@ -0,0 +1,100 @@
+# UI Design Contract (ops apps)
+
+Единый контракт для vps-tracker, CFDM и EvoBGP. Surface: **ReUI Frame**. Kit API: `apps/web/src/components/reui-kit/`.
+
+Карта: [llms.txt](https://reui.io/llms.txt) · [Styling](https://reui.io/docs/styling) · [License](https://reui.io/docs/license-setup) · [Blocks](https://reui.io/blocks)
+
+## Surface
+
+```ts
+// apps/web/src/lib/ui-surface.ts
+export const UI_SURFACE = 'frame' as const
+```
+
+Ops / list / dashboard / detail / settings — только **Frame**, не shadcn Card как shell. Не смешивать Card и Frame на одном ops-экране.
+
+## Canonical PRO references
+
+| Зона | Block | Preview |
+|------|-------|---------|
+| Shell | `app-shell-12` (+ cmdk/monitor где нужно) | https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7 |
+| KPI | horizontal compact hybrid (icon left + label/Badge + value ± variant; EvoBGP visual) | https://reui.io/preview/base/stats-12 |
+| Dashboard | `dashboard-1` | https://reui.io/preview/base/dashboard-1 |
+| Lists | `data-grid-filtering-2` | https://reui.io/preview/base/data-grid-filtering-2 |
+| Settings | `settings-16` + SettingRow (`settings-7`) | https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-7 |
+| Auth | `auth-13` | https://reui.io/preview/base/auth-13 |
+| Empty | `empty-state-12` | https://reui.io/preview/base/empty-state-12 |
+| Forms | `form-7` → Sheet/Drawer | https://reui.io/preview/base/form-7 |
+| Lookup | `/lookup` — Frame form + `KpiStatGrid` + DataGrid | https://reui.io/preview/base/form-7 · https://reui.io/preview/base/stats-12 · https://reui.io/preview/base/data-grid-filtering-2 · https://reui.io/preview/base/empty-state-2 |
+
+## Kit API (`reui-kit/`)
+
+| Component | Role |
+|-----------|------|
+| `ResourcePage` | Frame + line tabs + Filters + DataGrid |
+| `KpiStatGrid` | horizontal compact hybrid KPI tiles (`variant`, Badge) |
+| `QuickActionGrid` | KPI-like quick action tiles under KPI (gated by `ui_show_quick_actions`) |
+| `OpsDashboard` | KPI + charts + attention queue |
+| `SettingsShell` | settings nav + Outlet |
+| `DetailPanel` | detail Frame sections |
+| `filter-utils` | apply/clear ReUI Filters |
+
+## Dashboard layout
+
+| App | Section order |
+|-----|---------------|
+| EvoBGP / CFDM | KPI → **QuickActionGrid** → charts / rest |
+| vps-tracker | banner → KPI → charts → attention → **QuickActionGrid** → CSV |
+
+Gating: KV `ui_show_quick_actions` in `global_settings` via `PATCH /v1/settings` (default `true`).
+
+## Shared App Shell chrome
+
+Эталон: **EvoBGP** production [`apps/web/src/components/layout/app-shell.tsx`](../apps/web/src/components/layout/app-shell.tsx) + ReUI [app-shell-12](https://reui.io/preview/base/app-shell-12).
+
+При переключении между vps-tracker / CFDM / EvoBGP меняются **только** sidebar nav labels/hrefs и `main` content. Разметка, ширина, фон и hover chrome идентичны.
+
+| Токен / зона | Значение |
+|--------------|----------|
+| `SIDEBAR_WIDTH` / `--sidebar-width` | `240px` (в `packages/ui` sidebar + Provider style) |
+| Sidebar / hover colors | theme `--sidebar` / `--sidebar-accent` из `globals.css` — **без** AppShell `color-mix` override |
+| Header | `h-12`, `sticky`, `border-b`, `px-4 md:px-6` |
+| Header left | `SidebarTrigger` + `Separator` + Breadcrumb |
+| Header right | **AppsMenu** → **SystemMonitorPopover** → **ModeToggle** (без Search в chrome) |
+| Sidebar | AppSwitcher → groups (`SidebarGroupContent`) → icons `size-4` → **пустой** `SidebarFooter` |
+| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |
+| Search | hotkey ⌘K / Ctrl+K only (не кнопка в header) |
+
+Запрещено в chrome: `SidebarRail`, `NavUser` footer, sync-row footer, Search/Ctrl+K pill в header, issues Badge в header, muted/hover cascade на right-cluster, Provider `color-mix` для `--sidebar*`.
+
+App Switcher ids: `vps-tracker` · `cfdm` · `evobgp`. Override: `VITE_APP_SWITCHER` JSON.
+
+QuickActionGrid icons: только semantic **text** (`text-info` / `text-primary` / …) на kit `bg-muted` — без solid `bg-primary` fills. Preview: [stats-12](https://reui.io/preview/base/stats-12).
+
+## System monitor
+
+`SystemMonitorPopover` in app-shell header next to `ModeToggle` (после AppsMenu). Preview: https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/app-shell-7
+
+## MCP workflow
+
+1. MCP `user-reui` — `search` / `get_block` / `get_component` with `surface: "frame"`
+2. Cite `previewUrl` + `docsUrl`
+3. CLI from `apps/web`: `pnpm dlx shadcn@latest add @reui/...`
+4. Adapt into kit — do not hand-roll KPI/grid/settings rows
+5. `validate_usage` / `get_audit_checklist`
+
+Primitives: MCP `plugin-shadcn-shadcn` + `@evobgp/ui`.
+
+## Spacing
+
+- AppShell main: `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` (shared chrome)
+- No `space-y-*` / `space-x-*` — use `flex` + `gap-*`
+- Max 1 primary CTA per screen
+- Semantic tokens only (`variant="success"|"info"|"warning"`) — no raw `bg-emerald-*`
+
+## Forbidden
+
+- Card as ops list/dashboard shell
+- Hand-rolled data tables when ReUI DataGrid exists
+- Hand-rolled KPI grids when `KpiStatGrid` exists
+- Mixing Card and Frame surfaces on one ops screen

internal/httpapi/routes.go

@@ -54,6 +54,7 @@ func (s *Server) registerRoutes() {
 
 func (s *Server) registerV1(m *http.ServeMux) {
 	m.HandleFunc("GET /modules", s.handleListModules)
+	m.HandleFunc("GET /lookup", s.handleLookup)
 	m.HandleFunc("GET /router-lists/catalog", s.handleRouterListsCatalog)
 	m.HandleFunc("GET /modules/{module_id}", s.handleGetModule)
 	m.HandleFunc("GET /peers", s.handleListPeers)

internal/httpapi/routes_lookup.go

@@ -0,0 +1,37 @@
+package httpapi
+
+import (
+	"errors"
+	"net/http"
+	"strings"
+
+	"evobgp/internal/lookup"
+	"evobgp/internal/store"
+)
+
+// handleLookup implements GET /v1/lookup?q= (operationId: lookupMembership).
+func (s *Server) handleLookup(w http.ResponseWriter, r *http.Request) {
+	a, ok := authFromContext(r.Context())
+	if !ok {
+		writeProblem(w, http.StatusUnauthorized, "Unauthorized", "missing auth")
+		return
+	}
+	if !s.requireAtLeast(w, a, "viewer") {
+		return
+	}
+	q := strings.TrimSpace(r.URL.Query().Get("q"))
+	if q == "" {
+		writeProblem(w, http.StatusBadRequest, "Bad Request", "query parameter q is required")
+		return
+	}
+	res, err := lookup.Lookup(r.Context(), s.store, a.TenantID, q)
+	if err != nil {
+		if errors.Is(err, store.ErrInvalidInput) {
+			writeProblem(w, http.StatusBadRequest, "Bad Request", "query must be an IP address or FQDN")
+			return
+		}
+		writeStoreErr(w, err)
+		return
+	}
+	writeJSON(w, http.StatusOK, res)
+}

internal/httpapi/routes_lookup_test.go

@@ -0,0 +1,79 @@
+package httpapi
+
+import (
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"net/url"
+	"testing"
+
+	"evobgp/internal/store"
+)
+
+func TestLookupMembershipHTTP(t *testing.T) {
+	srv, err := New(Options{InsecureDev: true, SeedDemo: true, BundleSeedHex: testBundleSeed})
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer srv.Close()
+	tenant, _, modIP, _, _ := srv.Store().DemoIDs()
+	mustSetTestAPIKeys(t, srv, "edkey|"+tenant+"|editor")
+
+	comms, err := srv.Store().ListCommunities(tenant)
+	if err != nil || len(comms) == 0 {
+		t.Fatal("demo community")
+	}
+	cid := comms[0].ID
+	if _, err := srv.Store().CreateIPRangeEntry(tenant, modIP, &store.IPRangeEntry{
+		Prefix:      "198.51.100.0/24",
+		CommunityID: &cid,
+	}); err != nil {
+		t.Fatal(err)
+	}
+	if err := srv.Store().SetModulePrefixSnapshot(tenant, modIP, "t", []store.PrefixRow{
+		{Prefix: "198.51.100.0/24", CommunityID: &cid, Source: "ip_range"},
+	}); err != nil {
+		t.Fatal(err)
+	}
+
+	ts := httptest.NewServer(srv.Handler())
+	defer ts.Close()
+
+	req, _ := http.NewRequest(http.MethodGet, ts.URL+"/v1/lookup?q="+url.QueryEscape("198.51.100.7"), nil)
+	req.Header.Set("Authorization", "Bearer edkey")
+	resp, err := ts.Client().Do(req)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer func() { _ = resp.Body.Close() }()
+	if resp.StatusCode != http.StatusOK {
+		b, _ := io.ReadAll(resp.Body)
+		t.Fatalf("status %d: %s", resp.StatusCode, b)
+	}
+	var body struct {
+		Matched    bool   `json:"matched"`
+		MatchCount int    `json:"match_count"`
+		QueryKind  string `json:"query_kind"`
+		Matches    []struct {
+			Layer string `json:"layer"`
+		} `json:"matches"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&body); err != nil {
+		t.Fatal(err)
+	}
+	if !body.Matched || body.QueryKind != "ip" || body.MatchCount < 2 {
+		t.Fatalf("unexpected body: %+v", body)
+	}
+
+	reqBad, _ := http.NewRequest(http.MethodGet, ts.URL+"/v1/lookup?q=", nil)
+	reqBad.Header.Set("Authorization", "Bearer edkey")
+	respBad, err := ts.Client().Do(reqBad)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer func() { _ = respBad.Body.Close() }()
+	if respBad.StatusCode != http.StatusBadRequest {
+		t.Fatalf("empty q: status %d", respBad.StatusCode)
+	}
+}

internal/lookup/lookup.go

@@ -0,0 +1,369 @@
+// Package lookup implements dual-layer membership checks for IP addresses and FQDNs
+// against module entries and materialized prefix snapshots.
+package lookup
+
+import (
+	"context"
+	"fmt"
+	"net"
+	"net/netip"
+	"strings"
+	"unicode"
+
+	"evobgp/internal/store"
+)
+
+// QueryKind is the normalized kind of a lookup query.
+type QueryKind string
+
+const (
+	KindIP     QueryKind = "ip"
+	KindDomain QueryKind = "domain"
+)
+
+// Layer identifies which data source produced a match.
+type Layer string
+
+const (
+	LayerEntry    Layer = "entry"
+	LayerSnapshot Layer = "snapshot"
+)
+
+// MatchKind is the concrete match type within a layer.
+type MatchKind string
+
+const (
+	MatchIPRange MatchKind = "ip_range"
+	MatchDomain  MatchKind = "domain"
+	MatchPrefix  MatchKind = "prefix"
+)
+
+// Match is one membership hit (entry or snapshot) with resolved community fields.
+type Match struct {
+	Layer          Layer     `json:"layer"`
+	ModuleID       string    `json:"module_id"`
+	ModuleName     string    `json:"module_name"`
+	ModuleType     string    `json:"module_type"`
+	MatchKind      MatchKind `json:"match_kind"`
+	MatchedValue   string    `json:"matched_value"`
+	EntryID        string    `json:"entry_id,omitempty"`
+	Source         string    `json:"source,omitempty"`
+	CommunityID    *string   `json:"community_id,omitempty"`
+	Community      string    `json:"community,omitempty"`
+	CommunityTitle string    `json:"community_title,omitempty"`
+	// ResolvedIP is set when the hit came from a DNS-resolved address of a domain query.
+	ResolvedIP string `json:"resolved_ip,omitempty"`
+}
+
+// Result is the full lookup response payload.
+type Result struct {
+	Query       string    `json:"query"`
+	QueryKind   QueryKind `json:"query_kind"`
+	Normalized  string    `json:"normalized"`
+	Matched     bool      `json:"matched"`
+	MatchCount  int       `json:"match_count"`
+	Matches     []Match   `json:"matches"`
+	ResolvedIPs []string  `json:"resolved_ips,omitempty"`
+}
+
+// DomainResolver resolves a hostname to IP addresses (A/AAAA).
+type DomainResolver func(ctx context.Context, host string) ([]netip.Addr, error)
+
+// Lookup checks whether q (IP or FQDN) is present in tenant lists (entries + snapshots).
+// For domains, FQDN membership is checked first, then live DNS resolve and IP membership.
+func Lookup(ctx context.Context, st store.Backend, tenantID, q string) (*Result, error) {
+	return LookupWithResolver(ctx, st, tenantID, q, systemDNSResolver)
+}
+
+// LookupWithResolver is like Lookup but uses resolve for domain→IP (tests / alternate DNS).
+func LookupWithResolver(
+	ctx context.Context,
+	st store.Backend,
+	tenantID, q string,
+	resolve DomainResolver,
+) (*Result, error) {
+	raw := strings.TrimSpace(q)
+	if raw == "" {
+		return nil, fmt.Errorf("%w: empty query", store.ErrInvalidInput)
+	}
+
+	comms, err := st.ListCommunities(tenantID)
+	if err != nil {
+		return nil, err
+	}
+	commByID := make(map[string]*store.Community, len(comms))
+	for _, c := range comms {
+		if c != nil {
+			commByID[c.ID] = c
+		}
+	}
+
+	out := &Result{
+		Query:   raw,
+		Matches: make([]Match, 0),
+	}
+
+	if addr, err := netip.ParseAddr(raw); err == nil {
+		out.QueryKind = KindIP
+		out.Normalized = addr.String()
+		if err := lookupIP(st, tenantID, addr, out, commByID, ""); err != nil {
+			return nil, err
+		}
+	} else {
+		fqdn, ok := normalizeFQDN(raw)
+		if !ok {
+			return nil, fmt.Errorf("%w: query must be an IP address or FQDN", store.ErrInvalidInput)
+		}
+		out.QueryKind = KindDomain
+		out.Normalized = fqdn
+		if err := lookupDomain(st, tenantID, fqdn, out, commByID); err != nil {
+			return nil, err
+		}
+		if resolve == nil {
+			resolve = systemDNSResolver
+		}
+		if err := lookupResolvedIPs(ctx, st, tenantID, fqdn, out, commByID, resolve); err != nil {
+			return nil, err
+		}
+	}
+
+	out.MatchCount = len(out.Matches)
+	out.Matched = out.MatchCount > 0
+	return out, nil
+}
+
+func systemDNSResolver(ctx context.Context, host string) ([]netip.Addr, error) {
+	ips, err := net.DefaultResolver.LookupNetIP(ctx, "ip", host)
+	if err != nil {
+		return nil, err
+	}
+	return uniqAddrs(ips), nil
+}
+
+func uniqAddrs(in []netip.Addr) []netip.Addr {
+	seen := make(map[netip.Addr]struct{}, len(in))
+	out := make([]netip.Addr, 0, len(in))
+	for _, a := range in {
+		a = a.Unmap()
+		if _, ok := seen[a]; ok {
+			continue
+		}
+		seen[a] = struct{}{}
+		out = append(out, a)
+	}
+	return out
+}
+
+func lookupResolvedIPs(
+	ctx context.Context,
+	st store.Backend,
+	tenantID, fqdn string,
+	out *Result,
+	commByID map[string]*store.Community,
+	resolve DomainResolver,
+) error {
+	ips, err := resolve(ctx, fqdn)
+	if err != nil {
+		// DNS failure must not hide FQDN-layer matches already collected.
+		return nil
+	}
+	out.ResolvedIPs = make([]string, 0, len(ips))
+	for _, ip := range ips {
+		out.ResolvedIPs = append(out.ResolvedIPs, ip.String())
+		if err := lookupIP(st, tenantID, ip, out, commByID, ip.String()); err != nil {
+			return err
+		}
+	}
+	return nil
+}
+
+func lookupIP(
+	st store.Backend,
+	tenantID string,
+	addr netip.Addr,
+	out *Result,
+	commByID map[string]*store.Community,
+	resolvedIP string,
+) error {
+	for _, mod := range st.ListModules(tenantID) {
+		if mod == nil {
+			continue
+		}
+		if mod.Type == "IP_RANGES" {
+			entries, err := st.ListIPRangeEntries(tenantID, mod.ID)
+			if err != nil {
+				return err
+			}
+			for _, e := range entries {
+				if e == nil {
+					continue
+				}
+				pfx, err := netip.ParsePrefix(strings.TrimSpace(e.Prefix))
+				if err != nil {
+					continue
+				}
+				if !pfx.Contains(addr) {
+					continue
+				}
+				out.Matches = append(out.Matches, decorateMatch(Match{
+					Layer:        LayerEntry,
+					ModuleID:     mod.ID,
+					ModuleName:   mod.Name,
+					ModuleType:   mod.Type,
+					MatchKind:    MatchIPRange,
+					MatchedValue: e.Prefix,
+					EntryID:      e.ID,
+					CommunityID:  resolveCommunityID(e.CommunityID, mod.DefaultCommunityID),
+					ResolvedIP:   resolvedIP,
+				}, commByID))
+			}
+		}
+
+		snap, ok, err := st.GetModulePrefixSnapshot(tenantID, mod.ID)
+		if err != nil {
+			return err
+		}
+		if !ok || snap == nil {
+			continue
+		}
+		for _, row := range snap.Prefixes {
+			pfx, err := netip.ParsePrefix(strings.TrimSpace(row.Prefix))
+			if err != nil {
+				continue
+			}
+			if !pfx.Contains(addr) {
+				continue
+			}
+			out.Matches = append(out.Matches, decorateMatch(Match{
+				Layer:        LayerSnapshot,
+				ModuleID:     mod.ID,
+				ModuleName:   mod.Name,
+				ModuleType:   mod.Type,
+				MatchKind:    MatchPrefix,
+				MatchedValue: row.Prefix,
+				Source:       row.Source,
+				CommunityID:  row.CommunityID,
+				ResolvedIP:   resolvedIP,
+			}, commByID))
+		}
+	}
+	return nil
+}
+
+func lookupDomain(st store.Backend, tenantID, fqdn string, out *Result, commByID map[string]*store.Community) error {
+	matchedModuleIDs := make(map[string]*store.Module)
+
+	for _, mod := range st.ListModules(tenantID) {
+		if mod == nil || mod.Type != "DOMAINS" {
+			continue
+		}
+		entries, err := st.ListDomainEntries(tenantID, mod.ID)
+		if err != nil {
+			return err
+		}
+		for _, e := range entries {
+			if e == nil {
+				continue
+			}
+			norm, ok := normalizeFQDN(e.FQDN)
+			if !ok || norm != fqdn {
+				continue
+			}
+			matchedModuleIDs[mod.ID] = mod
+			out.Matches = append(out.Matches, decorateMatch(Match{
+				Layer:        LayerEntry,
+				ModuleID:     mod.ID,
+				ModuleName:   mod.Name,
+				ModuleType:   mod.Type,
+				MatchKind:    MatchDomain,
+				MatchedValue: e.FQDN,
+				EntryID:      e.ID,
+				CommunityID:  resolveCommunityID(e.CommunityID, mod.DefaultCommunityID),
+			}, commByID))
+		}
+	}
+
+	for mid, mod := range matchedModuleIDs {
+		snap, ok, err := st.GetModulePrefixSnapshot(tenantID, mid)
+		if err != nil {
+			return err
+		}
+		if !ok || snap == nil {
+			continue
+		}
+		for _, row := range snap.Prefixes {
+			if !strings.EqualFold(strings.TrimSpace(row.Source), "domain") {
+				continue
+			}
+			out.Matches = append(out.Matches, decorateMatch(Match{
+				Layer:        LayerSnapshot,
+				ModuleID:     mid,
+				ModuleName:   mod.Name,
+				ModuleType:   mod.Type,
+				MatchKind:    MatchPrefix,
+				MatchedValue: row.Prefix,
+				Source:       row.Source,
+				CommunityID:  row.CommunityID,
+			}, commByID))
+		}
+	}
+	return nil
+}
+
+func resolveCommunityID(entryID, defaultID *string) *string {
+	if entryID != nil && strings.TrimSpace(*entryID) != "" {
+		return entryID
+	}
+	if defaultID != nil && strings.TrimSpace(*defaultID) != "" {
+		return defaultID
+	}
+	return nil
+}
+
+func decorateMatch(m Match, commByID map[string]*store.Community) Match {
+	if m.CommunityID == nil {
+		return m
+	}
+	c, ok := commByID[*m.CommunityID]
+	if !ok || c == nil {
+		return m
+	}
+	m.Community = c.Community
+	m.CommunityTitle = c.Title
+	return m
+}
+
+// normalizeFQDN lowercases, trims trailing dots, and validates a simple hostname shape.
+func normalizeFQDN(s string) (string, bool) {
+	s = strings.TrimSpace(s)
+	s = strings.TrimSuffix(s, ".")
+	s = strings.ToLower(s)
+	if s == "" || len(s) > 253 {
+		return "", false
+	}
+	if strings.ContainsAny(s, " /\\\t\n") {
+		return "", false
+	}
+	if _, err := netip.ParseAddr(s); err == nil {
+		return "", false
+	}
+	labels := strings.Split(s, ".")
+	if len(labels) < 2 {
+		return "", false
+	}
+	for _, label := range labels {
+		if label == "" || len(label) > 63 {
+			return "", false
+		}
+		if label[0] == '-' || label[len(label)-1] == '-' {
+			return "", false
+		}
+		for _, r := range label {
+			if unicode.IsLetter(r) || unicode.IsDigit(r) || r == '-' {
+				continue
+			}
+			return "", false
+		}
+	}
+	return s, true
+}

internal/lookup/lookup_test.go

@@ -0,0 +1,262 @@
+package lookup
+
+import (
+	"context"
+	"errors"
+	"net/netip"
+	"testing"
+
+	"evobgp/internal/store"
+)
+
+func TestLookupIPEntryAndSnapshot(t *testing.T) {
+	m := store.NewMemory()
+	m.SeedDemo()
+	tenant, _, modIP, _, _ := m.DemoIDs()
+
+	cid := ""
+	comms, err := m.ListCommunities(tenant)
+	if err != nil || len(comms) == 0 {
+		t.Fatal("expected demo community")
+	}
+	cid = comms[0].ID
+
+	def := cid
+	if _, err := m.UpdateModule(tenant, modIP, &store.ModulePatch{DefaultCommunityID: &def}); err != nil {
+		t.Fatal(err)
+	}
+
+	entryComm := cid
+	e, err := m.CreateIPRangeEntry(tenant, modIP, &store.IPRangeEntry{
+		Prefix:      "203.0.113.0/24",
+		CommunityID: &entryComm,
+	})
+	if err != nil {
+		t.Fatal(err)
+	}
+
+	if err := m.SetModulePrefixSnapshot(tenant, modIP, "hash1", []store.PrefixRow{
+		{Prefix: "203.0.113.0/24", CommunityID: &cid, Source: "ip_range"},
+	}); err != nil {
+		t.Fatal(err)
+	}
+
+	res, err := Lookup(context.Background(), m, tenant, "203.0.113.10")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if res.QueryKind != KindIP || res.Normalized != "203.0.113.10" {
+		t.Fatalf("kind/normalized: %+v", res)
+	}
+	if !res.Matched || res.MatchCount < 2 {
+		t.Fatalf("expected entry+snapshot matches, got %+v", res)
+	}
+
+	var entryHit, snapHit bool
+	for _, hit := range res.Matches {
+		if hit.Layer == LayerEntry && hit.EntryID == e.ID {
+			entryHit = true
+			if hit.Community != "demo-comm" || hit.CommunityTitle != "Demo" {
+				t.Fatalf("entry community: %+v", hit)
+			}
+		}
+		if hit.Layer == LayerSnapshot && hit.MatchedValue == "203.0.113.0/24" {
+			snapHit = true
+		}
+	}
+	if !entryHit || !snapHit {
+		t.Fatalf("missing layers entry=%v snap=%v matches=%+v", entryHit, snapHit, res.Matches)
+	}
+}
+
+func TestLookupIPCommunityFallback(t *testing.T) {
+	m := store.NewMemory()
+	m.SeedDemo()
+	tenant, _, modIP, _, _ := m.DemoIDs()
+	comms, _ := m.ListCommunities(tenant)
+	cid := comms[0].ID
+	if _, err := m.UpdateModule(tenant, modIP, &store.ModulePatch{DefaultCommunityID: &cid}); err != nil {
+		t.Fatal(err)
+	}
+	if _, err := m.CreateIPRangeEntry(tenant, modIP, &store.IPRangeEntry{Prefix: "10.0.0.0/8"}); err != nil {
+		t.Fatal(err)
+	}
+
+	res, err := Lookup(context.Background(), m, tenant, "10.1.2.3")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if !res.Matched {
+		t.Fatal("expected match")
+	}
+	found := false
+	for _, hit := range res.Matches {
+		if hit.Layer == LayerEntry {
+			found = true
+			if hit.CommunityID == nil || *hit.CommunityID != cid {
+				t.Fatalf("expected default community, got %+v", hit)
+			}
+			if hit.Community != "demo-comm" {
+				t.Fatalf("community value: %+v", hit)
+			}
+		}
+	}
+	if !found {
+		t.Fatal("no entry match")
+	}
+}
+
+func TestLookupDomainEntryAndSnapshot(t *testing.T) {
+	m := store.NewMemory()
+	m.SeedDemo()
+	tenant, _, _, _, _ := m.DemoIDs()
+
+	mod, err := m.CreateModule(tenant, &store.Module{
+		Type:    "DOMAINS",
+		Name:    "demo-domains",
+		Enabled: true,
+	})
+	if err != nil {
+		t.Fatal(err)
+	}
+	comms, _ := m.ListCommunities(tenant)
+	cid := comms[0].ID
+
+	e, err := m.CreateDomainEntry(tenant, mod.ID, &store.DomainEntry{
+		FQDN:        "Example.COM.",
+		CommunityID: &cid,
+	})
+	if err != nil {
+		t.Fatal(err)
+	}
+	if err := m.SetModulePrefixSnapshot(tenant, mod.ID, "hash-d", []store.PrefixRow{
+		{Prefix: "198.51.100.1/32", CommunityID: &cid, Source: "domain"},
+		{Prefix: "203.0.113.9/32", CommunityID: &cid, Source: "other"},
+	}); err != nil {
+		t.Fatal(err)
+	}
+
+	noDNS := func(context.Context, string) ([]netip.Addr, error) { return nil, nil }
+	res, err := LookupWithResolver(context.Background(), m, tenant, "example.com", noDNS)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if res.QueryKind != KindDomain || res.Normalized != "example.com" {
+		t.Fatalf("kind/normalized: %+v", res)
+	}
+	if !res.Matched {
+		t.Fatal("expected match")
+	}
+
+	var entryHit, snapHit, otherSnap bool
+	for _, hit := range res.Matches {
+		if hit.Layer == LayerEntry && hit.EntryID == e.ID {
+			entryHit = true
+		}
+		if hit.Layer == LayerSnapshot && hit.MatchedValue == "198.51.100.1/32" {
+			snapHit = true
+		}
+		if hit.MatchedValue == "203.0.113.9/32" {
+			otherSnap = true
+		}
+	}
+	if !entryHit || !snapHit {
+		t.Fatalf("entry=%v snap=%v matches=%+v", entryHit, snapHit, res.Matches)
+	}
+	if otherSnap {
+		t.Fatal("non-domain snapshot source should be excluded")
+	}
+}
+
+func TestLookupDomainResolvedIPAgainstRanges(t *testing.T) {
+	m := store.NewMemory()
+	m.SeedDemo()
+	tenant, _, modIP, _, _ := m.DemoIDs()
+	comms, _ := m.ListCommunities(tenant)
+	cid := comms[0].ID
+	if _, err := m.UpdateModule(tenant, modIP, &store.ModulePatch{DefaultCommunityID: &cid}); err != nil {
+		t.Fatal(err)
+	}
+	if _, err := m.CreateIPRangeEntry(tenant, modIP, &store.IPRangeEntry{
+		Prefix:      "203.0.113.0/24",
+		CommunityID: &cid,
+	}); err != nil {
+		t.Fatal(err)
+	}
+	if err := m.SetModulePrefixSnapshot(tenant, modIP, "hash-r", []store.PrefixRow{
+		{Prefix: "203.0.113.0/24", CommunityID: &cid, Source: "ip_range"},
+	}); err != nil {
+		t.Fatal(err)
+	}
+
+	fake := func(_ context.Context, host string) ([]netip.Addr, error) {
+		if host != "google.com" {
+			t.Fatalf("unexpected host %q", host)
+		}
+		return []netip.Addr{netip.MustParseAddr("203.0.113.50")}, nil
+	}
+
+	res, err := LookupWithResolver(context.Background(), m, tenant, "google.com", fake)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if res.QueryKind != KindDomain {
+		t.Fatalf("kind: %+v", res)
+	}
+	if len(res.ResolvedIPs) != 1 || res.ResolvedIPs[0] != "203.0.113.50" {
+		t.Fatalf("resolved_ips: %+v", res.ResolvedIPs)
+	}
+	if !res.Matched {
+		t.Fatalf("expected IP membership via resolve, got %+v", res)
+	}
+	var viaResolve bool
+	for _, hit := range res.Matches {
+		if hit.ResolvedIP == "203.0.113.50" && hit.MatchedValue == "203.0.113.0/24" {
+			viaResolve = true
+		}
+	}
+	if !viaResolve {
+		t.Fatalf("missing resolved-ip match: %+v", res.Matches)
+	}
+}
+
+func TestLookupNoMatch(t *testing.T) {
+	m := store.NewMemory()
+	m.SeedDemo()
+	tenant, _, _, _, _ := m.DemoIDs()
+
+	res, err := Lookup(context.Background(), m, tenant, "192.0.2.1")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if res.Matched || res.MatchCount != 0 || len(res.Matches) != 0 {
+		t.Fatalf("expected empty: %+v", res)
+	}
+}
+
+func TestLookupInvalid(t *testing.T) {
+	m := store.NewMemory()
+	m.SeedDemo()
+	tenant, _, _, _, _ := m.DemoIDs()
+	ctx := context.Background()
+
+	_, err := Lookup(ctx, m, tenant, "")
+	if !errors.Is(err, store.ErrInvalidInput) {
+		t.Fatalf("empty: %v", err)
+	}
+	_, err = Lookup(ctx, m, tenant, "not a host")
+	if !errors.Is(err, store.ErrInvalidInput) {
+		t.Fatalf("spaces: %v", err)
+	}
+	_, err = Lookup(ctx, m, tenant, "localhost")
+	if !errors.Is(err, store.ErrInvalidInput) {
+		t.Fatalf("single label: %v", err)
+	}
+}
+
+func TestNormalizeFQDN(t *testing.T) {
+	got, ok := normalizeFQDN(" Example.COM. ")
+	if !ok || got != "example.com" {
+		t.Fatalf("got %q ok=%v", got, ok)
+	}
+}

packages/ui/src/components/sidebar.tsx

@@ -25,7 +25,7 @@ import { PanelLeftIcon } from "lucide-react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "240px"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"

web-legacy-svelte/.gitignore

@@ -14,6 +14,7 @@ Thumbs.db
 
 # Env
 .env
+.env.local
 .env.*
 !.env.example
 !.env.test