feat(api, web): implement per-IP blocked stats for agents

- Added functionality to report per-IP drop counters in the `evofw-firewall.sh` script, capturing the top 200 IPs with packet counts.
- Introduced new API endpoints to retrieve blocked IP statistics and reset these stats for agents, enhancing monitoring capabilities.
- Updated the agent detail view to display blocked IPs, improving user visibility into agent performance.
- Enhanced database schema and repositories to support the storage and management of IP block statistics.

These changes provide a comprehensive view of blocked IPs, improving the overall management and monitoring of agents.

.agents/skills/reui/SKILL.md

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

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

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

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

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

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

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

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

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

.claude/skills/reui/SKILL.md

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

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

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

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

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

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

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

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

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

.cursor/rules/reui-mcp.mdc

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

.cursor/skills/reui/SKILL.md

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

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

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

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

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

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

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

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

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

.opencode/skills/reui/SKILL.md

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

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

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

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

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

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

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

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

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

AGENTS.md

@@ -26,7 +26,9 @@ pnpm --filter @evofw/web build
 
 Surface: **frame**. Hierarchy: **ReUI PRO > shadcn**. Contract: `docs/ui-design-contract.md`.  
 MCP `user-reui` primary + `plugin-shadcn-shadcn` primitives. CLI из `apps/web`.  
