New UI integration with API v3alpha

[siavashs]

Parent: #4944
Related API roadmap: #5450

Summary

Deliver a production-quality React and Mantine UI backed exclusively by Alertmanager's generated v3alpha ConnectRPC services.

The new UI will be built into every Alertmanager binary and served at <route-prefix>/ui/, while the existing Elm UI remains available at the route-prefix root. Development is incremental: screens become available as their v3alpha services land, without temporary API v2 fallbacks.

Motivation

The current Elm UI is increasingly difficult to evolve, and the existing Mantine scaffold has no production asset integration or feature parity. At the same time, #5450 is introducing independently versioned protobuf services with generated clients, structured errors, pagination, and watch streams.

The bundled UI should be the first complete browser consumer of those contracts. This avoids another handwritten API model, exercises Connect and gRPC-Web in a real application, and aligns Alertmanager's frontend stack with the Prometheus 3.x UI.

Established architecture

• Permanent mount: <route-prefix>/ui/.
• Clean client routes such as /ui/alerts, /ui/silences/:id, and /ui/silences/:id/edit.
• The legacy Elm UI remains at <route-prefix>/; this work does not remove it or change the default root UI.
• Both UI distributions are embedded in release binaries and included in prebuilt asset workflows.
• The Mantine UI uses only v3alpha ConnectRPC services. It does not fall back to /api/v2.
• TypeScript messages, service descriptors, and query bindings are generated from proto/api/**; generated wire contracts are not hand-written.
• Connect-Query and TanStack Query handle unary calls, mutations, caching, and pagination.
• Generated Connect clients are consumed directly for server-streaming watch RPCs.
• Browser clients use Connect under <route-prefix>/api/, not native gRPC at the server root.
• Notification observability is an optional follow-up blocked on the design decision in API v3alpha: NotificationService #5484 and is not a legacy-parity completion gate.

Goals

• Build, test, package, embed, and release the Mantine app alongside Elm.
• Serve clean nested routes and assets correctly at root and non-root --web.route-prefix deployments.
• Provide a responsive, accessible application shell, theme selection, settings, and robust loading/error/empty states.
• Implement v3alpha-backed Status and Configuration pages.
• Implement Alerts, alert groups, receiver filtering, pagination, URL-backed filters, and links into Silence workflows.
• Implement Silence list/detail/create/update/expire/delete, matcher sets, annotations, previews, and feature-gated multi-set behavior.
• Consume Alert and Silence watch streams with explicit reconnect/resnapshot behavior.
• Prove parity, accessibility, performance, route-prefix behavior, and release packaging in browser and server tests.

Non-goals

• Removing the Elm UI or moving the Mantine UI to / in this issue.
• Adding API v2 adapters or maintaining dual wire models in the Mantine application.
• Enabling or disabling the complete Connect API with a UI-specific feature flag.
• Using browser client streaming for alert ingestion; browsers use unary operations and server streaming where applicable.
• Requiring NotificationService or a notification page before this issue can complete.
• Reintroducing API v1.

API dependencies

UI capability	API dependency
Status and loaded configuration	StatusService #5477 (complete)
Typed errors, matcher sets, pagination, feature details, reload snapshots	Shared infrastructure #5479
Alerts and natural/custom groups	AlertService #5481
Receiver discovery and label filtering	ReceiverService #5483
Silence CRUD/list and multi-set feature behavior	SilenceService #5482
Live alert/group/silence updates	Foundation hardening #5478, mutation broker #5480, watch methods in #5481/#5482
Optional notification observability	Notification design/service #5484
Cross-service browser/transport conformance	Final API hardening #5485

Two UI requirements must be resolved before the corresponding public protos freeze:

1. Custom alert grouping: the current UI can regroup by user-selected labels. With paginated v3alpha reads, grouping only one client page is incorrect. ListAlertGroups needs a server-side requested grouping contract, or maintainers must approve and document a parity exception.
2. Silence state counts: the current UI displays active/pending/expired counts. Fetching every page solely to calculate counts is not bounded. ListSilences needs bounded state counts/facets, or maintainers must approve and document a parity exception.

Delivery phases

1. Foundation: production asset serving at /ui/, generated Connect clients, transport/query infrastructure, shell, theme, and settings.
2. First useful embedded UI: Status and Configuration over API v3alpha: StatusService #5477. Until Alerts lands, /ui/ redirects to /ui/status.
3. Core operational UI: Alerts/groups/receivers, followed by the complete Silence lifecycle. Once Alerts lands, /ui/ redirects to /ui/alerts.
4. Live behavior: watch-stream consumption, reconnect, overflow handling, and fresh snapshots.
5. Release readiness: parity, accessibility, large-data performance, browser E2E, route-prefix, security, and release conformance.
6. Optional expansion: notification observability only after API v3alpha: NotificationService #5484 approves and publishes a semantics-correct contract.

Completion criteria

• Both Elm and Mantine distributions are built, embedded, released, and linked from one Alertmanager binary.
• <route-prefix>/ui/ and every supported direct nested route work with root and non-root route prefixes.
• Dynamic HTML is no-cache; hashed assets retain immutable caching and identity/gzip/Brotli negotiation.
• Production Mantine code contains no API v2 calls or handwritten protobuf wire models.
• Status, Configuration, Alerts, Receivers, Silences, Settings, filtering, deep links, and local preferences satisfy the maintained parity matrix or have explicit maintainer-approved exceptions.
• Multi-set Silence capability failures use structured FailedPrecondition details and are never flattened.
• Watch overflow, disconnect, restart, and HA peer changes trigger an explicit resnapshot rather than silently retaining stale data.
• Mobile/desktop keyboard navigation, semantic structure, focus behavior, zoom, contrast, and automated accessibility checks pass.
• Large alert/group/silence datasets meet agreed rendering and browser-memory thresholds.
• Generated TypeScript output is reproducible and a second generation produces no diff.
• Component, real-server, browser E2E, route-prefix, and release-asset tests pass.
• The legacy Elm UI remains available and unchanged as the default root UI.

Existing work to coordinate

• ui: Alerts page #5031: salvage suitable Alerts presentation/time work, but replace API v2 access and obsolete custom Accordion code with generated v3alpha clients and Mantine 9 primitives.
• ui: Add theme toggle #5106: integrate the theme selector into the shell/theme work and retain the requested interaction/accessibility tests.
• ui: Add tests for silences datasource #5128: preserve the testing intent, but prefer generated Connect test transports and real-server coverage over expanding fetch mocks for an API v2 datasource.
• Related UI backlog includes Darkmode #2556, [UI] Feature: Localtime / Timezone option #3861, [UI]: Show creator and comment for silencer in the Silences list view for better context #4303, FR: sort matchers on silences page #3834, Alert page should automatically refresh #524, and Alert limitation discussion: Maximum number of alerts to display in UI #924.

Child issues

• UI: build and serve the Mantine application at /ui/ #5486 — Build and serve the Mantine application at /ui/.
• UI: generate Connect TypeScript clients and establish the data layer #5487 — Generate Connect TypeScript clients and establish the data layer.
• UI: implement the accessible application shell, theme, and settings #5488 — Implement the accessible application shell, theme, and settings.
• UI: integrate StatusService and configuration pages #5489 — Integrate StatusService and configuration pages.
• UI: implement Alerts and alert groups with v3alpha services #5490 — Implement Alerts and alert groups with v3alpha services.
• UI: implement the full Silence lifecycle with SilenceService #5491 — Implement the full Silence lifecycle with SilenceService.
• UI: consume v3alpha watch streams for live updates #5492 — Consume v3alpha watch streams for live updates.
• UI: add parity, accessibility, performance, and release conformance #5493 — Add parity, accessibility, performance, and release conformance.
• UI: add notification observability when NotificationService is defined #5494 — Add notification observability when NotificationService is defined (optional; non-blocking).