refactor(web): enhance layout and styling for dashboard components

Updated various dashboard components to improve layout and responsiveness. Adjusted class names to include 'min-w-0' for better handling of overflow and added flex properties to ensure proper alignment. Refined grid structures and skeleton loading states for a more cohesive user experience.

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

.agents/skills/reui/SKILL.md

@@ -1,17 +1,17 @@
 ---
 name: reui
-description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 17 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 20 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
 user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `42d70dcc3d`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `668fb463eb`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 
 ReUI is a shadcn-compatible registry. It ships four things you **reuse** - never redesign:
 
-- **components** - the 17 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
+- **components** - the 20 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
 - **examples** - free `c-*` single-pattern use-cases of a component (`c-kanban-1`); install one and read it to see exact composition
 - **blocks** - premium full-page sections that compose components (`data-grid-2`, `pricing-page-1`); Pro or Ultimate license at install
 - **icons** - Motion Icons in 4 styles, static + hover-animated variants; Ultimate license at install
@@ -58,7 +58,7 @@ Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor
 
 - [rules/registry.md](./rules/registry.md) - the four types, the @reui registry, base/radix, free vs premium + license
 - [rules/workflow.md](./rules/workflow.md) - the find -> install -> read-API -> adapt loop (most important)
-- [rules/components.md](./rules/components.md) - the 17 components, the data-grid contract, base vs radix
+- [rules/components.md](./rules/components.md) - the 20 components, the data-grid contract, base vs radix
 - [rules/adapting.md](./rules/adapting.md) - reuse-first: preserve the design (no over-customizing), reuse examples + a block's own elements, real data, don't invent APIs
 - [rules/craft.md](./rules/craft.md) - make it exceptional: point of view, hierarchy, density, states, responsive, motion, the bar
 - [rules/quality.md](./rules/quality.md) - security, accessibility, and scroll gates (the done gate)

.agents/skills/reui/rules/cli.md

@@ -2,7 +2,7 @@
 
 ## Registry setup (one-time, per project)
 
-Free items (the 17 components and all `c-*` examples) need only the plain string registry in `components.json`:
+Free items (the 20 components and all `c-*` examples) need only the plain string registry in `components.json`:
 
 ```json
 { "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
@@ -54,7 +54,7 @@ bunx --bun shadcn@latest add @reui/<name> --yes # bun
 
 ## Free vs premium boundary
 
-- Public, no key: `c-*` examples and the 17 components (`@reui/data-grid`, `@reui/badge`, ...) that those examples depend on.
+- Public, no key: `c-*` examples and the 20 components (`@reui/data-grid`, `@reui/badge`, ...) that those examples depend on.
 - Key required at install: blocks (`@reui/<category>-N`) need a Pro or Ultimate license; Motion Icons (`@reui/icons/...`) and templates need Ultimate.
 
 If an install 401/403s, the license key is missing, invalid, or the plan does not cover that resource (blocks: Pro or higher; icons and templates: Ultimate). Point the user to https://reui.io/account (their key) or https://reui.io/pricing (upgrade).

.agents/skills/reui/rules/components.md

@@ -1,24 +1,23 @@
 # ReUI components
 
-The 19 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
+The 20 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
 
 **Rule one: never guess a component's API. Read it first.** Call **`get_component(name)`** for its inline `api` (props + usage, no web fetch), and **share the result's `docsUrl`** (the component's API documentation page) with the user whenever you work with that component's API, so they have the full reference (the `/llms.txt` index is a further fallback). Then call **`get_examples(name)`** to install a worked example and copy real composition. The contracts below are first-try orientation (required props, composition shape, the one gotcha); the inline `api` is the full reference. No single block fits? Compose: search the components you need, read each `get_component`, install a `get_examples` example per component, and adapt.
 
 ## data-grid (the flagship - read its API every time)
 
-`data-grid` wraps TanStack Table v8. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
+`data-grid` wraps TanStack Table v9. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
 
-- Build a TanStack table instance with `useReactTable(...)` (columns, data, the feature models you need: sorting, pagination, row selection).
+- Build a TanStack table instance with `useTable({ features: dataGridFeatures, ... })` (columns, data). `dataGridFeatures` is exported by the primitive and already bundles sorting, filtering, pagination, row selection, expanding, pinning, resizing and faceting, so there are no per-table row models to wire.
 - Pass that instance to `<DataGrid table={table} recordCount={total}>`.
 - Compose the body with `DataGridTable` inside `DataGrid`, and enable features through `tableLayout` (e.g. `{ headerSticky: true, columnsResizable: true }`), not ad-hoc classes.
 - Server-side data uses the documented fetch shape (`recordCount` is the total for pagination).
 
 ```tsx
