perf(clients): make the clients page scale to large panels

The clients page was slow on panels with many clients for two independent
reasons: the server rebuilt the whole picture on every request, and the
browser rebuilt the whole table on every poll.

Server side, ListPaged loaded every client row, every client_inbounds link
and every client_traffics row into Go memory, then filtered, sorted and
paginated in a loop -- on a request the page repeats every five seconds.
Every predicate now runs in SQL and only the requested page's ids are
hydrated, so the cost tracks the page size rather than the client count.
Measured on SQLite with a realistic status mix: the default view at 100k
clients goes from 1,072ms to 64ms. Behaviour is preserved deliberately in
the subtle places -- the cross-panel global-traffic overlay is folded into
the same used-bytes expression the predicates and sort use, LIKE wildcards
are escaped so a search for "a_b" stays literal, and the two different
tiebreak rules the in-memory comparator had are reproduced per sort key.

The summary's per-bucket email lists are capped at 200 with exact counters
beside them. They only back hover popovers, but shipping every match made
the response grow with the panel: at 100k clients it carried ~42k emails,
and the page revalidated all of them through a strict Zod parse every five
seconds. The popover now shows a "+N" chip for the remainder.

Browser side, the page fired three sequential list requests per load and
threw the first two away: the query went out before the persisted sort was
applied, and again before the configured page size was known -- 0 meaning
"one long page" is indistinguishable from "not loaded yet". The page size
is now derived rather than mirrored through an effect, and the previous
visit's value is remembered so the single request goes out at mount instead
of queueing behind /setting/defaultSettings.

Then the per-poll work. Reading isFetching made it a tracked property, so
the refetch interval notified twice per cycle and re-rendered the page even
when structural sharing left the data identical. Xray reports a traffic row
per client whether or not it moved bytes, so the speed map was mostly zeros
and was replaced wholesale every push; zero rows are now dropped and an
unchanged result returns the previous object, which lets React bail out
instead of re-rendering. The five Tooltip-wrapped buttons and the inbound
chips per row do not depend on traffic at all and are now memoised, keyed on
the email because a push replaces the row object of every client whose
counters moved. antd's hashed:false drops 3,311 :where(.css-<hash>) wrappers
and 29% of the generated stylesheet, and a pinned cssVar key stops each of
the eleven page-level ConfigProviders minting its own token scope.

Two callers that only need the mutations, GroupsPage and ClientBulkAddModal,
no longer start the list query -- the groups page had been polling the full
paged list every five seconds for data it never renders.

frontend/src/test/clients-query-gating.test.tsx

