feat(dashboard): surface exclusive managed leases in Sessions view (#11389)

Merged into release/v3.8.51 via batch validation: exclusive-session-observability unit+UI suites green on the combined tree, static gates green. Nice additive observability layer over the #10362 lease backend — thanks @KaspaPulse!

tests/unit/ui/exclusive-session-observability-ui.test.tsx

@@ -0,0 +1,139 @@
+// @vitest-environment jsdom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+vi.mock("next-intl", () => ({
+  useTranslations: (namespace: string) => (key: string) => {
+    if (namespace === "common" && key === "active") return "Localized active";
+    if (namespace === "usage" && key === "noSessions") return "Localized empty state";
+    return key;
+  },
+}));
+
+vi.mock("@/shared/components", () => ({
+  Card: ({ children }: { children: React.ReactNode }) => <div data-testid="card">{children}</div>,
+}));
+
+const { default: SessionsTab } =
+  await import("../../../src/app/(dashboard)/dashboard/usage/components/SessionsTab");
+
+let container: HTMLDivElement;
+let root: ReturnType<typeof createRoot>;
+
+beforeEach(() => {
+  (
+    globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+});
+
+async function renderPayload(payload: Record<string, unknown>): Promise<void> {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => ({
+      ok: true,
+      json: async () => payload,
+    }))
+  );
+
+  await act(async () => {
+    root.render(<SessionsTab />);
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+}
+
+it("keeps idle leases visible, de-duplicates legacy rows, and localizes only active work", async () => {
+  await renderPayload({
+    count: 2,
+    sessions: [
+      {
+        sessionId: "legacy-active",
+        ageMs: 1_000,
+        requestCount: 4,
+        connectionId: "conn-active",
+      },
+      {
+        sessionId: "legacy-unmanaged",
+        ageMs: 2_000,
+        requestCount: 1,
+        connectionId: "conn-unmanaged",
+      },
+    ],
+    exclusiveSessions: [
+      {
+        sessionId: "lease:conn-active",
+        ageMs: null,
+        requestCount: 4,
+        connectionId: "conn-active",
+        connectionName: "Friendly active account",
+        leaseBacked: true,
+        active: true,
+      },
+      {
+        sessionId: "lease:conn-idle",
+        ageMs: null,
+        requestCount: 0,
+        connectionId: "conn-idle",
+        connectionName: "Friendly idle account",
+        leaseBacked: true,
+        active: false,
+      },
+    ],
+  });
+
+  expect(container.querySelector("[title='lease:conn-active']")).not.toBeNull();
+  expect(container.querySelector("[title='lease:conn-idle']")).not.toBeNull();
+  expect(container.querySelector("[title='legacy-unmanaged']")).not.toBeNull();
+  expect(container.querySelector("[title='legacy-active']")).toBeNull();
+  expect(container.textContent).toContain("Friendly active account");
+  expect(container.textContent).toContain("Friendly idle account");
+
+  const activeLabels = Array.from(container.querySelectorAll("span")).filter(
+    (node) => node.textContent === "Localized active"
+  );
+  expect(activeLabels).toHaveLength(1);
+  const idleRow = container.querySelector("[title='lease:conn-idle']")?.closest("tr");
+  expect(idleRow?.textContent).not.toContain("Localized active");
+  expect(container.textContent).not.toContain("IDLE");
+
+  expect(container.querySelector("[data-testid='session-count']")?.textContent).toBe("3");
+});
+
+it("preserves a legacy-only response when additive lease fields are absent", async () => {
+  await renderPayload({
+    count: 1,
+    sessions: [
+      {
+        sessionId: "legacy-only",
+        ageMs: 1_000,
+        requestCount: 1,
+        connectionId: null,
+      },
+    ],
+    byApiKey: {},
+  });
+
+  expect(container.querySelector("[title='legacy-only']")).not.toBeNull();
+  expect(container.textContent).not.toContain("Localized empty state");
+  expect(container.querySelector("[data-testid='session-count']")?.textContent).toBe("1");
+});
+
+it("keeps the localized empty state and zero count", async () => {
+  await renderPayload({ count: 0, sessions: [], byApiKey: {} });
+
+  expect(container.textContent).toContain("Localized empty state");
+  expect(container.querySelector("tbody")).toBeNull();
+  expect(container.querySelector("[data-testid='session-count']")?.textContent).toBe("0");
+});