Merge branch 'fix/audit-grid-resize-flaky-test': stabilise audit-grid resize E2E

test(centralui): fix flaky audit-grid resize-survives-reload test
ResizeHandle_DraggingWidensColumn_AndSurvivesReload called page.ReloadAsync() immediately after the resize drag, racing the asynchronous persist: pointer-up fires a fire-and-forget JS→.NET OnColumnResized invoke that round-trips back through JS interop to write sessionStorage. When the reload won the race the restored grid fell back to the default column width and the test failed (~1 in 3 runs). Wait for auditGrid:columnWidths to land via the existing WaitForStorageKeyAsync helper before reloading — the same guard the sibling ColumnOrderAndWidths_PersistAcrossReload_ViaSessionStorage test already uses. Verified: 6/6 consecutive passes.
2026-05-22 08:00:46 -04:00 · 2026-05-22 08:00:46 -04:00 · 2026-05-22 07:56:22 -04:00 · 2026-05-22 07:36:57 -04:00 · 2026-05-22 07:04:42 -04:00 · 2026-05-22 07:03:46 -04:00
22 changed files with 935 additions and 122 deletions
@@ -17,7 +17,7 @@
        <NavMenu />
    </div>

-    <main class="flex-grow-1 p-3" style="background-color: #f8f9fa;">
+    <main class="flex-grow-1 p-3">
        @Body
    </main>
 </div>
@@ -1,7 +1,13 @@
+@using System.Linq
@using ScadaLink.Security
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.JSInterop
+@implements IDisposable
+@inject NavigationManager Navigation
+@inject IJSRuntime JS

 <nav class="sidebar d-flex flex-column">
-    <div class="brand">ScadaLink</div>
+    <div class="brand"><span class="mark">&#9646;</span> ScadaBridge</div>

    <div style="overflow-y:auto; flex:1 1 auto; min-height:0;">
        <ul class="nav flex-column">
@@ -14,130 +20,152 @@
                    @* Admin section — Admin role only *@
                    <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
                        <Authorized Context="adminContext">
-                            <div role="presentation" class="nav-section-header">Admin</div>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/admin/ldap-mappings">LDAP Mappings</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/admin/sites">Sites</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/admin/api-keys">API Keys</NavLink>
-                            </li>
+                            <NavSection Title="Admin"
+                                        Expanded="@_expanded.Contains("admin")"
+                                        OnToggle="@(() => ToggleAsync("admin"))">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/admin/ldap-mappings">LDAP Mappings</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/admin/sites">Sites</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/admin/api-keys">API Keys</NavLink>
+                                </li>
+                            </NavSection>
                        </Authorized>
                    </AuthorizeView>

                    @* Design section — Design role *@
                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
                        <Authorized Context="designContext">
-                            <div role="presentation" class="nav-section-header">Design</div>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/design/templates">Templates</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/design/shared-scripts">Shared Scripts</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/design/connections">Connections</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/design/external-systems">External Systems</NavLink>
-                            </li>
+                            <NavSection Title="Design"
+                                        Expanded="@_expanded.Contains("design")"
+                                        OnToggle="@(() => ToggleAsync("design"))">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/design/templates">Templates</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/design/shared-scripts">Shared Scripts</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/design/connections">Connections</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/design/external-systems">External Systems</NavLink>
+                                </li>
+                            </NavSection>
                        </Authorized>
                    </AuthorizeView>

                    @* Deployment section — Deployment role *@
                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
                        <Authorized Context="deploymentContext">
-                            <div role="presentation" class="nav-section-header">Deployment</div>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/deployment/topology">Topology</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/deployment/deployments">Deployments</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/deployment/debug-view">Debug View</NavLink>
-                            </li>
+                            <NavSection Title="Deployment"
+                                        Expanded="@_expanded.Contains("deployment")"
+                                        OnToggle="@(() => ToggleAsync("deployment"))">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/deployment/topology">Topology</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/deployment/deployments">Deployments</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/deployment/debug-view">Debug View</NavLink>
+                                </li>
+                            </NavSection>
                        </Authorized>
                    </AuthorizeView>

                    @* Notifications — mixed-role section; each item gated by its own policy.
-                       The header is ungated: every authenticated user holds at least one of
+                       The section is ungated: every authenticated user holds at least one of
                       Admin/Design/Deployment, so it always has a visible child. *@