-const table = useReactTable({
+const table = useTable({
+  features: dataGridFeatures,
   data,
   columns,
-  getCoreRowModel: getCoreRowModel(),
-  // add sorting/pagination/selection models per the API
 })
 
 <DataGrid table={table} recordCount={data.length}>
@@ -28,9 +27,9 @@ const table = useReactTable({
 
 Common mistakes:
 
-- **Incorrect:** `<DataGrid data={rows} columns={cols} />` - these props do not exist. **Correct:** build a `useReactTable` instance and pass `table={table}` + `recordCount`.
+- **Incorrect:** `<DataGrid data={rows} columns={cols} />` - these props do not exist. **Correct:** build a `useTable({ features: dataGridFeatures, ... })` instance and pass `table={table}` + `recordCount`.
 - **Incorrect:** a raw `<table>` / hand-rolled pagination. **Correct:** use `data-grid`; read its API for sticky header, pagination, virtualization, row selection.
-- **Incorrect:** styling rows/cells with arbitrary classes. **Correct:** drive layout via `tableLayout` and the documented `ColumnMeta` (e.g. `cellClassName`, `headerTitle`).
+- **Incorrect:** styling rows/cells with arbitrary classes. **Correct:** drive layout via `tableLayout` and the primitive's `DataGridColumnMeta` (e.g. `cellClassName`, `headerTitle`), set through the bundle's `columnMeta` slot.
 
 ## event-calendar
 
@@ -312,6 +311,19 @@ const [value, setValue] = useState<DateSelectorValue | undefined>()
 
 **Gotcha:** isometric layered artwork for empty states and illustrations; style the inner icon via its own `className`. Mark purely decorative stacks `aria-hidden="true"` and keep the real label in surrounding copy.
 
+## icon-tile
+
+**Required:** one child icon
+**Shape:**
+
+```tsx
+<IconTile variant="elevated" size="lg">
+  <PackageIcon />
+</IconTile>
+```
+
+**Gotcha:** the square container an icon sits in, so every list row, feature card and empty state shares one affordance. `variant`: `outline` (default) | `elevated` (muted fill, raised ring) | `soft` (tinted nested, tone from currentColor) | `solid` (filled tone, contrasting glyph) | `frame` (double container). `soft` and `solid` retint from one text color class (they default to `text-primary`). `size`: `xs | sm | default | lg | xl` (24/32/40/48/64px tile, glyph scales 12/14/16/20/24px). `radius`: `default | full`. Do not set a `size-*` class on the child icon unless you mean to override the tile's glyph size; recolor with `className` on the tile, not the icon.
+
 ## alert
 
 **Required:** `Alert` > `AlertTitle`

.agents/skills/reui/rules/registry.md

@@ -2,7 +2,7 @@
 
 ReUI is a shadcn-compatible registry with four entity types. **Examples and blocks are built FROM components** - reuse them, don't rebuild.
 
-- **component** - one of the 17 ReUI building blocks with a real API (`data-grid`, `kanban`, `filters`, `date-selector`, `tree`, ...). Install directly (`@reui/data-grid`) or let it come in as a dependency of an example/block. Free. Read its API with `get_component(name)`.
+- **component** - one of the 20 ReUI building blocks with a real API (`data-grid`, `kanban`, `filters`, `date-selector`, `tree`, ...). Install directly (`@reui/data-grid`) or let it come in as a dependency of an example/block. Free. Read its API with `get_component(name)`.
 - **example** - a free `c-*` single-pattern use-case of a component (`c-kanban-1`, `c-data-grid-3`). Install one and read it to copy real composition. Find a component's examples with `get_examples(name)`.
 - **block** - a premium, full-page section that composes several components (`data-grid-2`, `pricing-page-1`). Pro or Ultimate license at install. Adapts to your active theme via semantic tokens.
 - **icon** - Motion Icons in 4 styles (outline, solid, duotone, filled), static (`@reui/icons/default/<style>/<name>`) and hover-animated (`@reui/icons/animated/<style>/<name>`). Ultimate license at install. See [icons.md](./icons.md).
@@ -27,7 +27,7 @@ Blocks adapt to your active theme through semantic tokens and CSS variables - ch
 
 ## Free vs premium
 
-- **Free, no key:** the 17 components, all `c-*` examples, the ReUI MCP, and this skill.
+- **Free, no key:** the 20 components, all `c-*` examples, the ReUI MCP, and this skill.
 - **Premium, license required at install:** blocks (Pro or Ultimate), Motion Icons and templates (Ultimate). Set `REUI_LICENSE_KEY` (see [cli.md](./cli.md)).
 
 ## Component API index

.agents/skills/reui/rules/workflow.md

@@ -8,7 +8,7 @@ The core ReUI loop. The MCP tells you what to install and gives you the API; the
 
 For everything else, call `search` with the user's intent. Pass structured hints whenever you can infer them - you are an LLM, so do the parsing the server cannot:
 
-- `type`: `"component"` (one of the 17 building blocks), `"example"` (a c-\* use-case), `"block"` (a full page/section), `"icon"`.
+- `type`: `"component"` (one of the 20 building blocks), `"example"` (a c-\* use-case), `"block"` (a full page/section), `"icon"`.
 - `component`: the ReUI component the request implies (`"data-grid"`, `"kanban"`, ...).
 - `category`, `features` (e.g. `["sortable","pagination"]`), `free`.
 
@@ -40,7 +40,7 @@ Before writing code against any component an item uses:
 
 Installing files is not the end, and redesigning them defeats the point. First note the project's **base** so you write the right API - read `components.json` -> `style` and take the segment before the first `-` (`base-nova` -> Base UI, `radix-nova` -> Radix UI), see [components.md](./components.md). After `add`:
 
-1. **Read the added files**; keep the composition intact. For a block, verify the components are wired correctly (for `data-grid`: a `useReactTable` instance passed as `table`, `recordCount` set - see [components.md](./components.md)).
+1. **Read the added files**; keep the composition intact. For a block, verify the components are wired correctly (for `data-grid`: a `useTable({ features: dataGridFeatures, ... })` instance passed as `table`, `recordCount` set - see [components.md](./components.md)).
 2. **Replace demo data with the user's real data** via typed structures (see [adapting.md](./adapting.md)).
 3. **Fix icon imports** to the project's icon library (see [icons.md](./icons.md)).
 4. **Align styling** to semantic tokens and the active theme - no raw colors (see [styling.md](./styling.md)).

.claude/skills/reui/SKILL.md

@@ -1,17 +1,17 @@
 ---
 name: reui
-description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 17 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 20 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
 user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `42d70dcc3d`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `668fb463eb`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 
 ReUI is a shadcn-compatible registry. It ships four things you **reuse** - never redesign:
 
-- **components** - the 17 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
+- **components** - the 20 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
 - **examples** - free `c-*` single-pattern use-cases of a component (`c-kanban-1`); install one and read it to see exact composition
 - **blocks** - premium full-page sections that compose components (`data-grid-2`, `pricing-page-1`); Pro or Ultimate license at install
 - **icons** - Motion Icons in 4 styles, static + hover-animated variants; Ultimate license at install
@@ -58,7 +58,7 @@ Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor
 
 - [rules/registry.md](./rules/registry.md) - the four types, the @reui registry, base/radix, free vs premium + license
 - [rules/workflow.md](./rules/workflow.md) - the find -> install -> read-API -> adapt loop (most important)
-- [rules/components.md](./rules/components.md) - the 17 components, the data-grid contract, base vs radix
+- [rules/components.md](./rules/components.md) - the 20 components, the data-grid contract, base vs radix
 - [rules/adapting.md](./rules/adapting.md) - reuse-first: preserve the design (no over-customizing), reuse examples + a block's own elements, real data, don't invent APIs
 - [rules/craft.md](./rules/craft.md) - make it exceptional: point of view, hierarchy, density, states, responsive, motion, the bar
 - [rules/quality.md](./rules/quality.md) - security, accessibility, and scroll gates (the done gate)

.claude/skills/reui/rules/cli.md

@@ -2,7 +2,7 @@
 
 ## Registry setup (one-time, per project)
 
-Free items (the 17 components and all `c-*` examples) need only the plain string registry in `components.json`:
+Free items (the 20 components and all `c-*` examples) need only the plain string registry in `components.json`:
 
 ```json
 { "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
@@ -54,7 +54,7 @@ bunx --bun shadcn@latest add @reui/<name> --yes # bun
 
 ## Free vs premium boundary
 
-- Public, no key: `c-*` examples and the 17 components (`@reui/data-grid`, `@reui/badge`, ...) that those examples depend on.
+- Public, no key: `c-*` examples and the 20 components (`@reui/data-grid`, `@reui/badge`, ...) that those examples depend on.
 - Key required at install: blocks (`@reui/<category>-N`) need a Pro or Ultimate license; Motion Icons (`@reui/icons/...`) and templates need Ultimate.
 
 If an install 401/403s, the license key is missing, invalid, or the plan does not cover that resource (blocks: Pro or higher; icons and templates: Ultimate). Point the user to https://reui.io/account (their key) or https://reui.io/pricing (upgrade).

.claude/skills/reui/rules/components.md

@@ -1,24 +1,23 @@
 # ReUI components
 
-The 19 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
+The 20 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
 
 **Rule one: never guess a component's API. Read it first.** Call **`get_component(name)`** for its inline `api` (props + usage, no web fetch), and **share the result's `docsUrl`** (the component's API documentation page) with the user whenever you work with that component's API, so they have the full reference (the `/llms.txt` index is a further fallback). Then call **`get_examples(name)`** to install a worked example and copy real composition. The contracts below are first-try orientation (required props, composition shape, the one gotcha); the inline `api` is the full reference. No single block fits? Compose: search the components you need, read each `get_component`, install a `get_examples` example per component, and adapt.
 
 ## data-grid (the flagship - read its API every time)
 
-`data-grid` wraps TanStack Table v8. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
+`data-grid` wraps TanStack Table v9. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
 
-- Build a TanStack table instance with `useReactTable(...)` (columns, data, the feature models you need: sorting, pagination, row selection).
+- Build a TanStack table instance with `useTable({ features: dataGridFeatures, ... })` (columns, data). `dataGridFeatures` is exported by the primitive and already bundles sorting, filtering, pagination, row selection, expanding, pinning, resizing and faceting, so there are no per-table row models to wire.
 - Pass that instance to `<DataGrid table={table} recordCount={total}>`.
 - Compose the body with `DataGridTable` inside `DataGrid`, and enable features through `tableLayout` (e.g. `{ headerSticky: true, columnsResizable: true }`), not ad-hoc classes.
 - Server-side data uses the documented fetch shape (`recordCount` is the total for pagination).
 
 ```tsx
-const table = useReactTable({
+const table = useTable({
+  features: dataGridFeatures,
   data,
   columns,
-  getCoreRowModel: getCoreRowModel(),
-  // add sorting/pagination/selection models per the API
 })
 
 <DataGrid table={table} recordCount={data.length}>
@@ -28,9 +27,9 @@ const table = useReactTable({
 
 Common mistakes:
 
-- **Incorrect:** `<DataGrid data={rows} columns={cols} />` - these props do not exist. **Correct:** build a `useReactTable` instance and pass `table={table}` + `recordCount`.
+- **Incorrect:** `<DataGrid data={rows} columns={cols} />` - these props do not exist. **Correct:** build a `useTable({ features: dataGridFeatures, ... })` instance and pass `table={table}` + `recordCount`.
 - **Incorrect:** a raw `<table>` / hand-rolled pagination. **Correct:** use `data-grid`; read its API for sticky header, pagination, virtualization, row selection.
-- **Incorrect:** styling rows/cells with arbitrary classes. **Correct:** drive layout via `tableLayout` and the documented `ColumnMeta` (e.g. `cellClassName`, `headerTitle`).
+- **Incorrect:** styling rows/cells with arbitrary classes. **Correct:** drive layout via `tableLayout` and the primitive's `DataGridColumnMeta` (e.g. `cellClassName`, `headerTitle`), set through the bundle's `columnMeta` slot.
 
 ## event-calendar
 
@@ -312,6 +311,19 @@ const [value, setValue] = useState<DateSelectorValue | undefined>()
 
 **Gotcha:** isometric layered artwork for empty states and illustrations; style the inner icon via its own `className`. Mark purely decorative stacks `aria-hidden="true"` and keep the real label in surrounding copy.
 
+## icon-tile
+
+**Required:** one child icon
+**Shape:**
+
+```tsx
+<IconTile variant="elevated" size="lg">
+  <PackageIcon />
+</IconTile>
+```
+
+**Gotcha:** the square container an icon sits in, so every list row, feature card and empty state shares one affordance. `variant`: `outline` (default) | `elevated` (muted fill, raised ring) | `soft` (tinted nested, tone from currentColor) | `solid` (filled tone, contrasting glyph) | `frame` (double container). `soft` and `solid` retint from one text color class (they default to `text-primary`). `size`: `xs | sm | default | lg | xl` (24/32/40/48/64px tile, glyph scales 12/14/16/20/24px). `radius`: `default | full`. Do not set a `size-*` class on the child icon unless you mean to override the tile's glyph size; recolor with `className` on the tile, not the icon.
+
 ## alert
 
 **Required:** `Alert` > `AlertTitle`

.claude/skills/reui/rules/registry.md

@@ -2,7 +2,7 @@
 
 ReUI is a shadcn-compatible registry with four entity types. **Examples and blocks are built FROM components** - reuse them, don't rebuild.
 
-- **component** - one of the 17 ReUI building blocks with a real API (`data-grid`, `kanban`, `filters`, `date-selector`, `tree`, ...). Install directly (`@reui/data-grid`) or let it come in as a dependency of an example/block. Free. Read its API with `get_component(name)`.
+- **component** - one of the 20 ReUI building blocks with a real API (`data-grid`, `kanban`, `filters`, `date-selector`, `tree`, ...). Install directly (`@reui/data-grid`) or let it come in as a dependency of an example/block. Free. Read its API with `get_component(name)`.
 - **example** - a free `c-*` single-pattern use-case of a component (`c-kanban-1`, `c-data-grid-3`). Install one and read it to copy real composition. Find a component's examples with `get_examples(name)`.
 - **block** - a premium, full-page section that composes several components (`data-grid-2`, `pricing-page-1`). Pro or Ultimate license at install. Adapts to your active theme via semantic tokens.
 - **icon** - Motion Icons in 4 styles (outline, solid, duotone, filled), static (`@reui/icons/default/<style>/<name>`) and hover-animated (`@reui/icons/animated/<style>/<name>`). Ultimate license at install. See [icons.md](./icons.md).
@@ -27,7 +27,7 @@ Blocks adapt to your active theme through semantic tokens and CSS variables - ch
 
 ## Free vs premium
 
-- **Free, no key:** the 17 components, all `c-*` examples, the ReUI MCP, and this skill.
+- **Free, no key:** the 20 components, all `c-*` examples, the ReUI MCP, and this skill.
 - **Premium, license required at install:** blocks (Pro or Ultimate), Motion Icons and templates (Ultimate). Set `REUI_LICENSE_KEY` (see [cli.md](./cli.md)).
 
 ## Component API index

.claude/skills/reui/rules/workflow.md

@@ -8,7 +8,7 @@ The core ReUI loop. The MCP tells you what to install and gives you the API; the
 
 For everything else, call `search` with the user's intent. Pass structured hints whenever you can infer them - you are an LLM, so do the parsing the server cannot:
 
-- `type`: `"component"` (one of the 17 building blocks), `"example"` (a c-\* use-case), `"block"` (a full page/section), `"icon"`.
+- `type`: `"component"` (one of the 20 building blocks), `"example"` (a c-\* use-case), `"block"` (a full page/section), `"icon"`.
 - `component`: the ReUI component the request implies (`"data-grid"`, `"kanban"`, ...).
 - `category`, `features` (e.g. `["sortable","pagination"]`), `free`.
 
@@ -40,7 +40,7 @@ Before writing code against any component an item uses:
 
 Installing files is not the end, and redesigning them defeats the point. First note the project's **base** so you write the right API - read `components.json` -> `style` and take the segment before the first `-` (`base-nova` -> Base UI, `radix-nova` -> Radix UI), see [components.md](./components.md). After `add`:
 
-1. **Read the added files**; keep the composition intact. For a block, verify the components are wired correctly (for `data-grid`: a `useReactTable` instance passed as `table`, `recordCount` set - see [components.md](./components.md)).
+1. **Read the added files**; keep the composition intact. For a block, verify the components are wired correctly (for `data-grid`: a `useTable({ features: dataGridFeatures, ... })` instance passed as `table`, `recordCount` set - see [components.md](./components.md)).
 2. **Replace demo data with the user's real data** via typed structures (see [adapting.md](./adapting.md)).
 3. **Fix icon imports** to the project's icon library (see [icons.md](./icons.md)).
 4. **Align styling** to semantic tokens and the active theme - no raw colors (see [styling.md](./styling.md)).

.cursor/rules/kpi-hybrid.mdc

@@ -1,11 +1,11 @@
 ---
-description: Только hybrid KPI — KpiStatGrid / row tile DNA (stats-12). Запрет SectionCards и hand-roll.
+description: Только hybrid KPI — KpiStatGrid / row tile DNA (stats-12 + IconTile). Запрет SectionCards и hand-roll.
 alwaysApply: true
 ---
 
-# KPI hybrid — только kit (stats-12 DNA)
+# KPI hybrid — только kit (stats-12 + IconTile)
 
-Preview: [stats-12](https://reui.io/preview/base/stats-12). SoT DNA = EvoBGP. Markup в проекте: `apps/web/src/components/reui-kit/kpi-stat-grid.tsx`.
+Preview: [stats-12](https://reui.io/preview/base/stats-12). Primitive: [icon-tile](https://reui.io/docs/components/base/icon-tile). SoT DNA = EvoBGP. Markup: `apps/web/src/components/reui-kit/kpi-stat-grid.tsx`.
 
 Связанные: [`reui-mcp.mdc`](reui-mcp.mdc), [`web-shadcn.mdc`](web-shadcn.mdc).
 
@@ -14,16 +14,17 @@ Preview: [stats-12](https://reui.io/preview/base/stats-12). SoT DNA = EvoBGP. Ma
 | Зона | Компонент / DNA |
 |------|-----------------|
 | KPI-полосы / dashboard metrics | только `reui-kit/KpiStatGrid` (через `OpsDashboard` / `DetailPanel.Metrics` при наличии) |
-| Markup | horizontal compact hybrid: icon left `Item` `size-10.5` `bg-muted` + `border-background` + shadow + `ItemMedia` + label/Badge + value ± `variant` |
-| Row icon tiles (data-grid) | та же DNA — semantic `text-*` на `bg-muted` |
-| Quick Actions | только `reui-kit/QuickActionGrid` (sibling hybrid DNA) |
+| Markup | horizontal compact hybrid: icon left `IconTile` `variant="elevated"` `className="size-10.5"` + label/Badge + value ± `variant` |
+| Row icon tiles (data-grid) | та же DNA — semantic `text-*` на IconTile elevated |
+| Quick Actions | только `reui-kit/QuickActionGrid` (sibling hybrid DNA, IconTile elevated) |
 
-Импорты UI: `@evobgp/ui/components/*`.
+Импорты UI: `@evobgp/ui/components/*`. IconTile: `@/components/reui/icon-tile`.
 
 ## NEVER
 
 - SectionCards / vertical-only KPI / hand-roll Frame/Card KPI
-- Другой size / radius / solid brand fill вместо `bg-muted`
+- `Item` `size-10.5` `bg-muted` hybrid вместо IconTile
+- Другой size / radius / solid brand fill вместо `elevated`
 - `card-35` как замена stats-12 hybrid KPI
 - Копипаст ReUI block в route — adapt через `reui-kit/`
-- Голый lucide `size-4` в name-cell без hybrid tile
+- Голый lucide `size-4` в name-cell без IconTile

.cursor/rules/reui-mcp.mdc

@@ -11,10 +11,14 @@ alwaysApply: true
 
 | Документ | URL |
 |----------|-----|
+| **Introduction** | https://reui.io/docs |
 | **llms.txt** | https://reui.io/llms.txt |
 | **Get Started** | https://reui.io/docs/get-started |
 | **Styling** | https://reui.io/docs/styling |
+| **Registry** | https://reui.io/docs/registry |
 | **MCP** | https://reui.io/docs/mcp |
+| **Agent Skills** | https://reui.io/docs/agent-skills |
+| **Cursor MCP** | https://reui.io/docs/cursor |
 | **Blocks** | https://reui.io/blocks |
 | **Settings blocks** | https://reui.io/blocks/application/settings |
 | **License** | https://reui.io/docs/license-setup |
@@ -27,6 +31,10 @@ alwaysApply: true
 
 **Обязательно** цитировать `previewUrl` + `docsUrl` для каждой UI-зоны.
 
+**Registry (актуально):** 20 free components — `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree` ([docs](https://reui.io/docs), [MCP](https://reui.io/docs/mcp)). Skill: `.claude/skills/reui` (v `668fb463eb`); обновление: `curl.exe -fsSL https://mcp.reui.io/install | node -` из корня проекта.
+
+**Важно:** skill описывает текущий registry (в т.ч. data-grid на TanStack Table v9). Установленный в проекте `@reui/data-grid` может оставаться на v8 до явного CLI upgrade — не ломать kit без миграции.
+
 ## Когда ReUI vs shadcn
 
 | Задача | Registry | Импорт |
@@ -39,7 +47,8 @@ alwaysApply: true
 | KPI | block [stats-12](https://reui.io/preview/base/stats-12) | `reui-kit/KpiStatGrid` — см. [`kpi-hybrid.mdc`](kpi-hybrid.mdc) |
 | Quick Actions | Frame tiles sibling KPI | `reui-kit/QuickActionGrid` |
 | Semantic badge / alert | `@reui` | `@/components/reui/badge`, `@/components/reui/alert` |
-| Number / date / autocomplete / color / kanban | `@reui` | `@/components/reui/*` |
+| Number / date / autocomplete / color / kanban / timeline / stepper / tree | `@reui` | `@/components/reui/*` |
+| Event Calendar / Gantt / Icon Tile (registry, 20 free) | `@reui` | CLI `@reui/<name>` → `@/components/reui/*` при установке |
 
 **Сложные списки** — `ResourcePage` (Frame + data-grid + filters), не raw `<table>`, не DataGridCard.  
 **Quick Actions** — только `QuickActionGrid` (не Card / Button grid).
@@ -66,9 +75,9 @@ alwaysApply: true
 
 ## Установленные ReUI (apps/web)
 
-**Components:** `frame`, `data-grid/*`, `filters`, `kanban`, `badge`, `alert`, `autocomplete`, `number-field`, `date-selector`, `color-picker`, `timeline`, `rating`, `phone-input`, `icon-stack`
+**Components:** `frame`, `data-grid/*`, `filters`, `badge`, `alert`, `autocomplete`, `number-field`, `date-selector`, `color-picker`, `timeline`, `rating`, `phone-input`, `icon-stack`, `icon-tile`, `stepper`
 
-**Kit:** `ResourcePage`, `KpiStatGrid`, `QuickActionGrid`, `OpsDashboard`, `KanbanBoard`, `DetailPanel`, `SettingsShell`
+**Kit:** `ResourcePage`, `KpiStatGrid`, `QuickActionGrid`, `OpsDashboard`, `DetailPanel`, `SettingsShell`
 
 **Blocks (reference):** `stats-12`, `card-35`, `auth-13`, `app-shell-12`, `settings-16`, `settings-8`, `empty-state-12`, `form-7`, `data-grid-filtering-2`, `dashboard-1`, …
 
@@ -101,6 +110,7 @@ REUI_LICENSE_KEY=
 - Hand-roll data-grid/filters/KPI/Quick Actions/settings rows при наличии `@reui` / kit
 - Смешивать Card и Frame на ops-экране
 - Ставить shadcn/ui blocks выше ReUI PRO
+- **settings-7** как target (`surface: card`) — только [settings-3](https://reui.io/preview/base/settings-3) / [settings-16](https://reui.io/preview/base/settings-16)
 
 ## Чеклист
 

.cursor/rules/web-shadcn.mdc

@@ -101,6 +101,9 @@ pnpm --filter @evobgp/web run build
 **WEB-22** | NEVER | Legacy Svelte UI удалён. Не восстанавливать `web-legacy-svelte/` и не копировать Svelte-паттерны в React-код.
 *Проверка:* отсутствие каталога `web-legacy-svelte/`; `pnpm --filter @evobgp/web run typecheck`.
 
+**WEB-23** | NEVER | **settings-7** как target ([preview](https://reui.io/preview/base/settings-7) — `surface: card`). Новые settings-экраны — [settings-3](https://reui.io/preview/base/settings-3) / [settings-16](https://reui.io/preview/base/settings-16) (`surface: frame`). Существующий `apps/web/src/components/settings/*` на DNA settings-7 **не** копировать как эталон; миграция — отдельный CHANGE.
+*Проверка:* review MCP `get_block` / cite; нет новых экранов с settings-7.
+
 ---
 
 ## Documentation Sync (Web)

.cursor/skills/reui/SKILL.md

@@ -1,17 +1,17 @@
 ---
 name: reui
-description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 17 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 20 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
 user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `42d70dcc3d`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `668fb463eb`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 
 ReUI is a shadcn-compatible registry. It ships four things you **reuse** - never redesign:
 
-- **components** - the 17 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
+- **components** - the 20 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
 - **examples** - free `c-*` single-pattern use-cases of a component (`c-kanban-1`); install one and read it to see exact composition
 - **blocks** - premium full-page sections that compose components (`data-grid-2`, `pricing-page-1`); Pro or Ultimate license at install
 - **icons** - Motion Icons in 4 styles, static + hover-animated variants; Ultimate license at install
@@ -58,7 +58,7 @@ Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor
 
 - [rules/registry.md](./rules/registry.md) - the four types, the @reui registry, base/radix, free vs premium + license
 - [rules/workflow.md](./rules/workflow.md) - the find -> install -> read-API -> adapt loop (most important)
-- [rules/components.md](./rules/components.md) - the 17 components, the data-grid contract, base vs radix
+- [rules/components.md](./rules/components.md) - the 20 components, the data-grid contract, base vs radix
 - [rules/adapting.md](./rules/adapting.md) - reuse-first: preserve the design (no over-customizing), reuse examples + a block's own elements, real data, don't invent APIs
 - [rules/craft.md](./rules/craft.md) - make it exceptional: point of view, hierarchy, density, states, responsive, motion, the bar
 - [rules/quality.md](./rules/quality.md) - security, accessibility, and scroll gates (the done gate)

.cursor/skills/reui/rules/cli.md

@@ -2,7 +2,7 @@
 
 ## Registry setup (one-time, per project)
 
-Free items (the 17 components and all `c-*` examples) need only the plain string registry in `components.json`:
+Free items (the 20 components and all `c-*` examples) need only the plain string registry in `components.json`:
 
 ```json
 { "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
@@ -54,7 +54,7 @@ bunx --bun shadcn@latest add @reui/<name> --yes # bun
 
 ## Free vs premium boundary
 
-- Public, no key: `c-*` examples and the 17 components (`@reui/data-grid`, `@reui/badge`, ...) that those examples depend on.
+- Public, no key: `c-*` examples and the 20 components (`@reui/data-grid`, `@reui/badge`, ...) that those examples depend on.
 - Key required at install: blocks (`@reui/<category>-N`) need a Pro or Ultimate license; Motion Icons (`@reui/icons/...`) and templates need Ultimate.
 
 If an install 401/403s, the license key is missing, invalid, or the plan does not cover that resource (blocks: Pro or higher; icons and templates: Ultimate). Point the user to https://reui.io/account (their key) or https://reui.io/pricing (upgrade).

.cursor/skills/reui/rules/components.md

@@ -1,24 +1,23 @@
 # ReUI components
 
-The 19 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
+The 20 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
 
 **Rule one: never guess a component's API. Read it first.** Call **`get_component(name)`** for its inline `api` (props + usage, no web fetch), and **share the result's `docsUrl`** (the component's API documentation page) with the user whenever you work with that component's API, so they have the full reference (the `/llms.txt` index is a further fallback). Then call **`get_examples(name)`** to install a worked example and copy real composition. The contracts below are first-try orientation (required props, composition shape, the one gotcha); the inline `api` is the full reference. No single block fits? Compose: search the components you need, read each `get_component`, install a `get_examples` example per component, and adapt.
 
 ## data-grid (the flagship - read its API every time)
 
-`data-grid` wraps TanStack Table v8. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
+`data-grid` wraps TanStack Table v9. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
 
-- Build a TanStack table instance with `useReactTable(...)` (columns, data, the feature models you need: sorting, pagination, row selection).
+- Build a TanStack table instance with `useTable({ features: dataGridFeatures, ... })` (columns, data). `dataGridFeatures` is exported by the primitive and already bundles sorting, filtering, pagination, row selection, expanding, pinning, resizing and faceting, so there are no per-table row models to wire.
 - Pass that instance to `<DataGrid table={table} recordCount={total}>`.
 - Compose the body with `DataGridTable` inside `DataGrid`, and enable features through `tableLayout` (e.g. `{ headerSticky: true, columnsResizable: true }`), not ad-hoc classes.
 - Server-side data uses the documented fetch shape (`recordCount` is the total for pagination).
 
 ```tsx
-const table = useReactTable({
+const table = useTable({
+  features: dataGridFeatures,
   data,
   columns,
-  getCoreRowModel: getCoreRowModel(),
-  // add sorting/pagination/selection models per the API
 })
 
 <DataGrid table={table} recordCount={data.length}>
@@ -28,9 +27,9 @@ const table = useReactTable({
 
 Common mistakes:
 
-- **Incorrect:** `<DataGrid data={rows} columns={cols} />` - these props do not exist. **Correct:** build a `useReactTable` instance and pass `table={table}` + `recordCount`.
+- **Incorrect:** `<DataGrid data={rows} columns={cols} />` - these props do not exist. **Correct:** build a `useTable({ features: dataGridFeatures, ... })` instance and pass `table={table}` + `recordCount`.
 - **Incorrect:** a raw `<table>` / hand-rolled pagination. **Correct:** use `data-grid`; read its API for sticky header, pagination, virtualization, row selection.
-- **Incorrect:** styling rows/cells with arbitrary classes. **Correct:** drive layout via `tableLayout` and the documented `ColumnMeta` (e.g. `cellClassName`, `headerTitle`).
+- **Incorrect:** styling rows/cells with arbitrary classes. **Correct:** drive layout via `tableLayout` and the primitive's `DataGridColumnMeta` (e.g. `cellClassName`, `headerTitle`), set through the bundle's `columnMeta` slot.
 
 ## event-calendar
 
@@ -312,6 +311,19 @@ const [value, setValue] = useState<DateSelectorValue | undefined>()
 
 **Gotcha:** isometric layered artwork for empty states and illustrations; style the inner icon via its own `className`. Mark purely decorative stacks `aria-hidden="true"` and keep the real label in surrounding copy.
 
+## icon-tile
+
+**Required:** one child icon
+**Shape:**
+
+```tsx
+<IconTile variant="elevated" size="lg">
+  <PackageIcon />
+</IconTile>
+```
+
+**Gotcha:** the square container an icon sits in, so every list row, feature card and empty state shares one affordance. `variant`: `outline` (default) | `elevated` (muted fill, raised ring) | `soft` (tinted nested, tone from currentColor) | `solid` (filled tone, contrasting glyph) | `frame` (double container). `soft` and `solid` retint from one text color class (they default to `text-primary`). `size`: `xs | sm | default | lg | xl` (24/32/40/48/64px tile, glyph scales 12/14/16/20/24px). `radius`: `default | full`. Do not set a `size-*` class on the child icon unless you mean to override the tile's glyph size; recolor with `className` on the tile, not the icon.
+
 ## alert
 
 **Required:** `Alert` > `AlertTitle`

.cursor/skills/reui/rules/registry.md

@@ -2,7 +2,7 @@
 
 ReUI is a shadcn-compatible registry with four entity types. **Examples and blocks are built FROM components** - reuse them, don't rebuild.
 
-- **component** - one of the 17 ReUI building blocks with a real API (`data-grid`, `kanban`, `filters`, `date-selector`, `tree`, ...). Install directly (`@reui/data-grid`) or let it come in as a dependency of an example/block. Free. Read its API with `get_component(name)`.
+- **component** - one of the 20 ReUI building blocks with a real API (`data-grid`, `kanban`, `filters`, `date-selector`, `tree`, ...). Install directly (`@reui/data-grid`) or let it come in as a dependency of an example/block. Free. Read its API with `get_component(name)`.
 - **example** - a free `c-*` single-pattern use-case of a component (`c-kanban-1`, `c-data-grid-3`). Install one and read it to copy real composition. Find a component's examples with `get_examples(name)`.
 - **block** - a premium, full-page section that composes several components (`data-grid-2`, `pricing-page-1`). Pro or Ultimate license at install. Adapts to your active theme via semantic tokens.
 - **icon** - Motion Icons in 4 styles (outline, solid, duotone, filled), static (`@reui/icons/default/<style>/<name>`) and hover-animated (`@reui/icons/animated/<style>/<name>`). Ultimate license at install. See [icons.md](./icons.md).
@@ -27,7 +27,7 @@ Blocks adapt to your active theme through semantic tokens and CSS variables - ch
 
 ## Free vs premium
 
-- **Free, no key:** the 17 components, all `c-*` examples, the ReUI MCP, and this skill.
+- **Free, no key:** the 20 components, all `c-*` examples, the ReUI MCP, and this skill.
 - **Premium, license required at install:** blocks (Pro or Ultimate), Motion Icons and templates (Ultimate). Set `REUI_LICENSE_KEY` (see [cli.md](./cli.md)).
 
 ## Component API index

.cursor/skills/reui/rules/workflow.md

@@ -8,7 +8,7 @@ The core ReUI loop. The MCP tells you what to install and gives you the API; the
 
 For everything else, call `search` with the user's intent. Pass structured hints whenever you can infer them - you are an LLM, so do the parsing the server cannot:
 
-- `type`: `"component"` (one of the 17 building blocks), `"example"` (a c-\* use-case), `"block"` (a full page/section), `"icon"`.
+- `type`: `"component"` (one of the 20 building blocks), `"example"` (a c-\* use-case), `"block"` (a full page/section), `"icon"`.
 - `component`: the ReUI component the request implies (`"data-grid"`, `"kanban"`, ...).
 - `category`, `features` (e.g. `["sortable","pagination"]`), `free`.
 
@@ -40,7 +40,7 @@ Before writing code against any component an item uses:
 
 Installing files is not the end, and redesigning them defeats the point. First note the project's **base** so you write the right API - read `components.json` -> `style` and take the segment before the first `-` (`base-nova` -> Base UI, `radix-nova` -> Radix UI), see [components.md](./components.md). After `add`:
 
-1. **Read the added files**; keep the composition intact. For a block, verify the components are wired correctly (for `data-grid`: a `useReactTable` instance passed as `table`, `recordCount` set - see [components.md](./components.md)).
+1. **Read the added files**; keep the composition intact. For a block, verify the components are wired correctly (for `data-grid`: a `useTable({ features: dataGridFeatures, ... })` instance passed as `table`, `recordCount` set - see [components.md](./components.md)).
 2. **Replace demo data with the user's real data** via typed structures (see [adapting.md](./adapting.md)).
 3. **Fix icon imports** to the project's icon library (see [icons.md](./icons.md)).
 4. **Align styling** to semantic tokens and the active theme - no raw colors (see [styling.md](./styling.md)).

.gitea/README.md

@@ -28,6 +28,8 @@ Runner: `ubuntu-latest`, **bird2** из apt, Docker для job **release**.
 
 Если releasable-коммитов нет — semantic-release no-op, образы не публикуются.
 
+Повтор упавшего **release** (тег уже есть, bake нет): detect берёт `v*` на `HEAD` и всё равно пушит образы. Подробнее: [docs/releasing.md](../docs/releasing.md#перезапуск-упавшего-job-release).
+
 ### Секреты
 
 **`ACTIONS_PAT`**: push tags, releases, Container Registry. Fallback: **`gitea.token`**.
@@ -35,11 +37,11 @@ Runner: `ubuntu-latest`, **bird2** из apt, Docker для job **release**.
 ### Теги образов
 
 ```text
-git.shts.su/<owner>/<имя>:latest
-git.shts.su/<owner>/<имя>:v1.2.3
-git.shts.su/<owner>/<имя>:1.2.3
-git.shts.su/<owner>/<имя>:<short-sha>
-git.shts.su/<owner>/<имя>:sha-<full-sha>
+git.shx.one/<owner>/<имя>:latest
+git.shx.one/<owner>/<имя>:v1.2.3
+git.shx.one/<owner>/<имя>:1.2.3
+git.shx.one/<owner>/<имя>:<short-sha>
+git.shx.one/<owner>/<имя>:sha-<full-sha>
 ```
 
 Имена образов: `evobgp-api`, `evobgp-all`, `evobgp-scheduler`, `evobgp-ingest`, `evobgp-render`, `evobgp-deploy`, `evobgp-node`, `evobgp-web`, `evobgp-web-all`, `evobgp-agent`, `evobgp-bird2`.
@@ -49,7 +51,7 @@ git.shts.su/<owner>/<имя>:sha-<full-sha>
 Пример:
 
 ```bash
-docker pull git.shts.su/myuser/evobgp-api:1.2.3
+docker pull git.shx.one/myuser/evobgp-api:1.2.3
 ```
 
 См. [deploy/docker/README.md](../deploy/docker/README.md), [docs/quickstart.md](../docs/quickstart.md).

.gitea/workflows/ci.yaml

@@ -303,6 +303,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+          fetch-tags: true
           token: ${{ secrets.ACTIONS_PAT || gitea.token }}
           persist-credentials: true
       - uses: actions/setup-node@v4
@@ -317,14 +318,28 @@ jobs:
       - name: Semantic release
         run: npx semantic-release
         env:
-          GITEA_URL: https://git.shts.su
+          GITEA_URL: https://git.shx.one
           GITEA_TOKEN: ${{ secrets.ACTIONS_PAT || gitea.token }}
       - name: Detect new release
         id: rel
         run: |
           set -euo pipefail
+          version=""
           if [ -f .release-version ]; then
-            echo "version=$(tr -d '[:space:]' < .release-version)" >> "$GITHUB_OUTPUT"
+            version="$(tr -d '[:space:]' < .release-version)"
+            echo "New release from semantic-release: $version"
+          else
+            # Re-run after a failed docker step: tag already exists, successCmd
+            # did not write .release-version (semantic-release is a no-op).
+            git fetch --tags --force origin || true
+            tag="$(git tag --points-at HEAD --list 'v*.*.*' | sort -V | tail -n1 || true)"
+            if [ -n "${tag:-}" ]; then
+              version="${tag#v}"
+              echo "Reuse existing tag $tag on HEAD (release retry)"
+            fi
+          fi
+          if [ -n "${version:-}" ]; then
+            echo "version=$version" >> "$GITHUB_OUTPUT"
             echo "released=true" >> "$GITHUB_OUTPUT"
           else
             echo "released=false" >> "$GITHUB_OUTPUT"
@@ -348,20 +363,20 @@ jobs:
         if: steps.rel.outputs.released == 'true'
         uses: docker/login-action@v3
         with:
-          registry: git.shts.su
+          registry: git.shx.one
           username: ${{ gitea.actor }}
           password: ${{ secrets.ACTIONS_PAT || gitea.token }}
       - name: Build and push images (bake)
         if: steps.rel.outputs.released == 'true'
         env:
-          REGISTRY: git.shts.su/${{ steps.meta.outputs.owner_lc }}
+          REGISTRY: git.shx.one/${{ steps.meta.outputs.owner_lc }}
           IMAGE_TAG: latest
           VERSION: ${{ steps.meta.outputs.version }}
           SHORT_SHA: ${{ steps.meta.outputs.short_sha }}
           SHA_FULL: ${{ github.sha }}
           BUILD_TIME: ${{ steps.meta.outputs.build_time }}
-          CACHE_REF_GO: git.shts.su/${{ steps.meta.outputs.owner_lc }}/evobgp-buildcache:go-buildcache
-          CACHE_REF_WEB: git.shts.su/${{ steps.meta.outputs.owner_lc }}/evobgp-buildcache:web-buildcache
+          CACHE_REF_GO: git.shx.one/${{ steps.meta.outputs.owner_lc }}/evobgp-buildcache:go-buildcache
+          CACHE_REF_WEB: git.shx.one/${{ steps.meta.outputs.owner_lc }}/evobgp-buildcache:web-buildcache
           BUILDX_BAKE_ENTITLEMENTS_FS: "0"
         run: |
           set -euxo pipefail

.opencode/skills/reui/SKILL.md

@@ -1,17 +1,17 @@
 ---
 name: reui
-description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 17 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 20 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
 user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `42d70dcc3d`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `668fb463eb`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 
 ReUI is a shadcn-compatible registry. It ships four things you **reuse** - never redesign:
 
-- **components** - the 17 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
+- **components** - the 20 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
 - **examples** - free `c-*` single-pattern use-cases of a component (`c-kanban-1`); install one and read it to see exact composition
 - **blocks** - premium full-page sections that compose components (`data-grid-2`, `pricing-page-1`); Pro or Ultimate license at install
 - **icons** - Motion Icons in 4 styles, static + hover-animated variants; Ultimate license at install
@@ -58,7 +58,7 @@ Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor
 
 - [rules/registry.md](./rules/registry.md) - the four types, the @reui registry, base/radix, free vs premium + license
 - [rules/workflow.md](./rules/workflow.md) - the find -> install -> read-API -> adapt loop (most important)
-- [rules/components.md](./rules/components.md) - the 17 components, the data-grid contract, base vs radix
+- [rules/components.md](./rules/components.md) - the 20 components, the data-grid contract, base vs radix
 - [rules/adapting.md](./rules/adapting.md) - reuse-first: preserve the design (no over-customizing), reuse examples + a block's own elements, real data, don't invent APIs
 - [rules/craft.md](./rules/craft.md) - make it exceptional: point of view, hierarchy, density, states, responsive, motion, the bar
 - [rules/quality.md](./rules/quality.md) - security, accessibility, and scroll gates (the done gate)

.opencode/skills/reui/rules/cli.md

@@ -2,7 +2,7 @@
 
 ## Registry setup (one-time, per project)
 
-Free items (the 17 components and all `c-*` examples) need only the plain string registry in `components.json`:
+Free items (the 20 components and all `c-*` examples) need only the plain string registry in `components.json`:
 
 ```json
 { "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
@@ -54,7 +54,7 @@ bunx --bun shadcn@latest add @reui/<name> --yes # bun
 
 ## Free vs premium boundary
 
-- Public, no key: `c-*` examples and the 17 components (`@reui/data-grid`, `@reui/badge`, ...) that those examples depend on.
+- Public, no key: `c-*` examples and the 20 components (`@reui/data-grid`, `@reui/badge`, ...) that those examples depend on.
 - Key required at install: blocks (`@reui/<category>-N`) need a Pro or Ultimate license; Motion Icons (`@reui/icons/...`) and templates need Ultimate.
 
 If an install 401/403s, the license key is missing, invalid, or the plan does not cover that resource (blocks: Pro or higher; icons and templates: Ultimate). Point the user to https://reui.io/account (their key) or https://reui.io/pricing (upgrade).

.opencode/skills/reui/rules/components.md

@@ -1,24 +1,23 @@
 # ReUI components
 
-The 19 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
+The 20 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
 
 **Rule one: never guess a component's API. Read it first.** Call **`get_component(name)`** for its inline `api` (props + usage, no web fetch), and **share the result's `docsUrl`** (the component's API documentation page) with the user whenever you work with that component's API, so they have the full reference (the `/llms.txt` index is a further fallback). Then call **`get_examples(name)`** to install a worked example and copy real composition. The contracts below are first-try orientation (required props, composition shape, the one gotcha); the inline `api` is the full reference. No single block fits? Compose: search the components you need, read each `get_component`, install a `get_examples` example per component, and adapt.
 
 ## data-grid (the flagship - read its API every time)
 
-`data-grid` wraps TanStack Table v8. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
+`data-grid` wraps TanStack Table v9. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
 
-- Build a TanStack table instance with `useReactTable(...)` (columns, data, the feature models you need: sorting, pagination, row selection).
+- Build a TanStack table instance with `useTable({ features: dataGridFeatures, ... })` (columns, data). `dataGridFeatures` is exported by the primitive and already bundles sorting, filtering, pagination, row selection, expanding, pinning, resizing and faceting, so there are no per-table row models to wire.
 - Pass that instance to `<DataGrid table={table} recordCount={total}>`.
 - Compose the body with `DataGridTable` inside `DataGrid`, and enable features through `tableLayout` (e.g. `{ headerSticky: true, columnsResizable: true }`), not ad-hoc classes.
 - Server-side data uses the documented fetch shape (`recordCount` is the total for pagination).
 
 ```tsx
-const table = useReactTable({
+const table = useTable({
+  features: dataGridFeatures,
   data,
   columns,
-  getCoreRowModel: getCoreRowModel(),
-  // add sorting/pagination/selection models per the API
 })
 
 <DataGrid table={table} recordCount={data.length}>
@@ -28,9 +27,9 @@ const table = useReactTable({
 
 Common mistakes:
 
-- **Incorrect:** `<DataGrid data={rows} columns={cols} />` - these props do not exist. **Correct:** build a `useReactTable` instance and pass `table={table}` + `recordCount`.
+- **Incorrect:** `<DataGrid data={rows} columns={cols} />` - these props do not exist. **Correct:** build a `useTable({ features: dataGridFeatures, ... })` instance and pass `table={table}` + `recordCount`.
 - **Incorrect:** a raw `<table>` / hand-rolled pagination. **Correct:** use `data-grid`; read its API for sticky header, pagination, virtualization, row selection.
-- **Incorrect:** styling rows/cells with arbitrary classes. **Correct:** drive layout via `tableLayout` and the documented `ColumnMeta` (e.g. `cellClassName`, `headerTitle`).
+- **Incorrect:** styling rows/cells with arbitrary classes. **Correct:** drive layout via `tableLayout` and the primitive's `DataGridColumnMeta` (e.g. `cellClassName`, `headerTitle`), set through the bundle's `columnMeta` slot.
 
 ## event-calendar
 
@@ -312,6 +311,19 @@ const [value, setValue] = useState<DateSelectorValue | undefined>()
 
 **Gotcha:** isometric layered artwork for empty states and illustrations; style the inner icon via its own `className`. Mark purely decorative stacks `aria-hidden="true"` and keep the real label in surrounding copy.
 
+## icon-tile
+
+**Required:** one child icon
+**Shape:**
+
+```tsx
+<IconTile variant="elevated" size="lg">
+  <PackageIcon />
+</IconTile>
+```
+
+**Gotcha:** the square container an icon sits in, so every list row, feature card and empty state shares one affordance. `variant`: `outline` (default) | `elevated` (muted fill, raised ring) | `soft` (tinted nested, tone from currentColor) | `solid` (filled tone, contrasting glyph) | `frame` (double container). `soft` and `solid` retint from one text color class (they default to `text-primary`). `size`: `xs | sm | default | lg | xl` (24/32/40/48/64px tile, glyph scales 12/14/16/20/24px). `radius`: `default | full`. Do not set a `size-*` class on the child icon unless you mean to override the tile's glyph size; recolor with `className` on the tile, not the icon.
+
 ## alert
 
 **Required:** `Alert` > `AlertTitle`

.opencode/skills/reui/rules/registry.md

@@ -2,7 +2,7 @@
 
 ReUI is a shadcn-compatible registry with four entity types. **Examples and blocks are built FROM components** - reuse them, don't rebuild.
 
-- **component** - one of the 17 ReUI building blocks with a real API (`data-grid`, `kanban`, `filters`, `date-selector`, `tree`, ...). Install directly (`@reui/data-grid`) or let it come in as a dependency of an example/block. Free. Read its API with `get_component(name)`.
+- **component** - one of the 20 ReUI building blocks with a real API (`data-grid`, `kanban`, `filters`, `date-selector`, `tree`, ...). Install directly (`@reui/data-grid`) or let it come in as a dependency of an example/block. Free. Read its API with `get_component(name)`.
 - **example** - a free `c-*` single-pattern use-case of a component (`c-kanban-1`, `c-data-grid-3`). Install one and read it to copy real composition. Find a component's examples with `get_examples(name)`.
 - **block** - a premium, full-page section that composes several components (`data-grid-2`, `pricing-page-1`). Pro or Ultimate license at install. Adapts to your active theme via semantic tokens.
 - **icon** - Motion Icons in 4 styles (outline, solid, duotone, filled), static (`@reui/icons/default/<style>/<name>`) and hover-animated (`@reui/icons/animated/<style>/<name>`). Ultimate license at install. See [icons.md](./icons.md).
@@ -27,7 +27,7 @@ Blocks adapt to your active theme through semantic tokens and CSS variables - ch
 
 ## Free vs premium
 
-- **Free, no key:** the 17 components, all `c-*` examples, the ReUI MCP, and this skill.
+- **Free, no key:** the 20 components, all `c-*` examples, the ReUI MCP, and this skill.
 - **Premium, license required at install:** blocks (Pro or Ultimate), Motion Icons and templates (Ultimate). Set `REUI_LICENSE_KEY` (see [cli.md](./cli.md)).
 
 ## Component API index

.opencode/skills/reui/rules/workflow.md

@@ -8,7 +8,7 @@ The core ReUI loop. The MCP tells you what to install and gives you the API; the
 
 For everything else, call `search` with the user's intent. Pass structured hints whenever you can infer them - you are an LLM, so do the parsing the server cannot:
 
-- `type`: `"component"` (one of the 17 building blocks), `"example"` (a c-\* use-case), `"block"` (a full page/section), `"icon"`.
+- `type`: `"component"` (one of the 20 building blocks), `"example"` (a c-\* use-case), `"block"` (a full page/section), `"icon"`.
 - `component`: the ReUI component the request implies (`"data-grid"`, `"kanban"`, ...).
 - `category`, `features` (e.g. `["sortable","pagination"]`), `free`.
 
@@ -40,7 +40,7 @@ Before writing code against any component an item uses:
 
 Installing files is not the end, and redesigning them defeats the point. First note the project's **base** so you write the right API - read `components.json` -> `style` and take the segment before the first `-` (`base-nova` -> Base UI, `radix-nova` -> Radix UI), see [components.md](./components.md). After `add`:
 
-1. **Read the added files**; keep the composition intact. For a block, verify the components are wired correctly (for `data-grid`: a `useReactTable` instance passed as `table`, `recordCount` set - see [components.md](./components.md)).
+1. **Read the added files**; keep the composition intact. For a block, verify the components are wired correctly (for `data-grid`: a `useTable({ features: dataGridFeatures, ... })` instance passed as `table`, `recordCount` set - see [components.md](./components.md)).
 2. **Replace demo data with the user's real data** via typed structures (see [adapting.md](./adapting.md)).
 3. **Fix icon imports** to the project's icon library (see [icons.md](./icons.md)).
 4. **Align styling** to semantic tokens and the active theme - no raw colors (see [styling.md](./styling.md)).

.releaserc.json

@@ -37,7 +37,7 @@
     [
       "@markwylde/semantic-release-gitea",
       {
-        "giteaUrl": "https://git.shts.su",
+        "giteaUrl": "https://git.shx.one",
         "assets": [
           {
             "path": "CHANGELOG.md",

AGENTS.md

@@ -73,4 +73,6 @@ pnpm --filter @evobgp/web run build
 
 **UI design contract:** [`docs/ui-design-contract.md`](docs/ui-design-contract.md) — surface `frame`, kit `apps/web/src/components/reui-kit/`.
 
+Docs: [Introduction](https://reui.io/docs) · [llms.txt](https://reui.io/llms.txt) · [MCP](https://reui.io/docs/mcp) · [Agent Skills](https://reui.io/docs/agent-skills). Skill: `.claude/skills/reui` (`668fb463eb`).
+
 UI-задачи начинаются с MCP `user-reui` (`surface: "frame"`) + `plugin-shadcn-shadcn`, затем CLI `pnpm dlx shadcn@latest add ...` из `apps/web`. См. также [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc) для Context7 ID стека.

README.md

@@ -22,8 +22,8 @@ Control plane для управления префиксами, модулями
 
 ```powershell
 cd deploy\compose
-Copy-Item .env.example .env -Force   # EVOBGP_REGISTRY=git.shts.su/<owner>
-docker login git.shts.su
+Copy-Item .env.example .env -Force   # EVOBGP_REGISTRY=git.shx.one/<owner>
+docker login git.shx.one
 docker compose --profile microvps pull
 docker compose --profile microvps up -d
 ```

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

@@ -40,7 +40,7 @@ export function ChartDonutMetric({
   }
 
   return (
-    <div className={cn('flex items-center gap-6', className)}>
+    <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>
           <Pie
@@ -75,7 +75,7 @@ export function ChartDonutMetric({
         </PieChart>
       </ChartContainer>
 
-      <ul className="min-w-0 flex-1 space-y-3">
+      <ul className="flex w-full min-w-0 max-w-xs flex-col gap-3 sm:w-auto sm:min-w-[10rem]">
         {slices.map((slice) => {
           const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
           return (

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

@@ -51,7 +51,7 @@ export function NetworkOverviewAnalyticsCard({
           label: 'Offline',
           percent: 100 - speakersPct,
         }}
-        footer={`Пиры Established: ${net.peersEstablished}/${net.peersEnabled}`}
+        footer={`Пиры установлены: ${net.peersEstablished}/${net.peersEnabled}`}
       />
     </div>
   )

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

@@ -1,62 +1,2 @@
-import { type ReactNode } from "react"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-  FieldSeparator,
-  FieldTitle,
-} from "@evobgp/ui/components/field"
-
-interface SettingRowProps {
-  title: string
-  description?: ReactNode
-  children: ReactNode
-  last?: boolean
-  labelFor?: string
-  contentClassName?: string
-  titleAddon?: ReactNode
-}
-
-export function SettingRow({
-  title,
-  description,
-  children,
-  last,
-  labelFor,
-  contentClassName,
-  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">
-            {labelFor ? (
-              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
-            ) : (
-              <FieldTitle>{title}</FieldTitle>
-            )}
-            {titleAddon}
-          </div>
-
-          {description ? (
-            <FieldDescription>{description}</FieldDescription>
-          ) : null}
-        </div>
-
-        <FieldContent
-          className={cn("min-w-0 @md/field-group:w-78", contentClassName)}
-        >
-          <div className="flex w-full justify-start @md/field-group:justify-end">
-            {children}
-          </div>
-        </FieldContent>
-      </Field>
-
-      {!last ? <FieldSeparator /> : null}
-    </>
-  )
-}
+/** @deprecated Import from `@/components/settings/setting-row` — settings-7 is not a target. */
+export { SettingRow } from '@/components/settings/setting-row'

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

@@ -1,53 +1,2 @@
-import { type ReactNode } from 'react'
-
-import { cn } from '@evobgp/ui/lib/utils'
-import {
-  Frame,
-  FrameDescription,
-  FrameFooter,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
-
-interface SettingsCardProps {
-  title: string
-  description?: string
-  children: ReactNode
-  footer?: ReactNode
-  className?: string
-  contentClassName?: string
-  footerClassName?: string
-}
-
-/** Settings section — Frame surface. Preview: https://reui.io/preview/base/settings-16 */
-export function SettingsCard({
-  title,
-  description,
-  children,
-  footer,
-  className,
-  contentClassName,
-  footerClassName,
-}: SettingsCardProps) {
-  return (
-    <Frame dense spacing="sm" className={cn('w-full gap-0 p-0', className)}>
-      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
-        <FrameHeader className="gap-0 border-b px-5 py-3">
-          <FrameTitle>{title}</FrameTitle>
-          {description ? <FrameDescription>{description}</FrameDescription> : null}
-        </FrameHeader>
-
-        <div className={cn('min-w-0', contentClassName)}>{children}</div>
-
-        {footer ? (
-          <FrameFooter
-            className={cn('justify-end gap-2 border-t px-5 py-3', footerClassName)}
-          >
-            {footer}
-          </FrameFooter>
-        ) : null}
-      </FramePanel>
-    </Frame>
-  )
-}
+/** @deprecated Import from `@/components/settings/settings-card` — settings-7 is not a target. */
+export { SettingsCard } from '@/components/settings/settings-card'

apps/web/src/components/blocks/settings-7/components/settings-field-group.tsx

@@ -1,37 +1,2 @@
-import { type ReactNode } from "react"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import {
-  FieldDescription,
-  FieldGroup,
-  FieldLegend,
-  FieldSet,
-} from "@evobgp/ui/components/field"
-
-interface SettingsFieldGroupProps {
-  legend: string
-  description: string
-  children: ReactNode
-  className?: string
-  fieldGroupClassName?: string
-}
-
-export function SettingsFieldGroup({
-  legend,
-  description,
-  children,
-  className,
-  fieldGroupClassName,
-}: SettingsFieldGroupProps) {
-  return (
-    <FieldSet className={cn("gap-0", className)}>
-      <FieldLegend className="sr-only">{legend}</FieldLegend>
-      {/* Description */}
-      <FieldDescription className="sr-only">{description}</FieldDescription>
-      {/* List */}
-      <FieldGroup className={cn("gap-0", fieldGroupClassName)}>
-        {children}
-      </FieldGroup>
-    </FieldSet>
-  )
-}
+/** @deprecated Import from `@/components/settings/settings-field-group` — settings-7 is not a target. */
+export { SettingsFieldGroup } from '@/components/settings/settings-field-group'

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

@@ -1,19 +1,16 @@
-import { Button } from '@evobgp/ui/components/button'
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '@evobgp/ui/components/drawer'
-import type { ReactElement, ReactNode } from 'react'
+import { useState, type ReactElement, type ReactNode } from 'react'
 
 import {
-  confirmDrawerContentClassName,
-  DrawerActionsFooter,
-} from '@/components/drawer-layout'
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@evobgp/ui/components/alert-dialog'
 
 type ConfirmDialogBaseProps = {
   title: string
@@ -41,90 +38,52 @@ type ConfirmDialogControlled = ConfirmDialogBaseProps & {
 
 type ConfirmDialogProps = ConfirmDialogWithTrigger | ConfirmDialogControlled
 
-function ConfirmDrawerBody({
-  title,
-  description,
-  confirmLabel = 'Подтвердить',
-  cancelLabel = 'Отмена',
-  destructive,
-  onConfirm,
-  confirmDisabled,
-  confirmLoading,
-  confirmLoadingLabel,
-  controlled,
-}: ConfirmDialogBaseProps & { controlled?: boolean }) {
-  const confirmText =
-    confirmLoading && confirmLoadingLabel
-      ? confirmLoadingLabel
-      : confirmLoading
-        ? `${confirmLabel}…`
-        : confirmLabel
-
-  return (
-    <>
-      <DrawerHeader className="shrink-0 border-b border-border pb-4">
-        <DrawerTitle>{title}</DrawerTitle>
-        {description ? <DrawerDescription>{description}</DrawerDescription> : null}
-      </DrawerHeader>
-      <DrawerActionsFooter>
-        <DrawerClose render={<Button variant="outline" disabled={confirmLoading} />}>
-          {cancelLabel}
-        </DrawerClose>
-        {controlled ? (
-          <Button
-            variant={destructive ? 'destructive' : 'default'}
-            disabled={confirmDisabled || confirmLoading}
-            onClick={onConfirm}
-          >
-            {confirmText}
-          </Button>
-        ) : (
-          <DrawerClose
-            render={
-              <Button
-                variant={destructive ? 'destructive' : 'default'}
-                disabled={confirmDisabled || confirmLoading}
-              />
-            }
-            onClick={onConfirm}
-          >
-            {confirmText}
-          </DrawerClose>
-        )}
-      </DrawerActionsFooter>
-    </>
-  )
-}
-
+/** Confirm overlay — Alert Dialog. Preview: https://reui.io/preview/base/components/c-alert-dialog-11 */
 export function ConfirmDialog(props: ConfirmDialogProps) {
-  const bodyProps: ConfirmDialogBaseProps = {
-    title: props.title,
-    description: props.description,
-    confirmLabel: props.confirmLabel,
-    cancelLabel: props.cancelLabel,
-    destructive: props.destructive,
-    onConfirm: props.onConfirm,
-    confirmDisabled: props.confirmDisabled,
-    confirmLoading: props.confirmLoading,
-    confirmLoadingLabel: props.confirmLoadingLabel,
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false)
+  const isControlled = props.open !== undefined
+  const open = isControlled ? props.open : uncontrolledOpen
+
+  function setOpen(next: boolean) {
+    if (!isControlled) setUncontrolledOpen(next)
+    if (isControlled) props.onOpenChange?.(next)
   }
 
-  if (props.trigger) {
-    return (
-      <Drawer swipeDirection="right">
-        <DrawerTrigger render={props.trigger} />
-        <DrawerContent className={confirmDrawerContentClassName}>
-          <ConfirmDrawerBody {...bodyProps} />
-        </DrawerContent>
-      </Drawer>
-    )
+  const confirmText =
+    props.confirmLoading && props.confirmLoadingLabel
+      ? props.confirmLoadingLabel
+      : props.confirmLoading
+        ? `${props.confirmLabel ?? 'Подтвердить'}…`
+        : (props.confirmLabel ?? 'Подтвердить')
+
+  function handleConfirm() {
+    props.onConfirm()
+    if (!props.confirmLoading && !isControlled) setOpen(false)
   }
 
   return (
-    <Drawer open={props.open} onOpenChange={props.onOpenChange} swipeDirection="right">
-      <DrawerContent className={confirmDrawerContentClassName}>
-        <ConfirmDrawerBody {...bodyProps} controlled />
-      </DrawerContent>
-    </Drawer>
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      {props.trigger ? <AlertDialogTrigger render={props.trigger} /> : null}
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{props.title}</AlertDialogTitle>
+          {props.description ? (
+            <AlertDialogDescription>{props.description}</AlertDialogDescription>
+          ) : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={props.confirmLoading}>
+            {props.cancelLabel ?? 'Отмена'}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            variant={props.destructive ? 'destructive' : 'default'}
+            disabled={props.confirmDisabled || props.confirmLoading}
+            onClick={handleConfirm}
+          >
+            {confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }

apps/web/src/components/dashboard/dashboard-activity-timeline.tsx

@@ -50,7 +50,7 @@ export function DashboardActivityTimeline({
     <DashboardFramePanel
       title="Недавняя активность"
       description="Задачи, ревизии и сетевые события"
-      className="h-full"
+      className="h-full min-w-0"
     >
       {loading ? (
         <p className="text-muted-foreground px-4 py-6 text-sm">Загрузка…</p>
@@ -82,7 +82,7 @@ export function DashboardActivityTimeline({
                     </TimelineIndicator>
                   </TimelineHeader>
                   <TimelineContent className="min-w-0 pb-1 text-foreground">
-                    <TimelineTitle className="text-sm leading-snug font-normal">
+                    <TimelineTitle className="text-sm leading-snug font-normal break-words">
                       {item.message}
                     </TimelineTitle>
                     <div className="mt-2">

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

@@ -82,7 +82,7 @@ function buildKpis({
       icon: <Share2 aria-hidden />,
       iconClassName: 'text-success',
       value: loading ? '—' : `${network.peersEstablished}/${peersEnabled}`,
-      label: 'Пиры Established',
+      label: 'Пиры установлены',
       footer: (
         <Badge variant="success-light" size="sm">
           {loading ? '…' : `${network.peersTotal} в каталоге`}
@@ -94,13 +94,13 @@ function buildKpis({
       icon: <ServerCog aria-hidden />,
       iconClassName: 'text-warning',
       value: loading ? '—' : `${network.speakersOnline}/${network.speakersTotal}`,
-      label: 'Спикеры online',
+      label: 'Спикеры в сети',
       footer: (
         <Badge
           variant={network.speakersOnline === network.speakersTotal ? 'success-light' : 'warning-light'}
           size="sm"
         >
-          {loading ? '…' : 'live-снимок'}
+          {loading ? '…' : 'онлайн'}
         </Badge>
       ),
     },

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

@@ -11,8 +11,8 @@ import {
 } from 'lucide-react'
 import { useCallback, useMemo, useState } from 'react'
 
-import { CategoryBadge, ModeBadge } from '@/components/category-badge'
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
 import { Badge } from '@/components/reui/badge'
 import { DataGrid } from '@/components/reui/data-grid/data-grid'
@@ -40,6 +40,7 @@ import {
   InputGroupButton,
   InputGroupInput,
 } from '@evobgp/ui/components/input-group'
+import { DATA_GRID_PAGINATION_RU } from '@/lib/data-grid-defaults'
 import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
 import {
@@ -51,20 +52,19 @@ import {
   type SortingState,
 } from '@tanstack/react-table'
 
-type ModuleSort = 'name' | 'type' | 'priority' | 'last_refreshed_at'
+type ModuleSort = 'name' | 'type' | 'priority'
 type EnabledFilter = 'all' | 'enabled' | 'disabled'
 
 const sortLabels: Record<ModuleSort, string> = {
   name: 'Название',
   type: 'Тип',
   priority: 'Приоритет',
-  last_refreshed_at: 'Обновлено',
 }
 
 const EMPTY_MESSAGE = 'Нет модулей по выбранным фильтрам.'
 
 function buildSorting(sortBy: ModuleSort): SortingState {
-  return [{ id: sortBy, desc: sortBy === 'last_refreshed_at' }]
+  return [{ id: sortBy, desc: false }]
 }
 
 export function DashboardModulesGrid({
@@ -119,9 +119,10 @@ export function DashboardModulesGrid({
         cell: ({ row }) => (
           <div className="flex min-w-0 items-center gap-2">
             <BoxesIcon className="text-muted-foreground size-4 shrink-0" aria-hidden />
-            <DataGridPrimaryCell title={row.original.name} accent="primary" className="max-w-[240px]" />
+            <DataGridPrimaryCell title={row.original.name} accent="primary" />
           </div>
         ),
+        minSize: 180,
         meta: { headerTitle: 'Модуль' },
       },
       {
@@ -138,30 +139,9 @@ export function DashboardModulesGrid({
         cell: ({ row }) => (
           <span className="font-mono text-sm tabular-nums">{row.original.priority}</span>
         ),
+        size: 88,
         meta: { headerTitle: 'Приоритет' },
       },
-      {
-        id: 'enabled',
-        accessorFn: (row) => (row.enabled !== false ? 'enabled' : 'disabled'),
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
-        cell: ({ row }) => <ModeBadge enabled={row.original.enabled !== false} />,
-        meta: { headerTitle: 'Состояние' },
-      },
-      {
-        id: 'last_refreshed_at',
-        accessorFn: (row) => row.last_refreshed_at ?? '',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
-        cell: ({ row }) => (
-          <DataGridMutedCell>
-            {row.original.last_refreshed_at
-              ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
-              : '—'}
-          </DataGridMutedCell>
-        ),
-        sortingFn: (a, b) =>
-          (a.original.last_refreshed_at ?? '').localeCompare(b.original.last_refreshed_at ?? ''),
-        meta: { headerTitle: 'Обновлено' },
-      },
     ],
     [],
   )
@@ -185,6 +165,7 @@ export function DashboardModulesGrid({
     <DashboardFramePanel
       title="Модули"
       description="Поиск, сортировка и быстрый переход к настройке"
+      className="min-w-0"
       actions={
         <Button variant="outline" size="sm" render={<Link to="/modules/new" />}>
           <PlusIcon />
@@ -204,14 +185,14 @@ export function DashboardModulesGrid({
           columnsVisibility: false,
           columnsResizable: false,
           columnsMovable: false,
-          width: 'fixed',
+          width: 'auto',
         }}
         tableClassNames={{ bodyRow: 'group/module-row cursor-pointer [&>td]:h-14' }}
         onRowClick={(row) => void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })}
       >
         <div className="flex flex-col">
-          <div className="flex flex-col gap-3 border-b px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
-            <InputGroup className="w-full min-w-40 sm:max-w-xs">
+          <div className="flex flex-col gap-3 border-b px-4 py-3 @3xl:flex-row @3xl:items-center @3xl:justify-between">
+            <InputGroup className="w-full min-w-0 @3xl:max-w-xs">
               <InputGroupAddon align="inline-start">
                 <SearchIcon className="text-muted-foreground size-4" aria-hidden />
               </InputGroupAddon>
@@ -337,8 +318,8 @@ export function DashboardModulesGrid({
           <div className="border-t px-4 py-3">
             {filteredModules.length > 0 ? (
               <DataGridPagination
+                {...DATA_GRID_PAGINATION_RU}
                 sizes={[10, 15, 20]}
-                info="{from}–{to} из {count}"
                 className="py-0"
               />
             ) : (

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

@@ -57,7 +57,7 @@ export function DashboardNetworkHealth({
       }
       primary={{
         value: loading ? '—' : `${utilization}%`,
-        label: mode === 'peers' ? 'Утилизация пиров' : 'Спикеры online',
+        label: mode === 'peers' ? 'Утилизация пиров' : 'Спикеры в сети',
         percent: loading ? 0 : utilization,
         badge: (
           <Badge variant="outline" radius="full" className="h-6 px-2 text-[10px]">
@@ -67,7 +67,7 @@ export function DashboardNetworkHealth({
       }}
       secondary={{
         value: loading ? '—' : offline,
-        label: mode === 'peers' ? 'Не Established' : 'Offline',
+        label: mode === 'peers' ? 'Не установлены' : 'Не в сети',
         percent: total > 0 ? Math.round((offline / total) * 100) : 0,
       }}
       footer={

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

@@ -7,7 +7,7 @@ const ACTIONS: QuickActionItem[] = [
   {
     id: 'lookup',
     title: 'Проверка IP/домена',
-    description: 'Membership в списках и community (entry + snapshot).',
+    description: 'Проверка IP в списках и BGP-сообществах.',
     to: '/lookup',
     icon: <Search aria-hidden />,
     iconClassName: 'text-primary',
@@ -23,7 +23,7 @@ const ACTIONS: QuickActionItem[] = [
   {
     id: 'communities',
     title: 'BGP-сообщества',
-    description: 'Справочник communities для политик экспорта.',
+    description: 'Справочник BGP-сообществ для политик экспорта.',
     to: '/directories',
     icon: <Tags aria-hidden />,
     iconClassName: 'text-info',
@@ -31,7 +31,7 @@ const ACTIONS: QuickActionItem[] = [
   {
     id: 'network',
     title: 'Сеть',
-    description: 'Обзор пиров, спикеров и live-сессий BGP.',
+    description: 'Обзор пиров, спикеров и живых BGP-сессий.',
     to: '/network',
     search: { tab: 'overview' },
     icon: <Network aria-hidden />,

apps/web/src/components/directories/community-create-dialog.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { FormDrawer } from '@/components/form-drawer'
+import { LoadingButton } from '@/components/loading-button'
+import {
+  useCreateCommunityMutation,
+  useUpdateCommunityMutation,
+} from '@/queries/directories'
+import type { BgpCommunity, BgpCommunityCreate, BgpCommunityPatch } from '@/types/api'
+
+interface CommunityFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  editTarget?: BgpCommunity | null
+}
+
+/** @see https://reui.io/preview/base/form-7 */
+export function CommunityFormDialog({
+  open,
+  onOpenChange,
+  editTarget = null,
+}: CommunityFormDialogProps) {
+  const createMutation = useCreateCommunityMutation()
+  const updateMutation = useUpdateCommunityMutation()
+  const saving = createMutation.isPending || updateMutation.isPending
+  const [community, setCommunity] = useState('')
+  const [title, setTitle] = useState('')
+
+  useEffect(() => {
+    if (!open) return
+    if (editTarget) {
+      setCommunity(editTarget.community ?? '')
+      setTitle(editTarget.title ?? '')
+    } else {
+      setCommunity('')
+      setTitle('')
+    }
+  }, [editTarget, open])
+
+  async function save() {
+    const value = community.trim()
+    if (!value) {
+      toast.error('Укажите community')
+      return
+    }
+    const titleTrimmed = title.trim()
+    try {
+      if (editTarget) {
+        const body: BgpCommunityPatch = {
+          community: value,
+          title: titleTrimmed || '',
+        }
+        await updateMutation.mutateAsync({ id: editTarget.id, body })
+      } else {
+        const body: BgpCommunityCreate = { community: value }
+        if (titleTrimmed) body.title = titleTrimmed
+        await createMutation.mutateAsync(body)
+      }
+      onOpenChange(false)
+    } catch {
+      // toast in mutation
+    }
+  }
+
+  return (
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={editTarget ? 'Редактировать сообщество' : 'Новое сообщество BGP'}
+      description="Тег для префиксов в фильтрах BIRD"
+      className="sm:max-w-sm"
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton type="button" loading={saving} onClick={() => void save()}>
+            {editTarget ? 'Сохранить' : 'Создать'}
+          </LoadingButton>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="comm-value">Community</Label>
+        <Input
+          id="comm-value"
+          placeholder="65000:100"
+          value={community}
+          onChange={(e) => setCommunity(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="comm-title">Название (опционально)</Label>
+        <Input
+          id="comm-title"
+          placeholder="Отображаемое имя"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
+  )
+}
+
+/** @deprecated Use CommunityFormDialog */
+export const CommunityCreateDialog = CommunityFormDialog

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

@@ -4,6 +4,7 @@ import { useMemo } from 'react'
 import { CategoryBadge } from '@/components/category-badge'
 import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
+import { DirectoriesRowActions } from '@/components/directories/directories-row-actions'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { BgpCommunity } from '@/types/api'
@@ -11,12 +12,16 @@ import type { BgpCommunity } from '@/types/api'
 export function DirectoriesCommunitiesGrid({
   items,
   isLoading = false,
+  canWrite = false,
+  onEdit,
 }: {
   items: BgpCommunity[]
   isLoading?: boolean
+  canWrite?: boolean
+  onEdit?: (row: BgpCommunity) => void
 }) {
-  const columns = useMemo<ColumnDef<BgpCommunity>[]>(
-    () => [
+  const columns = useMemo<ColumnDef<BgpCommunity>[]>(() => {
+    const cols: ColumnDef<BgpCommunity>[] = [
       {
         accessorKey: 'title',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
@@ -38,9 +43,23 @@ export function DirectoriesCommunitiesGrid({
         cell: () => <CategoryBadge>community</CategoryBadge>,
         meta: { headerTitle: 'Тип' },
       },
-    ],
-    [],
-  )
+    ]
+
+    if (canWrite && onEdit) {
+      cols.push({
+        id: 'actions',
+        enableSorting: false,
+        enableHiding: false,
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) => (
+          <DirectoriesRowActions onEdit={() => onEdit(row.original)} />
+        ),
+        meta: { headerTitle: 'Действия' },
+      })
+    }
+
+    return cols
+  }, [canWrite, onEdit])
 
   const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,

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

@@ -4,6 +4,7 @@ import { useMemo } from 'react'
 import { CategoryBadge } from '@/components/category-badge'
 import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DataGridSection } from '@/components/data-grid-shell'
+import { DirectoriesRowActions } from '@/components/directories/directories-row-actions'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { DohProfile } from '@/types/api'
@@ -11,12 +12,16 @@ import type { DohProfile } from '@/types/api'
 export function DirectoriesDohGrid({
   items,
   isLoading = false,
+  canWrite = false,
+  onEdit,
 }: {
   items: DohProfile[]
   isLoading?: boolean
+  canWrite?: boolean
+  onEdit?: (row: DohProfile) => void
 }) {
-  const columns = useMemo<ColumnDef<DohProfile>[]>(
-    () => [
+  const columns = useMemo<ColumnDef<DohProfile>[]>(() => {
+    const cols: ColumnDef<DohProfile>[] = [
       {
         id: 'name',
         accessorFn: (row) => row.name ?? row.url,
@@ -43,9 +48,23 @@ export function DirectoriesDohGrid({
         cell: () => <CategoryBadge>—</CategoryBadge>,
         meta: { headerTitle: 'По умолчанию' },
       },
-    ],
-    [],
-  )
+    ]
+
+    if (canWrite && onEdit) {
+      cols.push({
+        id: 'actions',
+        enableSorting: false,
+        enableHiding: false,
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) => (
+          <DirectoriesRowActions onEdit={() => onEdit(row.original)} />
+        ),
+        meta: { headerTitle: 'Действия' },
+      })
+    }
+
+    return cols
+  }, [canWrite, onEdit])
 
   const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
     data: items,

apps/web/src/components/directories/directories-row-actions.tsx

@@ -0,0 +1,36 @@
+import { MoreHorizontalIcon, PencilIcon } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@evobgp/ui/components/dropdown-menu'
+
+/**
+ * Data-grid row actions — ⋯ menu (ReUI / shadcn DropdownMenu).
+ * @see https://reui.io/preview/base/components/c-dropdown-menu-12
+ * @see https://reui.io/docs/components/base/dropdown-menu
+ */
+export function DirectoriesRowActions({ onEdit }: { onEdit: () => void }) {
+  return (
+    <div className="flex justify-end">
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger
+          render={
+            <Button type="button" variant="ghost" size="icon-sm" aria-label="Действия">
+              <MoreHorizontalIcon className="size-4" aria-hidden />
+            </Button>
+          }
+        />
+        <DropdownMenuContent align="end" className="min-w-40">
+          <DropdownMenuItem onClick={onEdit}>
+            <PencilIcon aria-hidden />
+            Редактировать
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

apps/web/src/components/directories/doh-profile-create-dialog.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { FormDrawer } from '@/components/form-drawer'
+import { LoadingButton } from '@/components/loading-button'
+import {
+  useCreateDohProfileMutation,
+  useUpdateDohProfileMutation,
+} from '@/queries/directories'
+import type { DohProfile, DohProfileCreate, DohProfilePatch } from '@/types/api'
+
+interface DohProfileFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  editTarget?: DohProfile | null
+}
+
+/** @see https://reui.io/preview/base/form-7 */
+export function DohProfileFormDialog({
+  open,
+  onOpenChange,
+  editTarget = null,
+}: DohProfileFormDialogProps) {
+  const createMutation = useCreateDohProfileMutation()
+  const updateMutation = useUpdateDohProfileMutation()
+  const saving = createMutation.isPending || updateMutation.isPending
+  const [name, setName] = useState('')
+  const [url, setUrl] = useState('')
+  const [timeoutMs, setTimeoutMs] = useState('')
+
+  useEffect(() => {
+    if (!open) return
+    if (editTarget) {
+      setName(editTarget.name ?? '')
+      setUrl(editTarget.url ?? '')
+      setTimeoutMs(
+        editTarget.timeout_ms === null || editTarget.timeout_ms === undefined
+          ? ''
+          : String(editTarget.timeout_ms),
+      )
+    } else {
+      setName('')
+      setUrl('')
+      setTimeoutMs('')
+    }
+  }, [editTarget, open])
+
+  async function save() {
+    const trimmedUrl = url.trim()
+    if (!trimmedUrl) {
+      toast.error('Укажите URL DoH')
+      return
+    }
+    let urlOk = true
+    try {
+      new URL(trimmedUrl)
+    } catch {
+      urlOk = false
+    }
+    if (!urlOk) {
+      toast.error('Некорректный URL')
+      return
+    }
+
+    let timeout: number | null = null
+    if (timeoutMs.trim() !== '') {
+      const ms = Number(timeoutMs)
+      if (!Number.isFinite(ms) || !Number.isInteger(ms) || ms <= 0) {
+        toast.error('Timeout должен быть целым числом > 0')
+        return
+      }
+      timeout = ms
+    }
+
+    const nameTrimmed = name.trim()
+
+    try {
+      if (editTarget) {
+        const body: DohProfilePatch = {
+          url: trimmedUrl,
+          name: nameTrimmed || undefined,
+          timeout_ms: timeout,
+        }
+        await updateMutation.mutateAsync({ id: editTarget.id, body })
+      } else {
+        const body: DohProfileCreate = { url: trimmedUrl }
+        if (nameTrimmed) body.name = nameTrimmed
+        if (timeout !== null) body.timeout_ms = timeout
+        await createMutation.mutateAsync(body)
+      }
+      onOpenChange(false)
+    } catch {
+      // toast in mutation
+    }
+  }
+
+  return (
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={editTarget ? 'Редактировать DoH-профиль' : 'Новый DoH-профиль'}
+      description="Резолвер DNS-over-HTTPS для доменных модулей"
+      className="sm:max-w-sm"
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton type="button" loading={saving} onClick={() => void save()}>
+            {editTarget ? 'Сохранить' : 'Создать'}
+          </LoadingButton>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="doh-name">Имя (опционально)</Label>
+        <Input
+          id="doh-name"
+          placeholder="Control D / AdGuard"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="doh-url">URL</Label>
+        <Input
+          id="doh-url"
+          type="url"
+          placeholder="https://dns.example/dns-query"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="doh-timeout">Timeout, мс (опционально)</Label>
+        <Input
+          id="doh-timeout"
+          type="number"
+          min={1}
+          placeholder="5000"
+          value={timeoutMs}
+          onChange={(e) => setTimeoutMs(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
+  )
+}
+
+/** @deprecated Use DohProfileFormDialog */
+export const DohProfileCreateDialog = DohProfileFormDialog

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

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

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

@@ -1,28 +1,103 @@
+/**
+ * ReUI Empty + IconStack — Frame-friendly (empty-state-14 / empty-state-12).
+ * Preview: https://reui.io/preview/base/empty-state-14 · https://reui.io/preview/base/empty-state-12
+ * Docs: https://reui.io/docs/components/base/icon-stack
+ */
+import { InboxIcon, type LucideIcon } from 'lucide-react'
 import type { ReactNode } from 'react'
+
+import { IconStack } from '@/components/reui/icon-stack'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@evobgp/ui/components/empty'
 import { cn } from '@evobgp/ui/lib/utils'
 
 interface EmptyStateProps {
+  icon?: LucideIcon | ReactNode
   title: string
   description?: string
-  icon?: ReactNode
   action?: ReactNode
   className?: string
+  stackedIcon?: boolean
+  centered?: boolean
 }
 
-export function EmptyState({ title, description, icon, action, className }: EmptyStateProps) {
+function isLucideIcon(icon: LucideIcon | ReactNode): icon is LucideIcon {
+  if (typeof icon === 'function') return true
+  if (icon != null && typeof icon === 'object' && '$$typeof' in icon) {
+    if ('props' in icon) return false
+    return true
+  }
+  return false
+}
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  stackedIcon = true,
+  centered = true,
+}: EmptyStateProps) {
+  const Icon = isLucideIcon(icon) ? icon : InboxIcon
+  const customIcon = icon && !isLucideIcon(icon) ? icon : null
+
+  const body = (
+    <Empty
+      className={cn(
+        'max-w-md flex-none border-0 bg-transparent p-0',
+        !centered && className,
+      )}
+    >
+      <EmptyHeader className="gap-5 text-center">
+        <EmptyMedia className="mb-0">
+          {customIcon ? (
+            stackedIcon ? (
+              <IconStack aria-hidden="true" className="h-14 w-12 shrink-0">
+                {customIcon}
+              </IconStack>
+            ) : (
+              <div className="text-muted-foreground">{customIcon}</div>
+            )
+          ) : stackedIcon ? (
+            <IconStack aria-hidden="true" className="h-14 w-12 shrink-0">
+              <Icon strokeWidth={1.9} aria-hidden="true" className="size-5" />
+            </IconStack>
+          ) : (
+            <span className="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-lg [&_svg]:size-5">
+              <Icon aria-hidden="true" />
+            </span>
+          )}
+        </EmptyMedia>
+        <div className="flex flex-col items-center gap-2">
+          <EmptyTitle className="text-base font-semibold tracking-tight">{title}</EmptyTitle>
+          {description ? (
+            <EmptyDescription className="max-w-sm text-sm/relaxed">{description}</EmptyDescription>
+          ) : null}
+        </div>
+      </EmptyHeader>
+      {action ? (
+        <EmptyContent className="mt-1 items-center justify-center">{action}</EmptyContent>
+      ) : null}
+    </Empty>
+  )
+
+  if (!centered) return body
+
   return (
     <div
       className={cn(
-        'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8 text-center',
+        'flex w-full flex-1 items-center justify-center self-stretch py-14 sm:py-16',
         className,
       )}
     >
-      {icon ? <div className="text-muted-foreground">{icon}</div> : null}
-      <div className="flex flex-col gap-1">
-        <p className="text-sm font-medium">{title}</p>
-        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
-      </div>
-      {action ? <div className="mt-2">{action}</div> : null}
+      {body}
     </div>
   )
 }

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

@@ -2,18 +2,13 @@ import type { ReactNode } from 'react'
 
 import { cn } from '@evobgp/ui/lib/utils'
 import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-} from '@evobgp/ui/components/drawer'
-import { ScrollArea } from '@evobgp/ui/components/scroll-area'
-
-import {
-  DrawerActionsFooter,
-  formDrawerContentClassName,
-} from '@/components/drawer-layout'
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@evobgp/ui/components/sheet'
 
 interface FormDrawerProps {
   open: boolean
@@ -25,6 +20,7 @@ interface FormDrawerProps {
   className?: string
 }
 
+/** Create/edit overlay — Sheet DNA (sheet-8 / sheet-1). Preview: https://reui.io/preview/base/sheet-8 */
 export function FormDrawer({
   open,
   onOpenChange,
@@ -35,17 +31,22 @@ export function FormDrawer({
   className,
 }: FormDrawerProps) {
   return (
-    <Drawer open={open} onOpenChange={onOpenChange} swipeDirection="right">
-      <DrawerContent className={cn(formDrawerContentClassName, className)}>
-        <DrawerHeader className="shrink-0 border-b border-border pb-4">
-          <DrawerTitle>{title}</DrawerTitle>
-          {description ? <DrawerDescription>{description}</DrawerDescription> : null}
-        </DrawerHeader>
-        <ScrollArea className="min-h-0 flex-1">
-          <div className="space-y-4 px-4 py-4">{children}</div>
-        </ScrollArea>
-        <DrawerActionsFooter>{footer}</DrawerActionsFooter>
-      </DrawerContent>
-    </Drawer>
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className={cn('w-full gap-0 overflow-hidden p-0 sm:max-w-lg', className)}
+      >
+        <SheetHeader className="shrink-0 border-b border-border/50">
+          <SheetTitle>{title}</SheetTitle>
+          {description ? <SheetDescription>{description}</SheetDescription> : null}
+        </SheetHeader>
+        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">{children}</div>
+        <SheetFooter className="mt-0 shrink-0 border-t border-border/50 bg-muted/50">
+          <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
+            {footer}
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   )
 }

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

@@ -47,6 +47,7 @@ import { CommandPalette, type CommandPaletteItem } from '@/components/layout/com
 import { NavUser } from '@/components/layout/nav-user'
 import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
 import { can, isAuthEnabled, permissionForPath } from '@/lib/auth'
+import { SKIP_TO_CONTENT_CLASS } from '@/lib/ui-surface'
 
 interface NavItem {
   to: string
@@ -161,6 +162,9 @@ export function AppShell({ children }: { children: ReactNode }) {
           } as CSSProperties
         }
       >
+        <a href="#main-content" className={SKIP_TO_CONTENT_CLASS}>
+          К содержимому
+        </a>
         <Sidebar collapsible="icon">
           <SidebarHeader>
             <AppSwitcher />
@@ -196,7 +200,7 @@ export function AppShell({ children }: { children: ReactNode }) {
             <NavUser />
           </SidebarFooter>
         </Sidebar>
-        <SidebarInset>
+        <SidebarInset id="main-content">
           <header className="bg-background sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b px-4 md:px-6">
             <SidebarTrigger className="-ml-1" />
             <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
@@ -220,9 +224,9 @@ export function AppShell({ children }: { children: ReactNode }) {
               <SystemMonitorPopover />
             </div>
           </header>
-          <main className="flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">
+          <div className="flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">
             {children}
-          </main>
+          </div>
         </SidebarInset>
         <CommandPalette items={COMMAND_ITEMS} hotkeyOnly />
       </SidebarProvider>

apps/web/src/components/lookup/lookup-add-step.tsx

@@ -0,0 +1,190 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Field, FieldLabel } from '@evobgp/ui/components/field'
+
+import { CommunitySelect } from '@/components/modules/community-select'
+import { LoadingButton } from '@/components/loading-button'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
+import { SelectMenu } from '@/components/select-field'
+import { ApiError, apiMutate } from '@/lib/api-client'
+import type {
+  BgpCommunity,
+  LookupQueryKind,
+  LookupResponse,
+  ModuleRow,
+} from '@/types/api'
+
+/**
+ * Lookup wizard step 3 — module + community (bare content for single Frame).
+ * @see https://reui.io/preview/base/wizard-2
+ */
+
+function hostPrefixFromIp(ip: string): string {
+  return ip.includes(':') ? `${ip}/128` : `${ip}/32`
+}
+
+function moduleTypeForKind(kind: LookupQueryKind): ModuleRow['type'] {
+  return kind === 'domain' ? 'DOMAINS' : 'IP_RANGES'
+}
+
+export function LookupAddStep({
+  data,
+  modules,
+  communities,
+  onCancel,
+  onAdded,
+}: {
+  data: LookupResponse
+  modules: ModuleRow[]
+  communities: BgpCommunity[]
+  onCancel: () => void
+  onAdded: () => void | Promise<void>
+}) {
+  const wantedType = moduleTypeForKind(data.query_kind)
+  const eligible = useMemo(
+    () => modules.filter((m) => m.type === wantedType),
+    [modules, wantedType],
+  )
+
+  const [moduleId, setModuleId] = useState('')
+  const [communityId, setCommunityId] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (eligible.length === 0) {
+      setModuleId('')
+      return
+    }
+    setModuleId((prev) =>
+      prev && eligible.some((m) => m.id === prev) ? prev : eligible[0]!.id,
+    )
+  }, [eligible])
+
+  useEffect(() => {
+    const mod = eligible.find((m) => m.id === moduleId)
+    if (!mod) {
+      setCommunityId(null)
+      return
+    }
+    setCommunityId(mod.default_community_id ?? null)
+  }, [moduleId, eligible])
+
+  const moduleItems = useMemo(
+    () =>
+      eligible.map((m) => ({
+        value: m.id,
+        label: m.name,
+      })),
+    [eligible],
+  )
+
+  async function handleAdd() {
+    if (!moduleId) {
+      toast.error('Выберите модуль')
+      return
+    }
+    if (data.query_kind !== 'domain' && !communityId) {
+      toast.error('Укажите community')
+      return
+    }
+
+    setSaving(true)
+    try {
+      if (data.query_kind === 'domain') {
+        await apiMutate(`/v1/modules/${moduleId}/domain-entries`, 'POST', {
+          fqdn: data.normalized,
+          community_id: communityId,
+        })
+        toast.success('Домен добавлен')
+      } else {
+        const prefix =
+          data.query_kind === 'cidr'
+            ? data.normalized
+            : hostPrefixFromIp(data.normalized)
+        await apiMutate(`/v1/modules/${moduleId}/ip-range-entries`, 'POST', {
+          prefix,
+          community_id: communityId,
+        })
+        toast.success('Префикс добавлен')
+      }
+      await onAdded()
+    } catch (e) {
+      toast.error(e instanceof ApiError ? e.message : String(e))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (eligible.length === 0) {
+    return (
+      <Alert variant="warning">
+        <AlertTitle>Нет подходящего модуля</AlertTitle>
+        <AlertDescription>
+          Создайте модуль типа {wantedType}, затем повторите добавление.{' '}
+          <Button variant="link" size="sm" className="h-auto p-0" render={<Link to="/modules/new" />}>
+            Перейти к модулям
+          </Button>
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  const valueLabel =
+    data.query_kind === 'domain'
+      ? data.normalized
+      : data.query_kind === 'cidr'
+        ? data.normalized
+        : hostPrefixFromIp(data.normalized)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-1">
+        <h3 className="text-sm font-semibold">Добавить в списки</h3>
+        <p className="text-muted-foreground text-sm">
+          «{valueLabel}» отсутствует в списках. Выберите модуль и community.
+        </p>
+      </div>
+      <div className="flex flex-col gap-4">
+        <Field>
+          <FieldLabel htmlFor="lookup-add-module">Модуль ({wantedType})</FieldLabel>
+          <SelectMenu
+            id="lookup-add-module"
+            items={moduleItems}
+            value={moduleId}
+            placeholder="Выберите модуль"
+            onValueChange={(v) => {
+              if (v) setModuleId(v)
+            }}
+          />
+        </Field>
+        <CommunitySelect
+          id="lookup-add-comm"
+          label="Community"
+          value={communityId}
+          onValueChange={setCommunityId}
+          communities={communities}
+          nullable={data.query_kind === 'domain'}
+        />
+      </div>
+      <div className="flex flex-wrap items-center justify-end gap-2 border-t pt-4">
+        <Button type="button" variant="outline" onClick={onCancel}>
+          Назад
+        </Button>
+        <LoadingButton
+          loading={saving}
+          onClick={() => void handleAdd()}
+          disabled={!moduleId || (data.query_kind !== 'domain' && !communityId)}
+        >
+          Добавить
+        </LoadingButton>
+      </div>
+    </div>
+  )
+}

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

@@ -4,7 +4,6 @@ import { useNavigate } from '@tanstack/react-router'
 
 import { CategoryBadge } from '@/components/category-badge'
 import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { FrameDataGrid } from '@/components/reui-kit'
 import { DataGridSection } from '@/components/data-grid-shell'
 import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
@@ -12,7 +11,8 @@ import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { LookupMatch } from '@/types/api'
 
 /**
- * Lookup matches grid — data-grid-filtering-2 pattern.
+ * Lookup matches grid — bare section for wizard-2 single Frame.
+ * @see https://reui.io/preview/base/wizard-2
  * @see https://reui.io/preview/base/data-grid-filtering-2
  * @see https://reui.io/docs/components/base/badge
  */
@@ -113,10 +113,13 @@ export function LookupMatchesGrid({
   })
 
   return (
-    <FrameDataGrid
-      title="Совпадения"
-      description="Entries и snapshots · клик по строке открывает модуль"
-    >
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-px">
+        <h3 className="text-sm font-semibold">Совпадения</h3>
+        <p className="text-muted-foreground text-sm">
+          Entries и snapshots · клик по строке открывает модуль
+        </p>
+      </div>
       <DataGridSection
         table={table}
         recordCount={filteredCount}
@@ -129,6 +132,6 @@ export function LookupMatchesGrid({
           void navigate({ to: '/modules/$moduleId', params: { moduleId: row.module_id } })
         }
       />
-    </FrameDataGrid>
+    </div>
   )
 }

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

@@ -8,17 +8,10 @@ import {
   InputGroupAddon,
   InputGroupInput,
 } from '@evobgp/ui/components/input-group'
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
 
 /**
- * Lookup search form — Frame + InputGroup (form-7 pattern).
- * @see https://reui.io/preview/base/form-7
+ * Lookup search fields — bare form for wizard-2 single-Frame surface.
+ * @see https://reui.io/preview/base/wizard-2
  * @see https://reui.io/docs/components/base/frame
  */
 export function LookupSearchForm({
@@ -40,37 +33,27 @@ export function LookupSearchForm({
   }
 
   return (
-    <Frame spacing="sm" className="w-full">
-      <FrameHeader>
-        <FrameTitle>Проверка списка</FrameTitle>
-        <FrameDescription>
-          IP или FQDN — поиск в entries и материализованных snapshots с community.
-        </FrameDescription>
-      </FrameHeader>
-      <FramePanel>
-        <form onSubmit={handleSubmit} className="flex flex-col gap-4 sm:flex-row sm:items-end">
-          <Field className="min-w-0 flex-1">
-            <FieldLabel htmlFor="lookup-q">IP или домен</FieldLabel>
-            <InputGroup>
-              <InputGroupAddon align="inline-start">
-                <Search aria-hidden />
-              </InputGroupAddon>
-              <InputGroupInput
-                id="lookup-q"
-                name="q"
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                placeholder="8.8.8.8 или example.com"
-                autoComplete="off"
-                autoFocus
-              />
-            </InputGroup>
-          </Field>
-          <Button type="submit" disabled={isPending || !value.trim()}>
-            Проверить
-          </Button>
-        </form>
-      </FramePanel>
-    </Frame>
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4 sm:flex-row sm:items-end">
+      <Field className="min-w-0 flex-1">
+        <FieldLabel htmlFor="lookup-q">IP, CIDR или домен</FieldLabel>
+        <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <Search aria-hidden />
+          </InputGroupAddon>
+          <InputGroupInput
+            id="lookup-q"
+            name="q"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="8.8.8.8, 203.0.113.0/24 или example.com"
+            autoComplete="off"
+            autoFocus
+          />
+        </InputGroup>
+      </Field>
+      <Button type="submit" disabled={isPending || !value.trim()}>
+        Проверить
+      </Button>
+    </form>
   )
 }

apps/web/src/components/lookup/lookup-status-banner.tsx

@@ -0,0 +1,74 @@
+import { CircleAlert, CircleCheck, ShieldAlert } from 'lucide-react'
+
+import { Badge } from '@/components/reui/badge'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
+
+/**
+ * Lookup result status plaque — ReUI Alert + Badge.
+ * @see https://reui.io/docs/components/base/alert
+ * @see https://reui.io/preview/base/components/c-alert-6
+ * @see https://reui.io/docs/components/base/badge
+ */
+export function LookupStatusBanner({
+  status,
+  normalized,
+  matchCount = 0,
+}: {
+  status: 'found' | 'missing' | 'missing_denied'
+  normalized: string
+  matchCount?: number
+}) {
+  if (status === 'found') {
+    return (
+      <Alert variant="success" className="items-start py-3">
+        <CircleCheck aria-hidden />
+        <AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
+          Найдено
+          <Badge variant="success-light" size="sm" radius="full">
+            в списках
+          </Badge>
+        </AlertTitle>
+        <AlertDescription>
+          «{normalized}» — {matchCount} совп. в entries / snapshots.
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (status === 'missing_denied') {
+    return (
+      <Alert variant="warning" className="items-start py-3">
+        <ShieldAlert aria-hidden />
+        <AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
+          Не найдено
+          <Badge variant="warning-light" size="sm" radius="full">
+            нет прав
+          </Badge>
+        </AlertTitle>
+        <AlertDescription>
+          «{normalized}» отсутствует в списках. Для добавления нужно право{' '}
+          <span className="font-medium text-foreground">bgp:modules:write</span>.
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  return (
+    <Alert variant="warning" className="items-start py-3">
+      <CircleAlert aria-hidden />
+      <AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
+        Не найдено
+        <Badge variant="warning-light" size="sm" radius="full">
+          можно добавить
+        </Badge>
+      </AlertTitle>
+      <AlertDescription>
+        «{normalized}» отсутствует в entries и snapshots. Добавить запись в модуль?
+      </AlertDescription>
+    </Alert>
+  )
+}

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

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

apps/web/src/components/lookup/lookup-wizard.tsx

@@ -0,0 +1,354 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Check, Search } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { LookupAddStep } from '@/components/lookup/lookup-add-step'
+import { LookupMatchesGrid } from '@/components/lookup/lookup-matches-grid'
+import { LookupSearchForm } from '@/components/lookup/lookup-search-form'
+import { LookupStatusBanner } from '@/components/lookup/lookup-status-banner'
+import { EmptyState } from '@/components/empty-state'
+import { QueryState } from '@/components/query-state'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
+import {
+  Stepper,
+  StepperContent,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperNav,
+  StepperPanel,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from '@/components/reui/stepper'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { TableSkeleton } from '@/components/skeletons'
+import { sessionCanWriteModules } from '@/lib/auth'
+import { authSessionQueryOptions } from '@/queries/auth'
+import { directoriesCommunitiesQueryOptions } from '@/queries/directories'
+import { lookupKeys, lookupQueryOptions } from '@/queries/lookup'
+import { modulesListQueryOptions } from '@/queries/modules'
+
+/**
+ * Lookup membership wizard — one Frame (wizard-2), all content inside.
+ * @see https://reui.io/preview/base/wizard-2
+ * @see https://reui.io/docs/components/base/stepper
+ * @see https://reui.io/docs/components/base/frame
+ * @see https://reui.io/preview/base/data-grid-filtering-2
+ */
+
+const STEP_QUERY = 1
+const STEP_RESULT = 2
+const STEP_ADD = 3
+const STEP_DONE = 4
+
+function WizardActions({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-2 border-t pt-4">
+      {children}
+    </div>
+  )
+}
+
+export function LookupWizard({
+  q,
+  onSubmitQuery,
+}: {
+  q: string
+  onSubmitQuery: (next: string) => void
+}) {
+  const queryClient = useQueryClient()
+  const trimmed = q.trim()
+  const lookupQ = useQuery(lookupQueryOptions(trimmed))
+  const sessionQ = useQuery(authSessionQueryOptions())
+
+  const canWrite = sessionCanWriteModules(sessionQ.data)
+  const [step, setStep] = useState(trimmed ? STEP_RESULT : STEP_QUERY)
+  const [offerAdd, setOfferAdd] = useState(false)
+  const loadCatalog = step === STEP_ADD || step === STEP_DONE
+
+  const modulesQ = useQuery({
+    ...modulesListQueryOptions(),
+    enabled: loadCatalog,
+  })
+  const communitiesQ = useQuery({
+    ...directoriesCommunitiesQueryOptions(),
+    enabled: loadCatalog,
+  })
+
+  useEffect(() => {
+    setOfferAdd(false)
+    setStep(trimmed ? STEP_RESULT : STEP_QUERY)
+  }, [trimmed])
+
+  function resetToQuery() {
+    setOfferAdd(false)
+    setStep(STEP_QUERY)
+    onSubmitQuery('')
+  }
+
+  function goToAdd() {
+    setOfferAdd(true)
+    setStep(STEP_ADD)
+  }
+
+  async function handleAdded() {
+    setStep(STEP_DONE)
+    await queryClient.invalidateQueries({ queryKey: lookupKeys.query(trimmed) })
+    await lookupQ.refetch()
+  }
+
+  const data = lookupQ.data
+  const notFound = data != null && !data.matched
+
+  return (
+    <div className="flex flex-col gap-4 md:gap-6">
+      <Frame spacing="sm" className="w-full">
+        <FramePanel className="flex flex-col gap-6">
+          <FrameHeader className="px-0 py-0">
+            <FrameTitle>Мастер проверки</FrameTitle>
+            <FrameDescription>
+              Проверка IP / CIDR / домена в списках, затем при необходимости — добавление.
+            </FrameDescription>
+          </FrameHeader>
+
+          <Stepper
+            value={step}
+            onValueChange={setStep}
+            className="flex flex-col gap-6"
+            indicators={{
+              completed: <Check className="size-4" />,
+            }}
+          >
+            <StepperNav>
+              <StepperItem step={STEP_QUERY} completed={step > STEP_QUERY}>
+                <StepperTrigger className="flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2">
+                  <StepperIndicator>{STEP_QUERY}</StepperIndicator>
+                  <div className="flex flex-col items-start">
+                    <StepperTitle>Запрос</StepperTitle>
+                    <StepperDescription className="hidden sm:block">
+                      IP, CIDR или FQDN
+                    </StepperDescription>
+                  </div>
+                </StepperTrigger>
+                <StepperSeparator className="max-sm:hidden" />
+              </StepperItem>
+              <StepperItem
+                step={STEP_RESULT}
+                completed={step > STEP_RESULT}
+                disabled={!trimmed}
+              >
+                <StepperTrigger className="flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2">
+                  <StepperIndicator>{STEP_RESULT}</StepperIndicator>
+                  <div className="flex flex-col items-start">
+                    <StepperTitle>Результат</StepperTitle>
+                    <StepperDescription className="hidden sm:block">
+                      Есть в списках?
+                    </StepperDescription>
+                  </div>
+                </StepperTrigger>
+                <StepperSeparator className="max-sm:hidden" />
+              </StepperItem>
+              <StepperItem
+                step={STEP_ADD}
+                completed={step > STEP_ADD}
+                disabled={!offerAdd && step !== STEP_ADD && step !== STEP_DONE}
+              >
+                <StepperTrigger className="flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2">
+                  <StepperIndicator>{STEP_ADD}</StepperIndicator>
+                  <div className="flex flex-col items-start">
+                    <StepperTitle>Добавление</StepperTitle>
+                    <StepperDescription className="hidden sm:block">
+                      Модуль и community
+                    </StepperDescription>
+                  </div>
+                </StepperTrigger>
+                <StepperSeparator className="max-sm:hidden" />
+              </StepperItem>
+              <StepperItem step={STEP_DONE} completed={step === STEP_DONE}>
+                <StepperTrigger className="flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2">
+                  <StepperIndicator>{STEP_DONE}</StepperIndicator>
+                  <div className="flex flex-col items-start">
+                    <StepperTitle>Готово</StepperTitle>
+                    <StepperDescription className="hidden sm:block">
+                      Подтверждение
+                    </StepperDescription>
+                  </div>
+                </StepperTrigger>
+              </StepperItem>
+            </StepperNav>
+
+            <StepperPanel>
+              <StepperContent value={STEP_QUERY}>
+                <div className="flex flex-col gap-6">
+                  <LookupSearchForm
+                    key={`form-${trimmed}`}
+                    initialQuery={trimmed}
+                    isPending={lookupQ.isFetching}
+                    onSubmit={onSubmitQuery}
+                  />
+                  {!trimmed ? (
+                    <EmptyState
+                      icon={<Search className="size-8" />}
+                      title="Введите IP, CIDR или домен"
+                      description="Например 8.8.8.8, 203.0.113.0/24 или example.com — проверка по entries и snapshots."
+                    />
+                  ) : null}
+                </div>
+              </StepperContent>
+
+              <StepperContent value={STEP_RESULT}>
+                {!trimmed ? (
+                  <EmptyState
+                    icon={<Search className="size-8" />}
+                    title="Сначала выполните проверку"
+                    description="Вернитесь к шагу «Запрос» и укажите значение."
+                  />
+                ) : (
+                  <QueryState
+                    data={lookupQ.data}
+                    isLoading={lookupQ.isLoading}
+                    isError={lookupQ.isError}
+                    error={lookupQ.error}
+                    onRetry={() => void lookupQ.refetch()}
+                    skeleton={<TableSkeleton rows={5} />}
+                  >
+                    {(result) => (
+                      <div className="flex flex-col gap-4 md:gap-6">
+                        <LookupSearchForm
+                          key={`result-form-${trimmed}`}
+                          initialQuery={trimmed}
+                          isPending={lookupQ.isFetching}
+                          onSubmit={onSubmitQuery}
+                        />
+
+                        {result.matched ? (
+                          <>
+                            <LookupStatusBanner
+                              status="found"
+                              normalized={result.normalized}
+                              matchCount={result.match_count}
+                            />
+                            <LookupMatchesGrid
+                              items={result.matches}
+                              isLoading={lookupQ.isFetching}
+                            />
+                            <WizardActions>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                onClick={resetToQuery}
+                              >
+                                Новая проверка
+                              </Button>
+                            </WizardActions>
+                          </>
+                        ) : canWrite ? (
+                          <>
+                            <LookupStatusBanner
+                              status="missing"
+                              normalized={result.normalized}
+                            />
+                            <WizardActions>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                onClick={resetToQuery}
+                              >
+                                Новая проверка
+                              </Button>
+                              <Button type="button" onClick={() => goToAdd()}>
+                                Добавить
+                              </Button>
+                            </WizardActions>
+                          </>
+                        ) : (
+                          <>
+                            <LookupStatusBanner
+                              status="missing_denied"
+                              normalized={result.normalized}
+                            />
+                            <WizardActions>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                onClick={resetToQuery}
+                              >
+                                Новая проверка
+                              </Button>
+                            </WizardActions>
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </QueryState>
+                )}
+              </StepperContent>
+
+              <StepperContent value={STEP_ADD}>
+                {data && notFound ? (
+                  <LookupAddStep
+                    data={data}
+                    modules={modulesQ.data?.items ?? []}
+                    communities={communitiesQ.data?.items ?? []}
+                    onCancel={() => {
+                      setOfferAdd(false)
+                      setStep(STEP_RESULT)
+                    }}
+                    onAdded={handleAdded}
+                  />
+                ) : (
+                  <Alert variant="warning">
+                    <AlertTitle>Добавление недоступно</AlertTitle>
+                    <AlertDescription>
+                      Сначала выполните проверку для значения, которого ещё нет в списках.
+                    </AlertDescription>
+                  </Alert>
+                )}
+              </StepperContent>
+
+              <StepperContent value={STEP_DONE}>
+                <div className="flex flex-col gap-4 md:gap-6">
+                  <Alert variant="success" className="items-start py-3">
+                    <Check aria-hidden />
+                    <AlertTitle className="line-clamp-none">Запись добавлена</AlertTitle>
+                    <AlertDescription>
+                      Повторная проверка обновлена. Можно посмотреть совпадения или
+                      начать новый запрос.
+                    </AlertDescription>
+                  </Alert>
+                  {lookupQ.data?.matched ? (
+                    <LookupMatchesGrid
+                      items={lookupQ.data.matches}
+                      isLoading={lookupQ.isFetching}
+                    />
+                  ) : null}
+                  <WizardActions>
+                    <Button type="button" variant="outline" onClick={resetToQuery}>
+                      Новая проверка
+                    </Button>
+                    <Button type="button" onClick={() => setStep(STEP_RESULT)}>
+                      К результату
+                    </Button>
+                  </WizardActions>
+                </div>
+              </StepperContent>
+            </StepperPanel>
+          </Stepper>
+        </FramePanel>
+      </Frame>
+    </div>
+  )
+}

apps/web/src/components/modules/module-edit-dialog.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Checkbox } from '@evobgp/ui/components/checkbox'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+
+import { FormDrawer } from '@/components/form-drawer'
+import { LoadingButton } from '@/components/loading-button'
+import { CommunitySelect } from '@/components/modules/community-select'
+import { SelectField } from '@/components/select-field'
+import {
+  dohProfileShortLabel,
+  moduleDohProfileIds,
+} from '@/lib/modules/helpers'
+import { dohPolicyRu, moduleTypeRu } from '@/lib/ui-labels'
+import { useUpdateModuleMutation } from '@/queries/modules'
+import type {
+  BgpCommunity,
+  DohProfile,
+  DohResolverPolicy,
+  ModulePatch,
+  ModuleRow,
+} from '@/types/api'
+
+interface ModuleEditDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  mod: ModuleRow
+  communities: BgpCommunity[]
+  dohProfiles: DohProfile[]
+}
+
+const DOH_POLICY_ITEMS: { value: DohResolverPolicy; label: string }[] = [
+  { value: 'primary_only', label: dohPolicyRu('primary_only') },
+  { value: 'failover', label: dohPolicyRu('failover') },
+  { value: 'union', label: dohPolicyRu('union') },
+]
+
+export function ModuleEditDialog({
+  open,
+  onOpenChange,
+  mod,
+  communities,
+  dohProfiles,
+}: ModuleEditDialogProps) {
+  const updateMutation = useUpdateModuleMutation()
+  const isDomains = mod.type === 'DOMAINS'
+
+  const [name, setName] = useState('')
+  const [enabled, setEnabled] = useState(true)
+  const [priority, setPriority] = useState('0')
+  const [refreshIntervalSec, setRefreshIntervalSec] = useState('')
+  const [cronExpr, setCronExpr] = useState('')
+  const [defaultCommunityId, setDefaultCommunityId] = useState<string | null>(null)
+  const [dohResolverPolicy, setDohResolverPolicy] = useState<DohResolverPolicy>('primary_only')
+  const [dohProfileIds, setDohProfileIds] = useState<string[]>([])
+
+  useEffect(() => {
+    if (!open) return
+    setName(mod.name ?? '')
+    setEnabled(mod.enabled !== false)
+    setPriority(String(mod.priority ?? 0))
+    setRefreshIntervalSec(
+      mod.refresh_interval_sec === null || mod.refresh_interval_sec === undefined
+        ? ''
+        : String(mod.refresh_interval_sec),
+    )
+    setCronExpr(mod.cron_expr ?? '')
+    setDefaultCommunityId(mod.default_community_id ?? null)
+    setDohResolverPolicy(mod.doh_resolver_policy ?? 'primary_only')
+    setDohProfileIds(moduleDohProfileIds(mod))
+  }, [mod, open])
+
+  function toggleDohProfile(id: string, checked: boolean) {
+    setDohProfileIds((prev) => {
+      if (checked) {
+        if (prev.includes(id)) return prev
+        return [...prev, id]
+      }
+      return prev.filter((x) => x !== id)
+    })
+  }
+
+  async function save() {
+    const trimmedName = name.trim()
+    if (!trimmedName) {
+      toast.error('Укажите название модуля')
+      return
+    }
+
+    const priorityNum = Number(priority)
+    if (!Number.isFinite(priorityNum) || !Number.isInteger(priorityNum)) {
+      toast.error('Приоритет должен быть целым числом')
+      return
+    }
+
+    let refresh: number | null = null
+    if (refreshIntervalSec.trim() !== '') {
+      const n = Number(refreshIntervalSec)
+      if (!Number.isFinite(n) || !Number.isInteger(n) || n < 0) {
+        toast.error('Интервал обновления должен быть целым числом ≥ 0')
+        return
+      }
+      refresh = n
+    }
+
+    const body: ModulePatch = {
+      name: trimmedName,
+      enabled,
+      priority: priorityNum,
+      refresh_interval_sec: refresh,
+      cron_expr: cronExpr.trim() || null,
+      default_community_id: defaultCommunityId,
+    }
+
+    if (isDomains) {
+      body.doh_resolver_policy = dohResolverPolicy
+      body.doh_profile_ids = dohProfileIds
+    }
+
+    try {
+      await updateMutation.mutateAsync({ id: mod.id, body })
+      onOpenChange(false)
+    } catch {
+      // toast in mutation
+    }
+  }
+
+  return (
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Редактировать модуль"
+      description={`${moduleTypeRu(mod.type)} · ${mod.type}`}
+      className="sm:max-w-md"
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <LoadingButton type="button" loading={updateMutation.isPending} onClick={() => void save()}>
+            Сохранить
+          </LoadingButton>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="mod-name">Название</Label>
+        <Input
+          id="mod-name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Имя модуля"
+        />
+      </div>
+
+      <div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3">
+        <div className="grid min-w-0 flex-1 gap-1 pr-2">
+          <Label htmlFor="mod-enabled">Включён</Label>
+          <p className="text-xs text-muted-foreground">
+            Выключенный модуль не участвует в refresh и apply.
+          </p>
+        </div>
+        <Checkbox
+          id="mod-enabled"
+          checked={enabled}
+          onCheckedChange={(v) => setEnabled(v === true)}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="mod-priority">Приоритет</Label>
+        <Input
+          id="mod-priority"
+          type="number"
+          value={priority}
+          onChange={(e) => setPriority(e.target.value)}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="mod-interval">Интервал обновления (сек)</Label>
+        <Input
+          id="mod-interval"
+          type="number"
+          min={0}
+          placeholder="пусто = по умолчанию"
+          value={refreshIntervalSec}
+          onChange={(e) => setRefreshIntervalSec(e.target.value)}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="mod-cron">Cron (опционально)</Label>
+        <Input
+          id="mod-cron"
+          placeholder="0 * * * *"
+          value={cronExpr}
+          onChange={(e) => setCronExpr(e.target.value)}
+        />
+      </div>
+
+      <CommunitySelect
+        id="mod-community"
+        label="Community по умолчанию"
+        value={defaultCommunityId}
+        onValueChange={setDefaultCommunityId}
+        communities={communities}
+        nullable
+      />
+
+      {isDomains ? (
+        <>
+          <SelectField
+            id="mod-doh-policy"
+            label="Политика DoH"
+            items={DOH_POLICY_ITEMS}
+            value={dohResolverPolicy}
+            onValueChange={(v) => setDohResolverPolicy(v as DohResolverPolicy)}
+          />
+
+          <div className="flex flex-col gap-2">
+            <Label>DoH профили</Label>
+            {dohProfiles.length === 0 ? (
+              <p className="text-muted-foreground text-sm">Нет профилей в справочнике</p>
+            ) : (
+              <div className="flex flex-col gap-2 rounded-lg border border-border p-3">
+                {dohProfiles.map((p) => {
+                  const checked = dohProfileIds.includes(p.id)
+                  return (
+                    <label
+                      key={p.id}
+                      htmlFor={`mod-doh-${p.id}`}
+                      className="flex cursor-pointer items-start gap-3"
+                    >
+                      <Checkbox
+                        id={`mod-doh-${p.id}`}
+                        checked={checked}
+                        onCheckedChange={(v) => toggleDohProfile(p.id, v === true)}
+                        className="mt-0.5"
+                      />
+                      <span className="flex min-w-0 flex-col gap-0.5">
+                        <span className="text-sm font-medium">{dohProfileShortLabel(p.id, dohProfiles)}</span>
+                        <span className="text-muted-foreground truncate text-xs" title={p.url}>
+                          {p.url}
+                        </span>
+                      </span>
+                    </label>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </>
+      ) : null}
+    </FormDrawer>
+  )
+}

apps/web/src/components/modules/module-kpi-cards.tsx

@@ -2,29 +2,25 @@ import { Clock, Gauge, Globe, Tags } from 'lucide-react'
 
 import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
 import { Badge } from '@/components/reui/badge'
-import { formatDateTime, moduleIntervalLabel } from '@/lib/modules/display'
-import {
-  communityLabel,
-  dohProfileLabel,
-  moduleDohProfileIds,
-} from '@/lib/modules/helpers'
-import { dohPolicyRu } from '@/lib/ui-labels'
 import { KpiStatGridSkeleton } from '@/components/skeletons'
-import type { AsEntry, BgpCommunity, DohProfile, ModuleRow } from '@/types/api'
+import { formatDateTime, moduleIntervalLabel } from '@/lib/modules/display'
+import { communityLabel, moduleDohProfileIds } from '@/lib/modules/helpers'
+import { dohPolicyRu } from '@/lib/ui-labels'
+import type { AsEntry, BgpCommunity, ModuleRow } from '@/types/api'
 
 interface ModuleKpiCardsProps {
   mod: ModuleRow | null
   communities: BgpCommunity[]
-  dohProfiles: DohProfile[]
   asEntries: AsEntry[]
+  entriesCount?: number
   loading?: boolean
 }
 
 export function ModuleKpiCards({
   mod,
   communities,
-  dohProfiles,
   asEntries,
+  entriesCount = 0,
   loading = false,
 }: ModuleKpiCardsProps) {
   if (loading || !mod) {
@@ -33,6 +29,49 @@ export function ModuleKpiCards({
 
   const asPrefixTotal = asEntries.reduce((acc, entry) => acc + (entry.prefix_count ?? 0), 0)
   const dohIds = moduleDohProfileIds(mod)
+  const isDomains = mod.type === 'DOMAINS'
+  const isAsPrefixes = mod.type === 'AS_PREFIXES'
+  const community = communityLabel(mod.default_community_id, communities)
+
+  const entriesFooter = isAsPrefixes ? (
+    <Badge variant="success-light" size="sm">
+      {asEntries.length} AS · в модуле
+    </Badge>
+  ) : isDomains ? (
+    <Badge variant="outline" size="sm">
+      {mod.default_community_id ? community : 'без community'}
+    </Badge>
+  ) : (
+    <Badge variant="success-light" size="sm">
+      {entriesCount} · в модуле
+    </Badge>
+  )
+
+  const policyItem: KpiStatItem = isDomains
+    ? {
+        id: 'doh',
+        icon: <Globe aria-hidden />,
+        iconClassName: 'text-primary',
+        value: dohIds.length > 0 ? String(dohIds.length) : '—',
+        label: 'DoH',
+        footer: (
+          <Badge variant={dohIds.length > 0 ? 'info-light' : 'outline'} size="sm">
+            {dohIds.length > 0 ? dohPolicyRu(mod.doh_resolver_policy) : 'без DoH'}
+          </Badge>
+        ),
+      }
+    : {
+        id: 'community',
+        icon: <Globe aria-hidden />,
+        iconClassName: 'text-primary',
+        value: community,
+        label: 'Community',
+        footer: (
+          <Badge variant="outline" size="sm">
+            по умолчанию
+          </Badge>
+        ),
+      }
 
   const items: KpiStatItem[] = [
     {
@@ -63,29 +102,11 @@ export function ModuleKpiCards({
       id: 'prefixes',
       icon: <Tags aria-hidden />,
       iconClassName: 'text-success',
-      value: mod.type === 'AS_PREFIXES' ? String(asPrefixTotal) : String(asEntries.length),
-      label: mod.type === 'AS_PREFIXES' ? 'Префиксы AS' : 'Записи модуля',
-      footer: (
-        <Badge variant="success-light" size="sm">
-          {asEntries.length} AS · в модуле
-        </Badge>
-      ),
-    },
-    {
-      id: 'policy',
-      icon: <Globe aria-hidden />,
-      iconClassName: 'text-primary',
-      value: dohIds.length > 0 ? String(dohIds.length) : '—',
-      label: communityLabel(mod.default_community_id, communities),
-      footer: (
-        <Badge variant="info-light" size="sm">
-          {dohPolicyRu(mod.doh_resolver_policy)}
-          {dohIds.length > 0
-            ? ` · ${dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join(', ')}`
-            : ' · без DoH'}
-        </Badge>
-      ),
+      value: isAsPrefixes ? String(asPrefixTotal) : String(entriesCount),
+      label: isAsPrefixes ? 'Префиксы AS' : 'Записи модуля',
+      footer: entriesFooter,
     },
+    policyItem,
   ]
 
   return <KpiStatGrid items={items} aria-label="KPI модуля" />

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

@@ -7,12 +7,20 @@ import { DataGridSection } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
-import { jobStatusRu, readyCheckRu } from '@/lib/ui-labels'
+import {
+  isReadyCheckOk,
+  isSystemReady,
+  readyCheckStatusLabel,
+} from '@/lib/metrics'
+import { readyCheckRu } from '@/lib/ui-labels'
 import type { ReadyStatus } from '@/queries/monitoring'
+import { Item, ItemMedia } from '@evobgp/ui/components/item'
+import { cn } from '@evobgp/ui/lib/utils'
 
 const READY_CHECK_ICONS: Record<string, typeof Database> = {
   postgres: Database,
   store: HardDrive,
+  store_backend: HardDrive,
   jobs: ListTodo,
 }
 
@@ -21,6 +29,7 @@ interface ReadyCheckRow {
   label: string
   subtitle?: string
   icon: typeof Database
+  iconClassName?: string
   status: string
   statusLabel: string
 }
@@ -34,12 +43,14 @@ export function MonitoringReadyGrid({
 }) {
   const data = useMemo<ReadyCheckRow[]>(() => {
     const checks = ready.checks ?? {}
+    const systemReady = isSystemReady(ready.status)
     const rows: ReadyCheckRow[] = [
       {
         id: 'liveness',
         label: 'Живучесть',
         subtitle: '/v1/health',
         icon: HeartPulse,
+        iconClassName: health?.ok ? 'text-success' : 'text-destructive',
         status: health?.ok ? 'ok' : 'error',
         statusLabel: health?.ok ? 'В норме' : 'Ошибка',
       },
@@ -48,19 +59,21 @@ export function MonitoringReadyGrid({
         label: 'Готовность',
         subtitle: '/v1/ready',
         icon: ShieldCheck,
-        status: ready.status === 'ok' ? 'ok' : 'warning',
-        statusLabel: ready.status === 'ok' ? 'Готов' : jobStatusRu(ready.status ?? 'pending'),
+        iconClassName: systemReady ? 'text-success' : 'text-warning',
+        status: systemReady ? 'ok' : 'warning',
+        statusLabel: systemReady ? 'Готов' : 'Не готов',
       },
     ]
     for (const key of Object.keys(checks)) {
       const value = checks[key]
-      const ok = typeof value === 'boolean' ? value : value?.ok !== false
+      const ok = isReadyCheckOk(value)
       rows.push({
         id: key,
         label: readyCheckRu(key),
         icon: READY_CHECK_ICONS[key] ?? ListTodo,
+        iconClassName: ok ? 'text-success' : 'text-destructive',
         status: ok ? 'ok' : 'error',
-        statusLabel: ok ? 'В норме' : 'Ошибка',
+        statusLabel: readyCheckStatusLabel(value, ok),
       })
     }
     return rows
@@ -74,8 +87,17 @@ export function MonitoringReadyGrid({
         cell: ({ row }) => {
           const Icon = row.original.icon
           return (
-            <div className="flex items-center gap-2">
-              <Icon className="size-4 shrink-0 text-muted-foreground" />
+            <div className="flex min-w-0 items-center gap-2.5 py-0.5">
+              <Item
+                className={cn(
+                  'border-background bg-muted flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-3.5',
+                  row.original.iconClassName,
+                )}
+              >
+                <ItemMedia variant="icon" className="size-auto">
+                  <Icon />
+                </ItemMedia>
+              </Item>
               <DataGridPrimaryCell
                 title={row.original.label}
                 subtitle={row.original.subtitle}
@@ -90,7 +112,9 @@ export function MonitoringReadyGrid({
         enableSorting: false,
         header: 'Статус',
         cell: ({ row }) => (
-          <StatusBadge status={row.original.status} label={row.original.statusLabel} />
+          <div className="flex justify-start">
+            <StatusBadge status={row.original.status} label={row.original.statusLabel} />
+          </div>
         ),
         meta: { headerTitle: 'Статус' },
       },

apps/web/src/components/network/network-kpi.tsx

@@ -30,7 +30,7 @@ export function NetworkKpi({
       id: 'peers-established',
       icon: <Share2 aria-hidden />,
       iconClassName: 'text-success',
-      label: 'Пиры Established',
+      label: 'Пиры установлены',
       value: loading ? '—' : `${net.peersEstablished}/${net.peersEnabled}`,
       footer: (
         <Badge variant="success-light" size="sm">
@@ -44,7 +44,7 @@ export function NetworkKpi({
       id: 'speakers-online',
       icon: <ServerCog aria-hidden />,
       iconClassName: 'text-info',
-      label: 'Спикеры online',
+      label: 'Спикеры в сети',
       value: loading ? '—' : `${net.speakersOnline}/${net.speakersTotal}`,
       footer: (
         <Badge
@@ -55,7 +55,7 @@ export function NetworkKpi({
           }
           size="sm"
         >
-          {loading ? '…' : 'live'}
+          {loading ? '…' : 'онлайн'}
         </Badge>
       ),
       to: '/network',

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

@@ -1,8 +1,10 @@
 import { useMemo, useState } from 'react'
-import { Plus, SearchIcon, ActivityIcon } from 'lucide-react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { Plus, SearchIcon, ActivityIcon, Trash2 } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
 
+import { ConfirmDialog } from '@/components/confirm-dialog'
 import { PeerFormDialog } from '@/components/network/peer-form-dialog'
 import {
   getPeerFilterFieldValue,
@@ -15,22 +17,28 @@ import {
   type FilterFieldConfig,
 } from '@/components/reui/filters'
 import { ResourcePage, renderSingleSelectedLabel } from '@/components/reui-kit'
+import { useDeletePeerMutation } from '@/queries/network'
 import type { PeerRow, SpeakerRow } from '@/types/api'
 
 /**
  * BGP peers list — ResourcePage (Frame + tabs + Filters + DataGrid).
  * @see https://reui.io/preview/base/data-grid-filtering-2
+ * @see https://reui.io/docs/components/base/data-grid
  */
 
+function peerDeleteLabel(p: PeerRow): string {
+  return p.name?.trim() || p.neighbor || p.id
+}
+
 const PEER_TABS = [
   { id: 'all', label: 'Все' },
-  { id: 'established', label: 'Established' },
+  { id: 'established', label: 'Установлены' },
   { id: 'pending', label: 'Ожидание' },
   { id: 'disabled', label: 'Выключены' },
 ]
 
 const SESSION_STATE_OPTIONS = [
-  { value: 'Established', label: 'Established' },
+  { value: 'Established', label: 'Установлена' },
   { value: 'Idle', label: 'Idle' },
   { value: 'Active', label: 'Active' },
   { value: 'Connect', label: 'Connect' },
@@ -89,7 +97,9 @@ export function NetworkPeersCard({
   error,
   onRetry,
 }: NetworkPeersCardProps) {
+  const deleteMutation = useDeletePeerMutation()
   const [dialogOpen, setDialogOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<PeerRow | null>(null)
   const [filters, setFilters] = useState<Filter[]>(createDefaultPeerFilters)
 
   const addButton = useMemo(
@@ -102,6 +112,33 @@ export function NetworkPeersCard({
     [],
   )
 
+  const columns = useMemo<ColumnDef<PeerRow, unknown>[]>(
+    () => [
+      ...peerColumns,
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) => (
+          <div className="flex items-center justify-end">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              type="button"
+              className="text-destructive"
+              aria-label="Удалить пира"
+              title="Удалить"
+              onClick={() => setDeleteTarget(row.original)}
+            >
+              <Trash2 className="size-3.5" />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [],
+  )
+
   return (
     <>
       <ResourcePage
@@ -114,7 +151,7 @@ export function NetworkPeersCard({
         onFiltersChange={setFilters}
         onClearFilters={() => setFilters(createDefaultPeerFilters())}
         getFilterFieldValue={getPeerFilterFieldValue}
-        columns={peerColumns}
+        columns={columns}
         data={items}
         getRowId={(row) => row.id}
         isLoading={isLoading}
@@ -129,7 +166,34 @@ export function NetworkPeersCard({
         }}
       />
 
-      <PeerFormDialog open={dialogOpen} onOpenChange={setDialogOpen} speakers={speakers} />
+      <PeerFormDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        speakers={speakers}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        title="Удалить пира?"
+        description={
+          deleteTarget
+            ? `${peerDeleteLabel(deleteTarget)} будет удалён. Запустится reconcile пиров и apply на спикеры.`
+            : undefined
+        }
+        confirmLabel="Удалить"
+        confirmLoadingLabel="Удаление…"
+        destructive
+        confirmLoading={deleteMutation.isPending}
+        onConfirm={() => {
+          if (!deleteTarget) return
+          void deleteMutation
+            .mutateAsync(deleteTarget.id)
+            .then(() => setDeleteTarget(null))
+        }}
+      />
     </>
   )
 }

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

@@ -72,7 +72,7 @@ export function PeerFormDialog({
     }
     const asn = Number(remoteAsn)
     if (!asn || asn <= 0) {
-      toast.error('Remote ASN должен быть больше 0')
+      toast.error('ASN соседа должен быть больше 0')
       return
     }
     const body: BgpPeerCreate = {
@@ -132,7 +132,7 @@ export function PeerFormDialog({
         />
       </div>
       <div className="flex flex-col gap-2">
-        <Label htmlFor="peer-asn">Remote ASN</Label>
+        <Label htmlFor="peer-asn">ASN соседа</Label>
         <Input
           id="peer-asn"
           type="number"

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

@@ -54,7 +54,7 @@ export function PanelCard({
     <Frame
       dense
       spacing={spacing}
-      className={cn(panelCardClassName, className)}
+      className={cn(panelCardClassName, 'min-w-0', className)}
     >
       <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
         {hasHeader ? (

apps/web/src/components/patterns/donut-breakdown-card.tsx

@@ -8,7 +8,7 @@ import {
 } from '@evobgp/ui/components/chart'
 import type { BreakdownSlice } from '@/lib/metrics'
 
-/** chart-27 / chart-13 inspired donut in PanelCard. */
+/** chart-27 / chart-13 inspired donut in PanelCard (Frame surface). */
 export function DonutBreakdownCard({
   title,
   description,
@@ -30,13 +30,24 @@ export function DonutBreakdownCard({
   const data = slices.map((slice) => ({ ...slice, fill: slice.color, share: slice.count }))
 
   return (
-    <PanelCard title={title} description={description} className="h-full">
-      <div className="flex flex-col gap-4 p-4 sm:flex-row sm:items-center">
+    <PanelCard
+      title={title}
+      description={description}
+      className="h-full"
+      actions={
+        badge ? (
+          <Badge variant="success-light" className="hidden sm:inline-flex">
+            {badge}
+          </Badge>
+        ) : undefined
+      }
+    >
+      <div className="flex flex-col items-center justify-start gap-4 p-4 sm:flex-row sm:items-center sm:justify-start sm:gap-6">
         {total === 0 ? (
           <p className="text-muted-foreground w-full py-8 text-center text-sm">Нет данных</p>
         ) : (
           <>
-            <div className="relative mx-auto size-36 shrink-0">
+            <div className="relative mx-auto size-36 shrink-0 sm:mx-0">
               <ChartContainer config={chartConfig} className="aspect-square size-36">
                 <PieChart>
                   <Pie
@@ -59,11 +70,11 @@ export function DonutBreakdownCard({
                 <span className="text-lg font-semibold tabular-nums">{total}</span>
               </div>
             </div>
-            <ul className="min-w-0 flex-1 space-y-2">
+            <ul className="flex w-full min-w-0 max-w-xs flex-col gap-2 sm:w-auto sm:min-w-[10rem]">
               {slices.map((slice) => {
                 const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
                 return (
-                  <li key={slice.key} className="flex items-center justify-between gap-2 text-sm">
+                  <li key={slice.key} className="flex items-center justify-between gap-3 text-sm">
                     <span className="flex min-w-0 items-center gap-2">
                       <span
                         className="size-2.5 shrink-0 rounded-full"
@@ -81,11 +92,6 @@ export function DonutBreakdownCard({
             </ul>
           </>
         )}
-        {badge ? (
-          <Badge variant="success-light" className="absolute top-4 right-4 hidden sm:flex">
-            {badge}
-          </Badge>
-        ) : null}
       </div>
     </PanelCard>
   )

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

@@ -2,7 +2,10 @@ import type { ReactNode } from 'react'
 import type { LucideIcon } from 'lucide-react'
 
 import { IconStack } from '@/components/reui/icon-stack'
-import { Card, CardContent } from '@evobgp/ui/components/card'
+import {
+  Frame,
+  FramePanel,
+} from '@/components/reui/frame'
 import {
   Empty,
   EmptyDescription,
@@ -11,7 +14,7 @@ import {
   EmptyTitle,
 } from '@evobgp/ui/components/empty'
 
-/** empty-state-11 pattern adapted to Card surface. */
+/** empty-state-14: Frame + IconStack. Preview: https://reui.io/preview/base/empty-state-14 */
 export function IllustratedEmptyState({
   title,
   description,
@@ -24,8 +27,8 @@ export function IllustratedEmptyState({
   action?: ReactNode
 }) {
   return (
-    <Card className="bg-muted min-h-[240px] p-0 shadow-none">
-      <CardContent className="flex min-h-[240px] flex-col items-center justify-center gap-4 p-6 sm:p-10">
+    <Frame dense spacing="sm" className="w-full">
+      <FramePanel className="flex min-h-[240px] flex-col items-center justify-center gap-4 p-6 sm:p-10">
         {action ? <div className="w-full self-end">{action}</div> : null}
         <Empty className="max-w-md gap-5 bg-transparent p-0">
           <EmptyHeader className="items-center gap-5 text-center">
@@ -40,7 +43,7 @@ export function IllustratedEmptyState({
             </div>
           </EmptyHeader>
         </Empty>
-      </CardContent>
-    </Card>
+      </FramePanel>
+    </Frame>
   )
 }

apps/web/src/components/patterns/kpi-sparkline-card.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@/components/reui/badge'
 import { CardDotField } from '@/components/dashboard/card-dot-field'
 import { PanelCorners } from '@/components/patterns/panel-corners'
 import { toneStyles, type MetricTone } from '@/components/patterns/metric-tone-styles'
-import { Card, CardContent } from '@evobgp/ui/components/card'
+import { Frame, FramePanel } from '@/components/reui/frame'
 
 export type KpiSparklineMetric = {
   id: string
@@ -44,21 +44,21 @@ function Sparkline({ values, color }: { values: readonly number[]; color: string
   )
 }
 
-/** KPI card with sparkline (dashboard-5 / chart-15 pattern, Card surface). */
+/** KPI sparkline tile — chart-15 Frame DNA. Preview: https://reui.io/preview/base/chart-15 */
 export function KpiSparklineCard({ metric }: { metric: KpiSparklineMetric }) {
   const tone = toneStyles[metric.tone]
 
   return (
-    <Card className="relative overflow-hidden p-0">
-      <CardDotField className="text-muted-foreground [mask-image:radial-gradient(72%_64%_at_50%_44%,black,transparent)] opacity-70" />
-      <PanelCorners />
-      <CardContent className="relative z-10 flex min-h-[7.25rem] flex-col justify-between gap-5 p-4">
-        <div className="flex min-w-0 flex-col gap-0.5">
+    <Frame dense spacing="sm" className="relative overflow-hidden">
+      <FramePanel className="relative isolate flex min-h-[7.25rem] flex-col justify-between gap-5 overflow-hidden p-4">
+        <CardDotField className="text-muted-foreground [mask-image:radial-gradient(72%_64%_at_50%_44%,black,transparent)] opacity-70" />
+        <PanelCorners />
+        <div className="relative z-10 flex min-w-0 flex-col gap-0.5">
           <span className="text-foreground truncate text-sm leading-4 font-semibold">{metric.title}</span>
           <span className="text-muted-foreground truncate text-xs leading-4">{metric.label}</span>
         </div>
-        <div className="flex items-end justify-between gap-4">
-          <div className="min-w-0 space-y-2.5">
+        <div className="relative z-10 flex items-end justify-between gap-4">
+          <div className="flex min-w-0 flex-col gap-2.5">
             <div className="text-foreground text-2xl leading-none font-semibold tracking-tight tabular-nums">
               {metric.value}
             </div>
@@ -71,7 +71,7 @@ export function KpiSparklineCard({ metric }: { metric: KpiSparklineMetric }) {
           </div>
           <Sparkline values={metric.sparkline} color={tone.stroke} />
         </div>
-      </CardContent>
-    </Card>
+      </FramePanel>
+    </Frame>
   )
 }

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

@@ -34,23 +34,29 @@ export function QueryState<T>({
   children,
 }: QueryStateProps<T>) {
   if (isLoading) {
-    return <>{skeleton ?? <DefaultSkeleton />}</>
+    return (
+      <div role="status" aria-live="polite" aria-busy="true">
+        {skeleton ?? <DefaultSkeleton />}
+      </div>
+    )
   }
   if (isError) {
     return (
-      <EmptyState
-        icon={<AlertCircle className="size-8" />}
-        title="Ошибка загрузки"
-        description={error instanceof Error ? error.message : 'Не удалось загрузить данные'}
-        action={
-          onRetry ? (
-            <Button variant="outline" size="sm" onClick={onRetry}>
-              <RefreshCwIcon data-icon="inline-start" />
-              Повторить
-            </Button>
-          ) : null
-        }
-      />
+      <div role="alert">
+        <EmptyState
+          icon={AlertCircle}
+          title="Ошибка загрузки"
+          description={error instanceof Error ? error.message : 'Не удалось загрузить данные'}
+          action={
+            onRetry ? (
+              <Button variant="outline" size="sm" onClick={onRetry}>
+                <RefreshCwIcon data-icon="inline-start" />
+                Повторить
+              </Button>
+            ) : null
+          }
+        />
+      </div>
     )
   }
   if (empty || data == null) {

apps/web/src/components/reui-kit/kpi-cols.ts

@@ -1,10 +1,13 @@
-/** Shared grid column classes for hybrid KPI / Quick Actions tiles. */
+/**
+ * Shared grid column classes for hybrid KPI / Quick Actions tiles.
+ * Container queries only — never 5–6 columns on laptop width (tiles overlap).
+ * @see https://reui.io/preview/base/stats-12
+ */
 export function kpiCols(count: number): string {
   if (count <= 1) return 'grid-cols-1'
   if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
   if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
   if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
-  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
-  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
-  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+  if (count <= 6) return 'grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3'
+  return 'grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4'
 }

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

@@ -5,7 +5,7 @@ import { Frame, FramePanel } from '@/components/reui/frame'
 import { Badge } from '@/components/reui/badge'
 import { cn } from '@evobgp/ui/lib/utils'
 import { kpiCols } from './kpi-cols'
-import { Item, ItemMedia } from '@evobgp/ui/components/item'
+import { IconTile } from '@/components/reui/icon-tile'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 
 export type KpiStatVariant = 'default' | 'warning' | 'destructive'
@@ -83,16 +83,13 @@ function KpiStatCardBody({ item }: { item: KpiStatItem }) {
   return (
     <div className="relative z-10 flex h-full items-start gap-3">
       {item.icon ? (
-        <Item
-          className={cn(
-            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
-            item.iconClassName ?? DEFAULT_ICON_CLASS,
-          )}
+        <IconTile
+          variant="elevated"
+          aria-hidden="true"
+          className={cn('size-10.5', item.iconClassName ?? DEFAULT_ICON_CLASS)}
         >
-          <ItemMedia variant="icon" className="size-auto">
-            {item.icon}
-          </ItemMedia>
-        </Item>
+          {item.icon}
+        </IconTile>
       ) : null}
 
       <div className="flex min-w-0 flex-1 flex-col gap-0.5">

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

@@ -27,7 +27,7 @@ interface OpsDashboardProps {
 }
 
 const rootClassName =
-  'text-foreground @container flex w-full flex-col gap-2 md:gap-3'
+  'text-foreground @container flex w-full min-w-0 flex-col gap-4 md:gap-6'
 
 function OpsDashboardSkeleton() {
   return (
@@ -37,7 +37,7 @@ function OpsDashboardSkeleton() {
         <Skeleton className="mt-2 h-4 w-80 max-w-full" />
       </header>
       <KpiStatGrid cards={[]} isLoading skeletonCount={4} />
-      <div className="grid gap-2 @3xl:grid-cols-2">
+      <div className="flex min-w-0 flex-col gap-4">
         <Skeleton className="h-64 w-full rounded-xl" />
         <Skeleton className="h-64 w-full rounded-xl" />
       </div>
@@ -79,13 +79,13 @@ export function OpsDashboard({
 
       <section
         aria-label="Аналитика"
-        className="grid min-w-0 items-start gap-2 @3xl:grid-cols-2"
+        className="flex min-w-0 flex-col gap-4"
       >
         {charts}
       </section>
 
       <section aria-label={queueTitle}>
-        <Frame dense spacing="sm" className="w-full">
+        <Frame dense spacing="sm" className="w-full min-w-0">
           <FrameHeader>
             <FrameTitle>{queueTitle}</FrameTitle>
             <FrameDescription>{queueDescription}</FrameDescription>

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

@@ -8,7 +8,7 @@ import {
   FrameTitle,
 } from '@/components/reui/frame'
 import { Badge } from '@/components/reui/badge'
-import { Item, ItemMedia } from '@evobgp/ui/components/item'
+import { IconTile } from '@/components/reui/icon-tile'
 import { cn } from '@evobgp/ui/lib/utils'
 import { kpiCols } from './kpi-cols'
 
@@ -54,16 +54,13 @@ function QuickActionBody({ action }: { action: QuickActionItem }) {
   return (
     <div className="relative z-10 flex h-full items-start gap-3">
       {action.icon ? (
-        <Item
-          className={cn(
-            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
-            action.iconClassName ?? DEFAULT_ICON_CLASS,
-          )}
+        <IconTile
+          variant="elevated"
+          aria-hidden="true"
+          className={cn('size-10.5', action.iconClassName ?? DEFAULT_ICON_CLASS)}
         >
-          <ItemMedia variant="icon" className="size-auto">
-            {action.icon}
-          </ItemMedia>
-        </Item>
+          {action.icon}
+        </IconTile>
       ) : null}
 
       <div className="flex min-w-0 flex-1 flex-col gap-0.5">

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

@@ -39,6 +39,8 @@ import {
   AlertTitle,
 } from '@/components/reui/alert'
 import { EmptyState } from '@/components/empty-state'
+import { DATA_GRID_PAGINATION_RU } from '@/lib/data-grid-defaults'
+import { FILTERS_I18N_RU } from '@/lib/filters-i18n'
 import { applyFiltersToData } from './filter-utils'
 
 export interface ResourcePageTab {
@@ -322,6 +324,7 @@ export function ResourcePage<T extends object>({
                 fields={filterFields}
                 onChange={handleFiltersChange}
                 size="default"
+                i18n={FILTERS_I18N_RU}
                 trigger={
                   <Button type="button" variant="outline" aria-label="Фильтры">
                     <FilterIcon className="size-4" aria-hidden="true" />
@@ -355,11 +358,8 @@ export function ResourcePage<T extends object>({
 
             <FrameFooter>
               <DataGridPagination
+                {...DATA_GRID_PAGINATION_RU}
                 sizes={[5, 10, 20, 50]}
-                rowsPerPageLabel="Строк на странице"
-                info="{from} - {to} of {count}"
-                previousPageLabel="Предыдущая"
-                nextPageLabel="Следующая"
               />
             </FrameFooter>
           </FramePanel>

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

@@ -9,7 +9,7 @@ import { PageHeader } from '@/components/page-header'
 
 export interface SettingsTabConfig {
   id: string
-  to: string
+  to: '/settings' | '/tenant-settings'
   label: string
   icon?: ReactNode
 }
@@ -43,16 +43,21 @@ interface SettingsShellProps {
  */
 export function SettingsShell({
   title = 'Настройки',
-  description = 'Подключение UI и параметры плоскости управления',
+  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 и параметры плоскости управления')
 
   return (
     <PageShell>
       <div className="mx-auto flex w-full max-w-4xl flex-col gap-5">
-        <PageHeader title={title} description={description} />
+        <PageHeader title={title} description={headerDescription} />
 
         <div
           className={cn(
@@ -72,19 +77,35 @@ export function SettingsShell({
             >
               {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={tab.to}
+                    to="/settings"
+                    search={{ tab: 'connection' }}
                     aria-current={isActive ? 'page' : undefined}
-                    className={cn(
-                      'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
-                      isMobile && 'shrink-0',
-                      !isMobile && 'w-full',
-                      isActive
-                        ? 'bg-muted text-foreground font-medium shadow-sm ring-1 ring-border/60'
-                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
-                    )}
+                    className={className}
                   >
                     {tab.icon}
                     {tab.label}

apps/web/src/components/reui/icon-tile.tsx

@@ -0,0 +1,125 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+/**
+ * CSS variable architecture:
+ *
+ * The root owns four variables so every part of the tile stays in proportion
+ * and stays overridable from a single `className`:
+ *
+ *   --icon-tile-size       tile width/height
+ *   --icon-tile-icon-size  glyph size applied to child svgs
+ *   --icon-tile-radius     corner radius (also drives the nested inner card)
+ *   --icon-tile-inset      gap between the outer ring and the inner card
+ *
+ * The `frame` and `soft` variants paint their inner card with an `::after`
+ * pseudo element instead of a wrapper node. `isolate` makes the root a stacking
+ * context, so the negative z-index pseudo paints above the root background but
+ * below the in-flow icon - no extra DOM, and `render` composition keeps working.
+ *
+ * Tone: `soft` and `solid` derive every fill and border from `currentColor`, so
+ * a single text color class (e.g. `text-success`) retints the whole tile. They
+ * default to `text-primary`; override it to recolor without touching internals.
+ */
+const iconTileVariants = cva(
+  [
+    "relative inline-flex shrink-0 items-center justify-center align-middle",
+    "size-(--icon-tile-size) rounded-(--icon-tile-radius)",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-(--icon-tile-icon-size)",
+  ],
+  {
+    variants: {
+      variant: {
+        /** Plain bordered surface. The quiet default for list rows and toolbars. */
+        outline: "border border-border bg-background dark:bg-input/32",
+        /** Raised muted fill with a background-colored ring. Reads as a physical chip. */
+        elevated:
+          "border-2 border-background bg-muted text-accent-foreground shadow-[0_1px_3px_0_rgb(0_0_0/0.14)] dark:border",
+        /**
+         * Tinted double container: an opacity-filled outer ring with no border
+         * around a bordered inner card, all derived from `currentColor`. The
+         * quiet, colorful sibling of `frame`. Retint with a text color class.
+         */
+        soft: [
+          "isolate p-(--icon-tile-inset) text-primary bg-current/10",
+          "after:absolute after:-z-10 after:inset-(--icon-tile-inset)",
+          "after:rounded-[calc(var(--icon-tile-radius)-var(--icon-tile-inset))]",
+          "after:border after:border-current/20 after:bg-current/5",
+        ],
+        /** Filled tone with a contrasting glyph. Retint with `bg-*` + a text color. */
+        solid: "bg-primary text-primary-foreground",
+        /** Double container - a muted ring around an inset card, matching Frame. */
+        frame: [
+          "isolate border border-border bg-muted/50 p-(--icon-tile-inset)",
+          "after:absolute after:-z-10 after:inset-(--icon-tile-inset)",
+          "after:rounded-[calc(var(--icon-tile-radius)-var(--icon-tile-inset))]",
+          "after:border after:border-border after:bg-card after:shadow-xs",
+        ],
+      },
+      size: {
+        xs: "[--icon-tile-size:--spacing(6)] [--icon-tile-icon-size:--spacing(3.5)] [--icon-tile-inset:--spacing(0.5)]",
+        sm: "[--icon-tile-size:--spacing(8)] [--icon-tile-icon-size:--spacing(4)] [--icon-tile-inset:--spacing(0.5)]",
+        default:
+          "[--icon-tile-size:--spacing(10)] [--icon-tile-icon-size:--spacing(4.5)] [--icon-tile-inset:--spacing(0.75)]",
+        lg: "[--icon-tile-size:--spacing(12)] [--icon-tile-icon-size:--spacing(5.5)] [--icon-tile-inset:--spacing(0.75)]",
+        xl: "[--icon-tile-size:--spacing(14)] [--icon-tile-icon-size:--spacing(7)] [--icon-tile-inset:--spacing(1)]",
+      },
+      /**
+       * `default`: active style radius. `full`: circular.
+       * The plain value is the fallback outside a style scope; the `style-*`
+       * tokens win by specificity inside one, and survive the registry
+       * transform as the single resolved value per generated style.
+       *
+       * Each style token is clamped to a fraction of the tile. A flat radius
+       * is a circle once it reaches half the box, so the soft styles used to
+       * render `xs` (24px) and `sm` (32px) as plain circles and swallow the
+       * `full` variant's meaning. Clamping keeps one corner ratio at every
+       * size instead, so a tile still reads as the same shape when it scales.
+       * Luma and Rhea take the gentler quarter ratio; Maia stays at a third.
+       */
+      radius: {
+        default:
+          "[--icon-tile-radius:min(var(--radius-md),calc(var(--icon-tile-size)/3))] [--icon-tile-radius:min(var(--radius-md),calc(var(--icon-tile-size)/3))]",
+        full: "[--icon-tile-radius:calc(infinity*1px)]",
+      },
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default",
+      radius: "default",
+    },
+  }
+)
+
+interface IconTileProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof iconTileVariants>["variant"]
+  size?: VariantProps<typeof iconTileVariants>["size"]
+  radius?: VariantProps<typeof iconTileVariants>["radius"]
+}
+
+function IconTile({
+  className,
+  variant = "outline",
+  size = "default",
+  radius = "default",
+  render,
+  ...props
+}: IconTileProps) {
+  const defaultProps = {
+    "data-slot": "icon-tile",
+    "data-variant": variant,
+    "data-size": size,
+    className: cn(iconTileVariants({ variant, size, radius, className })),
+  }
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  })
+}
+
+export { IconTile, iconTileVariants, type IconTileProps }

apps/web/src/components/reui/stepper.tsx

@@ -0,0 +1,470 @@
+import type { HTMLAttributes, ReactElement } from "react"
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+// Types
+type StepperOrientation = "horizontal" | "vertical"
+type StepState = "active" | "completed" | "inactive" | "loading"
+type StepIndicators = {
+  active?: React.ReactNode
+  completed?: React.ReactNode
+  inactive?: React.ReactNode
+  loading?: React.ReactNode
+}
+
+interface StepperContextValue {
+  activeStep: number
+  setActiveStep: (step: number) => void
+  stepsCount: number
+  orientation: StepperOrientation
+  registerTrigger: (node: HTMLButtonElement | null) => void
+  triggerNodes: HTMLButtonElement[]
+  focusNext: (currentIdx: number) => void
+  focusPrev: (currentIdx: number) => void
+  focusFirst: () => void
+  focusLast: () => void
+  indicators: StepIndicators
+}
+
+interface StepItemContextValue {
+  step: number
+  state: StepState
+  isDisabled: boolean
+  isLoading: boolean
+}
+
+const StepperContext = createContext<StepperContextValue | undefined>(undefined)
+const StepItemContext = createContext<StepItemContextValue | undefined>(
+  undefined
+)
+
+function useStepper() {
+  const ctx = useContext(StepperContext)
+  if (!ctx) throw new Error("useStepper must be used within a Stepper")
+  return ctx
+}
+
+function useStepItem() {
+  const ctx = useContext(StepItemContext)
+  if (!ctx) throw new Error("useStepItem must be used within a StepperItem")
+  return ctx
+}
+
+interface StepperProps extends HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number
+  value?: number
+  onValueChange?: (value: number) => void
+  orientation?: StepperOrientation
+  indicators?: StepIndicators
+}
+
+function Stepper({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  className,
+  children,
+  indicators = {},
+  ...props
+}: StepperProps) {
+  const [activeStep, setActiveStep] = useState(defaultValue)
+  const [triggerNodes, setTriggerNodes] = useState<HTMLButtonElement[]>([])
+
+  // Register/unregister triggers
+  const registerTrigger = useCallback((node: HTMLButtonElement | null) => {
+    setTriggerNodes((prev) => {
+      if (node && !prev.includes(node)) {
+        return [...prev, node]
+      } else if (!node && prev.includes(node!)) {
+        return prev.filter((n) => n !== node)
+      } else {
+        return prev
+      }
+    })
+  }, [])
+
+  const handleSetActiveStep = useCallback(
+    (step: number) => {
+      if (value === undefined) {
+        setActiveStep(step)
+      }
+      onValueChange?.(step)
+    },
+    [value, onValueChange]
+  )
+
+  const currentStep = value ?? activeStep
+
+  // Keyboard navigation logic
+  const focusTrigger = (idx: number) => {
+    if (triggerNodes[idx]) triggerNodes[idx].focus()
+  }
+  const focusNext = (currentIdx: number) =>
+    focusTrigger((currentIdx + 1) % triggerNodes.length)
+  const focusPrev = (currentIdx: number) =>
+    focusTrigger((currentIdx - 1 + triggerNodes.length) % triggerNodes.length)
+  const focusFirst = () => focusTrigger(0)
+  const focusLast = () => focusTrigger(triggerNodes.length - 1)
+
+  // Context value
+  const contextValue = useMemo<StepperContextValue>(
+    () => ({
+      activeStep: currentStep,
+      setActiveStep: handleSetActiveStep,
+      stepsCount: Children.toArray(children).filter(
+        (child): child is ReactElement =>
+          isValidElement(child) &&
+          (child.type as { displayName?: string }).displayName === "StepperItem"
+      ).length,
+      orientation,
+      registerTrigger,
+      focusNext,
+      focusPrev,
+      focusFirst,
+      focusLast,
+      triggerNodes,
+      indicators,
+    }),
+    [
+      currentStep,
+      handleSetActiveStep,
+      children,
+      orientation,
+      registerTrigger,
+      triggerNodes,
+    ]
+  )
+
+  return (
+    <StepperContext.Provider value={contextValue}>
+      <div
+        role="tablist"
+        aria-orientation={orientation}
+        data-slot="stepper"
+        className={cn("w-full", className)}
+        data-orientation={orientation}
+        {...props}
+      >
+        {children}
+      </div>
+    </StepperContext.Provider>
+  )
+}
+
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number
+  completed?: boolean
+  disabled?: boolean
+  loading?: boolean
+}
+
+function StepperItem({
+  step,
+  completed = false,
+  disabled = false,
+  loading = false,
+  className,
+  children,
+  ...props
+}: StepperItemProps) {
+  const { activeStep } = useStepper()
+
+  const state: StepState =
+    completed || step < activeStep
+      ? "completed"
+      : activeStep === step
+        ? "active"
+        : "inactive"
+
+  const isLoading = loading && step === activeStep
+
+  return (
+    <StepItemContext.Provider
+      value={{ step, state, isDisabled: disabled, isLoading }}
+    >
+      <div
+        data-slot="stepper-item"
+        className={cn(
+          "group/step flex items-center justify-center not-last:flex-1 group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col",
+          className
+        )}
+        data-state={state}
+        {...(isLoading ? { "data-loading": true } : {})}
+        {...props}
+      >
+        {children}
+      </div>
+    </StepItemContext.Provider>
+  )
+}
+
+type StepperTriggerProps = useRender.ComponentProps<"button">
+
+function StepperTrigger({
+  className,
+  children,
+  tabIndex,
+  render,
+  ...props
+}: StepperTriggerProps) {
+  const { state, isLoading } = useStepItem()
+  const stepperCtx = useStepper()
+  const {
+    setActiveStep,
+    activeStep,
+    registerTrigger,
+    triggerNodes,
+    focusNext,
+    focusPrev,
+    focusFirst,
+    focusLast,
+  } = stepperCtx
+  const { step, isDisabled } = useStepItem()
+  const isSelected = activeStep === step
+  const id = `stepper-tab-${step}`
+  const panelId = `stepper-panel-${step}`
+
+  // Register this trigger for keyboard navigation
+  const btnRef = useRef<HTMLButtonElement>(null)
+  useEffect(() => {
+    if (btnRef.current) {
+      registerTrigger(btnRef.current)
+    }
+  }, [btnRef.current])
+
+  // Find our index among triggers for navigation
+  const myIdx = useMemo(
+    () =>
+      triggerNodes.findIndex((n: HTMLButtonElement) => n === btnRef.current),
+    [triggerNodes, btnRef.current]
+  )
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault()
+        if (myIdx !== -1 && focusNext) focusNext(myIdx)
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault()
+        if (myIdx !== -1 && focusPrev) focusPrev(myIdx)
+        break
+      case "Home":
+        e.preventDefault()
+        if (focusFirst) focusFirst()
+        break
+      case "End":
+        e.preventDefault()
+        if (focusLast) focusLast()
+        break
+      case "Enter":
+      case " ":
+        e.preventDefault()
+        setActiveStep(step)
+        break
+    }
+  }
+
+  const defaultProps = {
+    role: "tab",
+    id,
+    "aria-selected": isSelected,
+    "aria-controls": panelId,
+    tabIndex: typeof tabIndex === "number" ? tabIndex : isSelected ? 0 : -1,
+    "data-slot": "stepper-trigger",
+    "data-state": state,
+    "data-loading": isLoading,
+    className: cn(
+      "focus-visible:border-ring focus-visible:ring-ring/50 inline-flex cursor-pointer items-center outline-none focus-visible:z-10 focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-60",
+      "gap-2.5 rounded-full",
+      className
+    ),
+    onClick: () => setActiveStep(step),
+    onKeyDown: handleKeyDown,
+    disabled: isDisabled,
+    children,
+  }
+
+  return useRender({
+    defaultTagName: "button",
+    render,
+    ref: btnRef,
+    props: mergeProps<"button">(defaultProps, props),
+  })
+}
+
+function StepperIndicator({
+  children,
+  className,
+}: React.ComponentProps<"div">) {
+  const { state, isLoading } = useStepItem()
+  const { indicators } = useStepper()
+
+  return (
+    <div
+      data-slot="stepper-indicator"
+      data-state={state}
+      className={cn(
+        "border-background bg-accent text-accent-foreground data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground relative flex size-6 shrink-0 items-center justify-center overflow-hidden",
+        "rounded-full text-xs",
+        className
+      )}
+    >
+      <div className="absolute">
+        {indicators &&
+        ((isLoading && indicators.loading) ||
+          (state === "completed" && indicators.completed) ||
+          (state === "active" && indicators.active) ||
+          (state === "inactive" && indicators.inactive))
+          ? (isLoading && indicators.loading) ||
+            (state === "completed" && indicators.completed) ||
+            (state === "active" && indicators.active) ||
+            (state === "inactive" && indicators.inactive)
+          : children}
+      </div>
+    </div>
+  )
+}
+
+function StepperSeparator({ className }: React.ComponentProps<"div">) {
+  const { state } = useStepItem()
+
+  return (
+    <div
+      data-slot="stepper-separator"
+      data-state={state}
+      className={cn(
+        "bg-muted rounded-sm m-0.5 group-data-[orientation=horizontal]/stepper-nav:h-0.5 group-data-[orientation=horizontal]/stepper-nav:flex-1 group-data-[orientation=vertical]/stepper-nav:h-12 group-data-[orientation=vertical]/stepper-nav:w-0.5",
+        className
+      )}
+    />
+  )
+}
+
+function StepperTitle({ children, className }: React.ComponentProps<"h3">) {
+  const { state } = useStepItem()
+
+  return (
+    <h3
+      data-slot="stepper-title"
+      data-state={state}
+      className={cn("text-sm leading-none font-medium", className)}
+    >
+      {children}
+    </h3>
+  )
+}
+
+function StepperDescription({
+  children,
+  className,
+}: React.ComponentProps<"div">) {
+  const { state } = useStepItem()
+
+  return (
+    <div
+      data-slot="stepper-description"
+      data-state={state}
+      className={cn("text-muted-foreground text-sm", className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+function StepperNav({ children, className }: React.ComponentProps<"nav">) {
+  const { activeStep, orientation } = useStepper()
+
+  return (
+    <nav
+      data-slot="stepper-nav"
+      data-state={activeStep}
+      data-orientation={orientation}
+      className={cn(
+        "group/stepper-nav inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+        className
+      )}
+    >
+      {children}
+    </nav>
+  )
+}
+
+function StepperPanel({ children, className }: React.ComponentProps<"div">) {
+  const { activeStep } = useStepper()
+
+  return (
+    <div
+      data-slot="stepper-panel"
+      data-state={activeStep}
+      className={cn("w-full", className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface StepperContentProps extends React.ComponentProps<"div"> {
+  value: number
+  forceMount?: boolean
+}
+
+function StepperContent({
+  value,
+  forceMount,
+  children,
+  className,
+}: StepperContentProps) {
+  const { activeStep } = useStepper()
+  const isActive = value === activeStep
+
+  if (!forceMount && !isActive) {
+    return null
+  }
+
+  return (
+    <div
+      data-slot="stepper-content"
+      data-state={activeStep}
+      className={cn("w-full", className, !isActive && forceMount && "hidden")}
+      hidden={!isActive && forceMount}
+    >
+      {children}
+    </div>
+  )
+}
+
+export {
+  useStepper,
+  useStepItem,
+  Stepper,
+  StepperItem,
+  StepperTrigger,
+  StepperIndicator,
+  StepperSeparator,
+  StepperTitle,
+  StepperDescription,
+  StepperPanel,
+  StepperContent,
+  StepperNav,
+  type StepperProps,
+  type StepperItemProps,
+  type StepperTriggerProps,
+  type StepperContentProps,
+}

apps/web/src/components/schedule/schedule-agenda-panel.tsx

@@ -133,7 +133,9 @@ export function ScheduleAgendaPanel({
             </div>
             <Select value={filter} onValueChange={(v) => v && setFilter(v as JobFilter)}>
               <SelectTrigger size="sm" className="w-full sm:w-44">
-                <SelectValue />
+                <SelectValue>
+                  {FILTER_ITEMS.find((item) => item.value === filter)?.label}
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
                 {FILTER_ITEMS.map((item) => (

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

@@ -3,9 +3,9 @@ import { useTheme } from 'next-themes'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
-import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
-import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
-import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+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 {
   ToggleGroup,

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

@@ -4,9 +4,9 @@ import { Save } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
-import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
-import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
-import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+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 { LoadingButton } from '@/components/loading-button'
 import {

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

@@ -6,7 +6,7 @@ import {
 } from 'lucide-react'
 import { Fragment } from 'react'
 
-import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
+import { SettingsCard } from '@/components/settings/settings-card'
 import { Badge } from '@/components/reui/badge'
 import { Button } from '@evobgp/ui/components/button'
 import {

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

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
 import { MonitorIcon } from 'lucide-react'
 
-import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
-import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
-import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+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 { QueryState } from '@/components/query-state'
 import { TOKEN_STORAGE_KEY } from '@/lib/api-client'

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

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldSeparator,
+  FieldTitle,
+} from '@evobgp/ui/components/field'
+
+interface SettingRowProps {
+  title: string
+  description?: ReactNode
+  children: ReactNode
+  last?: boolean
+  labelFor?: string
+  contentClassName?: string
+  titleAddon?: ReactNode
+}
+
+/** Settings row — settings-3 DNA. Preview: https://reui.io/preview/base/settings-3 */
+export function SettingRow({
+  title,
+  description,
+  children,
+  last,
+  labelFor,
+  contentClassName,
+  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">
+            {labelFor ? (
+              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
+            ) : (
+              <FieldTitle>{title}</FieldTitle>
+            )}
+            {titleAddon}
+          </div>
+
+          {description ? (
+            <FieldDescription>{description}</FieldDescription>
+          ) : null}
+        </div>
+
+        <FieldContent
+          className={cn('min-w-0 @md/field-group:w-78', contentClassName)}
+        >
+          <div className="flex w-full justify-start @md/field-group:justify-end">
+            {children}
+          </div>
+        </FieldContent>
+      </Field>
+
+      {!last ? <FieldSeparator /> : null}
+    </>
+  )
+}

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

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

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

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+  FieldDescription,
+  FieldGroup,
+  FieldLegend,
+  FieldSet,
+} from '@evobgp/ui/components/field'
+
+interface SettingsFieldGroupProps {
+  legend: string
+  description: string
+  children: ReactNode
+  className?: string
+  fieldGroupClassName?: string
+}
+
+/** Settings field group — settings-3 DNA. Preview: https://reui.io/preview/base/settings-3 */
+export function SettingsFieldGroup({
+  legend,
+  description,
+  children,
+  className,
+  fieldGroupClassName,
+}: SettingsFieldGroupProps) {
+  return (
+    <FieldSet className={cn('gap-0', className)}>
+      <FieldLegend className="sr-only">{legend}</FieldLegend>
+      <FieldDescription className="sr-only">{description}</FieldDescription>
+      <FieldGroup className={cn('gap-0', fieldGroupClassName)}>
+        {children}
+      </FieldGroup>
+    </FieldSet>
+  )
+}

apps/web/src/components/skeletons.tsx

@@ -39,11 +39,11 @@ export function AnalyticsDashboardSkeleton() {
       </div>
 
       <div className={dashboardMainSidebarClassName}>
-        <Skeleton className="h-96 w-full rounded-xl xl:col-span-8" />
-        <Skeleton className="h-96 w-full rounded-xl xl:col-span-4" />
+        <Skeleton className="h-96 w-full min-w-0 rounded-xl" />
+        <Skeleton className="h-96 w-full min-w-0 rounded-xl" />
       </div>
 
-      <div className="grid gap-4 lg:grid-cols-2">
+      <div className={chartPanelGridClassName}>
         <Skeleton className="h-64 w-full rounded-xl" />
         <Skeleton className="h-64 w-full rounded-xl" />
       </div>

apps/web/src/lib/auth.ts

@@ -283,6 +283,56 @@ export function sessionCanManageApiKeys(session: {
   return session.role === 'operator'
 }
 
+/**
+ * Whether session may create/update module entries (`bgp:modules:write`).
+ * Mirrors backend `requirePerm` for JWT (is_admin / permissions) and API-key editor+.
+ */
+export function sessionCanWriteModules(session: {
+  role?: string
+  kind?: string
+  is_admin?: boolean
+  permissions?: readonly string[]
+} | null | undefined): boolean {
+  if (!session) return false
+  const jwtPath =
+    session.kind === 'jwt' ||
+    session.is_admin === true ||
+    (session.permissions?.length ?? 0) > 0
+  if (jwtPath) {
+    return (
+      session.is_admin === true ||
+      hasPermission(session.permissions ?? [], 'bgp:modules:write')
+    )
+  }
+  const role = (session.role ?? '').toLowerCase()
+  return role === 'editor' || role === 'operator'
+}
+
+/**
+ * Whether session may create/update directories (`bgp:directories:write`).
+ * Mirrors backend `requirePerm` for JWT (is_admin / permissions) and API-key editor+.
+ */
+export function sessionCanWriteDirectories(session: {
+  role?: string
+  kind?: string
+  is_admin?: boolean
+  permissions?: readonly string[]
+} | null | undefined): boolean {
+  if (!session) return false
+  const jwtPath =
+    session.kind === 'jwt' ||
+    session.is_admin === true ||
+    (session.permissions?.length ?? 0) > 0
+  if (jwtPath) {
+    return (
+      session.is_admin === true ||
+      hasPermission(session.permissions ?? [], 'bgp:directories:write')
+    )
+  }
+  const role = (session.role ?? '').toLowerCase()
+  return role === 'editor' || role === 'operator'
+}
+
 /** Nav path → minimum permission to show the item. Sync with app-shell NAV. */
 export function permissionForPath(pathname: string): string | null {
   if (pathname === '/' || pathname.startsWith('/dashboard')) {

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

@@ -44,6 +44,7 @@ export const DATA_GRID_MESSAGES_RU = {
 export const DATA_GRID_DENSE_LAYOUT: NonNullable<DataGridProps<object>['tableLayout']> = {
   ...DATA_GRID_TABLE_LAYOUT,
   dense: true,
+  width: 'auto',
 }
 
 export function createTextGlobalFilter<TData extends object>(

apps/web/src/lib/filters-i18n.ts

@@ -0,0 +1,94 @@
+import {
+  DEFAULT_I18N,
+  type FilterI18nConfig,
+} from '@/components/reui/filters'
+
+const OPERATOR_LABEL_RU: Record<string, string> = {
+  is: 'равно',
+  is_not: 'не равно',
+  is_any_of: 'любое из',
+  is_not_any_of: 'кроме',
+  includes_all: 'включает все',
+  excludes_all: 'исключает все',
+  before: 'до',
+  after: 'после',
+  between: 'между',
+  not_between: 'вне диапазона',
+  contains: 'содержит',
+  not_contains: 'не содержит',
+  starts_with: 'начинается с',
+  ends_with: 'заканчивается на',
+  equals: 'равно',
+  not_equals: 'не равно',
+  greater_than: 'больше',
+  less_than: 'меньше',
+  overlaps: 'пересекается',
+  includes: 'включает',
+  excludes: 'исключает',
+  empty: 'пусто',
+  not_empty: 'не пусто',
+}
+
+export const FILTERS_I18N_RU: FilterI18nConfig = {
+  ...DEFAULT_I18N,
+  addFilter: 'Фильтр',
+  searchFields: 'Фильтр…',
+  noFieldsFound: 'Поля не найдены.',
+  noResultsFound: 'Ничего не найдено.',
+  select: 'Выбрать…',
+  true: 'Да',
+  false: 'Нет',
+  min: 'Мин.',
+  max: 'Макс.',
+  to: '—',
+  typeAndPressEnter: 'Введите и нажмите Enter',
+  selected: 'выбрано',
+  selectedCount: 'выбрано',
+  addFilterTitle: 'Добавить фильтр',
+  operators: {
+    ...DEFAULT_I18N.operators,
+    is: 'равно',
+    isNot: 'не равно',
+    isAnyOf: 'любое из',
+    isNotAnyOf: 'кроме',
+    includesAll: 'включает все',
+    excludesAll: 'исключает все',
+    before: 'до',
+    after: 'после',
+    between: 'между',
+    notBetween: 'вне диапазона',
+    contains: 'содержит',
+    notContains: 'не содержит',
+    startsWith: 'начинается с',
+    endsWith: 'заканчивается на',
+    isExactly: 'точно',
+    equals: 'равно',
+    notEquals: 'не равно',
+    greaterThan: 'больше',
+    lessThan: 'меньше',
+    overlaps: 'пересекается',
+    includes: 'включает',
+    excludes: 'исключает',
+    includesAllOf: 'включает все',
+    includesAnyOf: 'включает любое',
+    empty: 'пусто',
+    notEmpty: 'не пусто',
+  },
+  placeholders: {
+    enterField: (fieldType: string) => `Введите ${fieldType}…`,
+    selectField: 'Выбрать…',
+    searchField: (fieldName: string) => `Поиск ${fieldName.toLowerCase()}…`,
+    enterKey: 'Введите ключ…',
+    enterValue: 'Введите значение…',
+  },
+  helpers: {
+    formatOperator: (operator: string) =>
+      OPERATOR_LABEL_RU[operator] ?? operator.replace(/_/g, ' '),
+  },
+  validation: {
+    invalidEmail: 'Некорректный email',
+    invalidUrl: 'Некорректный URL',
+    invalidTel: 'Некорректный телефон',
+    invalid: 'Некорректное значение',
+  },
+}

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

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  isReadyCheckOk,
+  isSystemReady,
+  readinessBreakdown,
+  readyCheckStatusLabel,
+} from '@/lib/metrics/readiness-breakdown'
+
+describe('isSystemReady', () => {
+  it('accepts ready and ok', () => {
+    expect(isSystemReady('ready')).toBe(true)
+    expect(isSystemReady('ok')).toBe(true)
+    expect(isSystemReady('READY')).toBe(true)
+  })
+
+  it('rejects not_ready and empty', () => {
+    expect(isSystemReady('not_ready')).toBe(false)
+    expect(isSystemReady(undefined)).toBe(false)
+    expect(isSystemReady('')).toBe(false)
+  })
+})
+
+describe('isReadyCheckOk', () => {
+  it('parses backend string checks as ok', () => {
+    expect(isReadyCheckOk('ok')).toBe(true)
+    expect(isReadyCheckOk('memory')).toBe(true)
+    expect(isReadyCheckOk('unavailable')).toBe(false)
+  })
+
+  it('parses boolean and object forms', () => {
+    expect(isReadyCheckOk(true)).toBe(true)
+    expect(isReadyCheckOk(false)).toBe(false)
+    expect(isReadyCheckOk({ ok: true })).toBe(true)
+    expect(isReadyCheckOk({ ok: false, error: 'down' })).toBe(false)
+  })
+})
+
+describe('readyCheckStatusLabel', () => {
+  it('labels memory and failures', () => {
+    expect(readyCheckStatusLabel('memory', true)).toBe('Memory')
+    expect(readyCheckStatusLabel('ok', true)).toBe('В норме')
+    expect(readyCheckStatusLabel('unavailable', false)).toBe('Недоступно')
+  })
+})
+
+describe('readinessBreakdown', () => {
+  it('counts healthy handleReady payload without false failures', () => {
+    const slices = readinessBreakdown(
+      {
+        status: 'ready',
+        checks: { store: 'ok', jobs: 'memory', postgres: 'ok' },
+      },
+      true,
+    )
+    expect(slices.find((s) => s.key === 'checks-fail')).toBeUndefined()
+    expect(slices.find((s) => s.key === 'checks-ok')?.count).toBe(3)
+    expect(slices.find((s) => s.key === 'health')?.count).toBe(1)
+  })
+
+  it('counts unavailable checks as failures', () => {
+    const slices = readinessBreakdown(
+      {
+        status: 'not_ready',
+        checks: { store: 'unavailable', jobs: 'memory' },
+      },
+      true,
+    )
+    expect(slices.find((s) => s.key === 'checks-fail')?.count).toBe(1)
+    expect(slices.find((s) => s.key === 'checks-ok')?.count).toBe(1)
+  })
+
+  it('returns API down slice when health fails', () => {
+    const slices = readinessBreakdown({ status: 'ready', checks: { store: 'ok' } }, false)
+    expect(slices).toHaveLength(1)
+    expect(slices[0]?.key).toBe('health-fail')
+  })
+})

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

@@ -2,12 +2,65 @@ import type { ReadyStatus } from '@/queries/monitoring'
 
 import type { BreakdownSlice } from './types'
 
-function checkOk(value: boolean | { ok?: boolean; error?: string } | undefined): boolean {
+/** Значение check из GET /v1/ready (строка, boolean или объект). */
+export type ReadyCheckValue = boolean | string | { ok?: boolean; error?: string } | null | undefined
+
+const OK_STRINGS = new Set(['ok', 'ready', 'memory', 'true', 'healthy', 'up'])
+const FAIL_STRINGS = new Set([
+  'unavailable',
+  'error',
+  'not_ready',
+  'failed',
+  'down',
+  'false',
+  'unhealthy',
+])
+
+/** Top-level status GET /v1/ready: API отдаёт `ready`, не `ok`. */
+export function isSystemReady(status: string | null | undefined): boolean {
+  if (!status) return false
+  const normalized = status.trim().toLowerCase()
+  return normalized === 'ready' || normalized === 'ok'
+}
+
+/**
+ * Интерпретация check value по контракту handleReady:
+ * store/postgres → "ok" | "unavailable"; jobs → "memory"; store_backend → "memory".
+ */
+export function isReadyCheckOk(value: ReadyCheckValue): boolean {
   if (typeof value === 'boolean') return value
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase()
+    if (OK_STRINGS.has(normalized)) return true
+    if (FAIL_STRINGS.has(normalized)) return false
+    // неизвестная непустая строка — считать OK (информативный статус бэкенда)
+    return normalized.length > 0
+  }
   if (value && typeof value === 'object') return value.ok === true
   return false
 }
 
+/** Человекочитаемый статус check для UI. */
+export function readyCheckStatusLabel(value: ReadyCheckValue, ok: boolean): string {
+  if (!ok) {
+    if (typeof value === 'string' && value.trim()) {
+      const n = value.trim().toLowerCase()
+      if (n === 'unavailable') return 'Недоступно'
+      if (n === 'not_ready') return 'Не готов'
+      return value
+    }
+    if (value && typeof value === 'object' && value.error) return value.error
+    return 'Ошибка'
+  }
+  if (typeof value === 'string') {
+    const n = value.trim().toLowerCase()
+    if (n === 'memory') return 'Memory'
+    if (n === 'ok' || n === 'ready' || n === 'healthy' || n === 'true') return 'В норме'
+    if (n) return value
+  }
+  return 'В норме'
+}
+
 export function readinessBreakdown(
   ready: ReadyStatus | null | undefined,
   healthOk: boolean,
@@ -28,7 +81,7 @@ export function readinessBreakdown(
   let failCount = 0
 
   for (const value of Object.values(checks)) {
-    if (checkOk(value)) okCount += 1
+    if (isReadyCheckOk(value)) okCount += 1
     else failCount += 1
   }
 
@@ -61,9 +114,11 @@ export function readinessBreakdown(
   if (slices.length === 1 && okCount === 0 && failCount === 0) {
     slices.push({
       key: 'ready',
-      label: ready?.status === 'ok' ? 'Готов' : 'Ожидает готовности',
+      label: isSystemReady(ready?.status) ? 'Готов' : 'Не готов',
       count: 1,
-      color: 'var(--color-chart-4)',
+      color: isSystemReady(ready?.status)
+        ? 'var(--color-chart-1)'
+        : 'var(--color-warning)',
     })
   }
 

apps/web/src/lib/modules/helpers.ts

@@ -36,6 +36,19 @@ export function dohProfileLabel(id: string, dohProfiles: DohProfile[]): string {
   return p ? (p.name?.trim() ? `${p.name} (${p.url})` : p.url) : `${id.slice(0, 8)}…`
 }
 
+/** Short label for forms / chips — name preferred, else hostname from URL. */
+export function dohProfileShortLabel(id: string, dohProfiles: DohProfile[]): string {
+  const p = dohProfiles.find((d) => d.id === id)
+  if (!p) return `${id.slice(0, 8)}…`
+  const name = p.name?.trim()
+  if (name) return name
+  try {
+    return new URL(p.url).hostname
+  } catch {
+    return p.url
+  }
+}
+
 export function normalizeCdnSourceKind(k: string): 'plaintext' | 'json' {
   return k.trim().toLowerCase() === 'json' ? 'json' : 'plaintext'
 }

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

@@ -117,6 +117,8 @@ export function readyCheckRu(key: string): string {
       return 'Хранилище'
     case 'jobs':
       return 'Очередь задач'
+    case 'store_backend':
+      return 'Бэкенд хранилища'
     default:
       return key
   }

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

@@ -12,6 +12,10 @@
  */
 export const UI_SURFACE = 'frame' as const
 
+/** Skip link — keyboard: first Tab. */
+export const SKIP_TO_CONTENT_CLASS =
+  'bg-background text-foreground ring-ring sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-sm focus:ring-2'
+
 /** Grid for ReUI stats-12 KPI rows (3–6 tiles). */
 export const kpiStatGridClassName = '@container w-full'
 
@@ -26,7 +30,13 @@ export const kpiGridClassName =
 export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
 
 /** Two-column chart panel row (monitoring / network overview). */
-export const chartPanelGridClassName = 'grid grid-cols-1 gap-4 @5xl:grid-cols-2'
+export const chartPanelGridClassName =
+  'grid min-w-0 grid-cols-1 items-start gap-4 @5xl:grid-cols-2'
 
-/** Main + sidebar layout (8+4) used on dashboard. */
-export const dashboardMainSidebarClassName = 'grid gap-4 xl:grid-cols-12 xl:items-start'
+/**
+ * Main + sidebar: stack until the dashboard container is wide enough.
+ * Do not nest this inside another 2-col grid — that squeezes modules/timeline.
+ * @see https://reui.io/preview/base/dashboard-1
+ */
+export const dashboardMainSidebarClassName =
+  'grid min-w-0 grid-cols-1 items-start gap-4 @5xl:grid-cols-2'

apps/web/src/queries/directories.ts

@@ -1,6 +1,17 @@
-import { queryOptions } from '@tanstack/react-query'
-import { apiJSON } from '@/lib/api-client'
-import type { CommunitiesResponse, DohProfilesResponse } from '@/types/api'
+import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { apiJSON, apiMutate } from '@/lib/api-client'
+import type {
+  BgpCommunity,
+  BgpCommunityCreate,
+  BgpCommunityPatch,
+  CommunitiesResponse,
+  DohProfile,
+  DohProfileCreate,
+  DohProfilePatch,
+  DohProfilesResponse,
+} from '@/types/api'
 
 export const directoriesKeys = {
   all: ['directories'] as const,
@@ -23,3 +34,59 @@ export function directoriesDohQueryOptions() {
     staleTime: 30_000,
   })
 }
+
+export function useCreateCommunityMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: BgpCommunityCreate) =>
+      apiMutate<BgpCommunity>('/v1/communities', 'POST', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Сообщество создано')
+      void qc.invalidateQueries({ queryKey: directoriesKeys.communities() })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось создать сообщество'),
+  })
+}
+
+export function useUpdateCommunityMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: BgpCommunityPatch }) =>
+      apiMutate<BgpCommunity>(`/v1/communities/${id}`, 'PATCH', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('Сообщество обновлено')
+      void qc.invalidateQueries({ queryKey: directoriesKeys.communities() })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось обновить сообщество'),
+  })
+}
+
+export function useCreateDohProfileMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: DohProfileCreate) =>
+      apiMutate<DohProfile>('/v1/doh-profiles', 'POST', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('DoH-профиль создан')
+      void qc.invalidateQueries({ queryKey: directoriesKeys.doh() })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось создать DoH-профиль'),
+  })
+}
+
+export function useUpdateDohProfileMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: DohProfilePatch }) =>
+      apiMutate<DohProfile>(`/v1/doh-profiles/${id}`, 'PATCH', body, { idempotent: false }),
+    onSuccess: () => {
+      toast.success('DoH-профиль обновлён')
+      void qc.invalidateQueries({ queryKey: directoriesKeys.doh() })
+    },
+    onError: (e) =>
+      toast.error(e instanceof Error ? e.message : 'Не удалось обновить DoH-профиль'),
+  })
+}

apps/web/src/queries/modules.ts

@@ -1,6 +1,10 @@
-import { queryOptions } from '@tanstack/react-query'
-import { apiJSON } from '@/lib/api-client'
+import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { apiJSON, apiMutate } from '@/lib/api-client'
+import { overviewKeys } from '@/queries/overview'
 import type {
+  ModulePatch,
   ModuleRow,
   ModulesResponse,
   Page,
@@ -16,6 +20,14 @@ export const modulesKeys = {
   ipRangeEntries: (id: string) => [...modulesKeys.all, 'ip-range-entries', id] as const,
 }
 
+function invalidateModules(qc: ReturnType<typeof useQueryClient>, id?: string) {
+  void qc.invalidateQueries({ queryKey: modulesKeys.all })
+  void qc.invalidateQueries({ queryKey: overviewKeys.modules() })
+  if (id) {
+    void qc.invalidateQueries({ queryKey: modulesKeys.detail(id) })
+  }
+}
+
 export function modulesListQueryOptions() {
   return queryOptions<ModulesResponse>({
     queryKey: modulesKeys.list(),
@@ -51,3 +63,16 @@ export function moduleEntriesQueryOptions(id: string, type: ModuleRow['type']) {
     queryFn: () => apiJSON<ModuleEntriesPage>(path),
   })
 }
+
+export function useUpdateModuleMutation() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: ModulePatch }) =>
+      apiMutate<ModuleRow>(`/v1/modules/${id}`, 'PATCH', body, { idempotent: false }),
+    onSuccess: (_data, vars) => {
+      toast.success('Модуль обновлён')
+      invalidateModules(qc, vars.id)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось обновить модуль'),
+  })
+}

apps/web/src/queries/monitoring.ts

@@ -9,7 +9,8 @@ export interface HealthStatus {
 
 export interface ReadyStatus {
   status?: string
-  checks?: Record<string, boolean | { ok?: boolean; error?: string }>
+  /** Backend: string ("ok"|"memory"|"unavailable"), boolean, or { ok, error }. */
+  checks?: Record<string, boolean | string | { ok?: boolean; error?: string }>
 }
 
 export interface VersionInfo {

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

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { SettingsShell } from '@/components/reui-kit/settings-shell'
+
+export const Route = createFileRoute('/_auth/_settings')({
+  component: SettingsShell,
+})

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

@@ -1,11 +1,8 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
 
-import { PageHeader } from '@/components/page-header'
 import { SettingsPageShell } from '@/components/settings/settings-page-shell'
-import {
-  type SettingsTab,
-} from '@/components/settings/settings-tabs-data'
+import { type SettingsTab } from '@/components/settings/settings-tabs-data'
 
 const settingsSearchSchema = z.object({
   tab: z
@@ -14,7 +11,7 @@ const settingsSearchSchema = z.object({
   reason: z.enum(['token-required']).optional(),
 })
 
-export const Route = createFileRoute('/_auth/settings')({
+export const Route = createFileRoute('/_auth/_settings/settings')({
   component: SettingsComponent,
   validateSearch: (search) => settingsSearchSchema.parse(search),
 })
@@ -35,17 +32,10 @@ function SettingsComponent() {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-4xl flex-col gap-6">
-      <PageHeader
-        title="Настройки"
-        description="Параметры интерфейса и подключения браузера к API. Параметры tenant — во вкладке «Разделы»."
-      />
-
-      <SettingsPageShell
-        activeTab={tab}
-        onTabChange={handleTabChange}
-        tokenRequired={tokenRequired}
-      />
-    </div>
+    <SettingsPageShell
+      activeTab={tab}
+      onTabChange={handleTabChange}
+      tokenRequired={tokenRequired}
+    />
   )
 }

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

@@ -12,7 +12,6 @@ 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 { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
 import { LoadingButton } from '@/components/loading-button'
 
@@ -28,7 +27,7 @@ import {
 } from '@/queries/settings'
 import { apiMutate } from '@/lib/api-client'
 
-export const Route = createFileRoute('/_auth/tenant-settings')({
+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'
@@ -74,7 +73,7 @@ const BIRD_HINTS: Partial<Record<BirdSettingKey, string>> = {
 }
 
 function TenantSettingsComponent() {
-  const search = useSearch({ from: '/_auth/tenant-settings' })
+  const search = useSearch({ from: '/_auth/_settings/tenant-settings' })
   const navigate = Route.useNavigate()
   const settingsQ = useQuery(settingsQueryOptions())
   const qc = useQueryClient()
@@ -116,11 +115,6 @@ function TenantSettingsComponent() {
 
   return (
     <div className="flex flex-col gap-6">
-      <PageHeader
-        title="Параметры арендатора"
-        description="Параметры плоскости управления для текущего арендатора (API /v1/settings)"
-      />
-
       <BadgeTabs
         value={search.tab}
         onValueChange={(tab) =>

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

@@ -64,7 +64,7 @@ function AccessComponent() {
         variant: revokedCount > 0 ? 'warning' : 'default',
         footer: (
           <Badge variant={revokedCount > 0 ? 'warning-light' : 'outline'} size="sm">
-            revoked
+            отозваны
           </Badge>
         ),
       },

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

@@ -37,7 +37,9 @@ function parseShowQuickActions(value: unknown): boolean {
 }
 
 /**
- * Dashboard — OpsDashboard kit (KPI → QuickActions → charts → queue).
+ * Dashboard — OpsDashboard kit (KPI → QuickActions → modules → activity/health → queue).
+ * Charts slot is a vertical stack: modules stay full-width; activity shares a row
+ * with BGP widgets only at @5xl (container), never nested 8+4 inside a 2-col parent.
  * @see https://reui.io/preview/base/dashboard-1
  * @see https://reui.io/preview/base/stats-12
  */
@@ -99,33 +101,31 @@ function DashboardComponent() {
       afterKpi={showQuickActions ? <DashboardQuickLinks /> : null}
       charts={
         <>
-          <div className={dashboardMainSidebarClassName}>
-            <div className="xl:col-span-8">
-              <DashboardModulesGrid modules={modules} isLoading={refreshing} />
-            </div>
-            <div className="xl:col-span-4">
-              <DashboardActivityTimeline
-                jobs={jobs}
-                revisions={revisions}
-                peers={peers}
-                speakers={speakers}
-              />
-            </div>
+          <div className="min-w-0">
+            <DashboardModulesGrid modules={modules} isLoading={refreshing} />
           </div>
-          <div className={chartPanelGridClassName}>
-            <DashboardNetworkHealth peers={peers} speakers={speakers} jobs={jobs} />
-            <DashboardOperationsBreakdown jobs={jobs} modules={modules} />
+          <div className={dashboardMainSidebarClassName}>
+            <DashboardActivityTimeline
+              jobs={jobs}
+              revisions={revisions}
+              peers={peers}
+              speakers={speakers}
+            />
+            <div className="grid min-w-0 gap-4">
+              <DashboardNetworkHealth peers={peers} speakers={speakers} jobs={jobs} />
+              <DashboardOperationsBreakdown jobs={jobs} modules={modules} />
+            </div>
           </div>
         </>
       }
-      queueTitle="Недавняя активность"
-      queueDescription="Задачи и ревизии плоскости управления"
+      queueTitle="Задачи и ревизии"
+      queueDescription="Последние фоновые операции и история конфигураций"
       queue={
-        <div className="grid gap-4 lg:grid-cols-2">
+        <div className={chartPanelGridClassName}>
           <DashboardFramePanel
             title="Недавние задачи"
             description="Последние фоновые операции"
-            className="h-full"
+            className="h-full min-w-0"
           >
             {activityLoading ? (
               <Skeleton className="m-4 h-24 w-auto" />
@@ -136,7 +136,7 @@ function DashboardComponent() {
           <DashboardFramePanel
             title="Последние ревизии"
             description="История конфигураций"
-            className="h-full"
+            className="h-full min-w-0"
           >
             {activityLoading ? (
               <Skeleton className="m-4 h-24 w-auto" />

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

@@ -1,23 +1,41 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { BookText, Globe, RefreshCw, Tags } from 'lucide-react'
+import { BookText, Globe, Plus, RefreshCw, Tags } from 'lucide-react'
+import { useState } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { Badge } from '@/components/reui/badge'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
-import { FrameDataGrid, KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
+import {
+  CommunityFormDialog,
+} from '@/components/directories/community-create-dialog'
 import { DirectoriesCommunitiesGrid } from '@/components/directories/directories-communities-grid'
 import { DirectoriesDohGrid } from '@/components/directories/directories-doh-grid'
+import {
+  DohProfileFormDialog,
+} from '@/components/directories/doh-profile-create-dialog'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
+import { Badge } from '@/components/reui/badge'
+import { FrameDataGrid, KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
 import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
+import { sessionCanWriteDirectories } from '@/lib/auth'
+import { authSessionQueryOptions } from '@/queries/auth'
 import { directoriesCommunitiesQueryOptions, directoriesDohQueryOptions } from '@/queries/directories'
+import type { BgpCommunity, DohProfile } from '@/types/api'
 
 export const Route = createFileRoute('/_auth/directories')({
   component: DirectoriesComponent,
 })
 
 function DirectoriesComponent() {
+  const [communityOpen, setCommunityOpen] = useState(false)
+  const [communityEdit, setCommunityEdit] = useState<BgpCommunity | null>(null)
+  const [dohOpen, setDohOpen] = useState(false)
+  const [dohEdit, setDohEdit] = useState<DohProfile | null>(null)
+
+  const sessionQ = useQuery(authSessionQueryOptions())
+  const canWrite = sessionCanWriteDirectories(sessionQ.data)
+
   const communitiesQ = useQuery(directoriesCommunitiesQueryOptions())
   const dohQ = useQuery(directoriesDohQueryOptions())
 
@@ -58,6 +76,40 @@ function DirectoriesComponent() {
     },
   ]
 
+  function openCreateCommunity() {
+    setCommunityEdit(null)
+    setCommunityOpen(true)
+  }
+
+  function openEditCommunity(row: BgpCommunity) {
+    setCommunityEdit(row)
+    setCommunityOpen(true)
+  }
+
+  function openCreateDoh() {
+    setDohEdit(null)
+    setDohOpen(true)
+  }
+
+  function openEditDoh(row: DohProfile) {
+    setDohEdit(row)
+    setDohOpen(true)
+  }
+
+  const addCommunityButton = canWrite ? (
+    <Button size="sm" type="button" onClick={openCreateCommunity}>
+      <Plus />
+      Добавить
+    </Button>
+  ) : null
+
+  const addDohButton = canWrite ? (
+    <Button size="sm" type="button" onClick={openCreateDoh}>
+      <Plus />
+      Добавить
+    </Button>
+  ) : null
+
   return (
     <div className="flex flex-col gap-6">
       <PageHeader
@@ -92,6 +144,7 @@ function DirectoriesComponent() {
           <FrameDataGrid
             title="Сообщества BGP"
             description="Теги для префиксов в фильтрах BIRD"
+            actions={addCommunityButton}
           >
             <QueryState
               data={communities}
@@ -100,13 +153,16 @@ function DirectoriesComponent() {
               error={communitiesQ.error}
               empty={communities.length === 0}
               emptyTitle="Нет сообществ"
+              emptyAction={addCommunityButton}
               skeleton={<TableSkeleton rows={4} cols={3} />}
               onRetry={() => communitiesQ.refetch()}
             >
-              {(items) => (
+              {(rows) => (
                 <DirectoriesCommunitiesGrid
-                  items={items}
+                  items={rows}
                   isLoading={communitiesQ.isFetching && !communitiesQ.isLoading}
+                  canWrite={canWrite}
+                  onEdit={openEditCommunity}
                 />
               )}
             </QueryState>
@@ -114,7 +170,11 @@ function DirectoriesComponent() {
         </TabsContent>
 
         <TabsContent value="doh" className="mt-0">
-          <FrameDataGrid title="DoH профили" description="Резолверы DNS-over-HTTPS для доменных модулей">
+          <FrameDataGrid
+            title="DoH профили"
+            description="Резолверы DNS-over-HTTPS для доменных модулей"
+            actions={addDohButton}
+          >
             <QueryState
               data={dohProfiles}
               isLoading={dohQ.isLoading}
@@ -122,19 +182,43 @@ function DirectoriesComponent() {
               error={dohQ.error}
               empty={dohProfiles.length === 0}
               emptyTitle="Нет DoH профилей"
+              emptyAction={addDohButton}
               skeleton={<TableSkeleton rows={4} cols={3} />}
               onRetry={() => dohQ.refetch()}
             >
-              {(items) => (
+              {(rows) => (
                 <DirectoriesDohGrid
-                  items={items}
+                  items={rows}
                   isLoading={dohQ.isFetching && !dohQ.isLoading}
+                  canWrite={canWrite}
+                  onEdit={openEditDoh}
                 />
               )}
             </QueryState>
           </FrameDataGrid>
         </TabsContent>
       </BadgeTabs>
+
+      {canWrite ? (
+        <>
+          <CommunityFormDialog
+            open={communityOpen}
+            onOpenChange={(open) => {
+              setCommunityOpen(open)
+              if (!open) setCommunityEdit(null)
+            }}
+            editTarget={communityEdit}
+          />
+          <DohProfileFormDialog
+            open={dohOpen}
+            onOpenChange={(open) => {
+              setDohOpen(open)
+              if (!open) setDohEdit(null)
+            }}
+            editTarget={dohEdit}
+          />
+        </>
+      ) : null}
     </div>
   )
 }

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

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