feat(api, web): integrate health status management for services and domains

- Added health status and latency fields to service and domain schemas, enhancing monitoring capabilities. - Implemented health status aggregation for services in the API, allowing for improved health checks and reporting. - Updated web components to display health status using HealthCheckBadge, improving user visibility of service health. - Refactored service and domain management components to incorporate health status in various views, enhancing overall functionality. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-17 02:55:49 +07:00
parent 64585ccd47
commit 1f710bbe8b
48 changed files with 4258 additions and 246 deletions
@@ -340,23 +340,45 @@ async function buildView(db: Db, serviceId: number): Promise<ServiceView> {
    updated_at: service.updated_at,
    ips,
    domains: domainViews,
+    health_status: "unknown",
+    health_latency_ms: null,
  };
 }

+function attachServiceHealth(
+  db: Db,
+  views: ServiceView[],
+): ServiceView[] {
+  const healthByService = repos.aggregateIpHealthByServiceIds(
+    db,
+    views.map((v) => v.id),
+  );
+  return views.map((view) => {
+    const health = healthByService.get(view.id);
+    return {
+      ...view,
+      health_status: health?.health_status ?? "unknown",
+      health_latency_ms: health?.health_latency_ms ?? null,
+    };
+  });
+}
+
 export async function listViews(db: Db): Promise<ServiceView[]> {
-  return Promise.all(
+  const views = await Promise.all(
    repos.listServices(db).map((s) => buildView(db, s.id)),
  );
+  return attachServiceHealth(db, views);
 }

 export async function getView(db: Db, id: number): Promise<ServiceView> {
  repos.getService(db, id);
-  return buildView(db, id);
+  const [view] = attachServiceHealth(db, [await buildView(db, id)]);
+  return view!;
 }

 export async function listGroupViews(db: Db): Promise<ServiceGroupsResponse> {
  const groups = repos.listServiceGroups(db);
-  const groupViews = await Promise.all(
+  const groupViewsRaw = await Promise.all(
    groups.map(async (group) => {
      const services = repos.listServicesByGroup(db, group.id);
      const serviceViews = await Promise.all(
@@ -367,10 +389,52 @@ export async function listGroupViews(db: Db): Promise<ServiceGroupsResponse> {
  );

  const ungroupedServices = repos.listUngroupedServices(db);
-  const ungrouped = await Promise.all(
+  const ungroupedRaw = await Promise.all(
    ungroupedServices.map((s) => buildView(db, s.id)),
  );

+  const allServiceViews = [
+    ...groupViewsRaw.flatMap((g) => g.services),
+    ...ungroupedRaw,
+  ];
+  const withHealth = attachServiceHealth(db, allServiceViews);
+  const healthById = new Map(withHealth.map((v) => [v.id, v]));
+
+  const groupHealthById = repos.aggregateIpHealthByRefs(
+    db,
+    "group",
+    groups.map((g) => g.id),
+  );
+
+  const groupViews = groupViewsRaw.map((group) => {
+    const services = group.services.map(
+      (s) => healthById.get(s.id) ?? { ...s, health_status: "unknown" as const, health_latency_ms: null },
+    );
+    const groupScopeHealth = groupHealthById.get(group.id);
+    const merged = repos.mergeHealthAggregates([
+      groupScopeHealth,
+      ...services.map((s) => ({
+        health_status: s.health_status,
+        health_latency_ms: s.health_latency_ms,
+      })),
+    ]);
+    return {
+      ...group,
+      services,
+      health_status: merged.health_status,
+      health_latency_ms: merged.health_latency_ms,
+    };
+  });
+
+  const ungrouped = ungroupedRaw.map(
+    (s) =>
+      healthById.get(s.id) ?? {
+        ...s,
+        health_status: "unknown" as const,
+        health_latency_ms: null,
+      },
+  );
+
  return { groups: groupViews, ungrouped };
 }

@@ -1224,7 +1288,8 @@ export async function updateConfig(

  void syncServiceToVpsTracker(db, id, removedBindingIds);

-  return buildView(db, id);
+  const [view] = attachServiceHealth(db, [await buildView(db, id)]);
+  return view!;
 }

 export async function createGroup(
@@ -1318,12 +1383,18 @@ export async function toggleService(
  if (!enabled) {
    await cleanupServiceDnsOnly(db, cf, serviceId);
    await syncGroupDomainForService(db, cf, serviceId);
-    return buildView(db, serviceId);
+    const [disabledView] = attachServiceHealth(db, [
+      await buildView(db, serviceId),
+    ]);
+    return disabledView!;
  }

  await syncServiceBindingsToDns(db, cf, serviceId);
  await syncGroupDomainForService(db, cf, serviceId);
-  return buildView(db, serviceId);
+  const [enabledView] = attachServiceHealth(db, [
+    await buildView(db, serviceId),
+  ]);
+  return enabledView!;
 }

 export async function toggleGroup(
@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+import { buildApp } from "../src/app.js";
+import { loadConfig } from "../src/config.js";
+import { repos } from "@cfdm/db";
+
+async function authHeaders(app: Awaited<ReturnType<typeof buildApp>>) {
+  const config = loadConfig();
+  const res = await app.inject({
+    method: "POST",
+    url: "/api/v1/auth/login",
+    payload: { username: config.adminUsername, password: "admin" },
+  });
+  expect(res.statusCode).toBe(200);
+  const { token } = res.json() as { token: string };
+  return { authorization: `Bearer ${token}` };
+}
+
+describe("service groups health enrichment", () => {
+  it("GET /service-groups returns health_status from ip_health_status", async () => {
+    const app = await buildApp({
+      config: { ...loadConfig(), staticDir: null },
+      memory: true,
+    });
+    const headers = await authHeaders(app);
+
+    const domain = repos.createDomain(app.db, null, "example.com", "zone-1");
+    const group = repos.createServiceGroup(
+      app.db,
+      "VPN",
+      "vpn",
+      null,
+      "vpn.example.com",
+    );
+    const service = repos.createService(app.db, "Panel", "panel");
+    repos.setServiceGroup(app.db, service.id, group.id);
+    const binding = repos.insertBinding(
+      app.db,
+      domain.id,
+      service.id,
+      "panel",
+      null,
+    );
+    repos.replaceBindingIpsWithMeta(app.db, binding.id, [
+      { ip: "1.2.3.4", weight: 1, priority: 1 },
+    ]);
+    repos.upsertIpHealthStatus(
+      app.db,
+      "binding",
+      binding.id,
+      "1.2.3.4",
+      "degraded",
+      120,
+      1,
+      null,
+    );
+    repos.upsertIpHealthStatus(
+      app.db,
+      "group",
+      group.id,
+      "5.6.7.8",
+      "up",
+      40,
+      0,
+      null,
+    );
+
+    const res = await app.inject({
+      method: "GET",
+      url: "/api/v1/service-groups",
+      headers,
+    });
+    expect(res.statusCode).toBe(200);
+    const body = res.json() as {
+      groups: Array<{
+        id: number;
+        health_status: string;
+        health_latency_ms: number | null;
+        services: Array<{
+          id: number;
+          health_status: string;
+          health_latency_ms: number | null;
+        }>;
+      }>;
+    };
+    const groupView = body.groups.find((g) => g.id === group.id);
+    expect(groupView).toBeDefined();
+    expect(groupView!.services[0]?.health_status).toBe("degraded");
+    expect(groupView!.services[0]?.health_latency_ms).toBe(120);
+    // group worst = degraded (from service) over up (group scope)
+    expect(groupView!.health_status).toBe("degraded");
+
+    await app.close();
+  });
+});
@@ -0,0 +1,550 @@
+"use client"
+
+import { memo, type ComponentProps } from "react"
+import { Badge } from "@/components/reui/badge"
+import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+import { type ColumnDef } from "@tanstack/react-table"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@cfdm/ui/components/avatar"
+import { Button } from "@cfdm/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@cfdm/ui/components/dropdown-menu"
+import { Item } from "@cfdm/ui/components/item"
+import {
+  ACCOUNTS,
+  formatCurrency,
+  nextRenewal,
+  sumArr,
+  weightedNrr,
+  type Account,
+  type AccountHealth,
+  type AccountOwner,
+  type AccountRow,
+  type AccountTier,
+  type PortfolioRow,
+  type RegionGroupRow,
+} from "./data"
+import { TrendingUp, TrendingDown, ArrowRightIcon, CalendarDaysIcon, MoreHorizontalIcon, EyeIcon, CopyIcon, PencilIcon, ChevronRightIcon, GlobeIcon } from "lucide-react"
+
+export type AccountAction = "open" | "copy" | "plan"
+
+const tierVariant: Record<
+  AccountTier,
+  ComponentProps<typeof Badge>["variant"]
+> = {
+  Enterprise: "outline",
+  Growth: "outline",
+  Startup: "outline",
+}
+
+const healthVariant: Record<
+  AccountHealth,
+  ComponentProps<typeof Badge>["variant"]
+> = {
+  Healthy: "success-light",
+  Watch: "warning-light",
+  "At Risk": "destructive-light",
+}
+
+// Per-account brand mark: a colored monogram tile stands in for a real logo
+// (accounts are fictional, so real brand art is off limits). Tint is stable per
+// account id; the monogram is the initials of the first two words.
+const BRAND_TINTS = [
+  "border-blue-200 bg-blue-100 text-blue-700 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-300",
+  "border-violet-200 bg-violet-100 text-violet-700 dark:border-violet-900 dark:bg-violet-950 dark:text-violet-300",
+  "border-emerald-200 bg-emerald-100 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
+  "border-amber-200 bg-amber-100 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300",
+  "border-rose-200 bg-rose-100 text-rose-700 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300",
+  "border-cyan-200 bg-cyan-100 text-cyan-700 dark:border-cyan-900 dark:bg-cyan-950 dark:text-cyan-300",
+]
+
+// Cycle the tints by position within each region so a region's accounts get
+// distinct colors (a region with more than six repeats from the first tint).
+const BRAND_TINT_BY_ID = new Map<string, string>()
+const regionTintCursor = new Map<Account["regionId"], number>()
+for (const account of ACCOUNTS) {
+  const cursor = regionTintCursor.get(account.regionId) ?? 0
+  BRAND_TINT_BY_ID.set(account.id, BRAND_TINTS[cursor % BRAND_TINTS.length])
+  regionTintCursor.set(account.regionId, cursor + 1)
+}
+
+function brandTint(id: string) {
+  return BRAND_TINT_BY_ID.get(id) ?? BRAND_TINTS[0]
+}
+
+function accountMonogram(name: string) {
+  const words = name.trim().split(/\s+/)
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase()
+  }
+  return name.slice(0, 2).toUpperCase()
+}
+
+function isAccountRow(row: PortfolioRow): row is AccountRow {
+  return row.kind === "account"
+}
+
+function getRegionAccounts(row: RegionGroupRow): Account[] {
+  return row.subRows?.map((item) => item.account) ?? []
+}
+
+/** Color tone keyed on net revenue retention (100% = flat). */
+function nrrTone(value: number) {
+  if (value >= 100) return "text-emerald-600 dark:text-emerald-500"
+  return "text-rose-600 dark:text-rose-500"
+}
+
+// ── Shared cells ──
+
+const OwnerAvatar = memo(function OwnerAvatar({
+  owner,
+  className,
+}: {
+  owner: AccountOwner
+  className?: string
+}) {
+  return (
+    <Avatar className={cn("size-6 shrink-0", className)}>
+      {owner.avatarSrc ? (
+        <AvatarImage src={owner.avatarSrc} alt={owner.name} />
+      ) : null}
+      <AvatarFallback className="text-[10px]">{owner.initials}</AvatarFallback>
+    </Avatar>
+  )
+})
+
+export function NrrValue({ value }: { value: number }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 text-sm tabular-nums",
+        nrrTone(value)
+      )}
+    >
+      {value >= 100 ? (
+        <TrendingUp className="size-3.5 shrink-0" aria-hidden="true" />
+      ) : (
+        <TrendingDown className="size-3.5 shrink-0" aria-hidden="true" />
+      )}
+      {value}%
+    </span>
+  )
+}
+
+// ── Account (leaf) cells ──
+
+function AccountLogoTile({ account }: { account: Account }) {
+  return (
+    <Item
+      render={<span />}
+      aria-hidden="true"
+      className={cn(
+        "flex size-7 shrink-0 items-center justify-center border p-0 text-xs font-semibold tracking-tight",
+        brandTint(account.id)
+      )}
+    >
+      {accountMonogram(account.name)}
+    </Item>
+  )
+}
+
+function AccountNameAffordance({ name }: { name: string }) {
+  return (
+    <span className="group/account-name inline-flex min-w-0 items-center gap-1 truncate">
+      <span
+        data-slot="portfolio-account-name"
+        className="hover:text-primary text-foreground max-w-full cursor-pointer truncate py-0.25 transition-colors"
+      >
+        {name}
+      </span>
+      <ArrowRightIcon className="size-3 shrink-0 -translate-x-1 opacity-0 transition group-hover/account-name:translate-x-0 group-hover/account-name:opacity-100" aria-hidden="true" />
+    </span>
+  )
+}
+
+function AccountNameCell({ account }: { account: Account }) {
+  return (
+    <div
+      data-portfolio-row="account"
+      className="flex min-w-0 items-center gap-3 ps-8"
+    >
+      <AccountLogoTile account={account} />
+      <div className="min-w-0 flex-1 text-sm leading-5 font-medium">
+        <AccountNameAffordance name={account.name} />
+      </div>
+    </div>
+  )
+}
+
+function OwnerCell({ owner }: { owner: AccountOwner }) {
+  return (
+    <div className="flex min-w-0 items-center gap-2">
+      <OwnerAvatar owner={owner} />
+      <span className="text-foreground min-w-0 truncate text-sm">
+        {owner.name}
+      </span>
+    </div>
+  )
+}
+
+function RenewalCell({ account }: { account: Account }) {
+  return (
+    <Badge variant="outline" className="bg-background gap-1.5">
+      <CalendarDaysIcon className="text-muted-foreground size-3.5" aria-hidden="true" />
+      <span className="tabular-nums">{account.renewalLabel}</span>
+    </Badge>
+  )
+}
+
+function AccountActionsCell({
+  account,
+  onAction,
+}: {
+  account: Account
+  onAction: (action: AccountAction, account: Account) => void
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            size="icon-sm"
+            variant="ghost"
+            aria-label={`Actions for ${account.name}`}
+          />
+        }
+      >
+        <MoreHorizontalIcon aria-hidden="true" />
+      </DropdownMenuTrigger>
+      {/* Content */}
+      <DropdownMenuContent align="end" className="w-44">
+        <DropdownMenuGroup>
+          <DropdownMenuItem onClick={() => onAction("open", account)}>
+            <EyeIcon aria-hidden="true" />
+            View account
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onAction("copy", account)}>
+            <CopyIcon aria-hidden="true" />
+            Copy name
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => onAction("plan", account)}>
+            <PencilIcon aria-hidden="true" />
+            Adjust plan
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+// ── Region (group) cells ──
+
+function RegionExpandButton({
+  label,
+  expanded,
+  onToggle,
+}: {
+  label: string
+  expanded: boolean
+  onToggle: () => void
+}) {
+  return (
+    <Button
+      type="button"
+      size="icon-sm"
+      variant="ghost"
+      aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+      aria-expanded={expanded}
+      className="text-muted-foreground hover:text-foreground size-6 shrink-0 p-0 shadow-none"
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        onToggle()
+      }}
+    >
+      <ChevronRightIcon className={cn(
+                    "size-3.5 shrink-0 transition-transform duration-150",
+                    expanded && "rotate-90"
+                  )} aria-hidden="true" />
+    </Button>
+  )
+}
+
+function RegionGroupCell({
+  row,
+  expanded,
+  onToggle,
+}: {
+  row: RegionGroupRow
+  expanded: boolean
+  onToggle: () => void
+}) {
+  const count = row.subRows?.length ?? 0
+
+  return (
+    <div
+      data-portfolio-row="region"
+      className="flex min-w-0 items-center gap-2"
+    >
+      <RegionExpandButton
+        label={row.region.name}
+        expanded={expanded}
+        onToggle={onToggle}
+      />
+      <GlobeIcon className="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
+      <span className="text-foreground min-w-0 truncate text-sm font-semibold">
+        {row.region.name}
+      </span>
+      <Badge variant="outline" className="shrink-0">
+        {count}
+      </Badge>
+    </div>
+  )
+}
+
+/** Right-aligned numeric slot shared by account and group rows. */
+function NumericSlot({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("flex w-full items-center justify-end", className)}>
+      {children}
+    </div>
+  )
+}
+
+export function createPortfolioColumns({
+  onAction,
+}: {
+  onAction: (action: AccountAction, account: Account) => void
+}): ColumnDef<PortfolioRow>[] {
+  return [
+    {
+      accessorFn: (row) =>
+        isAccountRow(row) ? row.account.name : row.region.name,
+      id: "account",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Account" column={column} />
+      ),
+      cell: ({ row }) =>
+        isAccountRow(row.original) ? (
+          <AccountNameCell account={row.original.account} />
+        ) : (
+          <RegionGroupCell
+            row={row.original}
+            expanded={row.getIsExpanded()}
+            onToggle={row.getToggleExpandedHandler()}
+          />
+        ),
+      enableHiding: false,
+      enableSorting: false,
+      minSize: 240,
+      meta: {
+        headerTitle: "Account",
+        autoSize: true,
+      },
+    },
+    {
+      accessorFn: (row) =>
+        isAccountRow(row) ? row.account.owner.name : row.region.summary,
+      id: "owner",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Owner" column={column} />
+      ),
+      cell: ({ row }) =>
+        isAccountRow(row.original) ? (
+          <OwnerCell owner={row.original.account.owner} />
+        ) : (
+          <span className="text-muted-foreground truncate text-sm">
+            {row.original.region.summary}
+          </span>
+        ),
+      size: 190,
+      enableSorting: false,
+      meta: {
+        headerTitle: "Owner",
+      },
+    },
+    {
+      accessorFn: (row) => (isAccountRow(row) ? row.account.tier : ""),
+      id: "tier",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Tier" column={column} />
+      ),
+      cell: ({ row }) =>
+        isAccountRow(row.original) ? (
+          <Badge variant={tierVariant[row.original.account.tier]}>
+            {row.original.account.tier}
+          </Badge>
+        ) : null,
+      size: 120,
+      enableSorting: false,
+      meta: {
+        headerTitle: "Tier",
+      },
+    },
+    {
+      accessorFn: (row) => (isAccountRow(row) ? row.account.health : ""),
+      id: "health",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Health" column={column} />
+      ),
+      cell: ({ row }) =>
+        isAccountRow(row.original) ? (
+          <Badge variant={healthVariant[row.original.account.health]}>
+            {row.original.account.health}
+          </Badge>
+        ) : null,
+      size: 120,
+      enableSorting: false,
+      meta: {
+        headerTitle: "Health",
+      },
+    },
+    {
+      accessorFn: (row) =>
+        isAccountRow(row) ? row.account.arr : sumArr(getRegionAccounts(row)),
+      id: "arr",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="ARR"
+          column={column}
+          className="w-full justify-end text-right"
+        />
+      ),
+      cell: ({ row }) => {
+        const value = isAccountRow(row.original)
+          ? row.original.account.arr
+          : sumArr(getRegionAccounts(row.original))
+        return (
+          <NumericSlot>
+            <span
+              className={cn(
+                "text-foreground text-sm tabular-nums",
+                isAccountRow(row.original) ? "font-medium" : "font-semibold"
+              )}
+            >
+              {formatCurrency(value)}
+            </span>
+          </NumericSlot>
+        )
+      },
+      size: 150,
+      enableSorting: false,
+      meta: {
+        headerTitle: "ARR",
+        headerClassName: "text-right!",
+        cellClassName: "text-right!",
+      },
+    },
+    {
+      accessorFn: (row) =>
+        isAccountRow(row)
+          ? row.account.nrr
+          : weightedNrr(getRegionAccounts(row)),
+      id: "nrr",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="NRR"
+          column={column}
+          className="w-full justify-end text-right"
+        />
+      ),
+      cell: ({ row }) => {
+        const value = isAccountRow(row.original)
+          ? row.original.account.nrr
+          : weightedNrr(getRegionAccounts(row.original))
+        return (
+          <NumericSlot>
+            <NrrValue value={value} />
+          </NumericSlot>
+        )
+      },
+      size: 120,
+      enableSorting: false,
+      meta: {
+        headerTitle: "NRR",
+        headerClassName: "text-right!",
+        cellClassName: "text-right!",
+      },
+    },
+    {
+      accessorFn: (row) =>
+        isAccountRow(row)
+          ? row.account.renewalAt
+          : (nextRenewal(getRegionAccounts(row))?.renewalAt ?? ""),
+      id: "renewal",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="Renewal"
+          column={column}
+          className="w-full justify-end text-right"
+        />
+      ),
+      cell: ({ row }) => {
+        if (isAccountRow(row.original)) {
+          return (
+            <div className="flex justify-end">
+              <RenewalCell account={row.original.account} />
+            </div>
+          )
+        }
+        const upcoming = nextRenewal(getRegionAccounts(row.original))
+        return (
+          <div className="flex justify-end">
+            {upcoming ? (
+              <span className="inline-flex items-baseline gap-1.5 text-sm whitespace-nowrap">
+                <span className="text-muted-foreground">Next</span>
+                <span className="text-foreground tabular-nums">
+                  {upcoming.renewalLabel}
+                </span>
+              </span>
+            ) : (
+              <span className="text-muted-foreground text-sm">--</span>
+            )}
+          </div>
+        )
+      },
+      size: 184,
+      minSize: 150,
+      enableSorting: false,
+      meta: {
+        headerTitle: "Renewal",
+        headerClassName: "text-right!",
+      },
+    },
+    {
+      id: "actions",
+      header: "",
+      cell: ({ row }) =>
+        isAccountRow(row.original) ? (
+          <div className="flex justify-end">
+            <AccountActionsCell
+              account={row.original.account}
+              onAction={onAction}
+            />
+          </div>
+        ) : null,
+      size: 56,
+      enableHiding: false,
+      enableSorting: false,
+    },
+  ]
+}
@@ -0,0 +1,620 @@
+import { useCallback, useMemo, useState, type ComponentProps } from "react"
+import { Badge } from "@/components/reui/badge"
+import {
+  DataGrid,
+  DataGridContainer,
+} from "@/components/reui/data-grid/data-grid"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import {
+  DataGridTable,
+  DataGridTableFootRow,
+  DataGridTableFootRowCell,
+} from "@/components/reui/data-grid/data-grid-table"
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  useReactTable,
+  type ExpandedState,
+  type VisibilityState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button } from "@cfdm/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@cfdm/ui/components/dropdown-menu"
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@cfdm/ui/components/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@cfdm/ui/components/input-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@cfdm/ui/components/popover"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@cfdm/ui/components/select"
+import { createPortfolioColumns, NrrValue, type AccountAction } from "./columns"
+import {
+  ACCOUNT_HEALTH_OPTIONS,
+  ACCOUNTS,
+  formatCompactCurrency,
+  formatCurrency,
+  REGIONS,
+  sumArr,
+  weightedNrr,
+  type Account,
+  type AccountHealth,
+  type AccountRow,
+  type PortfolioRow,
+  type RegionGroupRow,
+} from "./data"
+import { DownloadIcon, SearchIcon, XIcon, ActivityIcon, Settings2Icon, CheckIcon } from "lucide-react"
+
+type TableDensity = "compact" | "comfortable"
+
+type PortfolioColumnKey = "owner" | "tier" | "health" | "nrr" | "renewal"
+
+const TABLE_DENSITY_OPTIONS: { value: TableDensity; label: string }[] = [
+  { value: "compact", label: "Compact" },
+  { value: "comfortable", label: "Comfortable" },
+]
+
+const DISPLAY_COLUMN_OPTIONS: { key: PortfolioColumnKey; label: string }[] = [
+  { key: "owner", label: "Owner" },
+  { key: "tier", label: "Tier" },
+  { key: "health", label: "Health" },
+  { key: "nrr", label: "NRR" },
+  { key: "renewal", label: "Renewal" },
+]
+
+function getAccountSearchBlob(account: Account) {
+  return [
+    account.name,
+    account.industry,
+    account.owner.name,
+    account.owner.role,
+    account.tier,
+    account.health,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase()
+}
+
+function buildPortfolioRows(accounts: Account[]): RegionGroupRow[] {
+  return REGIONS.map((region) => {
+    const subRows: AccountRow[] = accounts
+      .filter((account) => account.regionId === region.id)
+      .map((account) => ({
+        kind: "account",
+        id: account.id,
+        region,
+        account,
+      }))
+
+    const row: RegionGroupRow = {
+      kind: "region",
+      id: region.id,
+      region,
+      subRows,
+    }
+
+    return row
+  }).filter((row) => (row.subRows?.length ?? 0) > 0)
+}
+
+function getExpandedRegionState(rows: RegionGroupRow[]): ExpandedState {
+  return rows.reduce<Record<string, boolean>>((expanded, row) => {
+    expanded[row.id] = true
+    return expanded
+  }, {})
+}
+
+function isExpanded(expanded: ExpandedState, rowId: string) {
+  if (expanded === true) return true
+  return expanded[rowId] === true
+}
+
+function PortfolioMetric({
+  label,
+  value,
+  variant = "secondary",
+}: {
+  label: string
+  value: string
+  variant?: ComponentProps<typeof Badge>["variant"]
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-2 sm:border-l sm:pl-3 sm:first:border-l-0 sm:first:pl-0">
+      <span className="text-muted-foreground truncate text-xs font-medium">
+        {label}
+      </span>
+      <Badge variant={variant} className="tabular-nums">
+        {value}
+      </Badge>
+    </div>
+  )
+}
+
+export function GroupedRevenueDataGridView() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedHealth, setSelectedHealth] = useState<AccountHealth[]>([])
+  const [tableDensity, setTableDensity] = useState<TableDensity>("comfortable")
+  const [visibleColumns, setVisibleColumns] = useState<
+    Record<PortfolioColumnKey, boolean>
+  >({
+    owner: true,
+    tier: false,
+    health: true,
+    nrr: true,
+    renewal: true,
+  })
+  const [expandedRows, setExpandedRows] = useState<ExpandedState>(() => {
+    // Start collapsed; open only the first region as a preview.
+    const [firstRegion] = buildPortfolioRows(ACCOUNTS)
+    return firstRegion ? { [firstRegion.id]: true } : {}
+  })
+
+  const filteredAccounts = useMemo(() => {
+    const normalizedQuery = searchQuery.trim().toLowerCase()
+
+    return ACCOUNTS.filter((account) => {
+      if (
+        normalizedQuery.length > 0 &&
+        !getAccountSearchBlob(account).includes(normalizedQuery)
+      ) {
+        return false
+      }
+
+      if (
+        selectedHealth.length > 0 &&
+        !selectedHealth.includes(account.health)
+      ) {
+        return false
+      }
+
+      return true
+    })
+  }, [searchQuery, selectedHealth])
+
+  const groupedRows = useMemo(
+    () => buildPortfolioRows(filteredAccounts),
+    [filteredAccounts]
+  )
+
+  const allGroupsExpanded =
+    groupedRows.length > 0 &&
+    groupedRows.every((row) => isExpanded(expandedRows, row.id))
+
+  const activeFilterCount = selectedHealth.length
+  const totalArr = sumArr(filteredAccounts)
+  const portfolioNrr = weightedNrr(filteredAccounts)
+  const atRiskArr = sumArr(
+    filteredAccounts.filter((account) => account.health === "At Risk")
+  )
+
+  const columnVisibility = useMemo<VisibilityState>(
+    () => ({
+      owner: visibleColumns.owner,
+      tier: visibleColumns.tier,
+      health: visibleColumns.health,
+      nrr: visibleColumns.nrr,
+      renewal: visibleColumns.renewal,
+    }),
+    [visibleColumns]
+  )
+
+  const handleHealthToggle = useCallback(
+    (health: AccountHealth, checked: boolean) => {
+      setSelectedHealth((current) => {
+        if (checked) {
+          return current.includes(health) ? current : [...current, health]
+        }
+
+        return current.filter((item) => item !== health)
+      })
+    },
+    []
+  )
+
+  const handleToggleGroups = useCallback(() => {
+    setExpandedRows(
+      allGroupsExpanded ? {} : getExpandedRegionState(groupedRows)
+    )
+  }, [allGroupsExpanded, groupedRows])
+
+  const handleAccountAction = useCallback(
+    (action: AccountAction, account: Account) => {
+      if (action === "open") {
+        toast.info("View account", {
+          description: `${account.name} / ${account.industry}`,
+        })
+        return
+      }
+
+      if (action === "copy") {
+        if (typeof navigator !== "undefined" && navigator.clipboard) {
+          void navigator.clipboard.writeText(account.name)
+        }
+
+        toast.success("Account name copied", {
+          description: account.name,
+        })
+        return
+      }
+
+      toast.message("Adjust plan", {
+        description: `Connect ${account.name} to your renewal or pricing flow.`,
+      })
+    },
+    []
+  )
+
+  const handleExport = useCallback(() => {
+    toast.success("Export portfolio", {
+      description: "Connect this action to your CSV or warehouse export.",
+    })
+  }, [])
+
+  const columns = useMemo(
+    () =>
+      createPortfolioColumns({
+        onAction: handleAccountAction,
+      }),
+    [handleAccountAction]
+  )
+
+  const table = useReactTable({
+    data: groupedRows,
+    columns,
+    getRowId: (row) => row.id,
+    getSubRows: (row) =>
+      row.kind === "region"
+        ? (row.subRows as PortfolioRow[] | undefined)
+        : undefined,
+    getRowCanExpand: (row) =>
+      row.original.kind === "region" && Boolean(row.original.subRows?.length),
+    state: {
+      columnVisibility,
+      expanded: expandedRows,
+    },
+    onExpandedChange: setExpandedRows,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+  })
+
+  function toggleColumn(key: PortfolioColumnKey, checked: boolean) {
+    setVisibleColumns((current) => ({
+      ...current,
+      [key]: checked,
+    }))
+  }
+
+  function clearFilters() {
+    setSearchQuery("")
+    setSelectedHealth([])
+  }
+
+  // Grand-total footer: one cell per visible column so it tracks column toggles.
+  const footerContent =
+    filteredAccounts.length > 0 ? (
+      <DataGridTableFootRow>
+        {table.getVisibleLeafColumns().map((column) => {
+          if (column.id === "account") {
+            return (
+              <DataGridTableFootRowCell key={column.id}>
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="text-foreground text-sm font-semibold">
+                    All Regions
+                  </span>
+                  <Badge variant="outline" className="tabular-nums">
+                    {filteredAccounts.length}
+                  </Badge>
+                </div>
+              </DataGridTableFootRowCell>
+            )
+          }
+
+          if (column.id === "arr") {
+            return (
+              <DataGridTableFootRowCell key={column.id} className="text-right!">
+                <span className="text-foreground text-sm font-semibold tabular-nums">
+                  {formatCurrency(totalArr)}
+                </span>
+              </DataGridTableFootRowCell>
+            )
+          }
+
+          if (column.id === "nrr") {
+            return (
+              <DataGridTableFootRowCell key={column.id} className="text-right!">
+                <div className="flex w-full items-center justify-end">
+                  <NrrValue value={portfolioNrr} />
+                </div>
+              </DataGridTableFootRowCell>
+            )
+          }
+
+          return <DataGridTableFootRowCell key={column.id} />
+        })}
+      </DataGridTableFootRow>
+    ) : undefined
+
+  return (
+    <DataGrid
+      table={table}
+      recordCount={filteredAccounts.length}
+      emptyMessage="No accounts match this view."
+      tableLayout={{
+        dense: tableDensity === "compact",
+        rowBorder: true,
+        footerBackground: true,
+        columnsVisibility: false,
+        columnsResizable: false,
+        columnsMovable: false,
+        width: "fixed",
+      }}
+      tableClassNames={{
+        body: "[&>tr:has([data-portfolio-row=region])+tr:has(>td:only-child:empty)>td]:!border-b-0",
+        bodyRow:
+          "group/portfolio-row [&>td]:h-11 [&:has([data-portfolio-row=region])>td]:h-11",
+        edgeCell: "first:ps-3 last:pe-3 lg:first:ps-4 lg:last:pe-4",
+      }}
+    >
+      <section className="flex w-full max-w-7xl flex-col px-4 py-8 sm:px-6 lg:px-8">
+        <Frame>
+          {/* Header */}
+          <FrameHeader className="flex-col items-start gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex min-w-0 flex-col gap-1">
+              <FrameTitle>Revenue By Region</FrameTitle>
+              <FrameDescription>
+                Net retention and renewals across the book.
+              </FrameDescription>
+            </div>
+
+            <div className="flex min-w-0 flex-wrap items-center gap-3">
+              <PortfolioMetric
+                label="Total ARR"
+                value={formatCompactCurrency(totalArr)}
+                variant="outline"
+              />
+              <PortfolioMetric
+                label="Portfolio NRR"
+                value={`${portfolioNrr}%`}
+                variant={
+                  portfolioNrr >= 100 ? "success-light" : "warning-light"
+                }
+              />
+              <PortfolioMetric
+                label="At-Risk ARR"
+                value={formatCompactCurrency(atRiskArr)}
+                variant={atRiskArr > 0 ? "destructive-light" : "secondary"}
+              />
+              <Button type="button" variant="outline" onClick={handleExport}>
+                <DownloadIcon data-icon="inline-start" aria-hidden="true" />
+                Export
+              </Button>
+            </div>
+          </FrameHeader>
+
+          <FramePanel className="bg-card p-0! shadow-none!">
+            {/* Toolbar */}
+            <div className="flex flex-col gap-3 border-b px-3 py-3 lg:flex-row lg:items-center lg:justify-between lg:px-4">
+              <InputGroup className="w-full min-w-0 lg:max-w-xs">
+                <InputGroupAddon align="inline-start">
+                  <SearchIcon className="text-muted-foreground size-4" aria-hidden="true" />
+                </InputGroupAddon>
+                <InputGroupInput
+                  value={searchQuery}
+                  onChange={(event) => setSearchQuery(event.target.value)}
+                  placeholder="Search accounts..."
+                  aria-label="Search accounts"
+                />
+                {searchQuery.length > 0 ? (
+                  <InputGroupAddon align="inline-end">
+                    <InputGroupButton
+                      size="icon-xs"
+                      aria-label="Clear search"
+                      onClick={() => setSearchQuery("")}
+                    >
+                      <XIcon className="size-4" aria-hidden="true" />
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                ) : null}
+              </InputGroup>
+
+              <div className="flex min-w-0 flex-wrap items-center gap-1.5 lg:justify-end">
+                <DropdownMenu modal={false}>
+                  <DropdownMenuTrigger
+                    render={
+                      <Button type="button" variant="outline">
+                        <ActivityIcon data-icon="inline-start" aria-hidden="true" />
+                        Health
+                        {activeFilterCount > 0 ? (
+                          <Badge variant="secondary">{activeFilterCount}</Badge>
+                        ) : null}
+                      </Button>
+                    }
+                  />
+                  <DropdownMenuContent align="end" className="min-w-48">
+                    <DropdownMenuGroup>
+                      <DropdownMenuLabel>Account health</DropdownMenuLabel>
+                      {ACCOUNT_HEALTH_OPTIONS.map((health) => (
+                        <DropdownMenuCheckboxItem
+                          key={health}
+                          checked={selectedHealth.includes(health)}
+                          closeOnClick={false}
+                          onCheckedChange={(checked) =>
+                            handleHealthToggle(health, checked === true)
+                          }
+                        >
+                          {health}
+                        </DropdownMenuCheckboxItem>
+                      ))}
+                    </DropdownMenuGroup>
+                    {activeFilterCount > 0 ? (
+                      <>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          closeOnClick={false}
+                          onClick={() => setSelectedHealth([])}
+                        >
+                          Reset health
+                        </DropdownMenuItem>
+                      </>
+                    ) : null}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                <Popover>
+                  <PopoverTrigger
+                    render={
+                      <Button type="button" variant="outline">
+                        <Settings2Icon data-icon="inline-start" aria-hidden="true" />
+                        Display
+                      </Button>
+                    }
+                  />
+                  <PopoverContent align="end" className="w-[300px] p-0">
+                    <FieldGroup className="gap-3 px-3.5 py-3">
+                      <div className="flex flex-col gap-2">
+                        <div className="text-muted-foreground text-xs font-medium">
+                          Table
+                        </div>
+                        <Field
+                          orientation="horizontal"
+                          className="min-h-9 items-center justify-between gap-3"
+                        >
+                          <FieldLabel className="text-sm font-normal">
+                            Density
+                          </FieldLabel>
+                          <Select
+                            value={tableDensity}
+                            onValueChange={(value) =>
+                              setTableDensity(value as TableDensity)
+                            }
+                          >
+                            <SelectTrigger
+                              size="sm"
+                              className="w-[132px] shrink-0"
+                            >
+                              <SelectValue>
+                                {
+                                  TABLE_DENSITY_OPTIONS.find(
+                                    (option) => option.value === tableDensity
+                                  )?.label
+                                }
+                              </SelectValue>
+                            </SelectTrigger>
+                            <SelectContent align="end">
+                              <SelectGroup>
+                                {TABLE_DENSITY_OPTIONS.map((option) => (
+                                  <SelectItem
+                                    key={option.value}
+                                    value={option.value}
+                                  >
+                                    {option.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectGroup>
+                            </SelectContent>
+                          </Select>
+                        </Field>
+                      </div>
+
+                      <FieldSeparator className="-mx-3.5" />
+
+                      <div className="flex flex-col gap-2">
+                        <div className="text-muted-foreground text-xs font-medium">
+                          Display properties
+                        </div>
+                        <div className="flex flex-wrap gap-1.5">
+                          {DISPLAY_COLUMN_OPTIONS.map((option) => {
+                            const active = visibleColumns[option.key]
+
+                            return (
+                              <Button
+                                key={option.key}
+                                type="button"
+                                size="sm"
+                                variant={active ? "secondary" : "outline"}
+                                className={cn(
+                                  "rounded-full",
+                                  active && "border-foreground/10"
+                                )}
+                                aria-pressed={active}
+                                onClick={() =>
+                                  toggleColumn(option.key, !active)
+                                }
+                              >
+                                {active ? (
+                                  <CheckIcon className="size-4" aria-hidden="true" />
+                                ) : null}
+                                {option.label}
+                              </Button>
+                            )
+                          })}
+                        </div>
+                      </div>
+                    </FieldGroup>
+                  </PopoverContent>
+                </Popover>
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleToggleGroups}
+                >
+                  {allGroupsExpanded ? "Collapse all" : "Expand all"}
+                </Button>
+
+                {searchQuery.length > 0 || selectedHealth.length > 0 ? (
+                  <Button type="button" variant="ghost" onClick={clearFilters}>
+                    Clear
+                  </Button>
+                ) : null}
+              </div>
+            </div>
+
+            {/* Grouped grid */}
+            <DataGridContainer>
+              <DataGridScrollArea>
+                <DataGridTable footerContent={footerContent} />
+              </DataGridScrollArea>
+            </DataGridContainer>
+          </FramePanel>
+        </Frame>
+      </section>
+    </DataGrid>
+  )
+}
@@ -0,0 +1,459 @@
+export type RegionId = "na" | "emea" | "apac" | "latam"
+
+export type AccountTier = "Enterprise" | "Growth" | "Startup"
+
+export type AccountHealth = "Healthy" | "Watch" | "At Risk"
+
+export interface AccountOwner {
+  id: string
+  name: string
+  initials: string
+  avatarSrc?: string
+  role: string
+}
+
+export interface Region {
+  id: RegionId
+  name: string
+  summary: string
+  order: number
+}
+
+export interface Account {
+  id: string
+  name: string
+  industry: string
+  regionId: RegionId
+  owner: AccountOwner
+  tier: AccountTier
+  health: AccountHealth
+  arr: number
+  nrr: number
+  renewalAt: string
+  renewalLabel: string
+}
+
+// ── Row union (TanStack nested rows: region group → account leaf) ──
+
+export interface RegionGroupRow {
+  kind: "region"
+  id: string
+  region: Region
+  subRows?: AccountRow[]
+}
+
+export interface AccountRow {
+  kind: "account"
+  id: string
+  region: Region
+  account: Account
+}
+
+export type PortfolioRow = RegionGroupRow | AccountRow
+
+export const REGION_ORDER: RegionId[] = ["na", "emea", "apac", "latam"]
+
+export const ACCOUNT_TIERS: AccountTier[] = ["Enterprise", "Growth", "Startup"]
+
+export const ACCOUNT_HEALTH_OPTIONS: AccountHealth[] = [
+  "Healthy",
+  "Watch",
+  "At Risk",
+]
+
+export const REGIONS: Region[] = [
+  {
+    id: "na",
+    name: "North America",
+    summary: "US and Canada strategic accounts",
+    order: 1,
+  },
+  {
+    id: "emea",
+    name: "EMEA",
+    summary: "Europe, Middle East, and Africa book",
+    order: 2,
+  },
+  {
+    id: "apac",
+    name: "APAC",
+    summary: "Asia Pacific growth territory",
+    order: 3,
+  },
+  {
+    id: "latam",
+    name: "LATAM",
+    summary: "Latin America emerging accounts",
+    order: 4,
+  },
+]
+
+export const ACCOUNT_OWNERS: AccountOwner[] = [
+  {
+    id: "rina",
+    name: "Rina Holt",
+    initials: "RH",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=96&h=96&dpr=2&q=80",
+    role: "Enterprise AE",
+  },
+  {
+    id: "vale",
+    name: "Vale Aksoy",
+    initials: "VA",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=96&h=96&dpr=2&q=80",
+    role: "Strategic AE",
+  },
+  {
+    id: "noor",
+    name: "Noor Albright",
+    initials: "NA",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=96&h=96&dpr=2&q=80",
+    role: "Account Manager",
+  },
+  {
+    id: "sora",
+    name: "Sora Min",
+    initials: "SM",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=96&h=96&dpr=2&q=80",
+    role: "Growth AE",
+  },
+  {
+    id: "evren",
+    name: "Evren Blake",
+    initials: "EB",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?w=96&h=96&dpr=2&q=80",
+    role: "Enterprise AE",
+  },
+  {
+    id: "mina",
+    name: "Mina Rowe",
+    initials: "MR",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1552058544-f2b08422138a?w=96&h=96&dpr=2&q=80",
+    role: "Account Manager",
+  },
+]
+
+function owner(id: AccountOwner["id"]) {
+  const match = ACCOUNT_OWNERS.find((item) => item.id === id)
+
+  if (!match) {
+    throw new Error(`Unknown account owner: ${id}`)
+  }
+
+  return match
+}
+
+export const ACCOUNTS: Account[] = [
+  {
+    id: "acc-northwind",
+    name: "Northwind Trading",
+    industry: "Logistics",
+    regionId: "na",
+    owner: owner("rina"),
+    tier: "Enterprise",
+    health: "Healthy",
+    arr: 920000,
+    nrr: 124,
+    renewalAt: "2026-09-14",
+    renewalLabel: "Sep 14, 2026",
+  },
+  {
+    id: "acc-cedar",
+    name: "Cedar Health Systems",
+    industry: "Healthcare",
+    regionId: "na",
+    owner: owner("evren"),
+    tier: "Enterprise",
+    health: "Watch",
+    arr: 760000,
+    nrr: 103,
+    renewalAt: "2026-07-02",
+    renewalLabel: "Jul 2, 2026",
+  },
+  {
+    id: "acc-vantage",
+    name: "Vantage Robotics",
+    industry: "Manufacturing",
+    regionId: "na",
+    owner: owner("rina"),
+    tier: "Growth",
+    health: "Healthy",
+    arr: 410000,
+    nrr: 118,
+    renewalAt: "2026-11-21",
+    renewalLabel: "Nov 21, 2026",
+  },
+  {
+    id: "acc-brightline",
+    name: "Brightline Media",
+    industry: "Media",
+    regionId: "na",
+    owner: owner("mina"),
+    tier: "Growth",
+    health: "At Risk",
+    arr: 285000,
+    nrr: 92,
+    renewalAt: "2026-06-30",
+    renewalLabel: "Jun 30, 2026",
+  },
+  {
+    id: "acc-summit",
+    name: "Summit Analytics",
+    industry: "Software",
+    regionId: "na",
+    owner: owner("evren"),
+    tier: "Startup",
+    health: "Healthy",
+    arr: 138000,
+    nrr: 129,
+    renewalAt: "2026-10-09",
+    renewalLabel: "Oct 9, 2026",
+  },
+  {
+    id: "acc-helvetia",
+    name: "Helvetia Pay",
+    industry: "Fintech",
+    regionId: "emea",
+    owner: owner("vale"),
+    tier: "Enterprise",
+    health: "Healthy",
+    arr: 845000,
+    nrr: 121,
+    renewalAt: "2026-08-18",
+    renewalLabel: "Aug 18, 2026",
+  },
+  {
+    id: "acc-nordwind",
+    name: "Nordwind Energy",
+    industry: "Energy",
+    regionId: "emea",
+    owner: owner("noor"),
+    tier: "Enterprise",
+    health: "Watch",
+    arr: 690000,
+    nrr: 99,
+    renewalAt: "2026-07-27",
+    renewalLabel: "Jul 27, 2026",
+  },
+  {
+    id: "acc-albion",
+    name: "Albion Retail Group",
+    industry: "Retail",
+    regionId: "emea",
+    owner: owner("vale"),
+    tier: "Growth",
+    health: "At Risk",
+    arr: 320000,
+    nrr: 88,
+    renewalAt: "2026-06-24",
+    renewalLabel: "Jun 24, 2026",
+  },
+  {
+    id: "acc-lumen",
+    name: "Lumen Telecom",
+    industry: "Telecom",
+    regionId: "emea",
+    owner: owner("noor"),
+    tier: "Growth",
+    health: "Healthy",
+    arr: 455000,
+    nrr: 115,
+    renewalAt: "2026-12-03",
+    renewalLabel: "Dec 3, 2026",
+  },
+  {
+    id: "acc-castellan",
+    name: "Castellan Bank",
+    industry: "Banking",
+    regionId: "emea",
+    owner: owner("vale"),
+    tier: "Enterprise",
+    health: "Healthy",
+    arr: 980000,
+    nrr: 109,
+    renewalAt: "2026-09-30",
+    renewalLabel: "Sep 30, 2026",
+  },
+  {
+    id: "acc-sakura",
+    name: "Sakura Mobility",
+    industry: "Mobility",
+    regionId: "apac",
+    owner: owner("sora"),
+    tier: "Growth",
+    health: "Healthy",
+    arr: 372000,
+    nrr: 126,
+    renewalAt: "2026-10-22",
+    renewalLabel: "Oct 22, 2026",
+  },
+  {
+    id: "acc-pacific",
+    name: "Pacific Cloud",
+    industry: "Software",
+    regionId: "apac",
+    owner: owner("mina"),
+    tier: "Enterprise",
+    health: "Watch",
+    arr: 615000,
+    nrr: 101,
+    renewalAt: "2026-08-05",
+    renewalLabel: "Aug 5, 2026",
+  },
+  {
+    id: "acc-banyan",
+    name: "Banyan AgriTech",
+    industry: "Agriculture",
+    regionId: "na",
+    owner: owner("sora"),
+    tier: "Startup",
+    health: "Healthy",
+    arr: 124000,
+    nrr: 132,
+    renewalAt: "2026-11-12",
+    renewalLabel: "Nov 12, 2026",
+  },
+  {
+    id: "acc-meridian",
+    name: "Meridian Shipping",
+    industry: "Logistics",
+    regionId: "apac",
+    owner: owner("mina"),
+    tier: "Growth",
+    health: "At Risk",
+    arr: 298000,
+    nrr: 90,
+    renewalAt: "2026-06-27",
+    renewalLabel: "Jun 27, 2026",
+  },
+  {
+    id: "acc-hanwoo",
+    name: "Hanwoo Foods",
+    industry: "Food and Beverage",
+    regionId: "apac",
+    owner: owner("sora"),
+    tier: "Growth",
+    health: "Healthy",
+    arr: 340000,
+    nrr: 112,
+    renewalAt: "2026-09-08",
+    renewalLabel: "Sep 8, 2026",
+  },
+  {
+    id: "acc-andes",
+    name: "Andes Fintech",
+    industry: "Fintech",
+    regionId: "na",
+    owner: owner("noor"),
+    tier: "Growth",
+    health: "Healthy",
+    arr: 268000,
+    nrr: 122,
+    renewalAt: "2026-10-30",
+    renewalLabel: "Oct 30, 2026",
+  },
+  {
+    id: "acc-costera",
+    name: "Costera Travel",
+    industry: "Travel",
+    regionId: "latam",
+    owner: owner("rina"),
+    tier: "Startup",
+    health: "Watch",
+    arr: 96000,
+    nrr: 104,
+    renewalAt: "2026-07-15",
+    renewalLabel: "Jul 15, 2026",
+  },
+  {
+    id: "acc-verde",
+    name: "Verde Logistics",
+    industry: "Logistics",
+    regionId: "latam",
+    owner: owner("evren"),
+    tier: "Growth",
+    health: "Healthy",
+    arr: 312000,
+    nrr: 117,
+    renewalAt: "2026-12-09",
+    renewalLabel: "Dec 9, 2026",
+  },
+  {
+    id: "acc-pampa",
+    name: "Pampa Retail",
+    industry: "Retail",
+    regionId: "latam",
+    owner: owner("sora"),
+    tier: "Startup",
+    health: "At Risk",
+    arr: 142000,
+    nrr: 89,
+    renewalAt: "2026-06-22",
+    renewalLabel: "Jun 22, 2026",
+  },
+  {
+    id: "acc-tucan",
+    name: "Tucan Media",
+    industry: "Media",
+    regionId: "emea",
+    owner: owner("noor"),
+    tier: "Growth",
+    health: "Healthy",
+    arr: 205000,
+    nrr: 113,
+    renewalAt: "2026-09-19",
+    renewalLabel: "Sep 19, 2026",
+  },
+]
+
+// ── Formatting + aggregate helpers (raw values stay in data, formatting here) ──
+
+const CURRENCY_FORMATTER = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 0,
+})
+
+export function formatCurrency(value: number) {
+  return CURRENCY_FORMATTER.format(value)
+}
+
+/** Compact money for dense KPI/subtotal slots: 2_513_000 -> "$2.51M". */
+export function formatCompactCurrency(value: number) {
+  if (Math.abs(value) >= 1_000_000) {
+    return `$${(value / 1_000_000).toFixed(2)}M`
+  }
+  if (Math.abs(value) >= 1_000) {
+    return `$${Math.round(value / 1_000)}K`
+  }
+  return formatCurrency(value)
+}
+
+export function sumArr(accounts: Account[]) {
+  return accounts.reduce((total, account) => total + account.arr, 0)
+}
+
+/** ARR-weighted NRR so big accounts move the group average correctly. */
+export function weightedNrr(accounts: Account[]) {
+  const totalArr = sumArr(accounts)
+  if (totalArr === 0) return 0
+  const weighted = accounts.reduce(
+    (total, account) => total + account.arr * account.nrr,
+    0
+  )
+  return Math.round(weighted / totalArr)
+}
+
+/** Earliest renewal date in the group (ISO strings sort lexicographically). */
+export function nextRenewal(accounts: Account[]) {
+  return accounts.reduce<Account | null>((earliest, account) => {
+    if (!earliest || account.renewalAt < earliest.renewalAt) return account
+    return earliest
+  }, null)
+}
@@ -0,0 +1,15 @@
+import { GroupedRevenueDataGridView } from "./components/data-grid-view"
+
+export function Page() {
+  return (
+    <main
+      className="mx-auto flex min-h-svh w-full items-start justify-center p-8 pt-12"
+      aria-labelledby="page-heading"
+    >
+      <h1 id="page-heading" className="sr-only">
+        Revenue by region grouped data grid
+      </h1>
+      <GroupedRevenueDataGridView />
+    </main>
+  )
+}
@@ -0,0 +1,48 @@
+export type ToolbarOption<T extends string> = {
+  value: T
+  label: string
+}
+
+export const EXPORT_AUDIENCE_OPTIONS = [
+  { value: "everyone", label: "Everyone" },
+  { value: "ops-leads", label: "Ops leads" },
+  { value: "finance-reviewers", label: "Finance reviewers" },
+  { value: "client-owners", label: "Client owners" },
+] as const satisfies readonly ToolbarOption<string>[]
+
+export const EXPORT_SCOPE_OPTIONS = [
+  { value: "all-workspaces", label: "All workspaces" },
+  { value: "harbor-field", label: "Harbor field" },
+  { value: "market-lab", label: "Market lab" },
+  { value: "support-desk", label: "Support desk" },
+] as const satisfies readonly ToolbarOption<string>[]
+
+export const EXPORT_RANGE_OPTIONS = [
+  { value: "last-30-days", label: "Last 30 days" },
+  { value: "this-quarter", label: "This quarter" },
+  { value: "previous-cycle", label: "Previous cycle" },
+  { value: "custom-window", label: "Custom window" },
+] as const satisfies readonly ToolbarOption<string>[]
+
+export const EXPORT_FORMAT_OPTIONS = [
+  {
+    value: "csv",
+    label: "CSV bundle",
+    description: "Spreadsheet-ready activity rows",
+  },
+  {
+    value: "pdf",
+    label: "PDF brief",
+    description: "A concise review packet for stakeholders",
+  },
+  {
+    value: "schedule",
+    label: "Schedule delivery",
+    description: "Send this export every Friday morning",
+  },
+] as const
+
+export type ExportAudience = (typeof EXPORT_AUDIENCE_OPTIONS)[number]["value"]
+export type ExportScope = (typeof EXPORT_SCOPE_OPTIONS)[number]["value"]
+export type ExportRange = (typeof EXPORT_RANGE_OPTIONS)[number]["value"]
+export type ExportFormat = (typeof EXPORT_FORMAT_OPTIONS)[number]["value"]
@@ -0,0 +1,247 @@
+import { useState } from "react"
+import { IconStack } from "@/components/reui/icon-stack"
+import { toast } from "sonner"
+
+import { Button } from "@cfdm/ui/components/button"
+import {
+  ButtonGroup,
+  ButtonGroupSeparator,
+} from "@cfdm/ui/components/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@cfdm/ui/components/dropdown-menu"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@cfdm/ui/components/empty"
+import { Separator } from "@cfdm/ui/components/separator"
+import {
+  EXPORT_AUDIENCE_OPTIONS,
+  EXPORT_FORMAT_OPTIONS,
+  EXPORT_RANGE_OPTIONS,
+  EXPORT_SCOPE_OPTIONS,
+  type ExportAudience,
+  type ExportFormat,
+  type ExportRange,
+  type ExportScope,
+  type ToolbarOption,
+} from "./data"
+import { ChevronDownIcon, PlayIcon, FileDownIcon, BookOpenIcon, CalendarClockIcon, ArchiveIcon } from "lucide-react"
+
+type ToolbarFilterProps<T extends string> = {
+  label: string
+  value: T
+  options: readonly ToolbarOption<T>[]
+  onValueChange: (value: T) => void
+}
+
+function getOptionLabel<T extends string>(
+  options: readonly ToolbarOption<T>[],
+  value: T
+) {
+  return options.find((option) => option.value === value)?.label ?? value
+}
+
+function ToolbarFilter<T extends string>({
+  label,
+  value,
+  options,
+  onValueChange,
+}: ToolbarFilterProps<T>) {
+  const selectedLabel = getOptionLabel(options, value)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            aria-label={`${label}: ${selectedLabel}`}
+          >
+            <span className="truncate">{selectedLabel}</span>
+            <ChevronDownIcon data-icon="inline-end" aria-hidden="true" />
+          </Button>
+        }
+      />
+
+      <DropdownMenuContent align="start" className="min-w-44">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(nextValue) => {
+            if (nextValue !== null) {
+              onValueChange(nextValue as T)
+            }
+          }}
+        >
+          {options.map((option) => (
+            <DropdownMenuRadioItem
+              key={option.value}
+              value={option.value}
+              closeOnClick
+            >
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export function EmptyState() {
+  const [audience, setAudience] = useState<ExportAudience>(
+    EXPORT_AUDIENCE_OPTIONS[0].value
+  )
+  const [scope, setScope] = useState<ExportScope>(EXPORT_SCOPE_OPTIONS[0].value)
+  const [range, setRange] = useState<ExportRange>(EXPORT_RANGE_OPTIONS[0].value)
+
+  const audienceLabel = getOptionLabel(EXPORT_AUDIENCE_OPTIONS, audience)
+  const scopeLabel = getOptionLabel(EXPORT_SCOPE_OPTIONS, scope)
+  const rangeLabel = getOptionLabel(EXPORT_RANGE_OPTIONS, range)
+
+  const showExportToast = (format: ExportFormat = "csv") => {
+    const formatOption =
+      EXPORT_FORMAT_OPTIONS.find((option) => option.value === format) ??
+      EXPORT_FORMAT_OPTIONS[0]
+
+    toast.message(`${formatOption.label} is ready to wire`, {
+      description: `${formatOption.description}. ${audienceLabel} · ${scopeLabel} · ${rangeLabel}. Connect this action to your export job when activity records exist.`,
+    })
+  }
+
+  return (
+    <section
+      className="flex min-h-[430px] w-full max-w-4xl flex-col"
+      aria-labelledby="export-ledger-heading"
+    >
+      {/* Header */}
+      <div className="flex flex-col gap-3 pb-4 lg:flex-row lg:items-end lg:justify-between">
+        {/* Heading */}
+        <div className="flex min-w-0 flex-col gap-5">
+          {/* Title and Description */}
+          <div className="flex flex-col gap-0.5">
+            {/* Title */}
+            <h2
+              id="export-ledger-heading"
+              className="text-2xl font-semibold tracking-tight"
+            >
+              Activity Exports
+            </h2>
+            {/* Description */}
+            <p className="text-muted-foreground text-sm">
+              Download scoped activity packets for billing review, staffing
+              audits, and client handoffs.
+            </p>
+          </div>
+
+          {/* Filters */}
+          <div className="flex flex-wrap gap-2">
+            <ToolbarFilter
+              label="Audience"
+              value={audience}
+              options={EXPORT_AUDIENCE_OPTIONS}
+              onValueChange={setAudience}
+            />
+            <ToolbarFilter
+              label="Workspace"
+              value={scope}
+              options={EXPORT_SCOPE_OPTIONS}
+              onValueChange={setScope}
+            />
+            <ToolbarFilter
+              label="Date range"
+              value={range}
+              options={EXPORT_RANGE_OPTIONS}
+              onValueChange={setRange}
+            />
+          </div>
+        </div>
+
+        {/* Download Action */}
+        <ButtonGroup className="w-full **:data-[slot=button]:border-r-0 sm:w-fit">
+          <Button
+            type="button"
+            className="flex-1 sm:flex-none"
+            onClick={() => showExportToast()}
+          >
+            <PlayIcon className="fill-current" data-icon="inline-start" aria-hidden="true" />
+            <span>Execute</span>
+          </Button>
+
+          <ButtonGroupSeparator className="bg-primary/72" />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  type="button"
+                  size="icon"
+                  className="border-primary-foreground/20 rounded-l-none border-l"
+                  aria-label="Open download options"
+                />
+              }
+            >
+              <ChevronDownIcon aria-hidden="true" />
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent sideOffset={8} align="end" className="w-52">
+              <DropdownMenuGroup>
+                <DropdownMenuItem onClick={() => showExportToast("csv")}>
+                  <FileDownIcon aria-hidden="true" />
+                  CSV bundle
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => showExportToast("pdf")}>
+                  <BookOpenIcon aria-hidden="true" />
+                  PDF brief
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => showExportToast("schedule")}>
+                  <CalendarClockIcon aria-hidden="true" />
+                  Schedule delivery
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ButtonGroup>
+      </div>
+
+      <Separator />
+
+      {/* Empty State */}
+      <div className="flex flex-1 items-center justify-center py-14 sm:py-16">
+        <Empty className="max-w-md flex-none bg-transparent p-0">
+          <EmptyHeader className="gap-5 text-center">
+            <EmptyMedia className="mb-0">
+              <IconStack aria-hidden="true">
+                <ArchiveIcon strokeWidth="1.9" aria-hidden="true" />
+              </IconStack>
+            </EmptyMedia>
+
+            {/* Empty State Content */}
+            <div className="flex flex-col items-center gap-2">
+              <EmptyTitle className="text-base font-semibold tracking-tight">
+                No exportable activity yet
+              </EmptyTitle>
+              <EmptyDescription className="max-w-sm text-sm/relaxed">
+                Capture approved activity and this view will assemble your next
+                review packet.
+              </EmptyDescription>
+            </div>
+          </EmptyHeader>
+        </Empty>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,15 @@
+import { EmptyState } from "./components/empty-state"
+
+export function Page() {
+  return (
+    <main
+      className="flex min-h-svh w-full items-center justify-center p-4 sm:p-8 md:p-10"
+      aria-labelledby="page-heading"
+    >
+      <h1 id="page-heading" className="sr-only">
+        Activity exports empty state
+      </h1>
+      <EmptyState />
+    </main>
+  )
+}
@@ -1,5 +1,3 @@
-"use client"
-
 import { useState, type ComponentProps, type ReactNode } from "react"
 import { Badge } from "@/components/reui/badge"
 import {
@@ -0,0 +1,243 @@
+import { type ReactNode } from "react"
+import type { BadgeProps } from "@/components/reui/badge"
+import { CreditCardIcon, UsersIcon, RepeatIcon, BanknoteIcon, ShieldAlertIcon } from "lucide-react"
+
+// ── Types ──
+
+export type EndpointStatus = "active" | "failing" | "disabled"
+
+export type EndpointAlertTone = "success" | "warning" | "critical"
+
+export interface EndpointAlert {
+  id: string
+  tone: EndpointAlertTone
+  badgeLabel: string
+  detail: string
+}
+
+export interface WebhookEvent {
+  id: string
+  label: string
+}
+
+export interface WebhookEndpoint {
+  id: string
+  name: string
+  url: string
+  description: string
+  events: WebhookEvent[]
+  status: EndpointStatus
+  secret: string
+  lastDelivery: string | null
+  secretRotation: string
+  owner: string
+  icon: ReactNode
+}
+
+export type WebhookEndpointActionHandlers = {
+  onManage: (endpoint: WebhookEndpoint) => void
+  onViewDeliveries: (endpoint: WebhookEndpoint) => void
+  onRotateSecret: (endpoint: WebhookEndpoint) => void
+  onRemove: (endpoint: WebhookEndpoint) => void
+}
+
+// ── Config ──
+
+export const STATUS_CONFIG: Record<
+  EndpointStatus,
+  { label: string; variant: BadgeProps["variant"] }
+> = {
+  active: { label: "Delivering", variant: "success-light" },
+  failing: { label: "Retrying", variant: "warning-light" },
+  disabled: { label: "Paused", variant: "outline" },
+}
+
+export const ALERT_CONFIG: Record<
+  EndpointAlertTone,
+  {
+    toneClassName: string
+    badgeVariant: BadgeProps["variant"]
+  }
+> = {
+  success: {
+    toneClassName: "text-green-600",
+    badgeVariant: "success",
+  },
+  warning: {
+    toneClassName: "text-warning",
+    badgeVariant: "warning",
+  },
+  critical: {
+    toneClassName: "text-destructive",
+    badgeVariant: "destructive",
+  },
+}
+
+// ── Data ──
+
+export const ENDPOINTS: WebhookEndpoint[] = [
+  {
+    id: "endpoint-billing",
+    name: "Billing Pipeline",
+    url: "https://events.acme.dev/webhooks/billing",
+    description: "Invoices and disputes.",
+    events: [
+      { id: "invoice.paid", label: "invoice.paid" },
+      { id: "invoice.failed", label: "invoice.failed" },
+      { id: "charge.refunded", label: "charge.refunded" },
+    ],
+    status: "active",
+    secret: "whsec_1h7qv4r9m2x6k8p3",
+    lastDelivery: "2m ago",
+    secretRotation: "12d ago",
+    owner: "Revenue",
+    icon: (
+      <CreditCardIcon aria-hidden="true" />
+    ),
+  },
+  {
+    id: "endpoint-customers",
+    name: "Customer Ledger",
+    url: "https://ingest.acme.dev/webhooks/customers",
+    description: "Customer lifecycle events.",
+    events: [
+      { id: "customer.created", label: "customer.created" },
+      { id: "customer.updated", label: "customer.updated" },
+    ],
+    status: "active",
+    secret: "whsec_8m1p6q4r2v7x3k9n",
+    lastDelivery: "14m ago",
+    secretRotation: "28d ago",
+    owner: "Data",
+    icon: (
+      <UsersIcon aria-hidden="true" />
+    ),
+  },
+  {
+    id: "endpoint-subscriptions",
+    name: "Subscription Orchestrator",
+    url: "https://ops.acme.dev/webhooks/subscriptions",
+    description: "Retries and plan changes.",
+    events: [
+      { id: "subscription.activated", label: "subscription.activated" },
+      { id: "subscription.cancelled", label: "subscription.cancelled" },
+      { id: "invoice.failed", label: "invoice.failed" },
+    ],
+    status: "failing",
+    secret: "whsec_4x8m1r6q3p9k2v7n",
+    lastDelivery: "9m ago",
+    secretRotation: "5d left",
+    owner: "Lifecycle",
+    icon: (
+      <RepeatIcon aria-hidden="true" />
+    ),
+  },
+  {
+    id: "endpoint-finance",
+    name: "Finance Reconciliation",
+    url: "https://ledger.acme.dev/webhooks/payouts",
+    description: "Payout sync to ledger.",
+    events: [
+      { id: "payout.completed", label: "payout.completed" },
+      { id: "balance.updated", label: "balance.updated" },
+    ],
+    status: "disabled",
+    secret: "whsec_7v3q9m2k6r1p4x8n",
+    lastDelivery: null,
+    secretRotation: "Paused",
+    owner: "Finance",
+    icon: (
+      <BanknoteIcon aria-hidden="true" />
+    ),
+  },
+  {
+    id: "endpoint-risk",
+    name: "Risk Intake",
+    url: "https://risk.acme.dev/webhooks/disputes",
+    description: "Disputes and refund review.",
+    events: [
+      { id: "dispute.opened", label: "dispute.opened" },
+      { id: "charge.refunded", label: "charge.refunded" },
+    ],
+    status: "active",
+    secret: "whsec_5q9r2m7x1k4v8p3n",
+    lastDelivery: "47m ago",
+    secretRotation: "9d ago",
+    owner: "Risk",
+    icon: (
+      <ShieldAlertIcon aria-hidden="true" />
+    ),
+  },
+]
+
+// ── Helpers ──
+
+export function parseMinutesAgo(label: string | null) {
+  const match = label?.match(/^(\d+)m ago$/)
+
+  return match ? Number(match[1]) : null
+}
+
+export function parseRotationDaysAgo(label: string) {
+  const match = label.match(/^(\d+)d ago$/)
+
+  return match ? Number(match[1]) : null
+}
+
+export function getEndpointAlerts(endpoint: WebhookEndpoint): EndpointAlert[] {
+  const alerts: EndpointAlert[] = []
+  const deliveryMinutes = parseMinutesAgo(endpoint.lastDelivery)
+  const rotationDaysAgo = parseRotationDaysAgo(endpoint.secretRotation)
+
+  if (endpoint.status === "failing") {
+    alerts.push({
+      id: "delivery-failure",
+      tone: "critical",
+      badgeLabel: "Critical",
+      detail: `${endpoint.name} has deliveries waiting for retry review.`,
+    })
+  } else if (endpoint.status === "disabled") {
+    alerts.push({
+      id: "delivery-paused",
+      tone: "warning",
+      badgeLabel: "Warning",
+      detail: `${endpoint.name} is paused and not receiving new events.`,
+    })
+  }
+
+  if (deliveryMinutes !== null && deliveryMinutes >= 30) {
+    alerts.push({
+      id: "delivery-lag",
+      tone: "warning",
+      badgeLabel: "Warning",
+      detail: `Last delivery landed ${endpoint.lastDelivery}. Check if that delay is expected.`,
+    })
+  }
+
+  if (endpoint.secretRotation === "5d left") {
+    alerts.push({
+      id: "rotation-due",
+      tone: "warning",
+      badgeLabel: "Warning",
+      detail: "Signing secret rotation is due within 5 days.",
+    })
+  } else if (rotationDaysAgo !== null && rotationDaysAgo >= 21) {
+    alerts.push({
+      id: "rotation-stale",
+      tone: "warning",
+      badgeLabel: "Warning",
+      detail: `Signing secret was rotated ${endpoint.secretRotation}. Consider refreshing it soon.`,
+    })
+  }
+
+  if (alerts.length === 0) {
+    alerts.push({
+      id: "healthy",
+      tone: "success",
+      badgeLabel: "Healthy",
+      detail: `${endpoint.name} is delivering subscribed events normally.`,
+    })
+  }
+
+  return alerts
+}
@@ -0,0 +1,72 @@
+import { Button } from "@cfdm/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@cfdm/ui/components/dropdown-menu"
+import type { WebhookEndpoint, WebhookEndpointActionHandlers } from "./data"
+import { EllipsisVerticalIcon, Settings2Icon, HistoryIcon, RefreshCwIcon, Trash2Icon } from "lucide-react"
+
+type EndpointActionsMenuProps = WebhookEndpointActionHandlers & {
+  endpoint: WebhookEndpoint
+}
+
+export function EndpointActionsMenu({
+  endpoint,
+  onManage,
+  onViewDeliveries,
+  onRotateSecret,
+  onRemove,
+}: EndpointActionsMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label={`Open actions for ${endpoint.name}`}
+          >
+            <EllipsisVerticalIcon aria-hidden="true" />
+          </Button>
+        }
+      />
+
+      {/* Content */}
+      <DropdownMenuContent align="end" className="min-w-44">
+        <DropdownMenuGroup>
+          <DropdownMenuItem onClick={() => onManage(endpoint)}>
+            <Settings2Icon aria-hidden="true" />
+            {endpoint.status === "failing"
+              ? "Review endpoint"
+              : "Manage endpoint"}
+          </DropdownMenuItem>
+
+          <DropdownMenuItem onClick={() => onViewDeliveries(endpoint)}>
+            <HistoryIcon aria-hidden="true" />
+            View deliveries
+          </DropdownMenuItem>
+
+          <DropdownMenuItem onClick={() => onRotateSecret(endpoint)}>
+            <RefreshCwIcon aria-hidden="true" />
+            Rotate secret
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            variant="destructive"
+            onClick={() => onRemove(endpoint)}
+          >
+            <Trash2Icon aria-hidden="true" />
+            Remove endpoint
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
@@ -0,0 +1,49 @@
+import { Badge } from "@/components/reui/badge"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@cfdm/ui/components/tooltip"
+import { ALERT_CONFIG, type EndpointAlert } from "./data"
+import { CircleCheckIcon, CircleXIcon, TriangleAlertIcon } from "lucide-react"
+
+// ── Endpoint Alert Indicator ──
+
+export function EndpointAlertIndicator({ alert }: { alert: EndpointAlert }) {
+  const config = ALERT_CONFIG[alert.tone]
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            className={cn(
+              "focus-visible:ring-ring focus-visible:ring-offset-background inline-flex rounded-sm p-0.5 focus-visible:ring-2 focus-visible:ring-offset-2",
+              config.toneClassName
+            )}
+            aria-label={`${alert.badgeLabel}. ${alert.detail}`}
+          />
+        }
+      >
+        {alert.tone === "success" ? (
+          <CircleCheckIcon className="size-4 shrink-0" aria-hidden="true" />
+        ) : alert.tone === "critical" ? (
+          <CircleXIcon className="size-4 shrink-0" aria-hidden="true" />
+        ) : (
+          <TriangleAlertIcon className="size-4 shrink-0" aria-hidden="true" />
+        )}
+      </TooltipTrigger>
+
+      {/* Content */}
+      <TooltipContent side="top" className="max-w-xs p-3">
+        <div className="flex items-center gap-2">
+          <Badge variant={config.badgeVariant}>{alert.badgeLabel}</Badge>
+          <p>{alert.detail}</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
@@ -0,0 +1,83 @@
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@cfdm/ui/components/item"
+import { Switch } from "@cfdm/ui/components/switch"
+
+import {
+  getEndpointAlerts,
+  type WebhookEndpoint,
+  type WebhookEndpointActionHandlers,
+} from "./data"
+import { EndpointActionsMenu } from "./endpoint-actions-menu"
+import { EndpointAlertIndicator } from "./endpoint-alert-indicator"
+import { EndpointUrlCopy } from "./endpoint-url-copy"
+import { StatusIndicator } from "./status-indicator"
+
+type EndpointRowProps = WebhookEndpointActionHandlers & {
+  endpoint: WebhookEndpoint
+  onToggle: (id: string, enabled: boolean) => void
+}
+
+// ── Endpoint Row ──
+
+export function EndpointRow({
+  endpoint,
+  onToggle,
+  onManage,
+  onViewDeliveries,
+  onRotateSecret,
+  onRemove,
+}: EndpointRowProps) {
+  const isEnabled = endpoint.status !== "disabled"
+  const alerts = getEndpointAlerts(endpoint)
+
+  return (
+    <Item variant="outline" className="border-x-0 border-t-0 last:border-b-0">
+      {/* Media */}
+      <ItemMedia variant="icon" className="translate-y-0! self-center!">
+        <Item className="border-border flex size-10 items-center justify-center border p-0 [&_svg]:opacity-60">
+          {endpoint.icon}
+        </Item>
+      </ItemMedia>
+
+      {/* Content */}
+      <ItemContent className="min-w-0 gap-1">
+        <ItemTitle className="min-w-0 gap-2">
+          <span className="min-w-0 truncate">{endpoint.name}</span>
+          <span className="flex shrink-0 items-center gap-1">
+            {alerts.map((alert) => (
+              <EndpointAlertIndicator key={alert.id} alert={alert} />
+            ))}
+          </span>
+          <StatusIndicator status={endpoint.status} />
+        </ItemTitle>
+
+        <ItemDescription className="min-w-0">
+          <EndpointUrlCopy endpointName={endpoint.name} url={endpoint.url} />
+        </ItemDescription>
+      </ItemContent>
+
+      {/* Actions */}
+      <ItemActions className="gap-2 self-start sm:self-center">
+        <Switch
+          checked={isEnabled}
+          onCheckedChange={(checked) => onToggle(endpoint.id, checked)}
+          aria-label={`Toggle ${endpoint.url}`}
+        />
+
+        <EndpointActionsMenu
+          endpoint={endpoint}
+          onManage={onManage}
+          onViewDeliveries={onViewDeliveries}
+          onRotateSecret={onRotateSecret}
+          onRemove={onRemove}
+        />
+      </ItemActions>
+    </Item>
+  )
+}
@@ -0,0 +1,46 @@
+import { toast } from "sonner"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button } from "@cfdm/ui/components/button"
+import { CheckIcon } from "lucide-react"
+
+// ── Show Endpoint Toast ──
+
+export function showEndpointToast({
+  title,
+  description,
+  variant = "info",
+}: {
+  title: string
+  description: string
+  variant?: "info" | "success"
+}) {
+  toast.custom((id) => (
+    <div className="bg-invert text-invert-foreground flex w-[356px] items-start gap-3 rounded-md border border-transparent p-4 shadow-lg">
+      <span
+        className={cn(
+          "flex h-5 shrink-0 items-center",
+          variant === "success" ? "text-green-500" : "text-info"
+        )}
+      >
+        <CheckIcon className="size-4" aria-hidden="true" />
+      </span>
+
+      <div className="flex flex-1 flex-col gap-1">
+        <p className="text-sm font-semibold">{title}</p>
+        <p className="text-invert-foreground/70 text-sm">{description}</p>
+
+        <div className="mt-2 flex gap-2">
+          <Button
+            size="xs"
+            variant="outline"
+            className="bg-background/10 border-border/10 text-invert-foreground"
+            onClick={() => toast.dismiss(id)}
+          >
+            Dismiss
+          </Button>
+        </div>
+      </div>
+    </div>
+  ))
+}
@@ -0,0 +1,54 @@
+"use client"
+
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+
+import { Button } from "@cfdm/ui/components/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@cfdm/ui/components/tooltip"
+import { CopyIcon } from "lucide-react"
+
+// ── Endpoint URL Copy ──
+
+export function EndpointUrlCopy({
+  endpointName,
+  url,
+}: {
+  endpointName: string
+  url: string
+}) {
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  return (
+    <span className="group/url inline-flex max-w-full items-center gap-1 align-top">
+      <code className="text-foreground/90 max-w-full min-w-0 truncate text-xs">
+        {url}
+      </code>
+
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              className="text-muted-foreground shrink-0 opacity-100 transition-opacity duration-200 focus-visible:opacity-100 sm:opacity-0 sm:group-focus-within/url:opacity-100 sm:group-hover/url:opacity-100"
+              aria-label={
+                isCopied
+                  ? `Copied endpoint URL for ${endpointName}`
+                  : `Copy endpoint URL for ${endpointName}`
+              }
+              onClick={() => copyToClipboard(url)}
+            />
+          }
+        >
+          <CopyIcon aria-hidden="true" />
+        </TooltipTrigger>
+
+        <TooltipContent>{isCopied ? "Copied" : "Copy URL"}</TooltipContent>
+      </Tooltip>
+    </span>
+  )
+}
@@ -0,0 +1,11 @@
+import { Badge } from "@/components/reui/badge"
+
+import { STATUS_CONFIG, type EndpointStatus } from "./data"
+
+// ── Status Indicator ──
+
+export function StatusIndicator({ status }: { status: EndpointStatus }) {
+  const config = STATUS_CONFIG[status]
+
+  return <Badge variant={config.variant}>{config.label}</Badge>
+}
@@ -0,0 +1,128 @@
+import { useState } from "react"
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+
+import { Button } from "@cfdm/ui/components/button"
+import { Separator } from "@cfdm/ui/components/separator"
+import { ENDPOINTS, type WebhookEndpoint } from "./data"
+import { EndpointRow } from "./endpoint-row"
+import { showEndpointToast } from "./endpoint-toast"
+import { PlusIcon } from "lucide-react"
+
+export function WebhookEndpoints() {
+  const [endpoints, setEndpoints] = useState(ENDPOINTS)
+
+  const handleToggle = (id: string, enabled: boolean) => {
+    const endpoint = endpoints.find((item) => item.id === id)
+
+    setEndpoints((current) =>
+      current.map((item) =>
+        item.id === id
+          ? {
+              ...item,
+              status: enabled ? ("active" as const) : ("disabled" as const),
+            }
+          : item
+      )
+    )
+
+    if (!endpoint) return
+
+    showEndpointToast({
+      title: enabled ? "Endpoint enabled" : "Endpoint paused",
+      description: enabled
+        ? `${endpoint.name} is live again.`
+        : `${endpoint.name} is no longer receiving events.`,
+      variant: enabled ? "success" : "info",
+    })
+  }
+
+  const handleManage = (endpoint: WebhookEndpoint) => {
+    showEndpointToast({
+      title:
+        endpoint.status === "failing" ? "Review delivery" : "Endpoint settings",
+      description:
+        endpoint.status === "failing"
+          ? `Check retries for ${endpoint.name}.`
+          : `Open rules for ${endpoint.name}.`,
+    })
+  }
+
+  const handleViewDeliveries = (endpoint: WebhookEndpoint) => {
+    showEndpointToast({
+      title: "Delivery history",
+      description: endpoint.lastDelivery
+        ? `${endpoint.name} delivered ${endpoint.lastDelivery}.`
+        : `${endpoint.name} has no recent deliveries.`,
+    })
+  }
+
+  const handleRotateSecret = (endpoint: WebhookEndpoint) => {
+    setEndpoints((current) =>
+      current.map((item) =>
+        item.id === endpoint.id ? { ...item, secretRotation: "Just now" } : item
+      )
+    )
+
+    showEndpointToast({
+      title: "Secret rotated",
+      description: `${endpoint.name} received a new signing secret.`,
+      variant: "success",
+    })
+  }
+
+  const handleRemove = (endpoint: WebhookEndpoint) => {
+    setEndpoints((current) => current.filter((item) => item.id !== endpoint.id))
+
+    showEndpointToast({
+      title: "Endpoint removed",
+      description: `${endpoint.name} was removed from delivery routes.`,
+    })
+  }
+
+  return (
+    <Frame className="w-full max-w-3xl">
+      {/* Header */}
+      <FrameHeader className="flex-row items-center justify-between gap-4 px-2! py-2.5!">
+        <div className="space-y-px">
+          <FrameTitle>Webhook Endpoints</FrameTitle>
+          <FrameDescription>Routes and status</FrameDescription>
+        </div>
+
+        <Button
+          onClick={() =>
+            showEndpointToast({
+              title: "Add endpoint",
+              description: "Add a destination URL and subscribed events.",
+            })
+          }
+        >
+          <PlusIcon aria-hidden="true" />
+          Add Endpoint
+        </Button>
+      </FrameHeader>
+
+      {/* Content */}
+      <FramePanel className="p-0!">
+        {endpoints.map((endpoint, index) => (
+          <div key={endpoint.id}>
+            {index > 0 ? <Separator /> : null}
+            <EndpointRow
+              endpoint={endpoint}
+              onToggle={handleToggle}
+              onManage={handleManage}
+              onViewDeliveries={handleViewDeliveries}
+              onRotateSecret={handleRotateSecret}
+              onRemove={handleRemove}
+            />
+          </div>
+        ))}
+      </FramePanel>
+    </Frame>
+  )
+}
@@ -0,0 +1,9 @@
+import { WebhookEndpoints } from "./components/webhook-endpoints"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-start justify-center p-4 sm:p-8 md:p-12">
+      <WebhookEndpoints />
+    </div>
+  )
+}
@@ -10,7 +10,6 @@ import {
  DataGridTableRowSelectAll,
 } from '@/components/reui/data-grid/data-grid-table'
 import { createFilter, type FilterFieldConfig } from '@/components/reui/filters'