-KPI/QuickActions: EvoBGP hybrid SoT (`KpiStatGrid`, `QuickActionGrid`).
+KPI/QuickActions: EvoBGP hybrid SoT (`KpiStatGrid`, `QuickActionGrid`).  
+Docs: [Introduction](https://reui.io/docs) · [llms.txt](https://reui.io/llms.txt) · [MCP](https://reui.io/docs/mcp) · [Agent Skills](https://reui.io/docs/agent-skills).  
+Skill: `.claude/skills/reui` (`668fb463eb`).
 
 ## Docs
 

apps/api/src/agent-scripts/evofw-firewall.sh

@@ -7,6 +7,7 @@ LOG_FILE=/var/log/evofw-firewall.log
 STATE_DIR=/var/lib/evofw
 HASH_FILE="${STATE_DIR}/last_hash"
 POLICY_FILE="${STATE_DIR}/last_policy.json"
+IP_HITS_TOP=200
 
 log() { echo "$(date -u +%Y-%m-%dT%H:%M:%SZ) $*" | tee -a "$LOG_FILE"; }
 
@@ -97,6 +98,7 @@ PACKETS_DROPPED=0
 PACKETS_ACCEPTED=0
 KERNEL_METHOD=""
 APPLIED=0
+IP_HITS_JSON="[]"
 
 nft_join() {
   local out="" p
@@ -116,6 +118,20 @@ nft_add_chunk() {
   }
 }
 
+# Ensure inet set exists with interval + counter (recreate if missing counter).
+ensure_nft_set() {
+  local table=$1 name=$2 setname=$3
+  local def
+  def=$(nft -a list set "$table" "$name" "$setname" 2>/dev/null || true)
+  if [[ -n "$def" ]] && [[ "$def" == *"counter"* ]]; then
+    return 0
+  fi
+  if [[ -n "$def" ]]; then
+    nft delete set "$table" "$name" "$setname" 2>>"$LOG_FILE" || true
+  fi
+  nft add set "$table" "$name" "$setname" '{ type ipv4_addr; flags interval; counter; }' 2>>"$LOG_FILE"
+}
+
 collect_nft_stats() {
   PACKETS_DROPPED=0; PACKETS_ACCEPTED=0
   local line n
@@ -135,6 +151,62 @@ collect_nft_stats() {
   done < <(nft list chain inet evofw input 2>/dev/null || true)
 }
 
+# Parse nft set / ipset listing → top-N JSON [{"ip":"...","packets":N},...]
+build_ip_hits_json() {
+  local text="$1"
+  if command -v python3 >/dev/null 2>&1; then
+    IP_HITS_JSON=$(IP_HITS_TOP="$IP_HITS_TOP" python3 -c '
+import json, os, re, sys
+text = sys.stdin.read()
+top = int(os.environ.get("IP_HITS_TOP", "200"))
+hits = {}
+# nft: "1.2.3.4 counter packets 10 bytes 100" or "1.2.3.0/24 packets 5 bytes 20"
+for m in re.finditer(r"([0-9]{1,3}(?:\.[0-9]{1,3}){3}(?:/[0-9]{1,2})?)\s+(?:counter\s+)?packets\s+(\d+)", text):
+    ip, pkts = m.group(1), int(m.group(2))
+    if pkts > 0:
+        hits[ip] = max(hits.get(ip, 0), pkts)
+# ipset list Members: "1.2.3.4 packets 10 bytes 100"
+for m in re.finditer(r"^([0-9]{1,3}(?:\.[0-9]{1,3}){3}(?:/[0-9]{1,2})?)\s+packets\s+(\d+)", text, re.M):
+    ip, pkts = m.group(1), int(m.group(2))
+    if pkts > 0:
+        hits[ip] = max(hits.get(ip, 0), pkts)
+items = [{"ip": k, "packets": v} for k, v in hits.items()]
+items.sort(key=lambda x: x["packets"], reverse=True)
+print(json.dumps(items[:top], separators=(",", ":")))
+' <<<"$text" 2>/dev/null) || IP_HITS_JSON="[]"
+    return
+  fi
+  if command -v jq >/dev/null 2>&1; then
+    # Fallback without python: empty (jq alone cannot easily top-N from free text)
+    IP_HITS_JSON="[]"
+    return
+  fi
+  IP_HITS_JSON="[]"
+}
+
+collect_nft_ip_hits() {
+  local text
+  text=$(nft list set inet evofw deny_v4 2>/dev/null || true)
+  build_ip_hits_json "$text"
+}
+
+collect_ipset_ip_hits() {
+  local text
+  text=$(ipset list evofw_deny_v4 2>/dev/null || true)
+  build_ip_hits_json "$text"
+}
+
+collect_ip_hits() {
+  IP_HITS_JSON="[]"
+  if [[ "${KERNEL_METHOD:-}" == "nft" ]] || { [[ -z "${KERNEL_METHOD:-}" || "${KERNEL_METHOD:-}" == "auto" ]] && command -v nft >/dev/null 2>&1 && nft list set inet evofw deny_v4 >/dev/null 2>&1; }; then
+    collect_nft_ip_hits
+    return
+  fi
+  if command -v ipset >/dev/null 2>&1 && ipset list evofw_deny_v4 >/dev/null 2>&1; then
+    collect_ipset_ip_hits
+  fi
+}
+
 apply_nft() {
   local table=inet name=evofw
   local deny_v4=() allow_v4=() p
@@ -142,10 +214,8 @@ apply_nft() {
   for p in "${ALLOW[@]+"${ALLOW[@]}"}"; do [[ "$p" == *:* ]] && continue; allow_v4+=("$p"); done
 
   nft list table "$table" "$name" >/dev/null 2>&1 || nft add table "$table" "$name"
-  nft list set "$table" "$name" deny_v4 >/dev/null 2>&1 || \
-    nft add set "$table" "$name" deny_v4 '{ type ipv4_addr; flags interval; }'
-  nft list set "$table" "$name" allow_v4 >/dev/null 2>&1 || \
-    nft add set "$table" "$name" allow_v4 '{ type ipv4_addr; flags interval; }'
+  ensure_nft_set "$table" "$name" deny_v4
+  ensure_nft_set "$table" "$name" allow_v4
   nft flush set "$table" "$name" deny_v4
   nft flush set "$table" "$name" allow_v4
 
@@ -182,10 +252,25 @@ apply_nft() {
   APPLIED=$((${#deny_v4[@]} + ${#allow_v4[@]}))
 }
 
+ensure_ipset_counters() {
+  local name=$1
+  if ! ipset list "$name" >/dev/null 2>&1; then
+    ipset create "$name" hash:net family inet counters
+    return
+  fi
+  # Recreate once if set has no packet counters (Header lacks "counters").
+  local header
+  header=$(ipset list "$name" 2>/dev/null | head -n 5 || true)
+  if [[ "$header" != *"counters"* && "$header" != *"packet"* ]]; then
+    ipset destroy "$name" 2>>"$LOG_FILE" || true
+    ipset create "$name" hash:net family inet counters
+  fi
+}
+
 apply_ipset() {
   local dset=evofw_deny_v4 aset=evofw_allow_v4
-  ipset list "$dset" >/dev/null 2>&1 || ipset create "$dset" hash:net family inet
-  ipset list "$aset" >/dev/null 2>&1 || ipset create "$aset" hash:net family inet
+  ensure_ipset_counters "$dset"
+  ensure_ipset_counters "$aset"
   ipset flush "$dset"; ipset flush "$aset"
   local p n=0
   for p in "${DENY[@]+"${DENY[@]}"}"; do [[ "$p" == *:* ]] && continue; ipset add "$dset" "$p" -exist; n=$((n+1)); done
@@ -210,9 +295,12 @@ send_report() {
       collect_nft_stats
     fi
   fi
+  if [[ -z "${IP_HITS_CAPTURED:-}" ]]; then
+    collect_ip_hits
+  fi
   local report
-  report=$(printf '{"status":"ok","prefix_count":%s,"packets_dropped":%s,"packets_accepted":%s,"kernel_method":"%s","source":"agent"}' \
-    "${APPLIED:-0}" "${PACKETS_DROPPED:-0}" "${PACKETS_ACCEPTED:-0}" "${KERNEL_METHOD:-$BACKEND}")
+  report=$(printf '{"status":"ok","prefix_count":%s,"packets_dropped":%s,"packets_accepted":%s,"kernel_method":"%s","source":"agent","ip_hits":%s}' \
+    "${APPLIED:-0}" "${PACKETS_DROPPED:-0}" "${PACKETS_ACCEPTED:-0}" "${KERNEL_METHOD:-$BACKEND}" "${IP_HITS_JSON:-[]}")
   curl -fsS -X POST "${EVOFW_CP_URL%/}/v1/agent/apply-report" \
     -H "Authorization: Bearer ${CLIENT_TOKEN}" \
     -H "Content-Type: application/json" \
@@ -225,15 +313,36 @@ send_report() {
 
 if [[ -f "$HASH_FILE" && "$(tr -d '\r\n' <"$HASH_FILE")" == "$HASH" && -n "$HASH" ]]; then
   log "unchanged hash $HASH — skip apply"
-  KERNEL_METHOD="${BACKEND}"
+  if command -v nft >/dev/null 2>&1 && nft list table inet evofw >/dev/null 2>&1; then
+    KERNEL_METHOD=nft
+  elif command -v ipset >/dev/null 2>&1 && ipset list evofw_deny_v4 >/dev/null 2>&1; then
+    KERNEL_METHOD=ipset
+  else
+    KERNEL_METHOD="${BACKEND}"
+  fi
+  # Count applied prefixes from live sets when skipping apply.
+  if [[ "$KERNEL_METHOD" == "nft" ]]; then
+    APPLIED=$(nft list set inet evofw deny_v4 2>/dev/null | grep -cE '[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+' || true)
+    local_allow=$(nft list set inet evofw allow_v4 2>/dev/null | grep -cE '[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+' || true)
+    APPLIED=$((APPLIED + local_allow))
+  elif [[ "$KERNEL_METHOD" == "ipset" ]]; then
+    APPLIED=$(ipset list evofw_deny_v4 2>/dev/null | awk '/^[0-9]/{c++} END{print c+0}')
+    local_allow=$(ipset list evofw_allow_v4 2>/dev/null | awk '/^[0-9]/{c++} END{print c+0}')
+    APPLIED=$((APPLIED + local_allow))
+  fi
   send_report
   exit 0
 fi
 
-# Capture counters BEFORE recreate (nft delete chain zeroes them).
-if command -v nft >/dev/null 2>&1; then
+# Capture counters BEFORE recreate (nft delete chain / flush set zeroes them).
+if command -v nft >/dev/null 2>&1 && nft list table inet evofw >/dev/null 2>&1; then
   collect_nft_stats
+  collect_nft_ip_hits
   STATS_CAPTURED=1
+  IP_HITS_CAPTURED=1
+elif command -v ipset >/dev/null 2>&1 && ipset list evofw_deny_v4 >/dev/null 2>&1; then
+  collect_ipset_ip_hits
+  IP_HITS_CAPTURED=1
 fi
 
 case "$BACKEND" in

apps/api/src/routes/agent.ts

@@ -221,6 +221,9 @@ export const agentRoutes: FastifyPluginAsync<{ config: AppConfig }> = async (
       kernelMethod: body.kernel_method ?? null,
       recordedAt: now,
     })
+    if (body.ip_hits?.length) {
+      repos.upsertIpBlockStats(app.db, agentId, body.ip_hits, now)
+    }
     return { ok: true }
   })
 

apps/api/src/routes/stats.ts

@@ -23,6 +23,22 @@ export const statsRoutes: FastifyPluginAsync<{ config: AppConfig }> = async (
     })),
   }))
 
+  app.get<{ Params: { id: string } }>(
+    '/agents/:id/blocked-ips',
+    async (req) => {
+      const agent = repos.getAgent(app.db, req.params.id)
+      if (!agent) throw new AppError('NOT_FOUND', 'Agent not found', 404)
+      return {
+        items: repos.listIpBlockStats(app.db, agent.id).map((s) => ({
+          ip: s.ip,
+          packets: s.packets,
+          first_seen_at: s.firstSeenAt,
+          last_seen_at: s.lastSeenAt,
+        })),
+      }
+    },
+  )
+
   app.post<{ Params: { id: string } }>(
     '/agents/:id/stats/reset',
     async (req) => {
@@ -35,6 +51,7 @@ export const statsRoutes: FastifyPluginAsync<{ config: AppConfig }> = async (
         totalPacketsAccepted: 0,
       })
       repos.deleteStatsSamplesForAgent(app.db, agent.id)
+      repos.deleteIpBlockStatsForAgent(app.db, agent.id)
       auditMutation(app, config, req, {
         action: 'agent.stats_reset',
         severity: 'info',

apps/api/src/services/ip-block-stats.test.ts

@@ -0,0 +1,188 @@
+import { describe, it, expect, afterAll } from 'vitest'
+import { buildApp } from '../app.js'
+import type { AppConfig } from '../config.js'
+
+const testConfig: AppConfig = {
+  databaseUrl: 'sqlite::memory:',
+  jwtSecret: 'test',
+  jwtTtlHours: 24,
+  serverPort: 8080,
+  staticDir: null,
+  logLevel: 'error',
+  authRequired: false,
+  authIssuer: 'https://auth.test',
+  authPortalUrl: 'http://localhost:5175',
+  publicBaseUrl: 'https://fw.example.com',
+  enrollSeed: 'test-seed',
+}
+
+async function enrollApprovedLinux(
+  app: Awaited<ReturnType<typeof buildApp>>,
+  name: string,
+  token: string,
+) {
+  const created = await app.inject({
+    method: 'POST',
+    url: '/api/v1/install-links',
+    payload: { name, platform: 'linux' },
+  })
+  expect(created.statusCode).toBe(201)
+  const link = created.json() as { id: string; agent_id: string }
+
+  const enroll = await app.inject({
+    method: 'POST',
+    url: '/v1/agent/enroll',
+    headers: {
+      'content-type': 'application/json',
+      'x-evofw-seed': 'test-seed',
+    },
+    payload: {
+      name,
+      platform: 'linux',
+      token,
+      install_link_id: link.id,
+    },
+  })
+  expect(enroll.statusCode).toBe(201)
+
+  await app.inject({
+    method: 'POST',
+    url: `/api/v1/agents/${link.agent_id}/approve`,
+  })
+
+  return { agentId: link.agent_id, token }
+}
+
+describe('apply-report ip_hits / blocked-ips', () => {
+  const appPromise = buildApp({ memory: true, config: testConfig })
+
+  afterAll(async () => {
+    const app = await appPromise
+    await app.close()
+  })
+
+  it('upserts ip_hits with delta accumulation and clears on reset', async () => {
+    const app = await appPromise
+    await app.ready()
+
+    const { agentId, token } = await enrollApprovedLinux(
+      app,
+      'ip-hits-01',
+      'evofw_ip_hits_token_abcdefghij',
+    )
+
+    const report1 = await app.inject({
+      method: 'POST',
+      url: '/v1/agent/apply-report',
+      headers: {
+        authorization: `Bearer ${token}`,
+        'content-type': 'application/json',
+      },
+      payload: {
+        status: 'ok',
+        prefix_count: 2,
+        packets_dropped: 15,
+        packets_accepted: 1,
+        kernel_method: 'nft',
+        source: 'agent',
+        ip_hits: [
+          { ip: '203.0.113.10', packets: 10 },
+          { ip: '198.51.100.0/24', packets: 5 },
+        ],
+      },
+    })
+    expect(report1.statusCode).toBe(200)
+
+    const list1 = await app.inject({
+      method: 'GET',
+      url: `/api/v1/agents/${agentId}/blocked-ips`,
+    })
+    expect(list1.statusCode).toBe(200)
+    const body1 = list1.json() as {
+      items: { ip: string; packets: number; last_seen_at: string }[]
+    }
+    expect(body1.items).toHaveLength(2)
+    expect(body1.items[0]?.ip).toBe('203.0.113.10')
+    expect(body1.items[0]?.packets).toBe(10)
+    expect(body1.items[1]?.ip).toBe('198.51.100.0/24')
+    expect(body1.items[1]?.packets).toBe(5)
+
+    const report2 = await app.inject({
+      method: 'POST',
+      url: '/v1/agent/apply-report',
+      headers: {
+        authorization: `Bearer ${token}`,
+        'content-type': 'application/json',
+      },
+      payload: {
+        status: 'ok',
+        prefix_count: 2,
+        packets_dropped: 25,
+        packets_accepted: 1,
+        kernel_method: 'nft',
+        source: 'agent',
+        ip_hits: [
+          { ip: '203.0.113.10', packets: 18 },
+          { ip: '198.51.100.0/24', packets: 5 },
+        ],
+      },
+    })
+    expect(report2.statusCode).toBe(200)
+
+    const list2 = await app.inject({
+      method: 'GET',
+      url: `/api/v1/agents/${agentId}/blocked-ips`,
+    })
+    const body2 = list2.json() as {
+      items: { ip: string; packets: number }[]
+    }
+    // 10 + (18-10) = 18; /24 unchanged (delta 0) stays 5
+    expect(body2.items.find((i) => i.ip === '203.0.113.10')?.packets).toBe(18)
+    expect(body2.items.find((i) => i.ip === '198.51.100.0/24')?.packets).toBe(5)
+
+    const reset = await app.inject({
+      method: 'POST',
+      url: `/api/v1/agents/${agentId}/stats/reset`,
+    })
+    expect(reset.statusCode).toBe(200)
+
+    const list3 = await app.inject({
+      method: 'GET',
+      url: `/api/v1/agents/${agentId}/blocked-ips`,
+    })
+    expect(
+      (list3.json() as { items: unknown[] }).items,
+    ).toEqual([])
+  })
+
+  it('rejects ip_hits longer than 200', async () => {
+    const app = await appPromise
+    await app.ready()
+
+    const { token } = await enrollApprovedLinux(
+      app,
+      'ip-hits-max',
+      'evofw_ip_hits_max_token_abcdef',
+    )
+
+    const hits = Array.from({ length: 201 }, (_, i) => ({
+      ip: `203.0.113.${(i % 254) + 1}`,
+      packets: 1,
+    }))
+
+    const report = await app.inject({
+      method: 'POST',
+      url: '/v1/agent/apply-report',
+      headers: {
+        authorization: `Bearer ${token}`,
+        'content-type': 'application/json',
+      },
+      payload: {
+        status: 'ok',
+        packets_dropped: 201,
+        ip_hits: hits,
+      },
+    })
+    expect(report.statusCode).toBeGreaterThanOrEqual(400)
+  })
+})

apps/web/src/components/agents/agent-blocked-ips.tsx

@@ -0,0 +1,167 @@
+import { useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+} from '@tanstack/react-table'
+import { BanIcon, RouterIcon } from 'lucide-react'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { DataGrid } from '@/components/reui/data-grid/data-grid'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
+import { EmptyState } from '@/components/empty-state'
+import { agentBlockedIpsQueryOptions } from '@/queries'
+import { Skeleton } from '@evofw/ui/components/skeleton'
+
+/**
+ * Per-IP/CIDR drop counters from Linux nft/ipset.
+ * Preview: https://reui.io/preview/base/data-grid-filtering-2
+ * · https://reui.io/preview/base/empty-state-12
+ * MikroTik: address-list has no per-entry counters — empty hint only.
+ */
+
+export type BlockedIpRow = {
+  ip: string
+  packets: number
+  first_seen_at: string
+  last_seen_at: string
+}
+
+type AgentBlockedIpsProps = {
+  agentId: string
+  platform: string
+}
+
+const packetFmt = new Intl.NumberFormat('ru-RU')
+const seenFmt = new Intl.DateTimeFormat('ru-RU', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+})
+
+function formatSeen(iso: string): string {
+  const t = Date.parse(iso)
+  if (Number.isNaN(t)) return '—'
+  return seenFmt.format(t)
+}
+
+export function AgentBlockedIps({ agentId, platform }: AgentBlockedIpsProps) {
+  const isMikrotik = platform === 'mikrotik'
+  const q = useQuery({
+    ...agentBlockedIpsQueryOptions(agentId),
+    enabled: !isMikrotik,
+  })
+
+  const columns = useMemo<ColumnDef<BlockedIpRow>[]>(
+    () => [
+      {
+        accessorKey: 'ip',
+        id: 'ip',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="IP / CIDR" />
+        ),
+        cell: ({ row }) => (
+          <span className="font-mono text-xs tabular-nums">{row.original.ip}</span>
+        ),
+        meta: { headerTitle: 'IP / CIDR' },
+      },
+      {
+        accessorKey: 'packets',
+        id: 'packets',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="Packets" />
+        ),
+        cell: ({ row }) => (
+          <span className="tabular-nums">
+            {packetFmt.format(row.original.packets)}
+          </span>
+        ),
+        meta: { headerTitle: 'Packets' },
+      },
+      {
+        accessorKey: 'last_seen_at',
+        id: 'last_seen_at',
+        header: ({ column }) => (
+          <DataGridColumnHeader column={column} title="Last seen" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground text-xs tabular-nums">
+            {formatSeen(row.original.last_seen_at)}
+          </span>
+        ),
+        meta: { headerTitle: 'Last seen' },
+      },
+    ],
+    [],
+  )
+
+  const data = q.data?.items ?? []
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (r) => r.ip,
+  })
+
+  return (
+    <Frame dense spacing="sm">
+      <FrameHeader>
+        <FrameTitle>Blocked IPs</FrameTitle>
+        <FrameDescription>
+          Drop-пакеты по записям deny (nft/ipset). Top по накопленным packets.
+        </FrameDescription>
+      </FrameHeader>
+      <FramePanel className="p-0">
+        {isMikrotik ? (
+          <EmptyState
+            icon={RouterIcon}
+            title="Per-IP недоступен на MikroTik"
+            description="У address-list в RouterOS нет counters по записи. Доступны только суммарные Traffic ↓/↑ с filter-правил."
+            centered={false}
+            className="py-8"
+          />
+        ) : q.isLoading ? (
+          <div className="flex flex-col gap-2 p-4">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-2/3" />
+          </div>
+        ) : q.isError ? (
+          <EmptyState
+            icon={BanIcon}
+            title="Не удалось загрузить"
+            description={q.error?.message ?? 'Ошибка API'}
+            centered={false}
+            className="py-8"
+          />
+        ) : data.length === 0 ? (
+          <EmptyState
+            icon={BanIcon}
+            title="Пока нет hit’ов"
+            description="Когда deny-префиксы начнут дропать пакеты, здесь появятся IP/CIDR с counters."
+            centered={false}
+            className="py-8"
+          />
+        ) : (
+          <DataGrid
+            table={table}
+            recordCount={data.length}
+            tableLayout={{ dense: true }}
+          >
+            <DataGridTable />
+          </DataGrid>
+        )}
+      </FramePanel>
+    </Frame>
+  )
+}

apps/web/src/components/agents/agent-detail-view.tsx

@@ -33,6 +33,7 @@ import { AgentPolicySetsSortable } from '@/components/agents/agent-policy-sets-s
 import { AgentPolicyTrace } from '@/components/agents/agent-policy-trace'
 import { AgentFactsPanel } from '@/components/agents/agent-facts-panel'
 import { AgentEffectiveCidrs } from '@/components/agents/agent-effective-cidrs'
+import { AgentBlockedIps } from '@/components/agents/agent-blocked-ips'
 import {
   AgentCloneSetsSheet,
   AgentOverrideSheet,
@@ -102,6 +103,7 @@ export function AgentDetailView({ agentId, onDelete }: AgentDetailViewProps) {
       void qc.invalidateQueries({ queryKey: ['agents'] })
       void qc.invalidateQueries({ queryKey: ['agents', agentId] })
       void qc.invalidateQueries({ queryKey: ['agents', agentId, 'stats'] })
+      void qc.invalidateQueries({ queryKey: ['agents', agentId, 'blocked-ips'] })
       void qc.invalidateQueries({ queryKey: ['stats'] })
       void qc.invalidateQueries({ queryKey: ['dashboard'] })
     },
@@ -317,6 +319,8 @@ export function AgentDetailView({ agentId, onDelete }: AgentDetailViewProps) {
                 preview={previewQ.data}
                 isLoading={previewQ.isLoading}
               />
+
+              <AgentBlockedIps agentId={agentId} platform={a.platform} />
             </div>
           </DetailPanel.Section>
         </DetailPanel>

apps/web/src/queries/index.ts

@@ -154,7 +154,7 @@ export const settingsQueryOptions = () =>
 
 export const agentStatsQueryOptions = (id: string) =>
   queryOptions({
-    queryKey: ['agent-stats', id],
+    queryKey: ['agents', id, 'stats'],
     queryFn: () =>
       apiFetch<{
         items: {
@@ -165,6 +165,20 @@ export const agentStatsQueryOptions = (id: string) =>
       }>(`/api/v1/agents/${id}/stats`),
   })
 
+export const agentBlockedIpsQueryOptions = (id: string) =>
+  queryOptions({
+    queryKey: ['agents', id, 'blocked-ips'],
+    queryFn: () =>
+      apiFetch<{
+        items: {
+          ip: string
+          packets: number
+          first_seen_at: string
+          last_seen_at: string
+        }[]
+      }>(`/api/v1/agents/${id}/blocked-ips`),
+  })
+
 export const recentStatsQueryOptions = () =>
   queryOptions({
     queryKey: ['stats-recent'],

docs/agents.md

@@ -53,6 +53,18 @@ Backend auto-detect: nft → ipset → iptables.
 
 Whitelist: nft chain policy drop + allow set. Blacklist: policy accept + deny set.
 
+## Per-IP blocked stats (Linux)
+
+Linux agent reports optional `ip_hits` in `POST /v1/agent/apply-report`:
+
+- **nft:** set `deny_v4` with `flags interval; counter;` — per-element packets; collected **before** flush/recreate and on unchanged-hash sync.
+- **ipset:** `hash:net … counters` — same idea from `ipset list`.
+- Payload: only entries with `packets > 0`, **top 200** by packets.
+- Control plane stores cumulative totals in `agent_ip_block_stats` (delta vs last absolute report). `GET /api/v1/agents/:id/blocked-ips`. Reset via `POST …/stats/reset`.
+- UI: agent detail → **Blocked IPs** (Frame + DataGrid).
+
+IPv6 skipped (as in apply). MikroTik: see below — no per-IP in v1.
+
 ## MikroTik (RouterOS 7.21+)
 
 В UI `/agents` → **Добавить агента** → platform **MikroTik**. Скопируйте one-liner:
@@ -72,6 +84,8 @@ Install RSC:
 Лог: `/log print where message~"evofw"`. Ручной sync: `/system script run evofw-sync`.
 Traffic ↓/↑ в UI — сумма `packets` с filter-правил `evofw-deny-*` / `evofw-allow-*` / `evofw-default-drop-*` (накопительно, пока правила не пересозданы re-install).
 
+**Per-IP / blocked IPs:** на MikroTik **нет**. У `/ip firewall address-list` в ROS 7 нет `packets`/`bytes` на записи — только суммарные counters filter-правил. В карточке агента секция Blocked IPs показывает пояснение.
+
 **Default action** задаётся на **агенте** (`default_action: accept | drop`):
 
 - **accept** — пакет вне deny/allow пропускается

docs/openapi.yaml

@@ -373,6 +373,53 @@ paths:
         '200':
           description: Samples
 
+  /api/v1/agents/{id}/stats:
+    get:
+      summary: Apply samples for one agent
+      tags: [ops]
+      security: [{ bearerAuth: [] }]
+      parameters:
+        - $ref: '#/components/parameters/Id'
+      responses:
+        '200':
+          description: Samples
+
+  /api/v1/agents/{id}/stats/reset:
+    post:
+      summary: Reset packet totals, samples, and per-IP block stats
+      tags: [ops]
+      security: [{ bearerAuth: [] }]
+      parameters:
+        - $ref: '#/components/parameters/Id'
+      responses:
+        '200':
+          description: Agent after reset
+
+  /api/v1/agents/{id}/blocked-ips:
+    get:
+      summary: Per-IP/CIDR drop counters (Linux nft/ipset)
+      tags: [ops]
+      security: [{ bearerAuth: [] }]
+      parameters:
+        - $ref: '#/components/parameters/Id'
+      responses:
+        '200':
+          description: Top blocked IPs by accumulated packets
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  items:
+                    type: array
+                    items:
+                      type: object
+                      required: [ip, packets, first_seen_at, last_seen_at]
+                      properties:
+                        ip: { type: string }
+                        packets: { type: integer }
+                        first_seen_at: { type: string, format: date-time }
+                        last_seen_at: { type: string, format: date-time }
   /api/v1/integrations/evobgp/communities:
     get:
       summary: Proxy EvoBGP communities
@@ -473,9 +520,34 @@ paths:
 
   /v1/agent/apply-report:
     post:
-      summary: Apply report + packet stats
+      summary: Apply report + packet stats (+ optional ip_hits)
       tags: [agent]
       security: [{ agentToken: [] }]
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [status]
+              properties:
+                status: { type: string }
+                prefix_count: { type: integer }
+                packets_dropped: { type: integer }
+                packets_accepted: { type: integer }
+                kernel_method: { type: string }
+                error: { type: string }
+                source: { type: string }
+                ip_hits:
+                  type: array
+                  maxItems: 200
+                  description: Linux per-element drop counters (packets > 0)
+                  items:
+                    type: object
+                    required: [ip, packets]
+                    properties:
+                      ip: { type: string, maxLength: 64 }
+                      packets: { type: integer, minimum: 0 }
       responses:
         '200':
           description: OK

docs/ui-design-contract.md

@@ -4,7 +4,7 @@
 Surface: **ReUI Frame**. Kit: `apps/web/src/components/reui-kit/`.  
 Иерархия: **ReUI PRO > shadcn primitives**.
 
-Карта: [llms.txt](https://reui.io/llms.txt) · [Styling](https://reui.io/docs/styling) · [License](https://reui.io/docs/license-setup) · [Blocks](https://reui.io/blocks) · [MCP](https://reui.io/docs/mcp)
+Карта: [docs](https://reui.io/docs) · [llms.txt](https://reui.io/llms.txt) · [Get Started](https://reui.io/docs/get-started) · [Styling](https://reui.io/docs/styling) · [Registry](https://reui.io/docs/registry) · [License](https://reui.io/docs/license-setup) · [Blocks](https://reui.io/blocks) · [MCP](https://reui.io/docs/mcp) · [Agent Skills](https://reui.io/docs/agent-skills)
 
 ## Surface
 

packages/db/migrations/009_agent_ip_block_stats.sql

@@ -0,0 +1,16 @@
+-- Per-IP/CIDR drop counters from Linux agent nft/ipset element counters.
+CREATE TABLE IF NOT EXISTS agent_ip_block_stats (
+  id TEXT PRIMARY KEY NOT NULL,
+  agent_id TEXT NOT NULL REFERENCES agents(id) ON DELETE CASCADE,
+  ip TEXT NOT NULL,
+  packets INTEGER NOT NULL DEFAULT 0,
+  last_reported_packets INTEGER NOT NULL DEFAULT 0,
+  first_seen_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now')),
+  last_seen_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))
+);
+
+CREATE UNIQUE INDEX IF NOT EXISTS idx_agent_ip_block_stats_agent_ip
+  ON agent_ip_block_stats(agent_id, ip);
+
+CREATE INDEX IF NOT EXISTS idx_agent_ip_block_stats_agent_packets
+  ON agent_ip_block_stats(agent_id, packets);

packages/db/src/repositories/index.ts

@@ -57,6 +57,9 @@ export {
   listStatsSamples,
   listRecentStats,
   deleteStatsSamplesForAgent,
+  upsertIpBlockStats,
+  listIpBlockStats,
+  deleteIpBlockStatsForAgent,
 } from './stats.js'
 
 export {
@@ -132,6 +135,9 @@ import {
   listStatsSamples,
   listRecentStats,
   deleteStatsSamplesForAgent,
+  upsertIpBlockStats,
+  listIpBlockStats,
+  deleteIpBlockStatsForAgent,
 } from './stats.js'
 import {
   getSetting,
@@ -198,6 +204,9 @@ export const repos = {
   listStatsSamples,
   listRecentStats,
   deleteStatsSamplesForAgent,
+  upsertIpBlockStats,
+  listIpBlockStats,
+  deleteIpBlockStatsForAgent,
   getSetting,
   setSetting,
   listSettings,

packages/db/src/repositories/stats.ts

@@ -1,6 +1,6 @@
-import { eq, desc } from 'drizzle-orm'
+import { and, eq, desc } from 'drizzle-orm'
 import type { Db } from '../client.js'
-import { agentStatsSamples } from '../schema.js'
+import { agentIpBlockStats, agentStatsSamples } from '../schema.js'
 
 export function insertStatsSample(
   db: Db,
@@ -33,3 +33,76 @@ export function deleteStatsSamplesForAgent(db: Db, agentId: string) {
     .where(eq(agentStatsSamples.agentId, agentId))
     .run()
 }
+
+export type IpHitInput = { ip: string; packets: number }
+
+/**
+ * Upsert per-IP drop counters. Agent reports absolute kernel counters;
+ * CP accumulates deltas (mirrors totalPacketsDropped logic).
+ */
+export function upsertIpBlockStats(
+  db: Db,
+  agentId: string,
+  hits: IpHitInput[],
+  now = new Date().toISOString(),
+) {
+  for (const hit of hits) {
+    const ip = hit.ip.trim()
+    if (!ip) continue
+    const reported = Math.max(0, Math.floor(hit.packets))
+    const existing = db
+      .select()
+      .from(agentIpBlockStats)
+      .where(
+        and(
+          eq(agentIpBlockStats.agentId, agentId),
+          eq(agentIpBlockStats.ip, ip),
+        ),
+      )
+      .get()
+
+    if (!existing) {
+      db.insert(agentIpBlockStats)
+        .values({
+          id: crypto.randomUUID(),
+          agentId,
+          ip,
+          packets: reported,
+          lastReportedPackets: reported,
+          firstSeenAt: now,
+          lastSeenAt: now,
+        })
+        .run()
+      continue
+    }
+
+    const prevReported = existing.lastReportedPackets ?? 0
+    const delta =
+      reported >= prevReported ? reported - prevReported : reported
+    const packets = (existing.packets ?? 0) + delta
+    db.update(agentIpBlockStats)
+      .set({
+        packets,
+        lastReportedPackets: reported,
+        ...(delta > 0 ? { lastSeenAt: now } : {}),
+      })
+      .where(eq(agentIpBlockStats.id, existing.id))
+      .run()
+  }
+}
+
+export function listIpBlockStats(db: Db, agentId: string, limit = 200) {
+  return db
+    .select()
+    .from(agentIpBlockStats)
+    .where(eq(agentIpBlockStats.agentId, agentId))
+    .orderBy(desc(agentIpBlockStats.packets))
+    .limit(limit)
+    .all()
+}
+
+export function deleteIpBlockStatsForAgent(db: Db, agentId: string) {
+  db.delete(agentIpBlockStats)
+    .where(eq(agentIpBlockStats.agentId, agentId))
+    .run()
+}

packages/db/src/schema.ts

@@ -201,6 +201,33 @@ export const agentStatsSamples = sqliteTable(
   }),
 )
 
+/** Per-IP/CIDR drop counters reported by Linux agents (nft/ipset element counters). */
+export const agentIpBlockStats = sqliteTable(
+  'agent_ip_block_stats',
+  {
+    id: text('id').primaryKey(),
+    agentId: text('agent_id')
+      .notNull()
+      .references(() => agents.id, { onDelete: 'cascade' }),
+    ip: text('ip').notNull(),
+    packets: integer('packets').notNull().default(0),
+    lastReportedPackets: integer('last_reported_packets').notNull().default(0),
+    firstSeenAt: text('first_seen_at')
+      .notNull()
+      .default(sql`(strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))`),
+    lastSeenAt: text('last_seen_at')
+      .notNull()
+      .default(sql`(strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))`),
+  },
+  (t) => ({
+    agentIp: uniqueIndex('idx_agent_ip_block_stats_agent_ip').on(t.agentId, t.ip),
+    agentPackets: index('idx_agent_ip_block_stats_agent_packets').on(
+      t.agentId,
+      t.packets,
+    ),
+  }),
+)
+
 /** Short install invite links (`/agent-install/:id` and `/:slug`). */
 export const agentInstallLinks = sqliteTable(
   'agent_install_links',
@@ -263,6 +290,7 @@ export const schema = {
   policyRuleResolved,
   ipOverrides,
   agentStatsSamples,
+  agentIpBlockStats,
   agentInstallLinks,
   auditLog,
 }

packages/shared/src/contracts.ts

@@ -221,6 +221,11 @@ export const enrollBodySchema = z.object({
   install_link_id: z.string().optional(),
 })
 
+export const applyReportIpHitSchema = z.object({
+  ip: z.string().min(1).max(64),
+  packets: z.number().int().nonnegative(),
+})
+
 export const applyReportBodySchema = z.object({
   status: z.string(),
   prefix_count: z.number().int().optional(),
@@ -229,6 +234,15 @@ export const applyReportBodySchema = z.object({
   kernel_method: z.string().optional(),
   error: z.string().optional(),
   source: z.string().optional(),
+  /** Linux nft/ipset per-element drop counters (top-N, packets > 0). */
+  ip_hits: z.array(applyReportIpHitSchema).max(200).optional(),
+})
+
+export const agentIpBlockStatSchema = z.object({
+  ip: z.string(),
+  packets: z.number().int(),
+  first_seen_at: z.string(),
+  last_seen_at: z.string(),
 })
 
 export const agentPolicySchema = z.object({