fix(ci): подключить тесты к базе в сети задания

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

.agents/skills/reui/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: reui
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 22 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 `fe6742e29c`.** 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 22 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
+
+The skill is free and this MCP is free to use; it just needs a ReUI account. On first use your agent opens a browser "Sign in with ReUI" prompt (a free account is created if you don't have one). Free covers components and examples with a daily request allowance; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the limit (see [rules/registry.md](./rules/registry.md)). The same account and skill work in every agent and service the MCP connects to - this skill is agent-agnostic.
+
+Skill + MCP are a team: this skill is the workflow (how to find, install, read the API, and adapt by reuse); the MCP is the live data and the hands (search, get_component, install commands). Your job: find the right item, install it with the shadcn CLI, read its real API, and **adapt by reuse** - wire real data and theme it; do not hand-roll or restyle what ReUI already provides. This skill **layers on the shadcn skill**: follow that for generic rules (spacing, `cn()`, semantic colors, forms); follow this for everything ReUI-specific.
+
+## The core loop (MCP-native)
+
+1. **Find** - call the ReUI MCP `search` tool with the user's intent. It returns a ranked, scored list across components/examples/blocks/icons, each with an `install` command, `previewUrl`, `docsUrl`, and `componentsUsed`. Pass hints (`type`, `component`, `category`, `features`, `free`) when you can infer them.
+2. **Install** - run the returned command non-interactively (`npx shadcn@latest add @reui/<name> --yes`). The CLI resolves deps, aliases, and the base/style from `components.json`. See [cli.md](./rules/cli.md).
+3. **Read the API (on your base)** - first note your base from `components.json` -> `style` (`base-nova` -> Base UI, `radix-nova` -> Radix UI). For each component an item uses, call `get_component(name)` and read its **inline `api`** (no web fetch); then `get_examples(name)` to install a worked example and copy its composition - the installed files are already in your base. Whenever you work with a component's API, also **share its `docsUrl`** (the primitive's API documentation page) with the user so they have the full reference. See [components.md](./rules/components.md).
+4. **Adapt (reuse-first)** - swap demo data for real data, fix icon imports, align tokens. Do not redesign. See [adapting.md](./rules/adapting.md).
+
+**Always show the preview.** Every item a tool returns carries a `previewUrl` (a live preview page). Whenever you list, recommend, or present ReUI items to the user - blocks, components, examples, or icons, whether from `search`, `search_icons`, `list_components`, `compose_page`, or any getter - include each item's `previewUrl` so they can SEE it before installing. Blocks and examples open an individual live preview; icons and components link to their live category/component page. Never present an item without its preview link.
+
+If the ReUI MCP is not configured, fall back to `npx shadcn@latest search @reui -q "..."` then `add` - but the MCP gives scored matches + inline APIs; prefer it.
+
+## Commands
+
+Run ReUI as explicit slash commands (via the ReUI MCP) **or** just ask in plain language - both run the same workflow.
+
+| Command     | Invoke                         | Does                                                                                                               |
+| ----------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| **build**   | `/mcp__reui__build <what>`     | Compose a page/section/feature from ReUI: plan → install → read API → adapt → craft → audit.                       |
+| **add**     | `/mcp__reui__add <item>`       | Find & install one component/example/block/icon and wire it in.                                                    |
+| **fix**     | `/mcp__reui__fix [target]`     | Diagnose & fix ReUI usage: wrong/undocumented props, base/radix mismatch, missing states, a11y/scroll.             |
+| **improve** | `/mcp__reui__improve [target]` | Refine + extend existing ReUI UI to a production-exceptional bar (hierarchy, density, states, responsive, motion). |
+
+Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor/Windsurf, `/mcp.reui.build` in VS Code). No command surface? Just describe what you want - this skill drives the identical loop.
+
+## When to reach for ReUI vs plain shadcn
+
+| Need                                                                 | Reach for                                                                 |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| A full page or section (dashboard, billing, auth, pricing, settings) | `compose_page` first (plans sections + best blocks), then ReUI **blocks** |
+| A data table with sorting/filtering/pagination/virtualization        | the **data-grid** component (never hand-roll a `<table>`)                 |
+| A drag-and-drop board                                                | the **kanban** component                                                  |
+| Advanced column filtering, date range, tree, stepper, ...            | the matching ReUI **component**                                           |
+| A single generic control already in shadcn (Button, Dialog, Select)  | plain **shadcn**                                                          |
+
+## Detailed references
+
+- [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 22 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)
+- [rules/styling.md](./rules/styling.md) - ReUI extended tokens, theme adaptation, density
+- [rules/icons.md](./rules/icons.md) - portable icons, swapping imports, Motion Icons (static + animated)
+- [tools.md](./tools.md) - the ReUI MCP: golden path, the 19 tools, token rules, result shapes, errors

.agents/skills/reui/rules/adapting.md

@@ -0,0 +1,43 @@
+# Adapting installed ReUI code (reuse-first, no AI slop)
+
+ReUI items ship production-quality. Your job is to **adapt by reuse** - wire real data and fit the app - not to redesign or hand-roll. The output should look like ReUI built it for this product.
+
+## Preserve the design - don't over-customize
+
+The design IS the product. A ReUI block/component encodes senior-designer decisions: spacing, hierarchy, density, color treatment, and component choices. The fastest way to turn a premium block back into generic AI slop is to "improve" its look - so don't.
+
+- Change **data, copy, and props**; keep the **structure and styling** it ships with. Make the **smallest** change that wires the real data. If your diff touches `className` / JSX structure more than data / props, you are over-customizing - stop and reuse.
+- Don't swap ReUI components for hand-rolled ones, restructure the layout, re-skin spacing / radius / colors, or add decorative chrome. Let the installed components carry the default spacing, radius, sizing, icon rhythm, density, and state styling; add custom Tailwind only when a component genuinely lacks a contract you need.
+- Want a different look? `search` for a block whose design already fits and reuse that - don't restyle this one into a new design.
+
+## Reuse the parts: examples and the block's own elements
+
+- **Examples are building parts.** A free `c-*` example is a correct, single-pattern composition you can reuse. Before composing from scratch, `get_examples(component)`, install the closest one, and reuse its wiring - assemble UI from examples instead of hand-rolling what an example already shows.
+- **Reuse a block's own elements.** Need more rows, cards, items, or sections than ship by default? Repeat the block's **existing** element by mapping real data through the same markup - never invent parallel markup that drifts from its design. Need a variant (empty / loading / expanded)? Derive it from an element the block already has.
+
+## Don't invent (read, don't guess)
+
+- Never write a prop, variant value, import path, or `@reui/...` name you didn't read in a component's inline `api`, an installed example, or a `search` result. If you didn't see it, treat it as nonexistent - call `get_component` / `get_examples` / `search` first, or run the MCP `validate_usage` tool to check planned names + props against the docs before writing code.
+- If a getter returns `found: false` or `search` returns nothing, say so and fall back (plain shadcn, or ask) - never fabricate an install command or an API.
+
+## What to change vs leave alone
+
+- **Change:** the item's own data, copy, props, and layout to fit the app.
+- **Leave alone:** installed component files, hooks, and the shared theme - do not edit vendored ReUI internals; change behavior through props and the documented API.
+- Blocks are **portable React** - no `next/link`, `next/image`, or other framework-runtime imports inside them. Keep them portable.
+
+## Demo data -> real data
+
+- Replace every placeholder with the user's real data. Model it as **typed data structures** and **map over arrays** - never duplicate JSX per row/card. Keep small block-specific formatters next to the data.
+- Wire the real source (columns, fields, fetch). For `data-grid`, implement the server fetch contract if the user needs server-side data.
+- **Type from the component API, derive during render.** Type domain state through the component's own types - e.g. map status to `BadgeProps["variant"]` via a typed `Record<Status, …>` - instead of stringly-typed values. Compute view state during render; don't mirror derived data into `useState`/`useEffect`.
+- **Adapt on the right base.** Use the API for the project's base (Base UI vs Radix - see [components.md](./components.md)); the installed files are already base-correct, so reuse their shape rather than translating from memory.
+
+## Believable content (no AI tells)
+
+- Use realistic labels, counts, timestamps, and statuses that map to a real workflow.
+- No decorative buttons, fake tabs, meaningless toggles, equal-weight card walls, empty gradients, ornamental icons, or generic SaaS filler. Every element should do something.
+
+## Operational surfaces (settings / profile / admin)
+
+Pick ONE archetype and keep the family consistent: a vertical rail (3-6 sections), horizontal tabs (5-8), or a frame/stack. Prefer `frame` for tool-like surfaces, a card for profile-like ones. Don't mix archetypes in one surface.

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

@@ -0,0 +1,60 @@
+# CLI: registry setup, license, non-interactive install
+
+## Registry setup (one-time, per project)
+
+Free items (the 22 components and all `c-*` examples) need only the plain string registry in `components.json`:
+
+```json
+{ "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
+```
+
+Premium items (blocks; Motion Icons and templates) require a ReUI license at install:
+
+1. Add the key to `.env.local`:
+
+```bash
+REUI_LICENSE_KEY=your-license-key
+```
+
+2. Switch `components.json` to the authenticated object form:
+
+```json
+{
+  "registries": {
+    "@reui": {
+      "url": "https://reui.io/r/{style}/{name}.json",
+      "headers": { "Authorization": "Bearer ${REUI_LICENSE_KEY}" }
+    }
+  }
+}
+```
+
+The shadcn CLI expands `${REUI_LICENSE_KEY}` from `.env.local` inside `components.json`, but an MCP client config never expands variables, so a ReUI MCP server config must carry the raw token instead (for example `reui_pat_your_token_here`).
+
+The MCP `get_project_context` tool returns the right config. Full guide: https://reui.io/docs/registry?ref=skill
+
+## Installing
+
+Use the project's package runner (check `packageManager`):
+
+```bash
+npx shadcn@latest add @reui/<name> --yes      # npm
+pnpm dlx shadcn@latest add @reui/<name> --yes  # pnpm
+bunx --bun shadcn@latest add @reui/<name> --yes # bun
+```
+
+`--yes` skips confirmation prompts. The CLI auto-detects the package manager from the lockfile (there is no `--package-manager` flag). It also resolves the correct base+style variant from `components.json`, so do not pass a style.
+
+## Handling prompts and conflicts
+
+- **Always pass `--yes`** so the CLI does not block on confirmation prompts.
+- **Do NOT pass `--overwrite` by default.** If the CLI reports an existing file, read the output and resolve deliberately: install under a different name, adjust the path, or ask the user. Only use `--overwrite` when the user explicitly wants to replace a file.
+- **Preview first when touching an existing project**: `npx shadcn@latest add @reui/<name> --dry-run` shows what would change; `--diff <file>` shows a specific file's diff. Use these before overwriting.
+- Run from the **project root** so `components.json` and `.env.local` are found.
+
+## Free vs premium boundary
+
+- Public, no key: `c-*` examples and the 22 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?ref=skill (their key) or https://reui.io/pricing?ref=skill (upgrade).

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

@@ -0,0 +1,428 @@
+# ReUI components
+
+The 22 ReUI building blocks: `alert`, `autocomplete`, `badge`, `cascader`, `code-block`, `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 v9. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
+
+- 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 = useTable({
+  features: dataGridFeatures,
+  data,
+  columns,
+})
+
+<DataGrid table={table} recordCount={data.length}>
+  <DataGridTable />
+</DataGrid>
+```
+
+Common mistakes:
+
+- **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 primitive's `DataGridColumnMeta` (e.g. `cellClassName`, `headerTitle`), set through the bundle's `columnMeta` slot.
+
+## event-calendar
+
+**Required:** events via `events`/`onEventsChange` (controlled) or `defaultEvents` (uncontrolled), plus a height on the root.
+**Shape:**
+
+```tsx
+<EventCalendar defaultEvents={events} defaultView="month" className="h-[560px]">
+  <EventCalendarNav />
+  <EventCalendarContent />
+</EventCalendar>
+```
+
+**Gotcha:** headless-first: `EventCalendarContent` renders the active view (month/week/day/days/agenda; a resource view activates when `resources` is passed) - there is no per-view JSX to compose. Events are `{ id, title, start, end (exclusive), allDay?, color?, recurrence?, resourceId? }`. Mutations flow through `onEventUpdate`/`canDropEvent` (return `false` to reject); the root needs an explicit height because it is a min-h-0 flex column.
+
+## gantt
+
+**Required:** `resources` (the left tree) plus bars via `events`/`defaultEvents` attached by `resourceId`.
+**Shape:**
+
+```tsx
+<Gantt defaultEvents={bars} resources={tasks} defaultScale="month" className="h-[480px]">
+  <GanttNav />
+  <GanttView />
+</Gantt>
+```
+
+**Gotcha:** bars move along the time axis only (never across rows) and are all-day spans with exclusive `end`; `progress` is 0-100. Scales are `day | week | month | quarter | year`. Zoom control, infinite scroll, summary rollups, and row checkboxes are ON by default - turn off what you do not need. Same `onEventUpdate`/`canDropEvent` commit pipeline as `event-calendar`; the root needs an explicit height.
+
+## kanban
+
+**Required:** `value` (`Record<string, T[]>`), `onValueChange`, `getItemValue`
+**Shape:**
+
+```tsx
+<Kanban value={cols} onValueChange={setCols} getItemValue={(i) => i.id}>
+  <KanbanBoard>
+    {Object.entries(cols).map(([id, items]) => (
+      <KanbanColumn key={id} value={id}>
+        <KanbanColumnHandle><h3>{id}</h3></KanbanColumnHandle>
+        <KanbanColumnContent value={id}>
+          {items.map((i) => (
+            <KanbanItem key={i.id} value={i.id}>
+              <KanbanItemHandle>{i.title}</KanbanItemHandle>
+            </KanbanItem>
+          ))}
+        </KanbanColumnContent>
+      </KanbanColumn>
+    ))}
+  </KanbanBoard>
+  <KanbanOverlay><div className="bg-muted size-full rounded-md" /></KanbanOverlay>
+</Kanban>
+```
+
+**Gotcha:** state is `Record<columnId, T[]>`. Each `KanbanColumnContent value` must match its parent `KanbanColumn value`. Omit `KanbanOverlay` and the drag preview silently breaks.
+
+## sortable
+
+**Required:** `value` (`T[]`), `onValueChange`, `getItemValue`
+**Shape:**
+
+```tsx
+<Sortable value={items} onValueChange={setItems} getItemValue={(i) => i.id}>
+  {items.map((i) => (
+    <SortableItem key={i.id} value={i.id}>
+      <SortableItemHandle><GripVertical /></SortableItemHandle>
+      {i.label}
+    </SortableItem>
+  ))}
+</Sortable>
+```
+
+**Gotcha:** a flat 1D reorder list (not columns - that is `kanban`). `getItemValue` must return a stable, unique string. Pass `layout="grid"` or `layout="nested"` for non-list layouts.
+
+## filters
+
+**Required:** `fields` (`FilterField[]`). The value is ONE `FilterQuery` tree - `query` + `onQueryChange`, or uncontrolled `defaultQuery`.
+**Shape:**
+
+```tsx
+const fields: FilterField[] = [
+  { id: "title", label: "Title", type: "text" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "archived", label: "Archived" },
+    ],
+  },
+]
+const [query, setQuery] = useState<FilterQuery>(() => createFilterQuery())
+
+<Filters fields={fields} query={query} onQueryChange={setQuery} />
+```
+
+**Gotcha:** the state is a TREE, not a list of chips. `FilterQuery` is a group of rules joined by `and`/`or` and a group may hold another group, so `(A and B) or C` is expressible; a rule is `{ id, type: "rule", path: ["status"], operator, value }` and `path` is the whole nested attribute path, root first. The pre-rewrite API is GONE: there is no `filters`/`onChange` prop, no `FilterFieldConfig` (fields are `FilterField`, nested through their own `fields`, keyed `id` not `key`), and no `createFilter()` - it minted ids inside a pure function and broke hydration, so ids now come from `createFilterIdFactory(seed)` seeded off `useId`, and `createFilterQuery()` / `createFilterRule()` take one. Read the query back with `flattenFilterConditions` (`{ path, field, operator, values, negated }` per rule, incomplete rules skipped) and walk the tree yourself when the parentheses carry meaning - the primitive compiles nothing, no SQL, no query string.
+
+`variant` picks the chrome over that one query: `"basic"`, the default, is the flat chip row for a toolbar over a table; `"advanced"` is the condition builder, hung off a trigger or rendered in place with `advancedMode="inline"`. Both read and write the same tree, so a saved view built in one opens in the other. Other props worth knowing before you hand-roll them: `size` is two rungs, `"sm" | "default"`, resolved per style (there is no `lg`); `reorderable` turns on drag and Alt+Arrow row moves in the builder; `onBeforeQueryChange` is the ONE veto point for every write (return `false` to refuse, it cannot rewrite); `editors` registers custom value editors a field selects by `editor` name; `labels` / `operatorLabels` own every rendered string; `pathCollapse` + `maxPathSegments` shorten deep attribute paths; `renderChip` / `renderValue` / `renderEmpty` replace rendered parts. On a field, `loadOptions` supplies async options with paging and `resolveValues` renders a chip restored from a saved view whose option was never loaded. Pairs naturally with `data-grid`.
+
+## cascader
+
+**Required:** `items` (a tree of `{ value, label, children? }`), plus the panel parts inside `CascaderContent`.
+**Shape:**
+
+```tsx
+<Cascader items={items} value={value} onValueChange={setValue}>
+  <CascaderTrigger render={<Button variant="outline" />}>
+    <CascaderValue placeholder="Select an attribute" />
+  </CascaderTrigger>
+  <CascaderContent className="w-80">
+    <CascaderPanel>
+      <CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderInput />
+      </CascaderNav>
+      <CascaderEmpty />
+      <CascaderList maxHeight={288}>
+        <CascaderItems />
+      </CascaderList>
+      <CascaderStatus />
+    </CascaderPanel>
+  </CascaderContent>
+</Cascader>
+```
+
+**Gotcha:** pressing a branch NAVIGATES, it does not select - only leaves are selectable until you pass `selectable="any"` or a predicate, and once a branch is selectable its chevron becomes the only way to open it. `CascaderInput` must stay inside `CascaderContent` (Base UI refills the query from the selection when the input sits outside the popup). Always include `CascaderStatus`: it is the live region announcing level changes, which the visual breadcrumb does not provide to screen readers. Accepts a flat adjacency list via `getParent` as well as nested `children`. `searchScope="deep"` searches every level and annotates results with their path; `multiple` gives checkbox rows; `inline` + a bare `CascaderPanel` embeds it with no popover.
+
+The shape above is `mode="drill"`, the default. `mode="tree"` keeps the same parts (drop `CascaderBreadcrumb`, pass `showBack={false}`, drive expansion with `expanded`/`onExpandedChange`); `mode="columns"` REPLACES `CascaderList` + `CascaderItems` with a single `CascaderColumns`, and has no breadcrumb. Other props worth knowing before you hand-roll them: `cascade` (multi-select only, parent/child selection with indeterminate branches - pair it with `selectable="any"`, since a leaf-only tree can never cascade), `indicator={false}` to drop the single-select check and its gutter (visual only, no-op with `multiple`), `virtualize`/`virtualizeThreshold` plus `CascaderVirtualItems` for long levels, and `getChildren` for async levels with cursor paging, retry on failure and optional `prefetch`. `CascaderFooter` pins commands below the list (`actions` is the quick path) and `CascaderSubmenu` opens one as a side-anchored flyout with the full menu keyboard model. To head a run of rows use `CascaderGroup` wrapping a `CascaderLabel` - a bare label inside a listbox names nothing and is dropped from the accessibility tree - and `CascaderSeparator` for the rule between runs. Every rendered string comes from `labels`, and the panel is RTL-correct under a `DirectionProvider` or `dir="rtl"`.
+
+## date-selector
+
+**Required:** none, but wire `onChange` to capture the value.
+**Shape:**
+
+```tsx
+const [value, setValue] = useState<DateSelectorValue | undefined>()
+
+<DateSelector value={value} onChange={setValue} label="Due date" />
+```
+
+**Gotcha:** the value is a structured `DateSelectorValue` (period / operator / start+end dates), NOT a `Date` - never pass a raw `Date`. Use `allowRange={false}` to lock single-date picking. Read `get_component("date-selector")` for the value shape.
+
+## tree
+
+**Required:** `tree` (a `@headless-tree/core` instance you construct)
+**Shape:**
+
+```tsx
+<Tree tree={tree}>
+  {tree.getItems().map((item) => (
+    <TreeItem key={item.getId()} item={item}>
+      <TreeItemLabel />
+    </TreeItem>
+  ))}
+</Tree>
+```
+
+**Gotcha:** `Tree` is a styled shell - it takes a headless-tree instance via `tree`, NOT `data`/`items` props. Build the instance with `@headless-tree/react`. External API: https://headless-tree.lukasbach.com/
+
+## stepper
+
+**Required:** `StepperItem step` (number), `StepperContent value` (number)
+**Shape:**
+
+```tsx
+<Stepper defaultValue={1}>
+  <StepperNav>
+    <StepperItem step={1}>
+      <StepperTrigger><StepperIndicator>1</StepperIndicator></StepperTrigger>
+      <StepperSeparator />
+    </StepperItem>
+    <StepperItem step={2}>
+      <StepperTrigger><StepperIndicator>2</StepperIndicator></StepperTrigger>
+    </StepperItem>
+  </StepperNav>
+  <StepperPanel>
+    <StepperContent value={1}>Step 1 content</StepperContent>
+    <StepperContent value={2}>Step 2 content</StepperContent>
+  </StepperPanel>
+</Stepper>
+```
+
+**Gotcha:** steps are 1-indexed. Without `StepperPanel` + `StepperContent` you render the nav trail but no body. Put `StepperSeparator` in every `StepperItem` except the last.
+
+## timeline
+
+**Required:** `TimelineItem step` (number)
+**Shape:**
+
+```tsx
+<Timeline>
+  <TimelineItem step={1}>
+    <TimelineHeader>
+      <TimelineDate>March 2024</TimelineDate>
+      <TimelineTitle>Project initialized</TimelineTitle>
+    </TimelineHeader>
+    <TimelineIndicator />
+    <TimelineSeparator />
+    <TimelineContent>Repo and architecture set up.</TimelineContent>
+  </TimelineItem>
+</Timeline>
+```
+
+**Gotcha:** each item needs a unique `step`. `orientation` is `"vertical"` (default) or `"horizontal"`. This is a static event display, not interactive like `stepper`.
+
+## autocomplete
+
+**Required:** `items` (array; each item has at least `value`)
+**Shape:**
+
+```tsx
+<Autocomplete items={items}>
+  <AutocompleteInput placeholder="Search..." />
+  <AutocompleteContent>
+    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
+    <AutocompleteList>
+      {(item) => (
+        <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>
+      )}
+    </AutocompleteList>
+  </AutocompleteContent>
+</Autocomplete>
+```
+
+**Gotcha:** `AutocompleteList` takes a render-prop `(item) => ReactNode`, NOT a mapped array of children. External API: https://base-ui.com/react/components/autocomplete
+
+## phone-input
+
+**Required:** none, but wire `onChange`.
+**Shape:**
+
+```tsx
+<PhoneInput placeholder="Enter phone number" defaultCountry="US" value={value} onChange={setValue} />
+```
+
+**Gotcha:** `value`/`onChange` use an E.164 string (e.g. `"+14155551234"`), not a display-formatted string; `onChange` can fire `undefined`. `defaultCountry` is a 2-letter ISO code. Wraps `react-phone-number-input`.
+
+## number-field
+
+**Required:** wrap the controls in `NumberFieldGroup`.
+**Shape:**
+
+```tsx
+<NumberField defaultValue={0}>
+  <NumberFieldScrubArea label="Quantity" />
+  <NumberFieldGroup>
+    <NumberFieldDecrement />
+    <NumberFieldInput />
+    <NumberFieldIncrement />
+  </NumberFieldGroup>
+</NumberField>
+```
+
+**Gotcha:** import from `@/components/ui/number-field`. The accessible label goes on `NumberFieldScrubArea`, not `NumberField`. External API: https://base-ui.com/react/components/number-field
+
+## rating
+
+**Required:** `rating` (number)
+**Shape:**
+
+```tsx
+<Rating rating={4.5} showValue editable onRatingChange={setRating} />
+```
+
+**Gotcha:** supports decimals (partial stars). Pass `editable` + `onRatingChange` for interactive input; omit both for a read-only display.
+
+## scrollspy
+
+**Required:** `targetRef` (the scroll container ref)
+**Shape:**
+
+```tsx
+<Scrollspy targetRef={containerRef}>
+  <a href="#s1" data-scrollspy-anchor="s1">Section 1</a>
+  <a href="#s2" data-scrollspy-anchor="s2">Section 2</a>
+</Scrollspy>
+<div ref={containerRef}>
+  <div id="s1">...</div>
+  <div id="s2">...</div>
+</div>
+```
+
+**Gotcha:** each link's `data-scrollspy-anchor` must match a section `id`. `targetRef` is the scrollable container (defaults to the window).
+
+## frame
+
+**Required:** `Frame` > `FramePanel`
+**Shape:**
+
+```tsx
+<Frame>
+  <FramePanel>
+    <FrameHeader>
+      <FrameTitle>Title</FrameTitle>
+      <FrameDescription>Description</FrameDescription>
+    </FrameHeader>
+    <div className="p-5">Content</div>
+    <FrameFooter>Footer</FrameFooter>
+  </FramePanel>
+</Frame>
+```
+
+**Gotcha:** a structured card shell for tool-like surfaces. `stacked` connects multiple panels with shared borders; `dense` removes panel padding; radius via the `--frame-radius` CSS variable.
+
+## icon-stack
+
+**Required:** one child icon
+**Shape:**
+
+```tsx
+<IconStack aria-hidden="true">
+  <InboxIcon className="size-4" />
+</IconStack>
+```
+
+**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.
+
+## code-block
+
+**Required:** `code` + `language`, or pre-highlighted `lines`.
+**Shape:**
+
+```tsx
+<CodeBlock code={code} language="tsx" />
+
+<CodeBlock code={code} language="tsx" showLineNumbers maxLines={20}>
+  <CodeBlockHeader>
+    <CodeBlockTitle>use-totals.ts</CodeBlockTitle>
+    <CodeBlockLanguage />
+    <CodeBlockCopyButton className="ml-auto" />
+  </CodeBlockHeader>
+  <CodeBlockExpandButton />
+</CodeBlock>
+```
+
+**Gotcha:** the one-liner is already a complete block; every child (header, title, language label, copy button, wrap toggle, expand button, line actions) is optional chrome, at any depth. Shiki is the only npm dependency and loads lazily, one chunk per language, on first highlight; `lines` (from `highlightCode` in `code-block-highlight`, which is server-safe and has no `"use client"`) or `highlight={false}` loads nothing at all. `maxLines` caps the height AND marks the block collapsible, which is what makes `CodeBlockExpandButton` appear. Use `variant="ghost"` when the block sits inside a surface that already has a border.
+
+## alert
+
+**Required:** `Alert` > `AlertTitle`
+**Shape:**
+
+```tsx
+<Alert variant="success">
+  <ShieldCheckIcon />
+  <AlertTitle>Security update</AlertTitle>
+  <AlertDescription>Enable two-factor authentication.</AlertDescription>
+  <AlertAction><Button size="xs">Update</Button></AlertAction>
+</Alert>
+```
+
+**Gotcha:** shadcn-compatible API. `variant`: `default | destructive | info | success | warning | invert`. The non-default variants use ReUI extended color tokens (`--success`/`--info`/`--warning`/`--invert`), which the install adds. Defer generic alert rules to the shadcn skill.
+
+## badge
+
+**Required:** none (text child).
+**Shape:**
+
+```tsx
+<Badge variant="success-light" size="sm">Success</Badge>
+<Badge variant="outline" radius="full">Pill</Badge>
+```
+
+**Gotcha:** shadcn-compatible. Rich `variant` set (solid, `-outline`, `-light` per color), `size` `xs..xl`, `radius` `default | full`. Like `alert`, the color variants rely on ReUI extended tokens. Prefer `Badge` variants over raw color classes for statuses.
+
+## base vs radix - write for the project's base
+
+ReUI ships every component in two builds: `base` (Base UI) and `radix` (Radix UI). The install command and name are identical, and the CLI installs the build matching the project. But you must write/adapt code against the **right base**, because their APIs differ.
+
+**Detect the base first.** Read `components.json` -> `style` and take the segment before the first `-`:
+
+- `"style": "base-nova"` -> **Base UI**
+- `"style": "radix-nova"` -> **Radix UI**
+
+**Then use that base's API.** The deltas mirror shadcn's base-vs-radix split:
+
+- Slot/composition: Base UI `render={<… />}` vs Radix `asChild`.
+- `Select`: Base UI takes `items`; Radix uses `<SelectItem>` children.
+- `ToggleGroup`: Base UI `multiple` boolean vs Radix `type="single" | "multiple"`.
+
+The safest path is to **read the installed files and `c-*` examples** - they're already in your base, so reuse their wiring instead of guessing. When `get_component`'s inline `api` or an example shows the other base's shape, translate it to your base (or `validate_usage` to confirm). Defer the generic base/radix mechanics to the shadcn skill.

.agents/skills/reui/rules/craft.md

@@ -0,0 +1,45 @@
+# Craft: make ReUI UI exceptional, not generic
+
+ReUI items ship senior-designer quality. Your adaptation has to hold that bar, so the result reads like a real product surface a team would keep - not a wireframe an AI generated. Use these alongside the reuse rules in [adapting.md](./adapting.md).
+
+## Have a point of view
+
+Pick an emotional register before you compose - calm, operational, premium, editorial, dense, energetic - and let layout, spacing, surface treatment, and icon behavior all reinforce it. One or two memorable decisions and restraint everywhere else beats ten generic ones. UI with no point of view reads as generated.
+
+## Brutally clear hierarchy
+
+One focal point per card or panel: the dominant metric or task first, its label second, supporting detail third. The first thing the eye lands on should be the right thing; secondary text must read as secondary. Borders, separators, and surfaces do real work to create 2-3 information bands - don't flatten everything to equal weight.
+
+## Spacing rhythm and deliberate density
+
+Gaps are a signal, not a default. Keep them intentional and consistent within a family (`gap-1`/`gap-2` for tight operational rows, larger gaps for section breaks), and smaller within a group than between groups. Match the surrounding ReUI density; don't pad an operational surface like a marketing page, and don't drift density mid-section. The composition should still feel authored in grayscale.
+
+## Cover the real states (the usual miss)
+
+A surface isn't done at the happy path. Compose, and wire:
+
+- **Empty** - a purposeful empty state (short message + the primary action), never a blank panel.
+- **Loading** - a **skeleton** that matches the real layout, not a centered spinner.
+- **Error** - an inline, recoverable error with a retry, announced via `role="status"`/`aria-live`.
+
+Derive these from an element the block already has (don't invent parallel markup), or `get_examples` for a state-specific example.
+
+## Responsive by default
+
+Mobile-first, not mobile-afterthought. In constrained rows/cards/sidebars, put `min-w-0` on the shrinking container and `truncate` long single-line labels; protect the primary label's width and let secondary content compress. Reflow layouts (multi-column -> single column) rather than just shrinking them. Desktop and mobile should both look designed.
+
+## Motion, subtly
+
+Motion should clarify, not decorate. Use ReUI Motion Icons on primary actions for a subtle hover cue; keep transitions short (~200-300ms) with calm easing; prefer a skeleton pulse over a spinner. No bouncing, no gratuitous entrance animations on every element.
+
+## Real, activated content
+
+Use believable, typed data (realistic labels, counts, timestamps, statuses that map to a real workflow) - never lorem or abstract filler. Every visible control does something: no decorative buttons, fake tabs, meaningless toggles, or stats with no job. It must still hold with long names, empty values, and crowded data.
+
+## Avoid the AI tells
+
+These instantly read as generated - don't ship them: equal-weight card walls, empty gradients, repetitive padding everywhere, generic enterprise copy, ornamental icons, and number tiles that don't earn their place.
+
+## The bar
+
+Before you finish, ask: **would a product team keep this instead of replacing it? Does it still feel strong after swapping in real content?** If not, reuse the shipped ReUI design harder - don't restyle it into something new - then run the [quality.md](./quality.md) gates.

.agents/skills/reui/rules/icons.md

@@ -0,0 +1,39 @@
+# Icons (ReUI delta over shadcn)
+
+Follow the shadcn icon rules (use the project's configured `iconLibrary`, `data-icon` on icons inside `Button`, no sizing classes on icons inside components, pass icons as component objects not string keys). ReUI adds the following.
+
+## Portable icons (library-agnostic)
+
+ReUI components, examples, and blocks are authored to be icon-library-agnostic. When `iconLibrary` is set in `components.json`, the shadcn CLI installs each item's icons in **your** library automatically - you swap nothing. If an installed item's icons don't match your project (for example `iconLibrary` isn't set, so they came in from the item's demo library), change the **import source and component name** to your library, keeping the same icon-name semantics:
+
+- `lucide` -> `lucide-react`
+- `tabler` -> `@tabler/icons-react`
+- `phosphor` -> `@phosphor-icons/react`
+- `remix` -> `@remixicon/react`
+- `hugeicons` -> `@hugeicons/react`
+
+Don't assume `lucide-react`; read `iconLibrary` from `components.json`.
+
+## Keep icons purposeful
+
+Icons support the hierarchy, they don't replace it: keep them small, matched to the surrounding density, and decorative ones `aria-hidden="true"` (an icon-only control still needs an accessible label on the control). Don't add ornamental icons that do no job.
+
+## Motion Icons (the `@reui/icons/...` set)
+
+ReUI ships its own icon set in 4 styles (outline, solid, duotone, filled), each icon in two variants:
+
+```bash
+npx shadcn@latest add @reui/icons/default/<style>/<name> --yes    # static
+npx shadcn@latest add @reui/icons/animated/<style>/<name> --yes   # hover-animated (motion/react)
+```
+
+Finding them via the MCP is free; installing requires an Ultimate license (`REUI_LICENSE_KEY`, see [cli.md](./cli.md)). Reach for a Motion Icon on a primary action when a subtle hover cue helps; keep motion restrained.
+
+Finding icons:
+
+- Several icons (the common case): **`search_icons(concepts[])`** - up to 24 concepts in one call, the best icons per concept with install commands. Pass `animated: true` to get only icons with a hover-animated Motion variant.
+- One icon: `search` with `type: "icon"`.
+- Icon results and `get_icon` carry `animated: true` and `installAnimated` when an animated variant exists - use those install strings, do not construct paths by hand.
+- Every icon result carries a `previewUrl` (its live icon-category page) - **share it with the user** so they can SEE the icon before installing.
+
+The `icon-stack` component composes multiple icons into a stacked display.

.agents/skills/reui/rules/quality.md

@@ -0,0 +1,22 @@
+# Quality gates (security, accessibility, scroll)
+
+These are the **done gate**, not a nice-to-have: before you call any ReUI work finished, call the MCP `get_audit_checklist` tool and pass every item below (plus the craft bar in [craft.md](./craft.md)). Then typecheck and lint.
+
+## Security
+
+- Never `dangerouslySetInnerHTML`. Render data as text/components.
+- External links (`target="_blank"`) must always pair `rel="noopener noreferrer"`.
+- No real PII, secrets, or tokens in demo or committed code. Remote media only from sources the project already allows.
+
+## Accessibility
+
+- Implicit list/card items that navigate get real anchors with a standard hover affordance.
+- Icon-only or numeric buttons need an `aria-label`; decorative icons get `aria-hidden`.
+- Every non-submit button is `type="button"`.
+- Keyboard + focus: everything interactive is reachable in a sensible Tab order with a visible focus ring; layers (dialogs/sheets/menus) trap focus and close on `Escape`. ReUI components ship standard keyboard behavior - read each component's inline `api` rather than re-implementing it.
+- Announce async UI: loading and error messages use `role="status"` / `aria-live` so they're not silent to screen readers.
+
+## Scroll mechanics
+
+- Make scroll regions with a parent-owned height: a `min-h-0` + flex chain down to the scroll container. Never guess a `max-h`.
+- The scroll container owns `overflow-auto`; ancestors stay `min-h-0` so the height resolves.

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

@@ -0,0 +1,35 @@
+# ReUI registry structure
+
+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 22 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).
+
+## The @reui registry
+
+Install everything through the shadcn CLI: `npx shadcn@latest add @reui/<name> --yes`. The CLI reads the `@reui` registry from the project's `components.json`. Free items need only the plain string form:
+
+```json
+{ "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
+```
+
+Premium installs need the authenticated form + `REUI_LICENSE_KEY` in `.env.local` - see [cli.md](./cli.md). The MCP `get_project_context` tool returns the right config.
+
+## Know your base: base or radix
+
+ReUI ships every item in two builds - `base` (Base UI) and `radix` (Radix UI) - with mirrored names. The CLI installs the build matching your project automatically, but **you must write code against the right base's API**. Detect it from `components.json` -> `style`: the segment before the first `-` is the base (`base-nova` -> Base UI, `radix-nova` -> Radix UI). The installed files and `c-*` examples are already in your base - read them and adapt on that base. See [components.md](./components.md) for the API deltas.
+
+**So the MCP's own `docsUrl` and `previewUrl` match your base**, send your `style` to the MCP: add `?style=<your components.json style>` to the ReUI MCP server URL (or set an `X-Reui-Style` header) in your MCP client config - set once, applies to every call. The MCP then resolves docs/preview links to YOUR library (`/docs/components/radix/...`, `/preview/radix/...` for a radix project) instead of the default base; `get_project_context` echoes back the style it currently sees so you can confirm it. Install commands are unaffected (the CLI already installs the right variant). If you notice the MCP returning `base` links for a `radix` project, tell the user to add `?style=` to the server URL.
+
+Blocks adapt to your active theme through semantic tokens and CSS variables - change the theme and every block follows.
+
+## Free vs premium
+
+- **Free, no key:** the 22 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
+
+The canonical index of every component's API docs is **https://reui.io/llms.txt** (returned as `componentsApiUrl` in MCP results). Prefer the inline `api` from `get_component`; use the index/docs as the fallback.

.agents/skills/reui/rules/styling.md

@@ -0,0 +1,26 @@
+# Styling (ReUI delta over shadcn)
+
+Follow the shadcn skill for the generic rules (semantic colors not raw values, `gap-*` not `space-y-*`, `size-*`, `cn()`, no manual `dark:` overrides, no overlay `z-index`). This file is only the ReUI-specific additions.
+
+## ReUI extended semantic tokens
+
+ReUI adds semantic tokens beyond shadcn's base set. Use these instead of raw colors for status and emphasis:
+
+- `--success` / `--success-foreground`
+- `--info` / `--info-foreground`
+- `--warning` / `--warning-foreground`
+- `--destructive-foreground` (paired with shadcn's `--destructive`)
+- `--invert` / `--invert-foreground` (inverted surfaces)
+
+Use them as Tailwind utilities (`bg-success text-success-foreground`, `text-warning`, ...). They are defined in the project's global CSS and registered with Tailwind (`@theme inline` on v4). If a token is missing in the project, add it to the global CSS file (never a new file) following the same `name` / `name-foreground` convention, exactly as the shadcn customization rules describe.
+
+**Incorrect:** `<span className="text-green-600">Active</span>`
+**Correct:** `<Badge variant="success">Active</Badge>` or `<span className="text-success">Active</span>`
+
+## Blocks follow your theme
+
+When you install a block it adapts to your active theme through the semantic tokens above and the project's CSS variables. Don't hardcode style-specific values into installed block code and don't fork it to "restyle" - change the theme via the CSS variables / a preset and every block follows. Want a different look? `search` for a block whose design already fits instead of re-skinning one.
+
+## Density and typography rhythm
+
+ReUI operational UI usually feels dense, not airy. Keep the gap between a title and its supporting description tight by default (`gap-0.5`, `space-y-1`, or `space-y-px`), and smaller than the gap between sections. Match the surrounding ReUI density when you add rows or fields; do not pad operational surfaces like a marketing page.

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

@@ -0,0 +1,54 @@
+# Workflow: find -> install -> read API -> adapt
+
+The core ReUI loop. The MCP tells you what to install and gives you the API; the shadcn CLI installs it; you turn the installed files into correct, themed, data-wired code by **reuse**, not redesign.
+
+## 1. Find (ReUI MCP `search` / `compose_page`)
+
+**Full multi-section page ask?** Call `compose_page(intent, sections?)` FIRST, before searching block-by-block. It returns ordered sections, each with the best block for the intent (top pick + alternates); sections listed in `unavailableSections` have no real inventory - compose those from components, do not force a bad block.
+
+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 22 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`.
+
+Example: "build a users management page with filters" -> `search({ query: "users management page with filters", type: "block", component: "data-grid", features: ["filters"] })`.
+
+Each result has `install`, `previewUrl`, `docsUrl`, `componentsUsed`, `score`, `termCoverage`, and `whyMatch`. `score` is relative to the top hit (the top is ~100 by construction), not an absolute quality - compare results to each other, and show the user the top options if several score closely; do not silently guess. A low `termCoverage` means a weak match even with a high score - rephrase or widen.
+
+**Always show the preview link.** Whenever you list or recommend items - from `search`, `search_icons`, `list_components`, `compose_page`, or a getter - include each item's `previewUrl` (a live preview page) so the user can SEE it before you install. Blocks and examples link to an individual live preview; icons and components to their live category/component page. This applies to every listing, not only a single pick.
+
+## 2. Install (shadcn CLI)
+
+Run the result's `install` command from the project root, non-interactively:
+
+```bash
+npx shadcn@latest add @reui/<name> --yes
+```
+
+The CLI reads `components.json`, installs the correct base+style variant, resolves `registryDependencies` (a block pulls in its components), installs npm deps, and rewrites aliases. Do not pass the base/style. See [cli.md](./cli.md).
+
+## 3. Read the API (do not guess props)
+
+Before writing code against any component an item uses:
+
+1. The item's `componentDigests` already give a 1-line contract per component - often enough to wire it. For the full API, call **`get_component(names)`** with ALL of `componentsUsed` in ONE call (it accepts an array) and read each inline `api` - no web fetch. **Share the component's `docsUrl`** (its 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.
+2. Call **`get_examples(name)`** for the free `c-*` examples of that component; install one and **read the added files** to copy the exact composition. This is the fastest correct path - the example shows real wiring you adapt, not invent.
+3. About to write a prop you did not see in an `api` or installed file? Run **`validate_usage`** BEFORE writing the code - per-prop documented / notDocumented verdicts plus did-you-mean suggestions. notDocumented means read the API, not push on.
+
+## 4. Adapt (reuse-first) - do not skip
+
+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 `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)).
+5. **Validate before finalizing**: if your adaptation introduced components or props you did not read in an `api` or example, run `validate_usage` on them.
+6. **Hit the craft bar** - clear hierarchy, deliberate density, the empty / loading / error states, subtle motion, and mobile-first responsiveness (see [craft.md](./craft.md)). Generic-looking output means you under-reused the design, not that it needs restyling.
+7. **Pass the quality gates** (security, a11y, scroll) - call the MCP `get_audit_checklist` tool and clear every item (see [quality.md](./quality.md)).
+8. **Typecheck / lint**.
+
+## If no single block fits
+
+Compose from components (`compose_page` tells you which sections have no block inventory via `unavailableSections`). `search` the components you need, read each `get_component` API, install a worked `get_examples` example for each, and assemble by adapting those examples. A block in the same category is a useful reference - install it and read its files to see how ReUI composes those components, then adapt.

.agents/skills/reui/tools.md

@@ -0,0 +1,58 @@
+# ReUI MCP: full reference
+
+The ReUI MCP (`https://mcp.reui.io`, Streamable HTTP) is free to use but needs a ReUI account: on first use the agent signs in with ReUI (a free account is created if the user has none), so every request is tied to an account. Free covers components and examples; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the daily request limit. It does **discovery + guidance** (search, inline APIs, page planning, validation) and never serves source; the shadcn CLI does **installation**, and the license key lives there (the `@reui` entry in `components.json`, backed by `.env.local`). Goal: from the user's intent to correct, themed, data-wired ReUI code in the **fewest tokens and calls**, with **no guessing**.
+
+## Golden path (token-optimal - follow this order)
+
+Most tasks need 2-4 MCP calls and ZERO web fetches:
+
+1. **`search(query, ...hints)`** -> pick the top 1-3 results. Each result already carries `install`, `previewUrl`, `docsUrl`, `componentsUsed`, `score`, `whyMatch`. The payload is complete - do not call another tool just to "confirm" a result.
+2. **`get_component([...componentsUsed])`** in ONE batched call (one name or an array of up to 20) -> read each inline `api`. This **replaces** fetching docs pages. Often skippable: search responses carry `componentDigests`, a compact API contract per referenced component.
+3. **`get_examples(component)`** -> install ONE returned `c-*` example, read the added files, copy the composition.
+4. **`get_install_command(item)`** only to validate a name you are unsure of (results already include `install`). Run the install with the shadcn CLI (`--yes`).
+5. **`get_audit_checklist()`** before declaring done.
+
+If you already know the exact item name, skip `search`. Everything else is situational.
+
+## The 5 task-specific tools (when to reach for each)
+
+- **`compose_page`** - BEFORE building any full page (dashboard, settings, billing, landing). Pass the intent (and optionally the sections you want); it returns ordered sections, each with the best premium block for the intent (top pick + alternates). Sections with no real inventory are listed honestly in `unavailableSections` - compose those from components instead of forcing a bad block.
+- **`search_icons`** - whenever you need icons, especially several. Batch up to 24 concepts in one call; each concept returns its best icons with install commands. Pass `animated: true` to get only icons that have a hover-animated Motion variant.
+- **`validate_usage`** - BEFORE writing code with component names or props you have not read in an inline `api` or an installed example. It checks planned names + props against the indexed API docs and registry item names; returns did-you-mean suggestions and per-prop documented / notDocumented verdicts. Deterministic, no inference - a notDocumented prop means stop and read the API, not push on.
+- **`whats_new`** - when your registry knowledge might be stale (a name 404s, the user mentions an item you don't know). Returns items added/removed per build, newest first.
+- **`report_issue`** - when an installed item is actually broken (bad source, wrong dependency, broken preview). Goes straight to the ReUI team; rate-limited 5/hour. Not for usage questions.
+
+## All 19 tools
+
+`search`, `get_block`, `get_example`, `get_icon`, `list_block_groups`, `list_block_categories`, `list_example_categories`, `list_icon_categories`, `list_components`, `get_component`, `get_examples`, `search_icons`, `compose_page`, `validate_usage`, `whats_new`, `report_issue`, `get_install_command`, `get_project_context`, `get_audit_checklist`. The MCP serves the full parameter schemas; do not guess parameters beyond them.
+
+## Token + speed rules
+
+- **Batch `get_component`** - ONE call with the whole `componentsUsed` array, never N calls. Skip it entirely when `componentDigests` already answers the question.
+- **Read source by installing** - the MCP serves no source. To read or analyze an item's real code, install it with the shadcn CLI and open the local files. Learn an API from the inline `api` / `componentDigests`, never by reading raw source.
+- **Infer `search` hints yourself** (`type`, `component`, `category`, `features`, `free`) - hints shrink the result set and the tokens. Keep `limit` low; one right result beats ten.
+- Run independent calls (and the shadcn install) concurrently in one turn - serial tool calls are the main source of slowness.
+- Don't repeat a search for the same intent; don't call `list_*` to "see everything" - `search` is the entry point, `list_*` is only for browsing a taxonomy the user explicitly wants to explore.
+- Prefer `get_component`'s inline `api` over `docsUrl` / `/llms.txt`. Fetch a web page only as a last resort.
+
+## Result shapes (so you don't re-fetch)
+
+- `score` is 0-100 RELATIVE to the top hit (the top is ~100 by construction), not absolute - compare results to each other.
+- `termCoverage` (0-1) is the share of the query the item matched - low means a weak match even if the score looks high; rephrase or widen the search.
+- Each result carries `whyMatch`, `install`, docs/preview URLs, and a `free` flag; premium items carry `requiredPlan` (`"pro"` for blocks, `"ultimate"` for icons).
+- `componentDigests` is a top-level map: a compact API contract per referenced component - often enough to wire an item without a `get_component` call.
+- Icon results and `get_icon` include `animated: true` and `installAnimated` when a hover-animated Motion variant exists (animated: `@reui/icons/animated/<style>/<name>`; static: `@reui/icons/default/<style>/<name>`).
+
+## Error playbook
+
+- **401** - the MCP requires a signed-in ReUI account. The client prompts "Sign in with ReUI" (OAuth) on first use; a free account is created if needed. For headless/CI, pass a personal token (`reui_pat_...`, created at https://reui.io/account/mcp?ref=skill) as `Authorization: Bearer`.
+- **403 / locked result** - a valid account but the plan does not cover the item: premium blocks need Pro, Motion Icons need Ultimate. Point to https://reui.io/pricing?ref=skill (upgrade). Free accounts still get all components + examples.
+- **429** - rate limited (120 requests/min per IP); back off, honor `Retry-After`.
+- **not found** (`found: false`) - use the returned `suggestions`, or `search`; check `whats_new` if you suspect a stale name. Never run a fabricated install command.
+
+## Fallbacks
+
+- No ReUI MCP: `npx shadcn@latest search @reui -q "..."` then `add` (generic, no scoring / inline API).
+- The shadcn project's own MCP also works over the `@reui` registry: https://ui.shadcn.com/docs/mcp.
+
+Per-agent MCP setup: https://reui.io/docs/mcp?ref=skill

.ci/scripts/compute-release.mjs

@@ -11,7 +11,7 @@ const outputDir = process.env.RELEASE_OUTPUT_DIR
   ? join(repoRoot, process.env.RELEASE_OUTPUT_DIR)
   : join(repoRoot, ".ci", "release")
 const repository = process.env.GITEA_REPOSITORY ?? process.env.GITHUB_REPOSITORY ?? ""
-const serverUrl = (process.env.GITEA_SERVER_URL ?? "https://git.shts.su").replace(/\/$/, "")
+const serverUrl = (process.env.GITEA_SERVER_URL ?? "https://git.shx.one").replace(/\/$/, "")
 
 const MANIFEST_COMMIT_LIMIT = Number(process.env.RELEASE_MANIFEST_COMMIT_LIMIT ?? 6)
 const CONVENTIONAL_RE =
@@ -54,6 +54,12 @@ function formatSemver(parts) {
 
 function bumpVersion(version, bump) {
   const parts = parseSemver(version)
+  if (bump === "major") {
+    parts.major += 1
+    parts.minor = 0
+    parts.patch = 0
+    return formatSemver(parts)
+  }
   if (bump === "minor") {
     parts.minor += 1
     parts.patch = 0
@@ -66,8 +72,8 @@ function bumpVersion(version, bump) {
 function parseCommit(subject, body = "") {
   const match = CONVENTIONAL_RE.exec(subject.trim())
   const breaking =
-    /BREAKING CHANGE/i.test(body) ||
-  (match?.[1] && subject.includes(`${match[1]}!:`))
+    /BREAKING[ -]CHANGE:/i.test(body) ||
+    (match !== null && /^[^:]+!:\s/.test(subject.trim()))
 
   if (!match) {
     return { type: "other", scope: null, description: subject.trim(), bump: "patch" }
@@ -78,7 +84,9 @@ function parseCommit(subject, body = "") {
   const description = match[3].trim()
   let bump = "patch"
 
-  if (breaking || MINOR_TYPES.has(type)) {
+  if (breaking) {
+    bump = "major"
+  } else if (MINOR_TYPES.has(type)) {
     bump = "minor"
   } else if (PATCH_TYPES.has(type)) {
     bump = "patch"
@@ -251,7 +259,9 @@ function main() {
     return
   }
 
-  const bump = commits.some((commit) => commit.bump === "minor") ? "minor" : "patch"
+  const bump = commits.some((commit) => commit.bump === "major")
+    ? "major"
+    : commits.some((commit) => commit.bump === "minor") ? "minor" : "patch"
   const version = bumpVersion(baseFromTag, bump)
   const tag = `v${version}`
   const publishedAt = new Date().toISOString()

.ci/scripts/compute-release.test.mjs

@@ -0,0 +1,61 @@
+import assert from "node:assert/strict"
+import { execFileSync } from "node:child_process"
+import { copyFileSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs"
+import { tmpdir } from "node:os"
+import { basename, dirname, join, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import test from "node:test"
+
+const source = fileURLToPath(new URL("./compute-release.mjs", import.meta.url))
+
+const cases = [
+  { name: "исправление повышает patch", commits: [["fix(ui): исправить отображение"]], version: "1.47.7", bump: "patch" },
+  { name: "новая возможность повышает minor", commits: [["feat(ui): добавить раздел"]], version: "1.48.0", bump: "minor" },
+  { name: "breaking со scope повышает major", commits: [["chore(release)!: подготовить вторую основную версию"]], version: "2.0.0", bump: "major" },
+  { name: "breaking без scope повышает major", commits: [["feat!: заменить контракт"]], version: "2.0.0", bump: "major" },
+  { name: "footer со пробелом повышает major", commits: [["fix(api): заменить контракт", "BREAKING CHANGE: изменён контракт"]], version: "2.0.0", bump: "major" },
+  { name: "footer с дефисом повышает major", commits: [["fix(api): заменить контракт", "BREAKING-CHANGE: изменён контракт"]], version: "2.0.0", bump: "major" },
+  { name: "major имеет приоритет в смешанной истории", commits: [["chore(release)!: подготовить выпуск"], ["feat(ui): добавить раздел"], ["fix(ui): исправить отображение"]], version: "2.0.0", bump: "major" },
+  { name: "после второй версии сохраняется patch", base: "2.0.0", commits: [["fix(ui): исправить отображение"]], version: "2.0.1", bump: "patch" },
+  { name: "после второй версии сохраняется minor", base: "2.0.0", commits: [["feat(ui): добавить раздел"]], version: "2.1.0", bump: "minor" },
+  { name: "готовый тег не выпускается повторно", base: "2.0.0", commits: [], version: "2.0.0", bump: "none" },
+]
+
+for (const scenario of cases) test(scenario.name, () => {
+  const parent = resolve(tmpdir())
+  const root = mkdtempSync(join(parent, "mm-release-"))
+  const git = (...args) => execFileSync("git", args, { cwd: root, stdio: "pipe" })
+  try {
+    mkdirSync(join(root, ".ci/scripts"), { recursive: true })
+    copyFileSync(source, join(root, ".ci/scripts/compute-release.mjs"))
+    git("init", "--initial-branch=main")
+    git("config", "user.name", "Release Test")
+    git("config", "user.email", "[email protected]")
+    git("config", "core.hooksPath", ".git/hooks")
+    writeFileSync(join(root, "fixture"), "baseline")
+    git("add", "fixture")
+    git("commit", "-m", "chore(test): создать исходную базу")
+    git("tag", `v${scenario.base ?? "1.47.6"}`)
+    for (const [index, [subject, body]] of scenario.commits.entries()) {
+      writeFileSync(join(root, "fixture"), `change ${index}`)
+      git("add", "fixture")
+      git("commit", "-m", subject, ...(body ? ["-m", body] : []))
+    }
+    execFileSync(process.execPath, [join(root, ".ci/scripts/compute-release.mjs")], {
+      cwd: root, stdio: "pipe",
+      env: { ...process.env, BASE_VERSION: "1.0.0", RELEASE_OUTPUT_DIR: ".ci/release", GITHUB_OUTPUT: join(root, "outputs"), GITEA_REPOSITORY: "test/repo", GITEA_SERVER_URL: "https://example.invalid" },
+    })
+    const manifest = JSON.parse(readFileSync(join(root, ".ci/release/release-manifest.json"), "utf8"))
+    const output = readFileSync(join(root, "outputs"), "utf8")
+    assert.equal(manifest.version, scenario.version)
+    assert.equal(manifest.tag, `v${scenario.version}`)
+    assert.equal(manifest.releaseUrl, `https://example.invalid/test/repo/releases/tag/v${scenario.version}`)
+    assert.match(output, new RegExp(`^bump=${scenario.bump}$`, "m"))
+    assert.match(output, new RegExp(`^should_release=${scenario.bump !== "none"}$`, "m"))
+    if (scenario.bump !== "none") assert.match(readFileSync(join(root, ".ci/release/release_notes.md"), "utf8"), new RegExp(`# v${scenario.version.replaceAll(".", "\\.")}`))
+  } finally {
+    assert.equal(dirname(resolve(root)), parent)
+    assert.ok(basename(root).startsWith("mm-release-"))
+    rmSync(root, { recursive: true, force: true })
+  }
+})

.claude/settings.local.json

@@ -12,9 +12,9 @@
       "Bash(curl -s -o /dev/null -w '%{http_code}' http://localhost:__TRACKED_VAR__/dashboard)",
       "Bash(curl -s -o /dev/null -w '%{http_code}' http://localhost:3333__TRACKED_VAR__)",
       "Bash(curl -s -o /dev/null -w '%{http_code}' http://localhost:59959__TRACKED_VAR__)",
-      "WebFetch(domain:git.shts.su)",
-      "Bash(curl -s \"https://git.shts.su/denozord/router-lists-ui/raw/branch/v5/frontend/src/RouteOptimizerPage.jsx\")",
-      "Bash(curl -s \"https://git.shts.su/denozord/router-lists-ui/raw/branch/v5/frontend/src/OspfToolsPage.jsx\")",
+      "WebFetch(domain:git.shx.one)",
+      "Bash(curl -s \"https://git.shx.one/denozord/router-lists-ui/raw/branch/v5/frontend/src/RouteOptimizerPage.jsx\")",
+      "Bash(curl -s \"https://git.shx.one/denozord/router-lists-ui/raw/branch/v5/frontend/src/OspfToolsPage.jsx\")",
       "Bash(node -e ' *)",
       "Bash(powershell -Command \"Get-Item 'C:\\\\Users\\\\shats\\\\.claude\\\\projects\\\\C--Users-shats-Dev-MikrotikManager-3\\\\b1dbd554-4665-40c0-bb5b-19d63bb494a0.jsonl'\")",
       "Bash(node -e \"const { createRequire } = require\\('module'\\); const r = createRequire\\(__filename\\); const lucide = r\\('lucide-react'\\); ['SlackIcon','WebhookIcon'].forEach\\(n => console.log\\(n, !!lucide[n]\\)\\)\")",
@@ -63,5 +63,8 @@
       "Bash(xargs grep *)",
       "Bash(npx shadcn@latest add popover --yes)"
     ]
+  },
+  "env": {
+    "REUI_LICENSE_KEY": "REUI-EAF4-EA40-6C5C-5D86"
   }
 }

.claude/skills/reui/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: reui
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 22 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 `fe6742e29c`.** 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 22 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
+
+The skill is free and this MCP is free to use; it just needs a ReUI account. On first use your agent opens a browser "Sign in with ReUI" prompt (a free account is created if you don't have one). Free covers components and examples with a daily request allowance; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the limit (see [rules/registry.md](./rules/registry.md)). The same account and skill work in every agent and service the MCP connects to - this skill is agent-agnostic.
+
+Skill + MCP are a team: this skill is the workflow (how to find, install, read the API, and adapt by reuse); the MCP is the live data and the hands (search, get_component, install commands). Your job: find the right item, install it with the shadcn CLI, read its real API, and **adapt by reuse** - wire real data and theme it; do not hand-roll or restyle what ReUI already provides. This skill **layers on the shadcn skill**: follow that for generic rules (spacing, `cn()`, semantic colors, forms); follow this for everything ReUI-specific.
+
+## The core loop (MCP-native)
+
+1. **Find** - call the ReUI MCP `search` tool with the user's intent. It returns a ranked, scored list across components/examples/blocks/icons, each with an `install` command, `previewUrl`, `docsUrl`, and `componentsUsed`. Pass hints (`type`, `component`, `category`, `features`, `free`) when you can infer them.
+2. **Install** - run the returned command non-interactively (`npx shadcn@latest add @reui/<name> --yes`). The CLI resolves deps, aliases, and the base/style from `components.json`. See [cli.md](./rules/cli.md).
+3. **Read the API (on your base)** - first note your base from `components.json` -> `style` (`base-nova` -> Base UI, `radix-nova` -> Radix UI). For each component an item uses, call `get_component(name)` and read its **inline `api`** (no web fetch); then `get_examples(name)` to install a worked example and copy its composition - the installed files are already in your base. Whenever you work with a component's API, also **share its `docsUrl`** (the primitive's API documentation page) with the user so they have the full reference. See [components.md](./rules/components.md).
+4. **Adapt (reuse-first)** - swap demo data for real data, fix icon imports, align tokens. Do not redesign. See [adapting.md](./rules/adapting.md).
+
+**Always show the preview.** Every item a tool returns carries a `previewUrl` (a live preview page). Whenever you list, recommend, or present ReUI items to the user - blocks, components, examples, or icons, whether from `search`, `search_icons`, `list_components`, `compose_page`, or any getter - include each item's `previewUrl` so they can SEE it before installing. Blocks and examples open an individual live preview; icons and components link to their live category/component page. Never present an item without its preview link.
+
+If the ReUI MCP is not configured, fall back to `npx shadcn@latest search @reui -q "..."` then `add` - but the MCP gives scored matches + inline APIs; prefer it.
+
+## Commands
+
+Run ReUI as explicit slash commands (via the ReUI MCP) **or** just ask in plain language - both run the same workflow.
+
+| Command     | Invoke                         | Does                                                                                                               |
+| ----------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| **build**   | `/mcp__reui__build <what>`     | Compose a page/section/feature from ReUI: plan → install → read API → adapt → craft → audit.                       |
+| **add**     | `/mcp__reui__add <item>`       | Find & install one component/example/block/icon and wire it in.                                                    |
+| **fix**     | `/mcp__reui__fix [target]`     | Diagnose & fix ReUI usage: wrong/undocumented props, base/radix mismatch, missing states, a11y/scroll.             |
+| **improve** | `/mcp__reui__improve [target]` | Refine + extend existing ReUI UI to a production-exceptional bar (hierarchy, density, states, responsive, motion). |
+
+Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor/Windsurf, `/mcp.reui.build` in VS Code). No command surface? Just describe what you want - this skill drives the identical loop.
+
+## When to reach for ReUI vs plain shadcn
+
+| Need                                                                 | Reach for                                                                 |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| A full page or section (dashboard, billing, auth, pricing, settings) | `compose_page` first (plans sections + best blocks), then ReUI **blocks** |
+| A data table with sorting/filtering/pagination/virtualization        | the **data-grid** component (never hand-roll a `<table>`)                 |
+| A drag-and-drop board                                                | the **kanban** component                                                  |
+| Advanced column filtering, date range, tree, stepper, ...            | the matching ReUI **component**                                           |
+| A single generic control already in shadcn (Button, Dialog, Select)  | plain **shadcn**                                                          |
+
+## Detailed references
+
+- [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 22 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)
+- [rules/styling.md](./rules/styling.md) - ReUI extended tokens, theme adaptation, density
+- [rules/icons.md](./rules/icons.md) - portable icons, swapping imports, Motion Icons (static + animated)
+- [tools.md](./tools.md) - the ReUI MCP: golden path, the 19 tools, token rules, result shapes, errors

.claude/skills/reui/rules/adapting.md

@@ -0,0 +1,43 @@
+# Adapting installed ReUI code (reuse-first, no AI slop)
+
+ReUI items ship production-quality. Your job is to **adapt by reuse** - wire real data and fit the app - not to redesign or hand-roll. The output should look like ReUI built it for this product.
+
+## Preserve the design - don't over-customize
+
+The design IS the product. A ReUI block/component encodes senior-designer decisions: spacing, hierarchy, density, color treatment, and component choices. The fastest way to turn a premium block back into generic AI slop is to "improve" its look - so don't.
+
+- Change **data, copy, and props**; keep the **structure and styling** it ships with. Make the **smallest** change that wires the real data. If your diff touches `className` / JSX structure more than data / props, you are over-customizing - stop and reuse.
+- Don't swap ReUI components for hand-rolled ones, restructure the layout, re-skin spacing / radius / colors, or add decorative chrome. Let the installed components carry the default spacing, radius, sizing, icon rhythm, density, and state styling; add custom Tailwind only when a component genuinely lacks a contract you need.
+- Want a different look? `search` for a block whose design already fits and reuse that - don't restyle this one into a new design.
+
+## Reuse the parts: examples and the block's own elements
+
+- **Examples are building parts.** A free `c-*` example is a correct, single-pattern composition you can reuse. Before composing from scratch, `get_examples(component)`, install the closest one, and reuse its wiring - assemble UI from examples instead of hand-rolling what an example already shows.
+- **Reuse a block's own elements.** Need more rows, cards, items, or sections than ship by default? Repeat the block's **existing** element by mapping real data through the same markup - never invent parallel markup that drifts from its design. Need a variant (empty / loading / expanded)? Derive it from an element the block already has.
+
+## Don't invent (read, don't guess)
+
+- Never write a prop, variant value, import path, or `@reui/...` name you didn't read in a component's inline `api`, an installed example, or a `search` result. If you didn't see it, treat it as nonexistent - call `get_component` / `get_examples` / `search` first, or run the MCP `validate_usage` tool to check planned names + props against the docs before writing code.
+- If a getter returns `found: false` or `search` returns nothing, say so and fall back (plain shadcn, or ask) - never fabricate an install command or an API.
+
+## What to change vs leave alone
+
+- **Change:** the item's own data, copy, props, and layout to fit the app.
+- **Leave alone:** installed component files, hooks, and the shared theme - do not edit vendored ReUI internals; change behavior through props and the documented API.
+- Blocks are **portable React** - no `next/link`, `next/image`, or other framework-runtime imports inside them. Keep them portable.
+
+## Demo data -> real data
+
+- Replace every placeholder with the user's real data. Model it as **typed data structures** and **map over arrays** - never duplicate JSX per row/card. Keep small block-specific formatters next to the data.
+- Wire the real source (columns, fields, fetch). For `data-grid`, implement the server fetch contract if the user needs server-side data.
+- **Type from the component API, derive during render.** Type domain state through the component's own types - e.g. map status to `BadgeProps["variant"]` via a typed `Record<Status, …>` - instead of stringly-typed values. Compute view state during render; don't mirror derived data into `useState`/`useEffect`.
+- **Adapt on the right base.** Use the API for the project's base (Base UI vs Radix - see [components.md](./components.md)); the installed files are already base-correct, so reuse their shape rather than translating from memory.
+
+## Believable content (no AI tells)
+
+- Use realistic labels, counts, timestamps, and statuses that map to a real workflow.
+- No decorative buttons, fake tabs, meaningless toggles, equal-weight card walls, empty gradients, ornamental icons, or generic SaaS filler. Every element should do something.
+
+## Operational surfaces (settings / profile / admin)
+
+Pick ONE archetype and keep the family consistent: a vertical rail (3-6 sections), horizontal tabs (5-8), or a frame/stack. Prefer `frame` for tool-like surfaces, a card for profile-like ones. Don't mix archetypes in one surface.

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

@@ -0,0 +1,60 @@
+# CLI: registry setup, license, non-interactive install
+
+## Registry setup (one-time, per project)
+
+Free items (the 22 components and all `c-*` examples) need only the plain string registry in `components.json`:
+
+```json
+{ "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
+```
+
+Premium items (blocks; Motion Icons and templates) require a ReUI license at install:
+
+1. Add the key to `.env.local`:
+
+```bash
+REUI_LICENSE_KEY=your-license-key
+```
+
+2. Switch `components.json` to the authenticated object form:
+
+```json
+{
+  "registries": {
+    "@reui": {
+      "url": "https://reui.io/r/{style}/{name}.json",
+      "headers": { "Authorization": "Bearer ${REUI_LICENSE_KEY}" }
+    }
+  }
+}
+```
+
+The shadcn CLI expands `${REUI_LICENSE_KEY}` from `.env.local` inside `components.json`, but an MCP client config never expands variables, so a ReUI MCP server config must carry the raw token instead (for example `reui_pat_your_token_here`).
+
+The MCP `get_project_context` tool returns the right config. Full guide: https://reui.io/docs/registry?ref=skill
+
+## Installing
+
+Use the project's package runner (check `packageManager`):
+
+```bash
+npx shadcn@latest add @reui/<name> --yes      # npm
+pnpm dlx shadcn@latest add @reui/<name> --yes  # pnpm
+bunx --bun shadcn@latest add @reui/<name> --yes # bun
+```
+
+`--yes` skips confirmation prompts. The CLI auto-detects the package manager from the lockfile (there is no `--package-manager` flag). It also resolves the correct base+style variant from `components.json`, so do not pass a style.
+
+## Handling prompts and conflicts
+
+- **Always pass `--yes`** so the CLI does not block on confirmation prompts.
+- **Do NOT pass `--overwrite` by default.** If the CLI reports an existing file, read the output and resolve deliberately: install under a different name, adjust the path, or ask the user. Only use `--overwrite` when the user explicitly wants to replace a file.
+- **Preview first when touching an existing project**: `npx shadcn@latest add @reui/<name> --dry-run` shows what would change; `--diff <file>` shows a specific file's diff. Use these before overwriting.
+- Run from the **project root** so `components.json` and `.env.local` are found.
+
+## Free vs premium boundary
+
+- Public, no key: `c-*` examples and the 22 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?ref=skill (their key) or https://reui.io/pricing?ref=skill (upgrade).

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

@@ -0,0 +1,428 @@
+# ReUI components
+
+The 22 ReUI building blocks: `alert`, `autocomplete`, `badge`, `cascader`, `code-block`, `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 v9. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
+
+- 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 = useTable({
+  features: dataGridFeatures,
+  data,
+  columns,
+})
+
+<DataGrid table={table} recordCount={data.length}>
+  <DataGridTable />
+</DataGrid>
+```
+
+Common mistakes:
+
+- **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 primitive's `DataGridColumnMeta` (e.g. `cellClassName`, `headerTitle`), set through the bundle's `columnMeta` slot.
+
+## event-calendar
+
+**Required:** events via `events`/`onEventsChange` (controlled) or `defaultEvents` (uncontrolled), plus a height on the root.
+**Shape:**
+
+```tsx
+<EventCalendar defaultEvents={events} defaultView="month" className="h-[560px]">
+  <EventCalendarNav />
+  <EventCalendarContent />
+</EventCalendar>
+```
+
+**Gotcha:** headless-first: `EventCalendarContent` renders the active view (month/week/day/days/agenda; a resource view activates when `resources` is passed) - there is no per-view JSX to compose. Events are `{ id, title, start, end (exclusive), allDay?, color?, recurrence?, resourceId? }`. Mutations flow through `onEventUpdate`/`canDropEvent` (return `false` to reject); the root needs an explicit height because it is a min-h-0 flex column.
+
+## gantt
+
+**Required:** `resources` (the left tree) plus bars via `events`/`defaultEvents` attached by `resourceId`.
+**Shape:**
+
+```tsx
+<Gantt defaultEvents={bars} resources={tasks} defaultScale="month" className="h-[480px]">
+  <GanttNav />
+  <GanttView />
+</Gantt>
+```
+
+**Gotcha:** bars move along the time axis only (never across rows) and are all-day spans with exclusive `end`; `progress` is 0-100. Scales are `day | week | month | quarter | year`. Zoom control, infinite scroll, summary rollups, and row checkboxes are ON by default - turn off what you do not need. Same `onEventUpdate`/`canDropEvent` commit pipeline as `event-calendar`; the root needs an explicit height.
+
+## kanban
+
+**Required:** `value` (`Record<string, T[]>`), `onValueChange`, `getItemValue`
+**Shape:**
+
+```tsx
+<Kanban value={cols} onValueChange={setCols} getItemValue={(i) => i.id}>
+  <KanbanBoard>
+    {Object.entries(cols).map(([id, items]) => (
+      <KanbanColumn key={id} value={id}>
+        <KanbanColumnHandle><h3>{id}</h3></KanbanColumnHandle>
+        <KanbanColumnContent value={id}>
+          {items.map((i) => (
+            <KanbanItem key={i.id} value={i.id}>
+              <KanbanItemHandle>{i.title}</KanbanItemHandle>
+            </KanbanItem>
+          ))}
+        </KanbanColumnContent>
+      </KanbanColumn>
+    ))}
+  </KanbanBoard>
+  <KanbanOverlay><div className="bg-muted size-full rounded-md" /></KanbanOverlay>
+</Kanban>
+```
+
+**Gotcha:** state is `Record<columnId, T[]>`. Each `KanbanColumnContent value` must match its parent `KanbanColumn value`. Omit `KanbanOverlay` and the drag preview silently breaks.
+
+## sortable
+
+**Required:** `value` (`T[]`), `onValueChange`, `getItemValue`
+**Shape:**
+
+```tsx
+<Sortable value={items} onValueChange={setItems} getItemValue={(i) => i.id}>
+  {items.map((i) => (
+    <SortableItem key={i.id} value={i.id}>
+      <SortableItemHandle><GripVertical /></SortableItemHandle>
+      {i.label}
+    </SortableItem>
+  ))}
+</Sortable>
+```
+
+**Gotcha:** a flat 1D reorder list (not columns - that is `kanban`). `getItemValue` must return a stable, unique string. Pass `layout="grid"` or `layout="nested"` for non-list layouts.
+
+## filters
+
+**Required:** `fields` (`FilterField[]`). The value is ONE `FilterQuery` tree - `query` + `onQueryChange`, or uncontrolled `defaultQuery`.
+**Shape:**
+
+```tsx
+const fields: FilterField[] = [
+  { id: "title", label: "Title", type: "text" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "archived", label: "Archived" },
+    ],
+  },
+]
+const [query, setQuery] = useState<FilterQuery>(() => createFilterQuery())
+
+<Filters fields={fields} query={query} onQueryChange={setQuery} />
+```
+
+**Gotcha:** the state is a TREE, not a list of chips. `FilterQuery` is a group of rules joined by `and`/`or` and a group may hold another group, so `(A and B) or C` is expressible; a rule is `{ id, type: "rule", path: ["status"], operator, value }` and `path` is the whole nested attribute path, root first. The pre-rewrite API is GONE: there is no `filters`/`onChange` prop, no `FilterFieldConfig` (fields are `FilterField`, nested through their own `fields`, keyed `id` not `key`), and no `createFilter()` - it minted ids inside a pure function and broke hydration, so ids now come from `createFilterIdFactory(seed)` seeded off `useId`, and `createFilterQuery()` / `createFilterRule()` take one. Read the query back with `flattenFilterConditions` (`{ path, field, operator, values, negated }` per rule, incomplete rules skipped) and walk the tree yourself when the parentheses carry meaning - the primitive compiles nothing, no SQL, no query string.
+
+`variant` picks the chrome over that one query: `"basic"`, the default, is the flat chip row for a toolbar over a table; `"advanced"` is the condition builder, hung off a trigger or rendered in place with `advancedMode="inline"`. Both read and write the same tree, so a saved view built in one opens in the other. Other props worth knowing before you hand-roll them: `size` is two rungs, `"sm" | "default"`, resolved per style (there is no `lg`); `reorderable` turns on drag and Alt+Arrow row moves in the builder; `onBeforeQueryChange` is the ONE veto point for every write (return `false` to refuse, it cannot rewrite); `editors` registers custom value editors a field selects by `editor` name; `labels` / `operatorLabels` own every rendered string; `pathCollapse` + `maxPathSegments` shorten deep attribute paths; `renderChip` / `renderValue` / `renderEmpty` replace rendered parts. On a field, `loadOptions` supplies async options with paging and `resolveValues` renders a chip restored from a saved view whose option was never loaded. Pairs naturally with `data-grid`.
+
+## cascader
+
+**Required:** `items` (a tree of `{ value, label, children? }`), plus the panel parts inside `CascaderContent`.
+**Shape:**
+
+```tsx
+<Cascader items={items} value={value} onValueChange={setValue}>
+  <CascaderTrigger render={<Button variant="outline" />}>
+    <CascaderValue placeholder="Select an attribute" />
+  </CascaderTrigger>
+  <CascaderContent className="w-80">
+    <CascaderPanel>
+      <CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderInput />
+      </CascaderNav>
+      <CascaderEmpty />
+      <CascaderList maxHeight={288}>
+        <CascaderItems />
+      </CascaderList>
+      <CascaderStatus />
+    </CascaderPanel>
+  </CascaderContent>
+</Cascader>
+```
+
+**Gotcha:** pressing a branch NAVIGATES, it does not select - only leaves are selectable until you pass `selectable="any"` or a predicate, and once a branch is selectable its chevron becomes the only way to open it. `CascaderInput` must stay inside `CascaderContent` (Base UI refills the query from the selection when the input sits outside the popup). Always include `CascaderStatus`: it is the live region announcing level changes, which the visual breadcrumb does not provide to screen readers. Accepts a flat adjacency list via `getParent` as well as nested `children`. `searchScope="deep"` searches every level and annotates results with their path; `multiple` gives checkbox rows; `inline` + a bare `CascaderPanel` embeds it with no popover.
+
+The shape above is `mode="drill"`, the default. `mode="tree"` keeps the same parts (drop `CascaderBreadcrumb`, pass `showBack={false}`, drive expansion with `expanded`/`onExpandedChange`); `mode="columns"` REPLACES `CascaderList` + `CascaderItems` with a single `CascaderColumns`, and has no breadcrumb. Other props worth knowing before you hand-roll them: `cascade` (multi-select only, parent/child selection with indeterminate branches - pair it with `selectable="any"`, since a leaf-only tree can never cascade), `indicator={false}` to drop the single-select check and its gutter (visual only, no-op with `multiple`), `virtualize`/`virtualizeThreshold` plus `CascaderVirtualItems` for long levels, and `getChildren` for async levels with cursor paging, retry on failure and optional `prefetch`. `CascaderFooter` pins commands below the list (`actions` is the quick path) and `CascaderSubmenu` opens one as a side-anchored flyout with the full menu keyboard model. To head a run of rows use `CascaderGroup` wrapping a `CascaderLabel` - a bare label inside a listbox names nothing and is dropped from the accessibility tree - and `CascaderSeparator` for the rule between runs. Every rendered string comes from `labels`, and the panel is RTL-correct under a `DirectionProvider` or `dir="rtl"`.
+
+## date-selector
+
+**Required:** none, but wire `onChange` to capture the value.
+**Shape:**
+
+```tsx
+const [value, setValue] = useState<DateSelectorValue | undefined>()
+
+<DateSelector value={value} onChange={setValue} label="Due date" />
+```
+
+**Gotcha:** the value is a structured `DateSelectorValue` (period / operator / start+end dates), NOT a `Date` - never pass a raw `Date`. Use `allowRange={false}` to lock single-date picking. Read `get_component("date-selector")` for the value shape.
+
+## tree
+
+**Required:** `tree` (a `@headless-tree/core` instance you construct)
+**Shape:**
+
+```tsx
+<Tree tree={tree}>
+  {tree.getItems().map((item) => (
+    <TreeItem key={item.getId()} item={item}>
+      <TreeItemLabel />
+    </TreeItem>
+  ))}
+</Tree>
+```
+
+**Gotcha:** `Tree` is a styled shell - it takes a headless-tree instance via `tree`, NOT `data`/`items` props. Build the instance with `@headless-tree/react`. External API: https://headless-tree.lukasbach.com/
+
+## stepper
+
+**Required:** `StepperItem step` (number), `StepperContent value` (number)
+**Shape:**
+
+```tsx
+<Stepper defaultValue={1}>
+  <StepperNav>
+    <StepperItem step={1}>
+      <StepperTrigger><StepperIndicator>1</StepperIndicator></StepperTrigger>
+      <StepperSeparator />
+    </StepperItem>
+    <StepperItem step={2}>
+      <StepperTrigger><StepperIndicator>2</StepperIndicator></StepperTrigger>
+    </StepperItem>
+  </StepperNav>
+  <StepperPanel>
+    <StepperContent value={1}>Step 1 content</StepperContent>
+    <StepperContent value={2}>Step 2 content</StepperContent>
+  </StepperPanel>
+</Stepper>
+```
+
+**Gotcha:** steps are 1-indexed. Without `StepperPanel` + `StepperContent` you render the nav trail but no body. Put `StepperSeparator` in every `StepperItem` except the last.
+
+## timeline
+
+**Required:** `TimelineItem step` (number)
+**Shape:**
+
+```tsx
+<Timeline>
+  <TimelineItem step={1}>
+    <TimelineHeader>
+      <TimelineDate>March 2024</TimelineDate>
+      <TimelineTitle>Project initialized</TimelineTitle>
+    </TimelineHeader>
+    <TimelineIndicator />
+    <TimelineSeparator />
+    <TimelineContent>Repo and architecture set up.</TimelineContent>
+  </TimelineItem>
+</Timeline>
+```
+
+**Gotcha:** each item needs a unique `step`. `orientation` is `"vertical"` (default) or `"horizontal"`. This is a static event display, not interactive like `stepper`.
+
+## autocomplete
+
+**Required:** `items` (array; each item has at least `value`)
+**Shape:**
+
+```tsx
+<Autocomplete items={items}>
+  <AutocompleteInput placeholder="Search..." />
+  <AutocompleteContent>
+    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
+    <AutocompleteList>
+      {(item) => (
+        <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>
+      )}
+    </AutocompleteList>
+  </AutocompleteContent>
+</Autocomplete>
+```
+
+**Gotcha:** `AutocompleteList` takes a render-prop `(item) => ReactNode`, NOT a mapped array of children. External API: https://base-ui.com/react/components/autocomplete
+
+## phone-input
+
+**Required:** none, but wire `onChange`.
+**Shape:**
+
+```tsx
+<PhoneInput placeholder="Enter phone number" defaultCountry="US" value={value} onChange={setValue} />
+```
+
+**Gotcha:** `value`/`onChange` use an E.164 string (e.g. `"+14155551234"`), not a display-formatted string; `onChange` can fire `undefined`. `defaultCountry` is a 2-letter ISO code. Wraps `react-phone-number-input`.
+
+## number-field
+
+**Required:** wrap the controls in `NumberFieldGroup`.
+**Shape:**
+
+```tsx
+<NumberField defaultValue={0}>
+  <NumberFieldScrubArea label="Quantity" />
+  <NumberFieldGroup>
+    <NumberFieldDecrement />
+    <NumberFieldInput />
+    <NumberFieldIncrement />
+  </NumberFieldGroup>
+</NumberField>
+```
+
+**Gotcha:** import from `@/components/ui/number-field`. The accessible label goes on `NumberFieldScrubArea`, not `NumberField`. External API: https://base-ui.com/react/components/number-field
+
+## rating
+
+**Required:** `rating` (number)
+**Shape:**
+
+```tsx
+<Rating rating={4.5} showValue editable onRatingChange={setRating} />
+```
+
+**Gotcha:** supports decimals (partial stars). Pass `editable` + `onRatingChange` for interactive input; omit both for a read-only display.
+
+## scrollspy
+
+**Required:** `targetRef` (the scroll container ref)
+**Shape:**
+
+```tsx
+<Scrollspy targetRef={containerRef}>
+  <a href="#s1" data-scrollspy-anchor="s1">Section 1</a>
+  <a href="#s2" data-scrollspy-anchor="s2">Section 2</a>
+</Scrollspy>
+<div ref={containerRef}>
+  <div id="s1">...</div>
+  <div id="s2">...</div>
+</div>
+```
+
+**Gotcha:** each link's `data-scrollspy-anchor` must match a section `id`. `targetRef` is the scrollable container (defaults to the window).
+
+## frame
+
+**Required:** `Frame` > `FramePanel`
+**Shape:**
+
+```tsx
+<Frame>
+  <FramePanel>
+    <FrameHeader>
+      <FrameTitle>Title</FrameTitle>
+      <FrameDescription>Description</FrameDescription>
+    </FrameHeader>
+    <div className="p-5">Content</div>
+    <FrameFooter>Footer</FrameFooter>
+  </FramePanel>
+</Frame>
+```
+
+**Gotcha:** a structured card shell for tool-like surfaces. `stacked` connects multiple panels with shared borders; `dense` removes panel padding; radius via the `--frame-radius` CSS variable.
+
+## icon-stack
+
+**Required:** one child icon
+**Shape:**
+
+```tsx
+<IconStack aria-hidden="true">
+  <InboxIcon className="size-4" />
+</IconStack>
+```
+
+**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.
+
+## code-block
+
+**Required:** `code` + `language`, or pre-highlighted `lines`.
+**Shape:**
+
+```tsx
+<CodeBlock code={code} language="tsx" />
+
+<CodeBlock code={code} language="tsx" showLineNumbers maxLines={20}>
+  <CodeBlockHeader>
+    <CodeBlockTitle>use-totals.ts</CodeBlockTitle>
+    <CodeBlockLanguage />
+    <CodeBlockCopyButton className="ml-auto" />
+  </CodeBlockHeader>
+  <CodeBlockExpandButton />
+</CodeBlock>
+```
+
+**Gotcha:** the one-liner is already a complete block; every child (header, title, language label, copy button, wrap toggle, expand button, line actions) is optional chrome, at any depth. Shiki is the only npm dependency and loads lazily, one chunk per language, on first highlight; `lines` (from `highlightCode` in `code-block-highlight`, which is server-safe and has no `"use client"`) or `highlight={false}` loads nothing at all. `maxLines` caps the height AND marks the block collapsible, which is what makes `CodeBlockExpandButton` appear. Use `variant="ghost"` when the block sits inside a surface that already has a border.
+
+## alert
+
+**Required:** `Alert` > `AlertTitle`
+**Shape:**
+
+```tsx
+<Alert variant="success">
+  <ShieldCheckIcon />
+  <AlertTitle>Security update</AlertTitle>
+  <AlertDescription>Enable two-factor authentication.</AlertDescription>
+  <AlertAction><Button size="xs">Update</Button></AlertAction>
+</Alert>
+```
+
+**Gotcha:** shadcn-compatible API. `variant`: `default | destructive | info | success | warning | invert`. The non-default variants use ReUI extended color tokens (`--success`/`--info`/`--warning`/`--invert`), which the install adds. Defer generic alert rules to the shadcn skill.
+
+## badge
+
+**Required:** none (text child).
+**Shape:**
+
+```tsx
+<Badge variant="success-light" size="sm">Success</Badge>
+<Badge variant="outline" radius="full">Pill</Badge>
+```
+
+**Gotcha:** shadcn-compatible. Rich `variant` set (solid, `-outline`, `-light` per color), `size` `xs..xl`, `radius` `default | full`. Like `alert`, the color variants rely on ReUI extended tokens. Prefer `Badge` variants over raw color classes for statuses.
+
+## base vs radix - write for the project's base
+
+ReUI ships every component in two builds: `base` (Base UI) and `radix` (Radix UI). The install command and name are identical, and the CLI installs the build matching the project. But you must write/adapt code against the **right base**, because their APIs differ.
+
+**Detect the base first.** Read `components.json` -> `style` and take the segment before the first `-`:
+
+- `"style": "base-nova"` -> **Base UI**
+- `"style": "radix-nova"` -> **Radix UI**
+
+**Then use that base's API.** The deltas mirror shadcn's base-vs-radix split:
+
+- Slot/composition: Base UI `render={<… />}` vs Radix `asChild`.
+- `Select`: Base UI takes `items`; Radix uses `<SelectItem>` children.
+- `ToggleGroup`: Base UI `multiple` boolean vs Radix `type="single" | "multiple"`.
+
+The safest path is to **read the installed files and `c-*` examples** - they're already in your base, so reuse their wiring instead of guessing. When `get_component`'s inline `api` or an example shows the other base's shape, translate it to your base (or `validate_usage` to confirm). Defer the generic base/radix mechanics to the shadcn skill.

.claude/skills/reui/rules/craft.md

@@ -0,0 +1,45 @@
+# Craft: make ReUI UI exceptional, not generic
+
+ReUI items ship senior-designer quality. Your adaptation has to hold that bar, so the result reads like a real product surface a team would keep - not a wireframe an AI generated. Use these alongside the reuse rules in [adapting.md](./adapting.md).
+
+## Have a point of view
+
+Pick an emotional register before you compose - calm, operational, premium, editorial, dense, energetic - and let layout, spacing, surface treatment, and icon behavior all reinforce it. One or two memorable decisions and restraint everywhere else beats ten generic ones. UI with no point of view reads as generated.
+
+## Brutally clear hierarchy
+
+One focal point per card or panel: the dominant metric or task first, its label second, supporting detail third. The first thing the eye lands on should be the right thing; secondary text must read as secondary. Borders, separators, and surfaces do real work to create 2-3 information bands - don't flatten everything to equal weight.
+
+## Spacing rhythm and deliberate density
+
+Gaps are a signal, not a default. Keep them intentional and consistent within a family (`gap-1`/`gap-2` for tight operational rows, larger gaps for section breaks), and smaller within a group than between groups. Match the surrounding ReUI density; don't pad an operational surface like a marketing page, and don't drift density mid-section. The composition should still feel authored in grayscale.
+
+## Cover the real states (the usual miss)
+
+A surface isn't done at the happy path. Compose, and wire:
+
+- **Empty** - a purposeful empty state (short message + the primary action), never a blank panel.
+- **Loading** - a **skeleton** that matches the real layout, not a centered spinner.
+- **Error** - an inline, recoverable error with a retry, announced via `role="status"`/`aria-live`.
+
+Derive these from an element the block already has (don't invent parallel markup), or `get_examples` for a state-specific example.
+
+## Responsive by default
+
+Mobile-first, not mobile-afterthought. In constrained rows/cards/sidebars, put `min-w-0` on the shrinking container and `truncate` long single-line labels; protect the primary label's width and let secondary content compress. Reflow layouts (multi-column -> single column) rather than just shrinking them. Desktop and mobile should both look designed.
+
+## Motion, subtly
+
+Motion should clarify, not decorate. Use ReUI Motion Icons on primary actions for a subtle hover cue; keep transitions short (~200-300ms) with calm easing; prefer a skeleton pulse over a spinner. No bouncing, no gratuitous entrance animations on every element.
+
+## Real, activated content
+
+Use believable, typed data (realistic labels, counts, timestamps, statuses that map to a real workflow) - never lorem or abstract filler. Every visible control does something: no decorative buttons, fake tabs, meaningless toggles, or stats with no job. It must still hold with long names, empty values, and crowded data.
+
+## Avoid the AI tells
+
+These instantly read as generated - don't ship them: equal-weight card walls, empty gradients, repetitive padding everywhere, generic enterprise copy, ornamental icons, and number tiles that don't earn their place.
+
+## The bar
+
+Before you finish, ask: **would a product team keep this instead of replacing it? Does it still feel strong after swapping in real content?** If not, reuse the shipped ReUI design harder - don't restyle it into something new - then run the [quality.md](./quality.md) gates.

.claude/skills/reui/rules/icons.md

@@ -0,0 +1,39 @@
+# Icons (ReUI delta over shadcn)
+
+Follow the shadcn icon rules (use the project's configured `iconLibrary`, `data-icon` on icons inside `Button`, no sizing classes on icons inside components, pass icons as component objects not string keys). ReUI adds the following.
+
+## Portable icons (library-agnostic)
+
+ReUI components, examples, and blocks are authored to be icon-library-agnostic. When `iconLibrary` is set in `components.json`, the shadcn CLI installs each item's icons in **your** library automatically - you swap nothing. If an installed item's icons don't match your project (for example `iconLibrary` isn't set, so they came in from the item's demo library), change the **import source and component name** to your library, keeping the same icon-name semantics:
+
+- `lucide` -> `lucide-react`
+- `tabler` -> `@tabler/icons-react`
+- `phosphor` -> `@phosphor-icons/react`
+- `remix` -> `@remixicon/react`
+- `hugeicons` -> `@hugeicons/react`
+
+Don't assume `lucide-react`; read `iconLibrary` from `components.json`.
+
+## Keep icons purposeful
+
+Icons support the hierarchy, they don't replace it: keep them small, matched to the surrounding density, and decorative ones `aria-hidden="true"` (an icon-only control still needs an accessible label on the control). Don't add ornamental icons that do no job.
+
+## Motion Icons (the `@reui/icons/...` set)
+
+ReUI ships its own icon set in 4 styles (outline, solid, duotone, filled), each icon in two variants:
+
+```bash
+npx shadcn@latest add @reui/icons/default/<style>/<name> --yes    # static
+npx shadcn@latest add @reui/icons/animated/<style>/<name> --yes   # hover-animated (motion/react)
+```
+
+Finding them via the MCP is free; installing requires an Ultimate license (`REUI_LICENSE_KEY`, see [cli.md](./cli.md)). Reach for a Motion Icon on a primary action when a subtle hover cue helps; keep motion restrained.
+
+Finding icons:
+
+- Several icons (the common case): **`search_icons(concepts[])`** - up to 24 concepts in one call, the best icons per concept with install commands. Pass `animated: true` to get only icons with a hover-animated Motion variant.
+- One icon: `search` with `type: "icon"`.
+- Icon results and `get_icon` carry `animated: true` and `installAnimated` when an animated variant exists - use those install strings, do not construct paths by hand.
+- Every icon result carries a `previewUrl` (its live icon-category page) - **share it with the user** so they can SEE the icon before installing.
+
+The `icon-stack` component composes multiple icons into a stacked display.

.claude/skills/reui/rules/quality.md

@@ -0,0 +1,22 @@
+# Quality gates (security, accessibility, scroll)
+
+These are the **done gate**, not a nice-to-have: before you call any ReUI work finished, call the MCP `get_audit_checklist` tool and pass every item below (plus the craft bar in [craft.md](./craft.md)). Then typecheck and lint.
+
+## Security
+
+- Never `dangerouslySetInnerHTML`. Render data as text/components.
+- External links (`target="_blank"`) must always pair `rel="noopener noreferrer"`.
+- No real PII, secrets, or tokens in demo or committed code. Remote media only from sources the project already allows.
+
+## Accessibility
+
+- Implicit list/card items that navigate get real anchors with a standard hover affordance.
+- Icon-only or numeric buttons need an `aria-label`; decorative icons get `aria-hidden`.
+- Every non-submit button is `type="button"`.
+- Keyboard + focus: everything interactive is reachable in a sensible Tab order with a visible focus ring; layers (dialogs/sheets/menus) trap focus and close on `Escape`. ReUI components ship standard keyboard behavior - read each component's inline `api` rather than re-implementing it.
+- Announce async UI: loading and error messages use `role="status"` / `aria-live` so they're not silent to screen readers.
+
+## Scroll mechanics
+
+- Make scroll regions with a parent-owned height: a `min-h-0` + flex chain down to the scroll container. Never guess a `max-h`.
+- The scroll container owns `overflow-auto`; ancestors stay `min-h-0` so the height resolves.

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

@@ -0,0 +1,35 @@
+# ReUI registry structure
+
+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 22 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).
+
+## The @reui registry
+
+Install everything through the shadcn CLI: `npx shadcn@latest add @reui/<name> --yes`. The CLI reads the `@reui` registry from the project's `components.json`. Free items need only the plain string form:
+
+```json
+{ "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
+```
+
+Premium installs need the authenticated form + `REUI_LICENSE_KEY` in `.env.local` - see [cli.md](./cli.md). The MCP `get_project_context` tool returns the right config.
+
+## Know your base: base or radix
+
+ReUI ships every item in two builds - `base` (Base UI) and `radix` (Radix UI) - with mirrored names. The CLI installs the build matching your project automatically, but **you must write code against the right base's API**. Detect it from `components.json` -> `style`: the segment before the first `-` is the base (`base-nova` -> Base UI, `radix-nova` -> Radix UI). The installed files and `c-*` examples are already in your base - read them and adapt on that base. See [components.md](./components.md) for the API deltas.
+
+**So the MCP's own `docsUrl` and `previewUrl` match your base**, send your `style` to the MCP: add `?style=<your components.json style>` to the ReUI MCP server URL (or set an `X-Reui-Style` header) in your MCP client config - set once, applies to every call. The MCP then resolves docs/preview links to YOUR library (`/docs/components/radix/...`, `/preview/radix/...` for a radix project) instead of the default base; `get_project_context` echoes back the style it currently sees so you can confirm it. Install commands are unaffected (the CLI already installs the right variant). If you notice the MCP returning `base` links for a `radix` project, tell the user to add `?style=` to the server URL.
+
+Blocks adapt to your active theme through semantic tokens and CSS variables - change the theme and every block follows.
+
+## Free vs premium
+
+- **Free, no key:** the 22 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
+
+The canonical index of every component's API docs is **https://reui.io/llms.txt** (returned as `componentsApiUrl` in MCP results). Prefer the inline `api` from `get_component`; use the index/docs as the fallback.

.claude/skills/reui/rules/styling.md

@@ -0,0 +1,26 @@
+# Styling (ReUI delta over shadcn)
+
+Follow the shadcn skill for the generic rules (semantic colors not raw values, `gap-*` not `space-y-*`, `size-*`, `cn()`, no manual `dark:` overrides, no overlay `z-index`). This file is only the ReUI-specific additions.
+
+## ReUI extended semantic tokens
+
+ReUI adds semantic tokens beyond shadcn's base set. Use these instead of raw colors for status and emphasis:
+
+- `--success` / `--success-foreground`
+- `--info` / `--info-foreground`
+- `--warning` / `--warning-foreground`
+- `--destructive-foreground` (paired with shadcn's `--destructive`)
+- `--invert` / `--invert-foreground` (inverted surfaces)
+
+Use them as Tailwind utilities (`bg-success text-success-foreground`, `text-warning`, ...). They are defined in the project's global CSS and registered with Tailwind (`@theme inline` on v4). If a token is missing in the project, add it to the global CSS file (never a new file) following the same `name` / `name-foreground` convention, exactly as the shadcn customization rules describe.
+
+**Incorrect:** `<span className="text-green-600">Active</span>`
+**Correct:** `<Badge variant="success">Active</Badge>` or `<span className="text-success">Active</span>`
+
+## Blocks follow your theme
+
+When you install a block it adapts to your active theme through the semantic tokens above and the project's CSS variables. Don't hardcode style-specific values into installed block code and don't fork it to "restyle" - change the theme via the CSS variables / a preset and every block follows. Want a different look? `search` for a block whose design already fits instead of re-skinning one.
+
+## Density and typography rhythm
+
+ReUI operational UI usually feels dense, not airy. Keep the gap between a title and its supporting description tight by default (`gap-0.5`, `space-y-1`, or `space-y-px`), and smaller than the gap between sections. Match the surrounding ReUI density when you add rows or fields; do not pad operational surfaces like a marketing page.

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

@@ -0,0 +1,54 @@
+# Workflow: find -> install -> read API -> adapt
+
+The core ReUI loop. The MCP tells you what to install and gives you the API; the shadcn CLI installs it; you turn the installed files into correct, themed, data-wired code by **reuse**, not redesign.
+
+## 1. Find (ReUI MCP `search` / `compose_page`)
+
+**Full multi-section page ask?** Call `compose_page(intent, sections?)` FIRST, before searching block-by-block. It returns ordered sections, each with the best block for the intent (top pick + alternates); sections listed in `unavailableSections` have no real inventory - compose those from components, do not force a bad block.
+
+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 22 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`.
+
+Example: "build a users management page with filters" -> `search({ query: "users management page with filters", type: "block", component: "data-grid", features: ["filters"] })`.
+
+Each result has `install`, `previewUrl`, `docsUrl`, `componentsUsed`, `score`, `termCoverage`, and `whyMatch`. `score` is relative to the top hit (the top is ~100 by construction), not an absolute quality - compare results to each other, and show the user the top options if several score closely; do not silently guess. A low `termCoverage` means a weak match even with a high score - rephrase or widen.
+
+**Always show the preview link.** Whenever you list or recommend items - from `search`, `search_icons`, `list_components`, `compose_page`, or a getter - include each item's `previewUrl` (a live preview page) so the user can SEE it before you install. Blocks and examples link to an individual live preview; icons and components to their live category/component page. This applies to every listing, not only a single pick.
+
+## 2. Install (shadcn CLI)
+
+Run the result's `install` command from the project root, non-interactively:
+
+```bash
+npx shadcn@latest add @reui/<name> --yes
+```
+
+The CLI reads `components.json`, installs the correct base+style variant, resolves `registryDependencies` (a block pulls in its components), installs npm deps, and rewrites aliases. Do not pass the base/style. See [cli.md](./cli.md).
+
+## 3. Read the API (do not guess props)
+
+Before writing code against any component an item uses:
+
+1. The item's `componentDigests` already give a 1-line contract per component - often enough to wire it. For the full API, call **`get_component(names)`** with ALL of `componentsUsed` in ONE call (it accepts an array) and read each inline `api` - no web fetch. **Share the component's `docsUrl`** (its 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.
+2. Call **`get_examples(name)`** for the free `c-*` examples of that component; install one and **read the added files** to copy the exact composition. This is the fastest correct path - the example shows real wiring you adapt, not invent.
+3. About to write a prop you did not see in an `api` or installed file? Run **`validate_usage`** BEFORE writing the code - per-prop documented / notDocumented verdicts plus did-you-mean suggestions. notDocumented means read the API, not push on.
+
+## 4. Adapt (reuse-first) - do not skip
+
+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 `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)).
+5. **Validate before finalizing**: if your adaptation introduced components or props you did not read in an `api` or example, run `validate_usage` on them.
+6. **Hit the craft bar** - clear hierarchy, deliberate density, the empty / loading / error states, subtle motion, and mobile-first responsiveness (see [craft.md](./craft.md)). Generic-looking output means you under-reused the design, not that it needs restyling.
+7. **Pass the quality gates** (security, a11y, scroll) - call the MCP `get_audit_checklist` tool and clear every item (see [quality.md](./quality.md)).
+8. **Typecheck / lint**.
+
+## If no single block fits
+
+Compose from components (`compose_page` tells you which sections have no block inventory via `unavailableSections`). `search` the components you need, read each `get_component` API, install a worked `get_examples` example for each, and assemble by adapting those examples. A block in the same category is a useful reference - install it and read its files to see how ReUI composes those components, then adapt.

.claude/skills/reui/tools.md

@@ -0,0 +1,58 @@
+# ReUI MCP: full reference
+
+The ReUI MCP (`https://mcp.reui.io`, Streamable HTTP) is free to use but needs a ReUI account: on first use the agent signs in with ReUI (a free account is created if the user has none), so every request is tied to an account. Free covers components and examples; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the daily request limit. It does **discovery + guidance** (search, inline APIs, page planning, validation) and never serves source; the shadcn CLI does **installation**, and the license key lives there (the `@reui` entry in `components.json`, backed by `.env.local`). Goal: from the user's intent to correct, themed, data-wired ReUI code in the **fewest tokens and calls**, with **no guessing**.
+
+## Golden path (token-optimal - follow this order)
+
+Most tasks need 2-4 MCP calls and ZERO web fetches:
+
+1. **`search(query, ...hints)`** -> pick the top 1-3 results. Each result already carries `install`, `previewUrl`, `docsUrl`, `componentsUsed`, `score`, `whyMatch`. The payload is complete - do not call another tool just to "confirm" a result.
+2. **`get_component([...componentsUsed])`** in ONE batched call (one name or an array of up to 20) -> read each inline `api`. This **replaces** fetching docs pages. Often skippable: search responses carry `componentDigests`, a compact API contract per referenced component.
+3. **`get_examples(component)`** -> install ONE returned `c-*` example, read the added files, copy the composition.
+4. **`get_install_command(item)`** only to validate a name you are unsure of (results already include `install`). Run the install with the shadcn CLI (`--yes`).
+5. **`get_audit_checklist()`** before declaring done.
+
+If you already know the exact item name, skip `search`. Everything else is situational.
+
+## The 5 task-specific tools (when to reach for each)
+
+- **`compose_page`** - BEFORE building any full page (dashboard, settings, billing, landing). Pass the intent (and optionally the sections you want); it returns ordered sections, each with the best premium block for the intent (top pick + alternates). Sections with no real inventory are listed honestly in `unavailableSections` - compose those from components instead of forcing a bad block.
+- **`search_icons`** - whenever you need icons, especially several. Batch up to 24 concepts in one call; each concept returns its best icons with install commands. Pass `animated: true` to get only icons that have a hover-animated Motion variant.
+- **`validate_usage`** - BEFORE writing code with component names or props you have not read in an inline `api` or an installed example. It checks planned names + props against the indexed API docs and registry item names; returns did-you-mean suggestions and per-prop documented / notDocumented verdicts. Deterministic, no inference - a notDocumented prop means stop and read the API, not push on.
+- **`whats_new`** - when your registry knowledge might be stale (a name 404s, the user mentions an item you don't know). Returns items added/removed per build, newest first.
+- **`report_issue`** - when an installed item is actually broken (bad source, wrong dependency, broken preview). Goes straight to the ReUI team; rate-limited 5/hour. Not for usage questions.
+
+## All 19 tools
+
+`search`, `get_block`, `get_example`, `get_icon`, `list_block_groups`, `list_block_categories`, `list_example_categories`, `list_icon_categories`, `list_components`, `get_component`, `get_examples`, `search_icons`, `compose_page`, `validate_usage`, `whats_new`, `report_issue`, `get_install_command`, `get_project_context`, `get_audit_checklist`. The MCP serves the full parameter schemas; do not guess parameters beyond them.
+
+## Token + speed rules
+
+- **Batch `get_component`** - ONE call with the whole `componentsUsed` array, never N calls. Skip it entirely when `componentDigests` already answers the question.
+- **Read source by installing** - the MCP serves no source. To read or analyze an item's real code, install it with the shadcn CLI and open the local files. Learn an API from the inline `api` / `componentDigests`, never by reading raw source.
+- **Infer `search` hints yourself** (`type`, `component`, `category`, `features`, `free`) - hints shrink the result set and the tokens. Keep `limit` low; one right result beats ten.
+- Run independent calls (and the shadcn install) concurrently in one turn - serial tool calls are the main source of slowness.
+- Don't repeat a search for the same intent; don't call `list_*` to "see everything" - `search` is the entry point, `list_*` is only for browsing a taxonomy the user explicitly wants to explore.
+- Prefer `get_component`'s inline `api` over `docsUrl` / `/llms.txt`. Fetch a web page only as a last resort.
+
+## Result shapes (so you don't re-fetch)
+
+- `score` is 0-100 RELATIVE to the top hit (the top is ~100 by construction), not absolute - compare results to each other.
+- `termCoverage` (0-1) is the share of the query the item matched - low means a weak match even if the score looks high; rephrase or widen the search.
+- Each result carries `whyMatch`, `install`, docs/preview URLs, and a `free` flag; premium items carry `requiredPlan` (`"pro"` for blocks, `"ultimate"` for icons).
+- `componentDigests` is a top-level map: a compact API contract per referenced component - often enough to wire an item without a `get_component` call.
+- Icon results and `get_icon` include `animated: true` and `installAnimated` when a hover-animated Motion variant exists (animated: `@reui/icons/animated/<style>/<name>`; static: `@reui/icons/default/<style>/<name>`).
+
+## Error playbook
+
+- **401** - the MCP requires a signed-in ReUI account. The client prompts "Sign in with ReUI" (OAuth) on first use; a free account is created if needed. For headless/CI, pass a personal token (`reui_pat_...`, created at https://reui.io/account/mcp?ref=skill) as `Authorization: Bearer`.
+- **403 / locked result** - a valid account but the plan does not cover the item: premium blocks need Pro, Motion Icons need Ultimate. Point to https://reui.io/pricing?ref=skill (upgrade). Free accounts still get all components + examples.
+- **429** - rate limited (120 requests/min per IP); back off, honor `Retry-After`.
+- **not found** (`found: false`) - use the returned `suggestions`, or `search`; check `whats_new` if you suspect a stale name. Never run a fabricated install command.
+
+## Fallbacks
+
+- No ReUI MCP: `npx shadcn@latest search @reui -q "..."` then `add` (generic, no scoring / inline API).
+- The shadcn project's own MCP also works over the `@reui` registry: https://ui.shadcn.com/docs/mcp.
+
+Per-agent MCP setup: https://reui.io/docs/mcp?ref=skill

.codex/config.toml

@@ -0,0 +1,3 @@
+[mcp_servers.reui]
+url = "https://mcp.reui.io/api/mcp?style=base-nova"
+bearer_token_env_var = "REUI_LICENSE_KEY"

.cursor/rules/ma-global.mdc

@@ -18,7 +18,7 @@ alwaysApply: false
 
 ## Эталон UI
 
-- **`app/(main)/servers`** — главный эталон layout, сетки, типографики, композиции и взаимодействий. Не вводить новый UI-паттерн, если на `/servers` уже есть эквивалент.
+- **`app/(main)/servers`** — эталон **поведения** CRUD. Оболочка ops: **Frame + DataGrid**, не Card-shell. Не копировать `DataPageCard` на новые экраны.
 
 ## Качество и совместимость
 

.cursor/rules/ma-ui-guardian.mdc

@@ -1,11 +1,11 @@
 ---
-description: "[Multi-agent] Роль UI GUARDIAN — сверка UI только с эталоном /servers"
+description: "[Multi-agent] Роль UI GUARDIAN — сверка UI с CRUD /servers и оболочкой Frame+DataGrid"
 alwaysApply: false
 ---
 
 # Агент: UI GUARDIAN (хранитель UI)
 
-Ты отвечаешь **только** за **визуальную и UX-согласованность** с эталоном **`/servers`**.
+Ты отвечаешь **только** за **визуальную и UX-согласованность**.
 
 ## Язык
 
@@ -13,31 +13,31 @@ alwaysApply: false
 
 ## Эталон
 
-- Каталог **`app/(main)/servers`** и связанные компоненты страницы — **единственный** эталон для:
-  - структуры layout (области страницы, карточки, секции);
-  - сетки и отступов;
-  - типографики (заголовки, подписи, плотность текста);
-  - композиции shadcn-компонентов;
-  - паттернов взаимодействия (кнопки, таблицы, диалоги, формы — как на `/servers`).
+Два слоя (не смешивать):
+
+1. **Поведение CRUD** — каталог **`app/(main)/servers`**: фильтры, таблица, диалоги, формы, плотность, паттерны кнопок.
+2. **Оболочка ops** — **ReUI Frame + DataGrid**, не shadcn `Card` как page shell. KPI — `IconTile` `variant="elevated"` `className="size-10.5"`. Preview: [frame](https://reui.io/docs/components/base/frame) · [data-grid](https://reui.io/docs/components/base/data-grid) · [stats-12](https://reui.io/preview/base/stats-12) · [icon-tile](https://reui.io/docs/components/base/icon-tile).
+
+`DataPageCard` — ops list shell на ReUI Frame; новые экраны не копируют Card-shell.
 
 ## Обязанности
 
-- Сравнить **каждое** спорное UI-решение в изменениях с тем, как сделано на `/servers`.
-- Требовать **переиспользование** существующих компонентов/обёрток из этой зоны, если они покрывают задачу.
+- Сравнить **каждое** спорное UI-решение: CRUD — с `/servers`; оболочка — с Frame+DataGrid.
+- Требовать **переиспользование** существующих компонентов/обёрток, если они покрывают задачу.
 
 ## Правила
 
-- **Нельзя** принимать UI, который **системно расходится** с `/servers` без явной технической необходимости (которую нужно назвать).
+- **Нельзя** принимать новый Card page-shell без явной технической необходимости (назвать её).
 - **Нельзя** предлагать «новый стиль» ради вариации — только выравнивание с эталоном или расширение существующих примитивов.
 
 ## Формат вывода (строго)
 
-1. **Несоответствия** эталону (конкретно: что именно отличается).
+1. **Несоответствия** эталону (конкретно: CRUD vs Frame-shell).
 2. **Обязательные правки** (что поменять).
-3. **Что переиспользовать** с `/servers`: файлы/компоненты и паттерн.
+3. **Что переиспользовать**: файлы/компоненты и паттерн.
 
-Если расхождений нет — явно: **«Расхождений с эталоном /servers не выявлено»** и кратко перечисли проверенные аспекты.
+Если расхождений нет — явно: **«Расхождений с эталоном CRUD /servers и Frame+DataGrid не выявлено»** и кратко перечисли проверенные аспекты.
 
 ## Граница ответственности
 
-- Не дублируй полный код-ревью Implementer/Reviewer: фокус только на **консистентности с /servers** и **reuse** UI.
+- Не дублируй полный код-ревью Implementer/Reviewer: фокус только на **консистентности** и **reuse** UI.

.cursor/rules/next-shadcn-production.mdc

@@ -16,11 +16,12 @@ alwaysApply: true
 - Решения сверять с **официальной** документацией Next.js и shadcn/ui (актуальные версии проекта).
 - Не выдумывать API и «недокументированные» паттерны; предпочитать стабильные, описанные в доках решения.
 
-## 2. Эталон UI/UX: страница `/servers` (критично)
+## 2. Эталон UI/UX: `/servers` (CRUD) + Frame+DataGrid (оболочка)
 
-- **`app/(main)/servers`** (и связанные компоненты) — **главный эталон** дизайна и поведения.
-- Выравнивать: layout, отступы, сетку, типографику, структуру компонентов, паттерны взаимодействия.
-- Переиспользовать оттуда же компоненты и паттерны; **не вводить новый UI-паттерн**, если эквивалент уже есть на `/servers`.
+- **`app/(main)/servers`** — эталон **поведения** CRUD: фильтры, сортировка, пагинация, диалоги, формы, плотность.
+- **Оболочка ops-списков / dashboard / KPI:** **ReUI Frame + DataGrid**, не shadcn `Card` как page shell. Preview: [frame](https://reui.io/docs/components/base/frame) · [data-grid](https://reui.io/docs/components/base/data-grid) · [stats-12](https://reui.io/preview/base/stats-12) · [icon-tile](https://reui.io/docs/components/base/icon-tile).
+- `DataPageCard` — ops list shell на ReUI Frame (`components/data-page-card.tsx`). Внутренние панели — `OpsPanel` / Frame, не shadcn Card как page shell.
+- Переиспользовать паттерны `/servers` для CRUD; **не** вводить Card-grid как новый SoT.
 
 ## 3. Большой репозиторий (критично)
 
@@ -50,7 +51,7 @@ alwaysApply: true
 
 В ответе явно указать:
 
-- **Почему** это согласуется с Next.js, shadcn/ui и эталоном **`/servers`**.
+- **Почему** это согласуется с Next.js, shadcn/ui, CRUD `/servers` и оболочкой Frame+DataGrid.
 - **Server vs Client Component** и обоснование.
 - Что **переиспользовано** из проекта (паттерны/компоненты).
 - Какие **файлы проанализированы**.
@@ -68,7 +69,7 @@ alwaysApply: true
 
 1. **Шаг 0:** список проанализированных файлов.
 2. **Шаг 1:** что изменено.
-3. **Шаг 2:** почему (Next.js + shadcn/ui + `/servers` + паттерны кодовой базы).
+3. **Шаг 2:** почему (Next.js + shadcn/ui + CRUD `/servers` + Frame+DataGrid + паттерны кодовой базы).
 4. **Шаг 3:** анализ влияния (что ещё затронуто).
 5. **Шаг 4:** код (диффы или несколько файлов).
 6. **Шаг 5:** проверка dev/консоли (ошибки, предупреждения, исправления).
@@ -80,4 +81,4 @@ alwaysApply: true
 
 ## Цель
 
-Вести себя как **senior** в production-кодовой базе: консистентность, переиспользование, выравнивание с `/servers`, безопасные масштабируемые изменения по best practices Next.js и shadcn/ui, готовый к продакшену код без ошибок сборки/рантайма по возможности.
+Вести себя как **senior** в production-кодовой базе: консистентность, переиспользование, CRUD как на `/servers`, оболочка Frame+DataGrid (не Card-shell), безопасные масштабируемые изменения по best practices Next.js и shadcn/ui, готовый к продакшену код без ошибок сборки/рантайма по возможности.

.cursor/rules/release-versioning.mdc

@@ -29,7 +29,11 @@ alwaysApply: true
 
 ## Minor (`1.x.0`)
 
-`feat:`, `feat!`, footer `BREAKING CHANGE` — только для заметного core-функционала.
+`feat:` — новая пользовательская возможность.
+
+## Major (`2.0.0` после `1.x`)
+
+`тип!:`, `тип(scope)!:` или footer `BREAKING CHANGE:` / `BREAKING-CHANGE:` повышают major, обнуляя minor и patch. При смешанной истории major имеет приоритет над minor и patch. Версия, тег, manifest и Docker tags вычисляются CI; package.json вручную не меняется. Для согласованного перехода на вторую основную версию используется `chore(release)!:` с русским описанием.
 
 ## Примеры
 

.cursor/rules/reui.mdc

@@ -0,0 +1,73 @@
+---
+description: Use the ReUI registry (blocks, primitives, icons) correctly
+globs: ["**/*.tsx","**/*.ts"]
+alwaysApply: false
+---
+
+---
+name: reui
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 22 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 `fe6742e29c`.** 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 22 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
+
+The skill is free and this MCP is free to use; it just needs a ReUI account. On first use your agent opens a browser "Sign in with ReUI" prompt (a free account is created if you don't have one). Free covers components and examples with a daily request allowance; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the limit (see [rules/registry.md](./rules/registry.md)). The same account and skill work in every agent and service the MCP connects to - this skill is agent-agnostic.
+
+Skill + MCP are a team: this skill is the workflow (how to find, install, read the API, and adapt by reuse); the MCP is the live data and the hands (search, get_component, install commands). Your job: find the right item, install it with the shadcn CLI, read its real API, and **adapt by reuse** - wire real data and theme it; do not hand-roll or restyle what ReUI already provides. This skill **layers on the shadcn skill**: follow that for generic rules (spacing, `cn()`, semantic colors, forms); follow this for everything ReUI-specific.
+
+## The core loop (MCP-native)
+
+1. **Find** - call the ReUI MCP `search` tool with the user's intent. It returns a ranked, scored list across components/examples/blocks/icons, each with an `install` command, `previewUrl`, `docsUrl`, and `componentsUsed`. Pass hints (`type`, `component`, `category`, `features`, `free`) when you can infer them.
+2. **Install** - run the returned command non-interactively (`npx shadcn@latest add @reui/<name> --yes`). The CLI resolves deps, aliases, and the base/style from `components.json`. See [cli.md](./rules/cli.md).
+3. **Read the API (on your base)** - first note your base from `components.json` -> `style` (`base-nova` -> Base UI, `radix-nova` -> Radix UI). For each component an item uses, call `get_component(name)` and read its **inline `api`** (no web fetch); then `get_examples(name)` to install a worked example and copy its composition - the installed files are already in your base. Whenever you work with a component's API, also **share its `docsUrl`** (the primitive's API documentation page) with the user so they have the full reference. See [components.md](./rules/components.md).
+4. **Adapt (reuse-first)** - swap demo data for real data, fix icon imports, align tokens. Do not redesign. See [adapting.md](./rules/adapting.md).
+
+**Always show the preview.** Every item a tool returns carries a `previewUrl` (a live preview page). Whenever you list, recommend, or present ReUI items to the user - blocks, components, examples, or icons, whether from `search`, `search_icons`, `list_components`, `compose_page`, or any getter - include each item's `previewUrl` so they can SEE it before installing. Blocks and examples open an individual live preview; icons and components link to their live category/component page. Never present an item without its preview link.
+
+If the ReUI MCP is not configured, fall back to `npx shadcn@latest search @reui -q "..."` then `add` - but the MCP gives scored matches + inline APIs; prefer it.
+
+## Commands
+
+Run ReUI as explicit slash commands (via the ReUI MCP) **or** just ask in plain language - both run the same workflow.
+
+| Command     | Invoke                         | Does                                                                                                               |
+| ----------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| **build**   | `/mcp__reui__build <what>`     | Compose a page/section/feature from ReUI: plan → install → read API → adapt → craft → audit.                       |
+| **add**     | `/mcp__reui__add <item>`       | Find & install one component/example/block/icon and wire it in.                                                    |
+| **fix**     | `/mcp__reui__fix [target]`     | Diagnose & fix ReUI usage: wrong/undocumented props, base/radix mismatch, missing states, a11y/scroll.             |
+| **improve** | `/mcp__reui__improve [target]` | Refine + extend existing ReUI UI to a production-exceptional bar (hierarchy, density, states, responsive, motion). |
+
+Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor/Windsurf, `/mcp.reui.build` in VS Code). No command surface? Just describe what you want - this skill drives the identical loop.
+
+## When to reach for ReUI vs plain shadcn
+
+| Need                                                                 | Reach for                                                                 |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| A full page or section (dashboard, billing, auth, pricing, settings) | `compose_page` first (plans sections + best blocks), then ReUI **blocks** |
+| A data table with sorting/filtering/pagination/virtualization        | the **data-grid** component (never hand-roll a `<table>`)                 |
+| A drag-and-drop board                                                | the **kanban** component                                                  |
+| Advanced column filtering, date range, tree, stepper, ...            | the matching ReUI **component**                                           |
+| A single generic control already in shadcn (Button, Dialog, Select)  | plain **shadcn**                                                          |
+
+## Detailed references
+
+- [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 22 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)
+- [rules/styling.md](./rules/styling.md) - ReUI extended tokens, theme adaptation, density
+- [rules/icons.md](./rules/icons.md) - portable icons, swapping imports, Motion Icons (static + animated)
+- [tools.md](./tools.md) - the ReUI MCP: golden path, the 19 tools, token rules, result shapes, errors

.cursor/skills/reui/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: reui
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 22 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 `fe6742e29c`.** 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 22 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
+
+The skill is free and this MCP is free to use; it just needs a ReUI account. On first use your agent opens a browser "Sign in with ReUI" prompt (a free account is created if you don't have one). Free covers components and examples with a daily request allowance; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the limit (see [rules/registry.md](./rules/registry.md)). The same account and skill work in every agent and service the MCP connects to - this skill is agent-agnostic.
+
+Skill + MCP are a team: this skill is the workflow (how to find, install, read the API, and adapt by reuse); the MCP is the live data and the hands (search, get_component, install commands). Your job: find the right item, install it with the shadcn CLI, read its real API, and **adapt by reuse** - wire real data and theme it; do not hand-roll or restyle what ReUI already provides. This skill **layers on the shadcn skill**: follow that for generic rules (spacing, `cn()`, semantic colors, forms); follow this for everything ReUI-specific.
+
+## The core loop (MCP-native)
+
+1. **Find** - call the ReUI MCP `search` tool with the user's intent. It returns a ranked, scored list across components/examples/blocks/icons, each with an `install` command, `previewUrl`, `docsUrl`, and `componentsUsed`. Pass hints (`type`, `component`, `category`, `features`, `free`) when you can infer them.
+2. **Install** - run the returned command non-interactively (`npx shadcn@latest add @reui/<name> --yes`). The CLI resolves deps, aliases, and the base/style from `components.json`. See [cli.md](./rules/cli.md).
+3. **Read the API (on your base)** - first note your base from `components.json` -> `style` (`base-nova` -> Base UI, `radix-nova` -> Radix UI). For each component an item uses, call `get_component(name)` and read its **inline `api`** (no web fetch); then `get_examples(name)` to install a worked example and copy its composition - the installed files are already in your base. Whenever you work with a component's API, also **share its `docsUrl`** (the primitive's API documentation page) with the user so they have the full reference. See [components.md](./rules/components.md).
+4. **Adapt (reuse-first)** - swap demo data for real data, fix icon imports, align tokens. Do not redesign. See [adapting.md](./rules/adapting.md).
+
+**Always show the preview.** Every item a tool returns carries a `previewUrl` (a live preview page). Whenever you list, recommend, or present ReUI items to the user - blocks, components, examples, or icons, whether from `search`, `search_icons`, `list_components`, `compose_page`, or any getter - include each item's `previewUrl` so they can SEE it before installing. Blocks and examples open an individual live preview; icons and components link to their live category/component page. Never present an item without its preview link.
+
+If the ReUI MCP is not configured, fall back to `npx shadcn@latest search @reui -q "..."` then `add` - but the MCP gives scored matches + inline APIs; prefer it.
+
+## Commands
+
+Run ReUI as explicit slash commands (via the ReUI MCP) **or** just ask in plain language - both run the same workflow.
+
+| Command     | Invoke                         | Does                                                                                                               |
+| ----------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| **build**   | `/mcp__reui__build <what>`     | Compose a page/section/feature from ReUI: plan → install → read API → adapt → craft → audit.                       |
+| **add**     | `/mcp__reui__add <item>`       | Find & install one component/example/block/icon and wire it in.                                                    |
+| **fix**     | `/mcp__reui__fix [target]`     | Diagnose & fix ReUI usage: wrong/undocumented props, base/radix mismatch, missing states, a11y/scroll.             |
+| **improve** | `/mcp__reui__improve [target]` | Refine + extend existing ReUI UI to a production-exceptional bar (hierarchy, density, states, responsive, motion). |
+
+Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor/Windsurf, `/mcp.reui.build` in VS Code). No command surface? Just describe what you want - this skill drives the identical loop.
+
+## When to reach for ReUI vs plain shadcn
+
+| Need                                                                 | Reach for                                                                 |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| A full page or section (dashboard, billing, auth, pricing, settings) | `compose_page` first (plans sections + best blocks), then ReUI **blocks** |
+| A data table with sorting/filtering/pagination/virtualization        | the **data-grid** component (never hand-roll a `<table>`)                 |
+| A drag-and-drop board                                                | the **kanban** component                                                  |
+| Advanced column filtering, date range, tree, stepper, ...            | the matching ReUI **component**                                           |
+| A single generic control already in shadcn (Button, Dialog, Select)  | plain **shadcn**                                                          |
+
+## Detailed references
+
+- [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 22 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)
+- [rules/styling.md](./rules/styling.md) - ReUI extended tokens, theme adaptation, density
+- [rules/icons.md](./rules/icons.md) - portable icons, swapping imports, Motion Icons (static + animated)
+- [tools.md](./tools.md) - the ReUI MCP: golden path, the 19 tools, token rules, result shapes, errors

.cursor/skills/reui/rules/adapting.md

@@ -0,0 +1,43 @@
+# Adapting installed ReUI code (reuse-first, no AI slop)
+
+ReUI items ship production-quality. Your job is to **adapt by reuse** - wire real data and fit the app - not to redesign or hand-roll. The output should look like ReUI built it for this product.
+
+## Preserve the design - don't over-customize
+
+The design IS the product. A ReUI block/component encodes senior-designer decisions: spacing, hierarchy, density, color treatment, and component choices. The fastest way to turn a premium block back into generic AI slop is to "improve" its look - so don't.
+
+- Change **data, copy, and props**; keep the **structure and styling** it ships with. Make the **smallest** change that wires the real data. If your diff touches `className` / JSX structure more than data / props, you are over-customizing - stop and reuse.
+- Don't swap ReUI components for hand-rolled ones, restructure the layout, re-skin spacing / radius / colors, or add decorative chrome. Let the installed components carry the default spacing, radius, sizing, icon rhythm, density, and state styling; add custom Tailwind only when a component genuinely lacks a contract you need.
+- Want a different look? `search` for a block whose design already fits and reuse that - don't restyle this one into a new design.
+
+## Reuse the parts: examples and the block's own elements
+
+- **Examples are building parts.** A free `c-*` example is a correct, single-pattern composition you can reuse. Before composing from scratch, `get_examples(component)`, install the closest one, and reuse its wiring - assemble UI from examples instead of hand-rolling what an example already shows.
+- **Reuse a block's own elements.** Need more rows, cards, items, or sections than ship by default? Repeat the block's **existing** element by mapping real data through the same markup - never invent parallel markup that drifts from its design. Need a variant (empty / loading / expanded)? Derive it from an element the block already has.
+
+## Don't invent (read, don't guess)
+
+- Never write a prop, variant value, import path, or `@reui/...` name you didn't read in a component's inline `api`, an installed example, or a `search` result. If you didn't see it, treat it as nonexistent - call `get_component` / `get_examples` / `search` first, or run the MCP `validate_usage` tool to check planned names + props against the docs before writing code.
+- If a getter returns `found: false` or `search` returns nothing, say so and fall back (plain shadcn, or ask) - never fabricate an install command or an API.
+
+## What to change vs leave alone
+
+- **Change:** the item's own data, copy, props, and layout to fit the app.
+- **Leave alone:** installed component files, hooks, and the shared theme - do not edit vendored ReUI internals; change behavior through props and the documented API.
+- Blocks are **portable React** - no `next/link`, `next/image`, or other framework-runtime imports inside them. Keep them portable.
+
+## Demo data -> real data
+
+- Replace every placeholder with the user's real data. Model it as **typed data structures** and **map over arrays** - never duplicate JSX per row/card. Keep small block-specific formatters next to the data.
+- Wire the real source (columns, fields, fetch). For `data-grid`, implement the server fetch contract if the user needs server-side data.
+- **Type from the component API, derive during render.** Type domain state through the component's own types - e.g. map status to `BadgeProps["variant"]` via a typed `Record<Status, …>` - instead of stringly-typed values. Compute view state during render; don't mirror derived data into `useState`/`useEffect`.
+- **Adapt on the right base.** Use the API for the project's base (Base UI vs Radix - see [components.md](./components.md)); the installed files are already base-correct, so reuse their shape rather than translating from memory.
+
+## Believable content (no AI tells)
+
+- Use realistic labels, counts, timestamps, and statuses that map to a real workflow.
+- No decorative buttons, fake tabs, meaningless toggles, equal-weight card walls, empty gradients, ornamental icons, or generic SaaS filler. Every element should do something.
+
+## Operational surfaces (settings / profile / admin)
+
+Pick ONE archetype and keep the family consistent: a vertical rail (3-6 sections), horizontal tabs (5-8), or a frame/stack. Prefer `frame` for tool-like surfaces, a card for profile-like ones. Don't mix archetypes in one surface.

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

@@ -0,0 +1,60 @@
+# CLI: registry setup, license, non-interactive install
+
+## Registry setup (one-time, per project)
+
+Free items (the 22 components and all `c-*` examples) need only the plain string registry in `components.json`:
+
+```json
+{ "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
+```
+
+Premium items (blocks; Motion Icons and templates) require a ReUI license at install:
+
+1. Add the key to `.env.local`:
+
+```bash
+REUI_LICENSE_KEY=your-license-key
+```
+
+2. Switch `components.json` to the authenticated object form:
+
+```json
+{
+  "registries": {
+    "@reui": {
+      "url": "https://reui.io/r/{style}/{name}.json",
+      "headers": { "Authorization": "Bearer ${REUI_LICENSE_KEY}" }
+    }
+  }
+}
+```
+
+The shadcn CLI expands `${REUI_LICENSE_KEY}` from `.env.local` inside `components.json`, but an MCP client config never expands variables, so a ReUI MCP server config must carry the raw token instead (for example `reui_pat_your_token_here`).
+
+The MCP `get_project_context` tool returns the right config. Full guide: https://reui.io/docs/registry?ref=skill
+
+## Installing
+
+Use the project's package runner (check `packageManager`):
+
+```bash
+npx shadcn@latest add @reui/<name> --yes      # npm
+pnpm dlx shadcn@latest add @reui/<name> --yes  # pnpm
+bunx --bun shadcn@latest add @reui/<name> --yes # bun
+```
+
+`--yes` skips confirmation prompts. The CLI auto-detects the package manager from the lockfile (there is no `--package-manager` flag). It also resolves the correct base+style variant from `components.json`, so do not pass a style.
+
+## Handling prompts and conflicts
+
+- **Always pass `--yes`** so the CLI does not block on confirmation prompts.
+- **Do NOT pass `--overwrite` by default.** If the CLI reports an existing file, read the output and resolve deliberately: install under a different name, adjust the path, or ask the user. Only use `--overwrite` when the user explicitly wants to replace a file.
+- **Preview first when touching an existing project**: `npx shadcn@latest add @reui/<name> --dry-run` shows what would change; `--diff <file>` shows a specific file's diff. Use these before overwriting.
+- Run from the **project root** so `components.json` and `.env.local` are found.
+
+## Free vs premium boundary
+
+- Public, no key: `c-*` examples and the 22 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?ref=skill (their key) or https://reui.io/pricing?ref=skill (upgrade).

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

@@ -0,0 +1,428 @@
+# ReUI components
+
+The 22 ReUI building blocks: `alert`, `autocomplete`, `badge`, `cascader`, `code-block`, `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 v9. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
+
+- 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 = useTable({
+  features: dataGridFeatures,
+  data,
+  columns,
+})
+
+<DataGrid table={table} recordCount={data.length}>
+  <DataGridTable />
+</DataGrid>
+```
+
+Common mistakes:
+
+- **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 primitive's `DataGridColumnMeta` (e.g. `cellClassName`, `headerTitle`), set through the bundle's `columnMeta` slot.
+
+## event-calendar
+
+**Required:** events via `events`/`onEventsChange` (controlled) or `defaultEvents` (uncontrolled), plus a height on the root.
+**Shape:**
+
+```tsx
+<EventCalendar defaultEvents={events} defaultView="month" className="h-[560px]">
+  <EventCalendarNav />
+  <EventCalendarContent />
+</EventCalendar>
+```
+
+**Gotcha:** headless-first: `EventCalendarContent` renders the active view (month/week/day/days/agenda; a resource view activates when `resources` is passed) - there is no per-view JSX to compose. Events are `{ id, title, start, end (exclusive), allDay?, color?, recurrence?, resourceId? }`. Mutations flow through `onEventUpdate`/`canDropEvent` (return `false` to reject); the root needs an explicit height because it is a min-h-0 flex column.
+
+## gantt
+
+**Required:** `resources` (the left tree) plus bars via `events`/`defaultEvents` attached by `resourceId`.
+**Shape:**
+
+```tsx
+<Gantt defaultEvents={bars} resources={tasks} defaultScale="month" className="h-[480px]">
+  <GanttNav />
+  <GanttView />
+</Gantt>
+```
+
+**Gotcha:** bars move along the time axis only (never across rows) and are all-day spans with exclusive `end`; `progress` is 0-100. Scales are `day | week | month | quarter | year`. Zoom control, infinite scroll, summary rollups, and row checkboxes are ON by default - turn off what you do not need. Same `onEventUpdate`/`canDropEvent` commit pipeline as `event-calendar`; the root needs an explicit height.
+
+## kanban
+
+**Required:** `value` (`Record<string, T[]>`), `onValueChange`, `getItemValue`
+**Shape:**
+
+```tsx
+<Kanban value={cols} onValueChange={setCols} getItemValue={(i) => i.id}>
+  <KanbanBoard>
+    {Object.entries(cols).map(([id, items]) => (
+      <KanbanColumn key={id} value={id}>
+        <KanbanColumnHandle><h3>{id}</h3></KanbanColumnHandle>
+        <KanbanColumnContent value={id}>
+          {items.map((i) => (
+            <KanbanItem key={i.id} value={i.id}>
+              <KanbanItemHandle>{i.title}</KanbanItemHandle>
+            </KanbanItem>
+          ))}
+        </KanbanColumnContent>
+      </KanbanColumn>
+    ))}
+  </KanbanBoard>
+  <KanbanOverlay><div className="bg-muted size-full rounded-md" /></KanbanOverlay>
+</Kanban>
+```
+
+**Gotcha:** state is `Record<columnId, T[]>`. Each `KanbanColumnContent value` must match its parent `KanbanColumn value`. Omit `KanbanOverlay` and the drag preview silently breaks.
+
+## sortable
+
+**Required:** `value` (`T[]`), `onValueChange`, `getItemValue`
+**Shape:**
+
+```tsx
+<Sortable value={items} onValueChange={setItems} getItemValue={(i) => i.id}>
+  {items.map((i) => (
+    <SortableItem key={i.id} value={i.id}>
+      <SortableItemHandle><GripVertical /></SortableItemHandle>
+      {i.label}
+    </SortableItem>
+  ))}
+</Sortable>
+```
+
+**Gotcha:** a flat 1D reorder list (not columns - that is `kanban`). `getItemValue` must return a stable, unique string. Pass `layout="grid"` or `layout="nested"` for non-list layouts.
+
+## filters
+
+**Required:** `fields` (`FilterField[]`). The value is ONE `FilterQuery` tree - `query` + `onQueryChange`, or uncontrolled `defaultQuery`.
+**Shape:**
+
+```tsx
+const fields: FilterField[] = [
+  { id: "title", label: "Title", type: "text" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "archived", label: "Archived" },
+    ],
+  },
+]
+const [query, setQuery] = useState<FilterQuery>(() => createFilterQuery())
+
+<Filters fields={fields} query={query} onQueryChange={setQuery} />
+```
+
+**Gotcha:** the state is a TREE, not a list of chips. `FilterQuery` is a group of rules joined by `and`/`or` and a group may hold another group, so `(A and B) or C` is expressible; a rule is `{ id, type: "rule", path: ["status"], operator, value }` and `path` is the whole nested attribute path, root first. The pre-rewrite API is GONE: there is no `filters`/`onChange` prop, no `FilterFieldConfig` (fields are `FilterField`, nested through their own `fields`, keyed `id` not `key`), and no `createFilter()` - it minted ids inside a pure function and broke hydration, so ids now come from `createFilterIdFactory(seed)` seeded off `useId`, and `createFilterQuery()` / `createFilterRule()` take one. Read the query back with `flattenFilterConditions` (`{ path, field, operator, values, negated }` per rule, incomplete rules skipped) and walk the tree yourself when the parentheses carry meaning - the primitive compiles nothing, no SQL, no query string.
+
+`variant` picks the chrome over that one query: `"basic"`, the default, is the flat chip row for a toolbar over a table; `"advanced"` is the condition builder, hung off a trigger or rendered in place with `advancedMode="inline"`. Both read and write the same tree, so a saved view built in one opens in the other. Other props worth knowing before you hand-roll them: `size` is two rungs, `"sm" | "default"`, resolved per style (there is no `lg`); `reorderable` turns on drag and Alt+Arrow row moves in the builder; `onBeforeQueryChange` is the ONE veto point for every write (return `false` to refuse, it cannot rewrite); `editors` registers custom value editors a field selects by `editor` name; `labels` / `operatorLabels` own every rendered string; `pathCollapse` + `maxPathSegments` shorten deep attribute paths; `renderChip` / `renderValue` / `renderEmpty` replace rendered parts. On a field, `loadOptions` supplies async options with paging and `resolveValues` renders a chip restored from a saved view whose option was never loaded. Pairs naturally with `data-grid`.
+
+## cascader
+
+**Required:** `items` (a tree of `{ value, label, children? }`), plus the panel parts inside `CascaderContent`.
+**Shape:**
+
+```tsx
+<Cascader items={items} value={value} onValueChange={setValue}>
+  <CascaderTrigger render={<Button variant="outline" />}>
+    <CascaderValue placeholder="Select an attribute" />
+  </CascaderTrigger>
+  <CascaderContent className="w-80">
+    <CascaderPanel>
+      <CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderInput />
+      </CascaderNav>
+      <CascaderEmpty />
+      <CascaderList maxHeight={288}>
+        <CascaderItems />
+      </CascaderList>
+      <CascaderStatus />
+    </CascaderPanel>
+  </CascaderContent>
+</Cascader>
+```
+
+**Gotcha:** pressing a branch NAVIGATES, it does not select - only leaves are selectable until you pass `selectable="any"` or a predicate, and once a branch is selectable its chevron becomes the only way to open it. `CascaderInput` must stay inside `CascaderContent` (Base UI refills the query from the selection when the input sits outside the popup). Always include `CascaderStatus`: it is the live region announcing level changes, which the visual breadcrumb does not provide to screen readers. Accepts a flat adjacency list via `getParent` as well as nested `children`. `searchScope="deep"` searches every level and annotates results with their path; `multiple` gives checkbox rows; `inline` + a bare `CascaderPanel` embeds it with no popover.
+
+The shape above is `mode="drill"`, the default. `mode="tree"` keeps the same parts (drop `CascaderBreadcrumb`, pass `showBack={false}`, drive expansion with `expanded`/`onExpandedChange`); `mode="columns"` REPLACES `CascaderList` + `CascaderItems` with a single `CascaderColumns`, and has no breadcrumb. Other props worth knowing before you hand-roll them: `cascade` (multi-select only, parent/child selection with indeterminate branches - pair it with `selectable="any"`, since a leaf-only tree can never cascade), `indicator={false}` to drop the single-select check and its gutter (visual only, no-op with `multiple`), `virtualize`/`virtualizeThreshold` plus `CascaderVirtualItems` for long levels, and `getChildren` for async levels with cursor paging, retry on failure and optional `prefetch`. `CascaderFooter` pins commands below the list (`actions` is the quick path) and `CascaderSubmenu` opens one as a side-anchored flyout with the full menu keyboard model. To head a run of rows use `CascaderGroup` wrapping a `CascaderLabel` - a bare label inside a listbox names nothing and is dropped from the accessibility tree - and `CascaderSeparator` for the rule between runs. Every rendered string comes from `labels`, and the panel is RTL-correct under a `DirectionProvider` or `dir="rtl"`.
+
+## date-selector
+
+**Required:** none, but wire `onChange` to capture the value.
+**Shape:**
+
+```tsx
+const [value, setValue] = useState<DateSelectorValue | undefined>()
+
+<DateSelector value={value} onChange={setValue} label="Due date" />
+```
+
+**Gotcha:** the value is a structured `DateSelectorValue` (period / operator / start+end dates), NOT a `Date` - never pass a raw `Date`. Use `allowRange={false}` to lock single-date picking. Read `get_component("date-selector")` for the value shape.
+
+## tree
+
+**Required:** `tree` (a `@headless-tree/core` instance you construct)
+**Shape:**
+
+```tsx
+<Tree tree={tree}>
+  {tree.getItems().map((item) => (
+    <TreeItem key={item.getId()} item={item}>
+      <TreeItemLabel />
+    </TreeItem>
+  ))}
+</Tree>
+```
+
+**Gotcha:** `Tree` is a styled shell - it takes a headless-tree instance via `tree`, NOT `data`/`items` props. Build the instance with `@headless-tree/react`. External API: https://headless-tree.lukasbach.com/
+
+## stepper
+
+**Required:** `StepperItem step` (number), `StepperContent value` (number)
+**Shape:**
+
+```tsx
+<Stepper defaultValue={1}>
+  <StepperNav>
+    <StepperItem step={1}>
+      <StepperTrigger><StepperIndicator>1</StepperIndicator></StepperTrigger>
+      <StepperSeparator />
+    </StepperItem>
+    <StepperItem step={2}>
+      <StepperTrigger><StepperIndicator>2</StepperIndicator></StepperTrigger>
+    </StepperItem>
+  </StepperNav>
+  <StepperPanel>
+    <StepperContent value={1}>Step 1 content</StepperContent>
+    <StepperContent value={2}>Step 2 content</StepperContent>
+  </StepperPanel>
+</Stepper>
+```
+
+**Gotcha:** steps are 1-indexed. Without `StepperPanel` + `StepperContent` you render the nav trail but no body. Put `StepperSeparator` in every `StepperItem` except the last.
+
+## timeline
+
+**Required:** `TimelineItem step` (number)
+**Shape:**
+
+```tsx
+<Timeline>
+  <TimelineItem step={1}>
+    <TimelineHeader>
+      <TimelineDate>March 2024</TimelineDate>
+      <TimelineTitle>Project initialized</TimelineTitle>
+    </TimelineHeader>
+    <TimelineIndicator />
+    <TimelineSeparator />
+    <TimelineContent>Repo and architecture set up.</TimelineContent>
+  </TimelineItem>
+</Timeline>
+```
+
+**Gotcha:** each item needs a unique `step`. `orientation` is `"vertical"` (default) or `"horizontal"`. This is a static event display, not interactive like `stepper`.
+
+## autocomplete
+
+**Required:** `items` (array; each item has at least `value`)
+**Shape:**
+
+```tsx
+<Autocomplete items={items}>
+  <AutocompleteInput placeholder="Search..." />
+  <AutocompleteContent>
+    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
+    <AutocompleteList>
+      {(item) => (
+        <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>
+      )}
+    </AutocompleteList>
+  </AutocompleteContent>
+</Autocomplete>
+```
+
+**Gotcha:** `AutocompleteList` takes a render-prop `(item) => ReactNode`, NOT a mapped array of children. External API: https://base-ui.com/react/components/autocomplete
+
+## phone-input
+
+**Required:** none, but wire `onChange`.
+**Shape:**
+
+```tsx
+<PhoneInput placeholder="Enter phone number" defaultCountry="US" value={value} onChange={setValue} />
+```
+
+**Gotcha:** `value`/`onChange` use an E.164 string (e.g. `"+14155551234"`), not a display-formatted string; `onChange` can fire `undefined`. `defaultCountry` is a 2-letter ISO code. Wraps `react-phone-number-input`.
+
+## number-field
+
+**Required:** wrap the controls in `NumberFieldGroup`.
+**Shape:**
+
+```tsx
+<NumberField defaultValue={0}>
+  <NumberFieldScrubArea label="Quantity" />
+  <NumberFieldGroup>
+    <NumberFieldDecrement />
+    <NumberFieldInput />
+    <NumberFieldIncrement />
+  </NumberFieldGroup>
+</NumberField>
+```
+
+**Gotcha:** import from `@/components/ui/number-field`. The accessible label goes on `NumberFieldScrubArea`, not `NumberField`. External API: https://base-ui.com/react/components/number-field
+
+## rating
+
+**Required:** `rating` (number)
+**Shape:**
+
+```tsx
+<Rating rating={4.5} showValue editable onRatingChange={setRating} />
+```
+
+**Gotcha:** supports decimals (partial stars). Pass `editable` + `onRatingChange` for interactive input; omit both for a read-only display.
+
+## scrollspy
+
+**Required:** `targetRef` (the scroll container ref)
+**Shape:**
+
+```tsx
+<Scrollspy targetRef={containerRef}>
+  <a href="#s1" data-scrollspy-anchor="s1">Section 1</a>
+  <a href="#s2" data-scrollspy-anchor="s2">Section 2</a>
+</Scrollspy>
+<div ref={containerRef}>
+  <div id="s1">...</div>
+  <div id="s2">...</div>
+</div>
+```
+
+**Gotcha:** each link's `data-scrollspy-anchor` must match a section `id`. `targetRef` is the scrollable container (defaults to the window).
+
+## frame
+
+**Required:** `Frame` > `FramePanel`
+**Shape:**
+
+```tsx
+<Frame>
+  <FramePanel>
+    <FrameHeader>
+      <FrameTitle>Title</FrameTitle>
+      <FrameDescription>Description</FrameDescription>
+    </FrameHeader>
+    <div className="p-5">Content</div>
+    <FrameFooter>Footer</FrameFooter>
+  </FramePanel>
+</Frame>
+```
+
+**Gotcha:** a structured card shell for tool-like surfaces. `stacked` connects multiple panels with shared borders; `dense` removes panel padding; radius via the `--frame-radius` CSS variable.
+
+## icon-stack
+
+**Required:** one child icon
+**Shape:**
+
+```tsx
+<IconStack aria-hidden="true">
+  <InboxIcon className="size-4" />
+</IconStack>
+```
+
+**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.
+
+## code-block
+
+**Required:** `code` + `language`, or pre-highlighted `lines`.
+**Shape:**
+
+```tsx
+<CodeBlock code={code} language="tsx" />
+
+<CodeBlock code={code} language="tsx" showLineNumbers maxLines={20}>
+  <CodeBlockHeader>
+    <CodeBlockTitle>use-totals.ts</CodeBlockTitle>
+    <CodeBlockLanguage />
+    <CodeBlockCopyButton className="ml-auto" />
+  </CodeBlockHeader>
+  <CodeBlockExpandButton />
+</CodeBlock>
+```
+
+**Gotcha:** the one-liner is already a complete block; every child (header, title, language label, copy button, wrap toggle, expand button, line actions) is optional chrome, at any depth. Shiki is the only npm dependency and loads lazily, one chunk per language, on first highlight; `lines` (from `highlightCode` in `code-block-highlight`, which is server-safe and has no `"use client"`) or `highlight={false}` loads nothing at all. `maxLines` caps the height AND marks the block collapsible, which is what makes `CodeBlockExpandButton` appear. Use `variant="ghost"` when the block sits inside a surface that already has a border.
+
+## alert
+
+**Required:** `Alert` > `AlertTitle`
+**Shape:**
+
+```tsx
+<Alert variant="success">
+  <ShieldCheckIcon />
+  <AlertTitle>Security update</AlertTitle>
+  <AlertDescription>Enable two-factor authentication.</AlertDescription>
+  <AlertAction><Button size="xs">Update</Button></AlertAction>
+</Alert>
+```
+
+**Gotcha:** shadcn-compatible API. `variant`: `default | destructive | info | success | warning | invert`. The non-default variants use ReUI extended color tokens (`--success`/`--info`/`--warning`/`--invert`), which the install adds. Defer generic alert rules to the shadcn skill.
+
+## badge
+
+**Required:** none (text child).
+**Shape:**
+
+```tsx
+<Badge variant="success-light" size="sm">Success</Badge>
+<Badge variant="outline" radius="full">Pill</Badge>
+```
+
+**Gotcha:** shadcn-compatible. Rich `variant` set (solid, `-outline`, `-light` per color), `size` `xs..xl`, `radius` `default | full`. Like `alert`, the color variants rely on ReUI extended tokens. Prefer `Badge` variants over raw color classes for statuses.
+
+## base vs radix - write for the project's base
+
+ReUI ships every component in two builds: `base` (Base UI) and `radix` (Radix UI). The install command and name are identical, and the CLI installs the build matching the project. But you must write/adapt code against the **right base**, because their APIs differ.
+
+**Detect the base first.** Read `components.json` -> `style` and take the segment before the first `-`:
+
+- `"style": "base-nova"` -> **Base UI**
+- `"style": "radix-nova"` -> **Radix UI**
+
+**Then use that base's API.** The deltas mirror shadcn's base-vs-radix split:
+
+- Slot/composition: Base UI `render={<… />}` vs Radix `asChild`.
+- `Select`: Base UI takes `items`; Radix uses `<SelectItem>` children.
+- `ToggleGroup`: Base UI `multiple` boolean vs Radix `type="single" | "multiple"`.
+
+The safest path is to **read the installed files and `c-*` examples** - they're already in your base, so reuse their wiring instead of guessing. When `get_component`'s inline `api` or an example shows the other base's shape, translate it to your base (or `validate_usage` to confirm). Defer the generic base/radix mechanics to the shadcn skill.

.cursor/skills/reui/rules/craft.md

@@ -0,0 +1,45 @@
+# Craft: make ReUI UI exceptional, not generic
+
+ReUI items ship senior-designer quality. Your adaptation has to hold that bar, so the result reads like a real product surface a team would keep - not a wireframe an AI generated. Use these alongside the reuse rules in [adapting.md](./adapting.md).
+
+## Have a point of view
+
+Pick an emotional register before you compose - calm, operational, premium, editorial, dense, energetic - and let layout, spacing, surface treatment, and icon behavior all reinforce it. One or two memorable decisions and restraint everywhere else beats ten generic ones. UI with no point of view reads as generated.
+
+## Brutally clear hierarchy
+
+One focal point per card or panel: the dominant metric or task first, its label second, supporting detail third. The first thing the eye lands on should be the right thing; secondary text must read as secondary. Borders, separators, and surfaces do real work to create 2-3 information bands - don't flatten everything to equal weight.
+
+## Spacing rhythm and deliberate density
+
+Gaps are a signal, not a default. Keep them intentional and consistent within a family (`gap-1`/`gap-2` for tight operational rows, larger gaps for section breaks), and smaller within a group than between groups. Match the surrounding ReUI density; don't pad an operational surface like a marketing page, and don't drift density mid-section. The composition should still feel authored in grayscale.
+
+## Cover the real states (the usual miss)
+
+A surface isn't done at the happy path. Compose, and wire:
+
+- **Empty** - a purposeful empty state (short message + the primary action), never a blank panel.
+- **Loading** - a **skeleton** that matches the real layout, not a centered spinner.
+- **Error** - an inline, recoverable error with a retry, announced via `role="status"`/`aria-live`.
+
+Derive these from an element the block already has (don't invent parallel markup), or `get_examples` for a state-specific example.
+
+## Responsive by default
+
+Mobile-first, not mobile-afterthought. In constrained rows/cards/sidebars, put `min-w-0` on the shrinking container and `truncate` long single-line labels; protect the primary label's width and let secondary content compress. Reflow layouts (multi-column -> single column) rather than just shrinking them. Desktop and mobile should both look designed.
+
+## Motion, subtly
+
+Motion should clarify, not decorate. Use ReUI Motion Icons on primary actions for a subtle hover cue; keep transitions short (~200-300ms) with calm easing; prefer a skeleton pulse over a spinner. No bouncing, no gratuitous entrance animations on every element.
+
+## Real, activated content
+
+Use believable, typed data (realistic labels, counts, timestamps, statuses that map to a real workflow) - never lorem or abstract filler. Every visible control does something: no decorative buttons, fake tabs, meaningless toggles, or stats with no job. It must still hold with long names, empty values, and crowded data.
+
+## Avoid the AI tells
+
+These instantly read as generated - don't ship them: equal-weight card walls, empty gradients, repetitive padding everywhere, generic enterprise copy, ornamental icons, and number tiles that don't earn their place.
+
+## The bar
+
+Before you finish, ask: **would a product team keep this instead of replacing it? Does it still feel strong after swapping in real content?** If not, reuse the shipped ReUI design harder - don't restyle it into something new - then run the [quality.md](./quality.md) gates.

.cursor/skills/reui/rules/icons.md

@@ -0,0 +1,39 @@
+# Icons (ReUI delta over shadcn)
+
+Follow the shadcn icon rules (use the project's configured `iconLibrary`, `data-icon` on icons inside `Button`, no sizing classes on icons inside components, pass icons as component objects not string keys). ReUI adds the following.
+
+## Portable icons (library-agnostic)
+
+ReUI components, examples, and blocks are authored to be icon-library-agnostic. When `iconLibrary` is set in `components.json`, the shadcn CLI installs each item's icons in **your** library automatically - you swap nothing. If an installed item's icons don't match your project (for example `iconLibrary` isn't set, so they came in from the item's demo library), change the **import source and component name** to your library, keeping the same icon-name semantics:
+
+- `lucide` -> `lucide-react`
+- `tabler` -> `@tabler/icons-react`
+- `phosphor` -> `@phosphor-icons/react`
+- `remix` -> `@remixicon/react`
+- `hugeicons` -> `@hugeicons/react`
+
+Don't assume `lucide-react`; read `iconLibrary` from `components.json`.
+
+## Keep icons purposeful
+
+Icons support the hierarchy, they don't replace it: keep them small, matched to the surrounding density, and decorative ones `aria-hidden="true"` (an icon-only control still needs an accessible label on the control). Don't add ornamental icons that do no job.
+
+## Motion Icons (the `@reui/icons/...` set)
+
+ReUI ships its own icon set in 4 styles (outline, solid, duotone, filled), each icon in two variants:
+
+```bash
+npx shadcn@latest add @reui/icons/default/<style>/<name> --yes    # static
+npx shadcn@latest add @reui/icons/animated/<style>/<name> --yes   # hover-animated (motion/react)
+```
+
+Finding them via the MCP is free; installing requires an Ultimate license (`REUI_LICENSE_KEY`, see [cli.md](./cli.md)). Reach for a Motion Icon on a primary action when a subtle hover cue helps; keep motion restrained.
+
+Finding icons:
+
+- Several icons (the common case): **`search_icons(concepts[])`** - up to 24 concepts in one call, the best icons per concept with install commands. Pass `animated: true` to get only icons with a hover-animated Motion variant.
+- One icon: `search` with `type: "icon"`.
+- Icon results and `get_icon` carry `animated: true` and `installAnimated` when an animated variant exists - use those install strings, do not construct paths by hand.
+- Every icon result carries a `previewUrl` (its live icon-category page) - **share it with the user** so they can SEE the icon before installing.
+
+The `icon-stack` component composes multiple icons into a stacked display.

.cursor/skills/reui/rules/quality.md

@@ -0,0 +1,22 @@
+# Quality gates (security, accessibility, scroll)
+
+These are the **done gate**, not a nice-to-have: before you call any ReUI work finished, call the MCP `get_audit_checklist` tool and pass every item below (plus the craft bar in [craft.md](./craft.md)). Then typecheck and lint.
+
+## Security
+
+- Never `dangerouslySetInnerHTML`. Render data as text/components.
+- External links (`target="_blank"`) must always pair `rel="noopener noreferrer"`.
+- No real PII, secrets, or tokens in demo or committed code. Remote media only from sources the project already allows.
+
+## Accessibility
+
+- Implicit list/card items that navigate get real anchors with a standard hover affordance.
+- Icon-only or numeric buttons need an `aria-label`; decorative icons get `aria-hidden`.
+- Every non-submit button is `type="button"`.
+- Keyboard + focus: everything interactive is reachable in a sensible Tab order with a visible focus ring; layers (dialogs/sheets/menus) trap focus and close on `Escape`. ReUI components ship standard keyboard behavior - read each component's inline `api` rather than re-implementing it.
+- Announce async UI: loading and error messages use `role="status"` / `aria-live` so they're not silent to screen readers.
+
+## Scroll mechanics
+
+- Make scroll regions with a parent-owned height: a `min-h-0` + flex chain down to the scroll container. Never guess a `max-h`.
+- The scroll container owns `overflow-auto`; ancestors stay `min-h-0` so the height resolves.

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

@@ -0,0 +1,35 @@
+# ReUI registry structure
+
+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 22 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).
+
+## The @reui registry
+
+Install everything through the shadcn CLI: `npx shadcn@latest add @reui/<name> --yes`. The CLI reads the `@reui` registry from the project's `components.json`. Free items need only the plain string form:
+
+```json
+{ "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
+```
+
+Premium installs need the authenticated form + `REUI_LICENSE_KEY` in `.env.local` - see [cli.md](./cli.md). The MCP `get_project_context` tool returns the right config.
+
+## Know your base: base or radix
+
+ReUI ships every item in two builds - `base` (Base UI) and `radix` (Radix UI) - with mirrored names. The CLI installs the build matching your project automatically, but **you must write code against the right base's API**. Detect it from `components.json` -> `style`: the segment before the first `-` is the base (`base-nova` -> Base UI, `radix-nova` -> Radix UI). The installed files and `c-*` examples are already in your base - read them and adapt on that base. See [components.md](./components.md) for the API deltas.
+
+**So the MCP's own `docsUrl` and `previewUrl` match your base**, send your `style` to the MCP: add `?style=<your components.json style>` to the ReUI MCP server URL (or set an `X-Reui-Style` header) in your MCP client config - set once, applies to every call. The MCP then resolves docs/preview links to YOUR library (`/docs/components/radix/...`, `/preview/radix/...` for a radix project) instead of the default base; `get_project_context` echoes back the style it currently sees so you can confirm it. Install commands are unaffected (the CLI already installs the right variant). If you notice the MCP returning `base` links for a `radix` project, tell the user to add `?style=` to the server URL.
+
+Blocks adapt to your active theme through semantic tokens and CSS variables - change the theme and every block follows.
+
+## Free vs premium
+
+- **Free, no key:** the 22 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
+
+The canonical index of every component's API docs is **https://reui.io/llms.txt** (returned as `componentsApiUrl` in MCP results). Prefer the inline `api` from `get_component`; use the index/docs as the fallback.

.cursor/skills/reui/rules/styling.md

@@ -0,0 +1,26 @@
+# Styling (ReUI delta over shadcn)
+
+Follow the shadcn skill for the generic rules (semantic colors not raw values, `gap-*` not `space-y-*`, `size-*`, `cn()`, no manual `dark:` overrides, no overlay `z-index`). This file is only the ReUI-specific additions.
+
+## ReUI extended semantic tokens
+
+ReUI adds semantic tokens beyond shadcn's base set. Use these instead of raw colors for status and emphasis:
+
+- `--success` / `--success-foreground`
+- `--info` / `--info-foreground`
+- `--warning` / `--warning-foreground`
+- `--destructive-foreground` (paired with shadcn's `--destructive`)
+- `--invert` / `--invert-foreground` (inverted surfaces)
+
+Use them as Tailwind utilities (`bg-success text-success-foreground`, `text-warning`, ...). They are defined in the project's global CSS and registered with Tailwind (`@theme inline` on v4). If a token is missing in the project, add it to the global CSS file (never a new file) following the same `name` / `name-foreground` convention, exactly as the shadcn customization rules describe.
+
+**Incorrect:** `<span className="text-green-600">Active</span>`
+**Correct:** `<Badge variant="success">Active</Badge>` or `<span className="text-success">Active</span>`
+
+## Blocks follow your theme
+
+When you install a block it adapts to your active theme through the semantic tokens above and the project's CSS variables. Don't hardcode style-specific values into installed block code and don't fork it to "restyle" - change the theme via the CSS variables / a preset and every block follows. Want a different look? `search` for a block whose design already fits instead of re-skinning one.
+
+## Density and typography rhythm
+
+ReUI operational UI usually feels dense, not airy. Keep the gap between a title and its supporting description tight by default (`gap-0.5`, `space-y-1`, or `space-y-px`), and smaller than the gap between sections. Match the surrounding ReUI density when you add rows or fields; do not pad operational surfaces like a marketing page.

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

@@ -0,0 +1,54 @@
+# Workflow: find -> install -> read API -> adapt
+
+The core ReUI loop. The MCP tells you what to install and gives you the API; the shadcn CLI installs it; you turn the installed files into correct, themed, data-wired code by **reuse**, not redesign.
+
+## 1. Find (ReUI MCP `search` / `compose_page`)
+
+**Full multi-section page ask?** Call `compose_page(intent, sections?)` FIRST, before searching block-by-block. It returns ordered sections, each with the best block for the intent (top pick + alternates); sections listed in `unavailableSections` have no real inventory - compose those from components, do not force a bad block.
+
+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 22 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`.
+
+Example: "build a users management page with filters" -> `search({ query: "users management page with filters", type: "block", component: "data-grid", features: ["filters"] })`.
+
+Each result has `install`, `previewUrl`, `docsUrl`, `componentsUsed`, `score`, `termCoverage`, and `whyMatch`. `score` is relative to the top hit (the top is ~100 by construction), not an absolute quality - compare results to each other, and show the user the top options if several score closely; do not silently guess. A low `termCoverage` means a weak match even with a high score - rephrase or widen.
+
+**Always show the preview link.** Whenever you list or recommend items - from `search`, `search_icons`, `list_components`, `compose_page`, or a getter - include each item's `previewUrl` (a live preview page) so the user can SEE it before you install. Blocks and examples link to an individual live preview; icons and components to their live category/component page. This applies to every listing, not only a single pick.
+
+## 2. Install (shadcn CLI)
+
+Run the result's `install` command from the project root, non-interactively:
+
+```bash
+npx shadcn@latest add @reui/<name> --yes
+```
+
+The CLI reads `components.json`, installs the correct base+style variant, resolves `registryDependencies` (a block pulls in its components), installs npm deps, and rewrites aliases. Do not pass the base/style. See [cli.md](./cli.md).
+
+## 3. Read the API (do not guess props)
+
+Before writing code against any component an item uses:
+
+1. The item's `componentDigests` already give a 1-line contract per component - often enough to wire it. For the full API, call **`get_component(names)`** with ALL of `componentsUsed` in ONE call (it accepts an array) and read each inline `api` - no web fetch. **Share the component's `docsUrl`** (its 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.
+2. Call **`get_examples(name)`** for the free `c-*` examples of that component; install one and **read the added files** to copy the exact composition. This is the fastest correct path - the example shows real wiring you adapt, not invent.
+3. About to write a prop you did not see in an `api` or installed file? Run **`validate_usage`** BEFORE writing the code - per-prop documented / notDocumented verdicts plus did-you-mean suggestions. notDocumented means read the API, not push on.
+
+## 4. Adapt (reuse-first) - do not skip
+
+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 `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)).
+5. **Validate before finalizing**: if your adaptation introduced components or props you did not read in an `api` or example, run `validate_usage` on them.
+6. **Hit the craft bar** - clear hierarchy, deliberate density, the empty / loading / error states, subtle motion, and mobile-first responsiveness (see [craft.md](./craft.md)). Generic-looking output means you under-reused the design, not that it needs restyling.
+7. **Pass the quality gates** (security, a11y, scroll) - call the MCP `get_audit_checklist` tool and clear every item (see [quality.md](./quality.md)).
+8. **Typecheck / lint**.
+
+## If no single block fits
+
+Compose from components (`compose_page` tells you which sections have no block inventory via `unavailableSections`). `search` the components you need, read each `get_component` API, install a worked `get_examples` example for each, and assemble by adapting those examples. A block in the same category is a useful reference - install it and read its files to see how ReUI composes those components, then adapt.

.cursor/skills/reui/tools.md

@@ -0,0 +1,58 @@
+# ReUI MCP: full reference
+
+The ReUI MCP (`https://mcp.reui.io`, Streamable HTTP) is free to use but needs a ReUI account: on first use the agent signs in with ReUI (a free account is created if the user has none), so every request is tied to an account. Free covers components and examples; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the daily request limit. It does **discovery + guidance** (search, inline APIs, page planning, validation) and never serves source; the shadcn CLI does **installation**, and the license key lives there (the `@reui` entry in `components.json`, backed by `.env.local`). Goal: from the user's intent to correct, themed, data-wired ReUI code in the **fewest tokens and calls**, with **no guessing**.
+
+## Golden path (token-optimal - follow this order)
+
+Most tasks need 2-4 MCP calls and ZERO web fetches:
+
+1. **`search(query, ...hints)`** -> pick the top 1-3 results. Each result already carries `install`, `previewUrl`, `docsUrl`, `componentsUsed`, `score`, `whyMatch`. The payload is complete - do not call another tool just to "confirm" a result.
+2. **`get_component([...componentsUsed])`** in ONE batched call (one name or an array of up to 20) -> read each inline `api`. This **replaces** fetching docs pages. Often skippable: search responses carry `componentDigests`, a compact API contract per referenced component.
+3. **`get_examples(component)`** -> install ONE returned `c-*` example, read the added files, copy the composition.
+4. **`get_install_command(item)`** only to validate a name you are unsure of (results already include `install`). Run the install with the shadcn CLI (`--yes`).
+5. **`get_audit_checklist()`** before declaring done.
+
+If you already know the exact item name, skip `search`. Everything else is situational.
+
+## The 5 task-specific tools (when to reach for each)
+
+- **`compose_page`** - BEFORE building any full page (dashboard, settings, billing, landing). Pass the intent (and optionally the sections you want); it returns ordered sections, each with the best premium block for the intent (top pick + alternates). Sections with no real inventory are listed honestly in `unavailableSections` - compose those from components instead of forcing a bad block.
+- **`search_icons`** - whenever you need icons, especially several. Batch up to 24 concepts in one call; each concept returns its best icons with install commands. Pass `animated: true` to get only icons that have a hover-animated Motion variant.
+- **`validate_usage`** - BEFORE writing code with component names or props you have not read in an inline `api` or an installed example. It checks planned names + props against the indexed API docs and registry item names; returns did-you-mean suggestions and per-prop documented / notDocumented verdicts. Deterministic, no inference - a notDocumented prop means stop and read the API, not push on.
+- **`whats_new`** - when your registry knowledge might be stale (a name 404s, the user mentions an item you don't know). Returns items added/removed per build, newest first.
+- **`report_issue`** - when an installed item is actually broken (bad source, wrong dependency, broken preview). Goes straight to the ReUI team; rate-limited 5/hour. Not for usage questions.
+
+## All 19 tools
+
+`search`, `get_block`, `get_example`, `get_icon`, `list_block_groups`, `list_block_categories`, `list_example_categories`, `list_icon_categories`, `list_components`, `get_component`, `get_examples`, `search_icons`, `compose_page`, `validate_usage`, `whats_new`, `report_issue`, `get_install_command`, `get_project_context`, `get_audit_checklist`. The MCP serves the full parameter schemas; do not guess parameters beyond them.
+
+## Token + speed rules
+
+- **Batch `get_component`** - ONE call with the whole `componentsUsed` array, never N calls. Skip it entirely when `componentDigests` already answers the question.
+- **Read source by installing** - the MCP serves no source. To read or analyze an item's real code, install it with the shadcn CLI and open the local files. Learn an API from the inline `api` / `componentDigests`, never by reading raw source.
+- **Infer `search` hints yourself** (`type`, `component`, `category`, `features`, `free`) - hints shrink the result set and the tokens. Keep `limit` low; one right result beats ten.
+- Run independent calls (and the shadcn install) concurrently in one turn - serial tool calls are the main source of slowness.
+- Don't repeat a search for the same intent; don't call `list_*` to "see everything" - `search` is the entry point, `list_*` is only for browsing a taxonomy the user explicitly wants to explore.
+- Prefer `get_component`'s inline `api` over `docsUrl` / `/llms.txt`. Fetch a web page only as a last resort.
+
+## Result shapes (so you don't re-fetch)
+
+- `score` is 0-100 RELATIVE to the top hit (the top is ~100 by construction), not absolute - compare results to each other.
+- `termCoverage` (0-1) is the share of the query the item matched - low means a weak match even if the score looks high; rephrase or widen the search.
+- Each result carries `whyMatch`, `install`, docs/preview URLs, and a `free` flag; premium items carry `requiredPlan` (`"pro"` for blocks, `"ultimate"` for icons).
+- `componentDigests` is a top-level map: a compact API contract per referenced component - often enough to wire an item without a `get_component` call.
+- Icon results and `get_icon` include `animated: true` and `installAnimated` when a hover-animated Motion variant exists (animated: `@reui/icons/animated/<style>/<name>`; static: `@reui/icons/default/<style>/<name>`).
+
+## Error playbook
+
+- **401** - the MCP requires a signed-in ReUI account. The client prompts "Sign in with ReUI" (OAuth) on first use; a free account is created if needed. For headless/CI, pass a personal token (`reui_pat_...`, created at https://reui.io/account/mcp?ref=skill) as `Authorization: Bearer`.
+- **403 / locked result** - a valid account but the plan does not cover the item: premium blocks need Pro, Motion Icons need Ultimate. Point to https://reui.io/pricing?ref=skill (upgrade). Free accounts still get all components + examples.
+- **429** - rate limited (120 requests/min per IP); back off, honor `Retry-After`.
+- **not found** (`found: false`) - use the returned `suggestions`, or `search`; check `whats_new` if you suspect a stale name. Never run a fabricated install command.
+
+## Fallbacks
+
+- No ReUI MCP: `npx shadcn@latest search @reui -q "..."` then `add` (generic, no scoring / inline API).
+- The shadcn project's own MCP also works over the `@reui` registry: https://ui.shadcn.com/docs/mcp.
+
+Per-agent MCP setup: https://reui.io/docs/mcp?ref=skill

.gitea/workflows/docker.yml

@@ -7,8 +7,8 @@ on:
   workflow_dispatch:
 
 env:
-  REGISTRY: git.shts.su
-  GITEA_SERVER_URL: https://git.shts.su
+  REGISTRY: git.shx.one
+  GITEA_SERVER_URL: https://git.shx.one
 
 jobs:
   prepare-release:
@@ -25,6 +25,9 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Test release version calculation
+        run: node --test .ci/scripts/compute-release.test.mjs
+
       - name: Compute release metadata
         id: release
         shell: bash
@@ -38,8 +41,85 @@ jobs:
           node .ci/scripts/compute-release.mjs
           test -f .ci/release/release-manifest.json
 
+  backend-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Start PostgreSQL 18
+        shell: bash
+        run: |
+          set -euo pipefail
+          NAME="mm-pg-${{ gitea.run_id }}-${{ gitea.run_attempt }}"
+          docker rm -f "$NAME" 2>/dev/null || true
+          # Docker-backed Gitea runners execute this step in a separate container.
+          # Join its network; a published host loopback port is not reachable here.
+          NETWORKS=$(docker inspect --format '{{range $name, $network := .NetworkSettings.Networks}}{{println $name}}{{end}}' "$(cat /etc/hostname)" 2>/dev/null || true)
+          if [ -n "$NETWORKS" ]; then
+            test "$(printf '%s\n' "$NETWORKS" | wc -l)" -eq 1
+            NETWORK_ARGS=(--network "$NETWORKS" --network-alias "$NAME")
+            PG_HOST="$NAME"
+            PG_PORT=5432
+          else
+            # Host-based runners can use a Docker-assigned ephemeral host port.
+            NETWORK_ARGS=(-p 127.0.0.1::5432)
+            PG_HOST=127.0.0.1
+          fi
+          docker run -d --name "$NAME" --rm \
+            -e POSTGRES_USER=mmapp \
+            -e POSTGRES_PASSWORD=mmapp \
+            -e POSTGRES_DB=mmapp \
+            "${NETWORK_ARGS[@]}" \
+            postgres:18-alpine
+          echo "PG_CONTAINER=$NAME" >> "${GITHUB_ENV}"
+          if [ "$PG_HOST" = 127.0.0.1 ]; then
+            PG_PORT=$(docker port "$NAME" 5432/tcp | awk -F: '{print $NF}')
+          fi
+          echo "DATABASE_URL=postgres://mmapp:mmapp@${PG_HOST}:${PG_PORT}/mmapp" >> "${GITHUB_ENV}"
+          for i in $(seq 1 40); do
+            if docker exec "$NAME" pg_isready -U mmapp -d mmapp; then
+              exit 0
+            fi
+            sleep 1
+          done
+          echo "PostgreSQL не поднялся"
+          docker logs "$NAME" || true
+          exit 1
+
+      - name: Install and test backend
+        shell: bash
+        env:
+          REQUIRE_TEST_POSTGRES: "1"
+        run: |
+          set -euo pipefail
+          npm ci
+          node --input-type=module <<'NODE'
+          import pg from 'pg';
+          const pool = new pg.Pool({ connectionString: process.env.DATABASE_URL, connectionTimeoutMillis: 8000 });
+          try {
+            await pool.query('SELECT 1');
+            console.log('PostgreSQL reachable from the test process');
+          } finally {
+            await pool.end();
+          }
+          NODE
+          npm run test --prefix backend
+
+      - name: Stop PostgreSQL
+        if: always()
+        shell: bash
+        run: docker rm -f "${PG_CONTAINER:-}" 2>/dev/null || true
+
   backend-image:
-    needs: prepare-release
+    needs:
+      - prepare-release
+      - backend-test
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -61,7 +141,16 @@ jobs:
           STAGING=".ci/docker/backend"
           rm -rf "$STAGING"
           mkdir -p "$STAGING/packages/contracts" "$STAGING/backend"
-          cp package.json package-lock.json "$STAGING/"
+          cp package-lock.json "$STAGING/"
+          node <<'NODE'
+          const fs = require("node:fs")
+          const pkg = JSON.parse(fs.readFileSync("package.json", "utf8"))
+          pkg.workspaces = ["packages/*", "backend"]
+          pkg.dependencies = {}
+          pkg.devDependencies = {}
+          delete pkg.scripts
+          fs.writeFileSync(".ci/docker/backend/package.json", `${JSON.stringify(pkg, null, 2)}\n`)
+          NODE
           cp packages/contracts/package.json packages/contracts/tsconfig.json "$STAGING/packages/contracts/"
           cp -R packages/contracts/src "$STAGING/packages/contracts/"
           cp backend/package.json backend/tsconfig.json "$STAGING/backend/"
@@ -70,13 +159,14 @@ jobs:
             cp -R backend/drizzle "$STAGING/backend/"
           fi
 
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
       - name: Log in to Gitea Registry
         uses: docker/login-action@v3
         with:
-          registry: git.shts.su
+          registry: git.shx.one
           username: ${{ gitea.actor }}
           password: ${{ secrets.ACTIONS_PAT }}
 
@@ -161,7 +251,7 @@ jobs:
       - name: Log in to Gitea Registry
         uses: docker/login-action@v3
         with:
-          registry: git.shts.su
+          registry: git.shx.one
           username: ${{ gitea.actor }}
           password: ${{ secrets.ACTIONS_PAT }}
 
@@ -177,6 +267,7 @@ jobs:
             NEXT_PUBLIC_BACKEND_URL=same-origin
             NEXT_PUBLIC_DEFAULT_DATA_SOURCE=live
             NEXT_PUBLIC_ALLOW_MOCK_DATA=false
+            NEXT_PUBLIC_AUTH_PORTAL_URL=https://auth.shnt.top
             NEXT_PUBLIC_APP_VERSION=${{ needs.prepare-release.outputs.version }}
             NEXT_PUBLIC_RELEASE_URL=${{ needs.prepare-release.outputs.release_url }}
           tags: |
@@ -214,7 +305,7 @@ jobs:
       - name: Log in to Gitea Registry
         uses: docker/login-action@v3
         with:
-          registry: git.shts.su
+          registry: git.shx.one
           username: ${{ gitea.actor }}
           password: ${{ secrets.ACTIONS_PAT }}
 
@@ -325,17 +416,17 @@ jobs:
           fi
 
   notify-webhook:
-    if: ${{ secrets.DEPLOY_WEBHOOK_URL != '' }}
     needs:
       - prepare-release
       - backend-image
       - frontend-image
     runs-on: ubuntu-latest
+    env:
+      WEBHOOK_URL: ${{ secrets.DEPLOY_WEBHOOK_URL }}
     steps:
       - name: Notify deploy webhook
+        if: env.WEBHOOK_URL != ''
         shell: bash
-        env:
-          WEBHOOK_URL: ${{ secrets.DEPLOY_WEBHOOK_URL }}
         run: |
           set -euo pipefail
           curl --fail --silent --show-error --request POST \

.gitignore

@@ -31,6 +31,10 @@ pnpm-debug.log*
 
 # coverage
 coverage/
+test-results/
+playwright-report/
+test-results/
+playwright-report/
 
 # typescript
 *.tsbuildinfo
@@ -49,3 +53,12 @@ Thumbs.db
 tmp/
 temp/
 .ci/docker/
+.claude/settings.local.json
+
+# Local MCP configs (may contain REUI license Bearer)
+.cursor/mcp.json
+.mcp.json
+opencode.json
+
+# Local codegraph process
+.codegraph/daemon.pid

.opencode/skills/reui/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: reui
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 22 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 `fe6742e29c`.** 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 22 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
+
+The skill is free and this MCP is free to use; it just needs a ReUI account. On first use your agent opens a browser "Sign in with ReUI" prompt (a free account is created if you don't have one). Free covers components and examples with a daily request allowance; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the limit (see [rules/registry.md](./rules/registry.md)). The same account and skill work in every agent and service the MCP connects to - this skill is agent-agnostic.
+
+Skill + MCP are a team: this skill is the workflow (how to find, install, read the API, and adapt by reuse); the MCP is the live data and the hands (search, get_component, install commands). Your job: find the right item, install it with the shadcn CLI, read its real API, and **adapt by reuse** - wire real data and theme it; do not hand-roll or restyle what ReUI already provides. This skill **layers on the shadcn skill**: follow that for generic rules (spacing, `cn()`, semantic colors, forms); follow this for everything ReUI-specific.
+
+## The core loop (MCP-native)
+
+1. **Find** - call the ReUI MCP `search` tool with the user's intent. It returns a ranked, scored list across components/examples/blocks/icons, each with an `install` command, `previewUrl`, `docsUrl`, and `componentsUsed`. Pass hints (`type`, `component`, `category`, `features`, `free`) when you can infer them.
+2. **Install** - run the returned command non-interactively (`npx shadcn@latest add @reui/<name> --yes`). The CLI resolves deps, aliases, and the base/style from `components.json`. See [cli.md](./rules/cli.md).
+3. **Read the API (on your base)** - first note your base from `components.json` -> `style` (`base-nova` -> Base UI, `radix-nova` -> Radix UI). For each component an item uses, call `get_component(name)` and read its **inline `api`** (no web fetch); then `get_examples(name)` to install a worked example and copy its composition - the installed files are already in your base. Whenever you work with a component's API, also **share its `docsUrl`** (the primitive's API documentation page) with the user so they have the full reference. See [components.md](./rules/components.md).
+4. **Adapt (reuse-first)** - swap demo data for real data, fix icon imports, align tokens. Do not redesign. See [adapting.md](./rules/adapting.md).
+
+**Always show the preview.** Every item a tool returns carries a `previewUrl` (a live preview page). Whenever you list, recommend, or present ReUI items to the user - blocks, components, examples, or icons, whether from `search`, `search_icons`, `list_components`, `compose_page`, or any getter - include each item's `previewUrl` so they can SEE it before installing. Blocks and examples open an individual live preview; icons and components link to their live category/component page. Never present an item without its preview link.
+
+If the ReUI MCP is not configured, fall back to `npx shadcn@latest search @reui -q "..."` then `add` - but the MCP gives scored matches + inline APIs; prefer it.
+
+## Commands
+
+Run ReUI as explicit slash commands (via the ReUI MCP) **or** just ask in plain language - both run the same workflow.
+
+| Command     | Invoke                         | Does                                                                                                               |
+| ----------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| **build**   | `/mcp__reui__build <what>`     | Compose a page/section/feature from ReUI: plan → install → read API → adapt → craft → audit.                       |
+| **add**     | `/mcp__reui__add <item>`       | Find & install one component/example/block/icon and wire it in.                                                    |
+| **fix**     | `/mcp__reui__fix [target]`     | Diagnose & fix ReUI usage: wrong/undocumented props, base/radix mismatch, missing states, a11y/scroll.             |
+| **improve** | `/mcp__reui__improve [target]` | Refine + extend existing ReUI UI to a production-exceptional bar (hierarchy, density, states, responsive, motion). |
+
+Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor/Windsurf, `/mcp.reui.build` in VS Code). No command surface? Just describe what you want - this skill drives the identical loop.
+
+## When to reach for ReUI vs plain shadcn
+
+| Need                                                                 | Reach for                                                                 |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| A full page or section (dashboard, billing, auth, pricing, settings) | `compose_page` first (plans sections + best blocks), then ReUI **blocks** |
+| A data table with sorting/filtering/pagination/virtualization        | the **data-grid** component (never hand-roll a `<table>`)                 |
+| A drag-and-drop board                                                | the **kanban** component                                                  |
+| Advanced column filtering, date range, tree, stepper, ...            | the matching ReUI **component**                                           |
+| A single generic control already in shadcn (Button, Dialog, Select)  | plain **shadcn**                                                          |
+
+## Detailed references
+
+- [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 22 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)
+- [rules/styling.md](./rules/styling.md) - ReUI extended tokens, theme adaptation, density
+- [rules/icons.md](./rules/icons.md) - portable icons, swapping imports, Motion Icons (static + animated)
+- [tools.md](./tools.md) - the ReUI MCP: golden path, the 19 tools, token rules, result shapes, errors

.opencode/skills/reui/rules/adapting.md

@@ -0,0 +1,43 @@
+# Adapting installed ReUI code (reuse-first, no AI slop)
+
+ReUI items ship production-quality. Your job is to **adapt by reuse** - wire real data and fit the app - not to redesign or hand-roll. The output should look like ReUI built it for this product.
+
+## Preserve the design - don't over-customize
+
+The design IS the product. A ReUI block/component encodes senior-designer decisions: spacing, hierarchy, density, color treatment, and component choices. The fastest way to turn a premium block back into generic AI slop is to "improve" its look - so don't.
+
+- Change **data, copy, and props**; keep the **structure and styling** it ships with. Make the **smallest** change that wires the real data. If your diff touches `className` / JSX structure more than data / props, you are over-customizing - stop and reuse.
+- Don't swap ReUI components for hand-rolled ones, restructure the layout, re-skin spacing / radius / colors, or add decorative chrome. Let the installed components carry the default spacing, radius, sizing, icon rhythm, density, and state styling; add custom Tailwind only when a component genuinely lacks a contract you need.
+- Want a different look? `search` for a block whose design already fits and reuse that - don't restyle this one into a new design.
+
+## Reuse the parts: examples and the block's own elements
+
+- **Examples are building parts.** A free `c-*` example is a correct, single-pattern composition you can reuse. Before composing from scratch, `get_examples(component)`, install the closest one, and reuse its wiring - assemble UI from examples instead of hand-rolling what an example already shows.
+- **Reuse a block's own elements.** Need more rows, cards, items, or sections than ship by default? Repeat the block's **existing** element by mapping real data through the same markup - never invent parallel markup that drifts from its design. Need a variant (empty / loading / expanded)? Derive it from an element the block already has.
+
+## Don't invent (read, don't guess)
+
+- Never write a prop, variant value, import path, or `@reui/...` name you didn't read in a component's inline `api`, an installed example, or a `search` result. If you didn't see it, treat it as nonexistent - call `get_component` / `get_examples` / `search` first, or run the MCP `validate_usage` tool to check planned names + props against the docs before writing code.
+- If a getter returns `found: false` or `search` returns nothing, say so and fall back (plain shadcn, or ask) - never fabricate an install command or an API.
+
+## What to change vs leave alone
+
+- **Change:** the item's own data, copy, props, and layout to fit the app.
+- **Leave alone:** installed component files, hooks, and the shared theme - do not edit vendored ReUI internals; change behavior through props and the documented API.
+- Blocks are **portable React** - no `next/link`, `next/image`, or other framework-runtime imports inside them. Keep them portable.
+
+## Demo data -> real data
+
+- Replace every placeholder with the user's real data. Model it as **typed data structures** and **map over arrays** - never duplicate JSX per row/card. Keep small block-specific formatters next to the data.
+- Wire the real source (columns, fields, fetch). For `data-grid`, implement the server fetch contract if the user needs server-side data.
+- **Type from the component API, derive during render.** Type domain state through the component's own types - e.g. map status to `BadgeProps["variant"]` via a typed `Record<Status, …>` - instead of stringly-typed values. Compute view state during render; don't mirror derived data into `useState`/`useEffect`.
+- **Adapt on the right base.** Use the API for the project's base (Base UI vs Radix - see [components.md](./components.md)); the installed files are already base-correct, so reuse their shape rather than translating from memory.
+
+## Believable content (no AI tells)
+
+- Use realistic labels, counts, timestamps, and statuses that map to a real workflow.
+- No decorative buttons, fake tabs, meaningless toggles, equal-weight card walls, empty gradients, ornamental icons, or generic SaaS filler. Every element should do something.
+
+## Operational surfaces (settings / profile / admin)
+
+Pick ONE archetype and keep the family consistent: a vertical rail (3-6 sections), horizontal tabs (5-8), or a frame/stack. Prefer `frame` for tool-like surfaces, a card for profile-like ones. Don't mix archetypes in one surface.

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

@@ -0,0 +1,60 @@
+# CLI: registry setup, license, non-interactive install
+
+## Registry setup (one-time, per project)
+
+Free items (the 22 components and all `c-*` examples) need only the plain string registry in `components.json`:
+
+```json
+{ "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
+```
+
+Premium items (blocks; Motion Icons and templates) require a ReUI license at install:
+
+1. Add the key to `.env.local`:
+
+```bash
+REUI_LICENSE_KEY=your-license-key
+```
+
+2. Switch `components.json` to the authenticated object form:
+
+```json
+{
+  "registries": {
+    "@reui": {
+      "url": "https://reui.io/r/{style}/{name}.json",
+      "headers": { "Authorization": "Bearer ${REUI_LICENSE_KEY}" }
+    }
+  }
+}
+```
+
+The shadcn CLI expands `${REUI_LICENSE_KEY}` from `.env.local` inside `components.json`, but an MCP client config never expands variables, so a ReUI MCP server config must carry the raw token instead (for example `reui_pat_your_token_here`).
+
+The MCP `get_project_context` tool returns the right config. Full guide: https://reui.io/docs/registry?ref=skill
+
+## Installing
+
+Use the project's package runner (check `packageManager`):
+
+```bash
+npx shadcn@latest add @reui/<name> --yes      # npm
+pnpm dlx shadcn@latest add @reui/<name> --yes  # pnpm
+bunx --bun shadcn@latest add @reui/<name> --yes # bun
+```
+
+`--yes` skips confirmation prompts. The CLI auto-detects the package manager from the lockfile (there is no `--package-manager` flag). It also resolves the correct base+style variant from `components.json`, so do not pass a style.
+
+## Handling prompts and conflicts
+
+- **Always pass `--yes`** so the CLI does not block on confirmation prompts.
+- **Do NOT pass `--overwrite` by default.** If the CLI reports an existing file, read the output and resolve deliberately: install under a different name, adjust the path, or ask the user. Only use `--overwrite` when the user explicitly wants to replace a file.
+- **Preview first when touching an existing project**: `npx shadcn@latest add @reui/<name> --dry-run` shows what would change; `--diff <file>` shows a specific file's diff. Use these before overwriting.
+- Run from the **project root** so `components.json` and `.env.local` are found.
+
+## Free vs premium boundary
+
+- Public, no key: `c-*` examples and the 22 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?ref=skill (their key) or https://reui.io/pricing?ref=skill (upgrade).

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

@@ -0,0 +1,428 @@
+# ReUI components
+
+The 22 ReUI building blocks: `alert`, `autocomplete`, `badge`, `cascader`, `code-block`, `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 v9. It is NOT a styled `<table>` and does NOT take `data`/`columns` props directly. The contract:
+
+- 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 = useTable({
+  features: dataGridFeatures,
+  data,
+  columns,
+})
+
+<DataGrid table={table} recordCount={data.length}>
+  <DataGridTable />
+</DataGrid>
+```
+
+Common mistakes:
+
+- **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 primitive's `DataGridColumnMeta` (e.g. `cellClassName`, `headerTitle`), set through the bundle's `columnMeta` slot.
+
+## event-calendar
+
+**Required:** events via `events`/`onEventsChange` (controlled) or `defaultEvents` (uncontrolled), plus a height on the root.
+**Shape:**
+
+```tsx
+<EventCalendar defaultEvents={events} defaultView="month" className="h-[560px]">
+  <EventCalendarNav />
+  <EventCalendarContent />
+</EventCalendar>
+```
+
+**Gotcha:** headless-first: `EventCalendarContent` renders the active view (month/week/day/days/agenda; a resource view activates when `resources` is passed) - there is no per-view JSX to compose. Events are `{ id, title, start, end (exclusive), allDay?, color?, recurrence?, resourceId? }`. Mutations flow through `onEventUpdate`/`canDropEvent` (return `false` to reject); the root needs an explicit height because it is a min-h-0 flex column.
+
+## gantt
+
+**Required:** `resources` (the left tree) plus bars via `events`/`defaultEvents` attached by `resourceId`.
+**Shape:**
+
+```tsx
+<Gantt defaultEvents={bars} resources={tasks} defaultScale="month" className="h-[480px]">
+  <GanttNav />
+  <GanttView />
+</Gantt>
+```
+
+**Gotcha:** bars move along the time axis only (never across rows) and are all-day spans with exclusive `end`; `progress` is 0-100. Scales are `day | week | month | quarter | year`. Zoom control, infinite scroll, summary rollups, and row checkboxes are ON by default - turn off what you do not need. Same `onEventUpdate`/`canDropEvent` commit pipeline as `event-calendar`; the root needs an explicit height.
+
+## kanban
+
+**Required:** `value` (`Record<string, T[]>`), `onValueChange`, `getItemValue`
+**Shape:**
+
+```tsx
+<Kanban value={cols} onValueChange={setCols} getItemValue={(i) => i.id}>
+  <KanbanBoard>
+    {Object.entries(cols).map(([id, items]) => (
+      <KanbanColumn key={id} value={id}>
+        <KanbanColumnHandle><h3>{id}</h3></KanbanColumnHandle>
+        <KanbanColumnContent value={id}>
+          {items.map((i) => (
+            <KanbanItem key={i.id} value={i.id}>
+              <KanbanItemHandle>{i.title}</KanbanItemHandle>
+            </KanbanItem>
+          ))}
+        </KanbanColumnContent>
+      </KanbanColumn>
+    ))}
+  </KanbanBoard>
+  <KanbanOverlay><div className="bg-muted size-full rounded-md" /></KanbanOverlay>
+</Kanban>
+```
+
+**Gotcha:** state is `Record<columnId, T[]>`. Each `KanbanColumnContent value` must match its parent `KanbanColumn value`. Omit `KanbanOverlay` and the drag preview silently breaks.
+
+## sortable
+
+**Required:** `value` (`T[]`), `onValueChange`, `getItemValue`
+**Shape:**
+
+```tsx
+<Sortable value={items} onValueChange={setItems} getItemValue={(i) => i.id}>
+  {items.map((i) => (
+    <SortableItem key={i.id} value={i.id}>
+      <SortableItemHandle><GripVertical /></SortableItemHandle>
+      {i.label}
+    </SortableItem>
+  ))}
+</Sortable>
+```
+
+**Gotcha:** a flat 1D reorder list (not columns - that is `kanban`). `getItemValue` must return a stable, unique string. Pass `layout="grid"` or `layout="nested"` for non-list layouts.
+
+## filters
+
+**Required:** `fields` (`FilterField[]`). The value is ONE `FilterQuery` tree - `query` + `onQueryChange`, or uncontrolled `defaultQuery`.
+**Shape:**
+
+```tsx
+const fields: FilterField[] = [
+  { id: "title", label: "Title", type: "text" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "archived", label: "Archived" },
+    ],
+  },
+]
+const [query, setQuery] = useState<FilterQuery>(() => createFilterQuery())
+
+<Filters fields={fields} query={query} onQueryChange={setQuery} />
+```
+
+**Gotcha:** the state is a TREE, not a list of chips. `FilterQuery` is a group of rules joined by `and`/`or` and a group may hold another group, so `(A and B) or C` is expressible; a rule is `{ id, type: "rule", path: ["status"], operator, value }` and `path` is the whole nested attribute path, root first. The pre-rewrite API is GONE: there is no `filters`/`onChange` prop, no `FilterFieldConfig` (fields are `FilterField`, nested through their own `fields`, keyed `id` not `key`), and no `createFilter()` - it minted ids inside a pure function and broke hydration, so ids now come from `createFilterIdFactory(seed)` seeded off `useId`, and `createFilterQuery()` / `createFilterRule()` take one. Read the query back with `flattenFilterConditions` (`{ path, field, operator, values, negated }` per rule, incomplete rules skipped) and walk the tree yourself when the parentheses carry meaning - the primitive compiles nothing, no SQL, no query string.
+
+`variant` picks the chrome over that one query: `"basic"`, the default, is the flat chip row for a toolbar over a table; `"advanced"` is the condition builder, hung off a trigger or rendered in place with `advancedMode="inline"`. Both read and write the same tree, so a saved view built in one opens in the other. Other props worth knowing before you hand-roll them: `size` is two rungs, `"sm" | "default"`, resolved per style (there is no `lg`); `reorderable` turns on drag and Alt+Arrow row moves in the builder; `onBeforeQueryChange` is the ONE veto point for every write (return `false` to refuse, it cannot rewrite); `editors` registers custom value editors a field selects by `editor` name; `labels` / `operatorLabels` own every rendered string; `pathCollapse` + `maxPathSegments` shorten deep attribute paths; `renderChip` / `renderValue` / `renderEmpty` replace rendered parts. On a field, `loadOptions` supplies async options with paging and `resolveValues` renders a chip restored from a saved view whose option was never loaded. Pairs naturally with `data-grid`.
+
+## cascader
+
+**Required:** `items` (a tree of `{ value, label, children? }`), plus the panel parts inside `CascaderContent`.
+**Shape:**
+
+```tsx
+<Cascader items={items} value={value} onValueChange={setValue}>
+  <CascaderTrigger render={<Button variant="outline" />}>
+    <CascaderValue placeholder="Select an attribute" />
+  </CascaderTrigger>
+  <CascaderContent className="w-80">
+    <CascaderPanel>
+      <CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderInput />
+      </CascaderNav>
+      <CascaderEmpty />
+      <CascaderList maxHeight={288}>
+        <CascaderItems />
+      </CascaderList>
+      <CascaderStatus />
+    </CascaderPanel>
+  </CascaderContent>
+</Cascader>
+```
+
+**Gotcha:** pressing a branch NAVIGATES, it does not select - only leaves are selectable until you pass `selectable="any"` or a predicate, and once a branch is selectable its chevron becomes the only way to open it. `CascaderInput` must stay inside `CascaderContent` (Base UI refills the query from the selection when the input sits outside the popup). Always include `CascaderStatus`: it is the live region announcing level changes, which the visual breadcrumb does not provide to screen readers. Accepts a flat adjacency list via `getParent` as well as nested `children`. `searchScope="deep"` searches every level and annotates results with their path; `multiple` gives checkbox rows; `inline` + a bare `CascaderPanel` embeds it with no popover.
+
+The shape above is `mode="drill"`, the default. `mode="tree"` keeps the same parts (drop `CascaderBreadcrumb`, pass `showBack={false}`, drive expansion with `expanded`/`onExpandedChange`); `mode="columns"` REPLACES `CascaderList` + `CascaderItems` with a single `CascaderColumns`, and has no breadcrumb. Other props worth knowing before you hand-roll them: `cascade` (multi-select only, parent/child selection with indeterminate branches - pair it with `selectable="any"`, since a leaf-only tree can never cascade), `indicator={false}` to drop the single-select check and its gutter (visual only, no-op with `multiple`), `virtualize`/`virtualizeThreshold` plus `CascaderVirtualItems` for long levels, and `getChildren` for async levels with cursor paging, retry on failure and optional `prefetch`. `CascaderFooter` pins commands below the list (`actions` is the quick path) and `CascaderSubmenu` opens one as a side-anchored flyout with the full menu keyboard model. To head a run of rows use `CascaderGroup` wrapping a `CascaderLabel` - a bare label inside a listbox names nothing and is dropped from the accessibility tree - and `CascaderSeparator` for the rule between runs. Every rendered string comes from `labels`, and the panel is RTL-correct under a `DirectionProvider` or `dir="rtl"`.
+
+## date-selector
+
+**Required:** none, but wire `onChange` to capture the value.
+**Shape:**
+
+```tsx
+const [value, setValue] = useState<DateSelectorValue | undefined>()
+
+<DateSelector value={value} onChange={setValue} label="Due date" />
+```
+
+**Gotcha:** the value is a structured `DateSelectorValue` (period / operator / start+end dates), NOT a `Date` - never pass a raw `Date`. Use `allowRange={false}` to lock single-date picking. Read `get_component("date-selector")` for the value shape.
+
+## tree
+
+**Required:** `tree` (a `@headless-tree/core` instance you construct)
+**Shape:**
+
+```tsx
+<Tree tree={tree}>
+  {tree.getItems().map((item) => (
+    <TreeItem key={item.getId()} item={item}>
+      <TreeItemLabel />
+    </TreeItem>
+  ))}
+</Tree>
+```
+
+**Gotcha:** `Tree` is a styled shell - it takes a headless-tree instance via `tree`, NOT `data`/`items` props. Build the instance with `@headless-tree/react`. External API: https://headless-tree.lukasbach.com/
+
+## stepper
+
+**Required:** `StepperItem step` (number), `StepperContent value` (number)
+**Shape:**
+
+```tsx
+<Stepper defaultValue={1}>
+  <StepperNav>
+    <StepperItem step={1}>
+      <StepperTrigger><StepperIndicator>1</StepperIndicator></StepperTrigger>
+      <StepperSeparator />
+    </StepperItem>
+    <StepperItem step={2}>
+      <StepperTrigger><StepperIndicator>2</StepperIndicator></StepperTrigger>
+    </StepperItem>
+  </StepperNav>
+  <StepperPanel>
+    <StepperContent value={1}>Step 1 content</StepperContent>
+    <StepperContent value={2}>Step 2 content</StepperContent>
+  </StepperPanel>
+</Stepper>
+```
+
+**Gotcha:** steps are 1-indexed. Without `StepperPanel` + `StepperContent` you render the nav trail but no body. Put `StepperSeparator` in every `StepperItem` except the last.
+
+## timeline
+
+**Required:** `TimelineItem step` (number)
+**Shape:**
+
+```tsx
+<Timeline>
+  <TimelineItem step={1}>
+    <TimelineHeader>
+      <TimelineDate>March 2024</TimelineDate>
+      <TimelineTitle>Project initialized</TimelineTitle>
+    </TimelineHeader>
+    <TimelineIndicator />
+    <TimelineSeparator />
+    <TimelineContent>Repo and architecture set up.</TimelineContent>
+  </TimelineItem>
+</Timeline>
+```
+
+**Gotcha:** each item needs a unique `step`. `orientation` is `"vertical"` (default) or `"horizontal"`. This is a static event display, not interactive like `stepper`.
+
+## autocomplete
+
+**Required:** `items` (array; each item has at least `value`)
+**Shape:**
+
+```tsx
+<Autocomplete items={items}>
+  <AutocompleteInput placeholder="Search..." />
+  <AutocompleteContent>
+    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
+    <AutocompleteList>
+      {(item) => (
+        <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>
+      )}
+    </AutocompleteList>
+  </AutocompleteContent>
+</Autocomplete>
+```
+
+**Gotcha:** `AutocompleteList` takes a render-prop `(item) => ReactNode`, NOT a mapped array of children. External API: https://base-ui.com/react/components/autocomplete
+
+## phone-input
+
+**Required:** none, but wire `onChange`.
+**Shape:**
+
+```tsx
+<PhoneInput placeholder="Enter phone number" defaultCountry="US" value={value} onChange={setValue} />
+```
+
+**Gotcha:** `value`/`onChange` use an E.164 string (e.g. `"+14155551234"`), not a display-formatted string; `onChange` can fire `undefined`. `defaultCountry` is a 2-letter ISO code. Wraps `react-phone-number-input`.
+
+## number-field
+
+**Required:** wrap the controls in `NumberFieldGroup`.
+**Shape:**
+
+```tsx
+<NumberField defaultValue={0}>
+  <NumberFieldScrubArea label="Quantity" />
+  <NumberFieldGroup>
+    <NumberFieldDecrement />
+    <NumberFieldInput />
+    <NumberFieldIncrement />
+  </NumberFieldGroup>
+</NumberField>
+```
+
+**Gotcha:** import from `@/components/ui/number-field`. The accessible label goes on `NumberFieldScrubArea`, not `NumberField`. External API: https://base-ui.com/react/components/number-field
+
+## rating
+
+**Required:** `rating` (number)
+**Shape:**
+
+```tsx
+<Rating rating={4.5} showValue editable onRatingChange={setRating} />
+```
+
+**Gotcha:** supports decimals (partial stars). Pass `editable` + `onRatingChange` for interactive input; omit both for a read-only display.
+
+## scrollspy
+
+**Required:** `targetRef` (the scroll container ref)
+**Shape:**
+
+```tsx
+<Scrollspy targetRef={containerRef}>
+  <a href="#s1" data-scrollspy-anchor="s1">Section 1</a>
+  <a href="#s2" data-scrollspy-anchor="s2">Section 2</a>
+</Scrollspy>
+<div ref={containerRef}>
+  <div id="s1">...</div>
+  <div id="s2">...</div>
+</div>
+```
+
+**Gotcha:** each link's `data-scrollspy-anchor` must match a section `id`. `targetRef` is the scrollable container (defaults to the window).
+
+## frame
+
+**Required:** `Frame` > `FramePanel`
+**Shape:**
+
+```tsx
+<Frame>
+  <FramePanel>
+    <FrameHeader>
+      <FrameTitle>Title</FrameTitle>
+      <FrameDescription>Description</FrameDescription>
+    </FrameHeader>
+    <div className="p-5">Content</div>
+    <FrameFooter>Footer</FrameFooter>
+  </FramePanel>
+</Frame>
+```
+
+**Gotcha:** a structured card shell for tool-like surfaces. `stacked` connects multiple panels with shared borders; `dense` removes panel padding; radius via the `--frame-radius` CSS variable.
+
+## icon-stack
+
+**Required:** one child icon
+**Shape:**
+
+```tsx
+<IconStack aria-hidden="true">
+  <InboxIcon className="size-4" />
+</IconStack>
+```
+
+**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.
+
+## code-block
+
+**Required:** `code` + `language`, or pre-highlighted `lines`.
+**Shape:**
+
+```tsx
+<CodeBlock code={code} language="tsx" />
+
+<CodeBlock code={code} language="tsx" showLineNumbers maxLines={20}>
+  <CodeBlockHeader>
+    <CodeBlockTitle>use-totals.ts</CodeBlockTitle>
+    <CodeBlockLanguage />
+    <CodeBlockCopyButton className="ml-auto" />
+  </CodeBlockHeader>
+  <CodeBlockExpandButton />
+</CodeBlock>
+```
+
+**Gotcha:** the one-liner is already a complete block; every child (header, title, language label, copy button, wrap toggle, expand button, line actions) is optional chrome, at any depth. Shiki is the only npm dependency and loads lazily, one chunk per language, on first highlight; `lines` (from `highlightCode` in `code-block-highlight`, which is server-safe and has no `"use client"`) or `highlight={false}` loads nothing at all. `maxLines` caps the height AND marks the block collapsible, which is what makes `CodeBlockExpandButton` appear. Use `variant="ghost"` when the block sits inside a surface that already has a border.
+
+## alert
+
+**Required:** `Alert` > `AlertTitle`
+**Shape:**
+
+```tsx
+<Alert variant="success">
+  <ShieldCheckIcon />
+  <AlertTitle>Security update</AlertTitle>
+  <AlertDescription>Enable two-factor authentication.</AlertDescription>
+  <AlertAction><Button size="xs">Update</Button></AlertAction>
+</Alert>
+```
+
+**Gotcha:** shadcn-compatible API. `variant`: `default | destructive | info | success | warning | invert`. The non-default variants use ReUI extended color tokens (`--success`/`--info`/`--warning`/`--invert`), which the install adds. Defer generic alert rules to the shadcn skill.
+
+## badge
+
+**Required:** none (text child).
+**Shape:**
+
+```tsx
+<Badge variant="success-light" size="sm">Success</Badge>
+<Badge variant="outline" radius="full">Pill</Badge>
+```
+
+**Gotcha:** shadcn-compatible. Rich `variant` set (solid, `-outline`, `-light` per color), `size` `xs..xl`, `radius` `default | full`. Like `alert`, the color variants rely on ReUI extended tokens. Prefer `Badge` variants over raw color classes for statuses.
+
+## base vs radix - write for the project's base
+
+ReUI ships every component in two builds: `base` (Base UI) and `radix` (Radix UI). The install command and name are identical, and the CLI installs the build matching the project. But you must write/adapt code against the **right base**, because their APIs differ.
+
+**Detect the base first.** Read `components.json` -> `style` and take the segment before the first `-`:
+
+- `"style": "base-nova"` -> **Base UI**
+- `"style": "radix-nova"` -> **Radix UI**
+
+**Then use that base's API.** The deltas mirror shadcn's base-vs-radix split:
+
+- Slot/composition: Base UI `render={<… />}` vs Radix `asChild`.
+- `Select`: Base UI takes `items`; Radix uses `<SelectItem>` children.
+- `ToggleGroup`: Base UI `multiple` boolean vs Radix `type="single" | "multiple"`.
+
+The safest path is to **read the installed files and `c-*` examples** - they're already in your base, so reuse their wiring instead of guessing. When `get_component`'s inline `api` or an example shows the other base's shape, translate it to your base (or `validate_usage` to confirm). Defer the generic base/radix mechanics to the shadcn skill.

.opencode/skills/reui/rules/craft.md

@@ -0,0 +1,45 @@
+# Craft: make ReUI UI exceptional, not generic
+
+ReUI items ship senior-designer quality. Your adaptation has to hold that bar, so the result reads like a real product surface a team would keep - not a wireframe an AI generated. Use these alongside the reuse rules in [adapting.md](./adapting.md).
+
+## Have a point of view
+
+Pick an emotional register before you compose - calm, operational, premium, editorial, dense, energetic - and let layout, spacing, surface treatment, and icon behavior all reinforce it. One or two memorable decisions and restraint everywhere else beats ten generic ones. UI with no point of view reads as generated.
+
+## Brutally clear hierarchy
+
+One focal point per card or panel: the dominant metric or task first, its label second, supporting detail third. The first thing the eye lands on should be the right thing; secondary text must read as secondary. Borders, separators, and surfaces do real work to create 2-3 information bands - don't flatten everything to equal weight.
+
+## Spacing rhythm and deliberate density
+
+Gaps are a signal, not a default. Keep them intentional and consistent within a family (`gap-1`/`gap-2` for tight operational rows, larger gaps for section breaks), and smaller within a group than between groups. Match the surrounding ReUI density; don't pad an operational surface like a marketing page, and don't drift density mid-section. The composition should still feel authored in grayscale.
+
+## Cover the real states (the usual miss)
+
+A surface isn't done at the happy path. Compose, and wire:
+
+- **Empty** - a purposeful empty state (short message + the primary action), never a blank panel.
+- **Loading** - a **skeleton** that matches the real layout, not a centered spinner.
+- **Error** - an inline, recoverable error with a retry, announced via `role="status"`/`aria-live`.
+
+Derive these from an element the block already has (don't invent parallel markup), or `get_examples` for a state-specific example.
+
+## Responsive by default
+
+Mobile-first, not mobile-afterthought. In constrained rows/cards/sidebars, put `min-w-0` on the shrinking container and `truncate` long single-line labels; protect the primary label's width and let secondary content compress. Reflow layouts (multi-column -> single column) rather than just shrinking them. Desktop and mobile should both look designed.
+
+## Motion, subtly
+
+Motion should clarify, not decorate. Use ReUI Motion Icons on primary actions for a subtle hover cue; keep transitions short (~200-300ms) with calm easing; prefer a skeleton pulse over a spinner. No bouncing, no gratuitous entrance animations on every element.
+
+## Real, activated content
+
+Use believable, typed data (realistic labels, counts, timestamps, statuses that map to a real workflow) - never lorem or abstract filler. Every visible control does something: no decorative buttons, fake tabs, meaningless toggles, or stats with no job. It must still hold with long names, empty values, and crowded data.
+
+## Avoid the AI tells
+
+These instantly read as generated - don't ship them: equal-weight card walls, empty gradients, repetitive padding everywhere, generic enterprise copy, ornamental icons, and number tiles that don't earn their place.
+
+## The bar
+
+Before you finish, ask: **would a product team keep this instead of replacing it? Does it still feel strong after swapping in real content?** If not, reuse the shipped ReUI design harder - don't restyle it into something new - then run the [quality.md](./quality.md) gates.

.opencode/skills/reui/rules/icons.md

@@ -0,0 +1,39 @@
+# Icons (ReUI delta over shadcn)
+
+Follow the shadcn icon rules (use the project's configured `iconLibrary`, `data-icon` on icons inside `Button`, no sizing classes on icons inside components, pass icons as component objects not string keys). ReUI adds the following.
+
+## Portable icons (library-agnostic)
+
+ReUI components, examples, and blocks are authored to be icon-library-agnostic. When `iconLibrary` is set in `components.json`, the shadcn CLI installs each item's icons in **your** library automatically - you swap nothing. If an installed item's icons don't match your project (for example `iconLibrary` isn't set, so they came in from the item's demo library), change the **import source and component name** to your library, keeping the same icon-name semantics:
+
+- `lucide` -> `lucide-react`
+- `tabler` -> `@tabler/icons-react`
+- `phosphor` -> `@phosphor-icons/react`
+- `remix` -> `@remixicon/react`
+- `hugeicons` -> `@hugeicons/react`
+
+Don't assume `lucide-react`; read `iconLibrary` from `components.json`.
+
+## Keep icons purposeful
+
+Icons support the hierarchy, they don't replace it: keep them small, matched to the surrounding density, and decorative ones `aria-hidden="true"` (an icon-only control still needs an accessible label on the control). Don't add ornamental icons that do no job.
+
+## Motion Icons (the `@reui/icons/...` set)
+
+ReUI ships its own icon set in 4 styles (outline, solid, duotone, filled), each icon in two variants:
+
+```bash
+npx shadcn@latest add @reui/icons/default/<style>/<name> --yes    # static
+npx shadcn@latest add @reui/icons/animated/<style>/<name> --yes   # hover-animated (motion/react)
+```
+
+Finding them via the MCP is free; installing requires an Ultimate license (`REUI_LICENSE_KEY`, see [cli.md](./cli.md)). Reach for a Motion Icon on a primary action when a subtle hover cue helps; keep motion restrained.
+
+Finding icons:
+
+- Several icons (the common case): **`search_icons(concepts[])`** - up to 24 concepts in one call, the best icons per concept with install commands. Pass `animated: true` to get only icons with a hover-animated Motion variant.
+- One icon: `search` with `type: "icon"`.
+- Icon results and `get_icon` carry `animated: true` and `installAnimated` when an animated variant exists - use those install strings, do not construct paths by hand.
+- Every icon result carries a `previewUrl` (its live icon-category page) - **share it with the user** so they can SEE the icon before installing.
+
+The `icon-stack` component composes multiple icons into a stacked display.

.opencode/skills/reui/rules/quality.md

@@ -0,0 +1,22 @@
+# Quality gates (security, accessibility, scroll)
+
+These are the **done gate**, not a nice-to-have: before you call any ReUI work finished, call the MCP `get_audit_checklist` tool and pass every item below (plus the craft bar in [craft.md](./craft.md)). Then typecheck and lint.
+
+## Security
+
+- Never `dangerouslySetInnerHTML`. Render data as text/components.
+- External links (`target="_blank"`) must always pair `rel="noopener noreferrer"`.
+- No real PII, secrets, or tokens in demo or committed code. Remote media only from sources the project already allows.
+
+## Accessibility
+
+- Implicit list/card items that navigate get real anchors with a standard hover affordance.
+- Icon-only or numeric buttons need an `aria-label`; decorative icons get `aria-hidden`.
+- Every non-submit button is `type="button"`.
+- Keyboard + focus: everything interactive is reachable in a sensible Tab order with a visible focus ring; layers (dialogs/sheets/menus) trap focus and close on `Escape`. ReUI components ship standard keyboard behavior - read each component's inline `api` rather than re-implementing it.
+- Announce async UI: loading and error messages use `role="status"` / `aria-live` so they're not silent to screen readers.
+
+## Scroll mechanics
+
+- Make scroll regions with a parent-owned height: a `min-h-0` + flex chain down to the scroll container. Never guess a `max-h`.
+- The scroll container owns `overflow-auto`; ancestors stay `min-h-0` so the height resolves.

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

@@ -0,0 +1,35 @@
+# ReUI registry structure
+
+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 22 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).
+
+## The @reui registry
+
+Install everything through the shadcn CLI: `npx shadcn@latest add @reui/<name> --yes`. The CLI reads the `@reui` registry from the project's `components.json`. Free items need only the plain string form:
+
+```json
+{ "registries": { "@reui": "https://reui.io/r/{style}/{name}.json" } }
+```
+
+Premium installs need the authenticated form + `REUI_LICENSE_KEY` in `.env.local` - see [cli.md](./cli.md). The MCP `get_project_context` tool returns the right config.
+
+## Know your base: base or radix
+
+ReUI ships every item in two builds - `base` (Base UI) and `radix` (Radix UI) - with mirrored names. The CLI installs the build matching your project automatically, but **you must write code against the right base's API**. Detect it from `components.json` -> `style`: the segment before the first `-` is the base (`base-nova` -> Base UI, `radix-nova` -> Radix UI). The installed files and `c-*` examples are already in your base - read them and adapt on that base. See [components.md](./components.md) for the API deltas.
+
+**So the MCP's own `docsUrl` and `previewUrl` match your base**, send your `style` to the MCP: add `?style=<your components.json style>` to the ReUI MCP server URL (or set an `X-Reui-Style` header) in your MCP client config - set once, applies to every call. The MCP then resolves docs/preview links to YOUR library (`/docs/components/radix/...`, `/preview/radix/...` for a radix project) instead of the default base; `get_project_context` echoes back the style it currently sees so you can confirm it. Install commands are unaffected (the CLI already installs the right variant). If you notice the MCP returning `base` links for a `radix` project, tell the user to add `?style=` to the server URL.
+
+Blocks adapt to your active theme through semantic tokens and CSS variables - change the theme and every block follows.
+
+## Free vs premium
+
+- **Free, no key:** the 22 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
+
+The canonical index of every component's API docs is **https://reui.io/llms.txt** (returned as `componentsApiUrl` in MCP results). Prefer the inline `api` from `get_component`; use the index/docs as the fallback.

.opencode/skills/reui/rules/styling.md

@@ -0,0 +1,26 @@
+# Styling (ReUI delta over shadcn)
+
+Follow the shadcn skill for the generic rules (semantic colors not raw values, `gap-*` not `space-y-*`, `size-*`, `cn()`, no manual `dark:` overrides, no overlay `z-index`). This file is only the ReUI-specific additions.
+
+## ReUI extended semantic tokens
+
+ReUI adds semantic tokens beyond shadcn's base set. Use these instead of raw colors for status and emphasis:
+
+- `--success` / `--success-foreground`
+- `--info` / `--info-foreground`
+- `--warning` / `--warning-foreground`
+- `--destructive-foreground` (paired with shadcn's `--destructive`)
+- `--invert` / `--invert-foreground` (inverted surfaces)
+
+Use them as Tailwind utilities (`bg-success text-success-foreground`, `text-warning`, ...). They are defined in the project's global CSS and registered with Tailwind (`@theme inline` on v4). If a token is missing in the project, add it to the global CSS file (never a new file) following the same `name` / `name-foreground` convention, exactly as the shadcn customization rules describe.
+
+**Incorrect:** `<span className="text-green-600">Active</span>`
+**Correct:** `<Badge variant="success">Active</Badge>` or `<span className="text-success">Active</span>`
+
+## Blocks follow your theme
+
+When you install a block it adapts to your active theme through the semantic tokens above and the project's CSS variables. Don't hardcode style-specific values into installed block code and don't fork it to "restyle" - change the theme via the CSS variables / a preset and every block follows. Want a different look? `search` for a block whose design already fits instead of re-skinning one.
+
+## Density and typography rhythm
+
+ReUI operational UI usually feels dense, not airy. Keep the gap between a title and its supporting description tight by default (`gap-0.5`, `space-y-1`, or `space-y-px`), and smaller than the gap between sections. Match the surrounding ReUI density when you add rows or fields; do not pad operational surfaces like a marketing page.

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

@@ -0,0 +1,54 @@
+# Workflow: find -> install -> read API -> adapt
+
+The core ReUI loop. The MCP tells you what to install and gives you the API; the shadcn CLI installs it; you turn the installed files into correct, themed, data-wired code by **reuse**, not redesign.
+
+## 1. Find (ReUI MCP `search` / `compose_page`)
+
+**Full multi-section page ask?** Call `compose_page(intent, sections?)` FIRST, before searching block-by-block. It returns ordered sections, each with the best block for the intent (top pick + alternates); sections listed in `unavailableSections` have no real inventory - compose those from components, do not force a bad block.
+
+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 22 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`.
+
+Example: "build a users management page with filters" -> `search({ query: "users management page with filters", type: "block", component: "data-grid", features: ["filters"] })`.
+
+Each result has `install`, `previewUrl`, `docsUrl`, `componentsUsed`, `score`, `termCoverage`, and `whyMatch`. `score` is relative to the top hit (the top is ~100 by construction), not an absolute quality - compare results to each other, and show the user the top options if several score closely; do not silently guess. A low `termCoverage` means a weak match even with a high score - rephrase or widen.
+
+**Always show the preview link.** Whenever you list or recommend items - from `search`, `search_icons`, `list_components`, `compose_page`, or a getter - include each item's `previewUrl` (a live preview page) so the user can SEE it before you install. Blocks and examples link to an individual live preview; icons and components to their live category/component page. This applies to every listing, not only a single pick.
+
+## 2. Install (shadcn CLI)
+
+Run the result's `install` command from the project root, non-interactively:
+
+```bash
+npx shadcn@latest add @reui/<name> --yes
+```
+
+The CLI reads `components.json`, installs the correct base+style variant, resolves `registryDependencies` (a block pulls in its components), installs npm deps, and rewrites aliases. Do not pass the base/style. See [cli.md](./cli.md).
+
+## 3. Read the API (do not guess props)
+
+Before writing code against any component an item uses:
+
+1. The item's `componentDigests` already give a 1-line contract per component - often enough to wire it. For the full API, call **`get_component(names)`** with ALL of `componentsUsed` in ONE call (it accepts an array) and read each inline `api` - no web fetch. **Share the component's `docsUrl`** (its 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.
+2. Call **`get_examples(name)`** for the free `c-*` examples of that component; install one and **read the added files** to copy the exact composition. This is the fastest correct path - the example shows real wiring you adapt, not invent.
+3. About to write a prop you did not see in an `api` or installed file? Run **`validate_usage`** BEFORE writing the code - per-prop documented / notDocumented verdicts plus did-you-mean suggestions. notDocumented means read the API, not push on.
+
+## 4. Adapt (reuse-first) - do not skip
+
+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 `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)).
+5. **Validate before finalizing**: if your adaptation introduced components or props you did not read in an `api` or example, run `validate_usage` on them.
+6. **Hit the craft bar** - clear hierarchy, deliberate density, the empty / loading / error states, subtle motion, and mobile-first responsiveness (see [craft.md](./craft.md)). Generic-looking output means you under-reused the design, not that it needs restyling.
+7. **Pass the quality gates** (security, a11y, scroll) - call the MCP `get_audit_checklist` tool and clear every item (see [quality.md](./quality.md)).
+8. **Typecheck / lint**.
+
+## If no single block fits
+
+Compose from components (`compose_page` tells you which sections have no block inventory via `unavailableSections`). `search` the components you need, read each `get_component` API, install a worked `get_examples` example for each, and assemble by adapting those examples. A block in the same category is a useful reference - install it and read its files to see how ReUI composes those components, then adapt.

.opencode/skills/reui/tools.md

@@ -0,0 +1,58 @@
+# ReUI MCP: full reference
+
+The ReUI MCP (`https://mcp.reui.io`, Streamable HTTP) is free to use but needs a ReUI account: on first use the agent signs in with ReUI (a free account is created if the user has none), so every request is tied to an account. Free covers components and examples; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the daily request limit. It does **discovery + guidance** (search, inline APIs, page planning, validation) and never serves source; the shadcn CLI does **installation**, and the license key lives there (the `@reui` entry in `components.json`, backed by `.env.local`). Goal: from the user's intent to correct, themed, data-wired ReUI code in the **fewest tokens and calls**, with **no guessing**.
+
+## Golden path (token-optimal - follow this order)
+
+Most tasks need 2-4 MCP calls and ZERO web fetches:
+
+1. **`search(query, ...hints)`** -> pick the top 1-3 results. Each result already carries `install`, `previewUrl`, `docsUrl`, `componentsUsed`, `score`, `whyMatch`. The payload is complete - do not call another tool just to "confirm" a result.
+2. **`get_component([...componentsUsed])`** in ONE batched call (one name or an array of up to 20) -> read each inline `api`. This **replaces** fetching docs pages. Often skippable: search responses carry `componentDigests`, a compact API contract per referenced component.
+3. **`get_examples(component)`** -> install ONE returned `c-*` example, read the added files, copy the composition.
+4. **`get_install_command(item)`** only to validate a name you are unsure of (results already include `install`). Run the install with the shadcn CLI (`--yes`).
+5. **`get_audit_checklist()`** before declaring done.
+
+If you already know the exact item name, skip `search`. Everything else is situational.
+
+## The 5 task-specific tools (when to reach for each)
+
+- **`compose_page`** - BEFORE building any full page (dashboard, settings, billing, landing). Pass the intent (and optionally the sections you want); it returns ordered sections, each with the best premium block for the intent (top pick + alternates). Sections with no real inventory are listed honestly in `unavailableSections` - compose those from components instead of forcing a bad block.
+- **`search_icons`** - whenever you need icons, especially several. Batch up to 24 concepts in one call; each concept returns its best icons with install commands. Pass `animated: true` to get only icons that have a hover-animated Motion variant.
+- **`validate_usage`** - BEFORE writing code with component names or props you have not read in an inline `api` or an installed example. It checks planned names + props against the indexed API docs and registry item names; returns did-you-mean suggestions and per-prop documented / notDocumented verdicts. Deterministic, no inference - a notDocumented prop means stop and read the API, not push on.
+- **`whats_new`** - when your registry knowledge might be stale (a name 404s, the user mentions an item you don't know). Returns items added/removed per build, newest first.
+- **`report_issue`** - when an installed item is actually broken (bad source, wrong dependency, broken preview). Goes straight to the ReUI team; rate-limited 5/hour. Not for usage questions.
+
+## All 19 tools
+
+`search`, `get_block`, `get_example`, `get_icon`, `list_block_groups`, `list_block_categories`, `list_example_categories`, `list_icon_categories`, `list_components`, `get_component`, `get_examples`, `search_icons`, `compose_page`, `validate_usage`, `whats_new`, `report_issue`, `get_install_command`, `get_project_context`, `get_audit_checklist`. The MCP serves the full parameter schemas; do not guess parameters beyond them.
+
+## Token + speed rules
+
+- **Batch `get_component`** - ONE call with the whole `componentsUsed` array, never N calls. Skip it entirely when `componentDigests` already answers the question.
+- **Read source by installing** - the MCP serves no source. To read or analyze an item's real code, install it with the shadcn CLI and open the local files. Learn an API from the inline `api` / `componentDigests`, never by reading raw source.
+- **Infer `search` hints yourself** (`type`, `component`, `category`, `features`, `free`) - hints shrink the result set and the tokens. Keep `limit` low; one right result beats ten.
+- Run independent calls (and the shadcn install) concurrently in one turn - serial tool calls are the main source of slowness.
+- Don't repeat a search for the same intent; don't call `list_*` to "see everything" - `search` is the entry point, `list_*` is only for browsing a taxonomy the user explicitly wants to explore.
+- Prefer `get_component`'s inline `api` over `docsUrl` / `/llms.txt`. Fetch a web page only as a last resort.
+
+## Result shapes (so you don't re-fetch)
+
+- `score` is 0-100 RELATIVE to the top hit (the top is ~100 by construction), not absolute - compare results to each other.
+- `termCoverage` (0-1) is the share of the query the item matched - low means a weak match even if the score looks high; rephrase or widen the search.
+- Each result carries `whyMatch`, `install`, docs/preview URLs, and a `free` flag; premium items carry `requiredPlan` (`"pro"` for blocks, `"ultimate"` for icons).
+- `componentDigests` is a top-level map: a compact API contract per referenced component - often enough to wire an item without a `get_component` call.
+- Icon results and `get_icon` include `animated: true` and `installAnimated` when a hover-animated Motion variant exists (animated: `@reui/icons/animated/<style>/<name>`; static: `@reui/icons/default/<style>/<name>`).
+
+## Error playbook
+
+- **401** - the MCP requires a signed-in ReUI account. The client prompts "Sign in with ReUI" (OAuth) on first use; a free account is created if needed. For headless/CI, pass a personal token (`reui_pat_...`, created at https://reui.io/account/mcp?ref=skill) as `Authorization: Bearer`.
+- **403 / locked result** - a valid account but the plan does not cover the item: premium blocks need Pro, Motion Icons need Ultimate. Point to https://reui.io/pricing?ref=skill (upgrade). Free accounts still get all components + examples.
+- **429** - rate limited (120 requests/min per IP); back off, honor `Retry-After`.
+- **not found** (`found: false`) - use the returned `suggestions`, or `search`; check `whats_new` if you suspect a stale name. Never run a fabricated install command.
+
+## Fallbacks
+
+- No ReUI MCP: `npx shadcn@latest search @reui -q "..."` then `add` (generic, no scoring / inline API).
+- The shadcn project's own MCP also works over the `@reui` registry: https://ui.shadcn.com/docs/mcp.
+
+Per-agent MCP setup: https://reui.io/docs/mcp?ref=skill

.zcode/plans/plan-sess_36e77033-b276-4928-b2d4-f9d734df4686.md

@@ -0,0 +1,63 @@
+# Локальные GeoLite2-базы (Country + ASN) для потоков по странам и ASN
+
+## Контекст
+
+Сейчас страна и ASN для netflow-потоков резолвятся через внешний RIPEstat API (`backend/src/services/traffic-flow-ripe.ts`): лимит 30 новых префиксов/мин, очередь на 90, кэш в PG `flow_ip_meta`. Новые IP «дозревают» с задержкой, IPv6 не покрывается (кэш индексируется только по IPv4). Локальные mmdb-базы дают мгновенный синхронный lookup всех IP без внешних вызовов.
+
+Решения (подтверждены):
+- Источник — **MaxMind GeoLite2 через P3TERX-зеркало**: `https://github.com/P3TERX/GeoLite.mmdb/raw/download/GeoLite2-Country.mmdb` и `.../GeoLite2-ASN.mmdb`. Без регистрации, ключей и tar-распаковки. Точность по стране у GeoLite2 и IPinfo паритетная (<1% ошибок у обоих, arXiv 2026); выбран P3TERX за надёжность зеркала (5.2k звёзд) и преемственность: текущий RIPE-путь и так читает GeoLite (`maxmind-geo-lite`), история в кэше остаётся консистентной.
+- **RIPEstat остаётся fallback** (до первой загрузки баз / если lookup не дал результата).
+- City-базу не качаем (lat/lng фронтенд не использует).
+
+## Изменения
+
+### 1. Зависимость
+- `npm install -w mikrotik-manager-backend maxmind` — sync-чтение mmdb, встроенные TS-типы, без транзитивных зависимостей, Node 22 ок.
+
+### 2. Новый сервис `backend/src/services/traffic-flow-geoip.ts`
+(по конвенциям окружения traffic-flow-*: контракт → маршрут → сервис, без БД-логики в маршрутах)
+- Каталог: `backend/storage/geoip/` (конвенция `storage/backups`), файлы `GeoLite2-Country.mmdb`, `GeoLite2-ASN.mmdb`.
+- `initGeoip()` — открыть ридеры best-effort при старте (из `index.ts` рядом с `startTrafficFlowListener`), независимо от настроек автообновления: файлы есть — работают.
+- `lookupGeoip(ip): FlowIpMeta | null` — синхронно: `country.iso_code` (fallback `registered_country.iso_code`) с валидацией `isIsoCountry`, ASN = `autonomous_system_number`, holder = `autonomous_system_organization`; приватные IP → negative-запись как в RIPE (`isNonPublicIp`); в PG не пишем (lookup и так быстрый). IPv6 поддержан ридером.
+- `resolveFlowIp(ip)` — фасад: `lookupGeoip(ip) ?? lookupRipeCached(ip)`; главный экспорт для потребителей.
+- `geoipStatus()` — loaded, даты сборки баз (метаданные mmdb). Тест-хук `setGeoipReadersForTests`. Смена ридеров после обновления — атомарная замена ссылок.
+
+### 3. Коллектор `backend/src/services/geoip-update-collector.ts`
+`collectGeoipUpdateOnce()` по образцу `certificate-renew-collector.ts`:
+1. Conditional GET с ETag/If-None-Match из настроек → 304 = skip (фолбэк-сравнение: размер/содержимое).
+2. Скачивание в `*.tmp` через глобальный `fetch` + AbortController с таймаутом (внешний HTTP из service-слоя — по правилу fastify-backend-drizzle).
+3. Валидация: открыть ридер из tmp-файла, пробой 8.8.8.8 (страна US, ASN 15169).
+4. `fs.rename` атомарная подмена, старый файл → `*.prev` (откат, если новый ридер не открылся).
+5. Перезагрузка ридеров, статус в настройках; snapshot для `scheduler_runs` (checked/downloaded/skipped/bytes/error).
+
+### 4. Планировщик (`backend/src/services/scheduler.ts`)
+- `JOB_KEYS` += `geoip_update`; case в `runSchedulerJobBody`; блок в `refreshScheduler()` по образцу `certificates_renew`: интервал `Math.max(6ч, updateIntervalSec*1000)`, по умолчанию 7 дней (upstream обновляется еженедельно) + немедленный первый запуск при включённой настройке.
+
+### 5. Схема и миграция
+- `backend/src/db/schema.ts`: singleton `geoip_settings` — `enabled` (default true), `updateIntervalSec` (default 604800), `lastCheckAt`, `lastSuccessAt`, `lastError`, `countryBuildAt`, `asnBuildAt`, `etagsJson` (jsonb), `createdAt/updatedAt`.
+- Миграция: `npm run db:generate` → файл в `backend/drizzle/`.
+
+### 6. API + контракты
+- `packages/contracts/src/geoip.ts`: zod-схемы настроек/статуса (все входы — Zod, по правилам проекта).
+- Новый `backend/src/routes/geoip.ts`, регистрация в `index.ts` с prefix `/api`:
+  - `GET /api/geoip` — настройки + статус (ready, даты сборки, последняя проверка/ошибка);
+  - `PUT /api/geoip` — сохранить настройки, затем `refreshScheduler()`;
+  - `POST /api/geoip/update` — запустить загрузку сейчас (409, если уже идёт; флаг-гард как в коллекторах).
+
+### 7. Интеграция в пайплайн (geoip-first, RIPE-fallback)
+- `traffic-flow-engine.ts` (`queueParsedFlows`, ~строка 336): `lookupRipeCached` → `resolveFlowIp`. Логика misses не меняется: при готовом mmdb публичные IP (v4+v6) резолвятся сразу, очередь RIPE пустеет; до скачивания баз — прежнее поведение.
+- Остальные вызовы `lookupRipeCached` → `resolveFlowIp` (grep: как минимум `traffic-flow-analytics.ts` ~258–271).
+- `classifyFlowDst`/бренды не трогаем: holder из mmdb (org name) встаёт в существующие `HOLDER_BRANDS`-регулярки как есть.
+
+### 8. Frontend (по next-shadcn-production / ui-guardian: только переиспользование)
+- Секция «GeoIP-базы (GeoLite2)» внутри существующей `components/traffic/netflow-settings-panel.tsx`: статус (готово/не скачано, даты сборки Country/ASN, последняя проверка, ошибка), тумблер автообновления, интервал, кнопка «Обновить сейчас» с индикатором. Только уже используемые в панели примитивы (Switch/Button/поля) — никаких новых визуальных паттернов и Card-shell. API-клиент через существующие http-хелперы.
+
+### 9. Хаускипинг, тесты, проверки
+- `backend/.gitignore`: `storage/geoip/`.
+- Тесты `backend/src/services/traffic-flow-geoip.test.ts` + скрипт `test:geoip` (по образцу `test:traffic-flow`): приоритет фасада (geoip hit → RIPE не зовётся; miss → fallback), negative на приватных IP, фильтрация EU/ZZ через `isIsoCountry`, коллектор с мокнутым fetch (304-skip, битый файл → подмены нет, `.prev` сохранён), dims по стране/ASN с засеянным ридером.
+- Проверки после реализации (обязательно по правилам): типы/сборка бэка (`npm run build -w mikrotik-manager-backend`), типы фронта при правке UI (`npx tsc --noEmit`), `npm run test:geoip` и `test:traffic-flow`; предупреждения не игнорировать.
+- Коммит: `feat(netflow): <subject по-русски>` — новая пользовательская фича (мгновенные страна/ASN в потоках), по commit-messages-ru.
+- README: короткий раздел о GeoIP; примечание, что в Docker `storage/geoip` ephemeral без тома — базы перекачаются после пересоздания контейнера (~17 МБ); при желании смонтировать volume.
+
+## Что это даёт
+Страна и ASN появляются у потока мгновенно при ingest (включая IPv6), без ограничения скорости RIPE; dims `country`/`asn` в `flow_daily_dims`, аналитика (карта, топы, monthly) становятся полными сразу. Внешняя зависимость от stat.ripe.net остаётся только как fallback до первой загрузки баз.

.zcode/plans/plan-sess_fca5e2e2-1ed7-4e6c-a22c-4fe44786d13a.md

@@ -0,0 +1,46 @@
+# IKEv2/IPsec VPN: клиенты, IP-адреса и сертификаты — по образцу WireGuard
+
+## Архитектура (как у WireGuard)
+
+Роутер — источник истины: live-чтение через существующий REST-клиент (`mikrotik.ts`), мутации прямыми REST-вызовами, история через `config_revisions` (новая секция `"ipsec"`; `section` — TEXT без CHECK → **SQL-миграция не нужна**). Новых таблиц нет. Объекты, созданные мастером/при создании клиентов, помечаются managed-комментарием `mm-ipsec` (по образцу managed-markers).
+
+## Модель RouterOS (что создаём/читаем)
+
+Мастер инициализации сервера (per router): CA-сертификат (`/certificate add` + `sign`, key-usage=key-cert-sign,crl-sign), серверный сертификат (CN=адрес/домен, SAN, tls-server), `/ip/ipsec/peer` (passive, exchange-mode=ike2, certificate=серверный cert), `/ip/ipsec/profile`+`proposal` (aes-256/sha256/modp2048, pfs), `/ip pool` + `/ip/ipsec/mode-config` «VPN» (address-pool, dns), policy-template, и опциональное (default on, чекбокс) managed srcnat masquerade-правило «интернет клиентам».
+
+Клиент = `/ip/ipsec/identity`: **Сертификат** (`/certificate add` CN=<имя> → `sign` ca=<CA> → `export-certificate type=pkcs12` → файл `.p12` скачивается с роутера → identity match-by=certificate) или **PSK** (auth-method=pre-shared-key, remote-id+secret). IP: «из пула» (общий mode-config) или статический (персональный `mc-<user>` mode-config с `address=x.x.x.x/32`). Онлайн — `/ip/ipsec/active-peers`.
+
+Клиентские загрузки: `.p12` (cert+key+CA, passphrase) + strongSwan `.sswan` (генерация на бэкенде) + текстовая инструкция. Перекачка `.p12` — повторный export с новой passphrase (ключ остаётся на роутере).
+
+## Бэкенд
+
+1. **`mikrotik.ts`**: `downloadFile(name): Promise<Buffer>` — бинарно-безопасный GET `/rest/file/<name>` (с fallback `flash/<name>`, как у `uploadTextFile`; текущий конвейер парсит JSON как utf8 — нужен Buffer-режим); хелперы `signCertificate` (с поллингом готовности, sign небыстрый), `exportCertificatePkcs12(name, passphrase)`.
+2. **`services/ipsec-config.ts`** (чистые, тестируемые): генератор `.sswan` и инструкции, поиск свободного IP в пуле, naming-конвенции (`ipsec-ca`, `ipsec-server`, `mc-<user>`, `ipsec-user-<name>`).
+3. **`services/ipsec-ca.ts`**: `ensureCa/ensureServerCert/issueClientCert/exportClientP12` — add → sign (poll) → export → download.
+4. **`services/ipsec-ros.ts`**: put/patch/delete для `/ip/ipsec/{peer,identity,mode-config,profile,proposal,policy}`, `/ip/pool`, NAT managed-правило.
+5. **`services/ipsec-live.ts`**: `fetchIpsecState(server)` — параллельные GET peer/identity/mode-config/pool/active-peers/certificate (+какие из них наши по маркеру/имени) → DTO; `listIpsec()` fan-out с failures; `countIpsecClients()` для сайдбара.
+6. **`entity-snapshots.ts`**: `canonicalIpsecSnapshot/parseIpsecSnapshot/planIpsecRestore` (секреты через `isHiddenSecret`); `CONFIG_SECTIONS` += `"ipsec"`; enum в `schema.ts` (миграции нет).
+7. **`routes/ipsec.ts`**: `GET /ipsec` (+observed revision), `POST /ipsec/server/init`, `DELETE /ipsec/server/:serverId` (только managed-объекты), `POST /ipsec/users` (ответ включает одноразовый p12 base64), `PATCH /ipsec/users/:serverId/:rosId` (имя/статический IP/psk), `DELETE /ipsec/users/...` (identity + mc + опционально клиентский cert), `POST /ipsec/users/:serverId/:rosId/cert` (перекачка p12), `GET /ipsec/revisions` + `POST /ipsec/revisions/:id/restore` — всё по образцу `routes/wireguard.ts` (`captureAndAppendRevision`). Регистрация в `index.ts`; `/api/ipsec` в обе группы network-правил `permissions.ts`.
+8. **Модуль Пользователи**: `InterfaceType` += `"ipsec"` (iface-type.ts, schema.ts enum — TEXT, без миграции); каталог интерфейсов дополняется IPsec-клиентами (identity name + CN в peerPublicKey/peerName) — привязка app-пользователя к VPN-клиенту.
+
+## Контракт
+
+`packages/contracts/src/ipsec.ts` (+`package.json` exports, `index.ts`): `ipsecPeerDto/identityDto/modeConfigDto/poolDto/activePeerDto/certInfoDto/serverSummaryDto`, list-response с failures, `initRequest` (CN/SAN, пул, DNS, NAT-чекбокс), `userCreateRequest` (имя, auth: certificate|psk, psk?, ip: static|pool, passphrase, daysValid), `certDownloadResponse {filename, contentB64, mime}`.
+
+## Фронт
+
+`app/(main)/ipsec/page.tsx` — «одно окно» по образцу WG-страницы: ServerRail + KPI (серверы IKEv2 / клиенты / онлайн / CA) + Tabs **«Клиенты»** (grid: имя, сервер, аутентификация, IP, онлайн, действия — скачать .p12/.sswan, изменить, удалить; Sheet создания клиента), **«Сервер»** (peer/pool/mode-config/certs + мастер инициализации Stepper + статус NAT-правила), **«CLI»** (шпаргалка). История/restore — `ConfigHistorySheet`. Компоненты `components/ipsec/*` на существующих DataGridShell/form-kit/Sheet; скачивание бинарного p12 — Blob из base64 (по образцу `downloadText`), `.sswan`/инструкция — через `CodeExportSheet`. Сайдбар «IPsec / IKEv2» в «Управление» + бейдж (`sidebar-counts.ts` + mock в `sidebar-badges.ts`) + command-palette. Mock-данные в `lib/data.ts` для демо-режима.
+
+## Тесты и проверка
+
+- `ipsec-config.test.ts` (чистые функции: sswan, свободный IP, naming); `entity-snapshots.test.ts` — `planIpsecRestore` + `opsTouchOnly(["/ip/ipsec", ...])`.
+- `npm run build -w @mmapp/contracts`; `tsc` backend/root; `npm --prefix backend run test:config-sync && test:wireguard` + новые; eslint без новых ошибок.
+- Демо-режим: визуальная проверка страницы в браузере (как в прошлый раз).
+
+## Риски (проверить на живом роутере при внедрении)
+
+- REST-скачивание файла `GET /rest/file/<name>` — еслиRouterOS отдаёт только метаданные, fallback: чтение `contents` маленьких PEM-файлов или сборка p12 из PEM-частей.
+- Точные имена полей mode-config (`address` vs `address-pool`) сверить с живым GET и адаптировать.
+- `/certificate/sign` — поллинг готовности с таймаутом ~30–60 с.
+
+Объём большой; коммит/пуш — по готовности, отдельным `feat(ipsec): …`.

AGENTS.md

@@ -14,3 +14,10 @@
 ## Локальный запуск
 
 Два процесса из корня: `npm run dev` (frontend :3000) и `npm --prefix backend run dev` (backend :8000). Перед первым запуском — `npm install`, для backend — `backend/.env` из `backend/.env.example`. Подробности — `.cursor/rules/dev-run-command.mdc` и `README.md`.
+
+## ReUI
+
+Skill: `.agents/skills/reui` (Codex), `.claude/skills/reui`, `.cursor/skills/reui`, `.opencode/skills/reui` — версия `fe6742e29c` (22 free components).
+Codex MCP: `.codex/config.toml`, стиль `base-nova`, авторизация через переменную окружения `REUI_LICENSE_KEY`. Для PRO-реестра shadcn тот же ключ хранится в `.env.local` (исключён из Git); реестр настроен в `components.json`. После изменения переменной окружения перезапустить Codex.
+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) · [Cursor](https://reui.io/docs/cursor).  
+Обновление skill: `curl.exe -fsSL https://mcp.reui.io/install | node -` из корня проекта.

Dockerfile.frontend

@@ -14,12 +14,14 @@ ARG NEXT_PUBLIC_DEFAULT_DATA_SOURCE=live
 ARG NEXT_PUBLIC_ALLOW_MOCK_DATA=false
 ARG NEXT_PUBLIC_APP_VERSION=dev
 ARG NEXT_PUBLIC_RELEASE_URL=
+ARG NEXT_PUBLIC_AUTH_PORTAL_URL=https://auth.shnt.top
 ENV BACKEND_INTERNAL_URL=$BACKEND_INTERNAL_URL
 ENV NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL
 ENV NEXT_PUBLIC_DEFAULT_DATA_SOURCE=$NEXT_PUBLIC_DEFAULT_DATA_SOURCE
 ENV NEXT_PUBLIC_ALLOW_MOCK_DATA=$NEXT_PUBLIC_ALLOW_MOCK_DATA
 ENV NEXT_PUBLIC_APP_VERSION=$NEXT_PUBLIC_APP_VERSION
 ENV NEXT_PUBLIC_RELEASE_URL=$NEXT_PUBLIC_RELEASE_URL
+ENV NEXT_PUBLIC_AUTH_PORTAL_URL=$NEXT_PUBLIC_AUTH_PORTAL_URL
 COPY packages/contracts packages/contracts
 COPY next.config.ts tsconfig.json postcss.config.mjs components.json ./
 COPY app app

README.md

@@ -19,17 +19,17 @@
 | Компонент | Путь | Стек | Порт (runtime) | Docker-образ |
 |-----------|------|------|----------------|--------------|
 | Frontend | корень (`app/`, `components/`, `lib/`, …) | Next.js 16.2.4 (App Router), React 19 | 3000 | `…-frontend` |
-| Backend | `backend/` | Fastify 5, TypeScript ESM, SQLite, Drizzle | 8000 | `…-backend` |
+| Backend | `backend/` | Fastify 5, TypeScript ESM, PostgreSQL 18, Drizzle | 8000 | `…-backend` |
 | Контракты | `packages/contracts/` | Zod 4, `@mmapp/contracts` | — | встраиваются в frontend/backend |
 | Updater | `deploy/updater/` | bash, `docker:27-cli`, curl, jq | — | `…-updater` |
 | Деплой | `deploy/docker-compose.yml` | Docker Compose | — | — |
-| CI | `.gitea/workflows/docker.yml` | Gitea Actions, Buildx | — | push в `git.shts.su` |
+| CI | `.gitea/workflows/docker.yml` | Gitea Actions, Buildx | — | push в `git.shx.one` |
 
 Имена образов в registry для репозитория `denozord/MikrotikManager-3`:
 
-- `git.shts.su/denozord/mikrotikmanager-backend`
-- `git.shts.su/denozord/mikrotikmanager-frontend`
-- `git.shts.su/denozord/mikrotikmanager-updater`
+- `git.shx.one/denozord/mikrotikmanager-backend`
+- `git.shx.one/denozord/mikrotikmanager-frontend`
+- `git.shx.one/denozord/mikrotikmanager-updater`
 
 Для другого owner/repo подставьте имя по правилу CI (см. [CI/CD](#cicd-gitea-actions)).
 
@@ -43,24 +43,25 @@ flowchart TB
     Browser["Браузер"]
     NextDev["Next.js :3000"]
     FastifyDev["Fastify :8000"]
-    SqliteDev["SQLite файл"]
+    PostgresDev["PostgreSQL 18"]
     Contracts["@mmapp/contracts"]
     Browser --> NextDev
     Browser -->|"fetch /api, CORS"| FastifyDev
-    FastifyDev --> SqliteDev
+    FastifyDev --> PostgresDev
     Contracts --> NextDev
     Contracts --> FastifyDev
   end
 
   subgraph ci [Gitea Actions]
     WF[".gitea/workflows/docker.yml"]
-    WF --> Reg["git.shts.su registry"]
+    WF --> Reg["git.shx.one registry"]
   end
 
   subgraph prod [Прод-сервер]
     FE["mmapp-frontend :3000"]
     BE["mmapp-backend :8000"]
-    DBVol["volume backend-data /app/data"]
+    PG["mmapp-postgres"]
+    DBVol["volume sqlite ETL /app/data"]
     UPD["mmapp-updater"]
     Sock["/var/run/docker.sock"]
     Reg --> FE
@@ -69,6 +70,7 @@ flowchart TB
     UPD --> Sock
     UPD --> FE
     UPD --> BE
+    BE --> PG
     BE --> DBVol
     BrowserProd["Клиент"] --> FE
     BrowserProd -->|"live + backendUrl"| BE
@@ -117,7 +119,7 @@ sequenceDiagram
 ```
 
 - Триггер workflow: `push` в ветку `main`, ручной `workflow_dispatch`.
-- Параллельные jobs: `backend-image`, `frontend-image`, `updater-image`; опционально `notify-webhook` после backend и frontend, если задан секрет `DEPLOY_WEBHOOK_URL`.
+- Параллельные jobs: `backend-test` (PostgreSQL 18), `backend-image`, `frontend-image`, `updater-image`; опционально `notify-webhook` после backend и frontend, если задан секрет `DEPLOY_WEBHOOK_URL`.
 - Теги на каждый успешный push: **`:latest`** и **`:<commit-sha>`**; платформа **linux/amd64**.
 - На сервере образы подтягиваются вручную (`docker compose pull`) и/или через **updater** (сравнение digest у тега из `targets.json`). Webhook CI **не заменяет** updater.
 
@@ -125,7 +127,8 @@ sequenceDiagram
 
 | Зависимость | Реализация |
 |-------------|------------|
-| SQLite | Не отдельный контейнер. Файл `mikrotik.db` в томе `backend-data` → `/app/data` (`DATABASE_PATH=/app/data/mikrotik.db` в образе backend). |
+| PostgreSQL | Контейнер `mmapp-postgres` (`postgres:18-alpine`). `DATABASE_URL=postgres://mmapp:…@postgres:5432/mmapp`. |
+| SQLite (ETL) | Файл `mikrotik.db` на томе `/app/data` (`DATABASE_PATH=/app/data/mikrotik.db`). При старте, пока нет маркера `data_migration.sqlite_imported_at`, backend импортирует sqlite в PG (`ON CONFLICT` / upsert). После успешного импорта повтор не копирует заново. Том PG18: `mmapp-pgdata:/var/lib/postgresql` (не `.../data`). |
 | Docker socket | Только у контейнера updater: `/var/run/docker.sock` — доступ к Docker API хоста (управление контейнерами, pull). |
 
 ## Локальная разработка
@@ -134,7 +137,9 @@ sequenceDiagram
 
 - **Node.js 22** (как в `Dockerfile.frontend` и `backend/Dockerfile`).
 - **npm** с workspaces; установка из корня: `npm ci` или `npm install`.
-- Для нативной сборки `better-sqlite3` на Linux может понадобиться toolchain (`python3`, `make`, `g++`); в Docker-образе backend они уже ставятся.
+- Для нативной сборки `better-sqlite3` на Linux может понадобиться toolchain (`python3`, `make`, `g++`); в Docker-образе backend они уже ставятся (нужен только для одноразового boot-ETL из `mikrotik.db`).
+- Локально нужен PostgreSQL 18 (`deploy/docker-compose.postgres.yml` или `DATABASE_URL`).
+- Backend Docker-образ ставит только workspaces `backend` + `contracts` (без корневых Next/React deps); в production логи — JSON без `pino-pretty`.
 
 ### Запуск
 
@@ -160,7 +165,8 @@ Backend — скопировать `backend/.env.example` в `backend/.env`:
 
 | Переменная | По умолчанию | Назначение |
 |------------|--------------|------------|
-| `DATABASE_PATH` | `./mikrotik.db` | путь к файлу SQLite |
+| `DATABASE_URL` | `postgres://mmapp:[email protected]:5432/mmapp` | подключение к PostgreSQL |
+| `DATABASE_PATH` | `./mikrotik.db` | SQLite только для boot-ETL, если PG пустой |
 | `PORT` | `8000` | порт Fastify |
 | `CORS_ORIGIN` | `http://localhost:3000` | origin фронтенда для CORS |
 
@@ -178,23 +184,29 @@ Frontend — в репозитории нет корневого `.env.example`.
 npm run build -w @mmapp/contracts
 ```
 
-После изменения схем Drizzle:
+Схема PostgreSQL накатывается при старте backend из [`backend/drizzle/0000_postgresql.sql`](backend/drizzle/0000_postgresql.sql). Опциональный ETL:
 
 ```bash
-npm --prefix backend run db:generate
-npm --prefix backend run db:migrate
-npm --prefix backend run db:studio
+npm --prefix backend run db:migrate-from-sqlite
 ```
 
+### GeoIP-базы GeoLite2 (страны и ASN для NetFlow)
+
+Backend держит локальные mmdb-базы MaxMind GeoLite2 (Country + ASN) в `backend/storage/geoip/` и скачивает их с зеркала [P3TERX/GeoLite.mmdb](https://github.com/P3TERX/GeoLite.mmdb) — без регистрации и ключей. Lookup страны/ASN потока при ingest становится мгновенным (включая IPv6) и не упирается в лимиты RIPEstat; пока базы не скачаны или lookup промахнулся, работает прежний RIPE-fallback.
+
+Управление — секция «GeoIP-базы (GeoLite2)» в настройках NetFlow (страница «Сбор данных»): автообновление (по умолчанию проверка раз в 7 дней, upstream обновляется еженедельно), статус сборки баз и кнопка «Обновить сейчас». Джоба планировщика — `geoip_update`. Атрибуция: данные MaxMind GeoLite2, CC BY-SA 4.0.
+
+Примечание для Docker: каталог `storage/geoip` внутри контейнера ephemeral — без смонтированного volume базы (~17 МБ) перекачаются после пересоздания контейнера. Каталог переопределяется переменной `GEOIP_DIR`.
+
 ## CI/CD (Gitea Actions)
 
 Файл: `.gitea/workflows/docker.yml` (имя workflow: **Docker images**).
 
 | Job | Build context | Dockerfile | Имя образа |
 |-----|---------------|------------|------------|
-| `backend-image` | `.ci/docker/backend` (staging в CI) | `backend/Dockerfile` | `git.shts.su/<owner>/<stem>-backend` |
-| `frontend-image` | `.ci/docker/frontend` | `Dockerfile.frontend` | `git.shts.su/<owner>/<stem>-frontend` |
-| `updater-image` | `deploy/updater` | `deploy/updater/Dockerfile` | `git.shts.su/<owner>/<stem>-updater` |
+| `backend-image` | `.ci/docker/backend` (staging в CI) | `backend/Dockerfile` | `git.shx.one/<owner>/<stem>-backend` |
+| `frontend-image` | `.ci/docker/frontend` | `Dockerfile.frontend` | `git.shx.one/<owner>/<stem>-frontend` |
+| `updater-image` | `deploy/updater` | `deploy/updater/Dockerfile` | `git.shx.one/<owner>/<stem>-updater` |
 
 - `<owner>` — первая часть `gitea.repository`, lower case.
 - `<stem>` — имя репозитория lower case без суффикса `-<цифры>` в конце (например `MikrotikManager-3` → `mikrotikmanager`).
@@ -207,27 +219,83 @@ npm --prefix backend run db:studio
 
 ### Версионирование и релизы
 
-- Базовая версия: **`v1.0.0`**. Линия semver: `1.x.y` (major `2.x` вне scope).
+- Базовая версия: **`v1.0.0`**. Поддерживаются patch, minor и major; выпуск `2.0.0` инициируется breaking-коммитом, версия вычисляется CI.
 - Job **`prepare-release`** запускает [`.ci/scripts/compute-release.mjs`](.ci/scripts/compute-release.mjs): коммиты с последнего тега `v*.*.*`, bump по **Conventional Commits**.
-- **`feat` / `feat!` / `BREAKING CHANGE`** → minor (`1.x.0`); **`fix`**, `chore`, `docs`, `refactor`, `style`, `test`, `build`, `ci` → patch (`1.0.x`).
+- **`!` после типа/scope или footer `BREAKING CHANGE:` / `BREAKING-CHANGE:`** → major (`2.0.0` после `1.x`); **`feat`** → minor (`1.x.0`); **`fix`**, `chore`, `docs`, `refactor`, `style`, `test`, `build`, `ci` → patch (`1.0.x`).
 - Если после последнего тега нет новых коммитов, **релиз** пропускается; Docker-образы при этом всё равно собираются и публикуются с `:latest` и `:<sha>`.
 - Первый релиз без тега `v1.0.0` возможен автоматически: CI берёт историю `HEAD`, считает bump от `1.0.0` и создаёт тег (например `v1.1.0` при `feat:`).
-- Job **`publish-release`**: annotated tag `v1.2.3`, Gitea Release на `https://git.shts.su` (markdown notes), образы с тегами `:latest`, `:<sha>`, `:<semver>`.
+- Job **`publish-release`**: annotated tag `v1.2.3`, Gitea Release на `https://git.shx.one` (markdown notes), образы с тегами `:latest`, `:<sha>`, `:<semver>`.
 - UI: версия в sidebar и страница **`/releases`**; manifest `public/release-manifest.json` (в CI подставляется из артефакта).
 - Bootstrap: один раз выставить `1.0.0` в workspace `package.json` и создать тег **`v1.0.0`** на `main` перед первым автоматическим bump.
 - Сообщения коммитов: см. [`.cursor/rules/release-versioning.mdc`](.cursor/rules/release-versioning.mdc); subject и body — **на русском**, префикс Conventional Commits — на английском.
 
 ## Прод-развёртывание Docker
 
-Эталон: `deploy/docker-compose.yml`. Рабочий каталог для команд compose — `deploy/` (или укажите `-f deploy/docker-compose.yml` из корня репозитория).
+Эталон без reverse-proxy: `deploy/docker-compose.yml` (порты `3000` / `8000` на хост).
+
+Стек с Traefik + HTTPS (Let's Encrypt DNS-01 / Cloudflare), по аналогии с CDNManager: [`deploy/docker-compose.traefik.yml`](deploy/docker-compose.traefik.yml) + [`deploy/env.traefik.example`](deploy/env.traefik.example). На сервере публикуются только `:80`/`:443`; frontend получает HTTPS, `/api` и `/health` проксируются на backend внутри сети `mmapp`. Домен по умолчанию: `mm.shnt.top`.
+
+### CDN Manager + MikrotikManager (один Traefik)
+
+Полный стек: Traefik + `cdn.shnt.top` + `mm.shnt.top` в одном Compose.
+
+| Файл | Назначение |
+|------|------------|
+| [`deploy/docker-compose.cdn-mm.yml`](deploy/docker-compose.cdn-mm.yml) | Traefik + CDN Manager + MM backend/frontend/updater |
+| [`deploy/env.cdn-mm.example`](deploy/env.cdn-mm.example) | общий `.env` |
+
+```bash
+mkdir -p /opt/cdn-mm/{data/cdn,data/mm,state,updater}
+cp deploy/docker-compose.cdn-mm.yml /opt/cdn-mm/docker-compose.yml
+cp deploy/env.cdn-mm.example /opt/cdn-mm/.env
+cp deploy/updater/targets.json.example /opt/cdn-mm/updater/targets.json
+# заполнить CF_DNS_API_TOKEN, CLOUDFLARE_API_TOKEN, AUTH_JWT_SECRET, CORS_ORIGIN, …
+docker login git.shx.one
+cd /opt/cdn-mm && docker compose pull && docker compose up -d
+curl -fsS https://cdn.shnt.top/health
+curl -fsS https://mm.shnt.top/health
+```
+
+Данные: `./data/cdn` (CDN), `./data/mm` (MM). Сеть Traefik: `edge`. Не запускайте параллельно standalone `docker-compose.traefik.yml` CDNManager или MM на тех же 80/443.
+
+**Если на сервере уже крутится CDNManager Traefik** (`cdnmanager-traefik`, сеть `cdnmanager`) — **не** поднимайте второй Traefik. Варианты:
+
+| Способ | Файл |
+|--------|------|
+| Compose без своего Traefik | [`deploy/docker-compose.traefik-cdn.yml`](deploy/docker-compose.traefik-cdn.yml) |
+| Plain `docker` CLI (скрипт) | [`deploy/run-beside-cdn-traefik.sh`](deploy/run-beside-cdn-traefik.sh) |
+
+Frontend вешается в сеть `cdnmanager` с Traefik-labels; backend/updater остаются в `mmapp`. Сертификат для `MM_DOMAIN` выпускает уже работающий Traefik CDNManager (тот же `letsencrypt` / Cloudflare DNS-01).
+
+```bash
+# Compose (рекомендуется)
+mkdir -p /opt/mmapp/{data,state,updater}
+cp deploy/docker-compose.traefik-cdn.yml /opt/mmapp/docker-compose.yml
+cp deploy/env.traefik.example /opt/mmapp/.env          # MM_DOMAIN + CORS_ORIGIN
+cp deploy/updater/targets.json.example /opt/mmapp/updater/targets.json
+cd /opt/mmapp && docker compose pull && docker compose up -d
+
+# Или одной CLI-командой (скрипт сам сделает network/pull/run/connect):
+curl -fsSL -o /tmp/run-beside-cdn-traefik.sh \
+  https://git.shx.one/denozord/MikrotikManager/raw/branch/main/deploy/run-beside-cdn-traefik.sh
+chmod +x /tmp/run-beside-cdn-traefik.sh
+sudo MM_DOMAIN=mm.shnt.top CORS_ORIGIN=https://mm.shnt.top /tmp/run-beside-cdn-traefik.sh
+```
+
+DNS: `A`/`AAAA` для `mm.shnt.top` → IP VPS, Cloudflare **DNS only**. Проверка: `curl -fsS https://mm.shnt.top/health`.
+
+SSO auth-portal: [`docs/integrate-auth-portal.md`](docs/integrate-auth-portal.md) (app id `mm`).
+
+Рабочий каталог для команд compose — `deploy/` (или `-f deploy/docker-compose.yml` / `-f deploy/docker-compose.traefik.yml` / `-f deploy/docker-compose.traefik-cdn.yml` / `-f deploy/docker-compose.cdn-mm.yml` из корня).
 
 ### Прод-контейнеры
 
 | Сервис | `container_name` | Образ (пример) | Порты host:container | Тома | `restart` |
 |--------|------------------|----------------|----------------------|------|-----------|
-| backend | `mmapp-backend` | `git.shts.su/denozord/mikrotikmanager-backend:latest` | `8000:8000` | `backend-data` → `/app/data` | `unless-stopped` |
-| frontend | `mmapp-frontend` | `git.shts.su/denozord/mikrotikmanager-frontend:latest` | `3000:3000` | — | `unless-stopped` |
-| updater | `mmapp-updater` | `git.shts.su/denozord/mikrotikmanager-updater:latest` | не публикуются | docker.sock, `updater-state` → `/state`, `targets.json` → `/etc/updater/targets.json:ro` | `unless-stopped` |
+| postgres | `mmapp-postgres` | `postgres:18-alpine` | нет (внутренняя сеть) | `mmapp-pgdata` | `unless-stopped` |
+| backend | `mmapp-backend` | `git.shx.one/denozord/mikrotikmanager-backend:latest` | `8000:8000` | sqlite ETL → `/app/data` | `unless-stopped` |
+| frontend | `mmapp-frontend` | `git.shx.one/denozord/mikrotikmanager-frontend:latest` | `3000:3000` | — | `unless-stopped` |
+| updater | `mmapp-updater` | `git.shx.one/denozord/mikrotikmanager-updater:latest` | не публикуются | docker.sock, `updater-state` → `/state`, `targets.json` → `/etc/updater/targets.json:ro` | `unless-stopped` |
 
 Метки для updater на backend и frontend:
 
@@ -241,11 +309,14 @@ npm --prefix backend run db:studio
 
 ### Переменные окружения (прод)
 
-**Backend** (в образе заданы `NODE_ENV=production`, `PORT=8000`, `DATABASE_PATH=/app/data/mikrotik.db`; в compose обычно переопределяют только CORS):
+**Backend** (в образе заданы `NODE_ENV=production`, `PORT=8000`; в compose задают `DATABASE_URL`, `DATABASE_PATH` для ETL и CORS):
 
 | Переменная | Источник в compose | Назначение |
 |------------|-------------------|------------|
 | `CORS_ORIGIN` | `${CORS_ORIGIN:-http://localhost:3000}` | origin UI, с которого браузер вызывает API |
+| `DATABASE_URL` | `postgres://mmapp:${POSTGRES_PASSWORD}@postgres:5432/mmapp` | PostgreSQL |
+| `DATABASE_PATH` | `/app/data/mikrotik.db` | SQLite на томе для одноразового ETL |
+| `POSTGRES_PASSWORD` | обязателен | пароль пользователя `mmapp` |
 
 **Frontend** (в образе: `PORT=3000`, `HOSTNAME=0.0.0.0`). URL API в образ **не** зашит — задаётся в браузере (режим live + URL бэкенда) вместе с `CORS_ORIGIN` на backend.
 
@@ -256,16 +327,16 @@ npm --prefix backend run db:studio
 | `TARGETS_FILE` | `/etc/updater/targets.json` | список целей |
 | `STATE_FILE` | `/state/updater-state.json` | digest и ошибки |
 | `POLL_INTERVAL_SECONDS` | `300` | пауза между циклами опроса |
-| `HEALTH_TIMEOUT_SECONDS` | `120` | ожидание HTTP health |
+| `HEALTH_TIMEOUT_SECONDS` | `600` | ожидание HTTP health (первый boot с ETL может занять минуты) |
 | `STOP_TIMEOUT_SECONDS` | `30` | `docker stop -t` |
-| `REGISTRY` | `git.shts.su` | registry для `docker login` |
+| `REGISTRY` | `git.shx.one` | registry для `docker login` |
 | `REGISTRY_USERNAME` | пусто | логин (если заданы оба с паролем) |
 | `REGISTRY_PASSWORD` | пусто | пароль registry |
 
 ### Docker Compose
 
 ```bash
-docker login git.shts.su
+docker login git.shx.one
 export CORS_ORIGIN=http://<хост>:3000
 export REGISTRY_USERNAME=<user>
 export REGISTRY_PASSWORD=<token>
@@ -307,8 +378,8 @@ docker run -d \
   -v backend-data:/app/data \
   --label mmapp.updater.managed=true \
   --label mmapp.updater.target=backend \
-  --label mmapp.updater.image=git.shts.su/denozord/mikrotikmanager-backend:latest \
-  git.shts.su/denozord/mikrotikmanager-backend:latest
+  --label mmapp.updater.image=git.shx.one/denozord/mikrotikmanager-backend:latest \
+  git.shx.one/denozord/mikrotikmanager-backend:latest
 ```
 
 **Frontend:**
@@ -320,8 +391,8 @@ docker run -d \
   -p 3000:3000 \
   --label mmapp.updater.managed=true \
   --label mmapp.updater.target=frontend \
-  --label mmapp.updater.image=git.shts.su/denozord/mikrotikmanager-frontend:latest \
-  git.shts.su/denozord/mikrotikmanager-frontend:latest
+  --label mmapp.updater.image=git.shx.one/denozord/mikrotikmanager-frontend:latest \
+  git.shx.one/denozord/mikrotikmanager-frontend:latest
 ```
 
 **Updater:**
@@ -331,7 +402,7 @@ docker volume create updater-state
 docker run -d \
   --name mmapp-updater \
   --restart unless-stopped \
-  -e REGISTRY=git.shts.su \
+  -e REGISTRY=git.shx.one \
   -e REGISTRY_USERNAME=<user> \
   -e REGISTRY_PASSWORD=<token> \
   -e POLL_INTERVAL_SECONDS=300 \
@@ -340,7 +411,7 @@ docker run -d \
   -v /var/run/docker.sock:/var/run/docker.sock \
   -v updater-state:/state \
   -v /path/to/targets.json:/etc/updater/targets.json:ro \
-  git.shts.su/denozord/mikrotikmanager-updater:latest
+  git.shx.one/denozord/mikrotikmanager-updater:latest
 ```
 
 ### Проверка после деплоя
@@ -399,7 +470,7 @@ bash deploy/updater/validate.sh
 
 ## Первичная настройка сервера
 
-Пошагово на чистом Linux-хосте с доступом в интернет и к `git.shts.su`.
+Пошагово на чистом Linux-хосте с доступом в интернет и к `git.shx.one`.
 
 1. Установить Docker Engine и плагин Compose (официальная документация Docker для вашего дистрибутива).
 2. Проверить:
@@ -413,7 +484,7 @@ docker compose version
 4. Войти в registry:
 
 ```bash
-docker login git.shts.su
+docker login git.shx.one
 ```
 
 5. Получить файлы деплоя: клонировать репозиторий или скопировать каталог `deploy/` и подготовить `deploy/updater/targets.json`.
@@ -443,8 +514,8 @@ Updater опрашивает registry с интервалом `POLL_INTERVAL_SEC
 ### Ручное обновление
 
 ```bash
-docker pull git.shts.su/denozord/mikrotikmanager-backend:latest
-docker pull git.shts.su/denozord/mikrotikmanager-frontend:latest
+docker pull git.shx.one/denozord/mikrotikmanager-backend:latest
+docker pull git.shx.one/denozord/mikrotikmanager-frontend:latest
 ```
 
 Через compose (пересоздание при смене образа):
@@ -460,18 +531,20 @@ docker compose up -d --force-recreate
 ### Откат
 
 - **Автоматически:** updater при failed health после обновления — контейнер на `previous_digest`.
-- **Вручную:** остановить контейнер, запустить образ с нужным тегом или digest из registry, сохранив те же volume и labels. Откат **схемы SQLite** updater не выполняет — нужен отдельный backup тома `backend-data` / файла `mikrotik.db`.
+- **Вручную:** остановить контейнер, запустить образ с нужным тегом или digest из registry, сохранив те же volume и labels. Откат **схемы PostgreSQL** updater не выполняет — нужен `pg_dump` / restore или том `mmapp-pgdata`.
 
-### Резервное копирование SQLite
+### Резервное копирование PostgreSQL
 
-Том `backend-data` (или `mmapp-backend-data` при явном `docker volume create`). Пример остановки backend для консистентной копии:
+Том `mmapp-pgdata` и (до cleanup) sqlite `mikrotik.db` на `/app/data`. Из UI: Настройки → «Скачать бэкап» (`pg_dump -Fc`). С хоста:
 
 ```bash
-docker stop mmapp-backend
-docker run --rm -v backend-data:/data -v $(pwd):/backup alpine tar czf /backup/mikrotik-db-backup.tar.gz -C /data .
-docker start mmapp-backend
+docker exec mmapp-postgres pg_dump -Fc -U mmapp mmapp > mikrotik-manager.dump
 ```
 
+Восстановление: UI «Восстановить из файла» или `pg_restore --clean --if-exists -d …`.
+
+Том sqlite после успешного ETL и smoke **не удаляйте сразу** — оставьте как fallback, затем уберите `mikrotik.db`, когда маркер `data_migration.sqlite_imported_at` подтверждён.
+
 ### Отладка
 
 | Действие | Команда |
@@ -485,7 +558,7 @@ docker start mmapp-backend
 
 1. Установить Docker Engine и Compose plugin; проверить `docker version` и `docker compose version`.
 2. Открыть порты 3000 и 8000 (или обеспечить доступ клиентов к UI и API).
-3. Выполнить `docker login git.shts.su`.
+3. Выполнить `docker login git.shx.one`.
 4. Склонировать репозиторий или скопировать `deploy/`.
 5. Задать `CORS_ORIGIN` (origin фронтенда для браузера).
 6. Задать `REGISTRY_USERNAME` и `REGISTRY_PASSWORD` для updater при приватном registry.

app/(main)/asns/page.tsx

@@ -8,25 +8,22 @@ import { AsnsDataGrid } from "@/components/data-grids/asns-data-grid"
 import { FileImportDialog } from "@/components/file-import-dialog"
 import { asns as mockAsns } from "@/lib/data"
 import { Button } from "@/components/ui/button"
-import { UploadIcon, DownloadIcon, PlusIcon, LoaderCircleIcon } from "lucide-react"
-import { useDataSource } from "@/lib/data-source"
-import { useEvoBGP } from "@/lib/evobgp-context"
-import { cn } from "@/lib/utils"
+import { UploadIcon, DownloadIcon, PlusIcon } from "lucide-react"
+import { useEvoCatalogView, EvoBgpCatalogStatus, EvoBgpCatalogUnavailable } from "@/components/settings/evobgp-catalog-status"
 import { toast } from "sonner"
 
 export default function AsnsPage() {
-  const { mode } = useDataSource()
-  const { enabled, snapshot, loading, error } = useEvoBGP()
+  const { mode, snapshot, loading, known } = useEvoCatalogView()
   const [importOpen, setImportOpen] = useState(false)
   const [search, setSearch] = useState("")
 
-  const useEvoCatalog = mode === "live" && enabled
+  const useEvoCatalog = mode === "live"
 
   const rows = useMemo(() => {
-    if (!useEvoCatalog) return mockAsns
+    if (mode === "mock") return mockAsns
     if (loading && !snapshot) return []
     return snapshot?.asns ?? []
-  }, [useEvoCatalog, loading, snapshot])
+  }, [mode, loading, snapshot])
 
   const filtered = useMemo(() => {
     if (!search) return rows
@@ -35,7 +32,7 @@ export default function AsnsPage() {
       (r) =>
         r.asn.toLowerCase().includes(q) ||
         r.org.toLowerCase().includes(q) ||
-        String(r.prefixes).includes(q),
+        (r.prefixes === null ? "" : String(r.prefixes)).includes(q),
     )
   }, [rows, search])
 
@@ -43,8 +40,7 @@ export default function AsnsPage() {
     <div className="flex flex-col h-full">
       <PageHeader
         crumbs={[{ label: "Данные" }, { label: "ASN" }]}
-        actions={
-          <>
+        actions={mode === "live" ? null : <>
             <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
               <UploadIcon className="size-4" />Импорт
             </Button>
@@ -60,32 +56,21 @@ export default function AsnsPage() {
             <p className="text-sm text-muted-foreground mt-1">
               Автономные системы — источники маршрутов для BGP-фильтров
             </p>
-            {useEvoCatalog && (
-              <p className={cn(
-                "text-xs mt-2 flex items-center gap-1.5",
-                error ? "text-destructive" : "text-muted-foreground",
-              )}>
-                {loading && <LoaderCircleIcon className="size-3.5 animate-spin shrink-0" />}
-                {error
-                  ? `EvoBGP: ${error}`
-                  : snapshot?.fetchedAt
-                    ? `Источник: EvoBGP, обновлено ${new Date(snapshot.fetchedAt).toLocaleString("ru-RU")}`
-                    : loading ? "Загрузка EvoBGP…" : "EvoBGP"}
-              </p>
-            )}
+            <div className="mt-3"><EvoBgpCatalogStatus /></div>
           </div>
           <DataPageCard>
             <DataPageToolbar
               search={search}
               onSearchChange={setSearch}
               searchPlaceholder="Поиск по ASN, имени, префиксам…"
-              countLabel={`${filtered.length} ASN`}
+              countLabel={known ? `${filtered.length} ASN` : "Количество: —"}
             />
-            <AsnsDataGrid
+            {known || loading ? <AsnsDataGrid
               asns={filtered}
               isLoading={useEvoCatalog && loading && !snapshot}
               pagination={useEvoCatalog}
-            />
+              emptyDescription={search ? "Измените поисковый запрос" : useEvoCatalog ? "В подтверждённом каталоге нет записей этого типа" : undefined}
+            /> : <EvoBgpCatalogUnavailable />}
           </DataPageCard>
         </div>
       </div>

app/(main)/bgp/page.tsx

@@ -1,34 +1,41 @@
 "use client"
 
-import { Fragment, useState, useMemo, useEffect } from "react"
+import { Suspense, useState, useMemo, useEffect } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
 import { PageHeader } from "@/components/page-header"
 import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { BgpSessionsDataGrid } from "@/components/data-grids/bgp-sessions-data-grid"
-import type { Filter } from "@/components/reui/filters"
-import { applyReuiFilters } from "@/lib/data-filters/apply-reui-filters"
+import { useBgpUrlState } from "@/hooks/use-bgp-url-state"
+import { QueryFilters } from "@/components/data-grids/query-filters"
+import { applyFilterQuery } from "@/lib/data-filters/apply-filter-query"
 import { BGP_FILTER_FIELDS } from "@/lib/data-filters/bgp-filter-fields"
 import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types"
+import { bgpCatalogSchema, bgpServersSchema, type BackendBgpSession, type BgpFailure } from "@/lib/bgp/response"
+import { fmtBgpNum, sumBgpCounters } from "@/lib/bgp/helpers"
 import { BGP_AS_NAMES } from "@/lib/bgp/types"
-import { Card, CardContent } from "@/components/ui/card"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { cn } from "@/lib/utils"
 import {
-  RefreshCwIcon, DownloadIcon, SearchIcon,
-  ActivityIcon, BarChart3Icon, ChevronRightIcon, ChevronDownIcon,
-  ArrowDownIcon, ClipboardCopyIcon, ServerIcon,
-  XIcon, AlertCircleIcon,
+  RefreshCwIcon, DownloadIcon,
+  ActivityIcon, BarChart3Icon,
+  ArrowDownIcon, ServerIcon,
+  AlertCircleIcon, GitMergeIcon, CheckCircleIcon,
 } from "lucide-react"
 import { useDataSource } from "@/lib/data-source"
+import { requestJson } from "@/shared/api/http-client"
+import { servers as mockServers, type Server } from "@/lib/data"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"
 
 // ─── types ────────────────────────────────────────────────────────────────────
 
 type BgpSession = BgpSessionRow
 type BgpTab    = "sessions" | "routers" | "analytics"
-type StateFilter = "all" | BgpState
-type TypeFilter  = "all" | BgpType
 
 const AS_NAMES = BGP_AS_NAMES
 // ─── mock data ────────────────────────────────────────────────────────────────
@@ -178,6 +185,7 @@ const SESSIONS: BgpSession[] = [
 // ─── visual helpers ───────────────────────────────────────────────────────────
 
 const STATE_STYLE: Record<BgpState, { bg: string; text: string; dot: string; label: string }> = {
+  Unknown: { bg: "bg-muted", text: "text-muted-foreground", dot: "bg-muted-foreground", label: "Неизвестно" },
   Established: { bg: "bg-emerald-500/10", text: "text-emerald-600 dark:text-emerald-400", dot: "bg-emerald-500", label: "Established" },
   Active:      { bg: "bg-amber-500/10",   text: "text-amber-600 dark:text-amber-400",     dot: "bg-amber-500",  label: "Active"       },
   Idle:        { bg: "bg-slate-500/10",   text: "text-slate-500 dark:text-slate-400",      dot: "bg-slate-500",  label: "Idle"         },
@@ -186,48 +194,32 @@ const STATE_STYLE: Record<BgpState, { bg: string; text: string; dot: string; lab
   OpenConfirm: { bg: "bg-violet-500/10",  text: "text-violet-600 dark:text-violet-400",   dot: "bg-violet-500", label: "OpenConfirm"  },
 }
 const TYPE_STYLE: Record<BgpType, { bg: string; text: string }> = {
+  Unknown: { bg: "bg-muted", text: "text-muted-foreground" },
   eBGP: { bg: "bg-blue-500/10",   text: "text-blue-600 dark:text-blue-400"   },
   iBGP: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
 }
 
-function StateBadge({ state }: { state: BgpState }) {
-  const s = STATE_STYLE[state]
-  return (
-    <span className={cn("inline-flex items-center gap-1.5 rounded border px-2 py-0.5 text-[11px] font-semibold",
-      s.bg, s.text, "border-current/20")}>
-      <span className={cn("size-1.5 rounded-full shrink-0", s.dot)} />
-      {s.label}
-    </span>
-  )
-}
-
 function TypeBadge({ type }: { type: BgpType }) {
   const s = TYPE_STYLE[type]
   return (
     <span className={cn("inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold",
       s.bg, s.text, "border-current/20")}>
-      {type}
+      {type === "Unknown" ? "Тип неизвестен" : type}
     </span>
   )
 }
 
 
-function fmtNum(n: number) {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
-  if (n >= 1_000)     return `${(n / 1_000).toFixed(0)}k`
-  return String(n)
-}
+const fmtNum = fmtBgpNum
 
 // ─── backend mapping ──────────────────────────────────────────────────────────
 
-interface BackendBgpSession {
-  id: string; serverId: number; serverName: string; serverSite: string; serverCountry: string
-  name: string; peerIp: string; remoteAs: number; localAs: number
-  localId: string; remoteId: string; state: string; type: "eBGP" | "iBGP"
-  uptime: string | null; holdTime: number; keepalive: number
-  prefixesRx: number; prefixesTx: number
-  inputMessages: number; outputMessages: number
-  capabilities: string[]; lastError: string | null
+type BackendServer = ReturnType<typeof bgpServersSchema.parse>[number]
+type InventoryServer = Server & { monitoringUnknown?: boolean }
+function mapBackendServer(s: BackendServer): InventoryServer {
+  return { id: String(s.id), name: s.name || s.host, host: s.host, model: "—", os: "—", site: s.site ?? "",
+    country: s.country || "UN", asn: s.asn ?? "", type: s.type ?? "exit-node", enabled: s.enabled,
+    status: s.status ?? "offline", monitoringUnknown: s.status == null, latency: s.latency ?? null, sessions: 0 }
 }
 
 function backendToFrontend(b: BackendBgpSession): BgpSession {
@@ -241,15 +233,15 @@ function backendToFrontend(b: BackendBgpSession): BgpSession {
     localAs:        b.localAs,
     routerId:       b.remoteId || b.localId,
     description:    b.name,
-    state:          (b.state as BgpState) || "Idle",
+    state:          Object.hasOwn(STATE_STYLE, b.state) ? b.state as BgpState : "Unknown",
     type:           b.type,
-    afi:            "IPv4 Unicast",
+    afi:            b.afi ?? "Неизвестно",
     uptime:         b.uptime,
     holdTime:       b.holdTime,
     keepalive:      b.keepalive,
     prefixesRx:     b.prefixesRx,
     prefixesTx:     b.prefixesTx,
-    prefixesActive: b.prefixesRx,
+    prefixesActive: null,
     inputMessages:  b.inputMessages,
     outputMessages: b.outputMessages,
     capabilities:   b.capabilities,
@@ -265,14 +257,12 @@ const BGP_FILTER_ACCESSORS = {
   afi: (s: BgpSession) => s.afi,
 }
 
-function SessionsTab({ sessions }: { sessions: BgpSession[] }) {
-  const [search, setSearch] = useState("")
-  const [stateFilter, setStateFilter] = useState<StateFilter>("all")
-  const [typeFilter, setTypeFilter] = useState<TypeFilter>("all")
-  const [advancedFilters, setAdvancedFilters] = useState<Filter[]>([])
-
+function SessionsTab({ sessions, emptyTitle, selectedSessionId, onSelectSession }: { sessions: BgpSession[]; emptyTitle?: string; selectedSessionId: string | null; onSelectSession: (id: string | null) => void }) {
+  const { search, setSearch, stateFilter, setStateFilter, typeFilter, setTypeFilter, filters: advancedFilters, setFilters: setAdvancedFilters, error: urlError, hasFilters, reset } = useBgpUrlState()
+  const fields = useMemo(() => BGP_FILTER_FIELDS.map(field => field.id === "afi" ? { ...field, options: Array.from(new Set(sessions.map(s => s.afi))).sort().map(value => ({ value, label: value })) } : field), [sessions])
   const q = search.toLowerCase()
   const filtered = useMemo(() => {
+    if (urlError) return []
     const base = sessions.filter((s) => {
       if (stateFilter !== "all" && s.state !== stateFilter) return false
       if (typeFilter !== "all" && s.type !== typeFilter) return false
@@ -280,46 +270,48 @@ function SessionsTab({ sessions }: { sessions: BgpSession[] }) {
         q &&
         !s.peerIp.includes(q) &&
         !s.description.toLowerCase().includes(q) &&
-        !s.serverLabel.includes(q) &&
+        !s.serverLabel.toLowerCase().includes(q) &&
         !String(s.remoteAs).includes(q) &&
-        !(AS_NAMES[s.remoteAs] ?? "").toLowerCase().includes(q)
+        !(s.remoteAs === null ? "" : AS_NAMES[s.remoteAs] ?? "").toLowerCase().includes(q)
       ) {
         return false
       }
       return true
     })
-    return applyReuiFilters(base, advancedFilters, BGP_FILTER_ACCESSORS)
-  }, [sessions, q, stateFilter, typeFilter, advancedFilters])
+    return applyFilterQuery(base, advancedFilters, BGP_FILTER_ACCESSORS)
+  }, [sessions, q, stateFilter, typeFilter, advancedFilters, urlError])
 
   return (
     <div className="flex flex-col gap-4">
+      {urlError && <Alert variant="warning"><AlertCircleIcon /><AlertDescription>{urlError}<Button variant="outline" size="sm" onClick={reset}>Сбросить фильтры BGP</Button></AlertDescription></Alert>}
       <DataPageCard>
         <DataPageToolbar
+          className="[&>div:first-child]:max-w-full [&>div:first-child]:overflow-x-auto [&>div:first-child_button]:shrink-0 [&>div:first-child_button]:whitespace-nowrap"
           segmented={{
             value: stateFilter,
             onChange: setStateFilter,
             options: [
               { value: "all", label: "Все", count: sessions.length },
+              { value: "Unknown", label: "Неизвестно", count: sessions.filter(s => s.state === "Unknown").length },
               { value: "Established", label: "Established", count: sessions.filter((s) => s.state === "Established").length },
               { value: "Active", label: "Active", count: sessions.filter((s) => s.state === "Active").length },
               { value: "Idle", label: "Idle", count: sessions.filter((s) => s.state === "Idle").length },
               { value: "OpenSent", label: "OpenSent", count: sessions.filter((s) => s.state === "OpenSent").length },
             ],
           }}
-          filters={advancedFilters}
-          onFiltersChange={setAdvancedFilters}
-          filterFields={BGP_FILTER_FIELDS}
+          filterControl={<QueryFilters fields={fields} query={advancedFilters} onQueryChange={setAdvancedFilters} />}
           search={search}
           onSearchChange={setSearch}
           searchPlaceholder="IP, AS, описание…"
           countLabel={`${filtered.length} из ${sessions.length}`}
           actions={
             <div className="flex items-center gap-0.5 p-0.5 rounded-md border border-border bg-muted/40">
-              {(["all", "eBGP", "iBGP"] as const).map((t) => (
+              {(["all", "eBGP", "iBGP", "Unknown"] as const).map((t) => (
                 <button
                   key={t}
                   type="button"
                   onClick={() => setTypeFilter(t)}
+                  aria-pressed={typeFilter === t}
                   className={cn(
                     "px-2.5 py-1 text-[11px] rounded transition-colors",
                     typeFilter === t
@@ -327,13 +319,15 @@ function SessionsTab({ sessions }: { sessions: BgpSession[] }) {
                       : "text-muted-foreground hover:text-foreground",
                   )}
                 >
-                  {t === "all" ? "Все типы" : t}
+                  {t === "all" ? "Все типы" : t === "Unknown" ? "Неизвестно" : t}
                 </button>
               ))}
             </div>
           }
         />
-        <BgpSessionsDataGrid sessions={filtered} />
+        {selectedSessionId && sessions.some(s => s.id === selectedSessionId) && !filtered.some(s => s.id === selectedSessionId) && <p role="status" className="px-5 py-2 text-xs text-muted-foreground">Сессия из ссылки скрыта текущими фильтрами.</p>}
+        {hasFilters && !urlError && <Button variant="ghost" size="sm" onClick={reset}>Сбросить фильтры BGP</Button>}
+        <BgpSessionsDataGrid sessions={filtered} emptyTitle={urlError ? "Некорректные фильтры BGP" : emptyTitle} selectedSessionId={selectedSessionId} onSelectSession={onSelectSession} />
       </DataPageCard>
     </div>
   )
@@ -355,17 +349,18 @@ function RoutersTab({ sessions }: { sessions: BgpSession[] }) {
     <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
       {byRouter.map(router => {
         const estCnt   = router.sessions.filter(s => s.state === "Established").length
-        const downCnt  = router.sessions.length - estCnt
-        const totalRx  = router.sessions.reduce((a, s) => a + s.prefixesRx, 0)
+        const downCnt  = router.sessions.filter(s => s.state !== "Established" && s.state !== "Unknown").length
+        const totalRx  = sumBgpCounters(router.sessions.map(s => s.prefixesRx))
 
         return (
-          <Card key={router.id} className="overflow-hidden gap-0 py-0">
+          <Frame key={router.id} dense className="w-full overflow-hidden">
+            <FramePanel className="p-0 overflow-hidden">
             {/* header */}
             <div className="flex items-center gap-3 px-4 py-3 border-b">
               <ServerIcon className="size-4 text-muted-foreground shrink-0" />
               <div className="flex-1 min-w-0">
                 <p className="text-sm font-medium leading-none">{router.label}</p>
-                <p className="text-[11px] font-mono text-muted-foreground mt-0.5">{router.site} · AS65001</p>
+                <p className="text-[11px] font-mono text-muted-foreground mt-0.5">{router.site} · {Array.from(new Set(router.sessions.map(s => s.localAs === null ? "AS неизвестна" : "AS" + s.localAs))).join(", ")}</p>
               </div>
               <div className="flex items-center gap-2 shrink-0">
                 {estCnt > 0 && (
@@ -396,19 +391,19 @@ function RoutersTab({ sessions }: { sessions: BgpSession[] }) {
                         <TypeBadge type={s.type} />
                       </div>
                       <div className="flex items-center gap-1.5 mt-0.5">
-                        <span className="text-[10px] text-muted-foreground">AS{s.remoteAs}</span>
-                        {AS_NAMES[s.remoteAs] && (
+                        <span className="text-[10px] text-muted-foreground">{s.remoteAs === null ? "AS неизвестна" : "AS" + s.remoteAs}</span>
+                        {s.remoteAs !== null && AS_NAMES[s.remoteAs] && (
                           <span className="text-[10px] text-muted-foreground/60">· {AS_NAMES[s.remoteAs]}</span>
                         )}
                       </div>
                     </div>
                     <div className="shrink-0 text-right">
-                      {s.prefixesRx > 0 && (
+                      {s.prefixesRx !== null && s.prefixesRx > 0 && (
                         <p className="text-[10px] font-mono text-emerald-500 tabular-nums">
                           ↓ {fmtNum(s.prefixesRx)}
                         </p>
                       )}
-                      <p className={cn("text-[10px] font-semibold", ss.text)}>{s.state}</p>
+                      <p className={cn("text-[10px] font-semibold", ss.text)}>{ss.label}</p>
                     </div>
                   </div>
                 )
@@ -416,7 +411,7 @@ function RoutersTab({ sessions }: { sessions: BgpSession[] }) {
             </div>
 
             {/* footer summary */}
-            {totalRx > 0 && (
+            {totalRx !== null && totalRx > 0 && (
               <div className="flex items-center gap-2 px-4 py-2 border-t bg-muted/20">
                 <ArrowDownIcon className="size-3 text-emerald-500" />
                 <span className="text-[11px] font-mono text-muted-foreground">
@@ -424,7 +419,8 @@ function RoutersTab({ sessions }: { sessions: BgpSession[] }) {
                 </span>
               </div>
             )}
-          </Card>
+          </FramePanel>
+          </Frame>
         )
       })}
     </div>
@@ -436,9 +432,9 @@ function RoutersTab({ sessions }: { sessions: BgpSession[] }) {
 function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
   // top peers by prefixes received (eBGP only)
   const topPeers = useMemo(() =>
-    [...sessions]
-      .filter(s => s.prefixesRx > 0)
-      .sort((a, b) => b.prefixesRx - a.prefixesRx)
+    (sessions.some(s => s.prefixesRx === null) ? [] : [...sessions])
+      .filter(s => s.prefixesRx !== null && s.prefixesRx > 0)
+      .sort((a, b) => (b.prefixesRx ?? 0) - (a.prefixesRx ?? 0))
       .slice(0, 8),
     [sessions]
   )
@@ -452,38 +448,54 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
   }, [sessions])
 
   // total prefix stats
-  const totalRx      = sessions.reduce((a, s) => a + s.prefixesRx, 0)
-  const totalActive  = sessions.reduce((a, s) => a + s.prefixesActive, 0)
+  const totalRx      = sumBgpCounters(sessions.map(s => s.prefixesRx))
+  const totalActive  = sumBgpCounters(sessions.map(s => s.prefixesActive))
   const ebgpSessions = sessions.filter(s => s.type === "eBGP").length
   const ibgpSessions = sessions.filter(s => s.type === "iBGP").length
 
   return (
     <div className="flex flex-col gap-5">
-      {/* summary row */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
-        {[
-          { label: "Всего префиксов",   value: fmtNum(totalRx),     color: "text-emerald-600 dark:text-emerald-400" },
-          { label: "Активных маршрутов", value: fmtNum(totalActive), color: "text-sky-600 dark:text-sky-400" },
-          { label: "eBGP сессий",        value: ebgpSessions,        color: "" },
-          { label: "iBGP сессий",        value: ibgpSessions,        color: "" },
-        ].map(s => (
-          <Card key={s.label}>
-            <CardContent className="pt-4 pb-3 px-4">
-              <p className="text-xs text-muted-foreground">{s.label}</p>
-              <p className={cn("text-2xl font-semibold tabular-nums mt-0.5", s.color)}>{s.value}</p>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+      <KpiStatGrid
+        aria-label="Сводка префиксов BGP"
+        items={[
+          {
+            id: "rx",
+            label: "Префиксы",
+            value: fmtNum(totalRx),
+            icon: <DownloadIcon className="size-4" />,
+            iconClassName: "text-success",
+          },
+          {
+            id: "active",
+            label: "Маршруты",
+            hint: totalActive === null ? "нет данных API" : undefined,
+            value: fmtNum(totalActive),
+            icon: <GitMergeIcon className="size-4" />,
+            iconClassName: "text-info",
+          },
+          {
+            id: "ebgp",
+            label: "eBGP",
+            value: sessions.some(s => s.type === "Unknown") ? "—" : ebgpSessions,
+            icon: <ActivityIcon className="size-4" />,
+            iconClassName: "text-muted-foreground",
+          },
+          {
+            id: "ibgp",
+            label: "iBGP",
+            value: sessions.some(s => s.type === "Unknown") ? "—" : ibgpSessions,
+            icon: <ServerIcon className="size-4" />,
+            iconClassName: "text-muted-foreground",
+          },
+        ]}
+      />
 
       <div className="grid grid-cols-1 xl:grid-cols-[1fr_320px] gap-5">
         {/* prefixes by peer — horizontal bar chart */}
-        <Card>
-          <CardContent className="pt-4 pb-4 px-5">
-            <p className="text-sm font-semibold mb-4">Топ-8 пиров по полученным префиксам</p>
+        <OpsPanel title="Топ-8 пиров по полученным префиксам" contentClassName="pt-4 pb-4 px-5">
             <div className="flex flex-col gap-3">
               {topPeers.map((s, i) => {
-                const pct = (s.prefixesRx / maxRx) * 100
+                const pct = ((s.prefixesRx ?? 0) / maxRx) * 100
                 const ss  = STATE_STYLE[s.state]
                 return (
                   <div key={s.id} className="flex items-center gap-3">
@@ -494,7 +506,7 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                       <div className="flex items-center justify-between mb-1 gap-2">
                         <div className="flex items-center gap-2 min-w-0">
                           <span className="text-xs font-mono truncate">{s.peerIp}</span>
-                          <span className="text-[10px] text-muted-foreground shrink-0">AS{s.remoteAs}</span>
+                          <span className="text-[10px] text-muted-foreground shrink-0">{s.remoteAs === null ? "AS неизвестна" : "AS" + s.remoteAs}</span>
                           <TypeBadge type={s.type} />
                         </div>
                         <span className={cn("text-[10px] font-semibold shrink-0 tabular-nums font-mono", "text-emerald-600 dark:text-emerald-400")}>
@@ -513,18 +525,15 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                 )
               })}
               {topPeers.length === 0 && (
-                <p className="text-sm text-muted-foreground text-center py-4">Нет данных о префиксах</p>
+                <p className="text-sm text-muted-foreground text-center py-4">Недостаточно данных о префиксах для сравнения</p>
               )}
             </div>
-          </CardContent>
-        </Card>
+        </OpsPanel>
 
         {/* right column */}
         <div className="flex flex-col gap-4">
           {/* state distribution */}
-          <Card>
-            <CardContent className="pt-4 pb-4 px-5">
-              <p className="text-sm font-semibold mb-3">Распределение состояний</p>
+          <OpsPanel title="Распределение состояний" contentClassName="pt-4 pb-4 px-5">
               {stateCounts.length === 0 ? (
                 <p className="text-xs text-muted-foreground">Нет данных</p>
               ) : (
@@ -535,7 +544,7 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                     return (
                       <div key={state} className="flex items-center gap-2">
                         <span className={cn("size-2 rounded-full shrink-0", ss.dot)} />
-                        <span className="text-xs w-24">{state}</span>
+                        <span className="text-xs w-24">{ss.label}</span>
                         <div className="flex-1 h-2 rounded-full bg-muted overflow-hidden">
                           <div className={cn("h-full rounded-full", ss.dot)} style={{ width: `${pct}%`, opacity: 0.75 }} />
                         </div>
@@ -545,14 +554,11 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                   })}
                 </div>
               )}
-            </CardContent>
-          </Card>
+          </OpsPanel>
 
           {/* eBGP vs iBGP */}
-          <Card>
-            <CardContent className="pt-4 pb-4 px-5">
-              <p className="text-sm font-semibold mb-3">eBGP vs iBGP</p>
-              {sessions.length === 0 ? (
+          <OpsPanel title="eBGP vs iBGP" contentClassName="pt-4 pb-4 px-5">
+              {sessions.length === 0 || sessions.some(s => s.type === "Unknown") ? (
                 <p className="text-xs text-muted-foreground">Нет данных</p>
               ) : (
                 <>
@@ -579,7 +585,7 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                     <div className="flex flex-col gap-1">
                       {Object.entries(
                         sessions.filter(s => s.type === "eBGP").reduce<Record<number, number>>((acc, s) => {
-                          acc[s.remoteAs] = (acc[s.remoteAs] ?? 0) + 1; return acc
+                          if (s.remoteAs !== null) acc[s.remoteAs] = (acc[s.remoteAs] ?? 0) + 1; return acc
                         }, {})
                       ).sort((a, b) => b[1] - a[1]).map(([as, cnt]) => (
                         <div key={as} className="flex items-center justify-between text-[11px]">
@@ -592,8 +598,7 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
                   </div>
                 </>
               )}
-            </CardContent>
-          </Card>
+          </OpsPanel>
         </div>
       </div>
     </div>
@@ -609,33 +614,78 @@ const TABS: Array<{ id: BgpTab; label: string; icon: React.ReactNode }> = [
 ]
 
 export default function BgpPage() {
-  const [activeTab, setActiveTab] = useState<BgpTab>("sessions")
-
+  return <Suspense fallback={<div role="status">Загрузка BGP…</div>}><BgpRoute /></Suspense>
+}
+function BgpRoute() {
+  const { mode, backendUrl } = useDataSource()
+  const params = useSearchParams()
+  const router = useRouter()
+  const selectedServerId = params.get("server") ?? ALL_SERVERS_ID
+  const selectedSessionId = params.get("session")
+  const tab = params.get("tab")
+  const activeTab: BgpTab = tab === "routers" || tab === "analytics" ? tab : "sessions"
+  function navigate(values: Record<string, string | null>) {
+    const next = new URLSearchParams(params.toString())
+    for (const [key, value] of Object.entries(values)) {
+      if (value === null) next.delete(key)
+      else next.set(key, value)
+    }
+    router.push("/bgp" + (next.size ? "?" + next.toString() : ""))
+  }
+  return <BgpPageContent key={JSON.stringify([mode, backendUrl])} selectedServerId={selectedServerId} selectedSessionId={selectedSessionId} activeTab={activeTab}
+    onSelectServer={id => navigate({ server: id === ALL_SERVERS_ID ? null : id, session: null })}
+    onSelectSession={id => navigate({ session: id })}
+    onSelectTab={tab => navigate({ tab: tab === "sessions" ? null : tab })} />
+}
+function BgpPageContent({ selectedServerId, selectedSessionId, activeTab, onSelectServer, onSelectSession, onSelectTab }: {
+  selectedServerId: string; selectedSessionId: string | null; activeTab: BgpTab;
+  onSelectServer: (id: string) => void; onSelectSession: (id: string | null) => void; onSelectTab: (tab: BgpTab) => void;
+}) {
   const { mode, backendUrl } = useDataSource()
   const isLive = mode === "live"
 
   const [liveSessions, setLiveSessions] = useState<BgpSession[]>([])
-  const [loading,      setLoading]      = useState(false)
+  const [liveServers, setLiveServers]   = useState<InventoryServer[]>([])
+  const [loading,      setLoading]      = useState(isLive)
   const [fetchedAt,    setFetchedAt]    = useState<Date | null>(null)
   const [liveError,    setLiveError]    = useState<string | null>(null)
+  const [failures, setFailures] = useState<BgpFailure[]>([])
+  const [hasLoaded, setHasLoaded] = useState(false)
+  const [readReceipts, setReadReceipts] = useState<Record<string, string>>({})
   const [fetchTick,    setFetchTick]    = useState(0)
 
   useEffect(() => {
-    if (!isLive) return
+    if (!isLive) {
+      queueMicrotask(() => {
+        setLiveSessions([])
+        setLiveServers([])
+        setLiveError(null)
+      })
+      return
+    }
     let cancelled = false
     queueMicrotask(() => {
       if (cancelled) return
       setLoading(true)
-      setLiveError(null)
-      fetch(`${backendUrl}/api/bgp/sessions`)
-        .then(r => {
-          if (!r.ok) throw new Error(`HTTP ${r.status}`)
-          return r.json() as Promise<BackendBgpSession[]>
-        })
-        .then(data => {
+      void Promise.all([
+        requestJson<unknown>(backendUrl, "/api/bgp/catalog"),
+        requestJson<unknown>(backendUrl, "/api/servers"),
+      ])
+        .then(([data, servers]) => {
           if (cancelled) return
-          setLiveSessions(data.map(backendToFrontend))
-          setFetchedAt(new Date())
+          const catalog = bgpCatalogSchema.parse(data)
+          const inventory = bgpServersSchema.parse(servers)
+          const enabled = new Set(inventory.filter(s => s.enabled).map(s => s.id))
+          if (catalog.sessions.some(s => !enabled.has(s.serverId)) || catalog.failures.some(f => !enabled.has(f.serverId))) throw new Error("Чужой контекст BGP-каталога")
+          const failed = new Set(catalog.failures.map(f => String(f.serverId)))
+          setLiveSessions(previous => [...catalog.sessions.map(backendToFrontend), ...previous.filter(s => enabled.has(Number(s.serverId)) && failed.has(s.serverId))])
+          setLiveServers(inventory.filter(s => s.enabled).map(mapBackendServer))
+          setFailures(catalog.failures)
+          setLiveError(null)
+          setHasLoaded(true)
+          const receivedAt = new Date()
+          setFetchedAt(receivedAt)
+          setReadReceipts(previous => ({ ...Object.fromEntries(Object.entries(previous).filter(([id]) => enabled.has(Number(id)))), ...Object.fromEntries([...enabled].filter(id => !failed.has(String(id))).map(id => [String(id), receivedAt.toISOString()])) }))
           setLoading(false)
         })
         .catch((err: unknown) => {
@@ -647,52 +697,89 @@ export default function BgpPage() {
     return () => { cancelled = true }
   }, [isLive, backendUrl, fetchTick])
 
-  // Use live or mock data for all tabs and KPI
-  const sessions = isLive ? liveSessions : SESSIONS
+  const unknownIds = useMemo(() => new Set(isLive ? (liveError ? liveServers.map(s => s.id) : failures.map(f => String(f.serverId))) : []), [isLive, liveError, liveServers, failures])
+  const allSessions: BgpSession[] = isLive ? liveSessions.map(s => unknownIds.has(s.serverId) ? { ...s, state: "Unknown" } : s) : SESSIONS
+  const unavailableContext = isLive && hasLoaded && selectedServerId !== ALL_SERVERS_ID && !liveServers.some(s => s.id === selectedServerId)
+  const incomplete = isLive && (unavailableContext || !hasLoaded || Boolean(liveError) || (selectedServerId === ALL_SERVERS_ID ? failures.length > 0 : unknownIds.has(selectedServerId)))
+  const displayServers = isLive ? liveServers : mockServers.filter((s) => s.enabled)
+
+  const effectiveServerId = selectedServerId
+
+  const sessions = useMemo(() => {
+    if (effectiveServerId === ALL_SERVERS_ID) return allSessions
+    return allSessions.filter((s) => s.serverId === effectiveServerId)
+  }, [allSessions, effectiveServerId])
+
+  const railItems = useMemo<ServerTileItem[]>(() => {
+    const counts = new Map<string, number>()
+    for (const s of allSessions) {
+      counts.set(s.serverId, (counts.get(s.serverId) ?? 0) + 1)
+    }
+    return displayServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: "monitoringUnknown" in s && s.monitoringUnknown ? undefined : s.status,
+      meta: "monitoringUnknown" in s && s.monitoringUnknown ? "Статус неизвестен" : undefined,
+      type: s.type,
+      count: isLive && (!hasLoaded || unknownIds.has(s.id)) ? undefined : counts.get(s.id) ?? 0,
+      enabled: s.enabled,
+      title: [s.name, s.host, s.asn].filter(Boolean).join(" · "),
+    }))
+  }, [displayServers, allSessions, hasLoaded, isLive, unknownIds])
 
   const established = sessions.filter(s => s.state === "Established").length
-  const notEstab    = sessions.length - established
-  const totalRx     = sessions.reduce((a, s) => a + s.prefixesRx, 0)
-  const serverCount = useMemo(
-    () => new Set(liveSessions.map(s => s.serverId)).size,
-    [liveSessions],
-  )
+  const notEstab    = sessions.filter(s => s.state !== "Established" && s.state !== "Unknown").length
+  const totalRx     = sumBgpCounters(sessions.map(s => s.prefixesRx))
+
 
   return (
-    <div className="flex flex-col h-full">
-      <PageHeader
-        crumbs={[{ label: "Управление" }, { label: "BGP" }]}
-        actions={
-          <>
-            <Button variant="outline" size="sm" onClick={() => setFetchTick(t => t + 1)}>
-              <RefreshCwIcon className={cn("size-4", loading && "animate-spin")} />
-              Обновить
-            </Button>
-            <Button variant="outline" size="sm"><DownloadIcon  className="size-4" />Экспорт</Button>
-          </>
-        }
-      />
-
-      {/* tab bar */}
-      <div className="border-b bg-background shrink-0">
-        <div className="flex items-center px-6">
-          {TABS.map(t => (
-            <button key={t.id} onClick={() => setActiveTab(t.id)}
-              className={cn(
-                "flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors -mb-px",
-                activeTab === t.id
-                  ? "border-primary text-foreground"
-                  : "border-transparent text-muted-foreground hover:text-foreground hover:border-border",
-              )}>
-              {t.icon}{t.label}
-            </button>
-          ))}
+    <ServerRailLayout
+      preserveSelection
+      items={railItems}
+      selectedId={effectiveServerId}
+      onSelect={onSelectServer}
+      showAll
+      allCount={displayServers.length}
+      loading={isLive && loading && displayServers.length === 0}
+      header={
+        <PageHeader
+          crumbs={[{ label: "Управление" }, { label: "BGP" }]}
+          actions={
+            <>
+              <ServerRailMobileButton />
+              <Button variant="outline" size="sm" disabled={!isLive || loading} onClick={() => setFetchTick(t => t + 1)}>
+                <RefreshCwIcon className={cn("size-4", loading && "animate-spin")} />
+                Обновить
+              </Button>
+            </>
+          }
+        />
+      }
+      banner={
+        <div className="border-b bg-background shrink-0">
+          <div className="flex min-w-0 items-center overflow-x-auto px-4 sm:px-6">
+            {TABS.map(t => (
+              <button key={t.id} type="button" aria-pressed={activeTab === t.id} onClick={() => onSelectTab(t.id)}
+                className={cn(
+                  "flex shrink-0 items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors -mb-px",
+                  activeTab === t.id
+                    ? "border-primary text-foreground"
+                    : "border-transparent text-muted-foreground hover:text-foreground hover:border-border",
+                )}>
+                {t.icon}{t.label}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto p-6">
+      }
+    >
         <div className="flex flex-col gap-5">
 
+          {unavailableContext && <Alert variant="warning"><AlertCircleIcon /><AlertTitle>Устройство BGP недоступно в этом каталоге</AlertTitle><AlertDescription>Контекст {selectedServerId} сохранён. Выберите доступное устройство.<Button variant="outline" size="sm" onClick={() => onSelectServer(ALL_SERVERS_ID)}>Все устройства BGP</Button></AlertDescription></Alert>}
+          {selectedSessionId && hasLoaded && !sessions.some(s => s.id === selectedSessionId) && <Alert variant="warning"><AlertCircleIcon /><AlertDescription>Сессия из ссылки отсутствует в выбранном снимке. Контекст ссылки сохранён.<Button variant="outline" size="sm" onClick={() => onSelectSession(null)}>Все сессии BGP</Button></AlertDescription></Alert>}
           {/* data source banner */}
           {isLive && loading && (
             <div className="flex items-center gap-2 text-xs text-muted-foreground">
@@ -700,74 +787,84 @@ export default function BgpPage() {
               Загрузка BGP-сессий…
             </div>
           )}
-          {isLive && !loading && fetchedAt && !liveError && (
-            <div className="flex items-center gap-2">
-              <span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2.5 py-0.5 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">
-                <span className="size-1.5 rounded-full bg-emerald-500" />
-                Живые данные · {serverCount} серверов · обновлено {fetchedAt.toLocaleTimeString("ru")}
-              </span>
-              <button
-                onClick={() => setFetchTick(t => t + 1)}
-                className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground transition-colors">
-                <RefreshCwIcon className="size-3" />
-                Обновить
-              </button>
+          {isLive && fetchedAt && (
+            <div role="group" aria-label="Свежесть BGP" className="text-xs text-muted-foreground">
+              Ответ каталога получен <time dateTime={fetchedAt.toISOString()}>{fetchedAt.toLocaleTimeString("ru")}</time>.
+              Это время получения браузером, не время измерения RouterOS.
+              {displayServers.filter(s => effectiveServerId === ALL_SERVERS_ID || s.id === effectiveServerId).map(s => <p key={s.id}>{s.name}: {readReceipts[s.id] ? <time data-bgp-server={s.id} dateTime={readReceipts[s.id]}>{new Date(readReceipts[s.id]).toLocaleTimeString("ru")}</time> : "успешный опрос не получен"}{unknownIds.has(s.id) ? " · данные устарели" : ""}</p>)}
             </div>
           )}
-          {isLive && liveError && (
-            <Alert variant="warning" className="py-2">
+          {isLive && (liveError || failures.length > 0) && (
+            <Alert variant="warning">
               <AlertCircleIcon />
-              <AlertDescription className="text-xs">Ошибка загрузки: {liveError}</AlertDescription>
+              <AlertTitle>{liveError ? "Не удалось загрузить BGP" : "Не удалось опросить часть роутеров BGP"}</AlertTitle>
+              <AlertDescription>
+                {liveError ?? failures.map(f => f.serverName + ": " + f.error).join("; ")}. {hasLoaded ? "Показаны последние полученные данные; статус отказавших устройств неизвестен." : "Данные пока неизвестны."}
+                <Button variant="outline" size="sm" disabled={loading} onClick={() => setFetchTick(t => t + 1)} aria-label="Повторить загрузку BGP">Повторить</Button>
+              </AlertDescription>
             </Alert>
           )}
-          {isLive && !loading && liveSessions.length === 0 && !liveError && fetchedAt && (
-            <div className="rounded-md border border-border bg-muted/30 px-4 py-6 text-center text-sm text-muted-foreground">
-              BGP не настроен ни на одном сервере
-            </div>
-          )}
           {mode === "mock" && (
             <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground">
               Моковые данные
             </span>
           )}
 
-          {/* KPI strip */}
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
-            {[
-              { label: "Сессий всего",    value: sessions.length,   color: "" },
-              { label: "Established",     value: established,        color: "text-emerald-600 dark:text-emerald-400" },
-              { label: "Не установлено",  value: notEstab,           color: notEstab > 0 ? "text-amber-500" : "text-muted-foreground" },
-              { label: "Получено префиксов", value: fmtNum(totalRx),color: "" },
-            ].map(s => (
-              <Card key={s.label}>
-                <CardContent className="pt-4 pb-3 px-4">
-                  <p className="text-xs text-muted-foreground">{s.label}</p>
-                  <p className={cn("text-2xl font-semibold tabular-nums mt-0.5", s.color)}>{s.value}</p>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+          <KpiStatGrid
+            aria-label="Сводка BGP"
+            items={[
+              {
+                id: "sessions",
+                label: "Сессий",
+                value: incomplete ? "—" : sessions.length,
+                hint: incomplete ? "неизвестно" : undefined,
+                icon: <GitMergeIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "established",
+                label: "Established",
+                value: incomplete || sessions.some(s => s.state === "Unknown") ? "—" : established,
+                icon: <CheckCircleIcon className="size-4" />,
+                iconClassName: "text-success",
+              },
+              {
+                id: "not-estab",
+                label: "Не поднято",
+                value: incomplete || sessions.some(s => s.state === "Unknown") ? "—" : notEstab,
+                icon: <AlertCircleIcon className="size-4" />,
+                iconClassName: notEstab > 0 ? "text-warning" : "text-muted-foreground",
+                variant: notEstab > 0 ? "warning" : "default",
+              },
+              {
+                id: "prefixes",
+                label: "Префиксы",
+                value: incomplete ? "—" : fmtNum(totalRx),
+                icon: <DownloadIcon className="size-4" />,
+                iconClassName: "text-info",
+              },
+            ]}
+          />
 
           {/* alert: not-established sessions */}
-          {notEstab > 0 && (
+          {!incomplete && notEstab > 0 && (
             <Alert variant="warning">
               <AlertCircleIcon />
               <AlertTitle>
                 <span className="font-semibold">{notEstab} сессии</span> не в состоянии Established
               </AlertTitle>
               <AlertDescription>
-                Проверьте {sessions.filter(s => s.state !== "Established").map(s => s.peerIp).join(", ")}
+                Проверьте {sessions.filter(s => s.state !== "Established" && s.state !== "Unknown").map(s => s.peerIp).join(", ")}
               </AlertDescription>
             </Alert>
           )}
 
           {/* tab content */}
-          {activeTab === "sessions"  && <SessionsTab  sessions={sessions} />}
-          {activeTab === "routers"   && <RoutersTab   sessions={sessions} />}
-          {activeTab === "analytics" && <AnalyticsTab sessions={sessions} />}
+          {activeTab === "sessions"  && <SessionsTab sessions={sessions} emptyTitle={incomplete && sessions.length === 0 ? "Данные BGP неизвестны" : undefined} selectedSessionId={selectedSessionId} onSelectSession={onSelectSession} />}
+          {activeTab === "routers" && (incomplete ? <p role="status">Сводка по роутерам неизвестна до успешного опроса. Последние сессии доступны в таблице.</p> : <RoutersTab sessions={sessions} />)}
+          {activeTab === "analytics" && (incomplete ? <p role="status">Аналитика неизвестна до успешного опроса. Последние сессии доступны в таблице.</p> : <AnalyticsTab sessions={sessions} />)}
 
         </div>
-      </div>
-    </div>
+    </ServerRailLayout>
   )
 }

app/(main)/certificates/page.tsx

@@ -1,15 +1,22 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { Suspense, useMemo, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import { readCertificatesUrl, patchCertificatesUrl, type CertificateStatusFilter } from "@/lib/certificates-url-state"
 import { PageHeader } from "@/components/page-header"
-import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
-import { FileImportDialog } from "@/components/file-import-dialog"
+import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
 import { routerCertificates, servers as mockServers } from "@/lib/data"
-import type { CertStatus, Server } from "@/lib/data"
+import type { Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
-import { Card, CardContent } from "@/components/ui/card"
+import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { CertificatesDataGrid } from "@/components/data-grids/certificates-data-grid"
+import { CertificateAcmeSettings } from "@/components/certificates/certificate-acme-settings"
+import { CertificateRenewSettingsPanel } from "@/components/certificates/certificate-renew-settings"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -23,20 +30,13 @@ import {
 } from "@/components/ui/sheet"
 import { cn } from "@/lib/utils"
 import { useDataSource } from "@/lib/data-source"
-import { listServers } from "@/shared/api/servers"
+import { can } from "@/lib/auth"
+import { useCertificateCatalog } from "@/lib/use-certificate-catalog"
+import type { CertificateView } from "@/lib/certificate-view"
 import { toFrontendServer } from "@/entities/server/model/mappers"
-import {
-  createCertificateIssueJob,
-  getAcmeSettings,
-  getCertificateIssueJob,
-  listCertificates,
-  putAcmeSettings,
-  refreshCertificates,
-  testAcmeSettings,
-} from "@/shared/api/certificates"
+import { useCertificateIssue } from "@/lib/use-certificate-issue"
 import { toast } from "sonner"
 import {
-  SearchIcon,
   ShieldCheckIcon,
   BadgeCheckIcon,
   AlertTriangleIcon,
@@ -55,7 +55,7 @@ import {
   StepperSeparator,
   StepperTitle,
   StepperTrigger,
-} from "@/components/reui/stepper"
+} from "@/components/reui-kit/accessible-stepper"
 
 function mockToDto(cert: (typeof routerCertificates)[number]): CertificateDto {
   return {
@@ -75,12 +75,12 @@ function mockToDto(cert: (typeof routerCertificates)[number]): CertificateDto {
   }
 }
 
-function CertPartAlertExpired({ expired }: { expired: CertificateDto[] }) {
+function CertPartAlertExpired({ expired }: { expired: CertificateView[] }) {
   return (
-    <div className="flex items-start gap-3 rounded-lg bg-red-500/5 border border-red-500/20 px-4 py-3 text-sm">
-      <AlertCircleIcon className="size-5 text-red-500 shrink-0 mt-0.5" />
+    <div className="flex items-start gap-3 rounded-lg bg-destructive/5 border border-destructive/20 px-4 py-3 text-sm">
+      <AlertCircleIcon className="size-5 text-destructive shrink-0 mt-0.5" />
       <div>
-        <p className="font-medium text-red-600 dark:text-red-400">
+        <p className="font-medium text-destructive">
           {expired.length} {expired.length === 1 ? "истёкший сертификат" : "истёкших сертификата"}
         </p>
         <p className="text-muted-foreground text-xs mt-0.5">
@@ -91,12 +91,12 @@ function CertPartAlertExpired({ expired }: { expired: CertificateDto[] }) {
   )
 }
 
-function CertPartAlertExpiring({ expiring }: { expiring: CertificateDto[] }) {
+function CertPartAlertExpiring({ expiring }: { expiring: CertificateView[] }) {
   return (
-    <div className="flex items-start gap-3 rounded-lg bg-amber-500/5 border border-amber-500/20 px-4 py-3 text-sm">
-      <AlertTriangleIcon className="size-5 text-amber-500 shrink-0 mt-0.5" />
+    <div className="flex items-start gap-3 rounded-lg bg-warning/5 border border-warning/20 px-4 py-3 text-sm">
+      <AlertTriangleIcon className="size-5 text-warning shrink-0 mt-0.5" />
       <div>
-        <p className="font-medium text-amber-600 dark:text-amber-400">
+        <p className="font-medium text-warning">
           {expiring.length} {expiring.length === 1 ? "сертификат истекает" : "сертификата истекают"} в течение 30 дней
         </p>
         <p className="text-muted-foreground text-xs mt-0.5">
@@ -111,192 +111,61 @@ function CertPartKpi({
   displayCerts,
   expiring,
   expired,
+  complete,
+  totalKnown,
 }: {
-  displayCerts: CertificateDto[]
-  expiring: CertificateDto[]
-  expired: CertificateDto[]
+  displayCerts: CertificateView[]
+  expiring: CertificateView[]
+  expired: CertificateView[]
+  complete: boolean
+  totalKnown: boolean
 }) {
   return (
-    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-      {[
+    <KpiStatGrid
+      aria-label="Сводка сертификатов"
+      items={[
         {
+          id: "all",
           label: "Всего",
-          value: displayCerts.length,
-          icon: <ShieldCheckIcon className="size-4 text-muted-foreground" />,
+          value: totalKnown ? displayCerts.length : "—",
+          icon: <ShieldCheckIcon className="size-4" />,
+          iconClassName: "text-muted-foreground",
         },
         {
+          id: "valid",
           label: "Действующих",
-          value: displayCerts.filter((c) => c.status === "valid").length,
-          icon: <BadgeCheckIcon className="size-4 text-emerald-500" />,
+          value: complete ? displayCerts.filter((c) => c.status === "valid").length : "—",
+          icon: <BadgeCheckIcon className="size-4" />,
+          iconClassName: "text-success",
         },
         {
+          id: "expiring",
           label: "Истекают",
-          value: expiring.length,
-          icon: <AlertTriangleIcon className="size-4 text-amber-500" />,
+          value: complete ? expiring.length : "—",
+          icon: <AlertTriangleIcon className="size-4" />,
+          iconClassName: expiring.length > 0 ? "text-warning" : "text-muted-foreground",
+          variant: expiring.length > 0 ? "warning" : "default",
         },
         {
+          id: "expired",
           label: "Истёкших",
-          value: expired.length,
-          icon: <AlertCircleIcon className="size-4 text-red-500" />,
+          value: complete ? expired.length : "—",
+          icon: <AlertCircleIcon className="size-4" />,
+          iconClassName: expired.length > 0 ? "text-destructive" : "text-muted-foreground",
+          variant: expired.length > 0 ? "destructive" : "default",
         },
-      ].map((s) => (
-        <Card key={s.label}>
-          <CardContent className="px-5 py-4 flex items-start justify-between">
-            <div>
-              <p className="text-sm text-muted-foreground">{s.label}</p>
-              <p className="text-2xl font-semibold tabular-nums mt-0.5">{s.value}</p>
-            </div>
-            <div className="mt-0.5">{s.icon}</div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  )
-}
-
-function CertPartAcmeSettings({
-  acmeDirectoryUrl,
-  setAcmeDirectoryUrl,
-  acmeZoneId,
-  setAcmeZoneId,
-  acmeTokenDraft,
-  setAcmeTokenDraft,
-  acmeTokenConfigured,
-  acmeSaveBusy,
-  onTest,
-  onSave,
-}: {
-  acmeDirectoryUrl: string
-  setAcmeDirectoryUrl: (v: string) => void
-  acmeZoneId: string
-  setAcmeZoneId: (v: string) => void
-  acmeTokenDraft: string
-  setAcmeTokenDraft: (v: string) => void
-  acmeTokenConfigured: boolean
-  acmeSaveBusy: boolean
-  onTest: () => void
-  onSave: () => void
-}) {
-  return (
-    <Card>
-      <CardContent className="px-5 py-4 flex flex-col gap-3">
-        <p className="text-sm font-medium">ACME · Cloudflare DNS-01</p>
-        <p className="text-xs text-muted-foreground">
-          Публичные Let&apos;s Encrypt для зон в Cloudflare выпускаются на backend и импортируются на RouterOS 7.22+.
-        </p>
-        <form
-          className="grid gap-3 md:grid-cols-2"
-          autoComplete="off"
-          onSubmit={(event) => event.preventDefault()}
-        >
-          <div className="flex flex-col gap-1.5">
-            <label className="text-sm font-medium">ACME directory URL</label>
-            <Input
-              autoComplete="off"
-              name="acme-directory-url"
-              value={acmeDirectoryUrl}
-              onChange={(e) => setAcmeDirectoryUrl(e.target.value)}
-            />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <label className="text-sm font-medium">Cloudflare zone id (опционально)</label>
-            <Input
-              autoComplete="off"
-              name="cloudflare-zone-id"
-              value={acmeZoneId}
-              onChange={(e) => setAcmeZoneId(e.target.value)}
-              placeholder="Авто по домену"
-            />
-          </div>
-          <div className="flex flex-col gap-1.5 md:col-span-2">
-            <label className="text-sm font-medium">Cloudflare API token</label>
-            <Input
-              type="password"
-              autoComplete="new-password"
-              name="cloudflare-api-token"
-              value={acmeTokenDraft}
-              onChange={(e) => setAcmeTokenDraft(e.target.value)}
-              placeholder={
-                acmeTokenConfigured
-                  ? "Токен сохранён — введите новый для замены"
-                  : "API token с правом DNS"
-              }
-            />
-          </div>
-        </form>
-        <div className="flex flex-wrap gap-2">
-          <Button variant="outline" size="sm" disabled={acmeSaveBusy} onClick={onTest}>
-            Проверить Cloudflare
-          </Button>
-          <Button size="sm" disabled={acmeSaveBusy} onClick={onSave}>
-            Сохранить настройки
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-function CertPartTableToolbar({
-  search,
-  setSearch,
-  statusFilter,
-  setStatusFilter,
-  filteredCount,
-}: {
-  search: string
-  setSearch: (v: string) => void
-  statusFilter: CertStatus | "all"
-  setStatusFilter: (v: CertStatus | "all") => void
-  filteredCount: number
-}) {
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 border-b flex-wrap">
-      <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[240px]">
-        <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
-        <input
-          className="flex-1 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
-          placeholder="Поиск по имени, CN, эмитенту…"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
-      <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
-        {(["all", "valid", "expired", "revoked"] as const).map((s) => (
-          <button
-            key={s}
-            type="button"
-            onClick={() => setStatusFilter(s)}
-            className={cn(
-              "px-3 py-1 text-xs rounded whitespace-nowrap transition-colors",
-              statusFilter === s
-                ? "bg-background text-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground",
-            )}
-          >
-            {s === "all"
-              ? "Все"
-              : s === "valid"
-                ? "Действующие"
-                : s === "expired"
-                  ? "Истёкшие"
-                  : "Отозванные"}
-          </button>
-        ))}
-      </div>
-      <span className="text-sm text-muted-foreground ml-auto">{filteredCount} сертификатов</span>
-    </div>
+      ]}
+    />
   )
 }
 
 function CertPartReference() {
   return (
-    <Card>
-      <CardContent className="px-5 py-4">
-        <p className="text-xs font-medium text-muted-foreground mb-1">
-          RouterOS 7.22+ · публичные LE для Cloudflare через backend DNS-01, не через /certificate add-acme на устройстве.
-        </p>
-        <p className="text-xs font-medium text-muted-foreground mb-3">RouterOS 7 · /certificate — справка CLI</p>
+    <OpsPanel
+      title="RouterOS 7 · /certificate — справка CLI"
+      description="RouterOS 7 умеет обновлять Let's Encrypt сам. Этот CLI — справка; автообновление MM включается панелью выше."
+      contentClassName="px-5 py-4"
+    >
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
           {[
             {
@@ -330,14 +199,13 @@ function CertPartReference() {
               <p className="font-sans font-semibold text-foreground/80 mb-1.5 text-[11px] uppercase tracking-wide">
                 {b.title}
               </p>
-              <pre className="bg-zinc-950 rounded-md p-2.5 text-zinc-300 text-[11px] leading-relaxed overflow-x-auto whitespace-pre">
+              <pre tabIndex={0} role="region" aria-label={"Команды RouterOS: " + b.title} className="bg-zinc-950 rounded-md p-2.5 text-zinc-300 text-[11px] leading-relaxed overflow-x-auto whitespace-pre focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2">
                 {b.lines.join("\n")}
               </pre>
             </div>
           ))}
         </div>
-      </CardContent>
-    </Card>
+    </OpsPanel>
   )
 }
 
@@ -380,6 +248,7 @@ function CertPartIssueForm({
         <SectionTitle>Основные</SectionTitle>
         <FormField label="Сервер" required hint="RouterOS 7.22+, куда импортируется сертификат">
           <select
+            aria-label="Сервер выпуска"
             value={issueServerId}
             onChange={(e) => setIssueServerId(e.target.value)}
             className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
@@ -397,6 +266,7 @@ function CertPartIssueForm({
         <FormField label="Имя сертификата на роутере" required hint="Имя объекта /certificate на устройстве">
           <Input
             className="font-mono"
+            aria-label="Имя сертификата"
             value={issueCertName}
             onChange={(e) => setIssueCertName(e.target.value)}
             placeholder="router-le"
@@ -411,6 +281,7 @@ function CertPartIssueForm({
         <FormField label="Common Name" required hint="Основное имя в сертификате">
           <Input
             className="font-mono"
+            aria-label="Основной домен"
             value={issueCommonName}
             onChange={(e) => setIssueCommonName(e.target.value)}
             placeholder="vpn.example.com"
@@ -419,6 +290,7 @@ function CertPartIssueForm({
         <FormField label="SAN" hint="По одному имени в строке">
           <textarea
             className="min-h-24 w-full rounded-lg border border-input bg-background px-2.5 py-2 text-sm font-mono text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+            aria-label="Дополнительные домены"
             value={issueSans}
             onChange={(e) => setIssueSans(e.target.value)}
             placeholder="www.example.com"
@@ -439,15 +311,16 @@ function CertPartIssueForm({
             <p className="text-sm font-medium">Trust store · www</p>
             <p className="text-xs text-muted-foreground">Веб-интерфейс и HTTPS-сервисы</p>
           </div>
-          <FormToggle checked={issueTrustWww} onChange={setIssueTrustWww} />
+          <FormToggle ariaLabel="Trust store www" checked={issueTrustWww} onChange={setIssueTrustWww} />
         </div>
         <div className="flex items-center justify-between">
           <div>
             <p className="text-sm font-medium">Trust store · api</p>
             <p className="text-xs text-muted-foreground">REST API и управление</p>
           </div>
-          <FormToggle checked={issueTrustApi} onChange={setIssueTrustApi} />
+          <FormToggle ariaLabel="Trust store api" checked={issueTrustApi} onChange={setIssueTrustApi} />
         </div>
+        <p className="text-xs text-muted-foreground">После импорта сертификат будет назначен сервисам www-ssl и api-ssl; оба сервиса будут включены. Переключатели выше задают trust store сертификата.</p>
       </div>
       )}
 
@@ -459,6 +332,8 @@ function CertPartIssueForm({
             <li>Имя: {issueCertName || "—"}</li>
             <li>CN: {issueCommonName || "—"}</li>
             <li>Trust www: {issueTrustWww ? "да" : "нет"} · api: {issueTrustApi ? "да" : "нет"}</li>
+            <li>Сервисы: www-ssl и api-ssl будут включены и получат этот сертификат.</li>
+            <li>DNS: приложение попробует синхронизировать A-записи доменов с IPv4 сервера; CNAME сохраняются.</li>
           </ul>
         </div>
       )}
@@ -467,21 +342,42 @@ function CertPartIssueForm({
 }
 
 export default function CertificatesPage() {
+  return <Suspense fallback={<p role="status">Загрузка контекста сертификатов…</p>}><CertificatesSource /></Suspense>
+}
+
+function CertificatesSource() {
+  const { mode, backendUrl, prefsHydrated } = useDataSource()
+  if (!prefsHydrated) return <p role="status" className="p-5">Загрузка настроек источника…</p>
+  return <CertificatesContent key={mode + ":" + backendUrl} />
+}
+
+function CertificatesContent() {
   const { mode, backendUrl, prefsHydrated, backendStatus } = useDataSource()
   const isLive = prefsHydrated && mode === "live"
   const liveReady = isLive && backendStatus === true
 
-  const [search, setSearch] = useState("")
-  const [statusFilter, setStatusFilter] = useState<CertStatus | "all">("all")
-  const [certificates, setCertificates] = useState<CertificateDto[]>([])
-  const [loadState, setLoadState] = useState<"idle" | "loading" | "error">("idle")
-  const [loadError, setLoadError] = useState<string | null>(null)
-  const [serverList, setServerList] = useState<Server[]>([])
+  const params = useSearchParams()
+  const context = readCertificatesUrl(params)
+  const search = context.search
+  const statusFilter = context.status
+  const selectedServerId = context.server
+  const urlError = context.error
+  function writeContext(changes: Record<string, string | null>, replace = false) {
+    const href = patchCertificatesUrl(new URLSearchParams(window.location.search), changes) + window.location.hash
+    if (replace) window.history.replaceState(null, "", href); else window.history.pushState(null, "", href)
+  }
+  const setSearch = (value: string) => writeContext({ q: value }, true)
+  const setStatusFilter = (value: CertificateStatusFilter) => writeContext({ status: value === "all" ? null : value })
+  const setSelectedServerId = (value: string) => writeContext({ server: value === ALL_SERVERS_ID ? null : value })
+  const canRead = can("mm:certificates:read")
+  const canWrite = can("mm:certificates:write")
+  const canReadServers = can("mm:servers:read")
+  const catalog = useCertificateCatalog(backendUrl, isLive, canRead, canReadServers)
+  const { snapshots, loading, error: loadError, serverError } = catalog
+  const serverList = useMemo(() => catalog.servers.map(toFrontendServer), [catalog.servers])
 
   const [issueOpen, setIssueOpen] = useState(false)
   const [issueStep, setIssueStep] = useState(1)
-  const [importOpen, setImportOpen] = useState(false)
-  const [issueBusy, setIssueBusy] = useState(false)
   const [issueServerId, setIssueServerId] = useState("")
   const [issueCertName, setIssueCertName] = useState("")
   const [issueCommonName, setIssueCommonName] = useState("")
@@ -489,19 +385,34 @@ export default function CertificatesPage() {
   const [issueTrustWww, setIssueTrustWww] = useState(true)
   const [issueTrustApi, setIssueTrustApi] = useState(true)
 
-  const [acmeDirectoryUrl, setAcmeDirectoryUrl] = useState(
-    "https://acme-v02.api.letsencrypt.org/directory",
-  )
-  const [acmeZoneId, setAcmeZoneId] = useState("")
-  const [acmeTokenDraft, setAcmeTokenDraft] = useState("")
-  const [acmeTokenConfigured, setAcmeTokenConfigured] = useState(false)
-  const [acmeSaveBusy, setAcmeSaveBusy] = useState(false)
 
   const displayCerts = useMemo(() => {
     if (!prefsHydrated) return []
-    if (isLive) return certificates
+    if (isLive) return Object.values(snapshots).flatMap(snapshot => snapshot.confirmed?.certificates ?? [])
     return routerCertificates.map(mockToDto)
-  }, [prefsHydrated, isLive, certificates])
+  }, [prefsHydrated, isLive, snapshots])
+
+  const displayServers = isLive ? serverList : mockServers
+
+  const scopedCerts = useMemo(() => {
+    if (urlError) return []
+    if (selectedServerId === ALL_SERVERS_ID) return displayCerts
+    return displayCerts.filter((c) => c.serverId === selectedServerId)
+  }, [displayCerts, selectedServerId, urlError])
+
+  const certRailItems = useMemo<ServerTileItem[]>(() => (
+    displayServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: isLive ? catalog.servers.find(server => String(server.id) === s.id)?.status ?? undefined : s.status,
+      type: s.type,
+      enabled: s.enabled,
+      meta: isLive && !snapshots[s.id]?.confirmed ? "—" : String(displayCerts.filter((c) => c.serverId === s.id).length),
+    }))
+  ), [displayServers, displayCerts, isLive, catalog.servers, snapshots])
 
   const serverById = useMemo(() => {
     const map = new Map<string, Server>()
@@ -509,71 +420,23 @@ export default function CertificatesPage() {
     return map
   }, [isLive, serverList])
 
-  const loadLive = useCallback(
-    async (silent = false) => {
-      if (!isLive) return
-      if (!silent) setLoadState("loading")
-      setLoadError(null)
-      try {
-        const [certRes, serversRes] = await Promise.all([
-          listCertificates(backendUrl),
-          listServers(backendUrl),
-        ])
-        setCertificates(certRes.certificates)
-        setServerList(serversRes.map(toFrontendServer))
-        if (certRes.failures.length > 0 && certRes.certificates.length === 0) {
-          setLoadError(
-            certRes.failures.map((f) => `${f.serverName ?? f.serverId}: ${f.error}`).join("; "),
-          )
-        } else if (certRes.failures.length > 0) {
-          toast.warning(`Часть серверов недоступна: ${certRes.failures.length}`)
-        }
-        setLoadState("idle")
-      } catch (e) {
-        setCertificates([])
-        setLoadError(e instanceof Error ? e.message : "Не удалось загрузить сертификаты")
-        setLoadState("error")
-      }
-    },
-    [backendUrl, isLive],
-  )
-
-  const loadAcmeSettings = useCallback(async () => {
-    if (!liveReady) return
-    try {
-      const s = await getAcmeSettings(backendUrl)
-      setAcmeDirectoryUrl(s.directoryUrl)
-      setAcmeZoneId(s.defaultZoneId ?? "")
-      setAcmeTokenConfigured(s.tokenConfigured)
-    } catch {
-      /* ignore */
-    }
-  }, [backendUrl, liveReady])
-
-  useEffect(() => {
-    if (!isLive) {
-      queueMicrotask(() => {
-        setCertificates([])
-        setServerList([])
-        setLoadState("idle")
-        setLoadError(null)
-      })
-      return
-    }
-    queueMicrotask(() => {
-      void loadLive()
-      void loadAcmeSettings()
-    })
-  }, [isLive, loadLive, loadAcmeSettings])
+  const loadLive = catalog.reload
+  const issue = useCertificateIssue(backendUrl, liveReady && canRead, liveReady && canWrite, loadLive, isLive)
+  const issueBusy = issue.busy
+  const issueTerminal = issue.checkpoint?.job?.status === "done" || issue.checkpoint?.job?.status === "failed"
 
   const expiring = useMemo(
-    () => displayCerts.filter((c) => c.status === "valid" && c.daysLeft >= 0 && c.daysLeft <= 30),
-    [displayCerts],
+    () => scopedCerts.filter((c) => c.status === "valid" && c.daysLeft !== null && c.daysLeft >= 0 && c.daysLeft <= 30),
+    [scopedCerts],
   )
-  const expired = useMemo(() => displayCerts.filter((c) => c.status === "expired"), [displayCerts])
+  const expired = useMemo(() => scopedCerts.filter((c) => c.status === "expired"), [scopedCerts])
+
+  const scopeSnapshots = Object.values(snapshots).filter(snapshot => selectedServerId === ALL_SERVERS_ID || snapshot.latest.serverId === selectedServerId)
+  const scopeKnown = !urlError && (!isLive && (selectedServerId === ALL_SERVERS_ID || mockServers.some(server => server.id === selectedServerId)) || canRead && catalog.hasState && !loadError && (selectedServerId === ALL_SERVERS_ID || !!snapshots[selectedServerId]) && scopeSnapshots.every(snapshot => snapshot.latest.error === null))
+  const classificationsKnown = scopeKnown && scopedCerts.every(cert => cert.status !== "unknown" && cert.daysLeft !== null)
 
   const filtered = useMemo(() => {
-    return displayCerts.filter((c) => {
+    return scopedCerts.filter((c) => {
       if (statusFilter !== "all" && c.status !== statusFilter) return false
       if (!search) return true
       const q = search.toLowerCase()
@@ -584,140 +447,96 @@ export default function CertificatesPage() {
         c.sans.some((s) => s.includes(q))
       )
     })
-  }, [displayCerts, search, statusFilter])
+  }, [scopedCerts, search, statusFilter])
 
   async function handleRefresh() {
-    if (!liveReady) return
-    try {
-      const res = await refreshCertificates(backendUrl)
-      setCertificates(res.certificates)
-      toast.success("Список сертификатов обновлён")
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Ошибка обновления")
-    }
-  }
-
-  async function pollIssueJob(jobId: string) {
-    for (let i = 0; i < 120; i++) {
-      await new Promise((r) => setTimeout(r, 2000))
-      const job = await getCertificateIssueJob(backendUrl, jobId)
-      if (job.status === "done") {
-        toast.success("Сертификат выпущен и импортирован на роутер")
-        setIssueOpen(false)
-        await loadLive(true)
-        return
-      }
-      if (job.status === "failed") {
-        throw new Error(job.error ?? "Выпуск не удался")
-      }
-    }
-    throw new Error("Таймаут ожидания выпуска сертификата")
+    await loadLive()
   }
 
   async function handleIssue() {
-    if (!liveReady) return
-    const domains = [
-      issueCommonName.trim(),
-      ...issueSans.split(/[\n,;]+/).map((s) => s.trim()),
-    ].filter(Boolean)
-    if (!issueServerId || !issueCertName.trim() || domains.length === 0) {
-      toast.error("Укажите сервер, имя сертификата и домены")
-      return
-    }
-    setIssueBusy(true)
-    try {
-      const trustStore: Array<"www" | "api"> = []
-      if (issueTrustWww) trustStore.push("www")
-      if (issueTrustApi) trustStore.push("api")
-      const { jobId } = await createCertificateIssueJob(backendUrl, {
-        serverId: issueServerId,
-        certName: issueCertName.trim(),
-        domainNames: domains,
-        trustStore,
-      })
-      toast.message("Выпуск сертификата запущен…")
-      await pollIssueJob(jobId)
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Ошибка выпуска")
-    } finally {
-      setIssueBusy(false)
-    }
+    if (issue.checkpoint) { await issue.run(); return }
+    if (!liveReady || !canWrite || !canRead || urlError || !catalog.hasServers || serverError || !catalog.servers.some(server => String(server.id) === issueServerId && server.enabled)) return
+    const domains = [issueCommonName.trim(), ...issueSans.split(/[\n,;]+/).map(value => value.trim())].filter(Boolean)
+    if (!issueServerId || !issueCertName.trim() || domains.length === 0) { toast.error("Укажите сервер, имя сертификата и домены"); return }
+    await issue.run({ serverId: issueServerId, certName: issueCertName.trim(), domainNames: domains, trustStore: [...(issueTrustWww ? ["www" as const] : []), ...(issueTrustApi ? ["api" as const] : [])] })
   }
-
-  async function handleSaveAcmeSettings() {
-    if (!liveReady) return
-    setAcmeSaveBusy(true)
-    try {
-      const saved = await putAcmeSettings(backendUrl, {
-        directoryUrl: acmeDirectoryUrl.trim(),
-        defaultZoneId: acmeZoneId.trim() || null,
-        cloudflareApiToken: acmeTokenDraft.trim() ? acmeTokenDraft.trim() : undefined,
-      })
-      setAcmeTokenConfigured(saved.tokenConfigured)
-      setAcmeTokenDraft("")
-      toast.success("Настройки ACME сохранены")
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Не удалось сохранить настройки")
-    } finally {
-      setAcmeSaveBusy(false)
-    }
-  }
-
-  async function handleTestAcme() {
-    if (!liveReady) return
-    try {
-      const res = await testAcmeSettings(backendUrl, {
-        cloudflareApiToken: acmeTokenDraft.trim() || undefined,
-      })
-      if (res.ok) toast.success(res.message ?? "Cloudflare API доступен")
-      else toast.error(res.message ?? "Проверка не прошла")
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Проверка Cloudflare не удалась")
-    }
+  function startNewIssue() {
+    if (!issue.reset()) return
+    setIssueCertName(""); setIssueCommonName(""); setIssueSans(""); setIssueStep(1)
   }
 
   return (
-    <div className="flex flex-col h-full">
-      <PageHeader
-        crumbs={[{ label: "Управление" }, { label: "Сертификаты" }]}
-        actions={
-          <>
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={!liveReady || loadState === "loading"}
-              onClick={() => {
-                void handleRefresh()
-              }}
-            >
-              <RefreshCwIcon className={cn("size-4", loadState === "loading" && "animate-spin")} />
-              Обновить
-            </Button>
-            <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
-              <UploadIcon className="size-4" />
-              Импорт
-            </Button>
-            <Button size="sm" disabled={!liveReady || issueBusy} onClick={() => { setIssueStep(1); setIssueOpen(true) }}>
-              <PlusIcon className="size-4" />
-              Выпустить сертификат
-            </Button>
-          </>
-        }
-      />
-
-      <div className="flex-1 overflow-y-auto p-6">
-        <div className="flex flex-col gap-5">
+    <>
+    <ServerRailLayout
+      items={certRailItems}
+      selectedId={selectedServerId}
+      onSelect={setSelectedServerId}
+      showAll
+      allCount={displayServers.length}
+      preserveSelection
+      loading={isLive && loading && displayServers.length === 0}
+      header={
+        <PageHeader
+          crumbs={[{ label: "Управление" }, { label: "Сертификаты" }]}
+          actions={
+            <>
+              <ServerRailMobileButton />
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!isLive || loading || (!canRead && !canReadServers)}
+                onClick={() => {
+                  void handleRefresh()
+                }}
+              >
+                <RefreshCwIcon className={cn("size-4", loading && "animate-spin")} />
+                Обновить
+              </Button>
+              <Button variant="outline" size="sm" disabled title="Импорт сертификатов пока недоступен">
+                <UploadIcon className="size-4" />
+                Импорт
+              </Button>
+              <Button
+                size="sm"
+                disabled={!issue.hydrated || !liveReady || !canRead || (!issue.checkpoint && (!canWrite || !!urlError || !catalog.hasServers || !!serverError || !!issue.storageError))}
+                onClick={() => {
+                  setIssueStep(issue.checkpoint ? 4 : 1)
+                  if (!issue.checkpoint && selectedServerId !== ALL_SERVERS_ID) setIssueServerId(selectedServerId)
+                  setIssueOpen(true)
+                }}
+              >
+                <PlusIcon className="size-4" />
+                {issue.checkpoint ? "Задача выпуска" : "Выпустить сертификат"}
+              </Button>
+            </>
+          }
+        />
+      }
+    >
+        <div className="flex flex-col gap-5 min-w-0">
+          {!isLive && <p role="status" className="text-xs text-muted-foreground">Моковые данные</p>}
+          {urlError && <div role="alert" aria-label="Контекст сертификатов">{urlError} <Button variant="outline" size="sm" onClick={() => writeContext({ server: null, status: null, q: null }, true)}>Сбросить контекст</Button></div>}
+          {!urlError && selectedServerId !== ALL_SERVERS_ID && (isLive ? catalog.hasState && !snapshots[selectedServerId] : !mockServers.some(server => server.id === selectedServerId)) && <p role="alert">Выбранный сервер недоступен в каталоге сертификатов. Выберите другой сервер.</p>}
           {isLive && backendStatus === false && (
-            <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-700 dark:text-amber-300">
+            <div className="rounded-lg border border-warning/30 bg-warning/5 px-4 py-3 text-sm text-warning">
               Backend недоступен — live-операции отключены.
             </div>
           )}
           {loadError && isLive && (
-            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
-              {loadError}
+            <div role="alert" aria-label="Каталог сертификатов" className="[overflow-wrap:anywhere] rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+              {catalog.hasState ? "Последние данные сохранены. " : "Сертификаты пока неизвестны. "}{loadError}
             </div>
           )}
 
+          {isLive && serverError && <p role="alert" aria-label="Серверы сертификатов" className="[overflow-wrap:anywhere]">{catalog.hasServers ? "Последние серверы сохранены. " : "Каталог серверов пока неизвестен. "}{serverError}</p>}
+          {isLive && !canRead && <p role="status">Нет права mm:certificates:read.</p>}
+          {isLive && !canReadServers && <p role="status">Нет права mm:servers:read. Выбор устройства для выпуска недоступен.</p>}
+          {isLive && catalog.collectedAt && <p className="text-xs text-muted-foreground">Последнее чтение каталога: {new Date(catalog.collectedAt).toLocaleString("ru-RU")}</p>}
+          {isLive && Object.values(snapshots).filter(snapshot => selectedServerId === ALL_SERVERS_ID || snapshot.latest.serverId === selectedServerId).map(snapshot => <div key={snapshot.latest.serverId}>
+            {snapshot.latest.error && <p role="alert" aria-label={"Сертификаты сервера " + snapshot.latest.serverId} className="[overflow-wrap:anywhere]">{snapshot.latest.serverName}: {snapshot.latest.error}. {snapshot.confirmed ? "Последние сертификаты сохранены." : "Сертификаты пока неизвестны."}</p>}
+            <p className="text-xs text-muted-foreground">{snapshot.latest.serverName}: {snapshot.confirmed ? "Подтверждённые данные от " + new Date(snapshot.confirmed.collectedAt).toLocaleString("ru-RU") : "Успешного чтения нет"}</p>
+          </div>)}
+
           {(expiring.length > 0 || expired.length > 0) && (
             <div className="flex flex-col gap-2">
               {expired.length > 0 && <CertPartAlertExpired expired={expired} />}
@@ -725,48 +544,46 @@ export default function CertificatesPage() {
             </div>
           )}
 
-          <CertPartKpi displayCerts={displayCerts} expiring={expiring} expired={expired} />
+          {!classificationsKnown && <p role="status" className="text-xs text-muted-foreground">Сводка неполная: часть устройств, статусов или сроков неизвестна. Таблица показывает доступные снимки.</p>}
+          <CertPartKpi displayCerts={scopedCerts} expiring={expiring} expired={expired} complete={classificationsKnown} totalKnown={scopeKnown} />
 
-          {liveReady && (
-            <CertPartAcmeSettings
-              acmeDirectoryUrl={acmeDirectoryUrl}
-              setAcmeDirectoryUrl={setAcmeDirectoryUrl}
-              acmeZoneId={acmeZoneId}
-              setAcmeZoneId={setAcmeZoneId}
-              acmeTokenDraft={acmeTokenDraft}
-              setAcmeTokenDraft={setAcmeTokenDraft}
-              acmeTokenConfigured={acmeTokenConfigured}
-              acmeSaveBusy={acmeSaveBusy}
-              onTest={() => {
-                void handleTestAcme()
-              }}
-              onSave={() => {
-                void handleSaveAcmeSettings()
-              }}
-            />
-          )}
+          <CertificateRenewSettingsPanel backendUrl={backendUrl} liveReady={liveReady} canRead={canRead} canWrite={canWrite} />
+
+          <CertificateAcmeSettings backendUrl={backendUrl} liveReady={liveReady} canRead={canRead} canWrite={canWrite} />
 
           <DataPageCard>
-            <CertPartTableToolbar
+            <DataPageToolbar
               search={search}
-              setSearch={setSearch}
-              statusFilter={statusFilter}
-              setStatusFilter={setStatusFilter}
-              filteredCount={filtered.length}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по имени, CN, эмитенту…"
+              filterControl={<div role="group" aria-label="Статус сертификатов" className="w-full sm:w-auto max-w-full overflow-x-auto"><SegmentedControl className="whitespace-nowrap"
+                value={statusFilter}
+                onChange={setStatusFilter}
+                options={[
+                  { value: "all", label: "Все" },
+                  { value: "valid", label: "Действующие" },
+                  { value: "expired", label: "Истёкшие" },
+                  { value: "revoked", label: "Отозванные" },
+                  { value: "unknown", label: "Неизвестные" },
+                ]}
+              /></div>}
+              countLabel={isLive && !catalog.hasState ? "Количество неизвестно" : `${filtered.length} строк в снимках`}
             />
-            <CertificatesDataGrid
+            {urlError ? <p role="status" className="p-5">Исправьте контекст ссылки</p> : isLive && scopedCerts.length === 0 && !scopeKnown ? <p role="status" className="p-5">{loading ? "Загрузка сертификатов…" : "Список сертификатов пока неизвестен"}</p> : <CertificatesDataGrid
               certificates={filtered}
               serverMap={serverById}
-              isLoading={prefsHydrated && isLive && loadState === "loading" && displayCerts.length === 0}
-            />
+              emptyTitle={search || statusFilter !== "all" ? "Нет совпадений" : "Нет сертификатов"}
+              emptyDescription={search || statusFilter !== "all" ? "Измените фильтр или поиск" : "Подтверждённый каталог пуст"}
+              isLoading={isLive && loading && displayCerts.length === 0}
+            />}
           </DataPageCard>
 
           <CertPartReference />
         </div>
-      </div>
+    </ServerRailLayout>
 
       <Sheet open={issueOpen} onOpenChange={(v) => { setIssueOpen(v); if (!v) setIssueStep(1) }}>
-        <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
+        <SheetContent side="right" className="data-[side=right]:w-full data-[side=right]:sm:max-w-lg min-w-0 flex flex-col gap-0 p-0">
           <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
             <SheetTitle>Выпуск сертификата</SheetTitle>
             <SheetDescription>
@@ -774,6 +591,11 @@ export default function CertificatesPage() {
             </SheetDescription>
           </SheetHeader>
 
+          <div className="px-6 pt-3 text-sm min-w-0 [overflow-wrap:anywhere]">
+            {(issue.error || issue.storageError) && <p role="alert" aria-label="Выпуск сертификата">{issue.error || issue.storageError}</p>}
+            {issue.checkpoint && <p className="text-xs text-muted-foreground">Закрытие формы не отменяет серверную задачу. Её можно проверить повторно.</p>}
+            {issue.checkpoint && <p role="status">Задача {issue.checkpoint.request.requestId}: {issue.checkpoint.job ? ({ queued: "В очереди", running: "Выполняется", done: "Завершена", failed: "Ошибка" }[issue.checkpoint.job.status]) + " · " + issue.checkpoint.job.step : issue.checkpoint.accepted ? "Принята; результат пока неизвестен" : "Принятие запроса пока не подтверждено"}. Сервер {issue.checkpoint.request.serverId}, сертификат {issue.checkpoint.request.certName}.</p>}
+          </div>
           <Stepper value={issueStep} onValueChange={setIssueStep} className="flex-1 flex flex-col min-h-0 px-6 py-5">
             <StepperNav className="mb-5">
               {[
@@ -794,30 +616,33 @@ export default function CertificatesPage() {
             <StepperPanel className="flex-1 overflow-y-auto">
               {[1, 2, 3, 4].map((s) => (
                 <StepperContent key={s} value={s}>
+                  <fieldset disabled={issueBusy || !!issue.checkpoint} className="min-w-0">
                   <CertPartIssueForm
                     step={s as 1 | 2 | 3 | 4}
-                    serverList={serverList}
-                    issueServerId={issueServerId}
+                    serverList={displayServers}
+                    issueServerId={String(issue.checkpoint?.request.serverId ?? issueServerId)}
                     setIssueServerId={setIssueServerId}
-                    issueCertName={issueCertName}
+                    issueCertName={issue.checkpoint?.request.certName ?? issueCertName}
                     setIssueCertName={setIssueCertName}
-                    issueCommonName={issueCommonName}
+                    issueCommonName={issue.checkpoint?.request.domainNames[0] ?? issueCommonName}
                     setIssueCommonName={setIssueCommonName}
-                    issueSans={issueSans}
+                    issueSans={issue.checkpoint ? issue.checkpoint.request.domainNames.slice(1).join("\n") : issueSans}
                     setIssueSans={setIssueSans}
-                    issueTrustWww={issueTrustWww}
+                    issueTrustWww={issue.checkpoint ? issue.checkpoint.request.trustStore?.includes("www") ?? true : issueTrustWww}
                     setIssueTrustWww={setIssueTrustWww}
-                    issueTrustApi={issueTrustApi}
+                    issueTrustApi={issue.checkpoint ? issue.checkpoint.request.trustStore?.includes("api") ?? true : issueTrustApi}
                     setIssueTrustApi={setIssueTrustApi}
                   />
+                  </fieldset>
                 </StepperContent>
               ))}
             </StepperPanel>
           </Stepper>
 
-          <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
-            <SheetClose render={<Button variant="outline" className="flex-1" disabled={issueBusy} />}>
-              Отмена
+          <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row flex-wrap gap-2">
+            {issueTerminal && canWrite && <Button variant="outline" disabled={issueBusy} onClick={startNewIssue}>Новый выпуск</Button>}
+            <SheetClose render={<Button variant="outline" className="flex-1" />}>
+              {issue.checkpoint ? "Закрыть" : "Отмена"}
             </SheetClose>
             {issueStep > 1 && (
               <Button variant="outline" className="flex-1" disabled={issueBusy} onClick={() => setIssueStep((s) => s - 1)}>
@@ -827,7 +652,7 @@ export default function CertificatesPage() {
             {issueStep < 4 ? (
               <Button
                 className="flex-1"
-                disabled={issueStep === 1 && (!issueServerId || !issueCertName)}
+                disabled={issueBusy || !issue.checkpoint && issueStep === 1 && (!issueServerId || !issueCertName)}
                 onClick={() => setIssueStep((s) => s + 1)}
               >
                 Далее
@@ -835,26 +660,16 @@ export default function CertificatesPage() {
             ) : (
               <Button
                 className="flex-1"
-                disabled={!liveReady || issueBusy}
+                disabled={!issue.hydrated || !liveReady || !canRead || issueBusy || issueTerminal || (!issue.checkpoint && (!canWrite || !!urlError || !catalog.hasServers || !!serverError || !!issue.storageError))}
                 onClick={() => { void handleIssue() }}
               >
-                {issueBusy ? "Выпуск…" : "Выпустить"}
+                {issueBusy ? "Проверяем…" : issueTerminal ? "Задача завершена" : issue.checkpoint ? "Продолжить проверку" : "Выпустить"}
               </Button>
             )}
           </SheetFooter>
         </SheetContent>
       </Sheet>
 
-      <FileImportDialog
-        open={importOpen}
-        onOpenChange={setImportOpen}
-        title="Импорт сертификата"
-        description="Загрузите PEM, CRT или PKCS#12 для импорта на RouterOS"
-        accept=".pem,.crt,.cer,.p12,.pfx"
-        onImport={async (files) => {
-          toast.success(`Файл ${files[0]?.name} готов к импорту на роутер`)
-        }}
-      />
-    </div>
+    </>
   )
 }

app/(main)/communities/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo, useEffect } from "react"
+import { useEffect, useRef, useState, useMemo } from "react"
 import { PageHeader } from "@/components/page-header"
 import { DataPageCard } from "@/components/data-page-card"
 import {
@@ -8,21 +8,20 @@ import {
   type CommunityRow,
   TYPE_LABELS,
   ACTION_LABELS,
-  ACTION_COLOR,
 } from "@/components/data-grids/communities-data-grid"
-import {
-  Card, CardContent, CardHeader, CardTitle, CardDescription,
-} from "@/components/ui/card"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { OpsPanel } from "@/components/ops-panel"
+import { Alert, AlertTitle, AlertDescription } from "@/components/reui/alert"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
   PlusIcon, SearchIcon, TagIcon, FilterIcon,
   CopyIcon, CheckIcon, TrashIcon, PencilIcon,
-  LoaderCircleIcon,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { filters } from "@/lib/data"
-import { useDataSource } from "@/lib/data-source"
+import { useEvoCatalogView, EvoBgpCatalogStatus, EvoBgpCatalogUnavailable } from "@/components/settings/evobgp-catalog-status"
 import { useEvoBGP } from "@/lib/evobgp-context"
 
 // ─── types ────────────────────────────────────────────────────────────────────
@@ -98,24 +97,31 @@ const COMMUNITIES: Community[] = [
 // ─── page ─────────────────────────────────────────────────────────────────────
 
 export default function CommunitiesPage() {
-  const { mode } = useDataSource()
-  const { enabled, snapshot, loading, error } = useEvoBGP()
-  const useEvoCatalog = mode === "live" && enabled
+  const { sourceKey } = useEvoBGP()
+  return <CommunitiesContent key={sourceKey} />
+}
+function CommunitiesContent() {
+  const { mode, snapshot, loading, known } = useEvoCatalogView()
 
   const [search, setSearch] = useState("")
   const [typeFilter, setTypeFilter] = useState<CommType | "all">("all")
   const [copied, setCopied] = useState<string | null>(null)
-  const [selected, setSelected] = useState<Community | null>(null)
+  const [copying, setCopying] = useState(false)
+  const [copyError, setCopyError] = useState<string | null>(null)
+  const copyRequest = useRef({ active: true, pending: false, revision: 0, timer: null as ReturnType<typeof setTimeout> | null })
+  useEffect(() => {
+    const state = copyRequest.current; state.active = true
+    return () => { state.active = false; state.revision++; if (state.timer) clearTimeout(state.timer) }
+  }, [])
+  const [selectedId, setSelectedId] = useState<string | null>(null)
 
   const listData = useMemo((): Community[] => {
-    if (!useEvoCatalog) return COMMUNITIES
+    if (mode === "mock") return COMMUNITIES
     if (loading && !snapshot) return []
     return snapshot?.communities ?? []
-  }, [useEvoCatalog, loading, snapshot])
+  }, [mode, loading, snapshot])
 
-  useEffect(() => {
-    setSelected(null)
-  }, [useEvoCatalog])
+  const selected = known ? listData.find(row => row.id === selectedId) ?? null : null
 
   const filtered = useMemo(() => {
     const q = search.toLowerCase()
@@ -126,10 +132,24 @@ export default function CommunitiesPage() {
     })
   }, [search, typeFilter, listData])
 
-  const handleCopy = (value: string) => {
-    navigator.clipboard.writeText(value).catch(() => {})
-    setCopied(value)
-    setTimeout(() => setCopied(null), 1500)
+  const handleCopy = async (value: string) => {
+    const state = copyRequest.current
+    if (!state.active || state.pending) return
+    state.pending = true; const revision = ++state.revision
+    if (state.timer) clearTimeout(state.timer)
+    const current = () => state.active && state.revision === revision
+    setCopying(true); setCopied(null); setCopyError(null)
+    try {
+      await navigator.clipboard.writeText(value)
+      if (!current()) return
+      setCopied(value)
+      state.timer = setTimeout(() => { if (current()) setCopied(null) }, 1500)
+    } catch {
+      if (current()) setCopyError("Браузер не разрешил запись в буфер обмена. Повторите копирование или выделите значение вручную.")
+    } finally {
+      state.pending = false
+      if (current()) setCopying(false)
+    }
   }
 
   const filterName = (id: string) => filters.find(f => f.id === id)?.name ?? id
@@ -138,8 +158,7 @@ export default function CommunitiesPage() {
     <div className="flex flex-col h-full">
       <PageHeader
         crumbs={[{ label: "Данные" }, { label: "Communities" }]}
-        actions={
-          <Button size="sm">
+        actions={mode === "live" ? null : <Button size="sm">
             <PlusIcon className="size-4" />Добавить
           </Button>
         }
@@ -147,38 +166,46 @@ export default function CommunitiesPage() {
 
       <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
-          {useEvoCatalog && (
-            <p className={cn(
-              "text-xs flex items-center gap-1.5 -mt-1",
-              error ? "text-destructive" : "text-muted-foreground",
-            )}>
-              {loading && <LoaderCircleIcon className="size-3.5 animate-spin shrink-0" />}
-              {error
-                ? `EvoBGP: ${error}`
-                : snapshot?.fetchedAt
-                  ? `Источник: EvoBGP, обновлено ${new Date(snapshot.fetchedAt).toLocaleString("ru-RU")}`
-                  : loading ? "Загрузка EvoBGP…" : "EvoBGP"}
-            </p>
-          )}
+          <EvoBgpCatalogStatus />
+          {copyError && <Alert variant="warning"><AlertTitle>Community не скопировано</AlertTitle><AlertDescription>{copyError}</AlertDescription></Alert>}
+          {copying && <p role="status" className="text-xs text-muted-foreground">Копирование community…</p>}
+          {copied && <p role="status" className="text-xs text-muted-foreground">Community {copied} скопировано</p>}
 
-          {/* ── summary ── */}
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-            {[
-              { label: "Всего communities", value: String(listData.length) },
-              { label: "Активных",          value: String(listData.filter(c => c.enabled).length) },
-              { label: "Стандартных",       value: String(listData.filter(c => c.type === "standard").length) },
-              { label: "Использует фильтры",value: String(new Set(listData.flatMap(c => c.filterIds)).size) },
-            ].map(({ label, value }) => (
-              <Card key={label}>
-                <CardContent className="pt-4 pb-3 px-4">
-                  <p className="text-xs text-muted-foreground">{label}</p>
-                  <p className="text-2xl font-semibold tabular-nums">{value}</p>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+          <KpiStatGrid
+            aria-label="Сводка communities"
+            items={[
+              {
+                id: "all",
+                label: "Всего communities",
+                value: known ? String(listData.length) : "—",
+                icon: <TagIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "enabled",
+                label: "Активных",
+                value: known ? String(listData.filter((c) => c.enabled).length) : "—",
+                icon: <CheckIcon className="size-4" />,
+                iconClassName: "text-success",
+              },
+              {
+                id: "standard",
+                label: "Стандартных",
+                value: known ? String(listData.filter((c) => c.type === "standard").length) : "—",
+                icon: <TagIcon className="size-4" />,
+                iconClassName: "text-info",
+              },
+              {
+                id: "filters",
+                label: "Использует фильтры",
+                value: mode === "mock" ? String(new Set(listData.flatMap((c) => c.filterIds)).size) : "—",
+                icon: <FilterIcon className="size-4" />,
+                iconClassName: "text-primary",
+              },
+            ]}
+          />
 
-          <div className="grid grid-cols-[1fr_320px] gap-5">
+          <div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_320px] gap-5">
             {/* ── main table ── */}
             <div className="flex flex-col gap-3">
               {/* toolbar */}
@@ -187,7 +214,7 @@ export default function CommunitiesPage() {
                   <SearchIcon className="absolute left-2.5 top-2 size-4 text-muted-foreground" />
                   <Input className="pl-8 h-8 text-sm" placeholder="Поиск community…" value={search} onChange={e => setSearch(e.target.value)} />
                 </div>
-                <div className="flex gap-1">
+                <div className="flex flex-wrap gap-1">
                   {(["all", "standard", "no-export", "no-advertise", "custom"] as const).map(t => (
                     <Button key={t} size="sm" variant={typeFilter === t ? "default" : "outline"}
                       className="h-8 text-xs px-2.5" onClick={() => setTypeFilter(t)}>
@@ -199,49 +226,48 @@ export default function CommunitiesPage() {
 
               {/* list */}
               <DataPageCard>
-                <CommunitiesDataGrid
+                {known ? <CommunitiesDataGrid
                   communities={filtered}
                   selectedId={selected?.id}
                   copiedValue={copied}
-                  onSelect={setSelected}
+                  copying={copying}
+                  onSelect={row => setSelectedId(row.id)}
                   onCopy={handleCopy}
-                />
+                /> : <EvoBgpCatalogUnavailable />}
               </DataPageCard>
             </div>
 
             {/* ── detail panel ── */}
             {selected ? (
-              <Card className="h-fit sticky top-0">
-                <CardHeader className="pb-3">
-                  <div className="flex items-start justify-between gap-2">
-                    <div>
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className={cn(
-                          "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium",
-                          selected.enabled
-                            ? "bg-emerald-500/10 text-emerald-600"
-                            : "bg-muted text-muted-foreground"
-                        )}>
-                          {selected.enabled ? "Активен" : "Выключен"}
-                        </span>
-                      </div>
-                      <CardTitle className="text-sm font-mono">{selected.value}</CardTitle>
-                      <CardDescription className="text-xs mt-0.5">{selected.name}</CardDescription>
-                    </div>
+              <OpsPanel
+                className="h-fit sticky top-0"
+                title={<span className="font-mono">{selected.value}</span>}
+                description={selected.name}
+                headerRight={
                     <div className="flex gap-1 shrink-0">
-                      <Button size="sm" variant="ghost" className="size-7 p-0"><PencilIcon className="size-3.5" /></Button>
-                      <Button size="sm" variant="ghost" className="size-7 p-0 text-destructive hover:text-destructive"><TrashIcon className="size-3.5" /></Button>
+                      <Button size="sm" variant="ghost" aria-label="Изменить community" disabled className="size-7 p-0"><PencilIcon className="size-3.5" /></Button>
+                      <Button size="sm" variant="ghost" aria-label="Удалить community" disabled className="size-7 p-0 text-destructive hover:text-destructive"><TrashIcon className="size-3.5" /></Button>
                     </div>
+                }
+                contentClassName="flex flex-col gap-4 text-sm px-5 pb-5"
+              >
+                  <div className="flex items-center gap-2">
+                    <span className={cn(
+                      "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium",
+                      selected.enabled
+                        ? "bg-emerald-500/10 text-emerald-600"
+                        : "bg-muted text-muted-foreground"
+                    )}>
+                      {selected.enabled ? "Активен" : "Выключен"}
+                    </span>
                   </div>
-                </CardHeader>
-                <CardContent className="space-y-4 text-sm">
                   <p className="text-xs text-muted-foreground">{selected.description}</p>
 
                   <div className="space-y-2">
                     {[
                       ["Тип",       TYPE_LABELS[selected.type]],
                       ["Действие",  `${ACTION_LABELS[selected.action]}${selected.actionValue !== undefined ? ` ${selected.actionValue}` : ""}`],
-                      ["Маршрутов", selected.prefixCount.toLocaleString("ru-RU")],
+                      ["Маршрутов", selected.prefixCount?.toLocaleString("ru-RU") ?? "—"],
                       ["Серверов",  selected.serverCount.toLocaleString("ru-RU")],
                     ].map(([k, v]) => (
                       <div key={k} className="flex justify-between gap-2">
@@ -267,20 +293,19 @@ export default function CommunitiesPage() {
                   )}
 
                   <div className="pt-2 border-t flex flex-col gap-2">
-                    <Button size="sm" variant="outline" className="w-full justify-start gap-2" onClick={() => handleCopy(selected.value)}>
+                    <Button size="sm" variant="outline" className="w-full justify-start gap-2" disabled={copying} onClick={() => { void handleCopy(selected.value) }}>
                       {copied === selected.value ? <CheckIcon className="size-3.5" /> : <CopyIcon className="size-3.5" />}
                       Скопировать значение
                     </Button>
                   </div>
-                </CardContent>
-              </Card>
+              </OpsPanel>
             ) : (
-              <Card className="h-fit">
-                <CardContent className="flex flex-col items-center justify-center py-12 gap-3 text-center">
+              <Frame dense className="w-full h-fit">
+                <FramePanel className="flex flex-col items-center justify-center py-12 gap-3 text-center">
                   <TagIcon className="size-8 text-muted-foreground/30" />
                   <p className="text-xs text-muted-foreground">Выберите community<br />для просмотра деталей</p>
-                </CardContent>
-              </Card>
+                </FramePanel>
+              </Frame>
             )}
           </div>
         </div>

app/(main)/containers/page.tsx

@@ -1,13 +1,20 @@
 "use client"
 
-import { useMemo, useState } from "react"
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import { readContainersUrl, patchContainersUrl, type ContainerStatusFilter } from "@/lib/containers-url-state"
 import { PageHeader } from "@/components/page-header"
-import { routerContainers, servers } from "@/lib/data"
-import type { RouterContainer } from "@/lib/data"
+import { routerContainers as mockContainers, servers as mockServers } from "@/lib/data"
+import type { RouterContainer, Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
-import { Card, CardContent } from "@/components/ui/card"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { OpsPanel } from "@/components/ops-panel"
 import { Button } from "@/components/ui/button"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
 import { cn } from "@/lib/utils"
+import { toast } from "sonner"
 import {
   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
   DropdownMenuItem, DropdownMenuSeparator,
@@ -15,161 +22,115 @@ import {
 import {
   BoxIcon, PlayIcon, StopCircleIcon, SearchIcon,
   MoreHorizontalIcon, Trash2Icon, PencilIcon, PowerIcon,
-  CodeXmlIcon, CopyIcon, CheckIcon, ActivityIcon, ServerIcon,
-  TerminalIcon, AlertCircleIcon,
+  CodeXmlIcon, ActivityIcon, ServerIcon,
+  TerminalIcon, AlertCircleIcon, RefreshCwIcon,
 } from "lucide-react"
-import {
-  Sheet, SheetContent, SheetHeader, SheetTitle,
-  SheetDescription, SheetFooter, SheetClose,
-} from "@/components/ui/sheet"
+import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
+import { useDataSource } from "@/lib/data-source"
+import { ApiClientError, requestJson } from "@/shared/api/http-client"
+import { mutateContainer, type ContainerAction, readContainersState } from "@/shared/api/containers"
+import { serverListSchema } from "@mmapp/contracts/servers"
+import type { ContainerServerState, ContainersState } from "@mmapp/contracts/containers"
+import { can } from "@/lib/auth"
+import { userApiError } from "@/shared/api/users"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"
 
-// ─── helpers ──────────────────────────────────────────────────────────────────
+type ContainerView = Omit<RouterContainer, "status" | "startOnBoot"> & { status: RouterContainer["status"] | "unknown"; startOnBoot: boolean | null }
+type ContainerServer = Omit<Server, "status"> & {status: Server["status"] | null}
 
-function serverFor(id: string) {
-  return servers.find((s) => s.id === id)
+interface BackendServer {
+  id: number
+  name: string
+  host: string
+  type?: Server["type"]
+  site?: string
+  country: string
+  asn?: string
+  enabled: boolean
+  status?: Server["status"] | null
+  latency?: number | null
 }
 
-function statusConfig(status: RouterContainer["status"]) {
+function mapBackendServer(s: BackendServer): ContainerServer {
   return {
+    id: String(s.id),
+    name: s.name || s.host,
+    host: s.host,
+    model: "—",
+    os: "—",
+    site: s.site ?? "",
+    country: s.country || "UN",
+    asn: s.asn ?? "",
+    type: s.type ?? "exit-node",
+    enabled: s.enabled,
+    status: s.status ?? null,
+    latency: s.latency ?? null,
+    sessions: 0,
+  }
+}
+
+function statusConfig(status: ContainerView["status"]) {
+  return {
+    unknown: { dot: "bg-muted-foreground", badge: "bg-muted text-muted-foreground border-border", label: "Неизвестно" },
     running: {
-      dot: "bg-emerald-500 animate-pulse",
-      badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
-      label: "Running",
+      dot: "bg-success",
+      badge: "bg-success/10 text-success border-success/20",
+      label: "Работает",
     },
     stopped: {
       dot: "bg-muted-foreground",
       badge: "bg-muted/50 text-muted-foreground border-border",
-      label: "Stopped",
+      label: "Остановлен",
     },
     error: {
-      dot: "bg-red-500 animate-pulse",
-      badge: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
-      label: "Error",
+      dot: "bg-destructive",
+      badge: "bg-destructive/10 text-destructive border-destructive/20",
+      label: "Ошибка",
     },
   }[status]
 }
 
-// ─── RSC generator ────────────────────────────────────────────────────────────
-
-function generateContainerRsc(c: RouterContainer): string {
-  const srv = serverFor(c.serverId)
-  const lines: string[] = []
-  lines.push(`# RouterOS Container — ${c.name}`)
-  if (srv) lines.push(`# Сервер: ${srv.name} (${srv.host})`)
-  lines.push(`# Образ: ${c.image}:${c.tag}`)
-  lines.push(`# RouterOS 7.4+ · /container`)
-  lines.push(``)
-
-  // interface
-  for (const iface of c.interfaces) {
-    lines.push(`/interface/veth/add name=${iface} address=172.17.0.2/24 gateway=172.17.0.1`)
-  }
-  lines.push(``)
-
-  // envs
-  if (c.envs.length > 0) {
-    lines.push(`/container/envs/add name=${c.name}-envs \\`)
-    for (const { key, value } of c.envs) {
-      lines.push(`  ${key}="${value}" \\`)
-    }
-    lines.push(``)
-  }
-
-  // mounts
-  for (const m of c.mounts) {
-    lines.push(`/container/mounts/add name=${c.name}-mount-${m.dst.replace(/\//g, "-").slice(1)} \\`)
-    if (m.src) lines.push(`  src=${m.src} \\`)
-    lines.push(`  dst=${m.dst}`)
-    lines.push(``)
-  }
-
-  // container
-  lines.push(`/container/add \\`)
-  lines.push(`  remote-image=${c.image}:${c.tag} \\`)
-  lines.push(`  interface=${c.interfaces[0] ?? "veth-container"} \\`)
-  if (c.envs.length > 0) lines.push(`  envlist=${c.name}-envs \\`)
-  if (c.mounts.length > 0) lines.push(`  mounts=${c.mounts.map((m) => `${c.name}-mount-${m.dst.replace(/\//g, "-").slice(1)}`).join(",")} \\`)
-  if (c.cmd) lines.push(`  cmd="${c.cmd}" \\`)
-  if (c.startOnBoot) lines.push(`  start-on-boot=yes \\`)
-  if (c.comment) lines.push(`  comment="${c.comment}" \\`)
-  lines.push(`  logging=yes`)
-
-  return lines.join("\n")
+type ContainerExport = { container: ContainerView; collectedAt: string | null; failures: ContainerServerState["failures"]; source: "live" | "mock" }
+function ExportSheet({ selection, onClose }: {selection: ContainerExport | null; onClose: () => void}) {
+  const formats = useMemo(() => [{
+    id: "json", label: "Снимок JSON", filename: "container-" + (selection?.container.id ?? "snapshot").replace(/[^a-zA-Z0-9_-]/g, "_") + ".json",
+    code: selection ? JSON.stringify(selection, null, 2) : "",
+  }], [selection])
+  return <CodeExportSheet open={!!selection} onClose={onClose} title="Снимок контейнера" description="Данные каталога; конфигурация устройства и резервная копия в снимок не входят."
+    className="data-[side=right]:w-full data-[side=right]:sm:max-w-xl min-w-0 [&_[data-slot=sheet-footer]]:flex-wrap"
+    beforeCode={<p className="text-xs text-muted-foreground">{selection?.source === "mock" ? "Демонстрационные данные." : "Чтение RouterOS: " + (selection?.collectedAt ? new Date(selection.collectedAt).toLocaleString("ru-RU") : "время неизвестно")}{selection?.failures.length ? " Настройки получены частично; ошибки включены в JSON." : ""}</p>}
+    returnFocus={() => Array.from(document.querySelectorAll<HTMLButtonElement>("button[aria-label]")).find(button => button.getAttribute("aria-label") === "Действия контейнера " + selection?.container.name) ?? null}
+    formats={formats} />
 }
 
-// ─── Export Sheet ─────────────────────────────────────────────────────────────
-
-function ExportSheet({ open, container, onClose }: {
-  open: boolean; container: RouterContainer | null; onClose: () => void
-}) {
-  const [copied, setCopied] = useState(false)
-  const code = useMemo(() => container ? generateContainerRsc(container) : "", [container])
-
-  function handleCopy() {
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(true); setTimeout(() => setCopied(false), 2000)
-    })
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
-      <SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-2xl">
-        <SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <SheetTitle>Экспорт Container</SheetTitle>
-              <SheetDescription>RouterOS 7.4+ · /container · /interface/veth</SheetDescription>
-            </div>
-            <Button variant="outline" size="sm" className="shrink-0" onClick={handleCopy}>
-              {copied ? <><CheckIcon className="size-3.5 text-emerald-500" />Скопировано</> : <><CopyIcon className="size-3.5" />Копировать</>}
-            </Button>
-          </div>
-        </SheetHeader>
-        <div className="flex-1 overflow-y-auto">
-          <pre className="px-6 py-5 text-[12px] font-mono leading-relaxed text-foreground/85 whitespace-pre select-all">
-            {code.split("\n").map((line, i) => {
-              const isComment = line.startsWith("#")
-              const isCmd = /^\//.test(line.trimStart())
-              const isParam = /^\s+[a-z]/.test(line)
-              return (
-                <span key={i} className={
-                  isComment ? "text-muted-foreground"
-                  : isCmd    ? "text-sky-400"
-                  : isParam  ? "text-violet-300"
-                  : "text-foreground"
-                }>
-                  {line}{"\n"}
-                </span>
-              )
-            })}
-          </pre>
-        </div>
-        <SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
-          <SheetClose render={<Button variant="outline" className="flex-1" />}>Закрыть</SheetClose>
-          <Button className="flex-1" onClick={handleCopy}>
-            {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-            {copied ? "Скопировано" : "Копировать .rsc"}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-// ─── Container card ───────────────────────────────────────────────────────────
-
 function ContainerCard({
   container,
+  server,
+  live,
+  busy,
   onExport,
+  onStart,
+  onStop,
+  onRestart,
+  onRemove,
 }: {
-  container: RouterContainer
+  container: ContainerView
+  server?: ContainerServer
+  live: boolean
+  busy: boolean
   onExport: () => void
+  onStart: () => void
+  onStop: () => void
+  onRestart: () => void
+  onRemove: () => void
 }) {
-  const srv = serverFor(container.serverId)
   const cfg = statusConfig(container.status)
+  const canMutate = live && Boolean(container.rosId) && !busy
 
   return (
-    <Card className="overflow-hidden">
+    <Frame dense className="w-full overflow-hidden">
+      <FramePanel className="p-0 overflow-hidden">
       <div className="px-4 py-3 border-b flex items-center justify-between gap-2 bg-muted/10">
         <div className="flex items-center gap-2 min-w-0">
           <span className={cn("size-2 rounded-full shrink-0", cfg.dot)} />
@@ -180,51 +141,56 @@ function ContainerCard({
         </div>
         <DropdownMenu>
           <DropdownMenuTrigger render={
-            <Button variant="ghost" size="icon" className="size-7 shrink-0">
-              <MoreHorizontalIcon className="size-4" />
+            <Button variant="ghost" size="icon" aria-label={"Действия контейнера " + container.name} className="size-11 sm:size-8 shrink-0" disabled={busy}>
+              <MoreHorizontalIcon aria-hidden="true" className="size-4" />
             </Button>
           } />
           <DropdownMenuContent side="bottom" align="end">
             {container.status === "running" ? (
-              <DropdownMenuItem><StopCircleIcon className="size-4 text-amber-500" />Остановить</DropdownMenuItem>
+              <DropdownMenuItem disabled={!canMutate} onClick={onStop}>
+                <StopCircleIcon aria-hidden="true" className="size-4 text-warning" />Остановить
+              </DropdownMenuItem>
             ) : (
-              <DropdownMenuItem><PlayIcon className="size-4 text-emerald-500" />Запустить</DropdownMenuItem>
+              <DropdownMenuItem disabled={!canMutate || container.status === "unknown"} onClick={onStart}>
+                <PlayIcon aria-hidden="true" className="size-4 text-success" />Запустить
+              </DropdownMenuItem>
             )}
-            <DropdownMenuItem><TerminalIcon className="size-4" />Логи</DropdownMenuItem>
-            <DropdownMenuItem><PencilIcon className="size-4" />Редактировать</DropdownMenuItem>
-            <DropdownMenuItem onClick={onExport}><CodeXmlIcon className="size-4" />Экспорт .rsc</DropdownMenuItem>
+            <DropdownMenuItem disabled><TerminalIcon aria-hidden="true" className="size-4" />Логи</DropdownMenuItem>
+            <DropdownMenuItem disabled><PencilIcon aria-hidden="true" className="size-4" />Редактировать</DropdownMenuItem>
+            <DropdownMenuItem onClick={onExport}><CodeXmlIcon aria-hidden="true" className="size-4" />Снимок JSON</DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuItem><PowerIcon className="size-4" />Перезапустить</DropdownMenuItem>
+            <DropdownMenuItem disabled={!canMutate || container.status === "unknown"} onClick={onRestart}>
+              <PowerIcon aria-hidden="true" className="size-4" />Перезапустить
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuItem variant="destructive"><Trash2Icon className="size-4" />Удалить</DropdownMenuItem>
+            <DropdownMenuItem variant="destructive" disabled={!canMutate} onClick={onRemove}>
+              <Trash2Icon className="size-4" />Удалить
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
 
-      <CardContent className="px-4 py-3 flex flex-col gap-3">
-        {/* image */}
+      <div className="px-4 py-3 flex flex-col gap-3">
         <div className="flex items-center gap-2">
-          <BoxIcon className="size-3.5 text-muted-foreground shrink-0" />
-          <span className="font-mono text-xs text-foreground/80">
-            {container.image}:<span className="text-muted-foreground">{container.tag}</span>
+          <BoxIcon aria-hidden="true" className="size-3.5 text-muted-foreground shrink-0" />
+          <span className="font-mono text-xs text-foreground/80 min-w-0 [overflow-wrap:anywhere]">
+            {container.image || "Образ неизвестен"}{container.tag && <>:<span className="text-muted-foreground">{container.tag}</span></>}
           </span>
         </div>
 
-        {/* server */}
-        {srv && (
+        {server && (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <ServerIcon className="size-3.5 shrink-0" />
-            <Flag code={srv.country} size={12} />
-            <span className="font-mono">{srv.name}</span>
+            <ServerIcon aria-hidden="true" className="size-3.5 shrink-0" />
+            <Flag code={server.country} size={12} />
+            <span className="font-mono truncate" title={server.name}>{server.name}</span>
           </div>
         )}
 
-        {/* uptime + stats */}
-        {container.status === "running" && (
+        {container.status === "running" && (container.uptime || container.cpu !== undefined || container.memMb !== undefined) && (
           <div className="flex items-center gap-4 text-xs text-muted-foreground border-t pt-2.5">
             {container.uptime && (
               <div className="flex items-center gap-1">
-                <ActivityIcon className="size-3 text-emerald-500" />
+                <ActivityIcon aria-hidden="true" className="size-3 text-success" />
                 <span>{container.uptime}</span>
               </div>
             )}
@@ -232,7 +198,7 @@ function ContainerCard({
               <div>
                 <span className="text-muted-foreground">CPU </span>
                 <span className={cn("font-mono font-medium",
-                  container.cpu > 50 ? "text-amber-500" : "text-foreground")}>
+                  container.cpu > 50 ? "text-warning" : "text-foreground")}>
                   {container.cpu}%
                 </span>
               </div>
@@ -240,13 +206,12 @@ function ContainerCard({
             {container.memMb !== undefined && (
               <div>
                 <span className="text-muted-foreground">RAM </span>
-                <span className="font-mono font-medium">{container.memMb} МБ</span>
+                <span className="font-mono font-medium">{container.memMb} МиБ</span>
               </div>
             )}
           </div>
         )}
 
-        {/* interfaces */}
         {container.interfaces.length > 0 && (
           <div className="flex flex-wrap gap-1">
             {container.interfaces.map((i) => (
@@ -257,7 +222,6 @@ function ContainerCard({
           </div>
         )}
 
-        {/* mounts */}
         {container.mounts.length > 0 && (
           <div className="flex flex-col gap-1">
             {container.mounts.map((m, idx) => (
@@ -271,137 +235,335 @@ function ContainerCard({
         )}
 
         {container.comment && (
-          <p className="text-xs text-muted-foreground border-t pt-2">{container.comment}</p>
+          <p className="text-xs text-muted-foreground border-t pt-2 [overflow-wrap:anywhere]">{container.comment}</p>
         )}
-      </CardContent>
-    </Card>
+      </div>
+      </FramePanel>
+    </Frame>
   )
 }
 
-// ════════════════════════════════════════════════════════════════════════════
-export default function ContainersPage() {
-  const [search, setSearch]               = useState("")
-  const [statusFilter, setStatusFilter]   = useState<RouterContainer["status"] | "all">("all")
-  const [exportContainer, setExportContainer] = useState<RouterContainer | null>(null)
+export default function ContainersPage() { return <Suspense fallback={<p role="status">Загрузка контекста контейнеров…</p>}><ContainersSource /></Suspense> }
+function ContainersSource() {
+  const { mode, backendUrl, prefsHydrated } = useDataSource()
+  if (!prefsHydrated) return <p role="status">Загрузка настроек контейнеров…</p>
+  return <ContainersContent key={JSON.stringify([mode, backendUrl])} />
+}
+function ContainersContent() {
+  const { mode, backendUrl } = useDataSource()
+  const isLive = mode === "live"
+  const canRead = can("mm:dashboard:read")
+  const canReadServers = can("mm:servers:read")
+  const canWrite = can("mm:servers:write")
+  const params = useSearchParams()
+  const context = readContainersUrl(params)
+  const search = context.search
+  const statusFilter = context.status
+  const selectedServerId = context.server
+  const urlError = context.error
+  function writeContext(changes: Record<string, string | null>, replace = false) {
+    const href = patchContainersUrl(new URLSearchParams(window.location.search), changes) + window.location.hash
+    if (replace) window.history.replaceState(null, "", href); else window.history.pushState(null, "", href)
+  }
+  const setSearch = (value: string) => writeContext({ q: value }, true)
+  const setStatusFilter = (value: ContainerStatusFilter) => writeContext({ status: value === "all" ? null : value })
+  const setSelectedServerId = (value: string) => writeContext({ server: value === ALL_SERVERS_ID ? null : value })
+  const [exportContainer, setExportContainer] = useState<ContainerExport | null>(null)
+  const [state, setState] = useState<ContainersState | null>(null)
+  const [lastStates, setLastStates] = useState<Record<number, ContainerServerState>>({})
+  const [liveServers, setLiveServers] = useState<ContainerServer[]>([])
+  const [loading, setLoading] = useState(isLive && (canRead || canReadServers))
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<ContainerView | null>(null)
+  const deleteReturnLabel = useRef<string | null>(null)
+  useEffect(() => {
+    if (deleteTarget || busyId || !deleteReturnLabel.current) return
+    const frame = requestAnimationFrame(() => {
+      const target = Array.from(document.querySelectorAll<HTMLButtonElement>("button[aria-label]")).find(button => button.getAttribute("aria-label") === deleteReturnLabel.current)
+      ;(target ?? Array.from(document.querySelectorAll<HTMLButtonElement>("button")).find(button => button.textContent?.trim() === "Обновить"))?.focus()
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [deleteTarget, busyId])
+  const [operationError, setOperationError] = useState<string | null>(null)
+  const [operationNotice, setOperationNotice] = useState<string | null>(null)
+  const [commandNeedsRead, setCommandNeedsRead] = useState(false)
+  const mutationLock = useRef(false)
+  const mutationController = useRef<AbortController | null>(null)
+  const alive = useRef(true)
+  useEffect(() => { alive.current = true; return () => { alive.current = false; mutationController.current?.abort() } }, [])
+  const [liveError, setLiveError] = useState<string | null>(null)
+  const [serversError, setServersError] = useState<string | null>(null)
+  const [readAt, setReadAt] = useState<number | null>(null)
+  const [serversReadAt, setServersReadAt] = useState<number | null>(null)
+  const loadController = useRef<AbortController | null>(null)
+  const loadRevision = useRef(0)
+  const loadLive = useCallback(async () => {
+    if (!isLive) return false
+    loadController.current?.abort()
+    const controller = new AbortController()
+    loadController.current = controller
+    const revision = ++loadRevision.current
+    const current = () => !controller.signal.aborted && loadRevision.current === revision
+    setLoading(true)
+    const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(30_000)])
+    let stateComplete = !canRead
+    const tasks = await Promise.allSettled([
+      canRead ? readContainersState(backendUrl, { signal }).then(result => {
+        stateComplete = result.servers.every(node => node.availability !== "error")
+        if (current()) {
+          setState(result); setReadAt(Date.now()); setLiveError(null)
+          if (result.servers.every(node => node.availability !== "error")) setCommandNeedsRead(false)
+          setLastStates(previous => Object.fromEntries(result.servers.map(node => [node.serverId, node.availability === "error" ? previous[node.serverId] ?? node : node])))
+        }
+      }).catch(error => { if (current()) setLiveError(userApiError(error)); throw error }) : Promise.resolve(),
+      canReadServers ? requestJson<unknown>(backendUrl, "/api/servers", { signal }).then(payload => {
+        const result = serverListSchema.parse(payload)
+        if (new Set(result.map(server => server.id)).size !== result.length) throw new Error("Каталог серверов содержит дубли ID")
+        if (current()) { setLiveServers(result.filter(server => server.enabled).map(mapBackendServer)); setServersReadAt(Date.now()); setServersError(null) }
+      }).catch(error => { if (current()) setServersError(userApiError(error)); throw error }) : Promise.resolve(),
+    ])
+    if (current()) setLoading(false)
+    return current() && stateComplete && tasks.every(task => task.status === "fulfilled")
+  }, [isLive, backendUrl, canRead, canReadServers])
+  useEffect(() => { let cancelled = false; queueMicrotask(() => { if (!cancelled) void loadLive() }); return () => { cancelled = true; loadController.current?.abort() } }, [loadLive])
+  const displayContainers: ContainerView[] = useMemo(() => isLive ? Object.values(lastStates).flatMap(node => node.containers) : mockContainers, [isLive, lastStates])
+  const displayServers = isLive ? liveServers : mockServers.filter(server => server.enabled)
+  const effectiveServerId = selectedServerId
+  const relevantStates = state?.servers.filter(node => selectedServerId === ALL_SERVERS_ID || String(node.serverId) === selectedServerId)
+  const known = !isLive || !!state && (selectedServerId === ALL_SERVERS_ID || !!relevantStates?.length) && relevantStates!.every(node => node.availability !== "error")
+  const stale = isLive && !!liveError
+  const writeReady = !isLive || canWrite && !urlError && !commandNeedsRead && !loading && !stale && !!serversReadAt && !serversError
+  const nodeFresh = (serverId: string) => !isLive || writeReady && state?.servers.some(node => String(node.serverId) === serverId && node.availability === "available" && displayServers.some(server => server.id === serverId))
+  const scoped = useMemo(() => {
+    if (effectiveServerId === ALL_SERVERS_ID) return displayContainers
+    return displayContainers.filter((c) => c.serverId === effectiveServerId)
+  }, [displayContainers, effectiveServerId])
+
+  const serverById = useMemo(
+    () => Object.fromEntries(displayServers.map((s) => [s.id, s])),
+    [displayServers],
+  )
+
+  const railItems = useMemo<ServerTileItem[]>(() => (
+    displayServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: s.status ?? "unknown",
+      type: s.type,
+      enabled: s.enabled,
+      meta: isLive && (!state || !state.servers.some(node => String(node.serverId) === s.id && node.availability !== "error")) ? "—" : String(displayContainers.filter((c) => c.serverId === s.id).length),
+    }))
+  ), [displayServers, displayContainers, state, isLive])
 
   const filtered = useMemo(() => {
-    return routerContainers.filter((c) => {
+    return scoped.filter((c) => {
       if (statusFilter !== "all" && c.status !== statusFilter) return false
       if (!search) return true
       const q = search.toLowerCase()
       return (
         c.name.toLowerCase().includes(q) ||
         c.image.toLowerCase().includes(q) ||
-        (serverFor(c.serverId)?.name.toLowerCase().includes(q) ?? false)
+        (serverById[c.serverId]?.name.toLowerCase().includes(q) ?? false)
       )
     })
-  }, [search, statusFilter])
+  }, [search, statusFilter, scoped, serverById])
 
-  const running = routerContainers.filter((c) => c.status === "running").length
-  const stopped = routerContainers.filter((c) => c.status === "stopped").length
-  const errors  = routerContainers.filter((c) => c.status === "error").length
+  const running = scoped.filter((c) => c.status === "running").length
+  const stopped = scoped.filter((c) => c.status === "stopped").length
+  const errors = scoped.filter((c) => c.status === "error").length
+  const statusKnown = known && scoped.every(container => container.status !== "unknown")
+  const currentDeleteTarget = deleteTarget ? displayContainers.find(row => row.id === deleteTarget.id && row.rosId === deleteTarget.rosId && row.serverId === deleteTarget.serverId) : undefined
+  const deleteStopped = currentDeleteTarget?.status === "stopped"
+
+  async function mutate(c: ContainerView, action: ContainerAction) {
+    if (!isLive || !c.rosId || !canWrite || !nodeFresh(c.serverId) || mutationLock.current || !displayContainers.some(row => row.id === c.id && row.rosId === c.rosId && row.serverId === c.serverId)) return
+    if (action === "remove" && !displayContainers.some(row => row.id === c.id && row.rosId === c.rosId && row.serverId === c.serverId && row.status === "stopped")) return
+    mutationLock.current = true
+    const controller = new AbortController()
+    mutationController.current = controller
+    const current = () => alive.current && !controller.signal.aborted
+    setBusyId(c.id); setOperationError(null); setOperationNotice(null)
+    try {
+      await mutateContainer(backendUrl, c.serverId, c.rosId, action, { signal: AbortSignal.any([controller.signal, AbortSignal.timeout(30_000)]) })
+      if (!current()) return
+      const labels = { start: "запуск", stop: "остановка", restart: "перезапуск", remove: "удаление" }
+      const message = c.name + ": API подтвердил команду «" + labels[action] + "». Состояние проверяется повторным чтением."
+      setOperationNotice(message)
+      if (action === "remove") {
+        setLastStates(previous => Object.fromEntries(Object.entries(previous).map(([id, node]) => [id, { ...node, containers: node.containers.filter(row => row.id !== c.id) }])))
+        setDeleteTarget(null)
+      }
+      toast.success("Команда подтверждена API.")
+      const refreshed = await loadLive()
+      if (current() && !refreshed) setOperationNotice(message + " Обновление каталогов не удалось; повторите чтение.")
+    } catch (error) {
+      if (!current()) return
+      const uncertain = !(error instanceof ApiClientError && error.status >= 400 && error.status < 500)
+      setCommandNeedsRead(uncertain)
+      setOperationError(c.name + ": " + userApiError(error) + (uncertain ? " Результат команды не подтверждён; она могла выполниться частично. Обновите каталог перед новым действием." : " Команда отклонена API."))
+    } finally {
+      if (mutationController.current === controller) { mutationController.current = null; mutationLock.current = false }
+      if (alive.current) setBusyId(null)
+    }
+  }
 
   return (
-    <div className="flex flex-col h-full">
-      <PageHeader
-        crumbs={[{ label: "Управление" }, { label: "Контейнеры" }]}
-        actions={
-          <Button size="sm">
-            <BoxIcon className="size-4" />Новый контейнер
-          </Button>
-        }
-      />
+    <>
+    <ServerRailLayout
+      items={railItems}
+      selectedId={effectiveServerId}
+      onSelect={setSelectedServerId}
+      showAll
+      preserveSelection
+      allCount={displayServers.length}
+      loading={isLive && loading && displayServers.length === 0}
+      header={
+        <PageHeader
+          crumbs={[{ label: "Управление" }, { label: "Контейнеры" }]}
+          actions={
+            <>
+              <ServerRailMobileButton />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => { void loadLive() }}
+                disabled={!isLive || loading || !canRead && !canReadServers || !!busyId}
+              >
+                <RefreshCwIcon aria-hidden="true" className={cn("size-4", loading && "animate-spin")} />
+                Обновить
+              </Button>
+              <Button size="sm" disabled title="Создание контейнеров ещё не подключено">
+                <BoxIcon aria-hidden="true" className="size-4" />Новый контейнер
+              </Button>
+            </>
+          }
+        />
+      }
+    >
+        <div className="flex flex-col min-w-0 gap-5 [overflow-wrap:anywhere]">
 
-      <div className="flex-1 overflow-y-auto p-6">
-        <div className="flex flex-col gap-5">
+          {urlError && <Alert role="alert" aria-label="Контекст контейнеров" variant="warning"><AlertDescription>{urlError}<Button type="button" variant="outline" onClick={() => writeContext({server:null,status:null,q:null})}>Сбросить контекст</Button></AlertDescription></Alert>}
+          {operationNotice && <p role="status" className="text-sm [overflow-wrap:anywhere]">{operationNotice}</p>}
+          {operationError && !deleteTarget && <Alert role="alert" aria-label="Команда контейнера" variant="warning"><AlertDescription>{operationError}</AlertDescription></Alert>}
+          {isLive && !canRead && <p role="status">Для каталога контейнеров требуется mm:dashboard:read.</p>}
+          {isLive && !canReadServers && <p role="status">Для каталога серверов требуется mm:servers:read. Команды недоступны.</p>}
+          {isLive && loading && !state && <p role="status">Загрузка контейнеров…</p>}
+          {isLive && readAt && <p role="status" className="text-xs text-muted-foreground">Каталог контейнеров получен: {new Date(readAt).toLocaleTimeString("ru-RU")}</p>}
+          {isLive && serversReadAt && <p role="status" className="text-xs text-muted-foreground">Серверы получены: {new Date(serversReadAt).toLocaleTimeString("ru-RU")}</p>}
+          {isLive && liveError && <Alert variant="warning" role="alert" aria-label="Каталог контейнеров"><AlertDescription>{state ? "Последние данные сохранены." : "Контейнеры пока неизвестны."} {liveError}</AlertDescription></Alert>}
+          {isLive && serversError && <Alert variant="warning" role="alert" aria-label="Серверы контейнеров"><AlertDescription>{serversReadAt ? "Последний каталог сохранён." : "Каталог серверов пока неизвестен."} {serversError}</AlertDescription></Alert>}
+          {isLive && relevantStates?.map(node => node.availability === "error" || node.failures.length ? <Alert key={node.serverId} variant="warning" role="alert" aria-label={"Контейнеры сервера " + node.serverId}><AlertDescription>Сервер {serverById[String(node.serverId)]?.name ?? node.serverId}: {node.failures.map(f => f.resource + ": " + f.error).join("; ")}. {node.availability === "available" ? "Контейнеры получены; настройки загружены частично." : lastStates[node.serverId]?.containers.length ? "Последние контейнеры сохранены." : "Список неизвестен."}</AlertDescription></Alert> : node.availability === "unsupported" ? <p key={node.serverId} role="status">Сервер {serverById[String(node.serverId)]?.name ?? node.serverId}: пакет container недоступен.</p> : null)}
+          {isLive && selectedServerId !== ALL_SERVERS_ID && !displayServers.some(server => server.id === selectedServerId) && <p role="alert">Выбранный сервер недоступен в каталоге. Выберите другое устройство; фильтр сохранён.</p>}
+          {mode === "mock" && (
+            <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground">
+              Моковые данные
+            </span>
+          )}
 
-          {/* KPI */}
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            {[
-              { label: "Всего",    value: routerContainers.length, icon: <BoxIcon className="size-4 text-muted-foreground" /> },
-              { label: "Running",  value: running,                 icon: <PlayIcon className="size-4 text-emerald-500" /> },
-              { label: "Stopped",  value: stopped,                 icon: <StopCircleIcon className="size-4 text-muted-foreground" /> },
-              { label: "Ошибок",   value: errors,                  icon: <AlertCircleIcon className="size-4 text-red-500" /> },
-            ].map((s) => (
-              <Card key={s.label}>
-                <CardContent className="px-5 py-4 flex items-start justify-between">
-                  <div>
-                    <p className="text-sm text-muted-foreground">{s.label}</p>
-                    <p className="text-2xl font-semibold tabular-nums mt-0.5">{s.value}</p>
-                  </div>
-                  <div className="mt-0.5">{s.icon}</div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+          <KpiStatGrid
+            aria-label="Сводка контейнеров"
+            items={[
+              {
+                id: "all",
+                label: "Всего",
+                value: known ? scoped.length : "—",
+                icon: <BoxIcon aria-hidden="true" className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "running",
+                label: "Работает",
+                value: statusKnown ? running : "—",
+                icon: <PlayIcon aria-hidden="true" className="size-4" />,
+                iconClassName: "text-success",
+              },
+              {
+                id: "stopped",
+                label: "Остановлен",
+                value: statusKnown ? stopped : "—",
+                icon: <StopCircleIcon aria-hidden="true" className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "errors",
+                label: "Ошибок",
+                value: statusKnown ? errors : "—",
+                icon: <AlertCircleIcon aria-hidden="true" className="size-4" />,
+                iconClassName: "text-destructive",
+                variant: errors > 0 ? "destructive" : "default",
+              },
+            ]}
+          />
 
-          {/* Info banner */}
-          <div className="flex items-start gap-3 rounded-lg bg-violet-500/5 border border-violet-500/20 px-4 py-3 text-sm">
-            <BoxIcon className="size-5 text-violet-500 shrink-0 mt-0.5" />
+          <div className="flex items-start gap-3 rounded-lg bg-info/5 border border-info/20 px-4 py-3 text-sm">
+            <BoxIcon aria-hidden="true" className="size-5 text-info shrink-0 mt-0.5" />
             <div>
-              <p className="font-medium text-violet-600 dark:text-violet-400">Контейнеры доступны с RouterOS 7.4+</p>
+              <p className="font-medium text-foreground">Контейнеры доступны с RouterOS 7.4+</p>
               <p className="text-muted-foreground text-xs mt-0.5">
                 Поддерживаются Docker-совместимые образы. Требуется установка пакета <code className="font-mono bg-muted px-1 rounded">container</code>.
-                Интерфейсы veth создаются автоматически.
+                Сеть veth настраивается на устройстве. Создание контейнеров в интерфейсе пока недоступно.
               </p>
             </div>
           </div>
 
-          {/* Toolbar */}
           <div className="flex items-center gap-3 flex-wrap">
-            <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[240px]">
-              <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
+            <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-0 w-full sm:w-auto">
+              <SearchIcon aria-hidden="true" className="size-3.5 text-muted-foreground shrink-0" />
               <input
-                className="flex-1 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
-                placeholder="Поиск по имени, образу, серверу…"
+                className="flex-1 min-w-0 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
+                aria-label="Поиск контейнеров" placeholder="Поиск по имени, образу, серверу…"
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
               />
             </div>
 
-            <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
-              {(["all", "running", "stopped", "error"] as const).map((s) => (
+            <div role="group" aria-label="Статус контейнеров" className="flex flex-wrap items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
+              {(["all", "running", "stopped", "error", "unknown"] as const).map((s) => (
                 <button key={s}
-                  onClick={() => setStatusFilter(s)}
+                  type="button" aria-pressed={statusFilter === s} onClick={() => setStatusFilter(s)}
                   className={cn(
                     "px-3 py-1 text-xs rounded whitespace-nowrap transition-colors",
                     statusFilter === s
                       ? "bg-background text-foreground shadow-sm"
                       : "text-muted-foreground hover:text-foreground",
                   )}>
-                  {s === "all" ? "Все" : s === "running" ? "Running" : s === "stopped" ? "Stopped" : "Error"}
+                  {s === "all" ? "Все" : s === "running" ? "Работает" : s === "stopped" ? "Остановлен" : s === "unknown" ? "Неизвестно" : "Ошибка"}
                 </button>
               ))}
             </div>
 
-            <span className="text-sm text-muted-foreground ml-auto">{filtered.length} контейнеров</span>
+            <span className="text-sm text-muted-foreground ml-auto">{known ? filtered.length : "—"} контейнеров</span>
           </div>
 
-          {/* Grid */}
-          {filtered.length === 0 ? (
+          {filtered.length === 0 ? (!known ? <p role="status">Список контейнеров пока неизвестен.</p> : (
             <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
-              <BoxIcon className="size-10 mb-3 opacity-20" />
+              <BoxIcon aria-hidden="true" className="size-10 mb-3 opacity-20" />
               <p className="text-sm font-medium">Контейнеры не найдены</p>
-              <p className="text-xs mt-1">Добавьте первый контейнер или измените фильтр</p>
+              <p className="text-xs mt-1">{scoped.length ? "Измените фильтр или поиск" : "Подтверждённый каталог пуст"}</p>
             </div>
-          ) : (
+          )) : (
             <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
               {filtered.map((c) => (
                 <ContainerCard
                   key={c.id}
                   container={c}
-                  onExport={() => setExportContainer(c)}
+                  server={serverById[c.serverId]}
+                  live={isLive && !!nodeFresh(c.serverId)}
+                  busy={!!busyId}
+                  onExport={() => { const snapshot = lastStates[Number(c.serverId)]; setExportContainer({ container: c, collectedAt: snapshot?.collectedAt ?? null, failures: snapshot?.failures ?? [], source: isLive ? "live" : "mock" }) }}
+                  onStart={() => { void mutate(c, "start") }}
+                  onStop={() => { void mutate(c, "stop") }}
+                  onRestart={() => { void mutate(c, "restart") }}
+                  onRemove={() => { deleteReturnLabel.current = "Действия контейнера " + c.name; setOperationError(null); setDeleteTarget(c) }}
                 />
               ))}
             </div>
           )}
 
-          {/* RouterOS reference */}
-          <Card>
-            <CardContent className="px-5 py-4">
-              <p className="text-xs font-medium text-muted-foreground mb-3">
-                RouterOS 7.4+ · /container — быстрые команды
-              </p>
+          <OpsPanel title="RouterOS 7.4+ · /container — быстрые команды" contentClassName="px-5 py-4">
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
                 {[
                   {
@@ -451,23 +613,29 @@ export default function ContainersPage() {
                 ].map((b) => (
                   <div key={b.title}>
                     <p className="font-sans font-semibold text-foreground/80 mb-1.5 text-[11px] uppercase tracking-wide">{b.title}</p>
-                    <pre className="bg-zinc-950 rounded-md p-2.5 text-zinc-300 text-[11px] leading-relaxed overflow-x-auto whitespace-pre">
+                    <pre className="bg-muted rounded-md p-2.5 text-foreground text-[11px] leading-relaxed overflow-x-auto whitespace-pre">
                       {b.lines.join("\n")}
                     </pre>
                   </div>
                 ))}
               </div>
-            </CardContent>
-          </Card>
+          </OpsPanel>
 
         </div>
-      </div>
+    </ServerRailLayout>
 
-      <ExportSheet
-        open={!!exportContainer}
-        container={exportContainer}
-        onClose={() => setExportContainer(null)}
-      />
-    </div>
+      {deleteTarget && <AlertDialog open onOpenChange={open => { if (!open && !busyId) { setDeleteTarget(null); setOperationError(null) } }}>
+        <AlertDialogContent>
+          <AlertDialogHeader><AlertDialogTitle>Удалить контейнер?</AlertDialogTitle><AlertDialogDescription>{deleteTarget.name} · сервер {serverById[deleteTarget.serverId]?.name ?? deleteTarget.serverId}. {deleteStopped ? "Будет удалён остановленный контейнер. Дополнительная очистка файлов не выполняется." : "Сначала закройте это окно, остановите контейнер через меню действий и обновите каталог. Удаление доступно только после подтверждённой остановки."}</AlertDialogDescription></AlertDialogHeader>
+          {operationError && <p role="alert" aria-label="Удаление контейнера" className="text-sm text-destructive [overflow-wrap:anywhere]">{operationError}</p>}
+          <AlertDialogFooter>
+            {(commandNeedsRead || !deleteStopped) && <Button type="button" variant="outline" disabled={loading || !!busyId} onClick={() => { void loadLive() }}>Обновить каталог</Button>}
+            <AlertDialogCancel disabled={!!busyId}>Отмена</AlertDialogCancel>
+            <AlertDialogAction type="button" variant="destructive" disabled={!!busyId || !deleteStopped || !nodeFresh(deleteTarget.serverId)} aria-busy={!!busyId} onClick={() => { void mutate(deleteTarget, "remove") }}>{busyId ? "Удаление…" : "Удалить"}</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>}
+      <ExportSheet selection={exportContainer} onClose={() => setExportContainer(null)} />
+    </>
   )
 }

app/(main)/domains/page.tsx

@@ -8,25 +8,22 @@ import { DomainsDataGrid } from "@/components/data-grids/domains-data-grid"
 import { FileImportDialog } from "@/components/file-import-dialog"
 import { domains as mockDomains } from "@/lib/data"
 import { Button } from "@/components/ui/button"
-import { UploadIcon, DownloadIcon, PlusIcon, LoaderCircleIcon } from "lucide-react"
-import { useDataSource } from "@/lib/data-source"
-import { useEvoBGP } from "@/lib/evobgp-context"
-import { cn } from "@/lib/utils"
+import { UploadIcon, DownloadIcon, PlusIcon } from "lucide-react"
+import { useEvoCatalogView, EvoBgpCatalogStatus, EvoBgpCatalogUnavailable } from "@/components/settings/evobgp-catalog-status"
 import { toast } from "sonner"
 
 export default function DomainsPage() {
-  const { mode } = useDataSource()
-  const { enabled, snapshot, loading, error } = useEvoBGP()
+  const { mode, snapshot, loading, known } = useEvoCatalogView()
   const [importOpen, setImportOpen] = useState(false)
   const [search, setSearch] = useState("")
 
-  const useEvoCatalog = mode === "live" && enabled
+  const useEvoCatalog = mode === "live"
 
   const rows = useMemo(() => {
-    if (!useEvoCatalog) return mockDomains
+    if (mode === "mock") return mockDomains
     if (loading && !snapshot) return []
     return snapshot?.domains ?? []
-  }, [useEvoCatalog, loading, snapshot])
+  }, [mode, loading, snapshot])
 
   const filtered = useMemo(() => {
     if (!search) return rows
@@ -43,8 +40,7 @@ export default function DomainsPage() {
     <div className="flex flex-col h-full">
       <PageHeader
         crumbs={[{ label: "Данные" }, { label: "Домены" }]}
-        actions={
-          <>
+        actions={mode === "live" ? null : <>
             <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
               <UploadIcon className="size-4" />Импорт
             </Button>
@@ -58,34 +54,23 @@ export default function DomainsPage() {
           <div>
             <h1 className="text-2xl font-semibold tracking-tight">Домены</h1>
             <p className="text-sm text-muted-foreground mt-1">
-              Отслеживаемые домены для BGP-фильтрации — синхронизируются в address-list MikroTik
+              Домены из каталога для BGP-фильтрации
             </p>
-            {useEvoCatalog && (
-              <p className={cn(
-                "text-xs mt-2 flex items-center gap-1.5",
-                error ? "text-destructive" : "text-muted-foreground",
-              )}>
-                {loading && <LoaderCircleIcon className="size-3.5 animate-spin shrink-0" />}
-                {error
-                  ? `EvoBGP: ${error}`
-                  : snapshot?.fetchedAt
-                    ? `Источник: EvoBGP, обновлено ${new Date(snapshot.fetchedAt).toLocaleString("ru-RU")}`
-                    : loading ? "Загрузка EvoBGP…" : "EvoBGP"}
-              </p>
-            )}
+            <div className="mt-3"><EvoBgpCatalogStatus /></div>
           </div>
           <DataPageCard>
             <DataPageToolbar
               search={search}
               onSearchChange={setSearch}
               searchPlaceholder="Поиск по домену…"
-              countLabel={`${filtered.length} доменов`}
+              countLabel={known ? `${filtered.length} доменов` : "Количество: —"}
             />
-            <DomainsDataGrid
+            {known || loading ? <DomainsDataGrid
               domains={filtered}
               isLoading={useEvoCatalog && loading && !snapshot}
               pagination={useEvoCatalog}
-            />
+              emptyDescription={search ? "Измените поисковый запрос" : useEvoCatalog ? "В подтверждённом каталоге нет записей этого типа" : undefined}
+            /> : <EvoBgpCatalogUnavailable />}
           </DataPageCard>
         </div>
       </div>

app/(main)/ip-ranges/page.tsx

@@ -8,25 +8,22 @@ import { IpRangesDataGrid } from "@/components/data-grids/ip-ranges-data-grid"
 import { FileImportDialog } from "@/components/file-import-dialog"
 import { ipRanges as mockIpRanges } from "@/lib/data"
 import { Button } from "@/components/ui/button"
-import { UploadIcon, DownloadIcon, PlusIcon, LoaderCircleIcon } from "lucide-react"
-import { useDataSource } from "@/lib/data-source"
-import { useEvoBGP } from "@/lib/evobgp-context"
-import { cn } from "@/lib/utils"
+import { UploadIcon, DownloadIcon, PlusIcon } from "lucide-react"
+import { useEvoCatalogView, EvoBgpCatalogStatus, EvoBgpCatalogUnavailable } from "@/components/settings/evobgp-catalog-status"
 import { toast } from "sonner"
 
 export default function IpRangesPage() {
-  const { mode } = useDataSource()
-  const { enabled, snapshot, loading, error } = useEvoBGP()
+  const { mode, snapshot, loading, known } = useEvoCatalogView()
   const [importOpen, setImportOpen] = useState(false)
   const [search, setSearch] = useState("")
 
-  const useEvoCatalog = mode === "live" && enabled
+  const useEvoCatalog = mode === "live"
 
   const rows = useMemo(() => {
-    if (!useEvoCatalog) return mockIpRanges
+    if (mode === "mock") return mockIpRanges
     if (loading && !snapshot) return []
     return snapshot?.ipRanges ?? []
-  }, [useEvoCatalog, loading, snapshot])
+  }, [mode, loading, snapshot])
 
   const filtered = useMemo(() => {
     if (!search) return rows
@@ -44,8 +41,7 @@ export default function IpRangesPage() {
     <div className="flex flex-col h-full">
       <PageHeader
         crumbs={[{ label: "Данные" }, { label: "IP-диапазоны" }]}
-        actions={
-          <>
+        actions={mode === "live" ? null : <>
             <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
               <UploadIcon className="size-4" />Импорт
             </Button>
@@ -59,34 +55,23 @@ export default function IpRangesPage() {
           <div>
             <h1 className="text-2xl font-semibold tracking-tight">IP-диапазоны</h1>
             <p className="text-sm text-muted-foreground mt-1">
-              CIDR-блоки, отправляемые в address-list MikroTik по всем настроенным фильтрам
+              CIDR-блоки из каталога для сетевых фильтров
             </p>
-            {useEvoCatalog && (
-              <p className={cn(
-                "text-xs mt-2 flex items-center gap-1.5",
-                error ? "text-destructive" : "text-muted-foreground",
-              )}>
-                {loading && <LoaderCircleIcon className="size-3.5 animate-spin shrink-0" />}
-                {error
-                  ? `EvoBGP: ${error}`
-                  : snapshot?.fetchedAt
-                    ? `Источник: EvoBGP, обновлено ${new Date(snapshot.fetchedAt).toLocaleString("ru-RU")}`
-                    : loading ? "Загрузка EvoBGP…" : "EvoBGP"}
-              </p>
-            )}
+            <div className="mt-3"><EvoBgpCatalogStatus /></div>
           </div>
           <DataPageCard>
             <DataPageToolbar
               search={search}
               onSearchChange={setSearch}
               searchPlaceholder="Поиск по CIDR, ASN…"
-              countLabel={`${filtered.length} диапазонов`}
+              countLabel={known ? `${filtered.length} диапазонов` : "Количество: —"}
             />
-            <IpRangesDataGrid
+            {known || loading ? <IpRangesDataGrid
               ipRanges={filtered}
               isLoading={useEvoCatalog && loading && !snapshot}
               pagination={useEvoCatalog}
-            />
+              emptyDescription={search ? "Измените поисковый запрос" : useEvoCatalog ? "В подтверждённом каталоге нет записей этого типа" : undefined}
+            /> : <EvoBgpCatalogUnavailable />}
           </DataPageCard>
         </div>
       </div>

app/(main)/layout.tsx

@@ -1,21 +1,35 @@
+import type { CSSProperties, ReactNode } from "react"
 import { AppSidebar } from "@/components/app-sidebar"
+import { AuthGuard } from "@/components/auth-guard"
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
 import { CommandPalette } from "@/components/command-palette"
 import { ReleaseNotesModal } from "@/components/release-notes-modal"
 import { DataSourceProvider } from "@/lib/data-source"
 import { EvoBGPProvider } from "@/lib/evobgp-context"
 
-export default function MainLayout({ children }: { children: React.ReactNode }) {
+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"
+
+export default function MainLayout({ children }: { children: ReactNode }) {
   return (
-    <DataSourceProvider>
-      <EvoBGPProvider>
-        <SidebarProvider>
-          <AppSidebar />
-          <SidebarInset className="h-svh overflow-hidden">{children}</SidebarInset>
-          <CommandPalette />
-          <ReleaseNotesModal />
-        </SidebarProvider>
-      </EvoBGPProvider>
-    </DataSourceProvider>
+    <AuthGuard>
+      <DataSourceProvider>
+        <EvoBGPProvider>
+          <SidebarProvider
+            style={{ "--sidebar-width": "240px" } as CSSProperties}
+          >
+            <a href="#main-content" className={SKIP_TO_CONTENT_CLASS}>
+              К содержимому
+            </a>
+            <AppSidebar />
+            <SidebarInset tabIndex={-1} id="main-content" className="h-svh overflow-hidden">
+              {children}
+            </SidebarInset>
+            <CommandPalette />
+            <ReleaseNotesModal />
+          </SidebarProvider>
+        </EvoBGPProvider>
+      </DataSourceProvider>
+    </AuthGuard>
   )
 }

app/(main)/releases/page.tsx

@@ -1,12 +1,11 @@
 import Link from "next/link"
 import { PageHeader } from "@/components/page-header"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { OpsPanel } from "@/components/ops-panel"
 import { buttonVariants } from "@/components/ui/button"
 import { formatAppVersionLabel, getAppVersion, getReleaseUrl } from "@/lib/app-version"
 import {
   formatCommitSubject,
   getReleaseCommitPreview,
-  RELEASE_COMMIT_PREVIEW_LIMIT,
 } from "@/lib/release-commits"
 import { readReleaseManifest } from "@/lib/release-manifest"
 import { cn } from "@/lib/utils"
@@ -16,23 +15,23 @@ export const dynamic = "force-dynamic"
 
 function formatPublishedAt(value: string | null, isProdBuild: boolean): string {
   if (value) {
-    return new Intl.DateTimeFormat("ru-RU", {
+    return "Дата манифеста: " + new Intl.DateTimeFormat("ru-RU", {
       dateStyle: "long",
       timeStyle: "short",
     }).format(new Date(value))
   }
-  return isProdBuild ? "Прод-сборка" : "Локальная сборка"
+  return isProdBuild ? "Дата манифеста не указана" : "Локальная сборка"
 }
 
 export default function ReleasesPage() {
   const manifest = readReleaseManifest()
   const version = getAppVersion()
   const isProdBuild = !version.endsWith("-dev")
-  const releaseUrl = getReleaseUrl() || manifest.releaseUrl || null
-  const commits = getReleaseCommitPreview(manifest.commits)
+  const releaseUrl = getReleaseUrl() || manifest?.releaseUrl || null
+  const commits = getReleaseCommitPreview(manifest?.commits ?? [])
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex min-h-0 flex-col h-full">
       <PageHeader
         crumbs={[{ label: "Система" }, { label: "Релизы" }]}
         actions={
@@ -40,62 +39,60 @@ export default function ReleasesPage() {
             <Link
               href={releaseUrl}
               target="_blank"
-              rel="noreferrer"
+              rel="noopener noreferrer"
               className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-8 inline-flex items-center gap-2")}
             >
-              <ExternalLinkIcon className="size-4" />
-              Открыть в Gitea
+              <ExternalLinkIcon className="size-4" aria-hidden />
+              Открыть релиз
             </Link>
           ) : null
         }
       />
 
-      <div className="flex-1 overflow-y-auto p-6">
+      <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-6">
         <div className="max-w-[960px] mx-auto space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Текущая версия</CardTitle>
-              <CardDescription>Сборка MikrotikManager, опубликованная через CI/CD.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
+          <OpsPanel
+            title="Текущая версия"
+            description={isProdBuild ? "Версия запущенной сборки MikrotikManager." : "Локальная разработка. Публикация релиза не подтверждена."}
+            contentClassName="flex flex-col gap-3 px-5 pb-5"
+          >
               <div className="flex flex-wrap items-center gap-3">
-                <span className="text-2xl font-semibold tracking-tight">{formatAppVersionLabel(version)}</span>
-                <span className="text-sm text-muted-foreground">{formatPublishedAt(manifest.publishedAt, isProdBuild)}</span>
+                <span className="text-2xl font-semibold tracking-tight break-all">{formatAppVersionLabel(version)}</span>
+                <span className="text-sm text-muted-foreground">{isProdBuild ? formatPublishedAt(manifest?.version === version ? manifest.publishedAt : null, true) : "Локальная сборка"}</span>
               </div>
               <p className="text-sm text-muted-foreground">
                 Версия формируется автоматически от базы <span className="font-mono">v1.0.0</span> по Conventional Commits.
               </p>
-            </CardContent>
-          </Card>
+          </OpsPanel>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Сводка коммитов</CardTitle>
-              <CardDescription>
-                {commits.length > 0
-                  ? `Последние ${RELEASE_COMMIT_PREVIEW_LIMIT} коммитов в сборке ${formatAppVersionLabel(manifest.version)}.`
-                  : "Для локальной разработки список коммитов пуст. В прод-сборке он заполняется CI."}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
+          {!manifest ? <p role="alert" className="text-sm text-destructive">Метаданные релиза недоступны или повреждены. Дата, ссылка и список коммитов не подтверждены.</p> : manifest.version !== version && isProdBuild ? <p role="status" className="text-sm text-muted-foreground">Манифест относится к {formatAppVersionLabel(manifest.version)}; версия запущенной сборки отличается.</p> : null}
+
+          <OpsPanel
+            title="Сводка коммитов"
+            description={
+              commits.length > 0
+                ? `Коммиты манифеста ${formatAppVersionLabel(manifest!.version)}: ${commits.length}.`
+                : manifest ? "В манифесте нет коммитов. При публикации список формируется CI." : "Список коммитов не подтверждён."
+            }
+            contentClassName="px-5 pb-5"
+          >
               {commits.length === 0 ? (
-                <p className="text-sm text-muted-foreground">Коммитов для отображения пока нет.</p>
+                <p className="text-sm text-muted-foreground">{manifest ? "Коммитов для отображения пока нет." : "Нет подтверждённых метаданных."}</p>
               ) : (
-                <ul className="space-y-3">
+                <ul className="flex flex-col gap-3">
                   {commits.map((commit) => (
-                    <li key={commit.sha} className="rounded-md border px-3 py-2">
+                    <li key={commit.sha} className="rounded-md border px-3 py-2 break-words">
                       <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                         <span className="font-mono uppercase">{commit.type}</span>
                         <span className="font-mono">{commit.shortSha}</span>
                         <span>{commit.author}</span>
                       </div>
-                      <p className="mt-1 text-sm">{formatCommitSubject(commit.subject)}</p>
+                      <p className="mt-1 text-sm break-words">{formatCommitSubject(commit.subject)}</p>
                     </li>
                   ))}
                 </ul>
               )}
-            </CardContent>
-          </Card>
+          </OpsPanel>
         </div>
       </div>
     </div>

app/(main)/servers/page.tsx

@@ -1,13 +1,21 @@
 "use client"
 
-import { useEffect, useMemo, useState } from "react"
+import { Suspense, useEffect, useMemo, useRef, useState } from "react"
+import Link from "next/link"
+import { can } from "@/lib/auth"
+import { useSearchParams } from "next/navigation"
+import { serverCreateSchema } from "@mmapp/contracts/servers"
+import { OperationGate, pollServers, serverOperationError, type PollResult } from "@/lib/server-operations"
+import { Alert, AlertTitle, AlertDescription } from "@/components/reui/alert"
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter } from "@/components/ui/alert-dialog"
 import { PageHeader } from "@/components/page-header"
 import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
 import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { ServersDataGrid } from "@/components/data-grids/servers-data-grid"
-import type { Filter } from "@/components/reui/filters"
-import { applyReuiFilters } from "@/lib/data-filters/apply-reui-filters"
-import { SERVER_FILTER_ACCESSORS, SERVER_FILTER_FIELDS } from "@/lib/data-filters/server-filter-fields"
+import { useServerUrlState } from "@/hooks/use-server-url-state"
+import { ServerFilters } from "@/components/data-grids/server-filters"
+import { applyFilterQuery } from "@/lib/data-filters/apply-filter-query"
+import { SERVER_FILTER_ACCESSORS } from "@/lib/data-filters/server-filter-fields"
 import { servers as initialServers } from "@/lib/data"
 import type { ServerType, Server, WanUplink } from "@/lib/data"
 import type { ServerCreate, ServerUpdate } from "@mmapp/contracts/servers"
@@ -27,7 +35,7 @@ import {
 import { useDataSource } from "@/lib/data-source"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
-import { Card, CardContent } from "@/components/ui/card"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -45,9 +53,9 @@ import {
   StepperSeparator,
   StepperTitle,
   StepperTrigger,
-} from "@/components/reui/stepper"
+} from "@/components/reui-kit/accessible-stepper"
 import {
-  RefreshCwIcon, DownloadIcon, PlusIcon, TrashIcon,
+  RefreshCwIcon, PlusIcon, TrashIcon,
   EyeIcon, EyeOffIcon,
   ChevronRightIcon, ChevronDownIcon,
   CheckCircleIcon, XCircleIcon, LoaderCircleIcon,
@@ -213,15 +221,18 @@ type TypeFilter = "all" | ServerType
 type SheetMode = "add" | "edit"
 
 // ════════════════════════════════════════════════════════════════════════════
-export default function ServersPage() {
+function ServersPageContent() {
+  const searchParams = useSearchParams()
+  const selectedServerId = searchParams.get("server")
+  const clearParams = new URLSearchParams(searchParams.toString())
+  clearParams.delete("server")
+  const allServersHref = "/servers" + (clearParams.size ? "?" + clearParams : "")
   const { mode, backendUrl } = useDataSource()
   const isLive = mode === "live"
 
   const [serverList,   setServerList]   = useState<Server[]>([])
-  const [_backendOk,   setBackendOk]   = useState(false)
-  const [search,       setSearch]       = useState("")
-  const [typeFilter,   setTypeFilter]   = useState<TypeFilter>("all")
-  const [advancedFilters, setAdvancedFilters] = useState<Filter[]>([])
+  const [listState, setListState] = useState<"loading" | "ready" | "error">("loading")
+  const { search, setSearch, typeFilter, setTypeFilter, filters: advancedFilters, setFilters: setAdvancedFilters, error: urlError, hasFilters, reset: resetFilters } = useServerUrlState()
   const [open,         setOpen]         = useState(false)
   const [sheetMode,    setSheetMode]    = useState<SheetMode>("add")
   const [editingId,    setEditingId]    = useState<string | null>(null)
@@ -231,35 +242,92 @@ export default function ServersPage() {
   const [testMsg,      setTestMsg]      = useState("")
   const [pollingIds,   setPollingIds]   = useState<Set<string>>(new Set())
   const [pollAllBusy,  setPollAllBusy]  = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [detailsLoading, setDetailsLoading] = useState(false)
+  const [detailsReady, setDetailsReady] = useState(true)
+  const [formError, setFormError] = useState("")
+  const [operationMessage, setOperationMessage] = useState("")
+  const [operationError, setOperationError] = useState("")
+  const [deleteTarget, setDeleteTarget] = useState<Server | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [deleteError, setDeleteError] = useState("")
+  const [pollResults, setPollResults] = useState<PollResult[]>([])
+  const [rowBusy, setRowBusy] = useState(false)
+  const gate = useRef(new OperationGate())
+  const formVersion = useRef(0)
+  const testVersion = useRef(0)
+  const contextVersion = useRef(0)
+  const canWrite = can("mm:servers:write")
+  const accessDenied = "Недостаточно прав: изменение и опрос серверов требуют разрешения на запись."
+  function requireWrite(report: (message: string) => void = setOperationError) {
+    if (can("mm:servers:write")) return true
+    report(accessDenied)
+    return false
+  }
+  const controlsBusy = saving || rowBusy || pollAllBusy || pollingIds.size > 0
 
-  const set = <K extends keyof FormState>(k: K, v: FormState[K]) =>
+  const set = <K extends keyof FormState>(k: K, v: FormState[K]) => {
+    if (gate.current.has("save") || detailsLoading) return
+    if (["host", "port", "proto", "verifySsl", "apiPath", "username", "password"].includes(k)) {
+      testVersion.current++
+      setTestState("idle"); setTestMsg("")
+    }
     setForm((f) => ({ ...f, [k]: v }))
+  }
+
+  function closeForm(next: boolean) {
+    if (gate.current.has("save")) return
+    if (!next) { formVersion.current++; testVersion.current++ }
+    setOpen(next)
+  }
 
   // ── load from backend when mode/url changes ───────────────────────────────
 
   useEffect(() => {
+    const version = ++contextVersion.current
+    let cancelled = false
+    const invalidate = () => {
+      cancelled = true
+      contextVersion.current++
+      formVersion.current++
+      testVersion.current++
+    }
+    queueMicrotask(() => {
+      if (cancelled) return
+      formVersion.current++; testVersion.current++
+      setOpen(false); setDeleteTarget(null); setOperationError(""); setOperationMessage(""); setPollResults([])
+      setListState("loading")
+    })
     if (mode !== "live") {
       queueMicrotask(() => {
+        if (cancelled) return
         setServerList(initialServers)
-        setBackendOk(false)
+        setListState("ready")
       })
-      return
+      return invalidate
     }
     listServers(backendUrl)
       .then(data => {
-        setBackendOk(true)
+        if (cancelled || version !== contextVersion.current) return
+        setListState("ready")
         setServerList(data.map(toFrontendServer))
       })
-      .catch(() => {
-        setBackendOk(false)
+      .catch((error) => {
+        if (cancelled || version !== contextVersion.current) return
+        setOperationError(serverOperationError(error))
+        setListState("error")
         setServerList([])
       })
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    return invalidate
   }, [mode, backendUrl])
 
   // ── actions ──────────────────────────────────────────────────────────────
 
   function openAdd() {
+    if (!requireWrite()) return
+    if (gate.current.has("save")) return
+    formVersion.current++; testVersion.current++
+    setFormError(""); setDetailsLoading(false); setDetailsReady(true)
     setSheetMode("add"); setEditingId(null)
     setForm(defaultForm); setTestState("idle"); setTestMsg("")
     setSheetStep(1)
@@ -267,11 +335,16 @@ export default function ServersPage() {
   }
 
   async function openEdit(s: Server) {
+    if (!requireWrite()) return
+    if (gate.current.has("save")) return
+    const version = ++formVersion.current
+    testVersion.current++
+    setFormError(""); setDetailsLoading(isLive); setDetailsReady(!isLive)
     setSheetMode("edit"); setEditingId(s.id)
     setForm({
       ...defaultForm,
       name: s.name, type: s.type, site: s.site, country: s.country ?? "RU",
-      asn: s.asn ?? "", enabled: s.status !== "offline", host: s.host,
+      asn: s.asn ?? "", enabled: s.enabled, host: s.host,
       comment: s.comment ?? "",
       lanSubnet: s.lanSubnet ?? "",
       wanUplinks: s.wanUplinks ? JSON.parse(JSON.stringify(s.wanUplinks)) : [],
@@ -282,9 +355,11 @@ export default function ServersPage() {
     if (isLive) {
       try {
         const full = await getServer(backendUrl, s.id)
+        if (version !== formVersion.current) return
         setForm(prev => ({
           ...prev,
           username:  full.username  ?? "",
+          enabled: full.enabled,
           password:  full.password  ?? "",
           port:      String(full.port ?? 443),
           proto:     full.useSsl ? "https" : "http",
@@ -295,16 +370,24 @@ export default function ServersPage() {
               ? JSON.parse(JSON.stringify(full.wanUplinks))
               : prev.wanUplinks,
         }))
-      } catch {
-        // ignore — user can fill in manually
+        setDetailsReady(true)
+      } catch (error) {
+        if (version === formVersion.current) setFormError(serverOperationError(error))
+      } finally {
+        if (version === formVersion.current) setDetailsLoading(false)
       }
     }
   }
 
   async function handleSave() {
+    if (!requireWrite(setFormError)) return
+    if (!detailsReady || detailsLoading || !gate.current.acquire("save")) return
+    const context = contextVersion.current
+    setSaving(true); setFormError("")
+    try {
     const payload: ServerCreate = {
       host:      form.host,
-      port:      Number(form.port) || (form.proto === "https" ? 443 : 80),
+      port:      Number(form.port),
       username:  form.username,
       password:  form.password,
       useSsl:    form.proto === "https",
@@ -320,18 +403,32 @@ export default function ServersPage() {
       wanUplinks: form.type === "home-router" ? form.wanUplinks : [],
     }
 
+    if (!form.host.trim() || !form.username.trim() || !Number.isInteger(payload.port) || payload.port! > 65535 || payload.port! < 1) {
+      setFormError("Укажите хост, имя пользователя и порт от 1 до 65535.")
+      setSheetStep(3)
+      return
+    }
+    const validation = serverCreateSchema.safeParse(payload)
+    if (!validation.success) {
+      setFormError("Проверьте параметры сервера: " + validation.error.issues.map(i => i.path.join(".")).join(", "))
+      return
+    }
+
     if (isLive) {
       try {
         if (sheetMode === "edit" && editingId) {
           const updatedPayload: ServerUpdate = payload
           const updated = await updateServer(backendUrl, editingId, updatedPayload)
+          if (context !== contextVersion.current) return
           setServerList(list => list.map(s => s.id === editingId ? toFrontendServer(updated) : s))
         } else {
           const created = await createServer(backendUrl, payload)
+          if (context !== contextVersion.current) return
           setServerList(list => [...list, toFrontendServer(created)])
         }
       } catch (e) {
-        console.error("Ошибка сохранения:", e)
+        if (context === contextVersion.current) setFormError(serverOperationError(e))
+        return
       }
     } else {
       // offline mode — update local state only
@@ -349,7 +446,7 @@ export default function ServersPage() {
                 comment: form.comment,
                 lanSubnet: form.lanSubnet || undefined,
                 wanUplinks: form.type === "home-router" ? form.wanUplinks : undefined,
-                status: form.enabled ? (s.status === "offline" ? "online" : s.status) : "offline",
+                enabled: form.enabled,
               }
             : s
         ))
@@ -368,57 +465,85 @@ export default function ServersPage() {
     }
 
     setOpen(false)
+    formVersion.current++; testVersion.current++
+    setOperationMessage(isLive ? "Сервер сохранён." : "Сервер сохранён в демо-режиме.")
+    } finally {
+      gate.current.release("save"); setSaving(false)
+    }
   }
 
-  function handleToggleStatus(id: string) {
-    setServerList(list => list.map(s =>
-      s.id === id ? { ...s, status: s.status === "offline" ? "online" : "offline" } : s
-    ))
+  async function handleToggleStatus(id: string) {
+    if (!requireWrite()) return
+    const server = serverList.find(s => s.id === id)
+    if (!server || !gate.current.acquire("rows")) return
+    const context = contextVersion.current
+    setRowBusy(true); setOperationError(""); setOperationMessage("")
+    try {
+      let enabled = !server.enabled
+      if (isLive) enabled = (await updateServer(backendUrl, id, { enabled })).enabled
+      if (context !== contextVersion.current) return
+      setServerList(list => list.map(s => s.id === id ? { ...s, enabled } : s))
+      setOperationMessage(`${server.name}: ${enabled ? "включён" : "отключён"}${isLive ? "." : " (демо)."}`)
+    } catch (error) {
+      if (context === contextVersion.current) setOperationError(serverOperationError(error))
+    } finally { gate.current.release("rows"); setRowBusy(false) }
   }
 
   async function handleDelete(id: string) {
-    if (isLive) {
-      try {
-        await deleteServer(backendUrl, id)
-      } catch (e) {
-        console.error("Ошибка удаления:", e)
-      }
-    }
-    setServerList(list => list.filter(s => s.id !== id))
+    if (!requireWrite(setDeleteError)) return
+    if (!gate.current.acquire("rows")) return
+    const context = contextVersion.current
+    setDeleting(true); setRowBusy(true); setDeleteError("")
+    try {
+      if (isLive) await deleteServer(backendUrl, id)
+      if (context !== contextVersion.current) return
+      setServerList(list => list.filter(s => s.id !== id))
+      setDeleteTarget(null); setOperationError(""); setOperationMessage("Сервер удалён из списка.")
+    } catch (error) {
+      if (context === contextVersion.current) setDeleteError(serverOperationError(error))
+    } finally { gate.current.release("rows"); setDeleting(false); setRowBusy(false) }
   }
 
   async function handlePoll(id: string) {
-    if (!isLive) return
-    setPollingIds(p => new Set(p).add(id))
-    try {
-      await pollServer(backendUrl, id)
-      // Reload full list to get updated status/version
-      const data = await listServers(backendUrl)
-      setServerList(data.map(toFrontendServer))
-    } catch (e) {
-      console.error("Poll error:", e)
-    } finally {
-      setPollingIds(p => { const n = new Set(p); n.delete(id); return n })
-    }
+    await runPoll([id])
   }
 
   async function handlePollAll() {
-    if (!isLive) return
-    setPollAllBusy(true)
+    await runPoll(serverList.map(s => s.id))
+  }
+
+  async function runPoll(ids: string[]) {
+    if (!requireWrite()) return
+    if (!isLive || !gate.current.acquire("rows")) return
+    const context = contextVersion.current
+    setPollAllBusy(true); setPollingIds(new Set(ids)); setOperationError(""); setOperationMessage(""); setPollResults([])
     try {
-      const ids = serverList.map(s => s.id)
-      await Promise.all(ids.map(id => pollServer(backendUrl, id).catch(() => {})))
-      const data = await listServers(backendUrl)
-      setServerList(data.map(toFrontendServer))
+      const results = await pollServers(ids, async id => {
+        if (context !== contextVersion.current) throw new Error("Контекст изменился; опрос отменён.")
+        if (!can("mm:servers:write")) throw new Error(accessDenied)
+        await pollServer(backendUrl, id)
+      })
+      if (context !== contextVersion.current) return
+      setPollResults(results)
+      try {
+        const data = await listServers(backendUrl)
+        if (context === contextVersion.current) setServerList(data.map(toFrontendServer))
+      } catch (error) {
+        if (context === contextVersion.current) setOperationError("Опрос завершён, но список не обновлён. " + serverOperationError(error))
+      }
     } finally {
-      setPollAllBusy(false)
+      gate.current.release("rows"); setPollAllBusy(false); setPollingIds(new Set())
     }
   }
 
   async function handleTest() {
+    if (!requireWrite(setFormError)) return
+    if (!detailsReady || gate.current.has("save") || gate.current.has("test")) return
+    const version = ++testVersion.current
     if (!form.host || !form.username) {
       setTestState("error"); setTestMsg("Заполните Хост и Имя пользователя"); return
     }
+    gate.current.acquire("test")
     setTestState("testing"); setTestMsg("")
     try {
       const data = await testServerConnection(backendUrl, {
@@ -430,28 +555,36 @@ export default function ServersPage() {
         username: form.username,
         password: form.password,
       })
+      if (version !== testVersion.current) return
       if (data.success) {
         setTestState("ok");    setTestMsg(data.message)
       } else {
         setTestState("error"); setTestMsg(data.message)
       }
-    } catch {
+    } catch (error) {
+      if (version !== testVersion.current) return
       setTestState("error")
-      setTestMsg(`Не удалось связаться с бекендом — убедитесь, что он запущен на ${backendUrl}`)
+      setTestMsg(serverOperationError(error))
+    } finally {
+      gate.current.release("test")
     }
   }
 
   // ── derived ──────────────────────────────────────────────────────────────
 
+  const selectedServer = serverList.find(server => server.id === selectedServerId)
+
   const filtered = useMemo(() => {
+    if (urlError) return []
     const base = serverList.filter(sv => {
+      if (selectedServerId !== null && sv.id !== selectedServerId) return false
       if (typeFilter !== "all" && sv.type !== typeFilter) return false
       if (!search) return true
       const q = search.toLowerCase()
       return sv.name.toLowerCase().includes(q) || sv.host.includes(q) || sv.site.toLowerCase().includes(q)
     })
-    return applyReuiFilters(base, advancedFilters, SERVER_FILTER_ACCESSORS)
-  }, [serverList, search, typeFilter, advancedFilters])
+    return applyFilterQuery(base, advancedFilters, SERVER_FILTER_ACCESSORS)
+  }, [serverList, search, typeFilter, advancedFilters, selectedServerId, urlError])
 
   const counts = useMemo(() => ({
     all:          serverList.length,
@@ -478,11 +611,10 @@ export default function ServersPage() {
         crumbs={[{ label: "Управление" }, { label: "Серверы" }]}
         actions={
           <>
-            <Button variant="outline" size="sm" onClick={handlePollAll} disabled={!isLive || pollAllBusy}>
-              <RefreshCwIcon className={cn("size-4", pollAllBusy && "animate-spin")} />Проверить все
+            <Button variant="outline" size="sm" onClick={() => selectedServerId !== null ? selectedServer && void runPoll([selectedServer.id]) : void handlePollAll()} disabled={!canWrite || !isLive || controlsBusy || (selectedServerId !== null ? !selectedServer : serverList.length === 0)}>
+              <RefreshCwIcon className={cn("size-4", pollAllBusy && "animate-spin")} />{selectedServerId !== null ? "Проверить сервер" : "Проверить все"}
             </Button>
-            <Button variant="outline" size="sm"><DownloadIcon className="size-4" />Экспорт</Button>
-            <Button size="sm" onClick={openAdd}><PlusIcon className="size-4" />Добавить сервер</Button>
+            <Button size="sm" onClick={openAdd} disabled={!canWrite || controlsBusy}><PlusIcon className="size-4" />Добавить сервер</Button>
           </>
         }
       />
@@ -490,27 +622,69 @@ export default function ServersPage() {
       <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
 
-          {/* Stats */}
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-            {[
-              { label: "Всего серверов",  value: counts.all,          icon: <ServerIcon  className="size-4 text-muted-foreground" /> },
-              { label: "Онлайн",          value: counts.online,        icon: <CheckCircleIcon className="size-4 text-emerald-500" /> },
-              { label: "JH + Exit Node",  value: counts["jump-host"] + counts["exit-node"], icon: <NetworkIcon className="size-4 text-violet-400" /> },
-              { label: "Home Router",     value: counts["home-router"],icon: <HomeIcon    className="size-4 text-emerald-400" /> },
-            ].map(s => (
-              <Card key={s.label}>
-                <CardContent className="px-5 py-4 flex items-start justify-between">
-                  <div>
-                    <p className="text-sm text-muted-foreground">{s.label}</p>
-                    <p className="text-2xl font-semibold tabular-nums mt-0.5">{s.value}</p>
-                  </div>
-                  <div className="mt-0.5">{s.icon}</div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+          {!canWrite && <Alert variant="info" role="status"><AlertTitle>Только просмотр</AlertTitle><AlertDescription>Изменение, удаление, опрос серверов и тест соединения требуют разрешения на запись. Просмотр деталей и фильтры доступны.</AlertDescription></Alert>}
+          {operationError && <Alert variant="destructive" role="alert"><AlertTitle>Действие не завершено</AlertTitle><AlertDescription>{operationError}</AlertDescription></Alert>}
+          {operationMessage && <Alert variant="success" role="status"><AlertDescription>{operationMessage}</AlertDescription></Alert>}
+          {pollResults.length > 0 && (
+            <Alert variant={pollResults.some(r => r.error) ? "warning" : "success"} role="status">
+              <AlertTitle>Опрос: успешно {pollResults.filter(r => !r.error).length} из {pollResults.length}</AlertTitle>
+              <AlertDescription>
+                <ul>{pollResults.map(r => <li key={r.id}>{serverList.find(s => s.id === r.id)?.name ?? r.id}: {r.error ?? "опрос выполнен"}</li>)}</ul>
+                {pollResults.some(r => r.error) && <Button type="button" variant="outline" size="sm" disabled={!canWrite || controlsBusy} onClick={() => runPoll(pollResults.filter(r => r.error).map(r => r.id))}>Повторить неуспешные</Button>}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {selectedServerId !== null && (
+            <Alert variant={listState === "error" || (listState === "ready" && !selectedServer) ? "warning" : "info"} role="status" aria-label="Сервер по ссылке">
+              <AlertTitle className="line-clamp-none wrap-anywhere">{selectedServer ? "Выбран сервер: " + selectedServer.name : "Сервер по ссылке"}</AlertTitle>
+              <AlertDescription>
+                <p>{listState === "loading" ? "Загрузка сервера…" : listState === "error" ? "Не удалось загрузить сервер. Проверьте сообщение об ошибке выше." : selectedServer ? selectedServer.host + " · Список ограничен выбранным сервером. Сводка относится ко всем серверам." : "Сервер не найден или недоступен. Возможно, он удалён или у вас нет доступа."}</p>
+                <div className="flex flex-wrap gap-4">
+                  <Link href={allServersHref} className="underline underline-offset-2">Все серверы</Link>
+                  <Link href="/dashboard" className="underline underline-offset-2">К дашборду</Link>
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <KpiStatGrid
+            aria-label="Сводка серверов"
+            items={[
+              {
+                id: "all",
+                label: "Всего серверов",
+                value: counts.all,
+                icon: <ServerIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "online",
+                label: "Онлайн",
+                value: counts.online,
+                icon: <CheckCircleIcon className="size-4" />,
+                iconClassName: "text-success",
+              },
+              {
+                id: "jh-en",
+                label: "JH + Exit Node",
+                value: counts["jump-host"] + counts["exit-node"],
+                icon: <NetworkIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "home",
+                label: "Home Router",
+                value: counts["home-router"],
+                icon: <HomeIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+            ]}
+          />
 
           {/* Table */}
+          {urlError && <Alert variant="warning" role="alert"><AlertTitle>Фильтры требуют внимания</AlertTitle><AlertDescription>{urlError}</AlertDescription></Alert>}
+          {hasFilters && <div><Button variant="outline" size="sm" onClick={resetFilters}>Сбросить фильтры списка</Button></div>}
           <DataPageCard>
             <DataPageToolbar
               segmented={{
@@ -522,9 +696,7 @@ export default function ServersPage() {
                   count: tab.value === "all" ? counts.all : counts[tab.value as ServerType],
                 })),
               }}
-              filters={advancedFilters}
-              onFiltersChange={setAdvancedFilters}
-              filterFields={SERVER_FILTER_FIELDS}
+              filterControl={<ServerFilters query={advancedFilters} onQueryChange={setAdvancedFilters} />}
               search={search}
               onSearchChange={setSearch}
               searchPlaceholder="Поиск по имени, хосту…"
@@ -532,11 +704,14 @@ export default function ServersPage() {
             />
             <ServersDataGrid
               servers={filtered}
+              hasUnfilteredRows={serverList.length > 0}
               isLive={isLive}
               pollingIds={pollingIds}
+              busy={controlsBusy}
+              canWrite={canWrite}
               onPoll={handlePoll}
               onEdit={openEdit}
-              onDelete={handleDelete}
+              onDelete={id => { if (!requireWrite()) return; setDeleteError(""); setDeleteTarget(serverList.find(s => s.id === id) ?? null) }}
               onToggleStatus={handleToggleStatus}
             />
           </DataPageCard>
@@ -544,13 +719,19 @@ export default function ServersPage() {
       </div>
 
       {/* ══ Sheet: Add / Edit Server ══════════════════════════════════════════ */}
-      <Sheet open={open} onOpenChange={setOpen}>
-        <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
+      <Sheet open={open} onOpenChange={closeForm}>
+        <SheetContent side="right" showCloseButton={!saving} className="data-[side=right]:w-full sm:max-w-lg flex flex-col gap-0 p-0">
           <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
             <SheetTitle>{sheetMode === "edit" ? "Редактировать сервер" : "Новый сервер"}</SheetTitle>
             <SheetDescription>MikroTik RouterOS · Web API (REST)</SheetDescription>
           </SheetHeader>
 
+          {detailsLoading && <p className="px-6 py-2 text-sm" role="status">Загрузка параметров сервера…</p>}
+          {formError && <div className="px-6 py-2"><Alert variant="destructive" role="alert"><AlertDescription>{formError}</AlertDescription></Alert>
+            {!detailsReady && !detailsLoading && editingId && <Button type="button" variant="outline" onClick={() => { const server = serverList.find(s => s.id === editingId); if (server) void openEdit(server) }}>Повторить загрузку</Button>}
+          </div>}
+
+          <fieldset disabled={!canWrite || saving || !detailsReady} className="flex min-h-0 min-w-0 flex-1 flex-col" aria-busy={saving || detailsLoading}>
           <Stepper value={sheetStep} onValueChange={setSheetStep} className="flex-1 flex flex-col min-h-0 px-6 py-5">
             <StepperNav className="mb-5">
               <StepperItem step={1}>
@@ -591,6 +772,7 @@ export default function ServersPage() {
 
               <FormField label="Тип узла" required>
                 <SegmentedControl
+                  className="max-w-full flex-wrap"
                   value={form.type}
                   onChange={v => set("type", v)}
                   options={[
@@ -711,7 +893,7 @@ export default function ServersPage() {
 
               <div className="flex flex-col gap-2">
                 <Button type="button" variant="outline" size="sm" className="w-fit gap-2"
-                  disabled={testState === "testing"} onClick={handleTest}>
+                  disabled={!canWrite || testState === "testing"} onClick={handleTest}>
                   {testState === "testing"
                     ? <><LoaderCircleIcon className="size-4 animate-spin" />Проверка…</>
                     : <><WifiIcon className="size-4" />Проверить подключение</>}
@@ -762,22 +944,40 @@ export default function ServersPage() {
               </StepperContent>
             </StepperPanel>
           </Stepper>
+          </fieldset>
 
-          <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
-            <SheetClose render={<Button variant="outline" />}>Отмена</SheetClose>
+          <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row flex-wrap gap-2">
+            <SheetClose render={<Button variant="outline" disabled={saving} />}>Отмена</SheetClose>
             {sheetStep > 1 && (
-              <Button variant="outline" onClick={() => setSheetStep((s) => s - 1)}>Назад</Button>
+              <Button variant="outline" disabled={saving || !detailsReady} onClick={() => setSheetStep((s) => s - 1)}>Назад</Button>
             )}
             {sheetStep < 4 ? (
-              <Button className="ml-auto" onClick={() => setSheetStep((s) => s + 1)}>Далее</Button>
+              <Button className="ml-auto" disabled={saving || !detailsReady} onClick={() => setSheetStep((s) => s + 1)}>Далее</Button>
             ) : (
-              <Button className="ml-auto" onClick={handleSave}>
-                {sheetMode === "edit" ? "Сохранить" : "Добавить сервер"}
+              <Button className="ml-auto" disabled={!canWrite || saving || !detailsReady || testState === "testing"} onClick={handleSave}>
+                {saving ? "Сохранение…" : sheetMode === "edit" ? "Сохранить" : "Добавить сервер"}
               </Button>
             )}
           </SheetFooter>
         </SheetContent>
       </Sheet>
+      <AlertDialog open={deleteTarget !== null} onOpenChange={next => { if (!next && !gate.current.has("rows")) setDeleteTarget(null) }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Удалить сервер?</AlertDialogTitle>
+            <AlertDialogDescription>Сервер «{deleteTarget?.name}» ({deleteTarget?.host}) будет удалён из списка управления.</AlertDialogDescription>
+          </AlertDialogHeader>
+          {deleteError && <p role="alert" className="text-sm text-destructive">{deleteError}</p>}
+          <AlertDialogFooter>
+            <Button type="button" variant="outline" disabled={deleting} onClick={() => setDeleteTarget(null)}>Отмена</Button>
+            <Button type="button" variant="destructive" disabled={!canWrite || deleting} onClick={() => { if (deleteTarget) void handleDelete(deleteTarget.id) }}>{deleting ? "Удаление…" : "Удалить"}</Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
+
+export default function ServersPage() {
+  return <Suspense fallback={<p role="status" className="p-6">Загрузка серверов…</p>}><ServersPageContent /></Suspense>
+}

app/(main)/statistics/page.tsx

@@ -0,0 +1,531 @@
+"use client"
+
+import { Suspense, useCallback, useEffect, useMemo, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import {
+  ActivityIcon,
+  DatabaseIcon,
+  GaugeIcon,
+  ServerIcon,
+  UsersIcon,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { PageHeader } from "@/components/page-header"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { SegmentedControl } from "@/components/form-kit"
+import { EmptyState } from "@/components/empty-state"
+import { PeriodSelector, rangeForPreset, type DateRangeYmd } from "@/components/statistics/period-selector"
+import { StatisticsVolumeChart } from "@/components/statistics/statistics-volume-chart"
+import { DimensionSelect, PivotDimSelect } from "@/components/statistics/dimension-select"
+import { SliceChips } from "@/components/statistics/slice-chips"
+import { BreakdownDashboard } from "@/components/statistics/breakdown-dashboard"
+import { StatisticsPivotGrid } from "@/components/statistics/statistics-pivot-grid"
+import {
+  StatisticsBreakdownDataGrid,
+  type StatisticsSliceKind,
+} from "@/components/data-grids/statistics-breakdown-data-grid"
+import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
+import { StatisticsFilters } from "@/components/statistics/statistics-filters"
+import {
+  isStatisticsPivotDim,
+  isStatisticsSliceKind,
+  STATISTICS_DIMS,
+} from "@/lib/statistics-dims"
+import { statisticsContextError, STATISTICS_CONTEXT_KEYS } from "@/lib/statistics-context"
+import { readStatisticsRange } from "@/lib/statistics-range"
+import { useDataSource } from "@/lib/data-source"
+import { fmtBps, formatBytes } from "@/lib/fmt-rate"
+import {
+  getStatistics,
+  getStatisticsPivot,
+  STATISTICS_UNBOUND_USER_ID,
+  type StatisticsDto,
+  type StatisticsPivotDto,
+  type StatisticsQuery,
+} from "@/shared/api/statistics"
+import type { StatisticsBreakdownRow, StatisticsPivotDim } from "@mmapp/contracts/statistics"
+
+/**
+ * BI-куб трафика: критерий → остальные разрезы + pivot.
+ * Preview: https://reui.io/preview/base/dashboard-1 · https://reui.io/preview/base/stats-12
+ * · https://reui.io/preview/base/data-grid-filtering-2 · https://reui.io/preview/base/solution-analytics-8
+ * · https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/data-grid
+ */
+
+const EMPTY: StatisticsDto = {
+  from: "",
+  to: "",
+  grain: "day",
+  kpis: {
+    bytes: 0,
+    packets: 0,
+    avgBps: 0,
+    users: 0,
+    servers: 0,
+    ifaces: 0,
+    topCountry: "",
+    topService: "",
+  },
+  series: [],
+  users: [],
+  servers: [],
+  interfaces: [],
+  countries: [],
+  services: [],
+  asns: [],
+}
+
+const EMPTY_PIVOT: StatisticsPivotDto = {
+  rowDim: "country",
+  colDim: "service",
+  metric: "bytes",
+  columns: [],
+  rows: [],
+  otherBytes: 0,
+}
+
+interface CubeSlices {
+  country?: string
+  service?: string
+  asn?: string
+  serverId?: string
+  userId?: string
+  iface?: string
+}
+
+const SLICE_KEYS = ["country", "service", "asn", "serverId", "userId", "iface"] as const
+
+function readDim(sp: URLSearchParams): StatisticsSliceKind {
+  const t = sp.get("dim") ?? sp.get("tab")
+  return t && isStatisticsSliceKind(t) ? t : "users"
+}
+
+function readView(sp: URLSearchParams): "explore" | "pivot" {
+  return sp.get("view") === "pivot" ? "pivot" : "explore"
+}
+
+function readPlanes(sp: URLSearchParams): "unique" | "all" {
+  return sp.get("planes") === "all" ? "all" : "unique"
+}
+
+function readPivotDim(sp: URLSearchParams, key: string, fallback: StatisticsPivotDim): StatisticsPivotDim {
+  const v = sp.get(key)
+  return v && isStatisticsPivotDim(v) ? v : fallback
+}
+
+function readSlices(sp: URLSearchParams): CubeSlices {
+  const next: CubeSlices = {}
+  for (const key of SLICE_KEYS) {
+    const v = sp.get(key)?.trim()
+    if (v) next[key] = v
+  }
+  return next
+}
+
+function toQuery(range: DateRangeYmd, slices: CubeSlices, planes: "unique" | "all"): StatisticsQuery {
+  const serverId = slices.serverId ? Number(slices.serverId) : undefined
+  const asn = slices.asn != null && slices.asn !== "" ? Number(slices.asn) : undefined
+  return {
+    from: range.from,
+    to: range.to,
+    serverId: Number.isFinite(serverId) && (serverId ?? 0) > 0 ? serverId : undefined,
+    userId: slices.userId,
+    iface: slices.iface,
+    country: slices.country && slices.country.length === 2 ? slices.country : undefined,
+    service: slices.service,
+    asn: Number.isFinite(asn) ? asn : undefined,
+    planes,
+  }
+}
+
+function selectedIdForKind(kind: StatisticsSliceKind, slices: CubeSlices): string | undefined {
+  if (kind === "users") return slices.userId
+  if (kind === "servers") return slices.serverId
+  if (kind === "countries") return slices.country
+  if (kind === "services") return slices.service
+  if (kind === "asns") return slices.asn
+  if (kind === "interfaces" && slices.serverId && slices.iface) {
+    return `${slices.serverId}:${slices.iface}`
+  }
+  if (kind === "interfaces") return slices.iface
+  return undefined
+}
+
+function rowsForKind(data: StatisticsDto, kind: StatisticsSliceKind) {
+  if (kind === "users") return data.users
+  if (kind === "servers") return data.servers
+  if (kind === "interfaces") return data.interfaces
+  if (kind === "countries") return data.countries
+  if (kind === "services") return data.services
+  return data.asns
+}
+
+function hasAnySlice(slices: CubeSlices): boolean {
+  return SLICE_KEYS.some((k) => Boolean(slices[k]))
+}
+
+function hiddenKinds(slices: CubeSlices): Set<StatisticsSliceKind> {
+  const hidden = new Set<StatisticsSliceKind>()
+  if (slices.userId) hidden.add("users")
+  if (slices.serverId) hidden.add("servers")
+  if (slices.iface) hidden.add("interfaces")
+  if (slices.country) hidden.add("countries")
+  if (slices.service) hidden.add("services")
+  if (slices.asn) hidden.add("asns")
+  return hidden
+}
+
+function applyDimValue(slices: CubeSlices, kind: StatisticsSliceKind, rowId: string): CubeSlices {
+  const next: CubeSlices = { ...slices }
+  if (kind === "users") {
+    if (rowId === STATISTICS_UNBOUND_USER_ID) return next
+    if (next.userId === rowId) delete next.userId
+    else next.userId = rowId
+  } else if (kind === "servers") {
+    if (next.serverId === rowId) delete next.serverId
+    else next.serverId = rowId
+  } else if (kind === "countries") {
+    if (next.country === rowId) delete next.country
+    else next.country = rowId
+  } else if (kind === "services") {
+    if (next.service === rowId) delete next.service
+    else next.service = rowId
+  } else if (kind === "asns") {
+    if (next.asn === rowId) delete next.asn
+    else next.asn = rowId
+  } else {
+    const colon = rowId.indexOf(":")
+    const sid = colon >= 0 ? rowId.slice(0, colon) : undefined
+    const iface = colon >= 0 ? rowId.slice(colon + 1) : rowId
+    if (next.iface === iface && next.serverId === sid) {
+      delete next.iface
+      delete next.serverId
+    } else {
+      next.iface = iface
+      if (sid) next.serverId = sid
+    }
+  }
+  return next
+}
+
+function applyPivotDim(slices: CubeSlices, dim: StatisticsPivotDim, id: string): CubeSlices {
+  const kind = STATISTICS_DIMS.find((d) => d.pivot === dim)?.id ?? "users"
+  return applyDimValue(slices, kind, id)
+}
+
+function chipList(slices: CubeSlices): { key: string; label: string }[] {
+  const chips: { key: string; label: string }[] = []
+  if (slices.country) chips.push({ key: "country", label: `страна ${slices.country}` })
+  if (slices.service) chips.push({ key: "service", label: `сервис ${slices.service}` })
+  if (slices.asn) chips.push({ key: "asn", label: `ASN ${slices.asn}` })
+  if (slices.serverId) chips.push({ key: "serverId", label: `сервер ${slices.serverId}` })
+  if (slices.userId) chips.push({ key: "userId", label: `пользователь ${slices.userId}` })
+  if (slices.iface) chips.push({ key: "iface", label: `iface ${slices.iface}` })
+  return chips
+}
+
+function StatisticsPageInner() {
+  const searchParams = useSearchParams()
+  const { mode, backendUrl, prefsHydrated } = useDataSource()
+  const isLive = mode === "live"
+
+  const { range, error: rangeError } = useMemo(() => readStatisticsRange(searchParams, rangeForPreset("7d")), [searchParams])
+  const paramsError = useMemo(() => statisticsContextError(searchParams), [searchParams])
+  const slices = useMemo(() => readSlices(searchParams), [searchParams])
+  const dim = useMemo(() => readDim(searchParams), [searchParams])
+  const view = useMemo(() => readView(searchParams), [searchParams])
+  const planes = useMemo(() => readPlanes(searchParams), [searchParams])
+  const pivotRow = useMemo(() => readPivotDim(searchParams, "pivotRow", "country"), [searchParams])
+  const pivotCol = useMemo(() => readPivotDim(searchParams, "pivotCol", "service"), [searchParams])
+
+  const [retry, setRetry] = useState(0)
+  const requestKey = JSON.stringify({ backendUrl, isLive, range, slices, view, pivotRow, pivotCol, planes, retry, rangeError, paramsError })
+  const [result, setResult] = useState<{
+    key: string; data: StatisticsDto; pivot: StatisticsPivotDto; error: string | null
+  } | null>(null)
+  const current = result?.key === requestKey ? result : null
+  const loading = isLive && !rangeError && !paramsError && current === null
+  const error = rangeError ?? paramsError ?? current?.error ?? null
+  const dataReady = isLive && current !== null && !error
+  const pivot = dataReady ? current.pivot : EMPTY_PIVOT
+
+  const updateParams = useCallback(
+    (patch: Record<string, string | undefined>) => {
+      const sp = new URLSearchParams(window.location.search)
+      for (const [k, v] of Object.entries(patch)) {
+        if (v) sp.set(k, v)
+        else sp.delete(k)
+      }
+      const qs = sp.toString()
+      if (qs === searchParams.toString()) return
+      window.history.pushState(null, "", (qs ? `/statistics?${qs}` : "/statistics") + window.location.hash)
+    },
+    [searchParams],
+  )
+
+  const setRange = useCallback(
+    (next: DateRangeYmd) => {
+      updateParams({ from: next.from, to: next.to })
+    },
+    [updateParams],
+  )
+
+  const setSlices = useCallback(
+    (next: CubeSlices) => {
+      updateParams({
+        country: next.country,
+        service: next.service,
+        asn: next.asn,
+        serverId: next.serverId,
+        userId: next.userId,
+        iface: next.iface,
+      })
+    },
+    [updateParams],
+  )
+
+  useEffect(() => {
+    if (!prefsHydrated || !isLive || rangeError || paramsError) return
+    let cancelled = false
+    void (async () => {
+      try {
+        const query = toQuery(range, slices, planes)
+        const dto = await getStatistics(backendUrl, query)
+        if (cancelled) return
+        let matrix = EMPTY_PIVOT
+        if (view === "pivot" && pivotRow !== pivotCol) {
+          matrix = await getStatisticsPivot(backendUrl, {
+            ...query,
+            row: pivotRow,
+            col: pivotCol,
+            metric: "bytes",
+          })
+        }
+        if (!cancelled) setResult({ key: requestKey, data: dto, pivot: matrix, error: null })
+      } catch (e: unknown) {
+        if (!cancelled) {
+          setResult({ key: requestKey, data: EMPTY, pivot: EMPTY_PIVOT, error: e instanceof Error ? e.message : "Не удалось загрузить статистику" })
+        }
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [backendUrl, isLive, prefsHydrated, range, slices, view, pivotRow, pivotCol, planes, requestKey, rangeError, paramsError])
+
+  const viewData = dataReady ? current.data : EMPTY
+  const sliced = hasAnySlice(slices)
+  const emptyCube = !isLive || (!loading && viewData.kpis.bytes === 0 && viewData.interfaces.length === 0)
+
+  function handleRowClick(kind: StatisticsSliceKind, row: StatisticsBreakdownRow) {
+    if (kind === "users" && row.id === STATISTICS_UNBOUND_USER_ID) return
+    if (kind === "interfaces" && row.label.includes("· дубль")) return
+    setSlices(applyDimValue(slices, kind, row.id))
+  }
+
+  function handlePivotCell(rowId: string, colId: string) {
+    if (rowId === "__other__" || colId === "__other__") return
+    let next = applyPivotDim(slices, pivotRow, rowId)
+    next = applyPivotDim(next, pivotCol, colId)
+    updateParams({
+      country: next.country,
+      service: next.service,
+      asn: next.asn,
+      serverId: next.serverId,
+      userId: next.userId,
+      iface: next.iface,
+      view: "explore",
+    })
+  }
+
+  const kpis = viewData.kpis
+  const chips = chipList(slices)
+  const countLabel =
+    view === "pivot"
+      ? `${pivot.rows.length} × ${pivot.columns.length}`
+      : sliced
+        ? `${STATISTICS_DIMS.filter((d) => !hiddenKinds(slices).has(d.id)).length} разрезов`
+        : `${rowsForKind(viewData, dim).length} строк`
+
+  return (
+    <div className="flex h-full flex-col">
+      <PageHeader
+        crumbs={[{ label: "Обзор", href: "/dashboard" }, { label: "Статистика" }]}
+        actions={rangeError ? <Button type="button" variant="outline" onClick={() => setRange(rangeForPreset("7d"))}>Выбрать последние 7 дней</Button> : <PeriodSelector range={range} onChange={setRange} />}
+      />
+
+      <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 py-4 md:gap-6 md:px-6 md:py-5">
+        {!isLive ? (
+          <Alert>
+            <AlertTitle>Живые данные выключены</AlertTitle>
+            <AlertDescription>
+              Куб статистики строится из IPFIX. Переключитесь на живой источник, чтобы увидеть отчёт.
+            </AlertDescription>
+          </Alert>
+        ) : null}
+
+        {error ? (
+          <Alert variant="destructive" role="alert">
+            <AlertTitle>{rangeError ? "Некорректный период" : paramsError ? "Параметры отчёта требуют внимания" : "Ошибка загрузки"}</AlertTitle>
+            <AlertDescription>{error}{!rangeError && !paramsError && <Button type="button" variant="outline" size="sm" onClick={() => setRetry(n => n + 1)}>Повторить загрузку</Button>}{paramsError && <Button type="button" variant="outline" size="sm" onClick={() => updateParams(Object.fromEntries(STATISTICS_CONTEXT_KEYS.map(key => [key, undefined])))}>Сбросить параметры отчёта</Button>}</AlertDescription>
+          </Alert>
+        ) : null}
+
+        {!slices.serverId && dataReady && !emptyCube ? (
+          <Alert>
+            <AlertTitle>Уникальный объём</AlertTitle>
+            <AlertDescription>
+              Объём — трафик клиентов на GRE/WG, без повторного учёта JH↔EN и WAN.
+            </AlertDescription>
+          </Alert>
+        ) : null}
+
+        {(dataReady || loading) && <KpiStatGrid
+          aria-label="Сводка трафика"
+          isLoading={loading}
+          skeletonCount={5}
+          items={[
+            {
+              id: "bytes",
+              label: "Объём",
+              value: formatBytes(kpis.bytes),
+              hint: "GRE/WG клиентов, без hops",
+              icon: <DatabaseIcon />,
+              iconClassName: "text-muted-foreground",
+            },
+            {
+              id: "packets",
+              label: "Пакеты",
+              value: kpis.packets.toLocaleString("ru-RU"),
+              hint: kpis.topService ? `топ: ${kpis.topService}` : undefined,
+              icon: <ActivityIcon />,
+              iconClassName: "text-muted-foreground",
+            },
+            {
+              id: "bps",
+              label: "Средний bitrate",
+              value: fmtBps(kpis.avgBps),
+              icon: <GaugeIcon />,
+              iconClassName: "text-muted-foreground",
+            },
+            {
+              id: "users",
+              label: "Пользователи",
+              value: String(kpis.users),
+              icon: <UsersIcon />,
+              iconClassName: "text-muted-foreground",
+            },
+            {
+              id: "servers",
+              label: "Серверы",
+              value: String(kpis.servers),
+              hint: slices.serverId
+                ? (kpis.ifaces ? `${kpis.ifaces} iface` : undefined)
+                : planes === "all"
+                  ? "WAN и дубли в списке"
+                  : "без WAN и overlay",
+              icon: <ServerIcon />,
+              iconClassName: "text-muted-foreground",
+            },
+          ]}
+        />}
+
+        {dataReady && <StatisticsVolumeChart series={viewData.series} grain={viewData.grain} />}
+
+        <DataPageCard>
+          <DataPageToolbar
+            leading={
+              <div className="flex flex-wrap items-center gap-3">
+                <SegmentedControl
+                  value={view}
+                  onChange={(next) => updateParams({ view: next === "pivot" ? "pivot" : "explore" })}
+                  options={[
+                    { value: "explore", label: "Разрез" },
+                    { value: "pivot", label: "Сводка" },
+                  ]}
+                />
+                <SegmentedControl
+                  value={planes}
+                  onChange={(next) => updateParams({ planes: next === "all" ? "all" : undefined })}
+                  options={[
+                    { value: "unique", label: "Уникальный" },
+                    { value: "all", label: "Все плоскости" },
+                  ]}
+                />
+                {view === "explore" && !sliced ? (
+                  <DimensionSelect
+                    label="Критерий"
+                    value={dim}
+                    onChange={(next) => updateParams({ dim: next, tab: undefined })}
+                  />
+                ) : null}
+                {view === "pivot" ? (
+                  <>
+                    <PivotDimSelect
+                      label="Строки"
+                      value={pivotRow}
+                      exclude={pivotCol}
+                      onChange={(next) => updateParams({ pivotRow: next })}
+                    />
+                    <PivotDimSelect
+                      label="Колонки"
+                      value={pivotCol}
+                      exclude={pivotRow}
+                      onChange={(next) => updateParams({ pivotCol: next })}
+                    />
+                  </>
+                ) : null}
+              </div>
+            }
+            filterControl={<StatisticsFilters key={JSON.stringify(slices)} slices={slices} onApply={setSlices} />}
+            countLabel={dataReady ? countLabel : undefined}
+          />
+          <SliceChips
+            chips={chips}
+            onRemove={(key) => {
+              const next = { ...slices }
+              delete next[key as keyof CubeSlices]
+              setSlices(next)
+            }}
+          />
+          {isLive && !dataReady ? (
+            <div role="status" className="p-6 text-sm text-muted-foreground">{loading ? "Загрузка статистики…" : rangeError || paramsError ? "Исправьте параметры отчёта для загрузки статистики." : "Статистика недоступна. Повторите загрузку."}</div>
+          ) : emptyCube ? (
+            <EmptyState
+              title="Нет данных куба"
+              description="За выбранный период нет IPFIX-фактов. Куб заполняется с момента деплоя, без бэкфилла за год."
+            />
+          ) : view === "pivot" ? (
+            <StatisticsPivotGrid data={isLive ? pivot : EMPTY_PIVOT} onCellClick={handlePivotCell} isLoading={loading} />
+          ) : sliced ? (
+            <BreakdownDashboard
+              data={viewData}
+              hidden={hiddenKinds(slices)}
+              selectedIdFor={(kind) => selectedIdForKind(kind, slices)}
+              onRowClick={handleRowClick}
+              isLoading={loading}
+            />
+          ) : (
+            <StatisticsBreakdownDataGrid
+              rows={rowsForKind(viewData, dim)}
+              kind={dim}
+              selectedId={selectedIdForKind(dim, slices)}
+              onRowClick={(row) => handleRowClick(dim, row)}
+              isLoading={loading}
+            />
+          )}
+        </DataPageCard>
+      </div>
+    </div>
+  )
+}
+
+export default function StatisticsPage() {
+  return (
+    <Suspense fallback={null}>
+      <StatisticsPageInner />
+    </Suspense>
+  )
+}

app/(main)/terminal/page.tsx

@@ -1,13 +1,30 @@
 "use client"
 
-import { useState, useRef, useEffect, useCallback, useMemo } from "react"
+import { useState, useRef, useEffect, Suspense } from "react"
 import { PageHeader } from "@/components/page-header"
 import { Button } from "@/components/ui/button"
 import { servers as mockServers } from "@/lib/data"
-import { Flag } from "@/components/flag"
+import {useSearchParams} from "next/navigation"
+import {can} from "@/lib/auth"
+import {terminalServersSchema,readTerminalOutput,readTerminalUrl,patchTerminalUrl} from "@/lib/terminal-response"
+import {Alert,AlertTitle,AlertDescription} from "@/components/ui/alert"
+import {Input} from "@/components/ui/input"
 import { useDataSource } from "@/lib/data-source"
+import { requestJson } from "@/shared/api/http-client"
+
 import {
-  TrashIcon, RefreshCwIcon, CircleIcon, Loader2Icon,
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+
+import {
+  TrashIcon, RefreshCwIcon,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 
@@ -157,229 +174,72 @@ function mockResolve(raw: string, serverName: string): string {
   return `bad command name ${trimmed.split(" ")[0]} (line 1 column 1)`
 }
 
-// ─── MOTD builders ────────────────────────────────────────────────────────────
 
-function mockMotd(server: TermServer): string {
-  return [
-    "",
-    "  MMM      MMM       KKK                          TTTTTTTTTTT      KKK",
-    "  MMM MMMM MMM  III  KKK  KKK  RRR   OOOOOO  TTT     TTT      II  KKK  KKK",
-    "  MMM      MMM  III  KKK  KKK  RRR   RRROOOOO  TTT     TTT    II  KKK  KKK",
-    "",
-    `  MikroTik RouterOS ${server.rosVersion ?? "7.14.3"}   (c) 1999-${new Date().getFullYear()}       https://www.mikrotik.com/`,
-    "",
-    "[?] Gives the list of available commands",
-    "[Tab] Completes the command/word",
-    "[/] Move up to base level",
-    "[..] Move up one level",
-    "",
-  ].join("\n")
-}
-
-function liveMotd(server: TermServer): string {
-  return [
-    "",
-    `  MikroTik RouterOS ${server.rosVersion ?? "7.x"}   (c) 1999-${new Date().getFullYear()}       https://www.mikrotik.com/`,
-    "",
-    `  Connected to ${server.name}  (${server.host})`,
-    "",
-    "[?] Gives the list of available commands — type help or ?",
-    "[Tab] Completes the command/word",
-    "[/] Move up to base level",
-    "",
-  ].join("\n")
-}
-
-// ─── terminal component ───────────────────────────────────────────────────────
-
-function Terminal({
-  server,
-  isLive,
-  backendUrl,
-}: {
-  server: TermServer
-  isLive: boolean
-  backendUrl: string
-}) {
-  const [lines,     setLines]     = useState<TermLine[]>([])
-  const [input,     setInput]     = useState("")
-  const [history,   setHistory]   = useState<string[]>([])
-  const [_histIdx,  setHistIdx]   = useState(-1)
-  const [_idCtr,    setIdCtr]     = useState(0)
-  const [executing, setExecuting] = useState(false)
-
-  const inputRef  = useRef<HTMLInputElement>(null)
-  const scrollRef = useRef<HTMLDivElement>(null)
-
-  const nextId = useCallback((): number => {
-    let id = 0
-    setIdCtr(prev => { id = prev + 1; return prev + 1 })
-    return id
-  }, [])
-
-  // Initialize MOTD on mount / server change
-  useEffect(() => {
-    const motd = isLive ? liveMotd(server) : mockMotd(server)
-    const init = motd.split("\n").map((text, i) => ({ id: i, kind: "output" as const, text }))
-    setLines(init)
-    setIdCtr(init.length)
-    setInput("")
-    setHistory([])
-    setHistIdx(-1)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [server.uid, isLive])
-
-  // Auto-scroll
-  useEffect(() => {
-    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" })
-  }, [lines])
-
-  const prompt = `[admin@${server.identityName ?? server.name}] > `
-
-  const submit = useCallback(async () => {
-    if (executing) return
-    const cmd = input.trim()
-
-    setLines(prev => [...prev, { id: nextId(), kind: "prompt", text: prompt + input }])
-    setInput("")
-    setHistIdx(-1)
-
-    if (!cmd) return
-
-    setHistory(h => [cmd, ...h.filter(x => x !== cmd)].slice(0, 100))
-
-    // local always-available commands
-    const lower = cmd.toLowerCase()
-    if (lower === "clear" || lower === "/clear") { setLines([]); return }
-    if (lower === "quit"  || lower === "exit")   {
-      setLines(prev => [...prev, { id: nextId(), kind: "info", text: "Connection closed." }])
-      return
-    }
-
-    if (isLive && server.backendId !== null) {
-      setExecuting(true)
-      try {
-        const res  = await fetch(`${backendUrl}/api/servers/${server.backendId}/exec`, {
-          method:  "POST",
-          headers: { "Content-Type": "application/json" },
-          body:    JSON.stringify({ command: cmd }),
-        })
-        const data = await res.json() as { output?: string; error?: string }
-        const text = data.output ?? data.error ?? "(empty response)"
-        const kind: TermLine["kind"] = text.startsWith("error:") ? "error" : "output"
-        text.split("\n").forEach(line =>
-          setLines(prev => [...prev, { id: nextId(), kind, text: line }])
-        )
-      } catch (err) {
-        setLines(prev => [...prev, { id: nextId(), kind: "error", text: `network error: ${String(err)}` }])
-      } finally {
-        setExecuting(false)
-      }
-    } else {
-      // mock mode
-      const result = mockResolve(cmd, server.name)
-      if (result === "__CLEAR__") { setLines([]); return }
-      if (result) {
-        result.split("\n").forEach(line =>
-          setLines(prev => [...prev, { id: nextId(), kind: "output", text: line }])
-        )
-      }
-    }
-  }, [executing, input, nextId, prompt, isLive, server, backendUrl])
-
-  const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault(); void submit()
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault()
-      setHistIdx(i => {
-        const next = Math.min(i + 1, history.length - 1)
-        if (history[next] !== undefined) setInput(history[next])
-        return next
-      })
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault()
-      setHistIdx(i => {
-        const next = i - 1
-        if (next < 0) { setInput(""); return -1 }
-        if (history[next] !== undefined) setInput(history[next])
-        return next
-      })
-    } else if (e.key === "l" && e.ctrlKey) {
-      e.preventDefault(); setLines([])
-    }
+function Terminal({server,isLive,backendUrl,canExecute,blockedReason}:{server:TermServer;isLive:boolean;backendUrl:string;canExecute:boolean;blockedReason?:string}) {
+ const [lines,setLines]=useState<TermLine[]>([{id:0,kind:"info",text:isLive?"REST: каждая команда — отдельный запрос. Результат появится после ответа API.":"Демо: команды возвращают синтетические данные."}])
+ const [input,setInput]=useState(""),[history,setHistory]=useState<string[]>([]),[histIdx,setHistIdx]=useState(-1),[executing,setExecuting]=useState(false),[error,setError]=useState<string|null>(null),[completed,setCompleted]=useState<string|null>(null)
+ const nextId=useRef(1),lock=useRef(false),reader=useRef<{alive:boolean;controller:AbortController|null}>({alive:true,controller:null})
+ const inputRef=useRef<HTMLInputElement>(null),scrollRef=useRef<HTMLDivElement>(null),followOutput=useRef(true),pendingFocus=useRef(false)
+ useEffect(()=>{const state=reader.current;state.alive=true;return()=>{state.alive=false;state.controller?.abort()}},[])
+ useEffect(()=>{if(followOutput.current)scrollRef.current?.scrollTo({top:scrollRef.current.scrollHeight,behavior:"auto"})},[lines])
+ // Focus only after React has committed the re-enabled input.
+ useEffect(()=>{
+  if(executing||!pendingFocus.current)return
+  pendingFocus.current=false
+  if(reader.current.alive&&!inputRef.current?.disabled)inputRef.current?.focus()
+ },[executing,lines])
+ function append(kind:TermLine["kind"],text:string) {
+  const added=text.split("\n").map(text=>({id:nextId.current++,kind,text}))
+  setLines(previous=>{const merged=[...previous.filter(line=>line.id!==-1),...added];return merged.length>1000||previous.some(line=>line.id===-1)?[{id:-1,kind:"info",text:"Показаны последние 1000 строк; ранний вывод удалён."},...merged.slice(-1000)]:merged})
+ }
+ async function submit(){
+  const command=input.trim();if(lock.current||!command||!canExecute||!server.enabled||blockedReason)return
+  if(command.toLowerCase()==="clear"||command.toLowerCase()==="/clear"){setLines([]);setInput("");return}
+  lock.current=true;setExecuting(true);setError(null);setCompleted(null);setHistIdx(-1)
+  append("prompt",server.name+" > "+command)
+  setHistory(previous=>[command,...previous.filter(item=>item!==command)].slice(0,100))
+  const controller=new AbortController();reader.current.controller=controller
+  let timedOut=false;const timer=window.setTimeout(()=>{timedOut=true;controller.abort()},60000)
+  try {
+   const output=isLive?readTerminalOutput(await requestJson<unknown>(backendUrl,"/api/servers/"+server.backendId+"/exec",{method:"POST",body:JSON.stringify({command}),signal:controller.signal})):mockResolve(command,server.name)
+   if(!reader.current.alive)return
+   if(output==="__CLEAR__")setLines([]);else append("output",output||"Пустой вывод.")
+   setInput("");setCompleted((isLive?"Ответ API получен":"Результат демо")+" · "+new Date().toLocaleTimeString("ru-RU"));followOutput.current=true
+  } catch(err) {
+   if(!reader.current.alive)return
+   const message=timedOut?"Время ожидания истекло. Результат запроса не подтверждён.":err instanceof Error?err.message:"Не удалось получить вывод команды."
+   append("error",message);setError(message)
+  } finally {
+   window.clearTimeout(timer);lock.current=false
+   if(reader.current.alive){pendingFocus.current=true;setExecuting(false);reader.current.controller=null}
   }
-
-  const lineColor = (kind: TermLine["kind"]) => {
-    if (kind === "error")  return "text-red-400"
-    if (kind === "prompt") return "text-emerald-400"
-    if (kind === "info")   return "text-sky-400"
-    return "text-[#c9d1d9]"
-  }
-
-  return (
-    <div
-      className="flex flex-col bg-[#0d1117] rounded-lg border border-[#30363d] overflow-hidden font-mono text-xs h-full"
-      onClick={() => inputRef.current?.focus()}
-    >
-      {/* title bar */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-[#30363d] bg-[#161b22] shrink-0">
-        <CircleIcon className="size-3 text-red-500   fill-red-500" />
-        <CircleIcon className="size-3 text-amber-400 fill-amber-400" />
-        <CircleIcon className="size-3 text-emerald-500 fill-emerald-500" />
-        <span className="mx-auto text-[#8b949e] text-[11px]">
-          {server.name} — {isLive ? "RouterOS REST" : "SSH Terminal (mock)"}
-        </span>
-        {isLive && (
-          <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium border border-emerald-500/30 bg-emerald-500/10 text-emerald-400">
-            <span className="size-1 rounded-full bg-emerald-400" />LIVE
-          </span>
-        )}
-        <button
-          onClick={e => { e.stopPropagation(); setLines([]) }}
-          className="text-[#8b949e] hover:text-white transition-colors ml-1"
-          title="Очистить"
-        >
-          <TrashIcon className="size-3.5" />
-        </button>
-      </div>
-
-      {/* output */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto p-3 space-y-0.5 min-h-0">
-        {lines.map((line, i) => (
-          <div key={`${line.id}-${i}`} className={cn("whitespace-pre-wrap break-all leading-5", lineColor(line.kind))}>
-            {line.text}
-          </div>
-        ))}
-
-        {/* executing indicator */}
-        {executing && (
-          <div className="flex items-center gap-2 text-amber-400 opacity-80">
-            <Loader2Icon className="size-3 animate-spin" />
-            <span>executing…</span>
-          </div>
-        )}
-
-        {/* input line */}
-        {!executing && (
-          <div className="flex items-center gap-0">
-            <span className="text-emerald-400 select-none shrink-0">{prompt}</span>
-            <input
-              ref={inputRef}
-              value={input}
-              onChange={e => setInput(e.target.value)}
-              onKeyDown={handleKey}
-              className="terminal-input-active flex-1 bg-transparent outline-none text-[#c9d1d9] caret-emerald-400"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck={false}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  )
+ }
+ function handleKey(e:React.KeyboardEvent<HTMLInputElement>){
+  if(e.key==="Enter"){e.preventDefault();void submit()}
+  else if(e.key==="ArrowUp"){e.preventDefault();const index=Math.min(histIdx+1,history.length-1);setHistIdx(index);if(history[index]!==undefined)setInput(history[index])}
+  else if(e.key==="ArrowDown"){e.preventDefault();const index=histIdx-1;setHistIdx(Math.max(-1,index));setInput(index<0?"":history[index]??"")}
+  else if(e.key.toLowerCase()==="l"&&e.ctrlKey){e.preventDefault();setLines([])}
+ }
+ const blocked=blockedReason??(!server.enabled?"Устройство отключено в каталоге.":!canExecute?"Для выполнения требуется mm:servers:write.":null)
+ return <Frame spacing="sm" className="h-full min-h-0 min-w-0">
+  <FramePanel className="flex flex-1 flex-col min-h-0 min-w-0 p-0">
+   <FrameHeader className="border-b shrink-0 flex-row items-start justify-between gap-2">
+    <div className="min-w-0"><FrameTitle className="[overflow-wrap:anywhere]">{server.name}</FrameTitle><FrameDescription className="[overflow-wrap:anywhere]">{server.host} · {isLive?"RouterOS REST":"Демо"} · версия {server.rosVersion??"неизвестна"}</FrameDescription></div>
+    <Button type="button" variant="ghost" size="icon-sm" aria-label="Очистить вывод терминала" onClick={()=>setLines([])}><TrashIcon aria-hidden="true" className="size-4"/></Button>
+   </FrameHeader>
+   <div ref={scrollRef} role="region" aria-label="Вывод терминала" tabIndex={0} onScroll={e=>{const el=e.currentTarget;followOutput.current=el.scrollHeight-el.scrollTop-el.clientHeight<32}} className="flex-1 min-h-0 min-w-0 overflow-auto p-3 font-mono text-xs focus-visible:outline-2 focus-visible:outline-ring">
+    {lines.length?lines.map(line=><div key={line.id} className={cn("whitespace-pre-wrap [overflow-wrap:anywhere] leading-5",line.kind==="error"?"text-destructive":line.kind==="prompt"?"text-primary":line.kind==="info"?"text-muted-foreground":"text-foreground")}>{line.text}</div>):<p className="text-muted-foreground">Вывод очищен. Следующая команда добавит новый результат.</p>}
+   </div>
+   <FrameFooter className="shrink-0 border-t flex flex-col items-stretch gap-2">
+    <p role="status" className="text-xs text-muted-foreground">{executing?"Выполняем команду; ожидаем ответ…":completed??"Команда ещё не выполнена."}</p>
+    {error&&<p role="alert" className="text-xs text-destructive [overflow-wrap:anywhere]">{error} Команда сохранена для повторного выполнения.</p>}
+    {blocked&&<p role="status" className="text-xs text-muted-foreground">{blocked}</p>}
+    <label className="text-xs" htmlFor="terminal-command">Команда · {server.name}</label>
+    <div className="flex gap-2 min-w-0"><Input ref={inputRef} id="terminal-command" value={input} maxLength={1024} onChange={e=>setInput(e.target.value)} onKeyDown={handleKey} disabled={executing||!!blocked} className="flex-1 min-w-0 font-mono text-xs" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck={false}/><Button type="button" size="sm" disabled={executing||!!blocked||!input.trim()} onClick={()=>void submit()}>{executing?"Ожидание…":"Выполнить"}</Button></div>
+    <div className="flex flex-col sm:flex-row gap-2 text-xs text-muted-foreground"><select aria-label="Быстрая команда" value="" disabled={executing||!!blocked} className="min-w-0 rounded-md border bg-background px-2 py-1" onChange={e=>{setInput(e.target.value);setHistIdx(-1);inputRef.current?.focus()}}><option value="">Подставить команду…</option>{QUICK_CMDS.map(item=><option key={item.cmd} value={item.cmd}>{item.label}</option>)}</select><p>↑↓ — история · Ctrl+L — очистить · до 1024 символов</p></div>
+   </FrameFooter>
+  </FramePanel>
+ </Frame>
 }
 
 // ─── quick commands ───────────────────────────────────────────────────────────
@@ -407,215 +267,47 @@ function mockServersToTermServers(): TermServer[] {
     name:         s.name,
     host:         s.host,
     country:      s.country,
-    status:       s.status as TermServer["status"],
+    status:       s.status==="unknown"?null:s.status,
     enabled:      s.enabled,
     rosVersion:   s.os ?? null,
     identityName: s.name,
   }))
 }
 
-/** Backend ServerRead shape (only fields we need) */
-interface BackendServer {
-  id:           number
-  name:         string
-  host:         string
-  country:      string
-  status:       "online" | "offline" | null
-  enabled:      boolean
-  os:           string | null
-  identityName: string | null
+
+export default function TerminalPage(){
+ return <Suspense fallback={<p role="status" className="p-4">Загружаем терминал…</p>}><TerminalRoute/></Suspense>
 }
-
-export default function TerminalPage() {
-  const { mode, backendUrl } = useDataSource()
-  const isLive = mode === "live"
-
-  // Server list state
-  const [liveServers,  setLiveServers]  = useState<TermServer[]>([])
-  const [serversLoading, setServersLoading] = useState(false)
-  const [refreshKey,   setRefreshKey]   = useState(0)   // force terminal remount on reconnect
-
-  // Load servers from backend when in live mode
-  useEffect(() => {
-    if (!isLive) return
-    let cancelled = false
-    queueMicrotask(() => {
-      if (cancelled) return
-      setServersLoading(true)
-      fetch(`${backendUrl}/api/servers`)
-        .then(r => r.json() as Promise<BackendServer[]>)
-        .then(data => {
-          if (cancelled) return
-          setLiveServers(data.map(s => ({
-            uid:          String(s.id),
-            backendId:    s.id,
-            name:         s.name || s.host,
-            host:         s.host,
-            country:      s.country || "",
-            status:       s.status,
-            enabled:      s.enabled,
-            rosVersion:   s.os,
-            identityName: s.identityName,
-          })))
-          setServersLoading(false)
-        })
-        .catch(() => { if (!cancelled) setServersLoading(false) })
-    })
-    return () => { cancelled = true }
-  }, [isLive, backendUrl, refreshKey])
-
-  const termServers: TermServer[] = isLive ? liveServers : mockServersToTermServers()
-
-  // Select first available server by default
-  const [selectedUid, setSelectedUid] = useState<string>("")
-
-  const defaultUid = useMemo(() => {
-    const first = termServers.find(s => s.status !== "offline" && s.enabled)
-               ?? termServers[0]
-    return first?.uid ?? ""
-  }, [termServers])
-
-  useEffect(() => {
-    queueMicrotask(() => {
-      if (!selectedUid && defaultUid) setSelectedUid(defaultUid)
-    })
-  }, [defaultUid, selectedUid])
-
-  // Reset selection when switching modes
-  useEffect(() => {
-    queueMicrotask(() => setSelectedUid(""))
-  }, [isLive])
-
-  const selected = termServers.find(s => s.uid === selectedUid) ?? termServers[0]
-
-  const termKey = `${selectedUid}-${refreshKey}-${isLive ? "live" : "mock"}`
-
-  function injectCommand(cmd: string) {
-    const el = document.querySelector<HTMLInputElement>(".terminal-input-active")
-    if (!el) return
-    const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set
-    nativeSetter?.call(el, cmd)
-    el.dispatchEvent(new Event("input", { bubbles: true }))
-    el.focus()
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <PageHeader
-        crumbs={[{ label: "Инструменты" }, { label: "Терминал" }]}
-        actions={
-          <Button variant="outline" size="sm" onClick={() => {
-            setRefreshKey(k => k + 1)
-            if (isLive) setSelectedUid("")
-          }}>
-            <RefreshCwIcon className="size-4" />Переподключить
-          </Button>
-        }
-      />
-
-      <div className="flex-1 overflow-hidden p-6">
-        <div className="grid grid-cols-[220px_1fr] gap-5 h-full">
-
-          {/* ── sidebar ── */}
-          <div className="flex flex-col gap-4 overflow-y-auto min-h-0">
-
-            {/* server picker */}
-            <div>
-              <div className="flex items-center gap-2 mb-2">
-                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Узел</p>
-                {isLive && serversLoading && (
-                  <Loader2Icon className="size-3 animate-spin text-muted-foreground" />
-                )}
-                {isLive && !serversLoading && (
-                  <span className="inline-flex items-center gap-1 text-[10px] font-medium rounded border border-emerald-500/30 bg-emerald-500/10 text-emerald-400 px-1.5 py-0.5">
-                    <span className="size-1 rounded-full bg-emerald-400" />LIVE
-                  </span>
-                )}
-              </div>
-
-              {isLive && !serversLoading && liveServers.length === 0 && (
-                <p className="text-xs text-muted-foreground px-2.5">
-                  Нет доступных серверов
-                </p>
-              )}
-
-              <div className="space-y-1">
-                {termServers.map(s => {
-                  const isOffline  = s.status === "offline"
-                  const isSelected = s.uid === selectedUid
-                  return (
-                    <button
-                      key={s.uid}
-                      disabled={isOffline || !s.enabled}
-                      onClick={() => { setSelectedUid(s.uid); setRefreshKey(k => k + 1) }}
-                      className={cn(
-                        "w-full text-left rounded-md px-2.5 py-2 text-xs transition-colors",
-                        "flex items-center gap-2",
-                        isSelected
-                          ? "bg-primary text-primary-foreground"
-                          : "hover:bg-muted",
-                        (isOffline || !s.enabled) && "opacity-40 cursor-not-allowed",
-                      )}
-                    >
-                      <span className={cn(
-                        "inline-block size-1.5 rounded-full shrink-0",
-                        s.status === "online"   ? "bg-emerald-500" :
-                        s.status === "degraded" ? "bg-amber-400"   :
-                        s.status === null       ? "bg-sky-400"     : "bg-red-500",
-                      )} />
-                      {s.country && <Flag code={s.country} />}
-                      <span className="truncate font-mono">{s.name}</span>
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-
-            {/* quick commands */}
-            <div>
-              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                Быстрые команды
-              </p>
-              <div className="space-y-1">
-                {QUICK_CMDS.map(({ cmd, label }) => (
-                  <button
-                    key={cmd}
-                    className="w-full text-left rounded-md px-2.5 py-1.5 text-[11px] font-mono text-muted-foreground hover:bg-muted hover:text-foreground transition-colors truncate block"
-                    onClick={() => injectCommand(cmd)}
-                    title={cmd}
-                  >
-                    {label}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* hints */}
-            <div className="mt-auto text-[10px] text-muted-foreground/50 space-y-0.5 px-0.5">
-              <p>↑↓ — история команд</p>
-              <p>Ctrl+L — очистить экран</p>
-              {isLive
-                ? <p className="text-sky-400/60">Команды выполняются на роутере</p>
-                : <p>Режим: mock-данные</p>
-              }
-            </div>
-          </div>
-
-          {/* ── terminal ── */}
-          {selected ? (
-            <Terminal
-              key={termKey}
-              server={selected}
-              isLive={isLive}
-              backendUrl={backendUrl}
-            />
-          ) : (
-            <div className="flex items-center justify-center bg-[#0d1117] rounded-lg border border-[#30363d] text-[#8b949e] text-sm font-mono">
-              {serversLoading ? "Загрузка серверов…" : "Выберите сервер"}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
+function TerminalRoute(){
+ const {mode,backendUrl,prefsHydrated}=useDataSource(),params=useSearchParams(),url=readTerminalUrl(new URLSearchParams(params.toString()))
+ function reset(){const href=patchTerminalUrl(new URLSearchParams(params.toString()),null)+window.location.hash;window.history.replaceState(null,"",href)}
+ if(url.error)return <Alert variant="destructive"><AlertTitle>Некорректная ссылка терминала</AlertTitle><AlertDescription>{url.error}<Button type="button" variant="outline" onClick={reset}>Сбросить контекст терминала</Button></AlertDescription></Alert>
+ if(!prefsHydrated)return <p role="status" className="p-4">Загружаем источник…</p>
+ return <TerminalContent key={JSON.stringify([mode,backendUrl])}/>
+}
+function TerminalContent(){
+ const {mode,backendUrl}=useDataSource(),isLive=mode==="live",params=useSearchParams(),url=readTerminalUrl(new URLSearchParams(params.toString()))
+ const [liveServers,setLiveServers]=useState<TermServer[]>([]),[loading,setLoading]=useState(false),[error,setError]=useState<string|null>(null),[loaded,setLoaded]=useState(false),[readAt,setReadAt]=useState<string|null>(null),[refresh,setRefresh]=useState(0)
+ const canRead=can("mm:servers:read"),canExecute=!isLive||can("mm:servers:write")
+ useEffect(()=>{
+  if(!isLive||!canRead)return
+  let cancelled=false;const controller=new AbortController()
+  queueMicrotask(()=>{if(cancelled)return;setLoading(true);void requestJson<unknown>(backendUrl,"/api/servers",{signal:controller.signal}).then(raw=>{
+   const rows=terminalServersSchema.parse(raw);if(cancelled)return
+   setLiveServers(rows.map(row=>({uid:String(row.id),backendId:row.id,name:row.name||row.host,host:row.host,country:row.country,status:row.status,enabled:row.enabled,rosVersion:row.os??null,identityName:row.identityName??null})));setLoaded(true);setReadAt(new Date().toLocaleTimeString("ru-RU"));setError(null)
+  }).catch(err=>{if(!cancelled)setError(err instanceof Error?(err.name==="ZodError"?"Некорректный каталог устройств.":err.message):"Не удалось загрузить устройства.")}).finally(()=>{if(!cancelled)setLoading(false)})})
+  return()=>{cancelled=true;controller.abort()}
+ },[isLive,backendUrl,canRead,refresh])
+ const termServers=isLive?liveServers:mockServersToTermServers()
+ const matches=url.server?termServers.filter(server=>server.uid===url.server):url.host?termServers.filter(server=>server.host===url.host):[]
+ const selected=matches.length===1?matches[0]:null
+ const unavailable=(loaded||!isLive)&&(url.server||url.host)&&!selected
+ const items=termServers.map(server=>({id:server.uid,name:server.name,host:server.host,country:server.country||undefined,status:server.status??"unknown" as const,enabled:server.enabled,selectable:true,title:[server.name,server.host].join(" · ")}))
+ function select(id:string){const href=patchTerminalUrl(new URLSearchParams(params.toString()),id||null)+window.location.hash;window.history.pushState(null,"",href)}
+ const blocked=!!error||loading||isLive&&!loaded
+ return <ServerRailLayout items={items} selectedId={selected?.uid??url.server??""} onSelect={select} preserveSelection showAll={false} showCount={false} showType={false} loading={loading} contentClassName="min-h-0 min-w-0 overflow-hidden p-2 md:p-3"
+ header={<PageHeader crumbs={[{label:"Инструменты"},{label:"Терминал"}]} actions={<><ServerRailMobileButton/>{isLive&&<Button type="button" variant="outline" size="sm" disabled={loading||!canRead} onClick={()=>setRefresh(value=>value+1)}><RefreshCwIcon aria-hidden="true" className="size-4"/>Обновить устройства</Button>}</>}/>}
+ banner={<div className="px-3 py-2 space-y-2"><p role="status" className="text-xs text-muted-foreground">{isLive?(readAt?"Каталог · ответ "+readAt+" (время браузера)":"Каталог ещё не подтверждён."):"Демо: команды не отправляются на устройство."} REST выполняет только поддерживаемые диагностические команды.</p>{!canRead&&isLive&&<Alert variant="destructive"><AlertTitle>Нет доступа к каталогу</AlertTitle><AlertDescription>Требуется mm:servers:read.</AlertDescription></Alert>}{error&&<Alert variant="destructive"><AlertTitle>{loaded?"Каталог не обновлён":"Устройства пока неизвестны"}</AlertTitle><AlertDescription>{error} {loaded?"Сохранён предыдущий каталог; выполнение приостановлено до успешного обновления.":"Повторите загрузку устройств."}</AlertDescription></Alert>}{unavailable&&<Alert variant="destructive"><AlertTitle>Устройство терминала недоступно</AlertTitle><AlertDescription>{matches.length>1?"Host неоднозначен: выберите точное устройство.":"Указанный server/host отсутствует в текущем каталоге."}<Button type="button" variant="outline" onClick={()=>select("")}>Сбросить выбор устройства</Button></AlertDescription></Alert>}</div>}>
+ {selected?<Terminal key={JSON.stringify([selected.uid,selected.host])} server={selected} isLive={isLive} backendUrl={backendUrl} canExecute={canExecute} blockedReason={blocked?"Каталог не подтверждён; выполнение приостановлено до успешного обновления.":undefined}/>:<Frame spacing="sm" className="h-full min-h-0"><FramePanel className="h-full flex flex-col gap-2 items-center justify-center p-4 text-center"><FrameTitle>{loading?"Загружаем устройства…":loaded&&!termServers.length?"Устройств пока нет":"Выберите устройство для терминала"}</FrameTitle><FrameDescription>Выбор сохраняется в URL. Команда отправляется только после нажатия «Выполнить».</FrameDescription></FramePanel></Frame>}
+ </ServerRailLayout>
 }

app/(main)/uptime/probe-rows.module.css

@@ -0,0 +1,33 @@
+.container { container-type: inline-size; }
+.header { display: none; }
+.serverName { flex: 1 1 160px; }
+.row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-areas: "name name" "status toggle" "iface filter" "rtt loss" "bt graph" "star actions";
+}
+.row > * { min-width: 0; overflow-wrap: anywhere; }
+.name { grid-area: name; }
+.status { grid-area: status; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
+.toggle { grid-area: toggle; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: flex-end; }
+.iface { grid-area: iface; }
+.filter { grid-area: filter; }
+.rtt { grid-area: rtt; }
+.loss { grid-area: loss; }
+.bt { grid-area: bt; }
+.graph { grid-area: graph; }
+.star { grid-area: star; display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
+.actions { grid-area: actions; }
+.label { display: block; font-size: 0.625rem; color: var(--muted-foreground); }
+.actions button, .star button { min-width: 2rem; min-height: 2rem; }
+
+@container (min-width: 1100px) {
+  .header, .row {
+    display: grid;
+    grid-template-columns: 36px 16px 130px 120px 140px 70px 44px minmax(132px, 1fr) 96px 36px 72px;
+    grid-template-areas: "toggle status iface name filter rtt loss bt graph star actions";
+  }
+  .label, .mobile { display: none; }
+  .toggle, .star { justify-content: center; }
+  .actions button, .star button { min-width: unset; min-height: unset; }
+}

app/(main)/users/page.tsx

@@ -0,0 +1,365 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState, useMemo } from "react"
+import { PageHeader } from "@/components/page-header"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { DataPageCard } from "@/components/data-page-card"
+import { UsersDataGrid } from "@/components/data-grids/users-data-grid"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { UserSheet } from "@/components/users/user-sheet"
+import { Button } from "@/components/ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { servers as mockServers } from "@/lib/data"
+import { useDataSource } from "@/lib/data-source"
+import {
+  ALL_SECTIONS,
+  INIT_USERS,
+  userInitials,
+  type AppUser,
+  type AppUserForm,
+  type UserServerOption,
+} from "@/lib/users"
+import { serverListSchema } from "@mmapp/contracts/servers"
+import { requestJson } from "@/shared/api/http-client"
+import { can } from "@/lib/auth"
+import {
+  userApiError,
+  createAppUser,
+  getAppUser,
+  createUserBinding,
+  deleteAppUser,
+  deleteUserBinding,
+  listAppUsers,
+  updateAppUser,
+} from "@/shared/api/users"
+import { saveUserSteps, userProfileRequest, type UserSaveCheckpoint } from "@/lib/user-save"
+import { toast } from "sonner"
+import {
+  CableIcon,
+  PlusIcon,
+  TrashIcon,
+  UserCheckIcon,
+  UsersIcon,
+} from "lucide-react"
+
+function toServerOptionsFromMock(): UserServerOption[] {
+  return mockServers.map((s) => ({
+    id: s.id,
+    name: s.name,
+    host: s.host,
+    site: s.site,
+    country: s.country,
+    status: s.status === "unknown" ? null : s.status,
+  }))
+}
+
+export default function UsersPage() {
+  const { mode, backendUrl, prefsHydrated } = useDataSource()
+  if (!prefsHydrated) return <p role="status">Загрузка настроек пользователей…</p>
+  return <UsersContent key={JSON.stringify([mode, backendUrl])} />
+}
+
+function UsersContent() {
+  const { mode, backendUrl } = useDataSource()
+  const isLive = mode === "live"
+  const canRead = can("mm:users:read")
+  const canWrite = can("mm:users:write")
+  const canReadServers = can("mm:servers:read")
+
+  const [users, setUsers] = useState<AppUser[]>(() => isLive ? [] : INIT_USERS)
+  const [userSearch, setUserSearch] = useState("")
+  const visibleUsers = useMemo(() => {
+    const query = userSearch.trim().toLocaleLowerCase("ru-RU")
+    return query ? users.filter(user => [user.name, user.login, user.email].some(value => value.toLocaleLowerCase("ru-RU").includes(query))) : users
+  }, [users, userSearch])
+  const [serverOptions, setServerOptions] = useState<UserServerOption[]>(() => isLive ? [] : toServerOptionsFromMock())
+  const [loading, setLoading] = useState(isLive && canRead)
+  const [usersReadAt, setUsersReadAt] = useState<number | null>(null)
+  const [serversReadAt, setServersReadAt] = useState<number | null>(null)
+  const [usersError, setUsersError] = useState<string | null>(null)
+  const [serversError, setServersError] = useState<string | null>(null)
+  const loadController = useRef<AbortController | null>(null)
+  const loadRevision = useRef(0)
+  const [saving, setSaving] = useState(false)
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const [saveBlocked, setSaveBlocked] = useState(false)
+  const [saveResume, setSaveResume] = useState(false)
+  const saveCheckpoint = useRef<UserSaveCheckpoint | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+  const [operationNotice, setOperationNotice] = useState<string | null>(null)
+  const mutationLock = useRef(false)
+  const mutationController = useRef<AbortController | null>(null)
+  const alive = useRef(true)
+  useEffect(() => { alive.current = true; return () => { alive.current = false; mutationController.current?.abort() } }, [])
+  const formReturnFocus = useRef<HTMLElement | null>(null)
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [editUser, setEditUser] = useState<AppUser | null>(null)
+  useEffect(() => {
+    if (sheetOpen || !formReturnFocus.current) return
+    const label = formReturnFocus.current.getAttribute("aria-label")
+    const frame = requestAnimationFrame(() => {
+      const target = Array.from(document.querySelectorAll<HTMLButtonElement>("button[aria-label]")).find(button => button.getAttribute("aria-label") === label)
+      ;(target ?? document.querySelector<HTMLButtonElement>('button[aria-label="Добавить пользователя"]'))?.focus()
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [sheetOpen])
+  const [deleteTarget, setDeleteTarget] = useState<AppUser | null>(null)
+
+  const loadLive = useCallback(async () => {
+    if (!isLive || !canRead) return false
+    loadController.current?.abort()
+    const controller = new AbortController()
+    loadController.current = controller
+    const revision = ++loadRevision.current
+    const current = () => !controller.signal.aborted && revision === loadRevision.current
+    setLoading(true)
+    const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(30_000)])
+    const [list, srvs] = await Promise.allSettled([
+      listAppUsers(backendUrl, { signal }).then(rows => {
+        if (current()) { setUsers(rows); setUsersReadAt(Date.now()); setUsersError(null) }
+        return rows
+      }).catch(error => {
+        if (current()) setUsersError(userApiError(error))
+        throw error
+      }),
+      canReadServers ? requestJson<unknown>(backendUrl, "/api/servers", { signal }).then(raw => {
+        const rows = serverListSchema.parse(raw)
+        if (new Set(rows.map(row => row.id)).size !== rows.length || rows.some(row => row.id <= 0)) throw new Error("Некорректный каталог серверов.")
+        if (current()) {
+          setServerOptions(rows.map(s => ({
+            id: String(s.id), name: s.name || s.host, host: s.host, site: s.site, country: s.country, status: s.status,
+          })))
+          setServersReadAt(Date.now()); setServersError(null)
+        }
+        return rows
+      }).catch(error => {
+        if (current()) setServersError(userApiError(error))
+        throw error
+      }) : Promise.resolve(null),
+    ])
+    if (!current()) return false
+    setLoading(false)
+    return list.status === "fulfilled" && srvs.status === "fulfilled"
+  }, [isLive, canRead, canReadServers, backendUrl])
+
+  useEffect(() => {
+    let cancelled = false
+    if (isLive && canRead) queueMicrotask(() => { if (!cancelled) void loadLive() })
+    return () => { cancelled = true; loadController.current?.abort() }
+  }, [isLive, canRead, loadLive])
+
+  const usersKnown = !isLive || usersReadAt !== null
+  const serversKnown = !isLive || serversReadAt !== null
+  const writeReady = canWrite && (!isLive || (usersKnown && serversKnown && !loading && !usersError && !serversError))
+  const boundCount = users.reduce((n, u) => n + u.bindings.length, 0)
+  const activeCount = users.filter((u) => u.active).length
+
+  const handleSave = async (form: AppUserForm) => {
+    if (!writeReady || mutationLock.current || saveBlocked) return
+    if (!isLive) {
+      if (!editUser) {
+        const id = "u" + Date.now()
+        setUsers(prev => [...prev, { id, ...form, last: "—", avatar: userInitials(form.name), bindings: form.bindings.map((b, i) => ({ ...b, id: "b" + id + "-" + i, userId: id })) }])
+      } else setUsers(prev => prev.map(u => u.id === editUser.id ? { ...u, ...form, avatar: userInitials(form.name) } : u))
+      setSheetOpen(false); toast.success("Профиль сохранён в демо."); return
+    }
+    mutationLock.current = true
+    const controller = new AbortController()
+    mutationController.current = controller
+    const current = () => alive.current && !controller.signal.aborted
+    const init = () => ({ signal: AbortSignal.any([controller.signal, AbortSignal.timeout(30_000)]) })
+    const checkpoint = saveCheckpoint.current ?? { user: editUser }
+    saveCheckpoint.current = checkpoint
+    setSaving(true); setSaveError(null); setOperationNotice(null)
+    try {
+      const saved = await saveUserSteps(form, checkpoint, {
+        create: f => createAppUser(backendUrl, userProfileRequest(f), init()),
+        update: (id, f) => updateAppUser(backendUrl, id, userProfileRequest(f), init()),
+        read: id => getAppUser(backendUrl, id, init()),
+        removeBinding: (userId, id) => deleteUserBinding(backendUrl, userId, id, init()),
+        addBinding: (userId, b) => createUserBinding(backendUrl, userId, {
+          serverId: Number(b.serverId), interfaceName: b.interfaceName, interfaceType: b.interfaceType,
+          peerPublicKey: b.peerPublicKey, peerName: b.peerName, comment: b.comment,
+        }, init()),
+      }, current, state => {
+        if (!current()) return
+        setSaveBlocked(!!state.createUncertain)
+        if (state.user) {
+          if (!editUser) setSaveResume(true)
+          const confirmed = state.user
+          setUsers(prev => prev.some(u => u.id === confirmed.id) ? prev.map(u => u.id === confirmed.id ? confirmed : u) : [...prev, confirmed])
+        }
+      })
+      if (!current() || !saved) return
+      setSheetOpen(false); saveCheckpoint.current = null
+      setOperationNotice("Профиль и привязки подтверждены API.")
+      toast.success("Пользователь сохранён.")
+      const refreshed = await loadLive()
+      if (current() && !refreshed) setOperationNotice("Профиль и привязки подтверждены API. Обновление каталогов не удалось; повторите чтение.")
+    } catch (error) {
+      if (!current()) return
+      const detail = userApiError(error)
+      setSaveError(checkpoint.createUncertain
+        ? "Результат создания неизвестен. Повтор заблокирован: проверьте список пользователей. " + detail
+        : checkpoint.bindingsNeedRead
+          ? "Профиль подтверждён API; привязки сохранены частично. При повторе сначала прочитаем их текущее состояние. " + detail
+          : detail)
+    } finally {
+      if (mutationController.current === controller) { mutationController.current = null; mutationLock.current = false }
+      if (alive.current) setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget || !writeReady || mutationLock.current) return
+    const target = deleteTarget
+    if (!isLive) {
+      setUsers(prev => prev.filter(u => u.id !== target.id)); setDeleteTarget(null); setDeleteError(null)
+      toast.success("Пользователь удалён в демо.")
+      return
+    }
+    mutationLock.current = true
+    const controller = new AbortController()
+    mutationController.current = controller
+    setDeleting(true); setDeleteError(null); setOperationNotice(null)
+    const current = () => alive.current && !controller.signal.aborted
+    try {
+      await deleteAppUser(backendUrl, target.id, { signal: AbortSignal.any([controller.signal, AbortSignal.timeout(30_000)]) })
+      if (!current()) return
+      setUsers(prev => prev.filter(u => u.id !== target.id))
+      setDeleteTarget(null)
+      setOperationNotice("Удаление пользователя подтверждено API.")
+      toast.success("Пользователь удалён.")
+      const refreshed = await loadLive()
+      if (current() && !refreshed) setOperationNotice("Удаление пользователя подтверждено API. Обновление каталогов не удалось; повторите чтение.")
+    } catch (error) {
+      if (current()) setDeleteError(userApiError(error))
+    } finally {
+      if (mutationController.current === controller) { mutationController.current = null; mutationLock.current = false }
+      if (alive.current) setDeleting(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full min-w-0">
+      <PageHeader
+        crumbs={[{ label: "Управление" }, { label: "Пользователи" }]}
+        actions={
+          <>
+          {isLive && <Button type="button" size="sm" variant="outline" aria-label="Обновить пользователей" disabled={!canRead || loading || saving || deleting || sheetOpen || !!deleteTarget} onClick={() => void loadLive()}>Обновить</Button>}
+          <Button type="button" size="sm" aria-label="Добавить пользователя" disabled={!writeReady || saving || deleting} onClick={() => { formReturnFocus.current = document.activeElement as HTMLElement; saveCheckpoint.current = null; setSaveError(null); setSaveBlocked(false); setSaveResume(false); setEditUser(null); setSheetOpen(true) }}>
+            <PlusIcon aria-hidden="true" className="size-4" />Добавить <span className="hidden sm:inline">пользователя</span>
+          </Button>
+          </>
+        }
+      />
+
+      <div className="flex-1 overflow-y-auto p-4 md:p-6 min-w-0 flex flex-col gap-5">
+        {operationNotice && <p role="status" className="text-sm text-muted-foreground">{operationNotice}</p>}
+        {!isLive && <p role="status" className="text-sm text-muted-foreground">Демо: изменения сохраняются только в текущем экране.</p>}
+        {!canRead && <p role="status">Для чтения пользователей требуется mm:users:read.</p>}
+        {!canWrite && <p role="status">Для изменения пользователей требуется mm:users:write.</p>}
+        {isLive && !canReadServers && <p role="status">Каталог серверов недоступен: требуется mm:servers:read. Изменения приостановлены.</p>}
+        {usersError && <div role="alert" aria-label="Пользователи" className="rounded-lg border border-destructive/30 p-3 text-sm"><p>{usersKnown ? "Не удалось обновить пользователей. Последний список сохранён." : "Пользователи пока неизвестны."}</p><p>{usersError}</p></div>}
+        {serversError && <div role="alert" aria-label="Серверы пользователей" className="rounded-lg border border-destructive/30 p-3 text-sm"><p>{serversKnown ? "Не удалось обновить серверы. Последний каталог сохранён." : "Каталог серверов пока неизвестен."} Изменения приостановлены.</p><p>{serversError}</p></div>}
+        {isLive && usersReadAt !== null && <p role="status" className="text-xs text-muted-foreground">Пользователи получены: {new Date(usersReadAt).toLocaleTimeString("ru-RU")}{loading ? " · обновляются" : ""}</p>}
+        {isLive && loading && !usersKnown && <p role="status">Загрузка пользователей…</p>}
+        {/* Preview: https://reui.io/preview/base/stats-12 · https://reui.io/docs/components/base/icon-tile */}
+        <KpiStatGrid
+          aria-label="Сводка пользователей"
+          items={[
+            {
+              id: "all",
+              label: "Пользователи",
+              value: usersKnown ? users.length : "—",
+              icon: <UsersIcon className="size-4" />,
+              iconClassName: "text-muted-foreground",
+            },
+            {
+              id: "active",
+              label: "Активные",
+              value: usersKnown ? activeCount : "—",
+              icon: <UserCheckIcon className="size-4" />,
+              iconClassName: "text-success",
+            },
+            {
+              id: "ifaces",
+              label: "Привязанные интерфейсы",
+              value: usersKnown ? boundCount : "—",
+              icon: <CableIcon className="size-4" />,
+              iconClassName: "text-info",
+            },
+          ]}
+        />
+
+        {/* Preview: https://reui.io/preview/base/data-grid-filtering-2 · https://reui.io/docs/components/base/data-grid · https://reui.io/docs/components/base/frame */}
+        {canRead && (usersKnown || loading) && <DataPageCard>
+          <DataPageToolbar search={userSearch} onSearchChange={setUserSearch} searchLabel="Поиск по имени, логину или email" searchPlaceholder="Поиск по имени, логину или email…" countLabel={usersKnown ? `${visibleUsers.length} из ${users.length}` : "Данные пока неизвестны"} />
+          <UsersDataGrid
+            users={visibleUsers}
+            emptyTitle={userSearch.trim() ? "Нет совпадений" : "Нет пользователей"}
+            emptyDescription={userSearch.trim() ? "Измените поиск" : "Добавьте пользователя, чтобы привязать интерфейсы и учитывать трафик"}
+            serversCount={serversKnown ? serverOptions.length : null}
+            allSectionsCount={ALL_SECTIONS.length}
+            isLoading={loading && !usersKnown}
+            actionsDisabled={!writeReady || saving || deleting}
+            onEdit={(u) => { formReturnFocus.current = document.activeElement as HTMLElement; saveCheckpoint.current = null; setSaveError(null); setSaveBlocked(false); setSaveResume(false); setEditUser(u); setSheetOpen(true) }}
+            onDelete={u => { setDeleteError(null); setDeleteTarget(u) }}
+          />
+        </DataPageCard>}
+      </div>
+
+      <UserSheet
+        returnFocus={formReturnFocus}
+        key={sheetOpen ? (editUser?.id ?? "create") : "closed"}
+        open={sheetOpen}
+        user={editUser}
+        users={users}
+        servers={serverOptions}
+        isLive={isLive}
+        backendUrl={backendUrl}
+        saving={saving}
+        saveError={saveError}
+        saveBlocked={saveBlocked}
+        saveResume={saveResume}
+        onCheckCatalogs={() => void loadLive()}
+        onSave={(f) => { void handleSave(f) }}
+        onClose={() => { if (!saving) { setSheetOpen(false); saveCheckpoint.current = null } }}
+      />
+
+      {deleteTarget && (
+        <AlertDialog open={!!deleteTarget} onOpenChange={(v) => { if (!v && !deleting) { setDeleteTarget(null); setDeleteError(null) } }}>
+          <AlertDialogContent size="default">
+            <AlertDialogHeader>
+              <AlertDialogMedia className="bg-destructive/10 text-destructive">
+                <TrashIcon />
+              </AlertDialogMedia>
+              <AlertDialogTitle>Удалить пользователя?</AlertDialogTitle>
+              <AlertDialogDescription>
+                {deleteTarget.name} · {deleteTarget.email || deleteTarget.login}. Привязки интерфейсов будут удалены.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              {deleteError && <p role="alert" className="text-sm text-destructive">{deleteError}</p>}
+              <AlertDialogCancel disabled={deleting} onClick={() => { setDeleteTarget(null); setDeleteError(null) }}>Отмена</AlertDialogCancel>
+              <AlertDialogAction type="button" disabled={deleting || !writeReady} aria-busy={deleting} variant="destructive" onClick={() => { void handleDelete() }}>
+                {deleting ? "Удаление…" : "Удалить"}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </div>
+  )
+}

app/(main)/vxlan/page.tsx

@@ -1,273 +1,397 @@
 "use client"
 
-import { useMemo, useState } from "react"
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import Link from "next/link"
+import { useRouter, useSearchParams } from "next/navigation"
+import { Alert as ContextAlert, AlertTitle as ContextTitle, AlertDescription as ContextDescription } from "@/components/reui/alert"
 import { PageHeader } from "@/components/page-header"
-import { vxlanTunnels, servers } from "@/lib/data"
-import type { VxlanTunnel } from "@/lib/data"
-import { Card, CardContent } from "@/components/ui/card"
+import { vxlanTunnels as mockVxlanTunnels, servers as mockServers } from "@/lib/data"
+import type { Server, VxlanTunnel } from "@/lib/data"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
 import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { VxlanDataGrid } from "@/components/data-grids/vxlan-data-grid"
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
+import { Alert, AlertDescription } from "@/components/ui/alert"
 import {
-  NetworkIcon, PlusIcon, CopyIcon, CheckIcon,
-  CodeXmlIcon, LayersIcon,
+  NetworkIcon, LayersIcon, RefreshCwIcon, AlertCircleIcon,
 } from "lucide-react"
-import {
-  Sheet, SheetContent, SheetHeader, SheetTitle,
-  SheetDescription, SheetFooter, SheetClose,
-} from "@/components/ui/sheet"
+import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
+import { useDataSource } from "@/lib/data-source"
+import { generateVxlanRsc } from "@/lib/vxlan-export"
+import { vxlanResponseSchema, vxlanServersSchema } from "@/lib/vxlan-response"
+import { requestJson } from "@/shared/api/http-client"
+import { cn } from "@/lib/utils"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"
 
-// ─── helpers ──────────────────────────────────────────────────────────────────
-
-function serverFor(id: string) {
-  return servers.find((s) => s.id === id)
+interface BackendServer {
+  id: number
+  name: string
+  host: string
+  type?: Server["type"]
+  site?: string
+  country: string
+  asn?: string
+  enabled: boolean
+  status?: Server["status"] | null
+  latency?: number | null
 }
 
-// ─── RSC generator ───────────────────────────────────────────────────────────
+interface VxlanApiResponse {
+  failures?: Array<{ serverId: string; serverName?: string; error: string }>
+  tunnels: VxlanTunnel[]
+}
 
-function generateVxlanRsc(t: VxlanTunnel): string {
-  const srv = serverFor(t.serverId)
-  const lines: string[] = []
-  lines.push(`# VXLAN — ${t.name} · VNI ${t.vni}`)
-  if (srv) lines.push(`# Сервер: ${srv.name} (${srv.host})`)
-  lines.push(`# RouterOS 7.x · /interface/vxlan`)
-  lines.push(``)
-  lines.push(`/interface/vxlan/add \\`)
-  lines.push(`  name=${t.name} \\`)
-  lines.push(`  vni=${t.vni} \\`)
-  lines.push(`  port=${t.dstPort} \\`)
-  lines.push(`  vtep-mac-address=auto \\`)
-  lines.push(`  arp-proxy=${t.arpProxy ? "yes" : "no"} \\`)
-  lines.push(`  mac-learning=${t.macLearning ? "yes" : "no"} \\`)
-  lines.push(`  l2mtu=${t.l2mtu} \\`)
-  if (t.comment) lines.push(`  comment="${t.comment}" \\`)
-  if (!t.enabled) lines.push(`  disabled=yes \\`)
-  lines.push(``)
+type InventoryServer = Server & { monitoringUnknown?: boolean }
 
-  // FDB entries for remote VTEPs
-  for (const vtep of t.remoteVteps) {
-    lines.push(`/interface/vxlan/vteps/add \\`)
-    lines.push(`  interface=${t.name} \\`)
-    lines.push(`  remote-ip=${vtep}`)
-    lines.push(``)
+function mapBackendServer(s: BackendServer): InventoryServer {
+  return {
+    id: String(s.id),
+    name: s.name || s.host,
+    host: s.host,
+    model: "—",
+    os: "—",
+    site: s.site ?? "",
+    country: s.country || "UN",
+    asn: s.asn ?? "",
+    type: s.type ?? "exit-node",
+    enabled: s.enabled,
+    status: s.status ?? "offline",
+    monitoringUnknown: s.status == null,
+    latency: s.latency ?? null,
+    sessions: 0,
   }
-
-  // Bridge
-  lines.push(`# Добавить в bridge:`)
-  lines.push(`/interface/bridge/port/add \\`)
-  lines.push(`  bridge=bridge-overlay \\`)
-  lines.push(`  interface=${t.name}`)
-
-  return lines.join("\n")
 }
 
-// ─── Export Sheet ─────────────────────────────────────────────────────────────
-
-function ExportSheet({ open, tunnel, onClose }: {
-  open: boolean; tunnel: VxlanTunnel | null; onClose: () => void
+function ExportSheet({
+  open, tunnel, onClose, serverById, receivedAt, stale, mock,
+}: {
+  open: boolean
+  tunnel: VxlanTunnel | null
+  onClose: () => void
+  serverById: Record<string, Server>
+  receivedAt: string | null
+  stale: boolean
+  mock: boolean
 }) {
-  const [copied, setCopied] = useState(false)
-  const code = useMemo(() => tunnel ? generateVxlanRsc(tunnel) : "", [tunnel])
-
-  function handleCopy() {
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(true); setTimeout(() => setCopied(false), 2000)
-    })
-  }
+  const code = useMemo(
+    () => (tunnel ? generateVxlanRsc(tunnel, serverById) : ""),
+    [tunnel, serverById],
+  )
 
   return (
-    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
-      <SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-2xl">
-        <SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <SheetTitle>Экспорт VXLAN</SheetTitle>
-              <SheetDescription>RouterOS 7.x · /interface/vxlan + vteps</SheetDescription>
-            </div>
-            <Button variant="outline" size="sm" className="shrink-0" onClick={handleCopy}>
-              {copied ? <><CheckIcon className="size-3.5 text-emerald-500" />Скопировано</> : <><CopyIcon className="size-3.5" />Копировать</>}
-            </Button>
-          </div>
-        </SheetHeader>
-        <div className="flex-1 overflow-y-auto">
-          <pre className="px-6 py-5 text-[12px] font-mono leading-relaxed text-foreground/85 whitespace-pre select-all">
-            {code.split("\n").map((line, i) => {
-              const isComment = line.startsWith("#")
-              const isCmd = /^\//.test(line.trimStart())
-              const isParam = /^\s+[a-z]/.test(line)
-              return (
-                <span key={i} className={
-                  isComment ? "text-muted-foreground"
-                  : isCmd    ? "text-sky-400"
-                  : isParam  ? "text-violet-300"
-                  : "text-foreground"
-                }>
-                  {line}{"\n"}
-                </span>
-              )
-            })}
-          </pre>
-        </div>
-        <SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
-          <SheetClose render={<Button variant="outline" className="flex-1" />}>Закрыть</SheetClose>
-          <Button className="flex-1" onClick={handleCopy}>
-            {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-            {copied ? "Скопировано" : "Копировать .rsc"}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
+    <CodeExportSheet
+      open={open}
+      onClose={onClose}
+      className="data-[side=right]:w-full data-[side=right]:sm:max-w-lg"
+      title="Экспорт VXLAN"
+      description={mock ? "Моковый снимок · данные не получены с RouterOS" : `Снимок на момент открытия · ${receivedAt ? new Date(receivedAt).toLocaleString("ru-RU") : "время получения неизвестно"} · ${stale ? "актуальность не подтверждена" : "последний успешный опрос"}`}
+      formats={[
+        {
+          id: "rsc",
+          label: "MikroTik .rsc",
+          filename: `${tunnel?.name ?? "vxlan"}.rsc`,
+          code,
+        },
+      ]}
+    />
   )
 }
 
-// ─── Export Sheet ─────────────────────────────────────────────────────────────
-export default function VxlanPage() {
-  const [search, setSearch]           = useState("")
-  const [exportTunnel, setExportTunnel] = useState<VxlanTunnel | null>(null)
+function VxlanPageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, onSelectServer }: {
+  selectedServerId: string
+  selectedTunnelId: string | null
+  allTunnelsHref: string
+  onSelectServer: (id: string) => void
+}) {
+  const { mode, backendUrl } = useDataSource()
+  const isLive = mode === "live"
+
+  const [search, setSearch] = useState("")
+  const [exportSnapshot, setExportSnapshot] = useState<{ tunnel: VxlanTunnel; servers: Record<string, Server>; at: string | null; stale: boolean; mock: boolean } | null>(null)
+  const [readReceipt, setReadReceipt] = useState<Record<string, string>>({})
+  const [responseReceipt, setResponseReceipt] = useState<string | null>(null)
+
+  const [liveTunnels, setLiveTunnels] = useState<VxlanTunnel[]>([])
+  const [liveServers, setLiveServers] = useState<InventoryServer[]>([])
+  const [loading, setLoading] = useState(true)
+  const [failures, setFailures] = useState<NonNullable<VxlanApiResponse["failures"]>>([])
+  const [hasLoaded, setHasLoaded] = useState(false)
+  const loadEpoch = useRef(0)
+  useEffect(() => () => { loadEpoch.current += 1 }, [backendUrl, isLive])
+  const [liveError, setLiveError] = useState<string | null>(null)
+
+  const loadLive = useCallback(async () => {
+    if (!isLive) return
+    const epoch = ++loadEpoch.current
+    setLoading(true)
+    try {
+      const [tunnelsRes, serversRes] = await Promise.all([
+        requestJson<unknown>(backendUrl, "/api/vxlan"),
+        requestJson<unknown>(backendUrl, "/api/servers"),
+      ])
+      if (epoch !== loadEpoch.current) return
+      const parsedTunnels = vxlanResponseSchema.safeParse(tunnelsRes)
+      const parsedServers = vxlanServersSchema.safeParse(serversRes)
+      if (!parsedTunnels.success || !parsedServers.success) throw new Error("Некорректный ответ загрузки VXLAN")
+      const nextTunnels = parsedTunnels.data.tunnels
+      const nextServers = parsedServers.data
+      const nextFailures = parsedTunnels.data.failures
+      const failedIds = new Set(nextFailures.map(f => f.serverId))
+      const enabledIds = new Set(nextServers.filter(s => s.enabled).map(s => String(s.id)))
+      setLiveTunnels(previous => [...nextTunnels.filter(t => !failedIds.has(t.serverId)), ...previous.filter(t => failedIds.has(t.serverId) && enabledIds.has(t.serverId))])
+      setFailures(nextFailures)
+      setLiveError(null)
+      setHasLoaded(true)
+      const at = new Date().toISOString()
+      setResponseReceipt(at)
+      setReadReceipt(previous => Object.fromEntries([...enabledIds].map(id => [id, failedIds.has(id) ? previous[id] : at]).filter((entry): entry is [string, string] => !!entry[1])))
+      setLiveServers(nextServers.filter((s) => s.enabled).map(mapBackendServer))
+    } catch (e) {
+      if (epoch !== loadEpoch.current) return
+      setLiveError(e instanceof Error ? e.message : "Ошибка загрузки")
+    } finally {
+      if (epoch === loadEpoch.current) setLoading(false)
+    }
+  }, [isLive, backendUrl])
+
+  useEffect(() => {
+    if (!isLive) {
+      queueMicrotask(() => {
+        setLiveTunnels([])
+        setLiveServers([])
+        setLiveError(null)
+      })
+      return
+    }
+    queueMicrotask(() => {
+      void loadLive()
+    })
+  }, [isLive, loadLive])
+
+  const displayTunnels = isLive ? liveTunnels : mockVxlanTunnels
+  const displayServers = isLive ? liveServers : mockServers.filter((s) => s.enabled)
+
+  const effectiveServerId = selectedServerId
+
+  const scopedTunnels = useMemo(() => {
+    if (selectedTunnelId !== null) return displayTunnels.filter(t => t.serverId === effectiveServerId && t.id === selectedTunnelId)
+    if (effectiveServerId === ALL_SERVERS_ID) return displayTunnels
+    return displayTunnels.filter((t) => t.serverId === effectiveServerId)
+  }, [displayTunnels, effectiveServerId, selectedTunnelId])
+
+  const selectedTunnel = selectedTunnelId === null ? undefined : scopedTunnels[0]
+
+  const serverById = useMemo(
+    () => Object.fromEntries(displayServers.map((s) => [s.id, s])),
+    [displayServers],
+  )
+
+  const railItems = useMemo<ServerTileItem[]>(() => (
+    displayServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: isLive && (s as InventoryServer).monitoringUnknown ? undefined : s.status,
+      type: s.type,
+      enabled: s.enabled,
+      meta: `${displayTunnels.filter((t) => t.serverId === s.id).length}${isLive && (s as InventoryServer).monitoringUnknown ? " · Статус неизвестен" : ""}`,
+    }))
+  ), [displayServers, displayTunnels, isLive])
 
   const filtered = useMemo(() => {
-    if (!search) return vxlanTunnels
+    if (!search) return scopedTunnels
     const q = search.toLowerCase()
-    return vxlanTunnels.filter((t) =>
+    return scopedTunnels.filter((t) =>
       t.name.includes(q) ||
       String(t.vni).includes(q) ||
       t.vtepIp.includes(q) ||
-      (serverFor(t.serverId)?.name.toLowerCase().includes(q) ?? false)
+      (serverById[t.serverId]?.name.toLowerCase().includes(q) ?? false),
     )
-  }, [search])
+  }, [search, scopedTunnels, serverById])
 
-  const upCount = vxlanTunnels.filter((t) => t.status === "up").length
-  const vnis    = new Set(vxlanTunnels.map((t) => t.vni)).size
+  const failedServerIds = useMemo(() => !isLive ? [] : liveError ? [...new Set([...liveTunnels.map(t => t.serverId), ...liveServers.map(s => s.id)])] : failures.map(f => f.serverId), [isLive, liveError, liveTunnels, liveServers, failures])
+  const scopedFailures = failures.filter(f => effectiveServerId === ALL_SERVERS_ID || f.serverId === effectiveServerId)
+  const upCount = scopedTunnels.filter((t) => t.status === "up").length
+  const vnis = new Set(scopedTunnels.map((t) => t.vni)).size
 
   return (
-    <div className="flex flex-col h-full">
-      <PageHeader
-        crumbs={[{ label: "Управление" }, { label: "VXLAN" }]}
-        actions={
-          <Button size="sm">
-            <PlusIcon className="size-4" />Новый VXLAN
-          </Button>
-        }
-      />
-
-      <div className="flex-1 overflow-y-auto p-6">
+    <>
+    <ServerRailLayout
+      items={railItems}
+      selectedId={effectiveServerId}
+      preserveSelection
+      onSelect={onSelectServer}
+      showAll
+      allCount={displayServers.length}
+      loading={isLive && loading && displayServers.length === 0}
+      header={
+        <PageHeader
+          crumbs={[{ label: "Управление" }, { label: "VXLAN" }]}
+          actions={
+            <>
+              <ServerRailMobileButton />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => { void loadLive() }}
+                disabled={!isLive || loading}
+              >
+                <RefreshCwIcon className={cn("size-4", loading && "animate-spin")} />
+                Обновить
+              </Button>
+              <Badge variant="outline">Только просмотр</Badge>
+            </>
+          }
+        />
+      }
+    >
         <div className="flex flex-col gap-5">
+          {isLive && scopedFailures.length > 0 && <ContextAlert variant="warning" role="alert">
+            <ContextTitle>Не все устройства ответили</ContextTitle>
+            <ContextDescription>
+              <p>Не удалось опросить: {scopedFailures.map(f => f.serverName ?? f.serverId).join(", ")}. Для этих устройств сохранены последние данные; текущее состояние туннелей неизвестно.</p>
+              <Button variant="outline" size="sm" disabled={loading} onClick={() => void loadLive()}>Повторить опрос</Button>
+            </ContextDescription>
+          </ContextAlert>}
+          {selectedTunnelId !== null && (
+            <ContextAlert variant={liveError || ((!isLive || !loading) && !selectedTunnel) ? "warning" : "info"} role="status" aria-label="VXLAN по ссылке">
+              <ContextTitle className="line-clamp-none wrap-anywhere">{selectedTunnel ? "Выбран VXLAN: " + selectedTunnel.name : "VXLAN по ссылке"}</ContextTitle>
+              <ContextDescription>
+                <p className="wrap-anywhere">{isLive && loading ? "Загрузка туннеля…" : isLive && liveError ? "Не удалось обновить VXLAN. Повторите обновление; сохранённые данные могут быть устаревшими." : selectedTunnel ? (serverById[selectedServerId]?.name ?? selectedServerId) + " · VNI " + selectedTunnel.vni + ". Список и сводка ограничены выбранным туннелем." : "Туннель не получен для указанного сервера. Проверьте ссылку и доступ к устройству: туннель может отсутствовать или устройство не ответило на опрос."}</p>
+                <div className="flex flex-wrap gap-4">
+                  <Link href={allTunnelsHref} className="underline underline-offset-2">Все туннели сервера</Link>
+                  <Link href="/dashboard" className="underline underline-offset-2">К дашборду</Link>
+                </div>
+              </ContextDescription>
+            </ContextAlert>
+          )}
 
-          {/* KPI */}
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            {[
-              { label: "Туннелей",     value: vxlanTunnels.length, icon: <NetworkIcon className="size-4 text-muted-foreground" /> },
-              { label: "Активных",     value: upCount,             icon: <LayersIcon className="size-4 text-emerald-500" /> },
-              { label: "Уникальных VNI", value: vnis,              icon: <LayersIcon className="size-4 text-sky-400" /> },
-              { label: "Серверов",     value: new Set(vxlanTunnels.map((t) => t.serverId)).size, icon: <NetworkIcon className="size-4 text-violet-400" /> },
-            ].map((s) => (
-              <Card key={s.label}>
-                <CardContent className="px-5 py-4 flex items-start justify-between">
-                  <div>
-                    <p className="text-sm text-muted-foreground">{s.label}</p>
-                    <p className="text-2xl font-semibold tabular-nums mt-0.5">{s.value}</p>
-                  </div>
-                  <div className="mt-0.5">{s.icon}</div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
 
-          {/* Info banner */}
+          {isLive && liveError && selectedTunnelId === null && (
+            <Alert variant="warning" className="py-2">
+              <AlertCircleIcon />
+              <AlertDescription className="text-xs">Ошибка загрузки: {liveError}</AlertDescription>
+            </Alert>
+          )}
+          {isLive && <div role="group" aria-label="Свежесть VXLAN" className="text-xs text-muted-foreground">
+            {effectiveServerId === ALL_SERVERS_ID ? "Последний ответ получен в приложении: " : "Ответ устройства получен в приложении: "}
+            {(effectiveServerId === ALL_SERVERS_ID ? responseReceipt : readReceipt[effectiveServerId]) ? <time dateTime={(effectiveServerId === ALL_SERVERS_ID ? responseReceipt : readReceipt[effectiveServerId])!} title="Клиентское время ответа, не время измерения RouterOS">{new Date((effectiveServerId === ALL_SERVERS_ID ? responseReceipt : readReceipt[effectiveServerId])!).toLocaleString("ru-RU")}</time> : "неизвестно"}
+          </div>}
+          {isLive && loading && <p role="status" className="text-sm text-muted-foreground">{hasLoaded ? "Обновление VXLAN…" : "Загрузка VXLAN…"}</p>}
+          {isLive && liveError && hasLoaded && <p className="text-sm text-muted-foreground">Показаны последние полученные данные; они могут быть устаревшими.</p>}
+          {selectedTunnelId === null && isLive && !loading && displayTunnels.length === 0 && !liveError && scopedFailures.length === 0 && (
+            <div className="rounded-md border border-border bg-muted/30 px-4 py-6 text-center text-sm text-muted-foreground">
+              На опрошенных серверах нет VXLAN-интерфейсов
+            </div>
+          )}
+          {mode === "mock" && (
+            <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground">
+              Моковые данные
+            </span>
+          )}
+
+          <KpiStatGrid
+            aria-label="Сводка VXLAN"
+            items={[
+              {
+                id: "tunnels",
+                label: "Туннелей",
+                value: isLive && (!hasLoaded || !!liveError || scopedFailures.length > 0) ? "—" : scopedTunnels.length,
+                icon: <NetworkIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "up",
+                label: "Активных",
+                value: isLive && (!hasLoaded || !!liveError || scopedFailures.length > 0) ? "—" : upCount,
+                icon: <LayersIcon className="size-4" />,
+                iconClassName: "text-success",
+              },
+              {
+                id: "vni",
+                label: "VNI",
+                value: isLive && (!hasLoaded || !!liveError || scopedFailures.length > 0) ? "—" : vnis,
+                icon: <LayersIcon className="size-4" />,
+                iconClassName: "text-info",
+              },
+              {
+                id: "servers",
+                label: "Серверов",
+                value: isLive && (!hasLoaded || !!liveError || scopedFailures.length > 0) ? "—" : new Set(scopedTunnels.map((t) => t.serverId)).size,
+                icon: <NetworkIcon className="size-4" />,
+                iconClassName: "text-primary",
+              },
+            ]}
+          />
+
           <div className="flex items-start gap-3 rounded-lg bg-sky-500/5 border border-sky-500/20 px-4 py-3 text-sm">
             <NetworkIcon className="size-5 text-sky-500 shrink-0 mt-0.5" />
             <div>
-              <p className="font-medium text-sky-600 dark:text-sky-400">VXLAN — L2-over-L3 оверлей для RouterOS 7.x</p>
+              <p className="font-medium text-foreground">VXLAN — L2-over-L3 оверлей для RouterOS 7.x</p>
               <p className="text-muted-foreground text-xs mt-0.5">
-                Доступен с RouterOS 7.1+. VNI (Virtual Network Identifier) — уникальный идентификатор сегмента (0–16777215).
-                Рекомендуется использовать совместно с WireGuard или GRE туннелями для шифрования.
+                VXLAN переносит L2 через IP-сеть. VNI определяет сегмент; шифрование зависит от настроенного транспорта.
               </p>
             </div>
           </div>
 
-          {/* Table */}
           <DataPageCard>
             <DataPageToolbar
               search={search}
               onSearchChange={setSearch}
               searchPlaceholder="Поиск по имени, VNI, серверу…"
-              countLabel={`${filtered.length} туннелей`}
+              countLabel={isLive && !hasLoaded ? "Туннели пока неизвестны" : `${filtered.length} туннелей`}
             />
-            <VxlanDataGrid
+            {(!isLive || hasLoaded) && <VxlanDataGrid
               tunnels={filtered}
-              servers={servers}
-              onExport={setExportTunnel}
-            />
+              failedServerIds={failedServerIds}
+              servers={displayServers}
+              onExport={tunnel => setExportSnapshot({ tunnel, servers: serverById, at: isLive ? readReceipt[tunnel.serverId] ?? null : null, stale: isLive && (!!liveError || failedServerIds.includes(tunnel.serverId)), mock: !isLive })}
+            />}
           </DataPageCard>
 
-          {/* Reference */}
-          <Card>
-            <CardContent className="px-5 py-4">
-              <p className="text-xs font-medium text-muted-foreground mb-3">
-                RouterOS 7 · /interface/vxlan — быстрые команды
-              </p>
-              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
-                {[
-                  {
-                    title: "Создать VXLAN",
-                    lines: [
-                      "/interface/vxlan/add \\",
-                      "  name=vxlan-10 \\",
-                      "  vni=10010 \\",
-                      "  port=8472 \\",
-                      "  arp-proxy=yes \\",
-                      "  mac-learning=yes",
-                    ],
-                  },
-                  {
-                    title: "Добавить VTEP",
-                    lines: [
-                      "/interface/vxlan/vteps/add \\",
-                      "  interface=vxlan-10 \\",
-                      "  remote-ip=10.0.1.1",
-                      "",
-                      "/interface/vxlan/vteps/add \\",
-                      "  interface=vxlan-10 \\",
-                      "  remote-ip=10.0.2.1",
-                    ],
-                  },
-                  {
-                    title: "Bridge + IP",
-                    lines: [
-                      "/interface/bridge/add \\",
-                      "  name=br-overlay",
-                      "",
-                      "/interface/bridge/port/add \\",
-                      "  bridge=br-overlay \\",
-                      "  interface=vxlan-10",
-                      "",
-                      "/ip/address/add \\",
-                      "  address=10.100.0.1/24 \\",
-                      "  interface=br-overlay",
-                    ],
-                  },
-                ].map((b) => (
-                  <div key={b.title}>
-                    <p className="font-sans font-semibold text-foreground/80 mb-1.5 text-[11px] uppercase tracking-wide">{b.title}</p>
-                    <pre className="bg-zinc-950 rounded-md p-2.5 text-zinc-300 text-[11px] leading-relaxed overflow-x-auto whitespace-pre">
-                      {b.lines.join("\n")}
-                    </pre>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
+          <OpsPanel title="Справка VXLAN" contentClassName="px-5 py-4">
+            <p className="text-xs text-muted-foreground">Экспорт содержит интерфейс, известный MTU и статические VTEP выбранного туннеля. IP-адреса, bridge и FDB в него не входят. <a href="https://help.mikrotik.com/docs/spaces/ROS/pages/100007937/VXLAN" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">Параметры VXLAN в документации MikroTik</a></p>
+          </OpsPanel>
 
         </div>
-      </div>
+    </ServerRailLayout>
 
       <ExportSheet
-        open={!!exportTunnel}
-        tunnel={exportTunnel}
-        onClose={() => setExportTunnel(null)}
+        open={!!exportSnapshot}
+        tunnel={exportSnapshot?.tunnel ?? null}
+        onClose={() => setExportSnapshot(null)}
+        serverById={exportSnapshot?.servers ?? {}}
+        receivedAt={exportSnapshot?.at ?? null}
+        stale={exportSnapshot?.stale ?? false}
+        mock={exportSnapshot?.mock ?? !isLive}
       />
-    </div>
+    </>
   )
 }
+
+function VxlanRoute() {
+  const { mode, backendUrl } = useDataSource()
+  const params = useSearchParams()
+  const router = useRouter()
+  const serverId = params.get("server") ?? ALL_SERVERS_ID
+  const tunnelId = params.get("tunnel")
+  const rest = new URLSearchParams(params.toString())
+  rest.delete("tunnel")
+  const allTunnelsHref = "/vxlan" + (rest.size ? "?" + rest.toString() : "")
+  return <VxlanPageContent key={JSON.stringify([serverId, tunnelId, mode, backendUrl])} selectedServerId={serverId} selectedTunnelId={tunnelId} allTunnelsHref={allTunnelsHref} onSelectServer={id => {
+    const next = new URLSearchParams(rest)
+    if (id === ALL_SERVERS_ID) next.delete("server")
+    else next.set("server", id)
+    router.push("/vxlan" + (next.size ? "?" + next.toString() : ""))
+  }} />
+}
+
+export default function VxlanPage() {
+  return <Suspense fallback={<div role="status">Загрузка VXLAN…</div>}><VxlanRoute /></Suspense>
+}

app/access-denied/page.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+export default function AccessDeniedPage() {
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-3 p-6 text-center">
+      <h1 className="text-lg font-semibold">Нет доступа</h1>
+      <p className="text-muted-foreground max-w-md text-sm">
+        У вашей учётной записи нет приложения MikrotikManager (`mm`) или
+        необходимых прав. Обратитесь к администратору auth-portal.
+      </p>
+      <a
+        href="/auth/callback"
+        className="text-primary text-sm underline-offset-4 hover:underline"
+      >
+        Войти снова
+      </a>
+    </div>
+  )
+}

app/auth/callback/page.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import {
+  clearPortalHandoffFlag,
+  clearToken,
+  can,
+  ensureAuthConfig,
+  firstAllowedPath,
+  getClaims,
+  getToken,
+  parseHashToken,
+  permissionForPath,
+  redirectToPortalLogin,
+  redirectToPortalLoginInteractive,
+  setToken,
+} from "@/lib/auth"
+import { permittedAuthReturnPath } from "@/lib/auth-return-path"
+
+export default function AuthCallbackPage() {
+  const router = useRouter()
+  const [message, setMessage] = useState("Перенаправление на Auth Portal…")
+
+  useEffect(() => {
+    let cancelled = false
+
+    void (async () => {
+      await ensureAuthConfig()
+      if (cancelled) return
+
+      const params = new URLSearchParams(window.location.search)
+      const error = params.get("error")
+      const returnPath = () => permittedAuthReturnPath(params.get("next"), pathname => {
+        const permission = permissionForPath(pathname)
+        return !permission || can(permission)
+      }, firstAllowedPath())
+      if (error === "sso_loop" || error === "jwt_rejected") {
+        redirectToPortalLoginInteractive()
+        return
+      }
+
+      const { accessToken } = parseHashToken(window.location.hash)
+      if (accessToken) {
+        setToken(accessToken)
+        clearPortalHandoffFlag()
+        const claims = getClaims()
+        if (!claims) {
+          clearToken()
+          redirectToPortalLoginInteractive()
+          return
+        }
+        if (!claims.apps.includes("mm")) {
+          setMessage("Нет доступа к приложению")
+          router.replace("/access-denied")
+          return
+        }
+
+        try {
+          const res = await fetch("/api/auth/config", {
+            headers: { Authorization: `Bearer ${accessToken}` },
+          })
+          if (res.status === 401) {
+            clearToken()
+            redirectToPortalLoginInteractive()
+            return
+          }
+        } catch {
+          /* ignore network — proceed */
+        }
+
+        const next = returnPath()
+        if (next === "/access-denied") {
+          router.replace("/access-denied")
+          return
+        }
+        router.replace(next)
+        return
+      }
+
+      if (getToken() && getClaims()) {
+        clearPortalHandoffFlag()
+        if (!getClaims()!.apps.includes("mm")) {
+          router.replace("/access-denied")
+          return
+        }
+        router.replace(returnPath())
+        return
+      }
+
+      const callback = new URL(`${window.location.origin}/auth/callback`)
+      if (params.get("next")) callback.searchParams.set("next", params.get("next")!)
+      const ok = redirectToPortalLogin(callback.toString())
+      if (!ok) redirectToPortalLoginInteractive()
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [router])
+
+  return (
+    <div className="text-muted-foreground flex min-h-svh items-center justify-center p-6 text-sm">
+      {message}
+    </div>
+  )
+}

backend/.env.example

@@ -1,8 +1,19 @@
-# Path to SQLite database file
+# PostgreSQL connection string
+DATABASE_URL=postgres://mmapp:[email protected]:5432/mmapp
+
+# SQLite file used only for one-shot boot ETL (empty PG + existing mikrotik.db)
 DATABASE_PATH=./mikrotik.db
+# SQLITE_IMPORT_FULL_HISTORY=true
 
 # Port for the Fastify server
 PORT=8000
 
 # Allowed CORS origin (Next.js frontend)
 CORS_ORIGIN=http://localhost:3000
+
+# Portal SSO (false = open API for local/dev)
+AUTH_REQUIRED=false
+# Same HS256 secret as auth-portal JWT_SECRET when AUTH_REQUIRED=true
+AUTH_JWT_SECRET=dev-secret-change-me
+AUTH_ISSUER=https://auth.shnt.top
+AUTH_PORTAL_URL=http://localhost:5175

backend/.gitignore

@@ -5,3 +5,4 @@ dist/
 *.db-wal
 .env
 storage/backups/
+storage/geoip/

backend/Dockerfile

@@ -5,10 +5,23 @@ RUN apt-get update \
   && apt-get install -y --no-install-recommends python3 make g++ \
   && rm -rf /var/lib/apt/lists/*
 WORKDIR /app
+# Do not set NODE_ENV=production here — npm would omit typescript needed for the build stage.
 COPY package.json package-lock.json ./
 COPY packages/contracts/package.json packages/contracts/
 COPY backend/package.json backend/
-RUN npm ci --workspace=@mmapp/contracts --workspace=mikrotik-manager-backend --include-workspace-root --ignore-scripts \
+# Drop root frontend deps (Next/React/UI) so backend image stays lean.
+RUN node -e "\
+  const fs=require('fs');\
+  const p=JSON.parse(fs.readFileSync('package.json','utf8'));\
+  p.dependencies={};\
+  p.devDependencies={};\
+  delete p.scripts;\
+  p.workspaces=['packages/*','backend'];\
+  fs.writeFileSync('package.json', JSON.stringify(p,null,2)+'\\n');\
+"
+# Prefer npm ci; if lockfile rejects stripped root package.json, fall back to install.
+RUN (npm ci --workspace=@mmapp/contracts --workspace=mikrotik-manager-backend --ignore-scripts \
+  || npm install --workspace=@mmapp/contracts --workspace=mikrotik-manager-backend --ignore-scripts) \
   && npm rebuild better-sqlite3
 
 FROM deps AS build
@@ -18,10 +31,21 @@ COPY packages/contracts packages/contracts
 COPY backend backend
 RUN npm run build -w @mmapp/contracts \
   && npm run build -w mikrotik-manager-backend \
-  && npm prune --omit=dev
+  && npm prune --omit=dev \
+  # npm may nest workspace deps (e.g. dotenv) under backend/node_modules — keep dir for COPY
+  && mkdir -p backend/node_modules
 
 FROM node:22-bookworm-slim AS runner
 WORKDIR /app
+# Keep system packages independent of application changes and version tags.
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends gnupg wget ca-certificates \
+  && wget -qO- https://www.postgresql.org/media/keys/ACCC4CF8.asc | gpg --dearmor -o /usr/share/keyrings/pgdg.gpg \
+  && echo "deb [signed-by=/usr/share/keyrings/pgdg.gpg] http://apt.postgresql.org/pub/repos/apt bookworm-pgdg main" > /etc/apt/sources.list.d/pgdg.list \
+  && apt-get update \
+  && apt-get install -y --no-install-recommends postgresql-client-18 \
+  && rm -rf /var/lib/apt/lists/* \
+  && mkdir -p /app/data
 ARG APP_VERSION=dev
 ENV NODE_ENV=production
 ENV PORT=8000
@@ -32,6 +56,8 @@ COPY --from=build /app/node_modules ./node_modules
 COPY --from=build /app/packages/contracts ./packages/contracts
 COPY --from=build /app/backend/dist ./backend/dist
 COPY --from=build /app/backend/package.json ./backend/package.json
-RUN mkdir -p /app/data
+COPY --from=build /app/backend/drizzle ./backend/drizzle
+# Nested install from lockfile (dotenv etc.) — ESM resolves from /app/backend/dist → ../node_modules
+COPY --from=build /app/backend/node_modules ./backend/node_modules
 EXPOSE 8000
 CMD ["node", "backend/dist/index.js"]

backend/drizzle.config.ts

@@ -6,9 +6,9 @@ config()
 export default defineConfig({
   schema: "./src/db/schema.ts",
   out: "./drizzle",
-  dialect: "sqlite",
+  dialect: "postgresql",
   dbCredentials: {
-    url: process.env.DATABASE_PATH ?? "./mikrotik.db",
+    url: process.env.DATABASE_URL ?? "postgres://mmapp:[email protected]:5432/mmapp",
   },
   verbose: true,
   strict: true,

backend/drizzle/0000_living_xorn.sql

@@ -1,36 +0,0 @@
-CREATE TABLE `server_snapshots` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`server_id` integer NOT NULL,
-	`polled_at` text NOT NULL,
-	`status` text NOT NULL,
-	`latency_ms` real,
-	`ros_version` text,
-	`board_name` text,
-	`uptime` text,
-	`cpu_load` integer,
-	`free_memory` integer,
-	`total_memory` integer,
-	`identity_name` text,
-	`raw_interfaces` text,
-	`raw_ip_addresses` text,
-	FOREIGN KEY (`server_id`) REFERENCES `servers`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `servers` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`name` text DEFAULT '' NOT NULL,
-	`host` text NOT NULL,
-	`port` integer DEFAULT 443 NOT NULL,
-	`username` text DEFAULT 'admin' NOT NULL,
-	`password` text DEFAULT '' NOT NULL,
-	`use_ssl` integer DEFAULT true NOT NULL,
-	`verify_ssl` integer DEFAULT false NOT NULL,
-	`type` text DEFAULT 'home-router' NOT NULL,
-	`site` text DEFAULT '' NOT NULL,
-	`country` text DEFAULT '' NOT NULL,
-	`asn` text DEFAULT '' NOT NULL,
-	`comment` text DEFAULT '' NOT NULL,
-	`enabled` integer DEFAULT true NOT NULL,
-	`created_at` text DEFAULT (datetime('now')) NOT NULL,
-	`updated_at` text DEFAULT (datetime('now')) NOT NULL
-);

backend/drizzle/0000_postgresql.sql

@@ -0,0 +1,626 @@
+-- MikrotikManager PostgreSQL 18 schema (not 1:1 SQLite).
+-- Applied once at backend boot via src/db/migrate.ts
+
+CREATE TABLE IF NOT EXISTS schema_migrations (
+  id TEXT PRIMARY KEY,
+  applied_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS servers (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
+  name TEXT NOT NULL DEFAULT '',
+  host TEXT NOT NULL,
+  port INTEGER NOT NULL DEFAULT 443,
+  username TEXT NOT NULL DEFAULT 'admin',
+  password TEXT NOT NULL DEFAULT '',
+  use_ssl BOOLEAN NOT NULL DEFAULT TRUE,
+  verify_ssl BOOLEAN NOT NULL DEFAULT FALSE,
+  type TEXT NOT NULL DEFAULT 'home-router'
+    CHECK (type IN ('jump-host', 'exit-node', 'home-router')),
+  site TEXT NOT NULL DEFAULT '',
+  country TEXT NOT NULL DEFAULT '',
+  asn TEXT NOT NULL DEFAULT '',
+  comment TEXT NOT NULL DEFAULT '',
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  lan_subnet TEXT NOT NULL DEFAULT '',
+  wan_uplinks JSONB NOT NULL DEFAULT '[]'::jsonb,
+  mgmt_tunnel_ip TEXT NOT NULL DEFAULT '',
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS traffic_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  interval_sec INTEGER NOT NULL DEFAULT 30,
+  retention_days INTEGER NOT NULL DEFAULT 14,
+  last_collected_at TIMESTAMPTZ,
+  last_duration_ms INTEGER,
+  last_error TEXT,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS servers_api_ping_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  enabled BOOLEAN NOT NULL DEFAULT FALSE,
+  interval_sec INTEGER NOT NULL DEFAULT 120,
+  last_collected_at TIMESTAMPTZ,
+  last_duration_ms INTEGER,
+  last_error TEXT,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS traffic_flow_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  enabled BOOLEAN NOT NULL DEFAULT FALSE,
+  collector_ip TEXT NOT NULL DEFAULT '10.255.254.1',
+  flow_listen_port INTEGER NOT NULL DEFAULT 4739,
+  wg_listen_port INTEGER NOT NULL DEFAULT 51821,
+  prefix TEXT NOT NULL DEFAULT '10.255.254.0/24',
+  public_endpoint TEXT NOT NULL DEFAULT '',
+  host_public_key TEXT NOT NULL DEFAULT '',
+  host_private_key TEXT NOT NULL DEFAULT '',
+  hub_server_id BIGINT,
+  retention_hours INTEGER NOT NULL DEFAULT 24,
+  top_n INTEGER NOT NULL DEFAULT 200,
+  map_service_min_share_pct DOUBLE PRECISION NOT NULL DEFAULT 5,
+  last_datagram_at TIMESTAMPTZ,
+  last_exporter_ip TEXT,
+  last_error TEXT,
+  packets_received BIGINT NOT NULL DEFAULT 0,
+  peers_json JSONB NOT NULL DEFAULT '[]'::jsonb,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS uptime_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  resources_enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  ping_enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  speed_enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  interval_sec INTEGER NOT NULL DEFAULT 15,
+  probe_interval_sec INTEGER NOT NULL DEFAULT 15,
+  speed_interval_sec INTEGER NOT NULL DEFAULT 60,
+  retention_days INTEGER NOT NULL DEFAULT 14,
+  last_collected_at TIMESTAMPTZ,
+  last_duration_ms INTEGER,
+  last_error TEXT,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS evobgp_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  base_url TEXT NOT NULL DEFAULT '',
+  api_key TEXT NOT NULL DEFAULT '',
+  enabled BOOLEAN NOT NULL DEFAULT FALSE,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS alert_telegram_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  bot_token TEXT NOT NULL DEFAULT '',
+  chat_id TEXT NOT NULL DEFAULT '',
+  message_thread_id INTEGER,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS acme_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  directory_url TEXT NOT NULL DEFAULT 'https://acme-v02.api.letsencrypt.org/directory',
+  cloudflare_api_token TEXT NOT NULL DEFAULT '',
+  default_zone_id TEXT NOT NULL DEFAULT '',
+  account_private_key TEXT NOT NULL DEFAULT '',
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS certificate_renew_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  interval_sec INTEGER NOT NULL DEFAULT 21600,
+  renew_before_days INTEGER NOT NULL DEFAULT 30,
+  last_collected_at TIMESTAMPTZ,
+  last_duration_ms INTEGER,
+  last_error TEXT,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS backup_schedule_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  frequency TEXT NOT NULL DEFAULT 'daily' CHECK (frequency IN ('daily', 'weekly', 'monthly')),
+  hour INTEGER NOT NULL DEFAULT 3,
+  minute INTEGER NOT NULL DEFAULT 0,
+  week_day INTEGER NOT NULL DEFAULT 0,
+  month_day INTEGER NOT NULL DEFAULT 1,
+  keep_count INTEGER NOT NULL DEFAULT 7,
+  format TEXT NOT NULL DEFAULT 'rsc' CHECK (format IN ('rsc', 'backup')),
+  server_ids_json JSONB NOT NULL DEFAULT '[]'::jsonb,
+  last_run_at TIMESTAMPTZ,
+  last_duration_ms INTEGER,
+  last_error TEXT,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS internet_path_settings (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  interval_sec INTEGER NOT NULL DEFAULT 300,
+  retention_days INTEGER NOT NULL DEFAULT 14,
+  last_collected_at TIMESTAMPTZ,
+  last_duration_ms INTEGER,
+  last_error TEXT,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS alert_engine_cursor (
+  id BIGINT PRIMARY KEY CHECK (id = 1),
+  last_source_finished_at TIMESTAMPTZ,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS data_migration (
+  id INTEGER PRIMARY KEY CHECK (id = 1),
+  sqlite_imported_at TIMESTAMPTZ,
+  sqlite_path TEXT,
+  sqlite_sha256 TEXT,
+  report_json JSONB
+);
+
+CREATE TABLE IF NOT EXISTS filter_rules (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  sort_order INTEGER NOT NULL DEFAULT 0,
+  community TEXT NOT NULL,
+  community_name TEXT,
+  action TEXT NOT NULL DEFAULT 'route' CHECK (action IN ('route', 'blackhole')),
+  gateway TEXT NOT NULL DEFAULT '',
+  gateway_tunnel_id TEXT NOT NULL DEFAULT '',
+  description TEXT NOT NULL DEFAULT '',
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+CREATE INDEX IF NOT EXISTS idx_filter_rules_server_sort ON filter_rules(server_id, sort_order);
+
+CREATE TABLE IF NOT EXISTS recursive_routes (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  sort_order INTEGER NOT NULL DEFAULT 0,
+  dst_address TEXT NOT NULL,
+  gateway TEXT NOT NULL,
+  distance INTEGER NOT NULL DEFAULT 1,
+  scope INTEGER,
+  target_scope INTEGER,
+  routing_table TEXT NOT NULL DEFAULT 'main',
+  check_gateway TEXT NOT NULL DEFAULT '',
+  country TEXT NOT NULL DEFAULT '',
+  comment TEXT NOT NULL DEFAULT '',
+  disabled BOOLEAN NOT NULL DEFAULT FALSE,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+CREATE INDEX IF NOT EXISTS idx_recursive_routes_server_sort ON recursive_routes(server_id, sort_order);
+
+CREATE TABLE IF NOT EXISTS server_snapshots (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY,
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  polled_at TIMESTAMPTZ NOT NULL,
+  status TEXT NOT NULL CHECK (status IN ('online', 'offline')),
+  latency_ms DOUBLE PRECISION,
+  ros_version TEXT,
+  board_name TEXT,
+  uptime TEXT,
+  cpu_load INTEGER,
+  free_memory BIGINT,
+  total_memory BIGINT,
+  identity_name TEXT,
+  raw_interfaces JSONB,
+  raw_ip_addresses JSONB,
+  PRIMARY KEY (id, polled_at)
+) PARTITION BY RANGE (polled_at);
+CREATE INDEX IF NOT EXISTS idx_server_snapshots_server_time ON server_snapshots(server_id, polled_at);
+CREATE INDEX IF NOT EXISTS idx_server_snapshots_polled_brin ON server_snapshots USING BRIN (polled_at);
+
+CREATE TABLE IF NOT EXISTS traffic_samples (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY,
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  interface_name TEXT NOT NULL,
+  peer_public_key TEXT NOT NULL DEFAULT '',
+  sampled_at TIMESTAMPTZ NOT NULL,
+  rx_bytes BIGINT NOT NULL DEFAULT 0,
+  tx_bytes BIGINT NOT NULL DEFAULT 0,
+  rx_bps BIGINT NOT NULL DEFAULT 0,
+  tx_bps BIGINT NOT NULL DEFAULT 0,
+  running BOOLEAN NOT NULL DEFAULT FALSE,
+  disabled BOOLEAN NOT NULL DEFAULT FALSE,
+  PRIMARY KEY (id, sampled_at)
+) PARTITION BY RANGE (sampled_at);
+CREATE INDEX IF NOT EXISTS idx_traffic_samples_server_time ON traffic_samples(server_id, sampled_at);
+CREATE INDEX IF NOT EXISTS idx_traffic_samples_server_iface_time ON traffic_samples(server_id, interface_name, sampled_at);
+CREATE INDEX IF NOT EXISTS idx_traffic_samples_sampled_brin ON traffic_samples USING BRIN (sampled_at);
+
+CREATE TABLE IF NOT EXISTS servers_rest_ping_samples (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY,
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  sampled_at TIMESTAMPTZ NOT NULL,
+  ok BOOLEAN NOT NULL,
+  latency_ms INTEGER,
+  error TEXT,
+  PRIMARY KEY (id, sampled_at)
+) PARTITION BY RANGE (sampled_at);
+CREATE INDEX IF NOT EXISTS idx_servers_rest_ping_samples_server_id ON servers_rest_ping_samples(server_id, sampled_at);
+CREATE INDEX IF NOT EXISTS idx_servers_rest_ping_samples_brin ON servers_rest_ping_samples USING BRIN (sampled_at);
+
+CREATE TABLE IF NOT EXISTS flow_buckets (
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  bucket_at TIMESTAMPTZ NOT NULL,
+  src TEXT NOT NULL,
+  dst TEXT NOT NULL,
+  proto INTEGER NOT NULL DEFAULT 0,
+  src_port INTEGER NOT NULL DEFAULT 0,
+  dst_port INTEGER NOT NULL DEFAULT 0,
+  bytes BIGINT NOT NULL DEFAULT 0,
+  packets BIGINT NOT NULL DEFAULT 0,
+  in_iface TEXT NOT NULL DEFAULT '',
+  out_iface TEXT NOT NULL DEFAULT '',
+  next_hop TEXT NOT NULL DEFAULT '',
+  flow_start_ms BIGINT NOT NULL DEFAULT 0,
+  flow_end_ms BIGINT NOT NULL DEFAULT 0,
+  PRIMARY KEY (server_id, bucket_at, src, dst, proto, src_port, dst_port, in_iface)
+) PARTITION BY RANGE (bucket_at);
+CREATE INDEX IF NOT EXISTS idx_flow_buckets_server_time ON flow_buckets(server_id, bucket_at);
+CREATE INDEX IF NOT EXISTS idx_flow_buckets_bucket_brin ON flow_buckets USING BRIN (bucket_at);
+
+CREATE TABLE IF NOT EXISTS flow_minute_stats (
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  bucket_at TIMESTAMPTZ NOT NULL,
+  bytes BIGINT NOT NULL DEFAULT 0,
+  packets BIGINT NOT NULL DEFAULT 0,
+  unique_src INTEGER NOT NULL DEFAULT 0,
+  unique_dst INTEGER NOT NULL DEFAULT 0,
+  conversations INTEGER NOT NULL DEFAULT 0,
+  PRIMARY KEY (server_id, bucket_at)
+) PARTITION BY RANGE (bucket_at);
+CREATE INDEX IF NOT EXISTS idx_flow_minute_stats_brin ON flow_minute_stats USING BRIN (bucket_at);
+
+CREATE TABLE IF NOT EXISTS flow_minute_dims (
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  bucket_at TIMESTAMPTZ NOT NULL,
+  dim TEXT NOT NULL,
+  key TEXT NOT NULL,
+  bytes BIGINT NOT NULL DEFAULT 0,
+  packets BIGINT NOT NULL DEFAULT 0,
+  PRIMARY KEY (server_id, bucket_at, dim, key)
+) PARTITION BY RANGE (bucket_at);
+CREATE INDEX IF NOT EXISTS idx_flow_minute_dims_time ON flow_minute_dims(bucket_at, dim);
+CREATE INDEX IF NOT EXISTS idx_flow_minute_dims_brin ON flow_minute_dims USING BRIN (bucket_at);
+
+CREATE TABLE IF NOT EXISTS flow_daily_dims (
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  day DATE NOT NULL,
+  dim TEXT NOT NULL,
+  key TEXT NOT NULL,
+  bytes BIGINT NOT NULL DEFAULT 0,
+  packets BIGINT NOT NULL DEFAULT 0,
+  PRIMARY KEY (server_id, day, dim, key)
+) PARTITION BY RANGE (day);
+CREATE INDEX IF NOT EXISTS idx_flow_daily_dims_day ON flow_daily_dims(day, dim);
+
+CREATE TABLE IF NOT EXISTS flow_ip_meta (
+  prefix TEXT PRIMARY KEY,
+  asn INTEGER NOT NULL DEFAULT 0,
+  country TEXT NOT NULL DEFAULT '',
+  lat DOUBLE PRECISION,
+  lng DOUBLE PRECISION,
+  holder TEXT NOT NULL DEFAULT '',
+  ok INTEGER NOT NULL DEFAULT 1,
+  fetched_at TIMESTAMPTZ NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS flow_asn_meta (
+  asn INTEGER PRIMARY KEY,
+  holder TEXT NOT NULL DEFAULT '',
+  fetched_at TIMESTAMPTZ NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS uptime_probes (
+  id TEXT PRIMARY KEY,
+  src_server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  src_interface TEXT NOT NULL DEFAULT '',
+  name TEXT NOT NULL,
+  target TEXT NOT NULL,
+  probe_filter TEXT NOT NULL DEFAULT '—',
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  interval_sec INTEGER NOT NULL DEFAULT 0,
+  show_on_dashboard BOOLEAN NOT NULL DEFAULT FALSE,
+  sort_order INTEGER NOT NULL DEFAULT 0,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+CREATE INDEX IF NOT EXISTS idx_uptime_probes_server_sort ON uptime_probes(src_server_id, sort_order);
+
+CREATE TABLE IF NOT EXISTS uptime_probe_samples (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY,
+  probe_id TEXT NOT NULL REFERENCES uptime_probes(id) ON DELETE CASCADE,
+  sampled_at TIMESTAMPTZ NOT NULL,
+  rtt_ms INTEGER,
+  loss_pct INTEGER NOT NULL DEFAULT 0,
+  status TEXT NOT NULL DEFAULT 'down' CHECK (status IN ('up', 'warn', 'down')),
+  PRIMARY KEY (id, sampled_at)
+) PARTITION BY RANGE (sampled_at);
+CREATE INDEX IF NOT EXISTS idx_uptime_probe_samples_probe_time ON uptime_probe_samples(probe_id, sampled_at);
+CREATE INDEX IF NOT EXISTS idx_uptime_probe_samples_brin ON uptime_probe_samples USING BRIN (sampled_at);
+
+CREATE TABLE IF NOT EXISTS uptime_resource_samples (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY,
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  sampled_at TIMESTAMPTZ NOT NULL,
+  status TEXT NOT NULL DEFAULT 'offline' CHECK (status IN ('online', 'offline')),
+  cpu_load INTEGER NOT NULL DEFAULT 0,
+  free_memory BIGINT NOT NULL DEFAULT 0,
+  total_memory BIGINT NOT NULL DEFAULT 0,
+  free_hdd_space BIGINT NOT NULL DEFAULT 0,
+  total_hdd_space BIGINT NOT NULL DEFAULT 0,
+  uptime_seconds BIGINT NOT NULL DEFAULT 0,
+  board_name TEXT NOT NULL DEFAULT '',
+  ros_version TEXT NOT NULL DEFAULT '',
+  PRIMARY KEY (id, sampled_at)
+) PARTITION BY RANGE (sampled_at);
+CREATE INDEX IF NOT EXISTS idx_uptime_resource_samples_server_time ON uptime_resource_samples(server_id, sampled_at);
+CREATE INDEX IF NOT EXISTS idx_uptime_resource_samples_brin ON uptime_resource_samples USING BRIN (sampled_at);
+
+CREATE TABLE IF NOT EXISTS uptime_speed_probes (
+  id TEXT PRIMARY KEY,
+  src_server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  dst_server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  src_interface TEXT NOT NULL DEFAULT '',
+  dst_interface TEXT NOT NULL DEFAULT '',
+  protocol TEXT NOT NULL DEFAULT 'tcp' CHECK (protocol IN ('tcp', 'udp')),
+  direction TEXT NOT NULL DEFAULT 'both' CHECK (direction IN ('transmit', 'receive', 'both')),
+  duration_sec INTEGER NOT NULL DEFAULT 10,
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  last_run_at TIMESTAMPTZ,
+  last_tx_avg_mbps DOUBLE PRECISION,
+  last_rx_avg_mbps DOUBLE PRECISION,
+  last_status TEXT CHECK (last_status IN ('done', 'error')),
+  last_error TEXT,
+  last_ping_rtt_ms INTEGER,
+  last_ping_loss_pct INTEGER,
+  last_ping_at TIMESTAMPTZ,
+  last_ping_error TEXT,
+  sort_order INTEGER NOT NULL DEFAULT 0,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+CREATE INDEX IF NOT EXISTS idx_uptime_speed_probes_src_sort ON uptime_speed_probes(src_server_id, sort_order);
+
+CREATE TABLE IF NOT EXISTS uptime_speed_test_runs (
+  id TEXT PRIMARY KEY,
+  probe_id TEXT,
+  src_server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  dst_server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  src_interface TEXT NOT NULL DEFAULT '',
+  dst_interface TEXT NOT NULL DEFAULT '',
+  src_address TEXT,
+  dst_address TEXT,
+  src_interface_address TEXT,
+  dst_interface_address TEXT,
+  protocol TEXT NOT NULL DEFAULT 'tcp' CHECK (protocol IN ('tcp', 'udp')),
+  direction TEXT NOT NULL DEFAULT 'both' CHECK (direction IN ('transmit', 'receive', 'both')),
+  duration_sec INTEGER NOT NULL DEFAULT 10,
+  tx_avg_mbps DOUBLE PRECISION,
+  rx_avg_mbps DOUBLE PRECISION,
+  ping_rtt_ms INTEGER,
+  ping_loss_pct INTEGER,
+  ping_error TEXT,
+  status TEXT NOT NULL DEFAULT 'done' CHECK (status IN ('done', 'error')),
+  error TEXT,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+CREATE INDEX IF NOT EXISTS idx_uptime_speed_test_runs_created_at ON uptime_speed_test_runs(created_at);
+
+CREATE TABLE IF NOT EXISTS certificate_issue_jobs (
+  id TEXT PRIMARY KEY,
+  status TEXT NOT NULL DEFAULT 'queued' CHECK (status IN ('queued', 'running', 'done', 'failed')),
+  step TEXT NOT NULL DEFAULT 'queued',
+  source TEXT NOT NULL DEFAULT 'manual' CHECK (source IN ('manual', 'scheduler')),
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  cert_name TEXT NOT NULL,
+  domain_names JSONB NOT NULL,
+  key_type TEXT NOT NULL DEFAULT 'rsa2048',
+  trust_store TEXT NOT NULL DEFAULT 'www,api',
+  requested_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  started_at TIMESTAMPTZ,
+  finished_at TIMESTAMPTZ,
+  error TEXT
+);
+
+CREATE TABLE IF NOT EXISTS backup_entries (
+  id TEXT PRIMARY KEY,
+  server_id BIGINT REFERENCES servers(id) ON DELETE SET NULL,
+  server_name TEXT NOT NULL,
+  filename TEXT NOT NULL,
+  size_bytes BIGINT NOT NULL,
+  kind TEXT NOT NULL DEFAULT 'manual' CHECK (kind IN ('manual', 'auto')),
+  notes TEXT,
+  created_at TIMESTAMPTZ NOT NULL
+);
+CREATE UNIQUE INDEX IF NOT EXISTS idx_backup_entries_filename ON backup_entries(filename);
+CREATE INDEX IF NOT EXISTS idx_backup_entries_server_created ON backup_entries(server_id, created_at);
+
+CREATE TABLE IF NOT EXISTS alert_groups (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  combine_mode TEXT NOT NULL DEFAULT 'any' CHECK (combine_mode IN ('any', 'all')),
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  cooldown_override TEXT,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS alert_rules (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  type TEXT NOT NULL,
+  target TEXT NOT NULL,
+  condition TEXT NOT NULL,
+  severity TEXT NOT NULL CHECK (severity IN ('critical', 'warning', 'info')),
+  enabled BOOLEAN NOT NULL DEFAULT TRUE,
+  cooldown TEXT NOT NULL DEFAULT '5м',
+  rule_chat_id TEXT NOT NULL DEFAULT '',
+  confirm_stability_sec INTEGER,
+  recovery_mode TEXT NOT NULL DEFAULT 'always' CHECK (recovery_mode IN ('always', 'never', 'conditional')),
+  recovery_stability_sec INTEGER,
+  group_id TEXT REFERENCES alert_groups(id) ON DELETE SET NULL,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS alert_rule_targets (
+  id TEXT PRIMARY KEY,
+  rule_id TEXT NOT NULL REFERENCES alert_rules(id) ON DELETE CASCADE,
+  target TEXT NOT NULL,
+  sort_index INTEGER NOT NULL DEFAULT 0
+);
+CREATE INDEX IF NOT EXISTS idx_alert_rule_targets_rule ON alert_rule_targets(rule_id);
+
+CREATE TABLE IF NOT EXISTS alert_rule_conditions (
+  id TEXT PRIMARY KEY,
+  rule_id TEXT NOT NULL REFERENCES alert_rules(id) ON DELETE CASCADE,
+  condition_line TEXT NOT NULL,
+  sort_index INTEGER NOT NULL DEFAULT 0
+);
+CREATE INDEX IF NOT EXISTS idx_alert_rule_conditions_rule ON alert_rule_conditions(rule_id);
+
+CREATE TABLE IF NOT EXISTS alert_engine_state (
+  scope_key TEXT PRIMARY KEY,
+  last_fired_at TEXT NOT NULL DEFAULT '',
+  last_payload_hash TEXT
+);
+
+CREATE TABLE IF NOT EXISTS alert_engine_prev_live (
+  kind TEXT PRIMARY KEY CHECK (kind IN ('gre', 'bgp')),
+  payload_json JSONB NOT NULL DEFAULT '{}'::jsonb,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS alert_engine_confirm_pending (
+  rule_id TEXT PRIMARY KEY,
+  payload_hash TEXT NOT NULL,
+  since_at TIMESTAMPTZ NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS alert_history (
+  id TEXT PRIMARY KEY,
+  rule_id TEXT,
+  group_id TEXT,
+  rule_name TEXT NOT NULL,
+  severity TEXT NOT NULL CHECK (severity IN ('critical', 'warning', 'info')),
+  message TEXT NOT NULL,
+  sent_ok BOOLEAN NOT NULL DEFAULT TRUE,
+  fired_at TIMESTAMPTZ NOT NULL
+);
+CREATE INDEX IF NOT EXISTS idx_alert_history_fired_at ON alert_history(fired_at);
+CREATE INDEX IF NOT EXISTS idx_alert_history_rule_id ON alert_history(rule_id);
+
+CREATE TABLE IF NOT EXISTS alert_outbox (
+  id TEXT PRIMARY KEY,
+  dedupe_key TEXT NOT NULL,
+  channel TEXT NOT NULL DEFAULT 'telegram' CHECK (channel IN ('telegram')),
+  status TEXT NOT NULL DEFAULT 'pending' CHECK (status IN ('pending', 'sent', 'failed')),
+  retry_count INTEGER NOT NULL DEFAULT 0,
+  max_retries INTEGER NOT NULL DEFAULT 3,
+  next_attempt_at TIMESTAMPTZ NOT NULL,
+  payload_json JSONB NOT NULL,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  sent_at TIMESTAMPTZ,
+  last_error TEXT
+);
+CREATE UNIQUE INDEX IF NOT EXISTS idx_alert_outbox_dedupe ON alert_outbox(dedupe_key);
+CREATE INDEX IF NOT EXISTS idx_alert_outbox_status_next_attempt ON alert_outbox(status, next_attempt_at);
+CREATE INDEX IF NOT EXISTS idx_alert_outbox_pending_next ON alert_outbox(next_attempt_at) WHERE status = 'pending';
+
+CREATE TABLE IF NOT EXISTS scheduler_runs (
+  id TEXT PRIMARY KEY,
+  job_key TEXT NOT NULL,
+  started_at TIMESTAMPTZ NOT NULL,
+  finished_at TIMESTAMPTZ NOT NULL,
+  status TEXT NOT NULL CHECK (status IN ('ok', 'error')),
+  error TEXT,
+  duration_ms INTEGER NOT NULL DEFAULT 0,
+  result_json JSONB
+);
+CREATE INDEX IF NOT EXISTS idx_scheduler_runs_job_time ON scheduler_runs(job_key, started_at);
+
+CREATE TABLE IF NOT EXISTS events (
+  id TEXT PRIMARY KEY,
+  created_at TIMESTAMPTZ NOT NULL,
+  level TEXT NOT NULL CHECK (level IN ('critical', 'warning', 'info')),
+  event_type TEXT NOT NULL,
+  source_module TEXT NOT NULL,
+  title TEXT NOT NULL,
+  message TEXT NOT NULL,
+  entity_type TEXT,
+  entity_id TEXT,
+  payload_json JSONB
+);
+CREATE INDEX IF NOT EXISTS idx_events_created_at ON events(created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_events_level_created_at ON events(level, created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_events_source_created_at ON events(source_module, created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_events_event_type_created_at ON events(event_type, created_at DESC);
+
+CREATE TABLE IF NOT EXISTS app_users (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL DEFAULT '',
+  login TEXT NOT NULL UNIQUE,
+  email TEXT NOT NULL DEFAULT '',
+  role TEXT NOT NULL DEFAULT 'viewer' CHECK (role IN ('admin', 'operator', 'viewer')),
+  active BOOLEAN NOT NULL DEFAULT TRUE,
+  avatar TEXT NOT NULL DEFAULT '',
+  last_seen TIMESTAMPTZ,
+  sections_json JSONB NOT NULL DEFAULT '[]'::jsonb,
+  servers_json JSONB NOT NULL DEFAULT '[]'::jsonb,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS user_interface_bindings (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL REFERENCES app_users(id) ON DELETE CASCADE,
+  server_id BIGINT NOT NULL REFERENCES servers(id) ON DELETE CASCADE,
+  interface_name TEXT NOT NULL,
+  interface_type TEXT NOT NULL DEFAULT 'other' CHECK (interface_type IN ('ether', 'gre', 'wg', 'other')),
+  peer_public_key TEXT NOT NULL DEFAULT '',
+  peer_name TEXT NOT NULL DEFAULT '',
+  comment TEXT NOT NULL DEFAULT '',
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  UNIQUE (server_id, interface_name, peer_public_key)
+);
+CREATE INDEX IF NOT EXISTS idx_user_iface_bind_user ON user_interface_bindings(user_id);
+
+CREATE TABLE IF NOT EXISTS internet_path_snapshots (
+  id BIGINT GENERATED BY DEFAULT AS IDENTITY,
+  sampled_at TIMESTAMPTZ NOT NULL,
+  payload_json JSONB NOT NULL,
+  PRIMARY KEY (id, sampled_at)
+) PARTITION BY RANGE (sampled_at);
+CREATE INDEX IF NOT EXISTS idx_internet_path_snapshots_sampled ON internet_path_snapshots(sampled_at);
+CREATE INDEX IF NOT EXISTS idx_internet_path_snapshots_brin ON internet_path_snapshots USING BRIN (sampled_at);
+
+INSERT INTO traffic_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO traffic_flow_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO uptime_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO evobgp_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO servers_api_ping_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO internet_path_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO alert_telegram_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO acme_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO certificate_renew_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO backup_schedule_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO alert_engine_cursor (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
+INSERT INTO data_migration (id) VALUES (1) ON CONFLICT (id) DO NOTHING;