-import { HealthCheckBadge } from '@/components/health-check-badge'
 import { StatusBadge } from '@/components/status-badge'
 import type { DomainListItem } from '@/lib/schemas'
 import { formatRelative, sqliteUtcToIso } from '@/lib/format'
@@ -25,18 +24,10 @@ import {

 export const DOMAIN_TABS = [
  { id: 'all', label: 'Все' },
-  { id: 'ok', label: 'OK' },
-  { id: 'slow', label: 'Slow' },
-  { id: 'down', label: 'Down' },
-  { id: 'unknown', label: '—' },
  { id: 'without_group', label: 'Без группы' },
 ] as const

 export function domainTabFilter(item: DomainListItem, tabId: string) {
-  if (tabId === 'ok') return item.health_status === 'up'
-  if (tabId === 'slow') return item.health_status === 'degraded'
-  if (tabId === 'down') return item.health_status === 'down'
-  if (tabId === 'unknown') return item.health_status === 'unknown'
  if (tabId === 'without_group') return item.group_id == null
  return true
 }
@@ -68,18 +59,6 @@ export function useDomainFilterFields(
        customValueRenderer: (values) =>
          renderSingleSelectedLabel(values, groupOptions),
      },
-      {
-        key: 'health_status',
-        label: 'Доступность',
-        type: 'select',
-        className: 'w-[140px]',
-        options: [
-          { label: 'OK', value: 'up' },
-          { label: 'Slow', value: 'degraded' },
-          { label: 'Down', value: 'down' },
-          { label: '—', value: 'unknown' },
-        ],
-      },
      {
        key: 'environment',
        label: 'Env',
@@ -102,8 +81,6 @@ export function domainFilterFieldValue(item: DomainListItem, field: string) {
      return `${item.zone_name} ${item.group_name ?? ''} ${(item.tags ?? []).join(' ')}`.toLowerCase()
    case 'group_id':
      return item.group_id != null ? String(item.group_id) : 'none'
-    case 'health_status':
-      return item.health_status ?? 'unknown'
    case 'environment':
      return item.environment ?? ''
    default:
@@ -179,20 +156,6 @@ export function useDomainColumns({
            </div>
          ),
        },
-        {
-          id: 'health',
-          accessorKey: 'health_status',
-          header: ({ column }) => (
-            <DataGridColumnHeader column={column} title="Доступность" />
-          ),
-          cell: ({ row }) => (
-            <HealthCheckBadge
-              status={row.original.health_status ?? 'unknown'}
-              latencyMs={row.original.health_latency_ms}
-              showLatency
-            />
-          ),
-        },
        {
          id: 'group',
          header: ({ column }) => (
@@ -232,7 +195,10 @@ export function useDomainColumns({
              className="h-auto p-0 tabular-nums"
              nativeButton={false}
              render={
-                <Link to="/services" search={{ domainId: row.original.id }} />
+                <Link
+                  to="/services"
+                  search={{ domainId: row.original.id }}
+                />
              }
            >
              {row.original.service_count}
@@ -146,8 +146,9 @@ export function DomainAvailabilityPanel({
  return (
    <div className="flex flex-col gap-4 md:gap-6">
      <div className="flex flex-wrap items-center justify-between gap-2">
-        <p className="text-muted-foreground text-sm">
-          Мониторы доступности hostname в зоне (HTTP, Ping, DNS)
+        <p className="text-muted-foreground max-w-2xl text-sm">
+          Зонные мониторы (HTTP/Ping/DNS). LB и IP-доступность сервисов — в разделе
+          Сервисы.
        </p>
        <LoadingButton
          type="button"
@@ -231,7 +232,8 @@ export function DomainAvailabilityPanel({
        <FrameHeader>
          <FrameTitle>Мониторы</FrameTitle>
          <FrameDescription>
-            Последний статус каждой проверки
+            Зонные HTTP/Ping/DNS проверки. LB и IP-доступность сервисов — в
+            разделе Сервисы.
          </FrameDescription>
        </FrameHeader>
        <FramePanel>
@@ -1,6 +1,7 @@
 import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from 'lucide-react'

 import { Badge } from '@/components/reui/badge'
+import { HealthCheckBadge } from '@/components/health-check-badge'
 import { StatusBadge } from '@/components/status-badge'
 import { serviceDisplayFqdn } from '@/lib/service-utils'
 import type { ServiceView } from '@/lib/schemas'
@@ -63,7 +64,12 @@ export function ServiceKanbanCard({
            {service.name}
          </ItemTitle>
        </ItemContent>
-        <ItemActions className="shrink-0">
+        <ItemActions className="flex shrink-0 items-center gap-1.5">
+          <HealthCheckBadge
+            status={service.health_status ?? 'unknown'}
+            latencyMs={service.health_latency_ms}
+            size="xs"
+          />
          <Switch
            checked={service.enabled ?? false}
            disabled={isToggling || dragDisabled}
@@ -74,15 +80,20 @@ export function ServiceKanbanCard({
      </ItemHeader>

      <ItemContent className="min-w-0 gap-2">
-        {fqdn ? (
-          <span className="text-muted-foreground truncate font-mono text-xs">{fqdn}</span>
+        {fqdn && fqdn !== '—' ? (
+          <span className="text-muted-foreground truncate font-mono text-xs">
+            {fqdn}
+          </span>
        ) : (
          <span className="text-muted-foreground text-xs">FQDN не задан</span>
        )}
      </ItemContent>

      <ItemFooter className="min-w-0 justify-between gap-2">
-        <StatusBadge status={service.enabled ? 'active' : 'unknown'} label={service.enabled ? 'Вкл' : 'Выкл'} />
+        <StatusBadge
+          status={service.enabled ? 'active' : 'unknown'}
+          label={service.enabled ? 'Вкл' : 'Выкл'}
+        />
        <div className="flex items-center gap-1">
          <Badge variant="outline" size="sm">
            {service.slug}
@@ -106,7 +117,10 @@ export function ServiceKanbanCard({
                Редактировать
              </DropdownMenuItem>
              <DropdownMenuSeparator />
-              <DropdownMenuItem variant="destructive" onClick={() => onDelete(service)}>
+              <DropdownMenuItem
+                variant="destructive"
+                onClick={() => onDelete(service)}
+              >
                <Trash2Icon className="size-4" />
                Удалить
              </DropdownMenuItem>
@@ -1,6 +1,6 @@
-import { useMemo, type ComponentProps, type ReactNode } from 'react'
 import {
  Frame,
+  FrameDescription,
  FrameHeader,
  FrameTitle,
 } from '@/components/reui/frame'
@@ -15,19 +15,37 @@ import {
  KanbanOverlay,
 } from '@/components/reui/kanban'
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'
-import { GripVerticalIcon, PlusIcon } from 'lucide-react'
+import {
+  GripVerticalIcon,
+  MoreHorizontalIcon,
+  PlusIcon,
+} from 'lucide-react'
+import { useMemo, type ComponentProps, type ReactNode } from 'react'

-import { cn } from '@cfdm/ui/lib/utils'
+import { HealthCheckBadge } from '@/components/health-check-badge'
 import { Button } from '@cfdm/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@cfdm/ui/components/dropdown-menu'
 import { Skeleton } from '@cfdm/ui/components/skeleton'
+import { cn } from '@cfdm/ui/lib/utils'
+import type { IpHealthStatus } from '@/lib/schemas'

 export interface KanbanColumnConfig {
  id: string
  title: string
  description?: string
+  healthStatus?: IpHealthStatus['status']
+  healthLatencyMs?: number | null
  dotClassName?: string
  addLabel?: string
  onAdd?: () => void
+  onEdit?: () => void
+  onDelete?: () => void
 }

 export interface KanbanBoardProps<T extends { id: string | number }> {
@@ -103,53 +121,115 @@ function KanbanColumnView<T extends { id: string | number }>({
      <Frame
        spacing="sm"
        className={cn('group/column', isOverlay && 'shadow-lg')}
-        aria-label={column.description ?? column.title}
+        aria-label={
+          column.description
+            ? `${column.title}: ${column.description}`
+            : column.title
+        }
      >
-        <FrameHeader className="flex min-h-10 flex-row items-center gap-2 px-2 py-1.5">
-          {column.dotClassName ? (
-            <span
-              className={cn('size-2.5 shrink-0 rounded-full', column.dotClassName)}
-              aria-hidden="true"
-            />
-          ) : null}
-          <FrameTitle className="truncate text-sm leading-5" title={column.title}>
-            {column.title}
-          </FrameTitle>
-          <span className="text-muted-foreground shrink-0 text-sm font-medium tabular-nums">
-            {items.length}
-          </span>
-          {!isOverlay ? (
-            <div className="ml-auto flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-focus-within/column:opacity-100 group-hover/column:opacity-100">
-              {column.onAdd ? (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  className={COLUMN_HEADER_ACTION_BUTTON_CLASSNAME}
-                  aria-label={column.addLabel ?? 'Добавить'}
-                  title={column.addLabel ?? 'Добавить'}
-                  onClick={column.onAdd}
-                >
-                  <PlusIcon aria-hidden="true" />
-                </Button>
-              ) : null}
-              <KanbanColumnHandle
-                className="group-focus-within/column:opacity-100"
-                render={({ className, ...handleProps }) => (
+        <FrameHeader className="flex min-h-10 flex-col gap-1 px-2 py-1.5">
+          <div className="flex flex-row items-center gap-2">
+            {column.dotClassName ? (
+              <span
+                className={cn(
+                  'size-2.5 shrink-0 rounded-full',
+                  column.dotClassName,
+                )}
+                aria-hidden="true"
+              />
+            ) : null}
+            <FrameTitle
+              className="truncate text-sm leading-5"
+              title={column.title}
+            >
+              {column.title}
+            </FrameTitle>
+            <span className="text-muted-foreground shrink-0 text-sm font-medium tabular-nums">
+              {items.length}
+            </span>
+            {column.healthStatus ? (
+              <HealthCheckBadge
+                status={column.healthStatus}
+                latencyMs={column.healthLatencyMs}
+                size="xs"
+              />
+            ) : null}
+            {!isOverlay ? (
+              <div className="ml-auto flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-focus-within/column:opacity-100 group-hover/column:opacity-100">
+                {column.onAdd ? (
                  <Button
-                    {...handleProps}
                    type="button"
                    variant="ghost"
                    size="icon-sm"
-                    aria-label={`Переместить колонку ${column.title}`}
-                    title={`Переместить колонку ${column.title}`}
-                    className={cn(COLUMN_HEADER_ACTION_BUTTON_CLASSNAME, className)}
+                    className={COLUMN_HEADER_ACTION_BUTTON_CLASSNAME}
+                    aria-label={column.addLabel ?? 'Добавить'}
+                    title={column.addLabel ?? 'Добавить'}
+                    onClick={column.onAdd}
                  >
-                    <GripVerticalIcon aria-hidden="true" />
+                    <PlusIcon aria-hidden="true" />
                  </Button>
-                )}
-              />
-            </div>
+                ) : null}
+                {column.onEdit || column.onDelete ? (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      render={
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          className={COLUMN_HEADER_ACTION_BUTTON_CLASSNAME}
+                          aria-label={`Действия колонки ${column.title}`}
+                        />
+                      }
+                    >
+                      <MoreHorizontalIcon aria-hidden />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {column.onEdit ? (
+                        <DropdownMenuItem onClick={column.onEdit}>
+                          Изменить группу
+                        </DropdownMenuItem>
+                      ) : null}
+                      {column.onDelete ? (
+                        <>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            variant="destructive"
+                            onClick={column.onDelete}
+                          >
+                            Удалить группу
+                          </DropdownMenuItem>
+                        </>
+                      ) : null}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                ) : null}
+                <KanbanColumnHandle
+                  className="group-focus-within/column:opacity-100"
+                  render={({ className, ...handleProps }) => (
+                    <Button
+                      {...handleProps}
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label={`Переместить колонку ${column.title}`}
+                      title={`Переместить колонку ${column.title}`}
+                      className={cn(
+                        COLUMN_HEADER_ACTION_BUTTON_CLASSNAME,
+                        className,
+                      )}
+                    >
+                      <GripVerticalIcon aria-hidden="true" />
+                    </Button>
+                  )}
+                />
+              </div>
+            ) : null}
+          </div>
+          {column.description ? (
+            <FrameDescription className="text-muted-foreground truncate pl-4 font-mono text-xs">
+              {column.description}
+            </FrameDescription>
          ) : null}
        </FrameHeader>

@@ -1,3 +1,5 @@
+"use client"
+
 import { useMemo, useState } from "react"
 import { Badge } from "@/components/reui/badge"
 import { Column } from "@tanstack/react-table"
@@ -1,5 +1,3 @@
-"use client"
-
 import { HTMLAttributes, memo, ReactNode, useMemo } from "react"
 import {
  getColumnHeaderLabel,
@@ -1,3 +1,5 @@
+"use client"
+
 import { ReactElement } from "react"
 import { getColumnHeaderLabel } from "@/components/reui/data-grid/data-grid"
 import { Table } from "@tanstack/react-table"
@@ -1,5 +1,3 @@
-"use client"
-
 import React, { ReactNode } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"

@@ -1,3 +1,5 @@
+"use client"
+
 import {
  PointerEvent,
  ReactNode,
@@ -1,5 +1,3 @@
-"use client"
-
 import {
  createContext,
  CSSProperties,
@@ -1,3 +1,5 @@
+"use client"
+
 import {
  CSSProperties,
  Fragment,
@@ -1,5 +1,3 @@
-"use client"
-
 import {
  CSSProperties,
  memo,
@@ -1,3 +1,5 @@
+"use client"
+
 import {
  CSSProperties,
  Fragment,
@@ -1,5 +1,3 @@
-"use client"
-
 import { createContext, ReactNode, useContext, useMemo } from "react"
 import {
  Column,
@@ -0,0 +1,90 @@
+import { cn } from "@cfdm/ui/lib/utils"
+
+type IconStackProps = React.ComponentProps<"div">
+
+function IconStack({ className, children, style, ...props }: IconStackProps) {
+  return (
+    <div
+      data-slot="icon-stack"
+      className={cn(
+        "text-foreground **:data-[slot=icon-stack-layer]:fill-background relative h-20 w-18",
+        className
+      )}
+      style={
+        {
+          "--icon-stack-content-x": "71%",
+          "--icon-stack-content-y": "58%",
+          ...style,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 72 81"
+        fill="none"
+        className="h-full w-full overflow-visible"
+      >
+        <ellipse
+          cx="36"
+          cy="76"
+          rx="30"
+          ry="7"
+          fill="currentColor"
+          fillOpacity="0.055"
+          className="blur-[4px]"
+        />
+
+        <IconStackLayer opacity="0.4" />
+        <IconStackLayer opacity="0.6" x={13.65} y={6.04} />
+        <IconStackLayer opacity="0.8" x={27.32} y={12.08} active />
+      </svg>
+
+      {children ? (
+        <div
+          data-slot="icon-stack-content"
+          className="text-muted-foreground pointer-events-none absolute top-[var(--icon-stack-content-y)] left-[var(--icon-stack-content-x)] flex -translate-x-1/2 -translate-y-1/2 scale-x-90 -skew-y-26 items-center justify-center"
+        >
+          {children}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function IconStackLayer({
+  active = false,
+  opacity,
+  x = 0,
+  y = 0,
+}: {
+  active?: boolean
+  opacity: string
+  x?: number
+  y?: number
+}) {
+  return (
+    <g opacity={opacity} transform={`translate(${x} ${y})`}>
+      <path
+        data-slot="icon-stack-layer"
+        d="M42.2538 2.046C41.4408 1.6325 40.3965 1.6677 39.2612 2.2424L7.9616 18.1934C5.3895 19.5039 3.301 23.1064 3.301 26.2322V64.3226C3.301 66.0677 3.9458 67.2943 4.962 67.8199L1.8363 66.229C0.8201 65.7104 0.1753 64.4771 0.1753 62.732V24.6412C0.1753 21.5085 2.2638 17.913 4.8359 16.6024L36.1355 0.6515C37.2778 0.0698 38.322 0.0416 39.128 0.4551L42.2538 2.046Z"
+        stroke="currentColor"
+        strokeOpacity={active ? "0.3" : "0.2"}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        data-slot="icon-stack-layer"
+        d="M42.2545 2.0456C43.2707 2.5643 43.9155 3.7979 43.9155 5.543V43.6337C43.9155 46.7665 41.827 50.3616 39.2549 51.6722L7.9554 67.6235C6.813 68.2052 5.7687 68.2331 4.9628 67.8196C3.9465 67.301 3.3018 66.0673 3.3018 64.3222V26.2318C3.3018 23.0991 5.3903 19.5036 7.9624 18.193L39.2619 2.2421C40.4043 1.6604 41.4486 1.6321 42.2545 2.0456Z"
+        stroke="currentColor"
+        strokeOpacity={active ? "0.3" : "0.2"}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  )
+}
+
+export { IconStack, type IconStackProps }
@@ -0,0 +1,450 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  useReactTable,
+  type ExpandedState,
+} from '@tanstack/react-table'
+import {
+  ChevronDownIcon,
+  FilterIcon,
+  FolderPlusIcon,
+  FunnelXIcon,
+  PlusIcon,
+  ServerIcon,
+} from 'lucide-react'
+
+import { DataGrid } from '@/components/reui/data-grid/data-grid'
+import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
+import { DataGridScrollArea } from '@/components/reui/data-grid/data-grid-scroll-area'
+import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
+import { Filters, type Filter } from '@/components/reui/filters'
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { EmptyState } from '@/components/empty-state'
+import { applyFiltersToData } from '@/components/reui-kit/filter-utils'
+import { createServicesGroupedColumns } from '@/components/services/services-grouped-columns'
+import type { ServiceCatalogTreeRow } from '@/components/services/services-grouped-columns'
+import {
+  SERVICE_TABS,
+  createDefaultServiceFilters,
+  serviceFilterFieldValue,
+  serviceTabFilter,
+  useServiceFilterFields,
+  type ServiceCatalogRow,
+} from '@/components/columns/services-columns'
+import type {
+  ServiceGroupView,
+  ServiceGroupsResponse,
+  ServiceView,
+} from '@/lib/schemas'
+import { Button } from '@cfdm/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@cfdm/ui/components/dropdown-menu'
+import { Separator } from '@cfdm/ui/components/separator'
+import { Skeleton } from '@cfdm/ui/components/skeleton'
+import { Tabs, TabsList, TabsTrigger } from '@cfdm/ui/components/tabs'
+
+const HEALTH_TABS = [
+  { id: 'health-ok', label: 'OK' },
+  { id: 'health-slow', label: 'Slow' },
+  { id: 'health-down', label: 'Down' },
+  { id: 'health-unknown', label: '—' },
+] as const
+
+const ALL_TABS = [...SERVICE_TABS, ...HEALTH_TABS] as const
+
+function serviceMatchesDomain(service: ServiceView, domainId?: number) {
+  if (domainId == null) return true
+  return service.domains.some((d) => d.domain_id === domainId)
+}
+
+function toCatalogRow(
+  service: ServiceView,
+  groupId: number | null,
+  groupName: string | null,
+): ServiceCatalogRow {
+  return {
+    id: service.id,
+    name: service.name,
+    slug: service.slug,
+    enabled: service.enabled,
+    groupId,
+    groupName,
+    domainIds: service.domains.map((d) => d.domain_id),
+    service,
+  }
+}
+
+function catalogTabFilter(row: ServiceCatalogRow, tabId: string) {
+  if (tabId.startsWith('health-')) {
+    const status = row.service.health_status ?? 'unknown'
+    if (tabId === 'health-ok') return status === 'up'
+    if (tabId === 'health-slow') return status === 'degraded'
+    if (tabId === 'health-down') return status === 'down'
+    if (tabId === 'health-unknown') return status === 'unknown'
+    return true
+  }
+  return serviceTabFilter(row, tabId)
+}
+
+function buildTreeRows(
+  data: ServiceGroupsResponse,
+  filteredServiceIds: Set<number>,
+  domainId?: number,
+): ServiceCatalogTreeRow[] {
+  const rows: ServiceCatalogTreeRow[] = []
+
+  for (const group of data.groups) {
+    const services = group.services
+      .filter((s) => serviceMatchesDomain(s, domainId))
+      .filter((s) => filteredServiceIds.has(s.id))
+    if (services.length === 0) continue
+
+    rows.push({
+      kind: 'group',
+      id: `group-${group.id}`,
+      group,
+      subRows: services.map((service) => ({
+        kind: 'service' as const,
+        id: `service-${service.id}`,
+        service,
+        groupId: group.id,
+        groupName: group.name,
+      })),
+    })
+  }
+
+  const ungrouped = data.ungrouped
+    .filter((s) => serviceMatchesDomain(s, domainId))
+    .filter((s) => filteredServiceIds.has(s.id))
+
+  if (ungrouped.length > 0) {
+    rows.push({
+      kind: 'group',
+      id: 'group-ungrouped',
+      group: null,
+      subRows: ungrouped.map((service) => ({
+        kind: 'service' as const,
+        id: `service-${service.id}`,
+        service,
+        groupId: null,
+        groupName: null,
+      })),
+    })
+  }
+
+  return rows
+}
+
+function defaultExpanded(rows: ServiceCatalogTreeRow[]): ExpandedState {
+  return rows.reduce<Record<string, boolean>>((acc, row) => {
+    acc[row.id] = true
+    return acc
+  }, {})
+}
+
+export function ServicesAddMenu({
+  onAddService,
+  onAddGroup,
+}: {
+  onAddService: () => void
+  onAddGroup: () => void
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button type="button">
+            <PlusIcon data-icon="inline-start" aria-hidden />
+            Добавить
+            <ChevronDownIcon data-icon="inline-end" aria-hidden />
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end" className="min-w-44">
+        <DropdownMenuItem onClick={onAddService}>
+          <ServerIcon aria-hidden />
+          Сервис
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onAddGroup}>
+          <FolderPlusIcon aria-hidden />
+          Группу
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+interface ServicesGroupedCatalogProps {
+  data: ServiceGroupsResponse
+  domainId?: number
+  domainLabel?: string
+  isLoading?: boolean
+  primaryAction?: ReactNode
+  togglingId: number | null
+  onEditService: (service: ServiceView) => void
+  onDeleteService: (service: ServiceView) => void
+  onToggleService: (serviceId: number, enabled: boolean) => void
+  onEditGroup: (group: ServiceGroupView) => void
+  onDeleteGroup: (group: ServiceGroupView) => void
+  onAddServiceToGroup: (groupId: number | null) => void
+  emptyAction?: ReactNode
+}
+
+export function ServicesGroupedCatalog({
+  data,
+  domainId,
+  domainLabel,
+  isLoading = false,
+  primaryAction,
+  togglingId,
+  onEditService,
+  onDeleteService,
+  onToggleService,
+  onEditGroup,
+  onDeleteGroup,
+  onAddServiceToGroup,
+  emptyAction,
+}: ServicesGroupedCatalogProps) {
+  const [tab, setTab] = useState('all')
+  const [filters, setFilters] = useState<Filter[]>(() =>
+    createDefaultServiceFilters(),
+  )
+  const [expanded, setExpanded] = useState<ExpandedState>({})
+  const filterFields = useServiceFilterFields()
+
+  const flatRows = useMemo(() => {
+    const rows: ServiceCatalogRow[] = []
+    for (const group of data.groups) {
+      for (const service of group.services) {
+        if (!serviceMatchesDomain(service, domainId)) continue
+        rows.push(toCatalogRow(service, group.id, group.name))
+      }
+    }
+    for (const service of data.ungrouped) {
+      if (!serviceMatchesDomain(service, domainId)) continue
+      rows.push(toCatalogRow(service, null, null))
+    }
+    return rows
+  }, [data, domainId])
+
+  const tabCounts = useMemo(() => {
+    const counts: Record<string, number> = {}
+    for (const t of ALL_TABS) {
+      counts[t.id] = flatRows.filter((row) => catalogTabFilter(row, t.id)).length
+    }
+    return counts
+  }, [flatRows])
+
+  const filteredIds = useMemo(() => {
+    const afterTab = flatRows.filter((row) => catalogTabFilter(row, tab))
+    const afterFilters = applyFiltersToData(afterTab, filters, (item, field) =>
+      serviceFilterFieldValue(item, field),
+    )
+    return new Set(afterFilters.map((r) => r.id))
+  }, [flatRows, tab, filters])
+
+  const treeData = useMemo(
+    () => buildTreeRows(data, filteredIds, domainId),
+    [data, filteredIds, domainId],
+  )
+
+  const expandedKey = treeData.map((r) => r.id).join(',')
+  useEffect(() => {
+    setExpanded(defaultExpanded(treeData))
+  }, [expandedKey, treeData])
+
+  const columns = useMemo(
+    () =>
+      createServicesGroupedColumns({
+        onEditService,
+        onDeleteService,
+        onToggleService,
+        onEditGroup,
+        onDeleteGroup,
+        onAddServiceToGroup,
+        togglingId,
+      }),
+    [
+      onEditService,
+      onDeleteService,
+      onToggleService,
+      onEditGroup,
+      onDeleteGroup,
+      onAddServiceToGroup,
+      togglingId,
+    ],
+  )
+
+  const table = useReactTable({
+    data: treeData,
+    columns,
+    state: { expanded },
+    onExpandedChange: setExpanded,
+    getSubRows: (row) => (row.kind === 'group' ? row.subRows : undefined),
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (isLoading) {
+    return (
+      <Frame dense spacing="sm" className="w-full">
+        <FrameHeader>
+          <Skeleton className="h-5 w-48" />
+          <Skeleton className="mt-1 h-4 w-72" />
+        </FrameHeader>
+        <FramePanel className="flex flex-col gap-3 p-4">
+          <Skeleton className="h-9 w-full max-w-md" />
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </FramePanel>
+      </Frame>
+    )
+  }
+
+  const hasAnyServices = flatRows.length > 0
+  const hasAnyGroups = data.groups.length > 0
+
+  if (!hasAnyServices && !hasAnyGroups) {
+    return (
+      <EmptyState
+        icon={ServerIcon}
+        title="Сервисы не найдены"
+        description={
+          domainLabel
+            ? `Нет сервисов с привязками к ${domainLabel}`
+            : 'Сначала создайте группу, затем добавьте сервисы.'
+        }
+        action={emptyAction}
+      />
+    )
+  }
+
+  return (
+    <DataGrid
+      table={table}
+      recordCount={filteredIds.size}
+      emptyMessage="Нет записей по выбранным фильтрам."
+      tableLayout={{ dense: true }}
+    >
+      <Frame dense spacing="sm" className="w-full">
+        <FrameHeader className="flex-row items-start justify-between gap-3">
+          <div className="flex min-w-0 flex-col gap-px">
+            <FrameTitle>Сервисы</FrameTitle>
+            <FrameDescription>
+              {domainLabel
+                ? `Каталог сервисов с привязками к ${domainLabel}`
+                : 'Группы, FQDN и доступность сервисов'}
+            </FrameDescription>
+          </div>
+          {primaryAction ? (
+            <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+              {primaryAction}
+            </div>
+          ) : null}
+        </FrameHeader>
+
+        <FramePanel className="p-0 shadow-none!">
+          <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
+            <Tabs value={tab} onValueChange={setTab}>
+              <TabsList variant="line" className="gap-5 overflow-x-auto">
+                {ALL_TABS.map((t) => (
+                  <TabsTrigger
+                    key={t.id}
+                    value={t.id}
+                    className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
+                  >
+                    <span>{t.label}</span>
+                    <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">
+                      {tabCounts[t.id] ?? 0}
+                    </span>
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-wrap items-center justify-between gap-3 px-(--frame-panel-header-px) py-(--frame-panel-header-py)">
+            <Filters
+              filters={filters}
+              fields={filterFields}
+              onChange={setFilters}
+              size="default"
+              trigger={
+                <Button type="button" variant="outline" aria-label="Фильтры">
+                  <FilterIcon className="size-4" aria-hidden />
+                  Фильтры
+                </Button>
+              }
+            />
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setTab('all')
+                setFilters(createDefaultServiceFilters())
+              }}
+            >
+              <FunnelXIcon className="size-4" aria-hidden />
+              Сбросить
+            </Button>
+          </div>
+
+          <Separator />
+
+          {treeData.length === 0 ? (
+            <div className="p-6">
+              <EmptyState
+                title="Нет совпадений"
+                description="Измените фильтры или вкладку."
+                action={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      setTab('all')
+                      setFilters(createDefaultServiceFilters())
+                    }}
+                  >
+                    Сбросить
+                  </Button>
+                }
+              />
+            </div>
+          ) : (
+            <>
+              <DataGridScrollArea>
+                <DataGridTable />
+              </DataGridScrollArea>
+              <Separator />
+              <FrameFooter>
+                <DataGridPagination
+                  sizes={[5, 10, 20, 50]}
+                  rowsPerPageLabel="Строк на странице"
+                  info="{from} - {to} of {count}"
+                  previousPageLabel="Предыдущая"
+                  nextPageLabel="Следующая"
+                />
+              </FrameFooter>
+            </>
+          )}
+        </FramePanel>
+      </Frame>
+    </DataGrid>
+  )
+}
@@ -0,0 +1,299 @@
+import { useMemo } from 'react'
+import type { ColumnDef } from '@tanstack/react-table'
+import {
+  ChevronRightIcon,
+  FolderIcon,
+  MoreHorizontalIcon,
+  PlusIcon,
+} from 'lucide-react'
+
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { HealthCheckBadge } from '@/components/health-check-badge'
+import { StatusBadge } from '@/components/status-badge'
+import { serviceDisplayFqdn } from '@/lib/service-utils'
+import type { ServiceGroupView, ServiceView } from '@/lib/schemas'
+import { Button } from '@cfdm/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@cfdm/ui/components/dropdown-menu'
+import { Switch } from '@cfdm/ui/components/switch'
+import { Badge } from '@/components/reui/badge'
+import { cn } from '@cfdm/ui/lib/utils'
+
+export type ServiceTreeServiceRow = {
+  kind: 'service'
+  id: string
+  service: ServiceView
+  groupId: number | null
+  groupName: string | null
+}
+
+export type ServiceTreeGroupRow = {
+  kind: 'group'
+  id: string
+  group: ServiceGroupView | null
+  subRows: ServiceTreeServiceRow[]
+}
+
+export type ServiceCatalogTreeRow = ServiceTreeGroupRow | ServiceTreeServiceRow
+
+function isServiceRow(row: ServiceCatalogTreeRow): row is ServiceTreeServiceRow {
+  return row.kind === 'service'
+}
+
+export function createServicesGroupedColumns({
+  onEditService,
+  onDeleteService,
+  onToggleService,
+  onEditGroup,
+  onDeleteGroup,
+  onAddServiceToGroup,
+  togglingId,
+}: {
+  onEditService: (service: ServiceView) => void
+  onDeleteService: (service: ServiceView) => void
+  onToggleService: (serviceId: number, enabled: boolean) => void
+  onEditGroup: (group: ServiceGroupView) => void
+  onDeleteGroup: (group: ServiceGroupView) => void
+  onAddServiceToGroup: (groupId: number | null) => void
+  togglingId: number | null
+}): ColumnDef<ServiceCatalogTreeRow>[] {
+  return [
+    {
+      id: 'name',
+      accessorFn: (row) =>
+        isServiceRow(row) ? row.service.name : (row.group?.name ?? 'Без группы'),
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} title="Группа / сервис" />
+      ),
+      cell: ({ row }) => {
+        const original = row.original
+        if (!isServiceRow(original)) {
+          const title = original.group?.name ?? 'Без группы'
+          const domain = original.group?.domain
+          return (
+            <div className="flex min-w-0 items-center gap-2">
+              <Button
+                type="button"
+                size="icon-sm"
+                variant="ghost"
+                aria-label={
+                  row.getIsExpanded() ? `Свернуть ${title}` : `Развернуть ${title}`
+                }
+                aria-expanded={row.getIsExpanded()}
+                className="text-muted-foreground hover:text-foreground size-6 shrink-0 p-0 shadow-none"
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  row.getToggleExpandedHandler()()
+                }}
+              >
+                <ChevronRightIcon
+                  className={cn(
+                    'size-3.5 shrink-0 transition-transform duration-150',
+                    row.getIsExpanded() && 'rotate-90',
+                  )}
+                  aria-hidden
+                />
+              </Button>
+              <FolderIcon
+                className="text-muted-foreground size-4 shrink-0"
+                aria-hidden
+              />
+              <div className="flex min-w-0 flex-col gap-0.5">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="truncate text-sm font-semibold">{title}</span>
+                  <Badge variant="outline" size="xs" className="shrink-0">
+                    {original.subRows.length}
+                  </Badge>
+                </div>
+                {domain ? (
+                  <span className="text-muted-foreground truncate font-mono text-xs">
+                    {domain}
+                  </span>
+                ) : null}
+              </div>
+            </div>
+          )
+        }
+
+        return (
+          <div className="flex min-w-0 flex-col gap-0.5 pl-8">
+            <span className="truncate text-sm font-medium">
+              {original.service.name}
+            </span>
+            <span className="text-muted-foreground truncate font-mono text-xs">
+              {serviceDisplayFqdn(original.service)}
+            </span>
+          </div>
+        )
+      },
+      enableSorting: false,
+      minSize: 260,
+      meta: { headerTitle: 'Группа / сервис', autoSize: true },
+    },
+    {
+      id: 'health',
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} title="Доступность" />
+      ),
+      cell: ({ row }) => {
+        const original = row.original
+        if (!isServiceRow(original)) {
+          return (
+            <HealthCheckBadge
+              status={original.group?.health_status ?? 'unknown'}
+              latencyMs={original.group?.health_latency_ms}
+              size="xs"
+            />
+          )
+        }
+        return (
+          <HealthCheckBadge
+            status={original.service.health_status ?? 'unknown'}
+            latencyMs={original.service.health_latency_ms}
+            size="xs"
+          />
+        )
+      },
+      size: 120,
+      enableSorting: false,
+    },
+    {
+      id: 'enabled',
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} title="Статус" />
+      ),
+      cell: ({ row }) => {
+        const original = row.original
+        if (!isServiceRow(original)) return null
+        return (
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={original.service.enabled}
+              disabled={togglingId === original.service.id}
+              onCheckedChange={(checked) =>
+                onToggleService(original.service.id, Boolean(checked))
+              }
+              aria-label={
+                original.service.enabled
+                  ? 'Выключить сервис'
+                  : 'Включить сервис'
+              }
+            />
+            <StatusBadge
+              status={original.service.enabled ? 'active' : 'disabled'}
+              label={original.service.enabled ? 'Вкл' : 'Выкл'}
+            />
+          </div>
+        )
+      },
+      size: 140,
+      enableSorting: false,
+    },
+    {
+      id: 'actions',
+      enableSorting: false,
+      header: () => <span className="sr-only">Действия</span>,
+      cell: ({ row }) => {
+        const original = row.original
+        if (!isServiceRow(original)) {
+          if (!original.group) {
+            return (
+              <Button
+                type="button"
+                size="icon-sm"
+                variant="ghost"
+                aria-label="Добавить сервис без группы"
+                onClick={() => onAddServiceToGroup(null)}
+              >
+                <PlusIcon aria-hidden />
+              </Button>
+            )
+          }
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label={`Действия группы ${original.group.name}`}
+                  />
+                }
+              >
+                <MoreHorizontalIcon aria-hidden />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  onClick={() => onAddServiceToGroup(original.group!.id)}
+                >
+                  <PlusIcon aria-hidden />
+                  Добавить сервис
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onEditGroup(original.group!)}>
+                  Изменить группу
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  variant="destructive"
+                  onClick={() => onDeleteGroup(original.group!)}
+                >
+                  Удалить группу
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )
+        }
+
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={`Действия ${original.service.name}`}
+                />
+              }
+            >
+              <MoreHorizontalIcon aria-hidden />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => onEditService(original.service)}>
+                Изменить
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                variant="destructive"
+                onClick={() => onDeleteService(original.service)}
+              >
+                Удалить
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      },
+      size: 56,
+    },
+  ]
+}
+
+export function useServicesGroupedColumns(
+  args: Parameters<typeof createServicesGroupedColumns>[0],
+) {
+  return useMemo(() => createServicesGroupedColumns(args), [
+    args.onEditService,
+    args.onDeleteService,
+    args.onToggleService,
+    args.onEditGroup,
+    args.onDeleteGroup,
+    args.onAddServiceToGroup,
+    args.togglingId,
+  ])
+}
@@ -97,10 +97,14 @@ export const serviceViewSchema = serviceSchema.extend({
  enabled: z.coerce.boolean().default(false),
  ips: z.array(z.string()).default([]),
  domains: z.array(serviceDomainBindingSchema).default([]),
+  health_status: z.enum(['up', 'down', 'degraded', 'unknown']).default('unknown'),
+  health_latency_ms: z.number().nullable().default(null),
 })

 export const serviceGroupViewSchema = serviceGroupSchema.extend({
  services: z.array(serviceViewSchema).default([]),
+  health_status: z.enum(['up', 'down', 'degraded', 'unknown']).default('unknown'),
+  health_latency_ms: z.number().nullable().default(null),
 })

 export const serviceGroupsResponseSchema = z.object({
@@ -22,8 +22,6 @@ import {
 } from '@/queries'
 import { useDomainPage } from '@/hooks/use-domain-page'
 import type { SubdomainTableRow } from '@/hooks/use-domain-page'
-import { useDomainHealthByIp } from '@/hooks/use-domain-health'
-import { aggregateHealth } from '@/lib/use-aggregated-health'
 import { PageShell } from '@/components/page-shell'
 import { QueryState } from '@/components/query-state'
 import { DetailPanel, ResourcePage } from '@/components/reui-kit'
@@ -41,7 +39,6 @@ import {
 } from '@/components/subdomain-edit-sheet'
 import { DomainBindingsCard } from '@/components/domain-bindings-card'
 import { DomainAvailabilityPanel } from '@/components/domains/domain-availability-panel'
-import { HealthCheckBadge } from '@/components/health-check-badge'
 import { StatusBadge } from '@/components/status-badge'
 import { certMonitoringLabel, certMonitoringOptions } from '@/lib/cert-monitoring'
 import { formatDate } from '@/lib/format'
@@ -120,12 +117,6 @@ function DomainOverviewPage() {
    linkServiceMutation,
  } = useDomainPage(id)

-  const healthByIp = useDomainHealthByIp(bindings)
-  const aggregatedHealth = useMemo(
-    () => aggregateHealth(Object.values(healthByIp)),
-    [healthByIp],
-  )
-
  const runCheckMutation = useMutation({
    mutationFn: runHealthCheck,
    onSuccess: async (data) => {
@@ -334,23 +325,7 @@ function DomainOverviewPage() {
              title={domain.zone_name}
              description="Карточка домена"
              actions={headerActions}
-            >
-              <div className="flex flex-wrap items-center gap-2">
-                <HealthCheckBadge
-                  status={aggregatedHealth.status}
-                  latencyMs={aggregatedHealth.worstLatencyMs}
-                  lastCheckedAt={aggregatedHealth.lastCheckedAt}
-                  lastError={aggregatedHealth.lastError}
-                  title="Агрегат по привязкам"
-                  showLatency
-                />
-                {aggregatedHealth.total > 0 ? (
-                  <span className="text-muted-foreground text-xs tabular-nums">
-                    {aggregatedHealth.upCount}/{aggregatedHealth.total} OK
-                  </span>
-                ) : null}
-              </div>
-            </DetailPanel.Header>
+            />

            <Tabs
              value={activeTab}
@@ -101,21 +101,45 @@ function DashboardPage() {
    [domains],
  )

-  const attentionDomains = useMemo(
-    () =>
-      (domains ?? [])
-        .filter((d) => d.health_status === 'down' || d.health_status === 'degraded')
-        .slice(0, 8),
-    [domains],
-  )
+  const attentionServices = useMemo(() => {
+    const list: Array<{
+      id: number
+      name: string
+      health_status: string
+      health_latency_ms: number | null
+    }> = []
+    for (const group of serviceData?.groups ?? []) {
+      for (const service of group.services) {
+        if (
+          service.health_status === 'down' ||
+          service.health_status === 'degraded'
+        ) {
+          list.push({
+            id: service.id,
+            name: service.name,
+            health_status: service.health_status,
+            health_latency_ms: service.health_latency_ms,
+          })
+        }
+      }
+    }
+    for (const service of serviceData?.ungrouped ?? []) {
+      if (
+        service.health_status === 'down' ||
+        service.health_status === 'degraded'
+      ) {
+        list.push({
+          id: service.id,
+          name: service.name,
+          health_status: service.health_status,
+          health_latency_ms: service.health_latency_ms,
+        })
+      }
+    }
+    return list.slice(0, 8)
+  }, [serviceData])

-  const attentionCount = useMemo(
-    () =>
-      (domains ?? []).filter(
-        (d) => d.health_status === 'down' || d.health_status === 'degraded',
-      ).length,
-    [domains],
-  )
+  const attentionCount = attentionServices.length

  const certWarnings = countByStatus(summary, ['warning', 'expired', 'error'])
  const certOk = countByStatus(summary, ['active', 'ok'])
@@ -146,11 +170,9 @@ function DashboardPage() {
      label: 'Домены',
      value: domains?.length ?? 0,
      hint:
-        attentionCount > 0
-          ? `${attentionCount} требуют внимания`
-          : ungroupedCount > 0
-            ? `${ungroupedCount} без группы`
-            : 'Все в группах',
+        ungroupedCount > 0
+          ? `${ungroupedCount} без группы`
+          : 'Все в группах',
      to: '/domains',
    },
    {
@@ -164,9 +186,11 @@ function DashboardPage() {
      id: 'services',
      label: 'Сервисы',
      value: serviceCount,
-      hint: ungroupedServiceCount
-        ? `${ungroupedServiceCount} без группы`
-        : undefined,
+      hint: attentionCount
+        ? `${attentionCount} требуют внимания`
+        : ungroupedServiceCount
+          ? `${ungroupedServiceCount} без группы`
+          : undefined,
      to: '/services',
      search: { domainId: undefined },
    },
@@ -208,27 +232,32 @@ function DashboardPage() {
                  </span>
                ) : null}
              </div>
-              {attentionDomains.length === 0 ? (
+              {attentionServices.length === 0 ? (
                <p className="text-muted-foreground text-sm">
-                  Нет доменов со статусом Down или Slow
+                  Нет сервисов со статусом Down или Slow
                </p>
              ) : (
                <ItemGroup className="gap-2">
-                  {attentionDomains.map((domain) => (
-                    <Item key={domain.id} variant="outline" size="sm">
+                  {attentionServices.map((service) => (
+                    <Item key={service.id} variant="outline" size="sm">
                      <ItemContent className="flex flex-row items-center justify-between gap-2">
                        <ItemTitle className="truncate font-medium">
                          <Link
-                            to="/domains/$domainId"
-                            params={{ domainId: String(domain.id) }}
+                            to="/services"
                            className="hover:underline"
                          >
-                            {domain.zone_name}
+                            {service.name}
                          </Link>
                        </ItemTitle>
                        <HealthCheckBadge
-                          status={domain.health_status ?? 'unknown'}
-                          latencyMs={domain.health_latency_ms}
+                          status={
+                            (service.health_status as
+                              | 'up'
+                              | 'down'
+                              | 'degraded'
+                              | 'unknown') ?? 'unknown'
+                          }
+                          latencyMs={service.health_latency_ms}
                          size="xs"
                        />
                      </ItemContent>
@@ -27,24 +27,18 @@ import { ServiceEditSheet } from '@/components/service-edit-sheet'
 import { ServiceGroupEditSheet } from '@/components/service-group-edit-sheet'
 import { ServicesBulkToolbar } from '@/components/services-board/services-bulk-toolbar'
 import { CatalogBoardToggle } from '@/components/catalog-board-toggle'
+import { type ServiceCatalogRow } from '@/components/columns/services-columns'
 import {
-  createDefaultServiceFilters,
-  SERVICE_TABS,
-  serviceFilterFieldValue,
-  serviceTabFilter,
-  useServiceColumns,
-  useServiceFilterFields,
-  type ServiceCatalogRow,
-} from '@/components/columns/services-columns'
+  ServicesAddMenu,
+  ServicesGroupedCatalog,
+} from '@/components/services/services-grouped-catalog'
 import { useServicesKanban } from '@/hooks/use-services-kanban'
 import { useServicesSelection } from '@/hooks/use-services-selection'
 import {
-  ResourcePage,
  KanbanBoard,
  KanbanBoardSkeleton,
 } from '@/components/reui-kit'
 import { ServiceKanbanCard } from '@/components/kanban/service-kanban-card'
-import type { Filter } from '@/components/reui/filters'
 import { Button } from '@cfdm/ui/components/button'

 export const Route = createFileRoute('/_auth/services')({
@@ -152,7 +146,6 @@ function ServicesPage() {
  const [deletingGroupId, setDeletingGroupId] = useState<number | null>(null)
  const [togglingServiceId, setTogglingServiceId] = useState<number | null>(null)
  const [bulkToggling, setBulkToggling] = useState(false)
-  const [filters, setFilters] = useState<Filter[]>(() => createDefaultServiceFilters())
  const queryClient = useQueryClient()
  const selection = useServicesSelection()
  const {
@@ -186,8 +179,6 @@ function ServicesPage() {
    [data, domainId],
  )

-  const filterFields = useServiceFilterFields()
-
  function setView(next: 'catalog' | 'board') {
    navigate({
      search: (prev) => ({
@@ -366,13 +357,6 @@ function ServicesPage() {
    deleteGroupMutation.mutate(id)
  }

-  const { columns } = useServiceColumns({
-    onEdit: setEditingService,
-    onDelete: setDeletingService,
-    onToggle: handleServiceToggle,
-    togglingId: togglingServiceId,
-  })
-
  async function handleBulkToggle(enabled: boolean) {
    const ids = Array.from(selection.selectedIds)
    if (ids.length === 0) return
@@ -422,9 +406,19 @@ function ServicesPage() {
        id: column.id,
        title: column.title,
        description: column.domain ?? undefined,
+        healthStatus: column.group?.health_status,
+        healthLatencyMs: column.group?.health_latency_ms,
        dotClassName: GROUP_DOT_COLORS[index % GROUP_DOT_COLORS.length],
        addLabel: 'Добавить сервис',
        onAdd: () => handleOpenCreateService(column.groupId),
+        onEdit:
+          column.group != null
+            ? () => setEditingGroup(column.group!)
+            : undefined,
+        onDelete:
+          column.group != null
+            ? () => setDeletingGroup(column.group!)
+            : undefined,
      })),
    [board.columns],
  )
@@ -433,15 +427,11 @@ function ServicesPage() {
    ? 'Перетаскивание отключено при фильтре по домену'
    : 'Перетащите сервис между группами или измените порядок в списке'

-  const createServiceButton = (
-    <Button type="button" onClick={() => handleOpenCreateService()}>
-      Добавить сервис
-    </Button>
-  )
-  const createGroupButton = (
-    <Button type="button" variant="outline" onClick={() => setCreateGroupSheetOpen(true)}>
-      Добавить группу
-    </Button>
+  const addMenu = (
+    <ServicesAddMenu
+      onAddService={() => handleOpenCreateService()}
+      onAddGroup={() => setCreateGroupSheetOpen(true)}
+    />
  )

  const sheets = (
@@ -538,17 +528,16 @@ function ServicesPage() {
        {view === 'board' ? (
          <KanbanBoardSkeleton columns={3} />
        ) : (
-          <ResourcePage
-            title="Сервисы"
-            description="Каталог сервисов"
+          <ServicesGroupedCatalog
+            data={{ groups: [], ungrouped: [] }}
            isLoading
-            filterFields={[]}
-            filters={[]}
-            onFiltersChange={() => {}}
-            getFilterFieldValue={() => ''}
-            columns={[]}
-            data={[]}
-            getRowId={() => ''}
+            togglingId={null}
+            onEditService={() => {}}
+            onDeleteService={() => {}}
+            onToggleService={() => {}}
+            onEditGroup={() => {}}
+            onDeleteGroup={() => {}}
+            onAddServiceToGroup={() => {}}
          />
        )}
        {sheets}
@@ -591,12 +580,11 @@ function ServicesPage() {
              description={
                filteredDomain
                  ? `Нет сервисов с привязками к ${filteredDomain.zone_name}`
-                  : 'Создайте сервис — например VPN Panel или Home Assistant.'
+                  : 'Сначала создайте группу, затем добавьте сервисы.'
              }
              action={
                <div className="flex flex-wrap justify-center gap-2">
-                  {createServiceButton}
-                  {createGroupButton}
+                  {addMenu}
                  <CatalogBoardToggle view="board" onViewChange={setView} />
                </div>
              }
@@ -614,8 +602,7 @@ function ServicesPage() {
              onValueChange={dragDisabled ? () => {} : handleKanbanValueChange}
              toolbarActions={
                <>
-                  {createServiceButton}
-                  {createGroupButton}
+                  {addMenu}
                  <CatalogBoardToggle view="board" onViewChange={setView} />
                </>
              }
@@ -634,42 +621,28 @@ function ServicesPage() {
          )}
        </>
      ) : (
-        <ResourcePage
-          title="Сервисы"
-          description={
-            filteredDomain
-              ? `Каталог сервисов с привязками к ${filteredDomain.zone_name}`
-              : 'Каталог сервисов и привязок'
-          }
-          tabs={SERVICE_TABS.map((tab) => ({ ...tab }))}
-          tabFilter={serviceTabFilter}
-          filterFields={filterFields}
-          filters={filters}
-          onFiltersChange={setFilters}
-          onClearFilters={() => setFilters(createDefaultServiceFilters())}
-          getFilterFieldValue={serviceFilterFieldValue}
-          columns={columns}
-          data={catalogRows}
-          getRowId={(row) => String(row.id)}
+        <ServicesGroupedCatalog
+          data={data ?? { groups: [], ungrouped: [] }}
+          domainId={domainId}
+          domainLabel={filteredDomain?.zone_name}
+          togglingId={togglingServiceId}
+          onEditService={setEditingService}
+          onDeleteService={setDeletingService}
+          onToggleService={handleServiceToggle}
+          onEditGroup={setEditingGroup}
+          onDeleteGroup={setDeletingGroup}
+          onAddServiceToGroup={handleOpenCreateService}
          primaryAction={
            <>
-              {createServiceButton}
-              {createGroupButton}
+              {addMenu}
              <CatalogBoardToggle view="catalog" onViewChange={setView} />
            </>
          }
-          emptyState={{
-            title: 'Сервисы не найдены',
-            description: filteredDomain
-              ? `Нет сервисов с привязками к ${filteredDomain.zone_name}`
-              : 'Создайте сервис или группу сервисов.',
-            action: (
-              <div className="flex flex-wrap justify-center gap-2">
-                {createServiceButton}
-                {createGroupButton}
-              </div>
-            ),
-          }}
+          emptyAction={
+            <div className="flex flex-wrap justify-center gap-2">
+              {addMenu}
+            </div>
+          }
        />
      )}
      {sheets}
@@ -415,6 +415,8 @@ function getAppSwitcher(db) {
 var repos_exports = {};
 __export(repos_exports, {
  addDomainTags: () => addDomainTags,
+  aggregateIpHealthByRefs: () => aggregateIpHealthByRefs,
+  aggregateIpHealthByServiceIds: () => aggregateIpHealthByServiceIds,
  bindingsToRemove: () => bindingsToRemove,
  countCertificatesByStatus: () => countCertificatesByStatus,
  createDomain: () => createDomain,
@@ -489,6 +491,7 @@ __export(repos_exports, {
  listSubdomainsByDomain: () => listSubdomainsByDomain,
  listUngroupedServices: () => listUngroupedServices,
  markDnsPendingDelete: () => markDnsPendingDelete,
+  mergeHealthAggregates: () => mergeHealthAggregates,
  reorderServices: () => reorderServices,
  replaceBindingIps: () => replaceBindingIps,
  replaceBindingIpsWithMeta: () => replaceBindingIpsWithMeta,
@@ -1294,6 +1297,109 @@ function listIpHealthStatus(db, scope, refId) {
    WHERE scope = ${scope} AND ref_id = ${refId}
  `);
 }
+var UNKNOWN_HEALTH = {
+  health_status: "unknown",
+  health_latency_ms: null
+};
+function parseHealthAggregateRow(row) {
+  const status = row.health_status;
+  if (status === "up" || status === "down" || status === "degraded" || status === "unknown") {
+    return {
+      health_status: status,
+      health_latency_ms: row.health_latency_ms ?? null
+    };
+  }
+  return UNKNOWN_HEALTH;
+}
+var WORST_HEALTH_SQL = sql2.raw(`CASE
+  WHEN MAX(CASE
+    WHEN status = 'down' THEN 3
+    WHEN status = 'degraded' THEN 2
+    WHEN status = 'up' THEN 1
+    ELSE 0
+  END) = 3 THEN 'down'
+  WHEN MAX(CASE
+    WHEN status = 'down' THEN 3
+    WHEN status = 'degraded' THEN 2
+    WHEN status = 'up' THEN 1
+    ELSE 0
+  END) = 2 THEN 'degraded'
+  WHEN MAX(CASE
+    WHEN status = 'down' THEN 3
+    WHEN status = 'degraded' THEN 2
+    WHEN status = 'up' THEN 1
+    ELSE 0
+  END) = 1 THEN 'up'
+  ELSE 'unknown'
+END`);
+function aggregateIpHealthByRefs(db, scope, refIds) {
+  const result = /* @__PURE__ */ new Map();
+  if (refIds.length === 0) return result;
+  const idList = sql2.join(
+    refIds.map((id) => sql2`${id}`),
+    sql2`, `
+  );
+  const rows = db.all(sql2`
+    SELECT ref_id,
+      ${WORST_HEALTH_SQL} AS health_status,
+      MAX(latency_ms) AS health_latency_ms
+    FROM ip_health_status
+    WHERE scope = ${scope} AND ref_id IN (${idList})
+    GROUP BY ref_id
+  `);
+  for (const row of rows) {
+    result.set(row.ref_id, parseHealthAggregateRow(row));
+  }
+  return result;
+}
+function aggregateIpHealthByServiceIds(db, serviceIds) {
+  const result = /* @__PURE__ */ new Map();
+  if (serviceIds.length === 0) return result;
+  const idList = sql2.join(
+    serviceIds.map((id) => sql2`${id}`),
+    sql2`, `
+  );
+  const rows = db.all(sql2`
+    SELECT sb.service_id AS service_id,
+      ${WORST_HEALTH_SQL} AS health_status,
+      MAX(ihs.latency_ms) AS health_latency_ms
+    FROM ip_health_status ihs
+    INNER JOIN service_bindings sb
+      ON ihs.scope = 'binding' AND ihs.ref_id = sb.id
+    WHERE sb.service_id IN (${idList})
+    GROUP BY sb.service_id
+  `);
+  for (const row of rows) {
+    result.set(row.service_id, parseHealthAggregateRow(row));
+  }
+  return result;
+}
+function mergeHealthAggregates(parts) {
+  const rank = {
+    unknown: 0,
+    up: 1,
+    degraded: 2,
+    down: 3
+  };
+  let worst = UNKNOWN_HEALTH;
+  let hasAny = false;
+  for (const part of parts) {
+    if (!part) continue;
+    hasAny = true;
+    if (rank[part.health_status] > rank[worst.health_status]) {
+      worst = {
+        health_status: part.health_status,
+        health_latency_ms: part.health_latency_ms
+      };
+    } else if (part.health_status === worst.health_status && part.health_latency_ms != null && (worst.health_latency_ms == null || part.health_latency_ms > worst.health_latency_ms)) {
+      worst = {
+        health_status: worst.health_status,
+        health_latency_ms: part.health_latency_ms
+      };
+    }
+  }
+  return hasAny ? worst : UNKNOWN_HEALTH;
+}
 function getIpHealthStatusRow(db, scope, refId, ip) {
  const rows = db.all(sql2`
    SELECT scope, ref_id, ip, status, latency_ms, consecutive_failures,
@@ -8,6 +8,7 @@ import type {
  HealthCheckScope,
  HealthCheckTarget,
  HealthCheckType,
+  IpHealthState,
  IpHealthStatus,
  LbMode,
  Service,
@@ -1466,6 +1467,152 @@ export function listIpHealthStatus(
  `);
 }

+export type HealthAggregate = {
+  health_status: IpHealthState;
+  health_latency_ms: number | null;
+};
+
+const UNKNOWN_HEALTH: HealthAggregate = {
+  health_status: "unknown",
+  health_latency_ms: null,
+};
+
+function parseHealthAggregateRow(row: {
+  health_status: string | null;
+  health_latency_ms: number | null;
+}): HealthAggregate {
+  const status = row.health_status;
+  if (
+    status === "up" ||
+    status === "down" ||
+    status === "degraded" ||
+    status === "unknown"
+  ) {
+    return {
+      health_status: status,
+      health_latency_ms: row.health_latency_ms ?? null,
+    };
+  }
+  return UNKNOWN_HEALTH;
+}
+
+const WORST_HEALTH_SQL = sql.raw(`CASE
+  WHEN MAX(CASE
+    WHEN status = 'down' THEN 3
+    WHEN status = 'degraded' THEN 2
+    WHEN status = 'up' THEN 1
+    ELSE 0
+  END) = 3 THEN 'down'
+  WHEN MAX(CASE
+    WHEN status = 'down' THEN 3
+    WHEN status = 'degraded' THEN 2
+    WHEN status = 'up' THEN 1
+    ELSE 0
+  END) = 2 THEN 'degraded'
+  WHEN MAX(CASE
+    WHEN status = 'down' THEN 3
+    WHEN status = 'degraded' THEN 2
+    WHEN status = 'up' THEN 1
+    ELSE 0
+  END) = 1 THEN 'up'
+  ELSE 'unknown'
+END`);
+
+/** Worst status across ip_health_status rows for each ref_id in a scope. */
+export function aggregateIpHealthByRefs(
+  db: Db,
+  scope: HealthCheckScope,
+  refIds: number[],
+): Map<number, HealthAggregate> {
+  const result = new Map<number, HealthAggregate>();
+  if (refIds.length === 0) return result;
+  const idList = sql.join(
+    refIds.map((id) => sql`${id}`),
+    sql`, `,
+  );
+  const rows = db.all<{
+    ref_id: number;
+    health_status: string | null;
+    health_latency_ms: number | null;
+  }>(sql`
+    SELECT ref_id,
+      ${WORST_HEALTH_SQL} AS health_status,
+      MAX(latency_ms) AS health_latency_ms
+    FROM ip_health_status
+    WHERE scope = ${scope} AND ref_id IN (${idList})
+    GROUP BY ref_id
+  `);
+  for (const row of rows) {
+    result.set(row.ref_id, parseHealthAggregateRow(row));
+  }
+  return result;
+}
+
+/** Worst binding-scope health rolled up per service_id. */
+export function aggregateIpHealthByServiceIds(
+  db: Db,
+  serviceIds: number[],
+): Map<number, HealthAggregate> {
+  const result = new Map<number, HealthAggregate>();
+  if (serviceIds.length === 0) return result;
+  const idList = sql.join(
+    serviceIds.map((id) => sql`${id}`),
+    sql`, `,
+  );
+  const rows = db.all<{
+    service_id: number;
+    health_status: string | null;
+    health_latency_ms: number | null;
+  }>(sql`
+    SELECT sb.service_id AS service_id,
+      ${WORST_HEALTH_SQL} AS health_status,
+      MAX(ihs.latency_ms) AS health_latency_ms
+    FROM ip_health_status ihs
+    INNER JOIN service_bindings sb
+      ON ihs.scope = 'binding' AND ihs.ref_id = sb.id
+    WHERE sb.service_id IN (${idList})
+    GROUP BY sb.service_id
+  `);
+  for (const row of rows) {
+    result.set(row.service_id, parseHealthAggregateRow(row));
+  }
+  return result;
+}
+
+export function mergeHealthAggregates(
+  parts: Array<HealthAggregate | undefined | null>,
+): HealthAggregate {
+  const rank: Record<IpHealthState, number> = {
+    unknown: 0,
+    up: 1,
+    degraded: 2,
+    down: 3,
+  };
+  let worst: HealthAggregate = UNKNOWN_HEALTH;
+  let hasAny = false;
+  for (const part of parts) {
+    if (!part) continue;
+    hasAny = true;
+    if (rank[part.health_status] > rank[worst.health_status]) {
+      worst = {
+        health_status: part.health_status,
+        health_latency_ms: part.health_latency_ms,
+      };
+    } else if (
+      part.health_status === worst.health_status &&
+      part.health_latency_ms != null &&
+      (worst.health_latency_ms == null ||
+        part.health_latency_ms > worst.health_latency_ms)
+    ) {
+      worst = {
+        health_status: worst.health_status,
+        health_latency_ms: part.health_latency_ms,
+      };
+    }
+  }
+  return hasAny ? worst : UNKNOWN_HEALTH;
+}
+
 export function getIpHealthStatusRow(
  db: Db,
  scope: HealthCheckScope,
@@ -497,6 +497,13 @@ declare const serviceViewSchema: z.ZodObject<{
        target_ip_priorities?: Record<string, number> | undefined;
        target_cname?: string | null | undefined;
    }>>>>;
+    health_status: z.ZodDefault<z.ZodEnum<{
+        unknown: "unknown";
+        up: "up";
+        down: "down";
+        degraded: "degraded";
+    }>>;
+    health_latency_ms: z.ZodDefault<z.ZodNullable<z.ZodNumber>>;
 }, z.core.$strip>;
 declare const serviceGroupViewSchema: z.ZodObject<{
    id: z.ZodNumber;
@@ -619,7 +626,21 @@ declare const serviceGroupViewSchema: z.ZodObject<{
            target_ip_priorities?: Record<string, number> | undefined;
            target_cname?: string | null | undefined;
        }>>>>;
+        health_status: z.ZodDefault<z.ZodEnum<{
+            unknown: "unknown";
+            up: "up";
+            down: "down";
+            degraded: "degraded";
+        }>>;
+        health_latency_ms: z.ZodDefault<z.ZodNullable<z.ZodNumber>>;
    }, z.core.$strip>>>;
+    health_status: z.ZodDefault<z.ZodEnum<{
+        unknown: "unknown";
+        up: "up";
+        down: "down";
+        degraded: "degraded";
+    }>>;
+    health_latency_ms: z.ZodDefault<z.ZodNullable<z.ZodNumber>>;
 }, z.core.$strip>;
 declare const serviceGroupsResponseSchema: z.ZodObject<{
    groups: z.ZodDefault<z.ZodArray<z.ZodObject<{
@@ -743,7 +764,21 @@ declare const serviceGroupsResponseSchema: z.ZodObject<{
                target_ip_priorities?: Record<string, number> | undefined;
                target_cname?: string | null | undefined;
            }>>>>;
+            health_status: z.ZodDefault<z.ZodEnum<{
+                unknown: "unknown";
+                up: "up";
+                down: "down";
+                degraded: "degraded";
+            }>>;
+            health_latency_ms: z.ZodDefault<z.ZodNullable<z.ZodNumber>>;
        }, z.core.$strip>>>;
+        health_status: z.ZodDefault<z.ZodEnum<{
+            unknown: "unknown";
+            up: "up";
+            down: "down";
+            degraded: "degraded";
+        }>>;
+        health_latency_ms: z.ZodDefault<z.ZodNullable<z.ZodNumber>>;
    }, z.core.$strip>>>;
    ungrouped: z.ZodDefault<z.ZodArray<z.ZodObject<{
        id: z.ZodNumber;
@@ -834,6 +869,13 @@ declare const serviceGroupsResponseSchema: z.ZodObject<{
            target_ip_priorities?: Record<string, number> | undefined;
            target_cname?: string | null | undefined;
        }>>>>;
+        health_status: z.ZodDefault<z.ZodEnum<{
+            unknown: "unknown";
+            up: "up";
+            down: "down";
+            degraded: "degraded";
+        }>>;
+        health_latency_ms: z.ZodDefault<z.ZodNullable<z.ZodNumber>>;
    }, z.core.$strip>>>;
 }, z.core.$strip>;
 declare const domainSchema: z.ZodObject<{
@@ -257,10 +257,14 @@ var serviceViewSchema = serviceSchema.extend({
  subdomain: z.string().default(""),
  enabled: z.coerce.boolean().default(false),
  ips: z.array(z.string()).default([]),
-  domains: z.array(serviceDomainBindingSchema).default([])
+  domains: z.array(serviceDomainBindingSchema).default([]),
+  health_status: ipHealthStateSchema.default("unknown"),
+  health_latency_ms: z.number().nullable().default(null)
 });
 var serviceGroupViewSchema = serviceGroupSchema.extend({
-  services: z.array(serviceViewSchema).default([])
+  services: z.array(serviceViewSchema).default([]),
+  health_status: ipHealthStateSchema.default("unknown"),
+  health_latency_ms: z.number().nullable().default(null)
 });
 var serviceGroupsResponseSchema = z.object({
  groups: z.array(serviceGroupViewSchema).default([]),
@@ -132,10 +132,14 @@ export const serviceViewSchema = serviceSchema.extend({
  enabled: z.coerce.boolean().default(false),
  ips: z.array(z.string()).default([]),
  domains: z.array(serviceDomainBindingSchema).default([]),
+  health_status: ipHealthStateSchema.default('unknown'),
+  health_latency_ms: z.number().nullable().default(null),
 })

 export const serviceGroupViewSchema = serviceGroupSchema.extend({
  services: z.array(serviceViewSchema).default([]),
+  health_status: ipHealthStateSchema.default('unknown'),
+  health_latency_ms: z.number().nullable().default(null),
 })

 export const serviceGroupsResponseSchema = z.object({
@@ -27,6 +27,8 @@ export interface ServiceGroup {

 export interface ServiceGroupView extends ServiceGroup {
  services: ServiceView[];
+  health_status: IpHealthState;
+  health_latency_ms: number | null;
 }

 export interface ServiceGroupsResponse {
@@ -185,6 +187,8 @@ export interface ServiceView {
  updated_at: string;
  ips: string[];
  domains: ServiceDomainBindingView[];
+  health_status: IpHealthState;
+  health_latency_ms: number | null;
 }

 export interface GroupWithStats extends Group {
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"