-                    <div role="presentation" class="nav-section-header">Notifications</div>
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
-                        <Authorized Context="notifAdminContext">
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/notifications/smtp">SMTP Configuration</NavLink>
-                            </li>
-                        </Authorized>
-                    </AuthorizeView>
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
-                        <Authorized Context="notifDesignContext">
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/notifications/lists">Notification Lists</NavLink>
-                            </li>
-                        </Authorized>
-                    </AuthorizeView>
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                        <Authorized Context="notifDeploymentContext">
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/notifications/report">Notification Report</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/notifications/kpis">Notification KPIs</NavLink>
-                            </li>
-                        </Authorized>
-                    </AuthorizeView>
+                    <NavSection Title="Notifications"
+                                Expanded="@_expanded.Contains("notifications")"
+                                OnToggle="@(() => ToggleAsync("notifications"))">
+                        <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
+                            <Authorized Context="notifAdminContext">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/notifications/smtp">SMTP Configuration</NavLink>
+                                </li>
+                            </Authorized>
+                        </AuthorizeView>
+                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
+                            <Authorized Context="notifDesignContext">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/notifications/lists">Notification Lists</NavLink>
+                                </li>
+                            </Authorized>
+                        </AuthorizeView>
+                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+                            <Authorized Context="notifDeploymentContext">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/notifications/report">Notification Report</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/notifications/kpis">Notification KPIs</NavLink>
+                                </li>
+                            </Authorized>
+                        </AuthorizeView>
+                    </NavSection>

                    @* Site Calls — Site Call Audit (#22). Deployment-role only,
-                       matching the Notification Report page's gate; the section
-                       header sits inside the policy block so a non-Deployment
+                       matching the Notification Report page's gate; the whole
+                       section sits inside the policy block so a non-Deployment
                       user does not see the heading. *@
                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
                        <Authorized Context="siteCallsContext">
-                            <div role="presentation" class="nav-section-header">Site Calls</div>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/site-calls/report">Site Calls</NavLink>
-                            </li>
+                            <NavSection Title="Site Calls"
+                                        Expanded="@_expanded.Contains("sitecalls")"
+                                        OnToggle="@(() => ToggleAsync("sitecalls"))">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/site-calls/report">Site Calls</NavLink>
+                                </li>
+                            </NavSection>
                        </Authorized>
                    </AuthorizeView>

                    @* Monitoring — Health Dashboard is all-roles; Event Logs and
-                       Parked Messages are Deployment-role only (Component-CentralUI). *@
-                    <div role="presentation" class="nav-section-header">Monitoring</div>
-                    <li class="nav-item">
-                        <NavLink class="nav-link" href="/monitoring/health">Health Dashboard</NavLink>
-                    </li>
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                        <Authorized Context="monitoringContext">
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/monitoring/event-logs">Event Logs</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/monitoring/parked-messages">Parked Messages</NavLink>
-                            </li>
-                        </Authorized>
-                    </AuthorizeView>
+                       Parked Messages are Deployment-role only (Component-CentralUI).
+                       The section is ungated because Health Dashboard is always
+                       a visible child. *@
+                    <NavSection Title="Monitoring"
+                                Expanded="@_expanded.Contains("monitoring")"
+                                OnToggle="@(() => ToggleAsync("monitoring"))">
+                        <li class="nav-item">
+                            <NavLink class="nav-link" href="/monitoring/health">Health Dashboard</NavLink>
+                        </li>
+                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+                            <Authorized Context="monitoringContext">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/monitoring/event-logs">Event Logs</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/monitoring/parked-messages">Parked Messages</NavLink>
+                                </li>
+                            </Authorized>
+                        </AuthorizeView>
+                    </NavSection>

                    @* Audit — gated on the OperationalAudit policy (#23 M7-T15
-                       / Bundle G). Hosts the new Audit Log page (#23 M7) and
-                       the renamed Configuration Audit Log (IAuditService
-                       config-change viewer). Both items share the same gate,
-                       so the section header sits inside the same policy block:
+                       / Bundle G). Hosts the Audit Log page (#23 M7) and the
+                       Configuration Audit Log (IAuditService config-change
+                       viewer). The whole section sits inside the policy block:
                       a non-audit user does not even see the heading.
                       OperationalAudit is satisfied by the Admin, Audit, and
                       AuditReadOnly roles. *@
                    <AuthorizeView Policy="@AuthorizationPolicies.OperationalAudit">
                        <Authorized Context="auditContext">
-                            <div role="presentation" class="nav-section-header">Audit</div>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/audit/log">Audit Log</NavLink>
-                            </li>
-                            <li class="nav-item">
-                                <NavLink class="nav-link" href="/audit/configuration">Configuration Audit Log</NavLink>
-                            </li>
+                            <NavSection Title="Audit"
+                                        Expanded="@_expanded.Contains("audit")"
+                                        OnToggle="@(() => ToggleAsync("audit"))">
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/audit/log">Audit Log</NavLink>
+                                </li>
+                                <li class="nav-item">
+                                    <NavLink class="nav-link" href="/audit/configuration">Configuration Audit Log</NavLink>
+                                </li>
+                            </NavSection>
                        </Authorized>
                    </AuthorizeView>
                </Authorized>
@@ -147,18 +175,141 @@

    <AuthorizeView>
        <Authorized>
-            <div class="border-top border-secondary px-3 py-2">
+            <div class="border-top px-3 py-2">
                <div class="d-flex justify-content-between align-items-center">
                    @* CentralUI-024: claim type resolved via JwtTokenService. *@
-                    <span class="text-light small">@context.User.GetDisplayName()</span>
+                    <span class="text-body-secondary small">@context.User.GetDisplayName()</span>
                    <form method="post" action="/auth/logout" data-enhance="false">
                        @* CentralUI-017: logout is a state-changing POST and is
                           CSRF-protected — the antiforgery token is required. *@
                        <AntiforgeryToken />
-                        <button type="submit" class="btn btn-outline-light btn-sm py-0 px-2">Sign Out</button>
+                        <button type="submit" class="btn btn-outline-secondary btn-sm py-0 px-2">Sign Out</button>
                    </form>
                </div>
            </div>
        </Authorized>
    </AuthorizeView>
 </nav>
+
+@code {
+    // Expanded-section state persists in the "scadabridge_nav" cookie, written
+    // by navState.set / read by navState.get (wwwroot/js/nav-state.js) — a
+    // comma-separated list of section ids.
+
+    // Every collapsible section id. Also the allow-list for parsing the cookie.
+    private static readonly string[] SectionIds =
+        { "admin", "design", "deployment", "notifications", "sitecalls", "monitoring", "audit" };
+
+    // The currently-expanded sections. Populated from the cookie on first
+    // render; mutated by ToggleAsync and by navigating into a section.
+    private readonly HashSet<string> _expanded = new(StringComparer.Ordinal);
+
+    protected override void OnInitialized()
+    {
+        Navigation.LocationChanged += OnLocationChanged;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        // Hydrate from the cookie. Until this completes the sidebar paints
+        // collapsed (the "collapsed by default" state) — matching how TreeView
+        // hydrates its expand state in OnAfterRenderAsync(firstRender).
+        string saved;
+        try
+        {
+            saved = await JS.InvokeAsync<string>("navState.get") ?? string.Empty;
+        }
+        catch (JSDisconnectedException)
+        {
+            return;
+        }
+
+        foreach (var id in saved.Split(
+            ',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
+        {
+            if (Array.IndexOf(SectionIds, id) >= 0)
+            {
+                _expanded.Add(id);
+            }
+        }
+
+        // The section of the page we loaded on is always expanded.
+        if (EnsureCurrentSectionExpanded())
+        {
+            await PersistAsync();
+        }
+
+        StateHasChanged();
+    }
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        // Navigating into a collapsed section expands it (and remembers it).
+        if (EnsureCurrentSectionExpanded())
+        {
+            _ = PersistAsync();
+            _ = InvokeAsync(StateHasChanged);
+        }
+    }
+
+    private async Task ToggleAsync(string id)
+    {
+        if (!_expanded.Remove(id))
+        {
+            _expanded.Add(id);
+        }
+
+        await PersistAsync();
+    }
+
+    // Adds the current page's section to _expanded; returns true if it changed.
+    private bool EnsureCurrentSectionExpanded()
+    {
+        var section = CurrentSection();
+        return section is not null && _expanded.Add(section);
+    }
+
+    // Maps the current URL's first path segment to a section id, or null for
+    // sectionless pages (Dashboard, Login).
+    private string? CurrentSection()
+    {
+        var relative = Navigation.ToBaseRelativePath(Navigation.Uri);
+        var firstSegment = relative.Split('?', '#')[0]
+            .Split('/', StringSplitOptions.RemoveEmptyEntries)
+            .FirstOrDefault();
+
+        return firstSegment switch
+        {
+            "admin" => "admin",
+            "design" => "design",
+            "deployment" => "deployment",
+            "notifications" => "notifications",
+            "site-calls" => "sitecalls",
+            "monitoring" => "monitoring",
+            "audit" => "audit",
+            _ => null,
+        };
+    }
+
+    private async Task PersistAsync()
+    {
+        try
+        {
+            await JS.InvokeVoidAsync("navState.set", string.Join(',', _expanded));
+        }
+        catch (JSDisconnectedException)
+        {
+            // The circuit is gone — nothing to persist to.
+        }
+    }
+
+    public void Dispose()
+    {
+        Navigation.LocationChanged -= OnLocationChanged;
+    }
+}
@@ -0,0 +1,35 @@
+@* A collapsible sidebar nav section: an uppercase-eyebrow header button that
+   toggles the visibility of its child nav items. The header <li> and the item
+   <li>s (ChildContent) render as siblings inside NavMenu's <ul>. *@
+
+<li class="nav-item">
+    <button type="button"
+            class="nav-section-toggle"
+            @onclick="OnToggle"
+            aria-expanded="@(Expanded ? "true" : "false")">
+        <i class="bi @(Expanded ? "bi-chevron-down" : "bi-chevron-right")" aria-hidden="true"></i>
+        <span>@Title</span>
+    </button>
+</li>
+@if (Expanded)
+{
+    @ChildContent
+}
+
+@code {
+    /// <summary>Section label shown in the header (e.g. "Deployment").</summary>
+    [Parameter, EditorRequired]
+    public string Title { get; set; } = string.Empty;
+
+    /// <summary>Whether the section is expanded — its items rendered.</summary>
+    [Parameter]
+    public bool Expanded { get; set; }
+
+    /// <summary>Raised when the header button is clicked.</summary>
+    [Parameter]
+    public EventCallback OnToggle { get; set; }
+
+    /// <summary>The section's nav items, rendered only while expanded.</summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+}
@@ -7,7 +7,7 @@

 <div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
-        <h4 class="mb-0">Welcome to ScadaLink</h4>
+        <h4 class="mb-0">Welcome to ScadaBridge</h4>
        <AuthorizeView>
            <Authorized>
                <span class="text-muted small">
@@ -17,7 +17,7 @@
            </Authorized>
        </AuthorizeView>
    </div>
-    <p class="text-muted">Central management console for the ScadaLink SCADA system.</p>
+    <p class="text-muted">Central management console for the ScadaBridge SCADA system.</p>

    @* KPI row *@
    <div class="row g-3 mb-4">
@@ -6,7 +6,7 @@
 <div class="d-flex align-items-center justify-content-center min-vh-100">
    <div class="card shadow-sm" style="max-width: 400px; width: 100%;">
        <div class="card-body p-4">
-            <h4 class="card-title mb-4 text-center">ScadaLink</h4>
+            <h4 class="card-title mb-4 text-center">ScadaBridge</h4>

            @if (!string.IsNullOrEmpty(ErrorMessage))
            {
@@ -1,7 +1,7 @@
 <div class="d-flex align-items-center justify-content-center min-vh-100">
    <div class="card shadow-sm" style="max-width: 480px; width: 100%;">
        <div class="card-body p-4">
-            <h4 class="card-title mb-3 text-center">ScadaLink</h4>
+            <h4 class="card-title mb-3 text-center">ScadaBridge</h4>
            <div class="alert alert-warning" role="alert">
                <h5 class="alert-heading">Not Authorized</h5>
                <p class="mb-0">You do not have permission to access this page. Contact your administrator if you believe this is an error.</p>
@@ -5,7 +5,8 @@
    min-width: 220px;
    max-width: 220px;
    height: 100vh;
-    background-color: var(--bs-dark);
+    background: var(--card);
+    border-right: 1px solid var(--rule-strong);
 }

 /* Keep the sidebar pinned to the viewport on lg+ so it stays visible even
@@ -22,40 +23,66 @@
 }

 .sidebar .nav-link {
-    color: var(--bs-gray-500);
+    color: var(--ink-soft);
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
 }

 .sidebar .nav-link:hover {
-    color: var(--bs-white);
-    background-color: var(--bs-gray-700);
+    color: var(--ink);
+    background-color: var(--paper);
 }

 .sidebar .nav-link.active {
-    color: var(--bs-white);
-    background-color: var(--bs-primary);
+    color: var(--accent-deep);
+    background-color: var(--paper);
+    font-weight: 600;
    /* Left accent so active state isn't carried by color alone. */
-    border-left: 3px solid var(--bs-primary);
+    border-left: 3px solid var(--accent);
    padding-left: calc(1rem - 3px);
 }

-.sidebar .nav-section-header {
-    color: var(--bs-gray-600);
-    font-size: 0.75rem;
+/* Collapsible section header — a full-width button styled as an uppercase
+   eyebrow with a leading expand/collapse chevron. */
+.sidebar .nav-section-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    width: 100%;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    text-align: left;
+    color: var(--ink-faint);
+    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.07em;
    padding: 0.75rem 1rem 0.25rem;
    margin-top: 0.5rem;
 }

+.sidebar .nav-section-toggle:hover {
+    color: var(--ink);
+}
+
+.sidebar .nav-section-toggle .bi {
+    font-size: 0.8rem;
+    line-height: 1;
+}
+
 .sidebar .brand {
-    color: var(--bs-white);
+    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 600;
+    letter-spacing: 0.02em;
    padding: 1rem;
-    border-bottom: 1px solid var(--bs-gray-700);
+    border-bottom: 1px solid var(--rule);
+}
+
+/* The single accent glyph in the brand mark. */
+.sidebar .brand .mark {
+    color: var(--accent);
 }

 /* When the sidebar is collapsed under <lg viewports the Bootstrap collapse
@@ -0,0 +1,379 @@
+/* ============================================================================
+   Technical-Light design system — portable theme layer
+   ----------------------------------------------------------------------------
+   A refined technical-light aesthetic: warm-neutral paper, hairline rules,
+   IBM Plex type, monospace tabular numerics, status carried by colour. Built
+   to layer over Bootstrap 5 via --bs-* overrides, but every rule below works
+   standalone — Bootstrap is optional.
+
+   HOW TO ADOPT
+   1. Serve the three IBM Plex woff2 files (shipped in fonts/) and fix the
+      @font-face url() paths below to wherever you serve them.
+   2. Include this file once, globally. Add view-specific rules in a separate
+      stylesheet — never edit the token block per-view.
+   3. Status is colour, not iconography. Use the .s-* / .chip-* / .kv .v.*
+      helpers; do not hand-pick hex values in feature CSS.
+   ========================================================================= */
+
+/* ── Vendored fonts (embedded woff2, no network/CDN fetch) ───────────────────
+   Adjust these url()s to your asset route. If you cannot vendor the fonts the
+   --sans / --mono fallback stacks below degrade gracefully to system fonts. */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal; font-weight: 400; font-display: swap;
+  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal; font-weight: 600; font-display: swap;
+  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal; font-weight: 500; font-display: swap;
+  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
+}
+
+/* ── Design tokens ───────────────────────────────────────────────────────────
+   The single source of truth. Re-theme by editing only this block. */
+:root {
+  /* Surfaces & ink */
+  --paper:        #f4f4f1;   /* page background — warm off-white, never pure */
+  --card:         #ffffff;   /* raised surfaces: cards, bars, table heads     */
+  --ink:          #1b1d21;   /* primary text                                  */
+  --ink-soft:     #5a6066;   /* secondary text, labels                        */
+  --ink-faint:    #8b9097;   /* tertiary text, captions, units                */
+  --rule:         #e4e4df;   /* hairline borders / row dividers               */
+  --rule-strong:  #d2d2cb;   /* emphasised hairlines: bar underline, pills    */
+
+  /* Accent */
+  --accent:       #2f5fd0;   /* links, sort arrows, primary actions           */
+  --accent-deep:  #1e3f99;   /* hover / pressed accent, raw-value emphasis     */
+
+  /* Status — foreground */
+  --ok:           #2f9e44;
+  --warn:         #e8920c;
+  --bad:          #e03131;
+  --idle:         #868e96;
+
+  /* Status — tinted backgrounds (pair with the matching foreground) */
+  --ok-bg:        #e9f6ec;
+  --warn-bg:      #fdf1dd;
+  --bad-bg:       #fceaea;
+  --idle-bg:      #eef0f2;
+
+  /* Type stacks — Plex first, graceful system fallback */
+  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
+  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+
+  /* Bootstrap 5 overrides — harmless if Bootstrap is absent */
+  --bs-body-bg:          var(--paper);
+  --bs-body-color:       var(--ink);
+  --bs-body-font-family: var(--sans);
+  --bs-body-font-size:   0.9rem;
+  --bs-primary:          var(--accent);
+  --bs-border-color:     var(--rule);
+  --bs-emphasis-color:   var(--ink);
+}
+
+/* ── Base ────────────────────────────────────────────────────────────────────
+   The faint top-right radial is the one deliberate flourish — a soft sheen,
+   not a gradient wash. Keep it subtle. */
+body {
+  background:
+    radial-gradient(1200px 480px at 88% -8%, #ffffff 0%, rgba(255,255,255,0) 70%),
+    var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 0.9rem;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Any numeric / fixed-width text. Tabular figures so columns of digits align. */
+.numeric,
+.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--accent-deep); text-decoration: underline; }
+
+/* ── App chrome: top bar ─────────────────────────────────────────────────────
+   One bar across the top: brand, breadcrumb crumbs, a flex spacer, then meta
+   text and any status pill pushed hard right. */
+.app-bar {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+  padding: 0.85rem 1.25rem;
+  background: var(--card);
+  border-bottom: 1px solid var(--rule-strong);
+}
+.app-bar .brand {
+  font-weight: 600;
+  font-size: 1.05rem;
+  letter-spacing: 0.02em;
+}
+.app-bar .brand .mark { color: var(--accent); }   /* the one accent glyph     */
+.app-bar .crumb { color: var(--ink-faint); font-size: 0.85rem; }
+.app-bar .spacer { flex: 1; }                       /* pushes meta/pill right  */
+.app-bar .meta {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  color: var(--ink-soft);
+}
+
+/* ── Connection / liveness pill ──────────────────────────────────────────────
+   A rounded pill with a dot, driven entirely by data-state. Use for any
+   live-link health indicator (websocket, SSE, polling). */
+.conn-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.74rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid var(--rule-strong);
+  color: var(--ink-soft);
+  background: var(--card);
+}
+.conn-pill .dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--idle);
+}
+.conn-pill[data-state="connected"]      { color: var(--ok);   border-color: #bfe3c6; background: var(--ok-bg); }
+.conn-pill[data-state="connected"] .dot { background: var(--ok); }
+.conn-pill[data-state="connecting"]      { color: var(--warn); border-color: #f0d9ab; background: var(--warn-bg); }
+.conn-pill[data-state="connecting"] .dot { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
+.conn-pill[data-state="disconnected"]      { color: var(--bad); border-color: #f0c0c0; background: var(--bad-bg); }
+.conn-pill[data-state="disconnected"] .dot { background: var(--bad); }
+
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
+
+/* ── Status text helpers ─────────────────────────────────────────────────────
+   Recolour a value in place — counts, ratios, error totals. */
+.s-ok   { color: var(--ok); }
+.s-warn { color: var(--warn); }
+.s-bad  { color: var(--bad); }
+.s-idle { color: var(--idle); }
+
+/* ── State chip ──────────────────────────────────────────────────────────────
+   Compact rectangular badge for an enumerated state (bound/recovering/…).
+   Squarer than the pill; use the pill for liveness, the chip for state. */
+.chip {
+  display: inline-block;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+.chip-ok   { color: var(--ok);       background: var(--ok-bg);   border-color: #c6e6cd; }
+.chip-warn { color: #b56a00;         background: var(--warn-bg); border-color: #efd6a6; }
+.chip-bad  { color: var(--bad);      background: var(--bad-bg);  border-color: #eec3c3; }
+.chip-idle { color: var(--ink-soft); background: var(--idle-bg); border-color: var(--rule-strong); }
+
+/* ── Panel — the base raised surface ─────────────────────────────────────────
+   A white card with a hairline border and 8px radius. .panel-head is the
+   uppercase eyebrow label that sits on top. */
+.panel {
+  background: var(--card);
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+}
+.panel-head {
+  font-size: 0.74rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--ink-faint);
+  padding: 0.6rem 0.9rem;
+  border-bottom: 1px solid var(--rule);
+}
+
+/* ── Page wrapper ────────────────────────────────────────────────────────────
+   Centred, capped width, even gutter. */
+.page { padding: 1.25rem; max-width: 1680px; margin: 0 auto; }
+
+/* ── Reveal-on-paint ─────────────────────────────────────────────────────────
+   Add .rise to top-level sections; stagger with inline animation-delay
+   (.02s, .08s, .14s …) so panels settle in sequence, not all at once. */
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+.rise { animation: rise 0.4s ease both; }
+
+/* ════════════════════════════════════════════════════════════════════════════
+   COMPONENT LIBRARY
+   Generic, reusable pieces. View-specific layout belongs in a separate sheet.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* ── KPI / aggregate cards ───────────────────────────────────────────────────
+   A responsive strip of headline numbers. .agg-card.alert / .caution tint the
+   whole card when a watched metric goes non-zero. */
+.agg-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+@media (max-width: 1100px) { .agg-grid { grid-template-columns: repeat(3, 1fr); } }
+@media (max-width: 620px)  { .agg-grid { grid-template-columns: repeat(2, 1fr); } }
+
+.agg-card {
+  background: var(--card);
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+  padding: 0.7rem 0.9rem;
+}
+.agg-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--ink-faint);
+}
+.agg-value {
+  margin-top: 0.25rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.1;
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+}
+.agg-sub {                       /* trailing "/ 54", "ms" etc. — quieter */
+  font-size: 0.85rem;
+  font-weight: 400;
+  color: var(--ink-faint);
+}
+.agg-card.alert   { border-color: #eec3c3; background: var(--bad-bg); }
+.agg-card.alert   .agg-value { color: var(--bad); }
+.agg-card.caution { border-color: #efd6a6; background: var(--warn-bg); }
+.agg-card.caution .agg-value { color: #b56a00; }
+
+/* ── Metric card + key/value rows ────────────────────────────────────────────
+   A .panel-head over a stack of .kv rows: label left, monospace value right.
+   Zebra striping on even rows. .v.warn / .v.bad / .v.ok recolour a value. */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+  gap: 0.85rem;
+  margin-bottom: 1rem;
+}
+.metric-card {
+  background: var(--card);
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.metric-card .panel-head { margin: 0; }
+
+.kv {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+  padding: 0.32rem 0.9rem;
+  font-size: 0.85rem;
+}
+.kv:nth-child(even) { background: #fbfbf9; }
+.kv .k { color: var(--ink-soft); }
+.kv .v {
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.kv .v.warn { color: var(--warn); }
+.kv .v.bad  { color: var(--bad); }
+.kv .v.ok   { color: var(--ok); }
+
+/* ── Toolbar ─────────────────────────────────────────────────────────────────
+   Filter/search row that sits inside a .panel above a table. */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0.9rem;
+  border-bottom: 1px solid var(--rule);
+}
+.toolbar .spacer { flex: 1; }
+.tb-search { max-width: 280px; }
+.tb-state  { max-width: 150px; }
+.tb-check {
+  display: flex; align-items: center; gap: 0.35rem;
+  font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap;
+  user-select: none;
+}
+.tb-count { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
+
+/* ── Data table ──────────────────────────────────────────────────────────────
+   Dense, hairline-ruled table. Uppercase sticky head on a faint fill; numeric
+   columns get .num (right-aligned, monospace). Rows are clickable by default —
+   drop the cursor/hover rules if yours are not. */
+.table-wrap { overflow-x: auto; }
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+.data-table th,
+.data-table td {
+  padding: 0.45rem 0.8rem;
+  text-align: left;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--rule);
+}
+.data-table th {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ink-faint);
+  background: #fbfbf9;
+  position: sticky;
+  top: 0;
+}
+.data-table th.num,
+.data-table td.num { text-align: right; font-family: var(--mono); }
+
+.data-table th.sortable { cursor: pointer; user-select: none; }
+.data-table th.sortable:hover { color: var(--ink); }
+.data-table th.sorted-asc::after  { content: ' \2191'; color: var(--accent); }
+.data-table th.sorted-desc::after { content: ' \2193'; color: var(--accent); }
+
+.data-table tbody tr { cursor: pointer; transition: background 0.08s; }
+.data-table tbody tr:hover { background: #f3f6fd; }
+.data-table tbody tr:last-child td { border-bottom: none; }
+
+.empty-row {
+  text-align: center !important;
+  color: var(--ink-faint);
+  padding: 1.6rem !important;
+  font-style: italic;
+}
+
+/* ── Direction / category tag ────────────────────────────────────────────────
+   Tiny inline tag for a per-row category (e.g. read vs write). */
+.dir-tag {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.4rem;
+  border-radius: 3px;
+}
+.dir-read  { color: var(--accent-deep); background: #e7ecfb; }
+.dir-write { color: #8a5a00;            background: var(--warn-bg); }
+
+/* ── Inline notice ───────────────────────────────────────────────────────────
+   A .panel with a warning tint — for "this thing is gone / degraded" banners. */
+.notice {
+  padding: 0.85rem 1.1rem;
+  margin-bottom: 1rem;
+  color: #b56a00;
+  background: var(--warn-bg);
+  border-color: #efd6a6;
+}
@@ -0,0 +1,18 @@
+// Sidebar nav collapse state — persisted in the `scadabridge_nav` cookie so it
+// survives full page reloads and reconnects. Invoked from NavMenu.razor via
+// JS interop (window.navState.get / .set), mirroring window.treeviewStorage.
+window.navState = {
+    // Returns the raw cookie value (comma-separated expanded section ids), or
+    // an empty string when the cookie is absent.
+    get: function () {
+        const match = document.cookie.match(/(?:^|;\s*)scadabridge_nav=([^;]*)/);
+        return match ? decodeURIComponent(match[1]) : "";
+    },
+    // Writes the cookie with a one-year lifetime. SameSite=Lax; not HttpOnly
+    // (JS must write it) and not sensitive.
+    set: function (value) {
+        const oneYearSeconds = 60 * 60 * 24 * 365;
+        document.cookie = "scadabridge_nav=" + encodeURIComponent(value) +
+            ";path=/;max-age=" + oneYearSeconds + ";samesite=lax";
+    }
+};
@@ -4,9 +4,10 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
-    <title>ScadaLink</title>
+    <title>ScadaBridge</title>
    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
+    <link href="_content/ScadaLink.CentralUI/css/theme.css" rel="stylesheet" />
    <link href="/ScadaLink.Host.styles.css" rel="stylesheet" />
    <link href="_content/ScadaLink.CentralUI/css/site.css" rel="stylesheet" />
    <HeadOutlet @rendermode="InteractiveServer" />
@@ -76,6 +77,7 @@
        });
    </script>
    <script src="/js/treeview-storage.js"></script>
+    <script src="_content/ScadaLink.CentralUI/js/nav-state.js"></script>
    <script src="_content/ScadaLink.CentralUI/js/monaco-init.js"></script>
    <script src="_content/ScadaLink.CentralUI/js/audit-grid.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
@@ -146,6 +146,14 @@ public class AuditGridColumnTests
            Assert.True(after > before + 40,
                $"Expected the {columnKey} column to widen after the resize drag (before={before}, after={after}).");

+            // The resize persists asynchronously: pointer-up fires a
+            // fire-and-forget JS→.NET OnColumnResized invoke, and the .NET
+            // handler then round-trips back through JS interop to write
+            // sessionStorage. Wait for that write to land before reloading —
+            // otherwise the reload races it and the restored grid falls back
+            // to the default width.
+            await WaitForStorageKeyAsync(page, "auditGrid:columnWidths");
+
            // Reload: the persisted width is restored from sessionStorage.
            await page.ReloadAsync();
            await page.WaitForLoadStateAsync(LoadState.NetworkIdle);
@@ -21,7 +21,7 @@ public class LoginTests
        await page.GotoAsync(PlaywrightFixture.BaseUrl);

        Assert.Contains("/login", page.Url);
-        await Expect(page.Locator("h4")).ToHaveTextAsync("ScadaLink");
+        await Expect(page.Locator("h4")).ToHaveTextAsync("ScadaBridge");
        await Expect(page.Locator("#username")).ToBeVisibleAsync();
        await Expect(page.Locator("#password")).ToBeVisibleAsync();
        await Expect(page.Locator("button[type='submit']")).ToHaveTextAsync("Sign In");
@@ -0,0 +1,88 @@
+using Microsoft.Playwright;
+
+namespace ScadaLink.CentralUI.PlaywrightTests;
+
+/// <summary>
+/// E2E tests for the collapsible sidebar nav sections: sections are collapsed
+/// by default, a header toggle reveals a section's items, the state persists in
+/// the <c>scadabridge_nav</c> cookie across a full page reload, and navigating
+/// into a section auto-expands it.
+/// </summary>
+[Collection("Playwright")]
+public class NavCollapseTests
+{
+    private readonly PlaywrightFixture _fixture;
+
+    public NavCollapseTests(PlaywrightFixture fixture)
+    {
+        _fixture = fixture;
+    }
+
+    [Fact]
+    public async Task Sections_AreCollapsedByDefault_AfterLogin()
+    {
+        var page = await _fixture.NewAuthenticatedPageAsync();
+
+        // The dashboard is sectionless, so no section is auto-expanded and the
+        // cookie is empty on a fresh context — every section toggle is collapsed.
+        await Expect(page.Locator("button.nav-section-toggle[aria-expanded='true']"))
+            .ToHaveCountAsync(0);
+        // A sectioned link is therefore absent from the DOM.
+        Assert.Equal(0, await page.Locator("nav a:has-text('Topology')").CountAsync());
+    }
+
+    [Fact]
+    public async Task ClickingSectionHeader_RevealsItsItems()
+    {
+        var page = await _fixture.NewAuthenticatedPageAsync();
+        var toggle = page.Locator("button.nav-section-toggle:has-text('Deployment')");
+
+        Assert.Equal(0, await page.Locator("nav a:has-text('Topology')").CountAsync());
+
+        await toggle.ClickAsync();
+
+        await Expect(toggle).ToHaveAttributeAsync("aria-expanded", "true");
+        await Expect(page.GetByRole(AriaRole.Link, new() { Name = "Topology" }))
+            .ToBeVisibleAsync();
+    }
+
+    [Fact]
+    public async Task CollapseState_SurvivesPageReload()
+    {
+        var page = await _fixture.NewAuthenticatedPageAsync();
+        await page.Locator("button.nav-section-toggle:has-text('Deployment')").ClickAsync();
+        await Expect(page.GetByRole(AriaRole.Link, new() { Name = "Topology" }))
+            .ToBeVisibleAsync();
+
+        await page.ReloadAsync();
+        await page.WaitForLoadStateAsync(LoadState.NetworkIdle);
+
+        // The scadabridge_nav cookie restored the expanded Deployment section.
+        await Expect(page.Locator("button.nav-section-toggle:has-text('Deployment')"))
+            .ToHaveAttributeAsync("aria-expanded", "true");
+        await Expect(page.GetByRole(AriaRole.Link, new() { Name = "Topology" }))
+            .ToBeVisibleAsync();
+    }
+
+    [Fact]
+    public async Task NavigatingIntoCollapsedSection_AutoExpandsIt()
+    {
+        var page = await _fixture.NewAuthenticatedPageAsync();
+        var auditToggle = page.Locator("button.nav-section-toggle:has-text('Audit')");
+
+        // The Audit section starts collapsed.
+        await Expect(auditToggle).ToHaveAttributeAsync("aria-expanded", "false");
+
+        // Navigate into the Audit section via an in-page link (SPA navigation,
+        // which raises NavigationManager.LocationChanged) — the Configuration
+        // Audit Log quick-action card on the dashboard.
+        await page.Locator("a[href='/audit/configuration']").First.ClickAsync();
+        await PlaywrightFixture.WaitForPathAsync(page, "/audit/configuration");
+
+        // The Audit nav section auto-expanded on arrival.
+        await Expect(auditToggle).ToHaveAttributeAsync("aria-expanded", "true");
+    }
+
+    private static ILocatorAssertions Expect(ILocator locator) =>
+        Assertions.Expect(locator);
+}
@@ -17,8 +17,9 @@ public class NavigationTests
    {
        var page = await _fixture.NewAuthenticatedPageAsync();

-        // The nav sidebar should be visible with the brand
-        await Expect(page.Locator(".brand")).ToHaveTextAsync("ScadaLink");
+        // The nav sidebar should be visible with the brand. ToContainText, not
+        // ToHaveText: the brand also carries the accent mark glyph (▮).
+        await Expect(page.Locator(".brand")).ToContainTextAsync("ScadaBridge");
        // The nav should contain "Dashboard" link (exact match to avoid "Health Dashboard")
        await Expect(page.GetByRole(AriaRole.Link, new() { Name = "Dashboard", Exact = true })).ToBeVisibleAsync();
    }
@@ -76,6 +77,8 @@ public class NavigationTests

    private static async Task ClickNavAndWait(IPage page, string linkText, string expectedPath)
    {
+        // Sections are collapsed by default — open them so the link is in the DOM.
+        await PlaywrightFixture.ExpandAllNavSectionsAsync(page);
        await page.Locator($"nav a:has-text('{linkText}')").ClickAsync();
        await PlaywrightFixture.WaitForPathAsync(page, expectedPath);
        Assert.Contains(expectedPath, page.Url);
@@ -105,6 +105,28 @@ public class PlaywrightFixture : IAsyncLifetime
            : $"() => window.location.pathname.includes('{path}')";
        await page.WaitForFunctionAsync(js, null, new() { Timeout = timeoutMs });
    }
+
+    /// <summary>
+    /// Expand every collapsed sidebar nav section. Nav sections are collapsed by
+    /// default, so a section's links are not in the DOM until it is expanded.
+    /// Call this after authenticating, before interacting with sectioned nav links.
+    /// </summary>
+    public static async Task ExpandAllNavSectionsAsync(IPage page)
+    {
+        var toggles = page.Locator("button.nav-section-toggle");
+        int count = await toggles.CountAsync();
+        for (int i = 0; i < count; i++)
+        {
+            var toggle = toggles.Nth(i);
+            if (await toggle.GetAttributeAsync("aria-expanded") == "false")
+            {
+                await toggle.ClickAsync();
+                // Wait for the toggle's own state to flip so the Blazor
+                // re-render has landed before moving to the next section.
+                await Assertions.Expect(toggle).ToHaveAttributeAsync("aria-expanded", "true");
+            }
+        }
+    }
 }

 [CollectionDefinition("Playwright")]
@@ -220,6 +220,9 @@ public class RoleNavigationTests

    private static async Task AssertNavLinkVisible(IPage page, string linkText)
    {
+        // Sections are collapsed by default — expand them so a present link is
+        // in the DOM. Idempotent: already-expanded sections are skipped.
+        await PlaywrightFixture.ExpandAllNavSectionsAsync(page);
        var locator = page.Locator($"nav a:has-text('{linkText}')");
        var count = await locator.CountAsync();
        Assert.True(count > 0, $"Expected nav link '{linkText}' to be visible, but it was not found");
@@ -73,11 +73,11 @@ public class ComponentRenderingTests : BunitContext
    }

    [Fact]
-    public void LoginPage_RendersScadaLinkTitle()
+    public void LoginPage_RendersScadaBridgeTitle()
    {
        var cut = Render<Login>();

        var title = cut.Find("h4.card-title");
-        Assert.Equal("ScadaLink", title.TextContent);
+        Assert.Equal("ScadaBridge", title.TextContent);
    }
 }
@@ -12,14 +12,24 @@ namespace ScadaLink.CentralUI.Tests.Layout;

 /// <summary>
 /// bUnit rendering tests for the sidebar <see cref="NavMenu"/>. They verify the
-/// new Notifications section: its items are gated per-policy, and the old
-/// <c>/admin/smtp</c> and <c>/monitoring/notification-outbox</c> routes are gone.
-/// The <c>AuthorizeView Policy=...</c> blocks evaluate the real policies, which
+/// collapsible section behaviour (sections collapsed by default, a toggle
+/// reveals a section's items and persists state to a cookie) and that the
+/// Notifications section's items are gated per-policy. The
+/// <c>AuthorizeView Policy=...</c> blocks evaluate the real policies, which
 /// require a claim of type <see cref="JwtTokenService.RoleClaimType"/> ("Role"),
 /// so the test principal carries claims of that exact type.
 /// </summary>
 public class NavMenuTests : BunitContext
 {
+    public NavMenuTests()
+    {
+        // NavMenu reads the nav-collapse cookie via the navState.get JS interop
+        // call in OnAfterRenderAsync and writes it via navState.set on toggle.
+        // Loose mode lets navState.get no-op (returns null) so the sidebar
+        // renders collapsed, and still records navState.set invocations.
+        JSInterop.Mode = JSRuntimeMode.Loose;
+    }
+
    /// <summary>
    /// Renders <see cref="NavMenu"/> under a principal holding the given roles.
    /// <see cref="NavMenu"/>'s top-level <c>AuthorizeView</c> requires the
@@ -52,10 +62,62 @@ public class NavMenuTests : BunitContext
        return host.FindComponent<NavMenu>();
    }

+    /// <summary>
+    /// Clicks the collapsible section header whose title matches, expanding it.
+    /// </summary>
+    private static void ExpandSection(IRenderedComponent<NavMenu> cut, string title)
+    {
+        var toggle = cut.FindAll("button.nav-section-toggle")
+            .Single(b => b.TextContent.Contains(title, StringComparison.Ordinal));
+        toggle.Click();
+    }
+
+    [Fact]
+    public void Sections_AreCollapsedByDefault()
+    {
+        var cut = RenderWithRoles("Admin", "Design", "Deployment");
+
+        cut.WaitForAssertion(() =>
+        {
+            // Section headers render unconditionally...
+            Assert.Contains(">Notifications<", cut.Markup);
+            Assert.Contains(">Deployment<", cut.Markup);
+            // ...but their items stay out of the DOM until the section opens.
+            Assert.DoesNotContain("/notifications/smtp", cut.Markup);
+            Assert.DoesNotContain("/deployment/topology", cut.Markup);
+        });
+    }
+
+    [Fact]
+    public void TogglingSection_RevealsItsItems()
+    {
+        var cut = RenderWithRoles("Deployment");
+        Assert.DoesNotContain("/deployment/topology", cut.Markup);
+
+        ExpandSection(cut, "Deployment");
+
+        Assert.Contains("/deployment/topology", cut.Markup);
+        Assert.Contains("/deployment/deployments", cut.Markup);
+        Assert.Contains("/deployment/debug-view", cut.Markup);
+    }
+
+    [Fact]
+    public void TogglingSection_PersistsStateToCookie()
+    {
+        var cut = RenderWithRoles("Deployment");
+
+        ExpandSection(cut, "Deployment");
+
+        // Expanding wrote the cookie through the navState.set JS interop call.
+        var invocation = JSInterop.Invocations.Last(i => i.Identifier == "navState.set");
+        Assert.Equal("deployment", invocation.Arguments[0]);
+    }
+
    [Fact]
    public void NotificationsSection_ShowsAllItems_ForMultiRoleUser()
    {
        var cut = RenderWithRoles("Admin", "Design", "Deployment");
+        ExpandSection(cut, "Notifications");

        cut.WaitForAssertion(() =>
        {
@@ -71,6 +133,7 @@ public class NavMenuTests : BunitContext
    public void NotificationsSection_AdminOnlyUser_SeesOnlySmtp()
    {
        var cut = RenderWithRoles("Admin");
+        ExpandSection(cut, "Notifications");

        cut.WaitForAssertion(() =>
        {
@@ -103,6 +103,18 @@ public class AuditLogPageScaffoldTests : BunitContext
        return host.FindComponent<NavMenu>();
    }

+    /// <summary>
+    /// Clicks the collapsible section header whose title matches, expanding it.
+    /// Nav sections are collapsed by default, so a section's items are only in
+    /// the DOM once expanded.
+    /// </summary>
+    private static void ExpandNavSection(IRenderedComponent<NavMenu> cut, string title)
+    {
+        var toggle = cut.FindAll("button.nav-section-toggle")
+            .Single(b => b.TextContent.Contains(title, StringComparison.Ordinal));
+        toggle.Click();
+    }
+
    [Fact]
    public void AuditLogPage_Renders_PageHeading()
    {
@@ -121,6 +133,7 @@ public class AuditLogPageScaffoldTests : BunitContext
    public void NavMenu_Contains_AuditGroup_With_AuditLog_Link()
    {
        var cut = RenderNavMenu("Admin", "Design", "Deployment");
+        ExpandNavSection(cut, "Audit");

        cut.WaitForAssertion(() =>
        {
@@ -133,6 +146,7 @@ public class AuditLogPageScaffoldTests : BunitContext
    public void NavMenu_Contains_ConfigurationAuditLog_Link_UnderAuditGroup()
    {
        var cut = RenderNavMenu("Admin", "Design", "Deployment");
+        ExpandNavSection(cut, "Audit");

        cut.WaitForAssertion(() =>
        {
Author	SHA1	Message	Date
Joseph Doherty	f8127d5754	Merge branch 'fix/audit-grid-resize-flaky-test': stabilise audit-grid resize E2E	2026-05-22 08:00:46 -04:00
Joseph Doherty	bb6f6aaa54	test(centralui): fix flaky audit-grid resize-survives-reload test ResizeHandle_DraggingWidensColumn_AndSurvivesReload called page.ReloadAsync() immediately after the resize drag, racing the asynchronous persist: pointer-up fires a fire-and-forget JS→.NET OnColumnResized invoke that round-trips back through JS interop to write sessionStorage. When the reload won the race the restored grid fell back to the default column width and the test failed (~1 in 3 runs). Wait for auditGrid:columnWidths to land via the existing WaitForStorageKeyAsync helper before reloading — the same guard the sibling ColumnOrderAndWidths_PersistAcrossReload_ViaSessionStorage test already uses. Verified: 6/6 consecutive passes.	2026-05-22 08:00:46 -04:00
Joseph Doherty	c07cc379e6	Merge branch 'feature/collapsible-nav-sections': collapsible sidebar nav sections	2026-05-22 07:56:22 -04:00
Joseph Doherty	86ee7bd1a8	feat(centralui): collapsible sidebar nav sections Make the seven sidebar section groups (Admin, Design, Deployment, Notifications, Site Calls, Monitoring, Audit) collapsible. New NavSection component renders a header toggle button (chevron) and reveals its items only while expanded; NavMenu owns the expanded-section set. Behaviour: sections are collapsed by default; state persists in the `scadabridge_nav` cookie (written/read via the new nav-state.js JS interop, mirroring treeview-storage.js) so it survives reloads and reconnects; navigating into a section auto-expands it and remembers it. The Dashboard item stays sectionless and always visible. Tests: NavMenu bUnit tests expand sections before asserting items and add collapsed-by-default / toggle / cookie-persistence cases; Playwright nav tests expand sections before clicking links; new NavCollapseTests covers the feature E2E. Build 0 warnings; bUnit 545 passed; Playwright nav suite green (the unrelated AuditGridColumnTests resize-reload case remains pre-existing flaky — an un-awaited save race in that test).	2026-05-22 07:36:57 -04:00
Joseph Doherty	d4abacc0d8	Merge branch 'feature/technical-light-rebrand': ScadaBridge rebrand + technical-light theme	2026-05-22 07:04:42 -04:00
Joseph Doherty	b07f43a308	feat(centralui): rebrand web UI to ScadaBridge + technical-light theme Rename the user-facing product name from ScadaLink to ScadaBridge across the six display strings (browser title, sidebar brand, login + not-authorized headings, dashboard welcome/subtitle). Namespaces, assemblies, config keys, and _content/ScadaLink.CentralUI asset routes are unchanged. Apply the technical-light design system: vendor theme.css + IBM Plex fonts into the CentralUI RCL, include theme.css globally (after Bootstrap so its --bs-* token overrides win), and restyle the layout chrome to a light sidebar — white surface, hairline rules, ink text, accent-blue active item, the brand accent mark. Page markup stays Bootstrap and inherits the warm paper background, Plex type, accent, and hairline borders via the tokens. Tests: build 0 warnings; bUnit 542 passed; Playwright 64 passed.	2026-05-22 07:03:46 -04:00