refactor(web): unify settings navigation and update tab structure

Refactored the settings components to unify navigation between UI and BIRD settings. Updated tab structures to streamline access and improve user experience. Adjusted routing and search parameters to reflect the new tab organization, ensuring a cohesive interface. Removed legacy tenant settings references and enhanced the settings page layout for clarity and usability.

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

@@ -49,7 +49,8 @@ export function AccessApiKeysCard({
     <>
       <FrameDataGrid
         title="API-ключи"
-        description="Управление ключами tenant. Полный токен показывается только при создании и ротации."
+        description="Полный токен показывается только при создании и ротации."
+        className="min-w-0"
         actions={
           <>
             <Button size="sm" variant="outline" type="button" onClick={onRetry} disabled={isLoading}>

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

@@ -11,6 +11,7 @@ import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { formatApiKeyDate } from '@/lib/access/api-key-labels'
+import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { ApiKey } from '@/types/api'
 
@@ -34,7 +35,14 @@ export function AccessApiKeysGrid({
       {
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={row.original.name} accent="primary" />,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell
+            title={row.original.name}
+            accent="primary"
+            subtitle={`${row.original.prefix}…`}
+          />
+        ),
+        minSize: 160,
         meta: { headerTitle: 'Имя' },
       },
       {
@@ -45,14 +53,6 @@ export function AccessApiKeysGrid({
         ),
         meta: { headerTitle: 'Роль' },
       },
-      {
-        accessorKey: 'prefix',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Префикс" />,
-        cell: ({ row }) => (
-          <span className="font-mono text-xs text-muted-foreground">{row.original.prefix}…</span>
-        ),
-        meta: { headerTitle: 'Префикс' },
-      },
       {
         id: 'status',
         enableSorting: false,
@@ -77,11 +77,11 @@ export function AccessApiKeysGrid({
       {
         id: 'last_used_at',
         accessorFn: (row) => row.last_used_at ?? '',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Последнее использование" />,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Использован" />,
         cell: ({ row }) => (
           <DataGridMutedCell>{formatApiKeyDate(row.original.last_used_at)}</DataGridMutedCell>
         ),
-        meta: { headerTitle: 'Последнее использование' },
+        meta: { headerTitle: 'Использован' },
       },
       {
         id: 'actions',
@@ -90,7 +90,7 @@ export function AccessApiKeysGrid({
         cell: ({ row }) => {
           const k = row.original
           return (
-            <div className="flex gap-1">
+            <div className="flex shrink-0 gap-1">
               <ConfirmDialog
                 trigger={
                   <Button
@@ -149,6 +149,7 @@ export function AccessApiKeysGrid({
       recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет ключей"
+      tableLayout={DATA_GRID_DENSE_LAYOUT}
       searchValue={globalFilter}
       onSearchChange={setGlobalFilter}
       searchPlaceholder="Поиск API-ключей…"

apps/web/src/components/analytics/chart-donut-metric.tsx

@@ -2,6 +2,8 @@ import { Cell, Label, Pie, PieChart } from 'recharts'
 
 import {
   ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
   type ChartConfig,
 } from '@evobgp/ui/components/chart'
 import { cn } from '@evobgp/ui/lib/utils'
@@ -43,6 +45,7 @@ export function ChartDonutMetric({
     <div className={cn('flex flex-col items-center justify-start gap-4 sm:flex-row sm:gap-6', className)}>
       <ChartContainer config={chartConfig} className="mx-0 aspect-square h-44 w-44 shrink-0">
         <PieChart>
+          <ChartTooltip content={<ChartTooltipContent nameKey="label" hideLabel />} />
           <Pie
             data={data}
             dataKey="count"

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

@@ -41,14 +41,17 @@ export function BadgeTabs({
       defaultValue={defaultValue}
       onValueChange={onValueChange}
       orientation="horizontal"
-      className={cn('w-full', className)}
+      className={cn('w-full min-w-0', className)}
     >
       <TabsList
         variant="line"
-        className={cn('mb-3.5 w-full justify-start gap-6', listClassName)}
+        className={cn(
+          'mb-3.5 w-full min-w-0 justify-start gap-4',
+          listClassName,
+        )}
       >
         {items.map((item) => (
-          <TabsTrigger key={item.value} value={item.value} className="gap-2">
+          <TabsTrigger key={item.value} value={item.value} className="shrink-0 gap-2">
             {item.icon}
             {item.label}
             {item.count !== undefined ? (

apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx

@@ -3,13 +3,16 @@ import { useMemo, useState } from 'react'
 import { ChartDonutMetric } from '@/components/analytics/chart-donut-metric'
 import { AnalyticsSegmentControl } from '@/components/analytics/analytics-segment-control'
 import { PanelCard } from '@/components/panel-card'
-import { Separator } from '@evobgp/ui/components/separator'
 import { jobStatusBreakdown, moduleTypeBreakdown } from '@/lib/metrics'
 import type { JobRow, ModuleRow } from '@/types/api'
 
 type FlowMode = 'jobs' | 'modules'
 
-/** chart-13 inspired donut breakdown (Card surface). */
+/**
+ * Donut distribution — chart-27 DNA: Frame + one legend (inside ChartDonutMetric).
+ * @see https://reui.io/preview/base/chart-27
+ * @see https://reui.io/docs/components/base/frame
+ */
 export function DashboardOperationsBreakdown({
   jobs,
   modules,
@@ -32,7 +35,7 @@ export function DashboardOperationsBreakdown({
   return (
     <PanelCard
       title="Поток операций"
-      description="Распределение задач и типов модулей"
+      description="Доли статусов задач или типов модулей"
       actions={
         <AnalyticsSegmentControl
           value={mode}
@@ -43,45 +46,16 @@ export function DashboardOperationsBreakdown({
           ]}
         />
       }
-      className="h-full"
+      className="min-w-0"
+      contentClassName="px-5 py-4"
     >
-      <div className="p-4">
-        {loading ? (
-          <div className="text-muted-foreground flex h-48 items-center justify-center text-sm">
-            Загрузка…
-          </div>
-        ) : (
-          <>
-            <ChartDonutMetric slices={slices} centerLabel={centerLabel} centerValue={total} />
-            {slices.length > 0 ? (
-              <ul className="mt-4 flex min-w-0 flex-col">
-                {slices.map((slice, index) => {
-                  const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
-                  return (
-                    <li key={slice.key}>
-                      <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 py-2">
-                        <div className="flex min-w-0 items-center gap-2.5">
-                          <span
-                            aria-hidden
-                            className="border-background size-3 shrink-0 rounded-full border-2 shadow-sm"
-                            style={{ backgroundColor: slice.color }}
-                          />
-                          <span className="truncate text-sm font-medium">{slice.label}</span>
-                        </div>
-                        <span className="text-sm font-medium tabular-nums">{slice.count}</span>
-                        <span className="text-muted-foreground/70 w-10 text-right text-xs tabular-nums">
-                          {pct}%
-                        </span>
-                      </div>
-                      {index < slices.length - 1 ? <Separator className="w-auto" /> : null}
-                    </li>
-                  )
-                })}
-              </ul>
-            ) : null}
-          </>
-        )}
-      </div>
+      {loading ? (
+        <div className="text-muted-foreground flex h-44 items-center justify-center text-sm">
+          Загрузка…
+        </div>
+      ) : (
+        <ChartDonutMetric slices={slices} centerLabel={centerLabel} centerValue={total} />
+      )}
     </PanelCard>
   )
 }

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

@@ -2,7 +2,7 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridShell } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
@@ -49,7 +49,7 @@ export function DashboardRecentJobsGrid({
     [nameById],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
+  const { table, filteredCount } = useClientDataGrid({
     data,
     columns,
     getSearchText: (row) => {
@@ -63,16 +63,13 @@ export function DashboardRecentJobsGrid({
   })
 
   return (
-    <DataGridSection
+    <DataGridShell
       table={table}
       recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет задач"
       showPagination={false}
       tableLayout={DATA_GRID_DENSE_LAYOUT}
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск задач…"
     />
   )
 }

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

@@ -2,7 +2,7 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridShell } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
@@ -42,7 +42,7 @@ export function DashboardRecentRevisionsGrid({
     [],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
+  const { table, filteredCount } = useClientDataGrid({
     data,
     columns,
     getSearchText: (row) => row.id,
@@ -51,16 +51,13 @@ export function DashboardRecentRevisionsGrid({
   })
 
   return (
-    <DataGridSection
+    <DataGridShell
       table={table}
       recordCount={filteredCount}
       isLoading={isLoading}
       emptyMessage="Нет ревизий"
       showPagination={false}
       tableLayout={DATA_GRID_DENSE_LAYOUT}
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск ревизий…"
     />
   )
 }

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

@@ -50,7 +50,7 @@ export function DataGridShell<TData extends object>({
       loadingMessage={DATA_GRID_MESSAGES_RU.loadingMessage}
       tableLayout={tableLayout}
       tableClassNames={DATA_GRID_TABLE_CLASS_NAMES}
-      className={className}
+      className={cn('min-w-0', className)}
       onRowClick={onRowClick}
     >
       <DataGridContainer border={false}>

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

@@ -8,7 +8,6 @@ import {
   Settings,
   BookText,
   KeyRound,
-  ServerCog,
   Search,
 } from 'lucide-react'
 
@@ -97,8 +96,7 @@ const NAV_GROUPS: NavGroup[] = [
     label: 'Система',
     items: [
       { to: '/access', label: 'Доступ', icon: KeyRound, description: 'API-ключи' },
-      { to: '/tenant-settings', label: 'Настройки BIRD', icon: ServerCog, description: 'Tenant BIRD config' },
-      { to: '/settings', label: 'Настройки UI', icon: Settings, description: 'Токен и подключение', search: { tab: 'connection' } },
+      { to: '/settings', label: 'Настройки', icon: Settings, description: 'UI и BIRD', search: { tab: 'ui' } },
     ],
   },
 ]

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

@@ -91,7 +91,7 @@ export function AppsMenu() {
           ) : (
             <DropdownMenuItem
               nativeButton={false}
-              render={<Link to="/settings" search={{ tab: 'connection' }} />}
+              render={<Link to="/settings" search={{ tab: 'ui' }} />}
               className="justify-center text-sm font-medium"
             >
               Настройки

apps/web/src/components/layout/nav-user.tsx

@@ -136,7 +136,7 @@ export function NavUser() {
     setApiToken(null)
     if (typeof window !== 'undefined') {
       window.localStorage.removeItem(TOKEN_STORAGE_KEY)
-      window.location.assign('/settings?tab=connection&reason=token-required')
+      window.location.assign('/settings?tab=ui&reason=token-required')
     }
   }
 
@@ -190,10 +190,10 @@ export function NavUser() {
             <DropdownMenuGroup>
               <DropdownMenuItem
                 nativeButton={false}
-                render={<Link to="/settings" search={{ tab: 'connection' }} />}
+                render={<Link to="/settings" search={{ tab: 'ui' }} />}
               >
                 <SettingsIcon aria-hidden />
-                Настройки UI
+                Настройки
               </DropdownMenuItem>
               {authOn ? (
                 <DropdownMenuItem

apps/web/src/components/page-header.tsx

@@ -8,12 +8,16 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, description, actions }: PageHeaderProps) {
   return (
-    <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-      <div className="flex flex-col gap-1">
+    <div className="flex min-w-0 flex-col gap-2 md:flex-row md:items-start md:justify-between">
+      <div className="flex min-w-0 flex-col gap-1">
         <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+        {description ? (
+          <p className="text-muted-foreground max-w-prose text-sm break-words">{description}</p>
+        ) : null}
       </div>
-      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div>
+      ) : null}
     </div>
   )
 }

apps/web/src/components/reui-kit/frame-data-grid.tsx

@@ -29,10 +29,10 @@ export function FrameDataGrid({
 }) {
   const hasHeader = Boolean(title || description || actions)
   return (
-    <Frame dense spacing="sm" className={cn('w-full gap-0 p-0', className)}>
+    <Frame dense spacing="sm" className={cn('w-full min-w-0 gap-0 p-0', className)}>
       <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
         {hasHeader ? (
-          <FrameHeader className="flex-row items-start justify-between gap-3 border-b">
+          <FrameHeader className="flex-col items-stretch gap-3 border-b sm:flex-row sm:items-start sm:justify-between">
             <div className="flex min-w-0 flex-1 flex-col gap-px">
               {title ? <FrameTitle>{title}</FrameTitle> : null}
               {description ? (

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

@@ -24,4 +24,4 @@ export { QuickActionGrid, type QuickActionItem } from './quick-action-grid'
 export { OpsDashboard } from './ops-dashboard'
 export { FrameDataGrid } from './frame-data-grid'
 export { DetailPanel, type DetailMetricCard } from './detail-panel'
-export { SettingsShell, type SettingsTabConfig } from './settings-shell'
+export { SettingsShell } from './settings-shell'

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

@@ -305,7 +305,7 @@ export function KpiStatGrid({
   }
 
   return (
-    <Frame className={cn('@container w-full', className)} aria-label={ariaLabel}>
+    <Frame className={cn('@container w-full min-w-0', 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} />

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

@@ -1,11 +1,4 @@
 import type { ReactNode } from 'react'
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 import { PageHeader } from '@/components/page-header'
 import { KpiStatGrid, type KpiStatCardData } from './kpi-stat-grid'
@@ -47,9 +40,11 @@ function OpsDashboardSkeleton() {
 }
 
 /**
- * Ops dashboard: KPI → optional Quick Actions → charts → attention queue.
+ * Ops dashboard: KPI → optional Quick Actions → charts → queue.
+ * Queue is a sibling Frame grid — never wrap FrameDataGrid inside another Frame.
  * @see https://reui.io/preview/base/dashboard-1
  * @see https://reui.io/preview/base/stats-12
+ * @see https://reui.io/docs/components/base/frame
  */
 export function OpsDashboard({
   title = 'Панель управления',
@@ -77,21 +72,18 @@ export function OpsDashboard({
 
       {afterKpi ? <section aria-label="Быстрые действия">{afterKpi}</section> : null}
 
-      <section
-        aria-label="Аналитика"
-        className="flex min-w-0 flex-col gap-4"
-      >
+      <section aria-label="Аналитика" className="flex min-w-0 flex-col gap-4">
         {charts}
       </section>
 
-      <section aria-label={queueTitle}>
-        <Frame dense spacing="sm" className="w-full min-w-0">
-          <FrameHeader>
-            <FrameTitle>{queueTitle}</FrameTitle>
-            <FrameDescription>{queueDescription}</FrameDescription>
-          </FrameHeader>
-          <FramePanel>{queue}</FramePanel>
-        </Frame>
+      <section aria-label={queueTitle} className="flex min-w-0 flex-col gap-4">
+        <div className="flex min-w-0 flex-col gap-1">
+          <h2 className="text-sm font-semibold tracking-tight">{queueTitle}</h2>
+          {queueDescription ? (
+            <p className="text-muted-foreground max-w-prose text-sm">{queueDescription}</p>
+          ) : null}
+        </div>
+        {queue}
       </section>
     </div>
   )

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

@@ -1,125 +1,17 @@
-import type { ReactNode } from 'react'
-import { Link, Outlet, useRouterState } from '@tanstack/react-router'
-import { ServerCogIcon, SettingsIcon } from 'lucide-react'
+import { Outlet } from '@tanstack/react-router'
 
-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'
-
-export interface SettingsTabConfig {
-  id: string
-  to: '/settings' | '/tenant-settings'
-  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[]
-}
 
 /**
- * Settings shell — Frame surface, no hairline Separator under header.
- * @see https://reui.io/preview/base/settings-16
- * @see https://reui.io/preview/base/settings-3
+ * Settings layout — page chrome only.
+ * Side-tab rail lives in `SettingsPageShell` (settings-7 AccountSettings).
+ * @see https://reui.io/preview/base/settings-7
+ * @see https://reui.io/blocks
  */
-export function SettingsShell({
-  title = 'Настройки',
-  description,
-  tabs = DEFAULT_TABS,
-}: SettingsShellProps) {
-  const isMobile = useIsMobile()
-  const pathname = useRouterState({ select: (s) => s.location.pathname })
-  const headerDescription =
-    description ??
-    (pathname.startsWith('/tenant-settings')
-      ? 'Глобальные параметры BIRD и плоскости управления'
-      : 'Подключение UI и параметры плоскости управления')
-
+export function SettingsShell() {
   return (
     <PageShell>
-      <div className="mx-auto flex w-full max-w-4xl flex-col gap-5">
-        <PageHeader title={title} description={headerDescription} />
-
-        <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)
-                const 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',
-                )
-                if (tab.to === '/tenant-settings') {
-                  return (
-                    <Link
-                      key={tab.id}
-                      to="/tenant-settings"
-                      search={{ tab: 'bird' }}
-                      aria-current={isActive ? 'page' : undefined}
-                      className={className}
-                    >
-                      {tab.icon}
-                      {tab.label}
-                    </Link>
-                  )
-                }
-                return (
-                  <Link
-                    key={tab.id}
-                    to="/settings"
-                    search={{ tab: 'connection' }}
-                    aria-current={isActive ? 'page' : undefined}
-                    className={className}
-                  >
-                    {tab.icon}
-                    {tab.label}
-                  </Link>
-                )
-              })}
-            </nav>
-          ) : null}
-
-          <div className="min-w-0 flex-1">
-            <Outlet />
-          </div>
-        </div>
-      </div>
+      <Outlet />
     </PageShell>
   )
 }

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

@@ -44,7 +44,7 @@ export function AppearanceSettingsTab() {
   })
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
       <SettingsCard
         title="Тема интерфейса"
         description="Быстрый переключатель также доступен в боковой панели"
@@ -61,6 +61,7 @@ export function AppearanceSettingsTab() {
                 мгновенно
               </Badge>
             }
+            stacked
             last
           >
             <ToggleGroup
@@ -72,7 +73,7 @@ export function AppearanceSettingsTab() {
               variant="outline"
               size="sm"
               aria-label="Тема интерфейса"
-              className="w-full sm:w-auto"
+              className="w-full min-w-0"
             >
               {THEME_OPTIONS.map((option) => {
                 const Icon = option.icon

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

@@ -0,0 +1,341 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Save } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Input } from '@evobgp/ui/components/input'
+import { FrameDataGrid } from '@/components/reui-kit'
+import { SelectMenu } from '@/components/select-field'
+import { SettingsCard } from '@/components/settings/settings-card'
+import { SettingsFieldGroup } from '@/components/settings/settings-field-group'
+import { SettingsKvGrid } from '@/components/settings/settings-kv-grid'
+import { SettingsSettingField } from '@/components/settings/settings-setting-field'
+import { QueryState } from '@/components/query-state'
+import { LoadingButton } from '@/components/loading-button'
+
+import {
+  BIRD_SETTING_KEYS,
+  REVISION_SETTING_KEYS,
+  RUNTIME_LOGS_SETTING_KEYS,
+  buildPayload,
+  partitionSettings,
+  settingsKeys,
+  settingsQueryOptions,
+  type BirdSettingKey,
+} from '@/queries/settings'
+import { apiMutate } from '@/lib/api-client'
+
+const RUNTIME_LOGS_ENABLED_ITEMS = [
+  { value: 'true', label: 'Вкл' },
+  { value: 'false', label: 'Выкл' },
+] as const
+
+const RUNTIME_LOGS_MODE_ITEMS = [
+  { value: 'truncate', label: 'обнулить (truncate)' },
+  { value: 'delete', label: 'удалить файл (delete)' },
+] as const
+
+const BIRD_LABELS: Record<BirdSettingKey, string> = {
+  bird_router_id: 'Router ID',
+  bird_local_ipv4: 'Локальный IPv4',
+  bird_local_ipv6: 'Локальный IPv6',
+  bird_local_asn: 'Локальный ASN',
+  bird_bgp_source_ipv4: 'BGP source IPv4',
+  bird_bgp_source_ipv6: 'BGP source IPv6',
+  peer_discovery_enabled: 'Автообнаружение пиров',
+  peer_discovery_ranges_v4: 'Discovery CIDR IPv4',
+  peer_discovery_ranges_v6: 'Discovery CIDR IPv6',
+  peer_discovery_require_external: 'Только external ASN',
+}
+
+const BIRD_BOOL_ITEMS = [
+  { value: 'true', label: 'Вкл' },
+  { value: 'false', label: 'Выкл' },
+] as const
+
+const BIRD_HINTS: Partial<Record<BirdSettingKey, string>> = {
+  peer_discovery_enabled:
+    'Dynamic neighbor range в BIRD (карантин import/export none). Требует CIDR.',
+  peer_discovery_ranges_v4: 'Через запятую или пробел, напр. 198.51.100.0/24 203.0.113.0/24',
+  peer_discovery_ranges_v6: 'Опционально, напр. 2001:db8::/32',
+  peer_discovery_require_external: 'neighbor range … external (любой чужой ASN)',
+}
+
+export function BirdSettingsTab() {
+  const settingsQ = useQuery(settingsQueryOptions())
+  const qc = useQueryClient()
+
+  const partitioned = settingsQ.data ? partitionSettings(settingsQ.data) : null
+
+  const [birdForm, setBirdForm] = useState<Record<string, string>>({})
+  const [revisionForm, setRevisionForm] = useState<Record<string, string>>({})
+  const [runtimeLogsForm, setRuntimeLogsForm] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    if (partitioned) {
+      setBirdForm({ ...partitioned.bird })
+      setRevisionForm({ ...partitioned.revision })
+      setRuntimeLogsForm({ ...partitioned.runtimeLogs })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settingsQ.data])
+
+  const patchMutation = useMutation({
+    mutationFn: (payload: Record<string, string | number | boolean>) =>
+      apiMutate('/v1/settings', 'PATCH', payload),
+    onSuccess: () => {
+      toast.success('Параметры сохранены')
+      void qc.invalidateQueries({ queryKey: settingsKeys.all })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось сохранить'),
+  })
+
+  function saveBird() {
+    patchMutation.mutate(buildPayload(BIRD_SETTING_KEYS, birdForm))
+  }
+  function saveRevision() {
+    patchMutation.mutate(buildPayload(REVISION_SETTING_KEYS, revisionForm))
+  }
+  function saveRuntimeLogs() {
+    patchMutation.mutate(buildPayload(RUNTIME_LOGS_SETTING_KEYS, runtimeLogsForm))
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <SettingsCard
+        title="BIRD control plane"
+        description="Глобальные параметры BIRD для pipeline refresh/apply. Сохранение — роль operator."
+        footer={
+          <LoadingButton onClick={saveBird} loading={patchMutation.isPending}>
+            <Save />
+            Сохранить
+          </LoadingButton>
+        }
+      >
+        <QueryState
+          data={partitioned}
+          isLoading={settingsQ.isLoading}
+          isError={settingsQ.isError}
+          error={settingsQ.error}
+          skeleton={<div className="h-64" />}
+          onRetry={() => settingsQ.refetch()}
+        >
+          {() => (
+            <SettingsFieldGroup
+              legend="BIRD"
+              description="Параметры демона и автообнаружения пиров."
+            >
+              {BIRD_SETTING_KEYS.map((key, index) => (
+                <SettingsSettingField
+                  key={key}
+                  title={BIRD_LABELS[key]}
+                  description={BIRD_HINTS[key]}
+                  labelFor={key}
+                  badge={{ label: 'BIRD', variant: 'info-light' }}
+                  stacked
+                  last={index === BIRD_SETTING_KEYS.length - 1}
+                >
+                  {key === 'peer_discovery_enabled' ||
+                  key === 'peer_discovery_require_external' ? (
+                    <SelectMenu
+                      id={key}
+                      items={[...BIRD_BOOL_ITEMS]}
+                      value={birdForm[key] || 'false'}
+                      onValueChange={(v) =>
+                        setBirdForm((s) => ({ ...s, [key]: v || 'false' }))
+                      }
+                      placeholder="Выкл"
+                    />
+                  ) : (
+                    <Input
+                      id={key}
+                      className="w-full min-w-0"
+                      value={birdForm[key] ?? ''}
+                      onChange={(e) =>
+                        setBirdForm((s) => ({ ...s, [key]: e.target.value }))
+                      }
+                      placeholder={BIRD_LABELS[key]}
+                    />
+                  )}
+                </SettingsSettingField>
+              ))}
+            </SettingsFieldGroup>
+          )}
+        </QueryState>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Ревизии"
+        description="Время хранения ревизий в БД"
+        footer={
+          <LoadingButton onClick={saveRevision} loading={patchMutation.isPending}>
+            <Save />
+            Сохранить
+          </LoadingButton>
+        }
+      >
+        <QueryState
+          data={partitioned}
+          isLoading={settingsQ.isLoading}
+          isError={settingsQ.isError}
+          error={settingsQ.error}
+          skeleton={<div className="h-32" />}
+          onRetry={() => settingsQ.refetch()}
+        >
+          {() => (
+            <SettingsFieldGroup
+              legend="Retention"
+              description="Срок хранения ревизий в минутах."
+            >
+              <SettingsSettingField
+                title="Retention"
+                description="Сколько минут хранить ревизии конфигурации."
+                labelFor="revision_retention_minutes"
+                stacked
+                last
+              >
+                <Input
+                  id="revision_retention_minutes"
+                  type="number"
+                  className="w-full min-w-0"
+                  value={revisionForm.revision_retention_minutes ?? ''}
+                  onChange={(e) =>
+                    setRevisionForm((s) => ({
+                      ...s,
+                      revision_retention_minutes: e.target.value,
+                    }))
+                  }
+                />
+              </SettingsSettingField>
+            </SettingsFieldGroup>
+          )}
+        </QueryState>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Файловые логи"
+        description="Автоматическая очистка логов"
+        footer={
+          <LoadingButton onClick={saveRuntimeLogs} loading={patchMutation.isPending}>
+            <Save />
+            Сохранить
+          </LoadingButton>
+        }
+      >
+        <QueryState
+          data={partitioned}
+          isLoading={settingsQ.isLoading}
+          isError={settingsQ.isError}
+          error={settingsQ.error}
+          skeleton={<div className="h-48" />}
+          onRetry={() => settingsQ.refetch()}
+        >
+          {() => (
+            <SettingsFieldGroup
+              legend="Авто-очистка"
+              description="Расписание и лимиты файловых логов runtime."
+            >
+              <SettingsSettingField
+                title="Авто-очистка"
+                description="Включить периодическую очистку файловых логов."
+                stacked
+              >
+                <SelectMenu
+                  items={[...RUNTIME_LOGS_ENABLED_ITEMS]}
+                  value={runtimeLogsForm.runtime_logs_auto_enabled ?? 'false'}
+                  placeholder="Выберите"
+                  onValueChange={(v) =>
+                    v &&
+                    setRuntimeLogsForm((s) => ({
+                      ...s,
+                      runtime_logs_auto_enabled: v,
+                    }))
+                  }
+                />
+              </SettingsSettingField>
+              <SettingsSettingField
+                title="Макс. размер файла"
+                description="Порог в мегабайтах, после которого срабатывает очистка."
+                labelFor="runtime_logs_max_file_mb"
+                stacked
+              >
+                <Input
+                  id="runtime_logs_max_file_mb"
+                  type="number"
+                  className="w-full min-w-0"
+                  value={runtimeLogsForm.runtime_logs_max_file_mb ?? ''}
+                  onChange={(e) =>
+                    setRuntimeLogsForm((s) => ({
+                      ...s,
+                      runtime_logs_max_file_mb: e.target.value,
+                    }))
+                  }
+                />
+              </SettingsSettingField>
+              <SettingsSettingField
+                title="Расписание"
+                description="Cron-выражение для авто-очистки."
+                labelFor="runtime_logs_auto_schedule"
+                stacked
+              >
+                <Input
+                  id="runtime_logs_auto_schedule"
+                  className="w-full min-w-0"
+                  value={runtimeLogsForm.runtime_logs_auto_schedule ?? ''}
+                  onChange={(e) =>
+                    setRuntimeLogsForm((s) => ({
+                      ...s,
+                      runtime_logs_auto_schedule: e.target.value,
+                    }))
+                  }
+                />
+              </SettingsSettingField>
+              <SettingsSettingField
+                title="Режим очистки"
+                description="Обнулить файл или удалить его."
+                stacked
+                last
+              >
+                <SelectMenu
+                  items={[...RUNTIME_LOGS_MODE_ITEMS]}
+                  value={runtimeLogsForm.runtime_logs_auto_mode ?? ''}
+                  placeholder="Выберите"
+                  onValueChange={(v) =>
+                    v &&
+                    setRuntimeLogsForm((s) => ({
+                      ...s,
+                      runtime_logs_auto_mode: v,
+                    }))
+                  }
+                />
+              </SettingsSettingField>
+            </SettingsFieldGroup>
+          )}
+        </QueryState>
+      </SettingsCard>
+
+      <FrameDataGrid
+        title="Дополнительные параметры"
+        description="Параметры вне стандартных групп (только чтение — изменяются через API)"
+      >
+        <QueryState
+          data={partitioned?.additional ?? []}
+          isLoading={settingsQ.isLoading}
+          isError={settingsQ.isError}
+          error={settingsQ.error}
+          empty={(partitioned?.additional ?? []).length === 0}
+          emptyTitle="Нет дополнительных параметров"
+          skeleton={<div className="h-32" />}
+          onRetry={() => settingsQ.refetch()}
+        >
+          {(items) => (
+            <SettingsKvGrid
+              items={items}
+              isLoading={settingsQ.isFetching && !settingsQ.isLoading}
+            />
+          )}
+        </QueryState>
+      </FrameDataGrid>
+    </div>
+  )
+}

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

@@ -1,6 +1,6 @@
 import { Link, useNavigate } from '@tanstack/react-router'
 import { useQueryClient } from '@tanstack/react-query'
-import { Save } from 'lucide-react'
+import { KeyRound, Save } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
@@ -8,6 +8,7 @@ import { SettingRow } from '@/components/settings/setting-row'
 import { SettingsCard } from '@/components/settings/settings-card'
 import { SettingsFieldGroup } from '@/components/settings/settings-field-group'
 import { Badge } from '@/components/reui/badge'
+import { Alert, AlertDescription, AlertTitle } from '@/components/reui/alert'
 import { LoadingButton } from '@/components/loading-button'
 import {
   DEV_API_TOKEN,
@@ -16,7 +17,6 @@ import {
   TOKEN_STORAGE_KEY,
 } from '@/lib/api-client'
 import { authKeys } from '@/queries/auth'
-import { Alert, AlertDescription } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
 import { Input } from '@evobgp/ui/components/input'
 
@@ -50,12 +50,13 @@ export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolea
   }
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
       {tokenRequired ? (
-        <Alert>
+        <Alert variant="warning">
+          <KeyRound aria-hidden />
+          <AlertTitle>Нужен API-токен</AlertTitle>
           <AlertDescription>
-            Для доступа к разделу нужен API-токен. Сохраните токен ниже или нажмите «Использовать
-            dev».
+            Сохраните токен ниже или нажмите «Использовать dev».
           </AlertDescription>
         </Alert>
       ) : null}
@@ -64,7 +65,7 @@ export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolea
         title="Подключение к API"
         description="Токен хранится только в этом браузере (localStorage)"
         footer={
-          <div className="flex w-full flex-wrap justify-end gap-2">
+          <div className="flex w-full min-w-0 flex-wrap justify-end gap-2">
             <Button type="button" variant="outline" onClick={useDevToken}>
               Использовать dev
             </Button>
@@ -83,8 +84,7 @@ export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolea
             title="Токен для запросов"
             description={
               <>
-                Ключ для заголовка <code className="text-xs">Authorization</code>. Управление
-                ключами tenant — в разделе{' '}
+                Ключ для заголовка Authorization. Управление ключами tenant — в разделе{' '}
                 <Link to="/access" className="text-primary underline-offset-4 hover:underline">
                   Права доступа
                 </Link>
@@ -97,12 +97,14 @@ export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolea
               </Badge>
             }
             labelFor="settings-token"
+            stacked
             last
           >
             <Input
               id="settings-token"
               type="password"
               autoComplete="off"
+              className="w-full min-w-0"
               value={token}
               onChange={(e) => setTokenValue(e.target.value)}
               placeholder="dev или API-ключ"

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

@@ -23,7 +23,8 @@ import {
 const ADMIN_SECTIONS = [
   {
     id: 'tenant-settings',
-    to: '/tenant-settings' as const,
+    to: '/settings' as const,
+    search: { tab: 'bird' as const },
     title: 'Параметры арендатора',
     description: 'BIRD, ревизии, файловые логи и дополнительные ключи /v1/settings.',
     icon: <SlidersHorizontalIcon aria-hidden="true" />,
@@ -32,6 +33,7 @@ const ADMIN_SECTIONS = [
   {
     id: 'access',
     to: '/access' as const,
+    search: undefined,
     title: 'Права доступа',
     description: 'API-ключи tenant, роли и управление доступом.',
     icon: <KeyRoundIcon aria-hidden="true" />,
@@ -40,6 +42,7 @@ const ADMIN_SECTIONS = [
   {
     id: 'monitoring',
     to: '/monitoring' as const,
+    search: undefined,
     title: 'Мониторинг',
     description: 'Метрики, состояние jobs и observability control plane.',
     icon: <ActivityIcon aria-hidden="true" />,
@@ -49,7 +52,7 @@ const ADMIN_SECTIONS = [
 
 export function SectionsSettingsTab() {
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
       <SettingsCard
         title="Разделы control plane"
         description="Параметры tenant и операции — отдельно от настроек браузера"
@@ -58,7 +61,7 @@ export function SectionsSettingsTab() {
           {ADMIN_SECTIONS.map((section, index) => (
             <Fragment key={section.id}>
               {index > 0 ? <ItemSeparator className="my-0" /> : null}
-              <Item className="min-h-0 items-center gap-4 px-5 py-3.5">
+              <Item className="min-h-0 min-w-0 flex-wrap items-center gap-4 px-5 py-3.5">
                 <ItemMedia className="self-center!">
                   <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
                     {section.icon}
@@ -66,7 +69,7 @@ export function SectionsSettingsTab() {
                 </ItemMedia>
 
                 <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
-                  <ItemTitle className="gap-2 leading-5">
+                  <ItemTitle className="flex min-w-0 flex-wrap items-center gap-2 leading-5">
                     {section.title}
                     <Badge variant={section.badge.variant} size="xs">
                       {section.badge.label}
@@ -76,7 +79,17 @@ export function SectionsSettingsTab() {
                 </ItemContent>
 
                 <ItemActions className="shrink-0 justify-end self-center">
-                  <Button variant="outline" size="sm" render={<Link to={section.to} />}>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    render={
+                      section.to === '/settings' ? (
+                        <Link to="/settings" search={{ tab: 'bird' }} />
+                      ) : (
+                        <Link to={section.to} />
+                      )
+                    }
+                  >
                     Открыть
                   </Button>
                 </ItemActions>

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

@@ -35,7 +35,7 @@ export function SessionSettingsTab() {
   })
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
       <SettingsCard title="Текущая сессия" description="Проверка токена через GET /v1/auth/session">
         <QueryState
           data={sessionQ.data}
@@ -58,7 +58,7 @@ export function SessionSettingsTab() {
                 </ItemMedia>
 
                 <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
-                  <ItemTitle className="gap-2 leading-5">
+                  <ItemTitle className="flex min-w-0 flex-wrap items-center gap-2 leading-5">
                     Этот браузер
                     <Badge variant="success-light" size="xs">
                       Активна
@@ -66,7 +66,9 @@ export function SessionSettingsTab() {
                   </ItemTitle>
                   <ItemDescription className="leading-5">
                     Tenant:{' '}
-                    <code className="text-foreground font-mono text-xs">{session.tenant_id}</code>
+                    <code className="text-foreground font-mono text-xs break-all">
+                      {session.tenant_id}
+                    </code>
                   </ItemDescription>
                 </ItemContent>
               </Item>
@@ -94,12 +96,13 @@ export function SessionSettingsTab() {
                 </Badge>
               )
             }
+            stacked
             last
           >
             {sessionQ.data ? (
-              <p className="text-muted-foreground text-sm">
+              <p className="text-muted-foreground text-sm break-words">
                 Ключ с ролью <strong>{sessionQ.data.role}</strong> в tenant{' '}
-                <code className="font-mono text-xs">{sessionQ.data.tenant_id}</code>.
+                <code className="font-mono text-xs break-all">{sessionQ.data.tenant_id}</code>.
               </p>
             ) : (
               <p className="text-muted-foreground text-sm">

apps/web/src/components/settings/setting-row.tsx

@@ -10,31 +10,59 @@ import {
   FieldTitle,
 } from '@evobgp/ui/components/field'
 
-interface SettingRowProps {
+export interface SettingRowProps {
   title: string
   description?: ReactNode
   children: ReactNode
   last?: boolean
+  /** Opt-in FieldSeparator after the row (default off — ReUI settings use Frame+gap). */
+  separated?: boolean
+  compact?: boolean
+  stacked?: boolean
   labelFor?: string
   contentClassName?: string
+  className?: string
   titleAddon?: ReactNode
 }
 
-/** Settings row — settings-3 DNA. Preview: https://reui.io/preview/base/settings-3 */
+/**
+ * Settings row — settings-3 / settings-16 DNA.
+ * Control is flex-1 + min-w-0 (never a fixed w-78) so label and input do not overlap.
+ * @see https://reui.io/preview/base/settings-3
+ * @see https://reui.io/preview/base/settings-16
+ */
 export function SettingRow({
   title,
   description,
   children,
   last,
+  separated = false,
+  compact,
+  stacked,
   labelFor,
   contentClassName,
+  className,
   titleAddon,
 }: SettingRowProps) {
   return (
     <>
-      <Field orientation="responsive" className="gap-4 px-5 py-3">
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
-          <div className="flex flex-wrap items-center gap-2">
+      <Field
+        orientation={stacked ? 'vertical' : 'responsive'}
+        className={cn(
+          'min-w-0 gap-4 px-5 py-3.5',
+          !stacked &&
+            '@md/field-group:items-start @md/field-group:*:min-w-0 @md/field-group:*:max-w-full',
+          !last && !separated && 'border-border/40 border-b',
+          className,
+        )}
+      >
+        <div
+          className={cn(
+            'flex min-w-0 flex-1 flex-col gap-0.5',
+            !stacked && '@md/field-group:max-w-sm',
+          )}
+        >
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
             {labelFor ? (
               <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
             ) : (
@@ -44,20 +72,33 @@ export function SettingRow({
           </div>
 
           {description ? (
-            <FieldDescription>{description}</FieldDescription>
+            <FieldDescription className="text-sm break-words">{description}</FieldDescription>
           ) : null}
         </div>
 
         <FieldContent
-          className={cn('min-w-0 @md/field-group:w-78', contentClassName)}
+          className={cn(
+            'w-full min-w-0 @md/field-group:flex-1',
+            stacked
+              ? 'max-w-none'
+              : compact
+                ? '@md/field-group:max-w-[17rem] @md/field-group:shrink-0'
+                : '@md/field-group:max-w-[min(100%,34rem)]',
+            contentClassName,
+          )}
         >
-          <div className="flex w-full justify-start @md/field-group:justify-end">
+          <div
+            className={cn(
+              'flex w-full min-w-0 justify-start',
+              stacked ? 'justify-start' : '@md/field-group:justify-end',
+            )}
+          >
             {children}
           </div>
         </FieldContent>
       </Field>
 
-      {!last ? <FieldSeparator /> : null}
+      {separated && !last ? <FieldSeparator /> : null}
     </>
   )
 }

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

@@ -31,7 +31,7 @@ export function SettingsCard({
   footerClassName,
 }: SettingsCardProps) {
   return (
-    <Frame dense spacing="sm" className={cn('w-full gap-0 p-0', className)}>
+    <Frame dense spacing="sm" className={cn('w-full min-w-0 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>

apps/web/src/components/settings/settings-page-shell.tsx

@@ -1,45 +1,138 @@
-import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@evobgp/ui/components/tabs'
 
 import { AppearanceSettingsTab } from './appearance-settings-tab'
+import { BirdSettingsTab } from './bird-settings-tab'
 import { ConnectionSettingsTab } from './connection-settings-tab'
-import { SectionsSettingsTab } from './sections-settings-tab'
 import { SessionSettingsTab } from './session-settings-tab'
 import {
   SETTINGS_TAB_ITEMS,
-  type SettingsTab,
+  type SettingsSection,
+  type SettingsTabItem,
 } from './settings-tabs-data'
 
+function UiSettingsPanel({ tokenRequired }: { tokenRequired: boolean }) {
+  return (
+    <div className="flex flex-col gap-6">
+      <ConnectionSettingsTab tokenRequired={tokenRequired} />
+      <SessionSettingsTab />
+      <AppearanceSettingsTab />
+    </div>
+  )
+}
+
+function SettingsNavigation({
+  isMobile,
+  activeValue,
+  items,
+}: {
+  isMobile: boolean
+  activeValue: string
+  items: SettingsTabItem[]
+}) {
+  return (
+    <div className={cn('min-w-0', isMobile ? 'w-full' : 'w-40 shrink-0')}>
+      {isMobile ? (
+        <div className="-mx-1 overflow-x-auto px-1 pb-1">
+          <TabsList className="h-auto w-max min-w-max justify-start gap-1 bg-transparent p-0">
+            {items.map((tab) => (
+              <TabsTrigger
+                key={tab.value}
+                value={tab.value}
+                className={cn(
+                  'w-full justify-start gap-3 px-3 py-1.5 shadow-none',
+                  activeValue === tab.value ? 'bg-muted!' : 'bg-transparent',
+                )}
+              >
+                {tab.icon}
+                <span className="truncate">{tab.label}</span>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+      ) : (
+        <TabsList className="h-auto w-full flex-col items-stretch gap-1 bg-transparent p-0">
+          {items.map((tab) => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              className={cn(
+                'w-full justify-start gap-3 px-3 py-1.5 shadow-none',
+                activeValue === tab.value ? 'bg-muted!' : 'bg-transparent',
+              )}
+            >
+              {tab.icon}
+              <span className="truncate">{tab.label}</span>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Unified settings — settings-7 AccountSettings 1:1 (header + vertical Tabs).
+ * Surface of cards stays Frame (`SettingsCard`), not shadcn Card.
+ * @see https://reui.io/preview/base/settings-7
+ * @see https://reui.io/blocks
+ * @see https://reui.io/docs/components/base/frame
+ */
 export function SettingsPageShell({
   activeTab,
   onTabChange,
   tokenRequired,
+  showBird,
 }: {
-  activeTab: SettingsTab
-  onTabChange: (tab: SettingsTab) => void
+  activeTab: SettingsSection
+  onTabChange: (tab: SettingsSection) => void
   tokenRequired: boolean
+  showBird: boolean
 }) {
+  const isMobile = useIsMobile()
+  const items = showBird
+    ? SETTINGS_TAB_ITEMS
+    : SETTINGS_TAB_ITEMS.filter((tab) => tab.value === 'ui')
+  const resolvedTab = activeTab === 'bird' && showBird ? 'bird' : 'ui'
+
   return (
-    <BadgeTabs
-      value={activeTab}
-      onValueChange={(value) => onTabChange(value as SettingsTab)}
-      items={SETTINGS_TAB_ITEMS.map((tab) => ({
-        value: tab.value,
-        label: tab.label,
-        icon: tab.icon,
-      }))}
-    >
-      <TabsContent value="connection" className="mt-0">
-        <ConnectionSettingsTab tokenRequired={tokenRequired} />
-      </TabsContent>
-      <TabsContent value="session" className="mt-0">
-        <SessionSettingsTab />
-      </TabsContent>
-      <TabsContent value="appearance" className="mt-0">
-        <AppearanceSettingsTab />
-      </TabsContent>
-      <TabsContent value="sections" className="mt-0">
-        <SectionsSettingsTab />
-      </TabsContent>
-    </BadgeTabs>
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-8">
+      <header className="px-1">
+        <h1 className="text-xl font-semibold tracking-tight">Настройки</h1>
+        <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+          Интерфейс UI и глобальные параметры BIRD в одном разделе.
+        </p>
+      </header>
+
+      <Tabs
+        value={resolvedTab}
+        onValueChange={(value) => onTabChange(value as SettingsSection)}
+        orientation={isMobile ? 'horizontal' : 'vertical'}
+        className="w-full gap-4 lg:gap-8"
+      >
+        <SettingsNavigation
+          isMobile={isMobile}
+          activeValue={resolvedTab}
+          items={items}
+        />
+
+        <div className="min-w-0 flex-1">
+          <TabsContent value="ui" className="mt-0">
+            <UiSettingsPanel tokenRequired={tokenRequired} />
+          </TabsContent>
+          {showBird ? (
+            <TabsContent value="bird" className="mt-0">
+              <BirdSettingsTab />
+            </TabsContent>
+          ) : null}
+        </div>
+      </Tabs>
+    </div>
   )
 }

apps/web/src/components/settings/settings-setting-field.tsx

@@ -1,17 +1,9 @@
 import { type ComponentProps, type ReactNode } from 'react'
 
 import { Badge } from '@/components/reui/badge'
-import { cn } from '@evobgp/ui/lib/utils'
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-  FieldSeparator,
-  FieldTitle,
-} from '@evobgp/ui/components/field'
+import { SettingRow } from '@/components/settings/setting-row'
 
-/** settings-3 row pattern for tenant/UI settings. */
+/** Tenant settings row — same SettingRow DNA as UI settings. */
 export function SettingsSettingField({
   title,
   description,
@@ -20,38 +12,34 @@ export function SettingsSettingField({
   last,
   labelFor,
   contentClassName,
+  stacked,
 }: {
   title: string
-  description: ReactNode
+  description?: ReactNode
   badge?: { label: string; variant: ComponentProps<typeof Badge>['variant'] }
   children: ReactNode
   last?: boolean
   labelFor?: string
   contentClassName?: string
+  stacked?: boolean
 }) {
   return (
-    <>
-      <Field orientation="responsive" className="gap-4 px-4 py-4">
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
-          <div className="flex flex-wrap items-center gap-2">
-            {labelFor ? (
-              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
-            ) : (
-              <FieldTitle>{title}</FieldTitle>
-            )}
-            {badge ? (
-              <Badge variant={badge.variant} size="sm">
-                {badge.label}
-              </Badge>
-            ) : null}
-          </div>
-          <FieldDescription className="text-xs">{description}</FieldDescription>
-        </div>
-        <FieldContent className={cn('min-w-0 @md/field-group:w-78', contentClassName)}>
-          {children}
-        </FieldContent>
-      </Field>
-      {!last ? <FieldSeparator /> : null}
-    </>
+    <SettingRow
+      title={title}
+      description={description}
+      last={last}
+      labelFor={labelFor}
+      contentClassName={contentClassName}
+      stacked={stacked}
+      titleAddon={
+        badge ? (
+          <Badge variant={badge.variant} size="sm">
+            {badge.label}
+          </Badge>
+        ) : null
+      }
+    >
+      {children}
+    </SettingRow>
   )
 }

apps/web/src/components/settings/settings-tabs-data.tsx

@@ -1,49 +1,32 @@
-import {
-  KeyRoundIcon,
-  MonitorSmartphoneIcon,
-  PaletteIcon,
-  SlidersHorizontalIcon,
-} from 'lucide-react'
+import { ServerCogIcon, SettingsIcon } from 'lucide-react'
 import { type ReactNode } from 'react'
 
-export type SettingsTab = 'connection' | 'session' | 'appearance' | 'sections'
+export type SettingsSection = 'ui' | 'bird'
 
 export type SettingsTabItem = {
-  value: SettingsTab
+  value: SettingsSection
   label: string
   icon: ReactNode
 }
 
+/** Side rail items — settings-7 AccountSettings DNA. */
 export const SETTINGS_TAB_ITEMS: SettingsTabItem[] = [
   {
-    value: 'connection',
-    label: 'Подключение',
-    icon: <KeyRoundIcon aria-hidden="true" />,
+    value: 'ui',
+    label: 'Настройки UI',
+    icon: <SettingsIcon aria-hidden="true" />,
   },
   {
-    value: 'session',
-    label: 'Сессия',
-    icon: <MonitorSmartphoneIcon aria-hidden="true" />,
-  },
-  {
-    value: 'appearance',
-    label: 'Оформление',
-    icon: <PaletteIcon aria-hidden="true" />,
-  },
-  {
-    value: 'sections',
-    label: 'Разделы',
-    icon: <SlidersHorizontalIcon aria-hidden="true" />,
+    value: 'bird',
+    label: 'Настройки BIRD',
+    icon: <ServerCogIcon aria-hidden="true" />,
   },
 ]
 
-export function parseSettingsTab(value: unknown): SettingsTab {
-  if (
-    value === 'session' ||
-    value === 'appearance' ||
-    value === 'sections'
-  ) {
-    return value
-  }
-  return 'connection'
+const LEGACY_BIRD = new Set(['bird', 'revision', 'runtime-logs', 'additional'])
+
+/** Maps current and legacy `?tab=` values onto the unified settings rail. */
+export function parseSettingsSection(value: unknown): SettingsSection {
+  if (typeof value === 'string' && LEGACY_BIRD.has(value)) return 'bird'
+  return 'ui'
 }

apps/web/src/lib/auth.ts

@@ -346,11 +346,17 @@ export function permissionForPath(pathname: string): string | null {
   if (pathname.startsWith('/schedule')) return 'bgp:schedule:read'
   if (pathname.startsWith('/monitoring')) return 'bgp:monitoring:read'
   if (pathname.startsWith('/access')) return 'bgp:access:admin'
-  if (pathname.startsWith('/tenant-settings')) return 'bgp:tenant_settings:admin'
-  if (pathname.startsWith('/settings')) return 'bgp:settings:read'
+  if (pathname.startsWith('/tenant-settings') || pathname.startsWith('/settings')) {
+    return canOpenSettings() ? null : 'bgp:settings:read'
+  }
   return null
 }
 
+/** Unified `/settings` — UI (`settings:read`) or BIRD (`tenant_settings:admin`). */
+export function canOpenSettings(): boolean {
+  return can('bgp:settings:read') || can('bgp:tenant_settings:admin')
+}
+
 const FALLBACK_PATH = '/dashboard'
 
 /** First path in the sidebar the current user may open. */
@@ -365,7 +371,6 @@ export function firstAllowedPath(): string {
     '/schedule',
     '/monitoring',
     '/access',
-    '/tenant-settings',
     '/settings',
   ]
   for (const path of candidates) {

apps/web/src/routes/_auth.tsx

@@ -62,7 +62,7 @@ export const Route = createFileRoute('/_auth')({
     if (!raw || !normalizeApiToken(raw)) {
       throw redirect({
         to: '/settings',
-        search: { tab: 'connection', reason: 'token-required' },
+        search: { tab: 'ui', reason: 'token-required' },
       })
     }
   },

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

@@ -1,31 +1,39 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { z } from 'zod'
 
 import { SettingsPageShell } from '@/components/settings/settings-page-shell'
-import { type SettingsTab } from '@/components/settings/settings-tabs-data'
-
-const settingsSearchSchema = z.object({
-  tab: z
-    .enum(['connection', 'session', 'appearance', 'sections'])
-    .catch('connection'),
-  reason: z.enum(['token-required']).optional(),
-})
+import {
+  parseSettingsSection,
+  type SettingsSection,
+} from '@/components/settings/settings-tabs-data'
+import { can } from '@/lib/auth'
 
 export const Route = createFileRoute('/_auth/_settings/settings')({
   component: SettingsComponent,
-  validateSearch: (search) => settingsSearchSchema.parse(search),
+  validateSearch: (search: Record<string, unknown>): {
+    tab: SettingsSection
+    reason?: 'token-required'
+  } => ({
+    tab: parseSettingsSection(search.tab),
+    ...(search.reason === 'token-required'
+      ? { reason: 'token-required' as const }
+      : {}),
+  }),
 })
 
 function SettingsComponent() {
   const navigate = Route.useNavigate()
   const { tab, reason } = Route.useSearch()
   const tokenRequired = reason === 'token-required'
+  const showBird = !tokenRequired && can('bgp:tenant_settings:admin')
+  const activeTab: SettingsSection =
+    tokenRequired || (tab === 'bird' && !showBird) ? 'ui' : tab
 
-  function handleTabChange(nextTab: SettingsTab) {
+  function handleTabChange(nextTab: SettingsSection) {
     void navigate({
       search: (prev) => ({
         ...prev,
         tab: nextTab,
+        reason: nextTab === 'ui' ? prev.reason : undefined,
       }),
       replace: true,
     })
@@ -33,9 +41,10 @@ function SettingsComponent() {
 
   return (
     <SettingsPageShell
-      activeTab={tab}
+      activeTab={activeTab}
       onTabChange={handleTabChange}
       tokenRequired={tokenRequired}
+      showBird={showBird}
     />
   )
 }

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

@@ -1,358 +1,8 @@
-import { createFileRoute, useSearch } from '@tanstack/react-router'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Save } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { toast } from 'sonner'
-
-import { PanelCard } from '@/components/panel-card'
-import { Input } from '@evobgp/ui/components/input'
-import { Label } from '@evobgp/ui/components/label'
-import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
-import { FrameDataGrid } from '@/components/reui-kit'
-import { SelectField } from '@/components/select-field'
-import { SettingsKvGrid } from '@/components/settings/settings-kv-grid'
-import { SettingsSettingField } from '@/components/settings/settings-setting-field'
-import { QueryState } from '@/components/query-state'
-import { LoadingButton } from '@/components/loading-button'
-
-import {
-  BIRD_SETTING_KEYS,
-  REVISION_SETTING_KEYS,
-  RUNTIME_LOGS_SETTING_KEYS,
-  buildPayload,
-  partitionSettings,
-  settingsKeys,
-  settingsQueryOptions,
-  type BirdSettingKey,
-} from '@/queries/settings'
-import { apiMutate } from '@/lib/api-client'
+import { createFileRoute, redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_auth/_settings/tenant-settings')({
-  component: TenantSettingsComponent,
-  validateSearch: (search: Record<string, unknown>) => ({
-    tab: (search.tab === 'revision' || search.tab === 'runtime-logs' || search.tab === 'additional'
-      ? search.tab
-      : 'bird') as 'bird' | 'revision' | 'runtime-logs' | 'additional',
-  }),
+  beforeLoad: () => {
+    throw redirect({ to: '/settings', search: { tab: 'bird' } })
+  },
+  component: () => null,
 })
-
-const RUNTIME_LOGS_ENABLED_ITEMS = [
-  { value: 'true', label: 'Вкл' },
-  { value: 'false', label: 'Выкл' },
-] as const
-
-const RUNTIME_LOGS_MODE_ITEMS = [
-  { value: 'truncate', label: 'обнулить (truncate)' },
-  { value: 'delete', label: 'удалить файл (delete)' },
-] as const
-
-const BIRD_LABELS: Record<BirdSettingKey, string> = {
-  bird_router_id: 'Router ID',
-  bird_local_ipv4: 'Локальный IPv4',
-  bird_local_ipv6: 'Локальный IPv6',
-  bird_local_asn: 'Локальный ASN',
-  bird_bgp_source_ipv4: 'BGP source IPv4',
-  bird_bgp_source_ipv6: 'BGP source IPv6',
-  peer_discovery_enabled: 'Автообнаружение пиров',
-  peer_discovery_ranges_v4: 'Discovery CIDR IPv4',
-  peer_discovery_ranges_v6: 'Discovery CIDR IPv6',
-  peer_discovery_require_external: 'Только external ASN',
-}
-
-const BIRD_BOOL_ITEMS = [
-  { value: 'true', label: 'Вкл' },
-  { value: 'false', label: 'Выкл' },
-] as const
-
-const BIRD_HINTS: Partial<Record<BirdSettingKey, string>> = {
-  peer_discovery_enabled:
-    'Dynamic neighbor range в BIRD (карантин import/export none). Требует CIDR.',
-  peer_discovery_ranges_v4: 'Через запятую или пробел, напр. 198.51.100.0/24 203.0.113.0/24',
-  peer_discovery_ranges_v6: 'Опционально, напр. 2001:db8::/32',
-  peer_discovery_require_external: 'neighbor range … external (любой чужой ASN)',
-}
-
-function TenantSettingsComponent() {
-  const search = useSearch({ from: '/_auth/_settings/tenant-settings' })
-  const navigate = Route.useNavigate()
-  const settingsQ = useQuery(settingsQueryOptions())
-  const qc = useQueryClient()
-
-  const partitioned = settingsQ.data ? partitionSettings(settingsQ.data) : null
-
-  const [birdForm, setBirdForm] = useState<Record<string, string>>({})
-  const [revisionForm, setRevisionForm] = useState<Record<string, string>>({})
-  const [runtimeLogsForm, setRuntimeLogsForm] = useState<Record<string, string>>({})
-
-  useEffect(() => {
-    if (partitioned) {
-      setBirdForm({ ...partitioned.bird })
-      setRevisionForm({ ...partitioned.revision })
-      setRuntimeLogsForm({ ...partitioned.runtimeLogs })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settingsQ.data])
-
-  const patchMutation = useMutation({
-    mutationFn: (payload: Record<string, string | number | boolean>) =>
-      apiMutate('/v1/settings', 'PATCH', payload),
-    onSuccess: () => {
-      toast.success('Параметры сохранены')
-      void qc.invalidateQueries({ queryKey: settingsKeys.all })
-    },
-    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось сохранить'),
-  })
-
-  function saveBird() {
-    patchMutation.mutate(buildPayload(BIRD_SETTING_KEYS, birdForm))
-  }
-  function saveRevision() {
-    patchMutation.mutate(buildPayload(REVISION_SETTING_KEYS, revisionForm))
-  }
-  function saveRuntimeLogs() {
-    patchMutation.mutate(buildPayload(RUNTIME_LOGS_SETTING_KEYS, runtimeLogsForm))
-  }
-
-  return (
-    <div className="flex flex-col gap-6">
-      <BadgeTabs
-        value={search.tab}
-        onValueChange={(tab) =>
-          navigate({
-            search: { tab: tab as 'bird' | 'revision' | 'runtime-logs' | 'additional' },
-          })
-        }
-        items={[
-          { value: 'bird', label: 'BIRD' },
-          { value: 'revision', label: 'Ревизии' },
-          { value: 'runtime-logs', label: 'Файловые логи' },
-          { value: 'additional', label: 'Дополнительно' },
-        ]}
-      >
-        <TabsContent value="bird" className="mt-0">
-          <PanelCard
-            title="BIRD control plane"
-            description={
-              <>
-                Глобальные параметры BIRD для pipeline refresh/apply. Сохранение через{' '}
-                <code className="text-xs">PATCH /v1/settings</code> (роль operator).
-              </>
-            }
-            contentClassName="space-y-4 py-4"
-          >
-              <QueryState
-                data={partitioned}
-                isLoading={settingsQ.isLoading}
-                isError={settingsQ.isError}
-                error={settingsQ.error}
-                skeleton={<div className="h-64" />}
-                onRetry={() => settingsQ.refetch()}
-              >
-                {() => (
-                  <div className="flex flex-col">
-                    {BIRD_SETTING_KEYS.map((key, index) => (
-                      <SettingsSettingField
-                        key={key}
-                        title={BIRD_LABELS[key]}
-                        description={BIRD_HINTS[key] ?? key}
-                        labelFor={key}
-                        badge={{ label: 'BIRD', variant: 'info-light' }}
-                        last={index === BIRD_SETTING_KEYS.length - 1}
-                      >
-                        {key === 'peer_discovery_enabled' ||
-                        key === 'peer_discovery_require_external' ? (
-                          <SelectField
-                            id={key}
-                            items={[...BIRD_BOOL_ITEMS]}
-                            value={birdForm[key] || 'false'}
-                            onValueChange={(v) =>
-                              setBirdForm((s) => ({ ...s, [key]: v || 'false' }))
-                            }
-                            placeholder="Выкл"
-                          />
-                        ) : (
-                          <Input
-                            id={key}
-                            value={birdForm[key] ?? ''}
-                            onChange={(e) =>
-                              setBirdForm((s) => ({ ...s, [key]: e.target.value }))
-                            }
-                            placeholder={BIRD_LABELS[key]}
-                          />
-                        )}
-                      </SettingsSettingField>
-                    ))}
-                    <div className="px-4 py-4">
-                      <LoadingButton onClick={saveBird} loading={patchMutation.isPending}>
-                        <Save />
-                        Сохранить
-                      </LoadingButton>
-                    </div>
-                  </div>
-                )}
-              </QueryState>
-          </PanelCard>
-        </TabsContent>
-
-        <TabsContent value="revision" className="mt-0">
-          <PanelCard
-            title="Ревизии"
-            description="Время хранения ревизий в БД"
-            contentClassName="space-y-4 py-4"
-          >
-              <QueryState
-                data={partitioned}
-                isLoading={settingsQ.isLoading}
-                isError={settingsQ.isError}
-                error={settingsQ.error}
-                skeleton={<div className="h-32" />}
-                onRetry={() => settingsQ.refetch()}
-              >
-                {() => (
-                  <div className="flex max-w-sm flex-col gap-1.5">
-                    <Label htmlFor="revision_retention_minutes">Retention (минуты)</Label>
-                    <Input
-                      id="revision_retention_minutes"
-                      type="number"
-                      value={revisionForm.revision_retention_minutes ?? ''}
-                      onChange={(e) =>
-                        setRevisionForm((s) => ({
-                          ...s,
-                          revision_retention_minutes: e.target.value,
-                        }))
-                      }
-                    />
-                    <p className="font-mono text-xs text-muted-foreground">
-                      revision_retention_minutes
-                    </p>
-                    <LoadingButton
-                      className="mt-2 w-fit"
-                      onClick={saveRevision}
-                      loading={patchMutation.isPending}
-                    >
-                      <Save />
-                      Сохранить
-                    </LoadingButton>
-                  </div>
-                )}
-              </QueryState>
-          </PanelCard>
-        </TabsContent>
-
-        <TabsContent value="runtime-logs" className="mt-0">
-          <PanelCard
-            title="Файловые логи"
-            description="Автоматическая очистка логов"
-            contentClassName="space-y-4 py-4"
-          >
-              <QueryState
-                data={partitioned}
-                isLoading={settingsQ.isLoading}
-                isError={settingsQ.isError}
-                error={settingsQ.error}
-                skeleton={<div className="h-48" />}
-                onRetry={() => settingsQ.refetch()}
-              >
-                {() => (
-                  <div className="grid gap-4 md:grid-cols-2">
-                    <SelectField
-                      label="Авто-очистка включена"
-                      items={[...RUNTIME_LOGS_ENABLED_ITEMS]}
-                      value={runtimeLogsForm.runtime_logs_auto_enabled ?? 'false'}
-                      placeholder="Выберите"
-                      description="runtime_logs_auto_enabled"
-                      onValueChange={(v) =>
-                        v &&
-                        setRuntimeLogsForm((s) => ({
-                          ...s,
-                          runtime_logs_auto_enabled: v,
-                        }))
-                      }
-                    />
-                    <div className="flex flex-col gap-1.5">
-                      <Label htmlFor="runtime_logs_max_file_mb">Макс. размер файла (MB)</Label>
-                      <Input
-                        id="runtime_logs_max_file_mb"
-                        type="number"
-                        value={runtimeLogsForm.runtime_logs_max_file_mb ?? ''}
-                        onChange={(e) =>
-                          setRuntimeLogsForm((s) => ({
-                            ...s,
-                            runtime_logs_max_file_mb: e.target.value,
-                          }))
-                        }
-                      />
-                      <p className="font-mono text-xs text-muted-foreground">
-                        runtime_logs_max_file_mb
-                      </p>
-                    </div>
-                    <div className="flex flex-col gap-1.5">
-                      <Label htmlFor="runtime_logs_auto_schedule">Расписание (cron)</Label>
-                      <Input
-                        id="runtime_logs_auto_schedule"
-                        value={runtimeLogsForm.runtime_logs_auto_schedule ?? ''}
-                        onChange={(e) =>
-                          setRuntimeLogsForm((s) => ({
-                            ...s,
-                            runtime_logs_auto_schedule: e.target.value,
-                          }))
-                        }
-                      />
-                      <p className="font-mono text-xs text-muted-foreground">
-                        runtime_logs_auto_schedule
-                      </p>
-                    </div>
-                    <SelectField
-                      label="Режим очистки"
-                      items={[...RUNTIME_LOGS_MODE_ITEMS]}
-                      value={runtimeLogsForm.runtime_logs_auto_mode ?? ''}
-                      placeholder="Выберите"
-                      description="runtime_logs_auto_mode"
-                      onValueChange={(v) =>
-                        v &&
-                        setRuntimeLogsForm((s) => ({
-                          ...s,
-                          runtime_logs_auto_mode: v,
-                        }))
-                      }
-                    />
-                    <div className="md:col-span-2">
-                      <LoadingButton onClick={saveRuntimeLogs} loading={patchMutation.isPending}>
-                        <Save />
-                        Сохранить
-                      </LoadingButton>
-                    </div>
-                  </div>
-                )}
-              </QueryState>
-          </PanelCard>
-        </TabsContent>
-
-        <TabsContent value="additional" className="mt-0">
-          <FrameDataGrid
-            title="Дополнительные параметры"
-            description="Параметры вне стандартных групп (только чтение — изменяются через API)"
-          >
-            <QueryState
-              data={partitioned?.additional ?? []}
-              isLoading={settingsQ.isLoading}
-              isError={settingsQ.isError}
-              error={settingsQ.error}
-              empty={(partitioned?.additional ?? []).length === 0}
-              emptyTitle="Нет дополнительных параметров"
-              skeleton={<div className="h-32" />}
-              onRetry={() => settingsQ.refetch()}
-            >
-              {(items) => (
-                <SettingsKvGrid
-                  items={items}
-                  isLoading={settingsQ.isFetching && !settingsQ.isLoading}
-                />
-              )}
-            </QueryState>
-          </FrameDataGrid>
-        </TabsContent>
-      </BadgeTabs>
-    </div>
-  )
-}

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

@@ -1,15 +1,23 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { KeyRound, RefreshCw, ShieldCheck, ShieldOff } from 'lucide-react'
+import { KeyRound, MonitorIcon, RefreshCw, ShieldCheck, ShieldOff } from 'lucide-react'
 import { useMemo } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { PanelCard } from '@/components/panel-card'
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from '@evobgp/ui/components/item'
 
 import { AccessApiKeysCard } from '@/components/access/access-api-keys-card'
 import { PageHeader } from '@/components/page-header'
 import { Badge } from '@/components/reui/badge'
 import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
+import { SettingsCard } from '@/components/settings/settings-card'
 import { SectionCardsSkeleton } from '@/components/skeletons'
 import { sessionCanManageApiKeys } from '@/lib/auth'
 import { authSessionQueryOptions } from '@/queries/auth'
@@ -38,6 +46,7 @@ function AccessComponent() {
   const kpiItems: KpiStatItem[] = useMemo(
     () => [
       {
+        id: 'keys-total',
         label: 'Всего ключей',
         value: keys.length,
         icon: <KeyRound className="size-4" />,
@@ -48,6 +57,7 @@ function AccessComponent() {
         ),
       },
       {
+        id: 'keys-active',
         label: 'Активных',
         value: activeCount,
         icon: <ShieldCheck className="size-4" />,
@@ -58,6 +68,7 @@ function AccessComponent() {
         ),
       },
       {
+        id: 'keys-revoked',
         label: 'Отозванных',
         value: revokedCount,
         icon: <ShieldOff className="size-4" />,
@@ -93,7 +104,7 @@ function AccessComponent() {
   })()
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex min-w-0 flex-col gap-6">
       <PageHeader
         title="Права доступа"
         description="API-ключи control plane и текущая сессия Bearer-токена."
@@ -108,47 +119,55 @@ function AccessComponent() {
       />
 
       {session ? (
-        <PanelCard
+        <SettingsCard
           title="Текущая сессия"
           description="Tenant и права текущего Bearer (API-ключ или portal JWT)."
-          contentClassName="grid gap-3 py-4 text-sm sm:grid-cols-2"
         >
-          <div>
-            <p className="text-muted-foreground">Tenant</p>
-            <p className="break-all font-mono text-xs">{session.tenant_id}</p>
-          </div>
-          <div>
-            <p className="text-muted-foreground">Доступ</p>
-            <p className="font-mono text-xs">{sessionAccessLabel}</p>
-          </div>
-          {sessionKindLabel ? (
-            <div>
-              <p className="text-muted-foreground">Тип</p>
-              <p className="font-mono text-xs">{sessionKindLabel}</p>
-            </div>
-          ) : null}
-          {session.email ? (
-            <div>
-              <p className="text-muted-foreground">Email</p>
-              <p className="break-all text-xs">{session.email}</p>
-            </div>
-          ) : null}
-        </PanelCard>
+          <ItemGroup className="gap-0">
+            <Item className="min-h-0 min-w-0 items-start gap-4 px-5 py-3.5">
+              <ItemMedia className="self-start">
+                <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
+                  <MonitorIcon aria-hidden="true" />
+                </Item>
+              </ItemMedia>
+              <ItemContent className="min-w-0 gap-3">
+                <div className="flex min-w-0 flex-wrap items-center gap-2">
+                  <ItemTitle className="leading-5">Этот браузер</ItemTitle>
+                  {sessionKindLabel ? (
+                    <Badge variant="info-light" size="sm">
+                      {sessionKindLabel}
+                    </Badge>
+                  ) : null}
+                </div>
+                <ItemDescription className="flex min-w-0 flex-col gap-1 leading-5">
+                  <span className="break-all">
+                    Tenant:{' '}
+                    <code className="text-foreground font-mono text-xs">{session.tenant_id}</code>
+                  </span>
+                  <span className="break-words">Доступ: {sessionAccessLabel}</span>
+                  {session.email ? <span className="break-all">Email: {session.email}</span> : null}
+                </ItemDescription>
+              </ItemContent>
+            </Item>
+          </ItemGroup>
+        </SettingsCard>
       ) : (
-        <PanelCard contentClassName="py-4 text-sm text-muted-foreground">
-          Не удалось определить сессию. Укажите токен в{' '}
-          <Link
-            to="/settings"
-            search={{ tab: 'connection' }}
-            className="text-primary underline-offset-4 hover:underline"
-          >
-            настройках
-          </Link>{' '}
-          (для dev-окружения — <code className="text-xs">dev</code> при включённом demo-seed).
-          {sessionQuery.isError && sessionQuery.error instanceof Error ? (
-            <span className="mt-2 block text-destructive">{sessionQuery.error.message}</span>
-          ) : null}
-        </PanelCard>
+        <SettingsCard title="Текущая сессия">
+          <p className="text-muted-foreground px-5 py-4 text-sm">
+            Не удалось определить сессию. Укажите токен в{' '}
+            <Link
+              to="/settings"
+              search={{ tab: 'ui' }}
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              настройках
+            </Link>{' '}
+            (для dev-окружения — <code className="text-xs">dev</code> при включённом demo-seed).
+            {sessionQuery.isError && sessionQuery.error instanceof Error ? (
+              <span className="text-destructive mt-2 block">{sessionQuery.error.message}</span>
+            ) : null}
+          </p>
+        </SettingsCard>
       )}
 
       {canManageKeys ? (
@@ -167,11 +186,13 @@ function AccessComponent() {
           />
         </>
       ) : session ? (
-        <PanelCard contentClassName="py-4 text-sm text-muted-foreground">
-          Управление API-ключами доступно роли <strong>operator</strong> (API-ключ) или portal JWT
-          с <strong>is_admin</strong> / правом <code className="text-xs">bgp:access:admin</code>.
-          Текущий доступ: <span className="font-mono">{sessionAccessLabel}</span>.
-        </PanelCard>
+        <SettingsCard title="API-ключи">
+          <p className="text-muted-foreground px-5 py-4 text-sm break-words">
+            Управление API-ключами доступно роли <strong>operator</strong> (API-ключ) или portal JWT
+            с <strong>is_admin</strong> / правом <code className="text-xs">bgp:access:admin</code>.
+            Текущий доступ: <span className="font-mono">{sessionAccessLabel}</span>.
+          </p>
+        </SettingsCard>
       ) : null}
     </div>
   )

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

@@ -7,7 +7,6 @@ import { Button } from '@evobgp/ui/components/button'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 
 import { DashboardActivityTimeline } from '@/components/dashboard/dashboard-activity-timeline'
-import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
 import { buildDashboardKpiCards } from '@/components/dashboard/dashboard-kpi-grid'
 import { DashboardModulesGrid } from '@/components/dashboard/dashboard-modules-grid'
 import { DashboardNetworkHealth } from '@/components/dashboard/dashboard-network-health'
@@ -15,7 +14,7 @@ import { DashboardOperationsBreakdown } from '@/components/dashboard/dashboard-o
 import { DashboardQuickLinks } from '@/components/dashboard/dashboard-quick-links'
 import { DashboardRecentJobsGrid } from '@/components/dashboard/dashboard-recent-jobs-grid'
 import { DashboardRecentRevisionsGrid } from '@/components/dashboard/dashboard-recent-revisions-grid'
-import { OpsDashboard } from '@/components/reui-kit'
+import { FrameDataGrid, OpsDashboard } from '@/components/reui-kit'
 import { chartPanelGridClassName, dashboardMainSidebarClassName } from '@/lib/ui-surface'
 import {
   moduleNameById,
@@ -111,7 +110,7 @@ function DashboardComponent() {
               peers={peers}
               speakers={speakers}
             />
-            <div className="grid min-w-0 gap-4">
+            <div className="grid min-w-0 items-start gap-4">
               <DashboardNetworkHealth peers={peers} speakers={speakers} jobs={jobs} />
               <DashboardOperationsBreakdown jobs={jobs} modules={modules} />
             </div>
@@ -122,28 +121,26 @@ function DashboardComponent() {
       queueDescription="Последние фоновые операции и история конфигураций"
       queue={
         <div className={chartPanelGridClassName}>
-          <DashboardFramePanel
+          <FrameDataGrid
             title="Недавние задачи"
             description="Последние фоновые операции"
-            className="h-full min-w-0"
           >
             {activityLoading ? (
               <Skeleton className="m-4 h-24 w-auto" />
             ) : (
-              <DashboardRecentJobsGrid jobs={jobs.slice(0, 10)} nameById={nameById} isLoading={refreshing} />
+              <DashboardRecentJobsGrid jobs={jobs.slice(0, 8)} nameById={nameById} isLoading={refreshing} />
             )}
-          </DashboardFramePanel>
-          <DashboardFramePanel
+          </FrameDataGrid>
+          <FrameDataGrid
             title="Последние ревизии"
             description="История конфигураций"
-            className="h-full min-w-0"
           >
             {activityLoading ? (
               <Skeleton className="m-4 h-24 w-auto" />
             ) : (
               <DashboardRecentRevisionsGrid revisions={revisions} isLoading={refreshing} />
             )}
-          </DashboardFramePanel>
+          </FrameDataGrid>
         </div>
       }
     />

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

@@ -258,7 +258,7 @@ function MonitoringComponent() {
           <IllustratedEmptyState
             icon={FileText}
             title="Файловые логи"
-            description="Логи API и pipeline настраиваются переменной EVOBGP_LOG_* и управляются в tenant-settings."
+            description="Логи API и pipeline настраиваются переменной EVOBGP_LOG_* и управляются в Настройках BIRD."
           />
         </TabsContent>
       </BadgeTabs>

docs/manual.md

@@ -118,10 +118,10 @@ EvoBGP управляет генерацией и применением BGP-к
 
 | Маршрут | Назначение |
 |---------|------------|
-| `/settings` | Только браузер: API-токен, тема (localStorage). Tenant KV здесь **не** редактируются. |
-| `/tenant-settings` | Все tenant-параметры из `/v1/settings`: вкладки **BIRD**, **Ревизии**, **Файловые логи** (автоочистка FS), **Дополнительно** (custom KV). Пункт nav **«Параметры»**. |
-| `/network` → Control plane | Краткая сводка BIRD + ссылка на `/tenant-settings?tab=bird`. |
-| `/operations` | Ревизии, diff, jobs; вкладка «Система» перенесена в `/tenant-settings`. |
+| `/settings?tab=ui` | Настройки UI: API-токен, сессия, тема. |
+| `/settings?tab=bird` | Настройки BIRD: control plane, ревизии, файловые логи, дополнительные ключи `/v1/settings`. Старый `/tenant-settings` редиректит сюда. |
+| `/network` → Control plane | Краткая сводка BIRD. |
+| `/operations` | Ревизии, diff, jobs. |
 
 ### Web UI: файловые runtime-логи
 

packages/ui/src/components/tabs.tsx

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