@@ -0,0 +1,127 @@
+import type { ReactNode } from 'react';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { useClients } from '@/hooks/useClients';
+import { makeTestQueryClient } from '@/test/test-utils';
+import { HttpUtil, Msg } from '@/utils';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+const emptyPage = {
+  items: [],
+  total: 0,
+  filtered: 0,
+  page: 1,
+  pageSize: 25,
+  groups: [],
+  summary: {
+    total: 0,
+    active: 0,
+    onlineCount: 0,
+    depletedCount: 0,
+    expiringCount: 0,
+    deactiveCount: 0,
+    online: [],
+    depleted: [],
+    expiring: [],
+    deactive: [],
+  },
+};
+
+function mockPanel(defaults: Record<string, unknown>) {
+  const pagedUrls: string[] = [];
+  vi.spyOn(HttpUtil, 'get').mockImplementation(async (url: string) => {
+    if (url.includes('/clients/list/paged')) {
+      pagedUrls.push(url);
+      return new Msg(true, '', emptyPage);
+    }
+    if (url.includes('/inbounds/options')) return new Msg(true, '', []);
+    return new Msg(true, '', null);
+  });
+  vi.spyOn(HttpUtil, 'post').mockImplementation(async (url: string) => {
+    if (url.includes('/setting/defaultSettings')) return new Msg(true, '', defaults);
+    if (url.includes('/clients/onlines')) return new Msg(true, '', []);
+    return new Msg(true, '', null);
+  });
+  return pagedUrls;
+}
+
+function wrapperFor() {
+  const queryClient = makeTestQueryClient();
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+describe('useClients query gating', () => {
+  it('does not fetch the list until the page supplies a query', async () => {
+    const pagedUrls = mockPanel({ pageSize: 25 });
+    const { result } = renderHook(() => useClients(), { wrapper: wrapperFor() });
+
+    await waitFor(() => expect(result.current.settingsReady).toBe(true));
+    // The page has not called setQuery yet, so nothing should have gone out —
+    // this is what used to cost a thrown-away round trip on every page load.
+    expect(pagedUrls).toEqual([]);
+    expect(result.current.fetched).toBe(false);
+  });
+
+  it('issues exactly one request for a page load that settles on one query', async () => {
+    const pagedUrls = mockPanel({ pageSize: 50 });
+    const { result } = renderHook(() => useClients(), { wrapper: wrapperFor() });
+
+    await waitFor(() => expect(result.current.settingsReady).toBe(true));
+    act(() => {
+      result.current.setQuery({ page: 1, pageSize: 50, sort: 'createdAt', order: 'ascend' });
+    });
+
+    await waitFor(() => expect(result.current.fetched).toBe(true));
+    expect(pagedUrls).toHaveLength(1);
+    expect(pagedUrls[0]).toContain('pageSize=50');
+    expect(pagedUrls[0]).toContain('sort=createdAt');
+  });
+
+  it('fetches as soon as a query arrives, without waiting for the settings', async () => {
+    // The page remembers the previous visit's page size in localStorage, so on a
+    // return visit it can supply a query on the first render. The hook must not
+    // hold that back behind /setting/defaultSettings, or the two round trips
+    // serialise and the list lands ~160ms later than it needs to.
+    const pagedUrls = mockPanel({ pageSize: 25 });
+    const { result } = renderHook(() => useClients(), { wrapper: wrapperFor() });
+
+    act(() => {
+      result.current.setQuery({ page: 1, pageSize: 25, sort: 'createdAt', order: 'ascend' });
+    });
+    await waitFor(() => expect(pagedUrls).toHaveLength(1));
+  });
+
+  it('reports settingsReady even when the settings request fails, so the page can still render', async () => {
+    vi.spyOn(HttpUtil, 'get').mockResolvedValue(new Msg(true, '', emptyPage));
+    vi.spyOn(HttpUtil, 'post').mockResolvedValue(new Msg(false, 'boom', null));
+    const { result } = renderHook(() => useClients(), { wrapper: wrapperFor() });
+
+    await waitFor(() => expect(result.current.settingsReady).toBe(true));
+  });
+
+  it('skips the list, options and onlines queries for mutation-only callers', async () => {
+    const pagedUrls = mockPanel({ pageSize: 25 });
+    const postSpy = vi.mocked(HttpUtil.post);
+    const { result } = renderHook(() => useClients({ list: false }), { wrapper: wrapperFor() });
+
+    await waitFor(() => expect(result.current.settingsReady).toBe(true));
+    act(() => {
+      result.current.setQuery({ page: 1, pageSize: 25, sort: 'createdAt', order: 'ascend' });
+    });
+
+    await waitFor(() => expect(result.current.settingsReady).toBe(true));
+    expect(pagedUrls).toEqual([]);
+    // subSettings still needs defaultSettings; onlines must not be polled.
+    const posted = postSpy.mock.calls.map((c) => String(c[0]));
+    expect(posted.some((u) => u.includes('/setting/defaultSettings'))).toBe(true);
+    expect(posted.some((u) => u.includes('/clients/onlines'))).toBe(false);
+    expect(vi.mocked(HttpUtil.get).mock.calls.map((c) => String(c[0]))).toEqual([]);
+  });
+});

frontend/src/test/clients-row-cells-memo.test.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ClientInboundChips, ClientRowActions } from '@/pages/clients/RowCells';
+import type { InboundOption } from '@/hooks/useClients';
+
+const PROTOCOL_COLORS = { vless: 'blue', trojan: 'volcano' };
+
+// Counts how often the cell reads the inbound map, which happens once per chip
+// per render. A traffic push re-renders the row, so if the cell is not memoised
+// this climbs every five seconds for every visible row.
+function countingInboundMap(source: Record<number, InboundOption>) {
+  const reads = { count: 0 };
+  const proxy = new Proxy(source, {
+    get(target, key) {
+      if (typeof key === 'string' && /^\d+$/.test(key)) reads.count += 1;
+      return target[key as unknown as number];
+    },
+  });
+  return { proxy, reads };
+}
+
+const INBOUNDS: Record<number, InboundOption> = {
+  1: { id: 1, tag: 'in-vless', remark: 'DE', protocol: 'vless' },
+  2: { id: 2, tag: 'in-trojan', remark: 'NL', protocol: 'trojan' },
+};
+
+function Harness({ children }: { children: (bump: () => void) => React.ReactNode }) {
+  const [, setTick] = useState(0);
+  return <>{children(() => setTick((n) => n + 1))}</>;
+}
+
+describe('clients table row cells', () => {
+  it('does not re-render the inbound chips when the row re-renders with the same attachments', async () => {
+    const { proxy, reads } = countingInboundMap(INBOUNDS);
+    const ids = [1, 2];
+    let bump: () => void = () => {};
+
+    render(
+      <Harness>
+        {(doBump) => {
+          bump = doBump;
+          return (
+            <ClientInboundChips ids={ids} inboundsById={proxy} protocolColors={PROTOCOL_COLORS} chipLimit={1} />
+          );
+        }}
+      </Harness>,
+    );
+
+    const afterFirstRender = reads.count;
+    expect(afterFirstRender).toBeGreaterThan(0);
+
+    // Three simulated traffic pushes: the parent re-renders, the props do not change.
+    for (let i = 0; i < 3; i++) bump();
+    await Promise.resolve();
+
+    expect(reads.count).toBe(afterFirstRender);
+  });
+
+  it('re-renders the chips when the attachments actually change', async () => {
+    const { proxy, reads } = countingInboundMap(INBOUNDS);
+
+    function Swapper() {
+      const [ids, setIds] = useState<number[]>([1]);
+      return (
+        <>
+          <button type="button" onClick={() => setIds([1, 2])}>swap</button>
+          <ClientInboundChips ids={ids} inboundsById={proxy} protocolColors={PROTOCOL_COLORS} chipLimit={1} />
+        </>
+      );
+    }
+    render(<Swapper />);
+    const before = reads.count;
+    await userEvent.click(screen.getByRole('button', { name: 'swap' }));
+    expect(reads.count).toBeGreaterThan(before);
+  });
+
+  it('keeps the row actions wired to the right client across re-renders', async () => {
+    const onShowQr = vi.fn();
+    const onEdit = vi.fn();
+    const noop = vi.fn();
+    let bump: () => void = () => {};
+
+    render(
+      <Harness>
+        {(doBump) => {
+          bump = doBump;
+          return (
+            <ClientRowActions
+              email="alice@x"
+              onShowQr={onShowQr}
+              onShowInfo={noop}
+              onResetTraffic={noop}
+              onEdit={onEdit}
+              onDelete={noop}
+            />
+          );
+        }}
+      </Harness>,
+    );
+
+    for (let i = 0; i < 3; i++) bump();
+
+    // Queried by position rather than label: the suite loads the real en-US
+    // bundle, so the aria-labels are translated strings, not keys. Order is
+    // QR, info, reset traffic, edit, delete.
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(5);
+    await userEvent.click(buttons[0]);
+    await userEvent.click(buttons[3]);
+
+    expect(onShowQr).toHaveBeenCalledExactlyOnceWith('alice@x');
+    expect(onEdit).toHaveBeenCalledExactlyOnceWith('alice@x');
+  });
+});

