UI: generate Connect TypeScript clients and establish the data layer

[siavashs]

Parent: #5451
Related API roadmap: #5450

Summary

Generate TypeScript clients from Alertmanager's public v3alpha protobuf contracts and establish the route-prefix-aware Connect/TanStack Query data layer for the Mantine UI.

Production Mantine code must not use API v2 fallbacks or handwritten wire models.

Code generation

• Add pinned @bufbuild/protobuf, @connectrpc/connect, @connectrpc/connect-web, and @connectrpc/connect-query runtimes.
• Add pinned local ES and Connect-Query generators.
• Add a frontend Buf template that emits only public proto/api/** bindings into a clearly generated directory under ui/mantine-ui/src/.
• Integrate frontend generation with scripts/genproto.sh and make common-proto.
• Ensure generated output changes only with proto sources, generation configuration, or pinned generator versions.
• Keep internal cluster, nflog, silence-storage, and event-recorder protos out of the frontend bundle.

Client infrastructure

• Create one Connect web transport using runtime-injected routePrefix, uiBasePath, and apiBaseURL values from UI: build and serve the Mantine application at /ui/ #5486.
• Target <route-prefix>/api with same-origin browser credentials.
• Define conventions for unary queries, mutations, cancellation, infinite pagination, stable keys, invalidation, and retry/refetch behavior using Connect-Query and TanStack Query.
• Define direct generated-client infrastructure for server streams; do not model streaming through unary-only Connect-Query hooks.
• Translate ConnectError codes and structured validation, required-feature, and partial-result details into reusable UI error models.
• Make provider composition and test utilities supply Transport, QueryClient, Router, Suspense, and error boundaries without cross-test cache leakage.

The current handwritten /api/v2 fetch layer may coexist only while Status is being migrated in its child issue; no new screen may depend on it, and it must be removed before the Mantine UI is shipped from /ui/.

Testing

• Use createRouterTransport for focused component and hook tests so requests still pass through generated protobuf schemas and Connect errors.
• Retain real-server coverage for route prefixes, HTTP transport, headers, and browser behavior.
• Cover cancellation, structured errors, pagination keys, malformed inputs, and provider isolation.

Acceptance criteria

• TypeScript messages, service descriptors, and query bindings are generated from the same source protos as Go.
• Generation targets only public proto/api/** contracts.
• A second make common-proto run produces no diff.
• Root and prefixed transports target the correct <route-prefix>/api endpoint.
• Generated unary calls, mutations, pagination, cancellation, and structured errors are covered.
• Test renders receive fresh QueryClient and mock Transport instances.
• Production Mantine code contains no /api/v2 call or arbitrary JSON cast to a handwritten wire type.
• Generated files are never edited manually and are committed only with corresponding source/configuration changes.

Dependencies and related work

• Runtime UI/API paths: UI: build and serve the Mantine application at /ui/ #5486.
• Delivered StatusService: API v3alpha: StatusService #5477.
• Coordinate shared messages, pagination, error details, and feature details with API v3alpha: add shared contracts and reusable infrastructure #5479.
• Coordinate request and stream transport policy with API v3alpha: harden the ConnectRPC foundation #5478.
• ui: Add tests for silences datasource #5128 has relevant datasource-testing intent, but its API-v2 fetch mocks should be adapted to generated Connect transports and real-server coverage.

Likely code areas

• buf.gen.yaml or a UI-specific Buf template
• scripts/genproto.sh, Makefile
• ui/mantine-ui/package.json, package-lock.json, tsconfig.json
• generated ui/mantine-ui/src/gen/**
• transport, query, error, and provider modules under ui/mantine-ui/src/
• test utilities and CI generation checks