Implement Blazor Server dashboard

2026-04-26 18:37:16 -04:00
parent ed1018c3bb
commit 56886c3b4e
25 changed files with 881 additions and 76 deletions
@@ -0,0 +1,34 @@
+@inject IOptions<GatewayOptions> GatewayOptions
+
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <base href="@DashboardBaseHref" />
+    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="/css/dashboard.css" />
+    <HeadOutlet @rendermode="InteractiveServer" />
+</head>
+<body class="dashboard-body">
+    <Routes @rendermode="InteractiveServer" />
+    <script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="_framework/blazor.web.js"></script>
+</body>
+</html>
+
+@code {
+    private string DashboardBaseHref
+    {
+        get
+        {
+            string pathBase = GatewayOptions.Value.Dashboard.PathBase.TrimEnd('/');
+            if (string.IsNullOrWhiteSpace(pathBase))
+            {
+                pathBase = "/dashboard";
+            }
+
+            return $"{pathBase}/";
+        }
+    }
+}
@@ -0,0 +1,30 @@
+namespace MxGateway.Server.Dashboard.Components;
+
+public static class DashboardDisplay
+{
+    public static string DateTime(DateTimeOffset? value)
+    {
+        return value.HasValue
+            ? value.Value.UtcDateTime.ToString("yyyy-MM-dd HH:mm:ss 'UTC'", System.Globalization.CultureInfo.InvariantCulture)
+            : "-";
+    }
+
+    public static string Duration(TimeSpan value)
+    {
+        return value.TotalDays >= 1
+            ? value.ToString(@"d\.hh\:mm\:ss", System.Globalization.CultureInfo.InvariantCulture)
+            : value.ToString(@"hh\:mm\:ss", System.Globalization.CultureInfo.InvariantCulture);
+    }
+
+    public static string Text(string? value)
+    {
+        return string.IsNullOrWhiteSpace(value) ? "-" : value;
+    }
+
+    public static long MetricValue(DashboardSnapshot snapshot, string name, string? dimension = null)
+    {
+        return snapshot.Metrics.FirstOrDefault(metric =>
+            string.Equals(metric.Name, name, StringComparison.Ordinal)
+            && string.Equals(metric.Dimension, dimension, StringComparison.Ordinal))?.Value ?? 0;
+    }
+}
@@ -0,0 +1,48 @@
+using Microsoft.AspNetCore.Components;
+
+namespace MxGateway.Server.Dashboard.Components;
+
+public abstract class DashboardPageBase : ComponentBase, IAsyncDisposable
+{
+    private readonly CancellationTokenSource _disposeCancellation = new();
+    private Task? _watchTask;
+
+    [Inject]
+    protected IDashboardSnapshotService SnapshotService { get; set; } = null!;
+
+    protected DashboardSnapshot? Snapshot { get; private set; }
+
+    protected override void OnInitialized()
+    {
+        _watchTask = WatchSnapshotsAsync();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await _disposeCancellation.CancelAsync().ConfigureAwait(false);
+        if (_watchTask is not null)
+        {
+            await _watchTask.ConfigureAwait(false);
+        }
+
+        _disposeCancellation.Dispose();
+        GC.SuppressFinalize(this);
+    }
+
+    private async Task WatchSnapshotsAsync()
+    {
+        try
+        {
+            await foreach (DashboardSnapshot snapshot in SnapshotService
+                .WatchSnapshotsAsync(_disposeCancellation.Token)
+                .ConfigureAwait(false))
+            {
+                Snapshot = snapshot;
+                await InvokeAsync(StateHasChanged).ConfigureAwait(false);
+            }
+        }
+        catch (OperationCanceledException) when (_disposeCancellation.IsCancellationRequested)
+        {
+        }
+    }
+}
@@ -0,0 +1,53 @@
+@inherits LayoutComponentBase
+@inject IOptions<GatewayOptions> GatewayOptions
+
+<div class="dashboard-shell">
+    <nav class="navbar navbar-expand-lg bg-body border-bottom dashboard-navbar">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="">MXAccess Gateway</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardNav"
+                    aria-controls="dashboardNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="dashboardNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Overview</NavLink>
+                    </li>
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="sessions">Sessions</NavLink>
+                    </li>
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="workers">Workers</NavLink>
+                    </li>
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="events">Events</NavLink>
+                    </li>
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="settings">Settings</NavLink>
+                    </li>
+                </ul>
+                <form method="post" action="@DashboardPath("/logout")" class="d-flex">
+                    <AntiforgeryToken />
+                    <button class="btn btn-outline-secondary btn-sm" type="submit">Sign out</button>
+                </form>
+            </div>
+        </div>
+    </nav>
+    <main class="container-fluid dashboard-content">
+        @Body
+    </main>
+</div>
+
+@code {
+    private string DashboardPath(string relativePath)
+    {
+        string pathBase = GatewayOptions.Value.Dashboard.PathBase.TrimEnd('/');
+        if (string.IsNullOrWhiteSpace(pathBase))
+        {
+            pathBase = "/dashboard";
+        }
+
+        return $"{pathBase}{relativePath}";
+    }
+}
@@ -0,0 +1,37 @@
+@page "/"
+@inherits DashboardPageBase
+
+<PageTitle>MXAccess Gateway Dashboard</PageTitle>
+
+@if (Snapshot is null)
+{
+    <div class="empty-state">Loading dashboard snapshot.</div>
+}
+else
+{
+    <div class="dashboard-page-header">
+        <div>
+            <h1>Overview</h1>
+            <div class="text-secondary">Generated @DashboardDisplay.DateTime(Snapshot.GeneratedAt)</div>
+        </div>
+        <StatusBadge Text="@Snapshot.GatewayStatus" />
+    </div>
+
+    <section class="metric-grid">
+        <MetricCard Label="Uptime" Value="@DashboardDisplay.Duration(Snapshot.GatewayUptime)" Detail="@Snapshot.GatewayVersion" />
+        <MetricCard Label="Open Sessions" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.sessions.open").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Workers Running" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.workers.running").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Event Queue Depth" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.events.queue.depth").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Commands Failed" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.commands.failed").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Events Received" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.events.received").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Faults" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.faults").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Queue Overflows" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.queues.overflows").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+    </section>
+
+    <section class="dashboard-section">
+        <div class="section-heading">
+            <h2>Recent Faults</h2>
+        </div>
+        <FaultList Faults="@Snapshot.Faults" />
+    </section>
+}
@@ -0,0 +1,64 @@
+@page "/events"
+@inherits DashboardPageBase
+
+<PageTitle>Dashboard Events</PageTitle>
+
+@if (Snapshot is null)
+{
+    <div class="empty-state">Loading event diagnostics.</div>
+}
+else
+{
+    <div class="dashboard-page-header">
+        <div>
+            <h1>Events</h1>
+            <div class="text-secondary">Generated @DashboardDisplay.DateTime(Snapshot.GeneratedAt)</div>
+        </div>
+    </div>
+
+    <section class="metric-grid compact">
+        <MetricCard Label="Events Received" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.events.received").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Event Queue Depth" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.events.queue.depth").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Queue Overflows" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.queues.overflows").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+        <MetricCard Label="Stream Disconnects" Value="@DashboardDisplay.MetricValue(Snapshot, "mxgateway.grpc.streams.disconnected").ToString(System.Globalization.CultureInfo.InvariantCulture)" />
+    </section>
+
+    <section class="dashboard-section">
+        <div class="section-heading">
+            <h2>Event Families</h2>
+        </div>
+        @if (EventFamilyMetrics.Count == 0)
+        {
+            <div class="empty-state">No event family counters recorded.</div>
+        }
+        else
+        {
+            <div class="table-responsive">
+                <table class="table table-sm dashboard-table">
+                    <thead>
+                        <tr>
+                            <th scope="col">Family</th>
+                            <th scope="col">Count</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach (DashboardMetricSummary metric in EventFamilyMetrics)
+                        {
+                            <tr>
+                                <td>@metric.Dimension</td>
+                                <td>@metric.Value</td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
+        }
+    </section>
+}
+
+@code {
+    private IReadOnlyList<DashboardMetricSummary> EventFamilyMetrics => Snapshot?.Metrics
+        .Where(metric => metric.Name == "mxgateway.events.received" && metric.Dimension is not null)
+        .OrderBy(metric => metric.Dimension, StringComparer.OrdinalIgnoreCase)
+        .ToArray() ?? [];
+}
@@ -0,0 +1,69 @@
+@page "/sessions/{SessionId}"
+@inherits DashboardPageBase
+
+<PageTitle>Dashboard Session</PageTitle>
+
+@if (Snapshot is null)
+{
+    <div class="empty-state">Loading session.</div>
+}
+else if (CurrentSession is null)
+{
+    <section class="dashboard-section">
+        <h1 class="h4 mb-3">Session Not Found</h1>
+        <p class="mb-0">The session is not present in the current snapshot.</p>
+    </section>
+}
+else
+{
+    <div class="dashboard-page-header">
+        <div>
+            <h1>Session Details</h1>
+            <div class="text-secondary"><code>@CurrentSession.SessionId</code></div>
+        </div>
+        <StatusBadge Text="@CurrentSession.State.ToString()" />
+    </div>
+
+    <section class="dashboard-section">
+        <div class="section-heading">
+            <h2>Session</h2>
+        </div>
+        <div class="table-responsive">
+            <table class="table table-sm dashboard-table details-table">
+                <tbody>
+                    <tr><th scope="row">Backend</th><td>@CurrentSession.BackendName</td></tr>
+                    <tr><th scope="row">Client identity</th><td>@DashboardDisplay.Text(CurrentSession.ClientIdentity)</td></tr>
+                    <tr><th scope="row">Client session</th><td>@DashboardDisplay.Text(CurrentSession.ClientSessionName)</td></tr>
+                    <tr><th scope="row">Client correlation</th><td>@DashboardDisplay.Text(CurrentSession.ClientCorrelationId)</td></tr>
+                    <tr><th scope="row">Opened</th><td>@DashboardDisplay.DateTime(CurrentSession.OpenedAt)</td></tr>
+                    <tr><th scope="row">Last activity</th><td>@DashboardDisplay.DateTime(CurrentSession.LastClientActivityAt)</td></tr>
+                    <tr><th scope="row">Lease expires</th><td>@DashboardDisplay.DateTime(CurrentSession.LeaseExpiresAt)</td></tr>
+                    <tr><th scope="row">Last fault</th><td>@DashboardDisplay.Text(CurrentSession.LastFault)</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    <section class="dashboard-section">
+        <div class="section-heading">
+            <h2>Worker</h2>
+        </div>
+        <div class="table-responsive">
+            <table class="table table-sm dashboard-table details-table">
+                <tbody>
+                    <tr><th scope="row">Process id</th><td>@(CurrentSession.WorkerProcessId?.ToString(System.Globalization.CultureInfo.InvariantCulture) ?? "-")</td></tr>
+                    <tr><th scope="row">State</th><td><StatusBadge Text="@(CurrentSession.WorkerState?.ToString() ?? "-")" /></td></tr>
+                    <tr><th scope="row">Last heartbeat</th><td>@DashboardDisplay.DateTime(CurrentSession.LastWorkerHeartbeatAt)</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+}
+
+@code {
+    [Parameter]
+    public string SessionId { get; set; } = string.Empty;
+
+    private DashboardSessionSummary? CurrentSession => Snapshot?.Sessions.FirstOrDefault(session =>
+        string.Equals(session.SessionId, SessionId, StringComparison.Ordinal));
+}
@@ -0,0 +1,67 @@
+@page "/sessions"
+@inherits DashboardPageBase
+
+<PageTitle>Dashboard Sessions</PageTitle>
+
+@if (Snapshot is null)
+{
+    <div class="empty-state">Loading sessions.</div>
+}
+else
+{
+    <div class="dashboard-page-header">
+        <div>
+            <h1>Sessions</h1>
+            <div class="text-secondary">@Snapshot.Sessions.Count session rows</div>
+        </div>
+    </div>
+
+    <section class="dashboard-section">
+        @if (Snapshot.Sessions.Count == 0)
+        {
+            <div class="empty-state">No sessions are active or retained.</div>
+        }
+        else
+        {
+            <div class="table-responsive">
+                <table class="table table-sm align-middle dashboard-table">
+                    <thead>
+                        <tr>
+                            <th scope="col">Session</th>
+                            <th scope="col">State</th>
+                            <th scope="col">Client</th>
+                            <th scope="col">Backend</th>
+                            <th scope="col">Worker</th>
+                            <th scope="col">Opened</th>
+                            <th scope="col">Activity</th>
+                            <th scope="col">Heartbeat</th>
+                            <th scope="col">Fault</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach (DashboardSessionSummary session in Snapshot.Sessions)
+                        {
+                            <tr>
+                                <td><NavLink href="@($"sessions/{Uri.EscapeDataString(session.SessionId)}")"><code>@session.SessionId</code></NavLink></td>
+                                <td><StatusBadge Text="@session.State.ToString()" /></td>
+                                <td>@DashboardDisplay.Text(session.ClientIdentity)</td>
+                                <td>@session.BackendName</td>
+                                <td>
+                                    @(session.WorkerProcessId?.ToString(System.Globalization.CultureInfo.InvariantCulture) ?? "-")
+                                    @if (session.WorkerState is not null)
+                                    {
+                                        <span class="ms-1"><StatusBadge Text="@session.WorkerState.ToString()" /></span>
+                                    }
+                                </td>
+                                <td>@DashboardDisplay.DateTime(session.OpenedAt)</td>
+                                <td>@DashboardDisplay.DateTime(session.LastClientActivityAt)</td>
+                                <td>@DashboardDisplay.DateTime(session.LastWorkerHeartbeatAt)</td>
+                                <td>@DashboardDisplay.Text(session.LastFault)</td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
+        }
+    </section>
+}
@@ -0,0 +1,47 @@
+@page "/settings"
+@inherits DashboardPageBase
+
+<PageTitle>Dashboard Settings</PageTitle>
+
+@if (Snapshot is null)
+{
+    <div class="empty-state">Loading settings.</div>
+}
+else
+{
+    <div class="dashboard-page-header">
+        <div>
+            <h1>Settings</h1>
+            <div class="text-secondary">Effective gateway configuration</div>
+        </div>
+    </div>
+
+    <section class="dashboard-section">
+        <div class="table-responsive">
+            <table class="table table-sm dashboard-table details-table">
+                <tbody>
+                    <tr><th scope="row">Authentication mode</th><td>@Snapshot.Configuration.Authentication.Mode</td></tr>
+                    <tr><th scope="row">Auth database</th><td><code>@Snapshot.Configuration.Authentication.SqlitePath</code></td></tr>
+                    <tr><th scope="row">Pepper secret</th><td>@Snapshot.Configuration.Authentication.PepperSecretName</td></tr>
+                    <tr><th scope="row">Run migrations</th><td>@Snapshot.Configuration.Authentication.RunMigrationsOnStartup</td></tr>
+                    <tr><th scope="row">Worker executable</th><td><code>@Snapshot.Configuration.Worker.ExecutablePath</code></td></tr>
+                    <tr><th scope="row">Worker architecture</th><td>@Snapshot.Configuration.Worker.RequiredArchitecture</td></tr>
+                    <tr><th scope="row">Startup timeout</th><td>@Snapshot.Configuration.Worker.StartupTimeoutSeconds seconds</td></tr>
+                    <tr><th scope="row">Shutdown timeout</th><td>@Snapshot.Configuration.Worker.ShutdownTimeoutSeconds seconds</td></tr>
+                    <tr><th scope="row">Heartbeat grace</th><td>@Snapshot.Configuration.Worker.HeartbeatGraceSeconds seconds</td></tr>
+                    <tr><th scope="row">Default command timeout</th><td>@Snapshot.Configuration.Sessions.DefaultCommandTimeoutSeconds seconds</td></tr>
+                    <tr><th scope="row">Max sessions</th><td>@Snapshot.Configuration.Sessions.MaxSessions</td></tr>
+                    <tr><th scope="row">Event queue capacity</th><td>@Snapshot.Configuration.Events.QueueCapacity</td></tr>
+                    <tr><th scope="row">Backpressure policy</th><td>@Snapshot.Configuration.Events.BackpressurePolicy</td></tr>
+                    <tr><th scope="row">Dashboard enabled</th><td>@Snapshot.Configuration.Dashboard.Enabled</td></tr>
+                    <tr><th scope="row">Dashboard path</th><td>@Snapshot.Configuration.Dashboard.PathBase</td></tr>
+                    <tr><th scope="row">Require admin scope</th><td>@Snapshot.Configuration.Dashboard.RequireAdminScope</td></tr>
+                    <tr><th scope="row">Anonymous localhost</th><td>@Snapshot.Configuration.Dashboard.AllowAnonymousLocalhost</td></tr>
+                    <tr><th scope="row">Snapshot interval</th><td>@Snapshot.Configuration.Dashboard.SnapshotIntervalMilliseconds ms</td></tr>
+                    <tr><th scope="row">Show tag values</th><td>@Snapshot.Configuration.Dashboard.ShowTagValues</td></tr>
+                    <tr><th scope="row">Worker protocol</th><td>@Snapshot.Configuration.Protocol.WorkerProtocolVersion</td></tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+}
@@ -0,0 +1,53 @@
+@page "/workers"
+@inherits DashboardPageBase
+
+<PageTitle>Dashboard Workers</PageTitle>
+
+@if (Snapshot is null)
+{
+    <div class="empty-state">Loading workers.</div>
+}
+else
+{
+    <div class="dashboard-page-header">
+        <div>
+            <h1>Workers</h1>
+            <div class="text-secondary">@Snapshot.Workers.Count worker rows</div>
+        </div>
+    </div>
+
+    <section class="dashboard-section">
+        @if (Snapshot.Workers.Count == 0)
+        {
+            <div class="empty-state">No worker processes are attached.</div>
+        }
+        else
+        {
+            <div class="table-responsive">
+                <table class="table table-sm align-middle dashboard-table">
+                    <thead>
+                        <tr>
+                            <th scope="col">Process</th>
+                            <th scope="col">State</th>
+                            <th scope="col">Session</th>
+                            <th scope="col">Heartbeat</th>
+                            <th scope="col">Fault</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach (DashboardWorkerSummary worker in Snapshot.Workers)
+                        {
+                            <tr>
+                                <td>@(worker.ProcessId?.ToString(System.Globalization.CultureInfo.InvariantCulture) ?? "-")</td>
+                                <td><StatusBadge Text="@worker.State.ToString()" /></td>
+                                <td><NavLink href="@($"sessions/{Uri.EscapeDataString(worker.SessionId)}")"><code>@worker.SessionId</code></NavLink></td>
+                                <td>@DashboardDisplay.DateTime(worker.LastHeartbeatAt)</td>
+                                <td>@DashboardDisplay.Text(worker.LastFault)</td>
+                            </tr>
+                        }
+                    </tbody>
+                </table>
+            </div>
+        }
+    </section>
+}
@@ -0,0 +1,15 @@
+<Router AppAssembly="@typeof(Routes).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(DashboardLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(DashboardLayout)">
+            <PageTitle>Dashboard - Not Found</PageTitle>
+            <section class="dashboard-section">
+                <h1 class="h4 mb-3">Not Found</h1>
+                <p class="mb-0">The requested dashboard page does not exist.</p>
+            </section>
+        </LayoutView>
+    </NotFound>
+</Router>
@@ -0,0 +1,39 @@
+@if (Faults.Count == 0)
+{
+    <div class="empty-state">No faults recorded.</div>
+}
+else
+{
+    <div class="table-responsive">
+        <table class="table table-sm align-middle dashboard-table">
+            <thead>
+                <tr>
+                    <th scope="col">Observed</th>
+                    <th scope="col">Source</th>
+                    <th scope="col">Session</th>
+                    <th scope="col">Worker</th>
+                    <th scope="col">State</th>
+                    <th scope="col">Message</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (DashboardFaultSummary fault in Faults)
+                {
+                    <tr>
+                        <td>@DashboardDisplay.DateTime(fault.ObservedAt)</td>
+                        <td>@fault.Source</td>
+                        <td><code>@DashboardDisplay.Text(fault.SessionId)</code></td>
+                        <td>@(fault.WorkerProcessId?.ToString(System.Globalization.CultureInfo.InvariantCulture) ?? "-")</td>
+                        <td><StatusBadge Text="@fault.State" /></td>
+                        <td>@fault.Message</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+}
+
+@code {
+    [Parameter]
+    public IReadOnlyList<DashboardFaultSummary> Faults { get; set; } = [];
+}
@@ -0,0 +1,21 @@
+<div class="card metric-card h-100">
+    <div class="card-body">
+        <div class="metric-label">@Label</div>
+        <div class="metric-value">@Value</div>
+        @if (!string.IsNullOrWhiteSpace(Detail))
+        {
+            <div class="metric-detail">@Detail</div>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public string Label { get; set; } = string.Empty;
+
+    [Parameter]
+    public string Value { get; set; } = string.Empty;
+
+    [Parameter]
+    public string? Detail { get; set; }
+}
@@ -0,0 +1,15 @@
+<span class="badge @CssClass">@Text</span>
+
+@code {
+    [Parameter]
+    public string? Text { get; set; }
+
+    private string CssClass => Text switch
+    {
+        "Ready" or "Healthy" => "text-bg-success",
+        "Creating" or "StartingWorker" or "WaitingForPipe" or "InitializingWorker" or "Closing" => "text-bg-info",
+        "Closed" => "text-bg-secondary",
+        "Faulted" => "text-bg-danger",
+        _ => "text-bg-light text-dark border"
+    };
+}
@@ -0,0 +1,12 @@
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.Extensions.Options
+@using MxGateway.Contracts.Proto
+@using MxGateway.Server.Configuration
+@using MxGateway.Server.Dashboard
+@using MxGateway.Server.Dashboard.Components.Layout
+@using MxGateway.Server.Dashboard.Components.Shared
+@using MxGateway.Server.Workers
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
@@ -3,6 +3,7 @@ using Microsoft.AspNetCore.Antiforgery;
 using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Http.HttpResults;
 using MxGateway.Server.Configuration;
+using MxGateway.Server.Dashboard.Components;

 namespace MxGateway.Server.Dashboard;

@@ -22,13 +23,6 @@ public static class DashboardEndpointRouteBuilderExtensions
        string pathBase = NormalizePathBase(dashboardSection["PathBase"] ?? new DashboardOptions().PathBase);
        RouteGroupBuilder dashboard = endpoints.MapGroup(pathBase);

-        dashboard.MapGet(
-                "/",
-                (HttpContext httpContext, IAntiforgery antiforgery, IDashboardSnapshotService snapshotService) =>
-                    GetDashboardHomeAsync(httpContext, antiforgery, snapshotService, pathBase))
-            .RequireAuthorization(DashboardAuthenticationDefaults.AuthorizationPolicy)
-            .WithName("DashboardHome");
-
        dashboard.MapGet(
                "/login",
                (HttpContext httpContext, IAntiforgery antiforgery) => GetLoginAsync(httpContext, antiforgery, pathBase))
@@ -54,36 +48,13 @@ public static class DashboardEndpointRouteBuilderExtensions
            .AllowAnonymous()
            .WithName("DashboardAccessDenied");

+        dashboard.MapRazorComponents<App>()
+            .AddInteractiveServerRenderMode()
+            .RequireAuthorization(DashboardAuthenticationDefaults.AuthorizationPolicy);
+
        return endpoints;
    }

-    private static ContentHttpResult GetDashboardHomeAsync(
-        HttpContext httpContext,
-        IAntiforgery antiforgery,
-        IDashboardSnapshotService snapshotService,
-        string pathBase)
-    {
-        AntiforgeryTokenSet tokens = antiforgery.GetAndStoreTokens(httpContext);
-        DashboardSnapshot snapshot = snapshotService.GetSnapshot();
-        string requestToken = tokens.RequestToken ?? string.Empty;
-        string body = $"""
-            <form method="post" action="{HtmlEncoder.Default.Encode(pathBase + "/logout")}" class="mb-3">
-                <input name="{tokens.FormFieldName}" type="hidden" value="{HtmlEncoder.Default.Encode(requestToken)}" />
-                <button type="submit">Sign out</button>
-            </form>
-            <dl>
-                <dt>Open sessions</dt>
-                <dd>{snapshot.Sessions.Count}</dd>
-                <dt>Workers</dt>
-                <dd>{snapshot.Workers.Count}</dd>
-                <dt>Faults</dt>
-                <dd>{snapshot.Faults.Count}</dd>
-            </dl>
-            """;
-
-        return TypedResults.Content(RenderPage("MXAccess Gateway Dashboard", body), "text/html");
-    }
-
    private static Task<ContentHttpResult> GetLoginAsync(
        HttpContext httpContext,
        IAntiforgery antiforgery,
@@ -159,14 +130,20 @@ public static class DashboardEndpointRouteBuilderExtensions
            : $"<p role=\"alert\">{HtmlEncoder.Default.Encode(failureMessage)}</p>";

        string body = $"""
-            {alert}
-            <form method="post" action="{HtmlEncoder.Default.Encode(pathBase + "/login")}">
-                <input name="{tokens.FormFieldName}" type="hidden" value="{HtmlEncoder.Default.Encode(requestToken)}" />
-                <input name="returnUrl" type="hidden" value="{HtmlEncoder.Default.Encode(returnUrl)}" />
-                <label for="apiKey">API key</label>
-                <input id="apiKey" name="apiKey" type="password" autocomplete="off" />
-                <button type="submit">Sign in</button>
-            </form>
+            <section class="dashboard-login">
+                {alert}
+                <form method="post" action="{HtmlEncoder.Default.Encode(pathBase + "/login")}" class="card login-card">
+                    <div class="card-body">
+                        <input name="{tokens.FormFieldName}" type="hidden" value="{HtmlEncoder.Default.Encode(requestToken)}" />
+                        <input name="returnUrl" type="hidden" value="{HtmlEncoder.Default.Encode(returnUrl)}" />
+                        <div class="mb-3">
+                            <label for="apiKey" class="form-label">API key</label>
+                            <input id="apiKey" name="apiKey" type="password" autocomplete="off" class="form-control" />
+                        </div>
+                        <button type="submit" class="btn btn-primary">Sign in</button>
+                    </div>
+                </form>
+            </section>
            """;

        return RenderPage("Dashboard Sign In", body);
@@ -181,12 +158,15 @@ public static class DashboardEndpointRouteBuilderExtensions
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <title>{HtmlEncoder.Default.Encode(title)}</title>
+                <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
+                <link rel="stylesheet" href="/css/dashboard.css" />
            </head>
-            <body>
-                <main>
-                    <h1>{HtmlEncoder.Default.Encode(title)}</h1>
+            <body class="dashboard-body">
+                <main class="container py-5">
+                    <h1 class="h3 mb-4">{HtmlEncoder.Default.Encode(title)}</h1>
                    {body}
                </main>
+                <script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
            </body>
            </html>
            """;
@@ -13,6 +13,9 @@ public static class DashboardServiceCollectionExtensions
        services.AddSingleton<IDashboardAuthenticator, DashboardAuthenticator>();
        services.AddHttpContextAccessor();
        services.AddAntiforgery();
+        services.AddCascadingAuthenticationState();
+        services.AddRazorComponents()
+            .AddInteractiveServerComponents();
        services
            .AddAuthentication(DashboardAuthenticationDefaults.AuthenticationScheme)
            .AddCookie(DashboardAuthenticationDefaults.AuthenticationScheme);
@@ -19,8 +19,10 @@ public static class GatewayApplication
        WebApplication app = builder.Build();

        app.UseGatewayRequestLoggingScope();
+        app.UseStaticFiles();
        app.UseAuthentication();
        app.UseAuthorization();
+        app.UseAntiforgery();
        app.MapGatewayEndpoints();

        return app;
@@ -0,0 +1,14 @@
+{
+  "version": "1.0",
+  "defaultProvider": "cdnjs",
+  "libraries": [
+    {
+      "library": "bootstrap@5.3.3",
+      "destination": "wwwroot/lib/bootstrap/",
+      "files": [
+        "css/bootstrap.min.css",
+        "js/bootstrap.bundle.min.js"
+      ]
+    }
+  ]
+}
@@ -0,0 +1,138 @@
+:root {
+    --mxgw-surface: #f7f8fa;
+    --mxgw-border: #d8dee6;
+    --mxgw-ink-muted: #667085;
+    --mxgw-accent: #146c64;
+}
+
+.dashboard-body {
+    background: var(--mxgw-surface);
+    color: #1f2933;
+}
+
+.dashboard-navbar {
+    min-height: 3.5rem;
+}
+
+.dashboard-content {
+    padding: 1.25rem;
+}
+
+.dashboard-page-header {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.dashboard-page-header h1,
+.section-heading h2 {
+    font-size: 1.35rem;
+    font-weight: 650;
+    letter-spacing: 0;
+    margin: 0;
+}
+
+.section-heading {
+    margin-bottom: .75rem;
+}
+
+.dashboard-section {
+    background: #fff;
+    border-top: 1px solid var(--mxgw-border);
+    margin-top: 1rem;
+    padding: 1rem 0 0;
+}
+
+.metric-grid {
+    display: grid;
+    gap: .75rem;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+.metric-grid.compact {
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+}
+
+.metric-card {
+    border-color: var(--mxgw-border);
+    border-radius: .375rem;
+    box-shadow: none;
+}
+
+.metric-label {
+    color: var(--mxgw-ink-muted);
+    font-size: .78rem;
+    font-weight: 650;
+    letter-spacing: 0;
+    text-transform: uppercase;
+}
+
+.metric-value {
+    color: var(--mxgw-accent);
+    font-size: 1.7rem;
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+}
+
+.metric-detail {
+    color: var(--mxgw-ink-muted);
+    font-size: .85rem;
+    overflow-wrap: anywhere;
+}
+
+.dashboard-table {
+    --bs-table-bg: #fff;
+    border-color: var(--mxgw-border);
+    margin-bottom: 0;
+}
+
+.dashboard-table th {
+    color: #344054;
+    font-weight: 650;
+    white-space: nowrap;
+}
+
+.dashboard-table td {
+    max-width: 24rem;
+    overflow-wrap: anywhere;
+}
+
+.details-table th {
+    width: 14rem;
+}
+
+.empty-state {
+    background: #fff;
+    border: 1px dashed var(--mxgw-border);
+    border-radius: .375rem;
+    color: var(--mxgw-ink-muted);
+    padding: 1rem;
+}
+
+.dashboard-login {
+    max-width: 28rem;
+}
+
+.login-card {
+    border-color: var(--mxgw-border);
+    border-radius: .375rem;
+}
+
+@media (max-width: 700px) {
+    .dashboard-content {
+        padding: .75rem;
+    }
+
+    .dashboard-page-header {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .details-table th {
+        width: 9rem;
+    }
+}
@@ -33,6 +33,37 @@ public sealed class GatewayApplicationTests
        Assert.NotNull(metrics);
    }

+    [Fact]
+    public void Build_WhenDashboardEnabled_MapsBlazorDashboardAndAuthEndpoints()
+    {
+        WebApplication app = GatewayApplication.Build([]);
+        IReadOnlyList<RouteEndpoint> endpoints = GetRouteEndpoints(app);
+
+        Assert.Contains(endpoints, endpoint => endpoint.RoutePattern.RawText == "/dashboard/");
+        Assert.Contains(endpoints, endpoint => endpoint.RoutePattern.RawText == "/dashboard/sessions");
+        Assert.Contains(endpoints, endpoint => endpoint.RoutePattern.RawText == "/dashboard/workers");
+        Assert.Contains(endpoints, endpoint => endpoint.RoutePattern.RawText == "/dashboard/events");
+        Assert.Contains(endpoints, endpoint => endpoint.RoutePattern.RawText == "/dashboard/settings");
+        Assert.Contains(endpoints, endpoint =>
+            endpoint.Metadata.GetMetadata<IEndpointNameMetadata>()?.EndpointName == "DashboardLogin");
+        Assert.Contains(endpoints, endpoint =>
+            endpoint.Metadata.GetMetadata<IEndpointNameMetadata>()?.EndpointName == "DashboardLogout");
+    }
+
+    [Fact]
+    public void Build_WhenDashboardDisabled_DoesNotMapDashboardRoutes()
+    {
+        WebApplication app = GatewayApplication.Build(["--MxGateway:Dashboard:Enabled=false"]);
+        IReadOnlyList<RouteEndpoint> endpoints = GetRouteEndpoints(app);
+
+        Assert.DoesNotContain(endpoints, endpoint =>
+            endpoint.RoutePattern.RawText?.StartsWith("/dashboard", StringComparison.Ordinal) == true);
+        Assert.DoesNotContain(endpoints, endpoint =>
+            endpoint.Metadata.GetMetadata<IEndpointNameMetadata>()?.EndpointName?.StartsWith(
+                "Dashboard",
+                StringComparison.Ordinal) == true);
+    }
+
    [Theory]
    [InlineData(
        "MxGateway:Worker:ExecutablePath",
@@ -65,4 +96,12 @@ public sealed class GatewayApplicationTests
            exception.Failures,
            failure => failure.Contains(expectedFailure, StringComparison.Ordinal));
    }
+
+    private static IReadOnlyList<RouteEndpoint> GetRouteEndpoints(WebApplication app)
+    {
+        return ((IEndpointRouteBuilder)app).DataSources
+            .SelectMany(dataSource => dataSource.Endpoints)
+            .OfType<RouteEndpoint>()
+            .ToArray();
+    }
 }