frontend/src/test/clients-summary.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 
-import { computeClientsSummary, pickClientsSummary } from '@/hooks/useClients';
+import { computeClientsSummary, pickClientsSummary, sameSpeedMap, sameSummaryInputs } from '@/hooks/useClients';
 import type { ClientTraffic, ClientsSummary } from '@/schemas/client';
 
 // Parity with web/service/client.go buildClientsSummary: the same client must
@@ -42,6 +42,24 @@ describe('computeClientsSummary', () => {
     expect(s.active).toBe(2); // online@x + offline@x
   });
 
+  it('reports a counter alongside every bucket list', () => {
+    const stats: Row[] = [
+      row({ email: 'online@x', enable: true }),
+      row({ email: 'disabled@x', enable: false }),
+      row({ email: 'exhausted@x', enable: true, total: 1 * GB, up: 1 * GB }),
+      row({ email: 'nearlimit@x', enable: true, total: 10 * GB, up: 9.9 * GB }),
+    ];
+    const s = computeClientsSummary(stats, new Set(['online@x']), 3 * DAY, 1 * GB);
+
+    // The server caps its lists but never its counters; the live recompute has
+    // both, so the summary card reads the same either way.
+    expect(s.onlineCount).toBe(s.online.length);
+    expect(s.depletedCount).toBe(s.depleted.length);
+    expect(s.expiringCount).toBe(s.expiring.length);
+    expect(s.deactiveCount).toBe(s.deactive.length);
+    expect(s.active + s.depletedCount + s.expiringCount + s.deactiveCount).toBe(s.total);
+  });
+
   it('depleted wins over disabled and over online', () => {
     const stats: Row[] = [
       row({ email: 'a@x', enable: false, total: 1 * GB, up: 2 * GB }),
@@ -63,7 +81,9 @@ describe('computeClientsSummary', () => {
 
 describe('pickClientsSummary', () => {
   const serverSummary: ClientsSummary = {
-    total: 67, active: 58, online: [], depleted: [], expiring: [], deactive: [],
+    total: 67, active: 58,
+    onlineCount: 0, depletedCount: 4, expiringCount: 3, deactiveCount: 2,
+    online: [], depleted: [], expiring: [], deactive: [],
   };
 
   it('keeps the server summary when the snapshot is short of the server total (#6102)', () => {
@@ -84,3 +104,39 @@ describe('pickClientsSummary', () => {
     expect(s).toEqual(serverSummary);
   });
 });
+
+describe('websocket payload identity preservation', () => {
+  const speed = (up: number, down: number) => ({ up, down });
+
+  it('treats an unchanged speed map as unchanged', () => {
+    const a = { 'a@x': speed(1, 2), 'b@x': speed(3, 4) };
+    expect(sameSpeedMap(a, { 'a@x': speed(1, 2), 'b@x': speed(3, 4) })).toBe(true);
+    expect(sameSpeedMap(a, { 'a@x': speed(1, 2) })).toBe(false);
+    expect(sameSpeedMap(a, { 'a@x': speed(1, 2), 'b@x': speed(3, 5) })).toBe(false);
+    expect(sameSpeedMap(a, { 'a@x': speed(1, 2), 'c@x': speed(3, 4) })).toBe(false);
+    expect(sameSpeedMap({}, {})).toBe(true);
+  });
+
+  it('compares exactly the fields the summary reads, and ignores lastOnline', () => {
+    const base: Row[] = [row({ email: 'a@x', up: 1, down: 2, total: 10, expiryTime: 99 })];
+
+    // lastOnline moves for every online client on every push and no counter
+    // depends on it, so it must not force a new snapshot.
+    const onlyLastOnlineMoved: Row[] = [
+      row({ email: 'a@x', up: 1, down: 2, total: 10, expiryTime: 99, lastOnline: 12345 }),
+    ];
+    expect(sameSummaryInputs(base, onlyLastOnlineMoved)).toBe(true);
+
+    for (const changed of [
+      row({ email: 'b@x', up: 1, down: 2, total: 10, expiryTime: 99 }),
+      row({ email: 'a@x', up: 2, down: 2, total: 10, expiryTime: 99 }),
+      row({ email: 'a@x', up: 1, down: 3, total: 10, expiryTime: 99 }),
+      row({ email: 'a@x', up: 1, down: 2, total: 11, expiryTime: 99 }),
+      row({ email: 'a@x', up: 1, down: 2, total: 10, expiryTime: 100 }),
+      row({ email: 'a@x', up: 1, down: 2, total: 10, expiryTime: 99, enable: false }),
+    ]) {
+      expect(sameSummaryInputs(base, [changed])).toBe(false);
+    }
+    expect(sameSummaryInputs(base, [])).toBe(false);
+  });
+});