refactor(ui/deployment): live-updates toggle, DebugView guardrails

New shared DiffDialog mirroring ConfirmDialog's API
(ShowAsync(title, before, after)) so live-data pages stop
hand-rolling Bootstrap modal markup.

Topology: <h4> in flex header, aria-labels on Expand/Collapse/Refresh
and the inline rename input, Live-updates toggle (suppresses the 15s
timer when off), instance/area counts moved into a summary alert
above the tree, Stale badge paired with bi-exclamation-triangle icon
+ aria-label, hand-rolled Diff modal replaced with <DiffDialog @ref>.

Deployments: pause/resume auto-refresh button replaces the static
"Auto-refresh: 10s" text; summary cards switch to
col-lg-3 col-md-6 col-12; InProgress spinner gets role="status" +
aria-label; failed rows pick up a bi-x-circle icon next to the
Status badge; Deployment ID + Revision folded into one
{id}@{revision[..8]} cell; inline Error column collapses behind a
per-row "View error" toggle; bare empty-state text upgraded to the
centered muted block.

DebugView: status-strip card at the top showing instance / connection
state / last snapshot timestamp plus a "Start fresh" button when the
page auto-reconnected from localStorage. Per-table filter input,
scroll-lock toggle, Clear button, and a 200-row queue-style cap.
<tbody> elements gain aria-live="polite" aria-atomic="false" for
screen-reader announcements. Quality and Alarm-State badges get
aria-labels; timestamps display HH:mm:ss with full ms in a hover
tooltip. Auto-reconnect surfaces a toast with autoDismissMs: 8000.

src/ScadaLink.CentralUI/Components/Pages/Deployment/DebugView.razor

@@ -26,6 +26,47 @@
     }
     else
     {
+        @* Status strip — connection state, instance, last snapshot. *@
+        <div class="alert alert-light py-2 mb-3 d-flex justify-content-between align-items-center small flex-wrap gap-2">
+            <div class="d-flex align-items-center gap-2">
+                <strong>
+                    @if (_connected)
+                    {
+                        var inst = _siteInstances.FirstOrDefault(i => i.Id == _selectedInstanceId);
+                        @(inst?.UniqueName ?? "Connected")
+                    }
+                    else
+                    {
+                        <span class="text-muted">Not connected</span>
+                    }
+                </strong>
+                @if (_connected)
+                {
+                    <span class="badge bg-success" aria-label="Connection state: Live">
+                        <span class="spinner-grow spinner-grow-sm me-1" style="width: 0.5rem; height: 0.5rem;" aria-hidden="true"></span>
+                        Live
+                    </span>
+                }
+                else
+                {
+                    <span class="badge bg-secondary" aria-label="Connection state: Disconnected">Disconnected</span>
+                }
+            </div>
+            <div class="d-flex align-items-center gap-2">
+                @if (_snapshot != null)
+                {
+                    <span class="text-muted">
+                        Last snapshot: @_snapshot.SnapshotTimestamp.LocalDateTime.ToString("HH:mm:ss")
+                    </span>
+                }
+                @if (_connected && _connectedFromStorage)
+                {
+                    <button class="btn btn-outline-secondary btn-sm" @onclick="StartFresh"
+                            aria-label="Clear persisted selection and disconnect">Start fresh</button>
+                }
+            </div>
+        </div>
+
         <div class="row mb-3 g-2">
             <div class="col-md-3">
                 <label class="form-label small">Site</label>
@@ -52,17 +93,13 @@
                 {
                     <button class="btn btn-primary btn-sm" @onclick="Connect"
                             disabled="@(_selectedInstanceId == 0 || _selectedSiteId == 0 || _connecting)">
-                        @if (_connecting) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                        @if (_connecting) { <span class="spinner-border spinner-border-sm me-1" role="status" aria-label="Connecting"></span> }
                         Connect
                     </button>
                 }
                 else
                 {
                     <button class="btn btn-outline-danger btn-sm" @onclick="Disconnect">Disconnect</button>
-                    <span class="badge bg-success align-self-center">
-                        <span class="spinner-grow spinner-grow-sm me-1" style="width: 0.5rem; height: 0.5rem;"></span>
-                        Live
-                    </span>
                 }
             </div>
         </div>
@@ -73,9 +110,25 @@
                 @* Attribute Values *@
                 <div class="col-md-7">
                     <div class="card">
-                        <div class="card-header py-2 d-flex justify-content-between">
+                        <div class="card-header py-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
-                            <strong>Attribute Values</strong>
+                            <div class="d-flex align-items-center gap-2">
-                            <small class="text-muted">@_attributeValues.Count values</small>
+                                <strong>Attribute Values</strong>
+                                <small class="text-muted">@FilteredAttributeValues.Count latest (cap @MaxRows)</small>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="text" class="form-control form-control-sm"
+                                       style="max-width: 240px;"
+                                       placeholder="Filter by attribute…"
+                                       @bind="_attrFilter" @bind:event="oninput" aria-label="Filter attributes" />
+                                <button class="btn btn-link btn-sm py-0" type="button"
+                                        @onclick="() => _attrScrollLocked = !_attrScrollLocked"
+                                        aria-pressed="@(_attrScrollLocked ? "true" : "false")"
+                                        aria-label="@(_attrScrollLocked ? "Scroll locked" : "Auto-scroll enabled")">
+                                    @(_attrScrollLocked ? "🔒 Locked" : "🔓 Auto-scroll")
+                                </button>
+                                <button class="btn btn-outline-secondary btn-sm" type="button"
+                                        @onclick="ClearAttributes" aria-label="Clear attribute table">Clear</button>
+                            </div>
                         </div>
                         <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                             <table class="table table-sm table-striped mb-0">
@@ -87,16 +140,20 @@
                                         <th>Timestamp</th>
                                     </tr>
                                 </thead>
-                                <tbody>
+                                <tbody aria-live="polite" aria-atomic="false">
-                                    @foreach (var av in _attributeValues.Values.OrderBy(a => a.AttributeName))
+                                    @foreach (var av in FilteredAttributeValues)
                                     {
                                         <tr>
                                             <td class="small">@av.AttributeName</td>
                                             <td class="small font-monospace"><strong>@ValueFormatter.FormatDisplayValue(av.Value)</strong></td>
                                             <td>
-                                                <span class="badge @GetQualityBadge(av.Quality)">@av.Quality</span>
+                                                <span class="badge @GetQualityBadge(av.Quality)"
+                                                      aria-label="@($"Quality: {av.Quality}")">@av.Quality</span>
+                                            </td>
+                                            <td class="small text-muted"
+                                                title="@av.Timestamp.LocalDateTime.ToString("HH:mm:ss.fff")">
+                                                @av.Timestamp.LocalDateTime.ToString("HH:mm:ss")
                                             </td>
-                                            <td class="small text-muted">@av.Timestamp.LocalDateTime.ToString("HH:mm:ss.fff")</td>
                                         </tr>
                                     }
                                 </tbody>
@@ -108,9 +165,25 @@
                 @* Alarm States *@
                 <div class="col-md-5">
                     <div class="card">
-                        <div class="card-header py-2 d-flex justify-content-between">
+                        <div class="card-header py-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
-                            <strong>Alarm States</strong>
+                            <div class="d-flex align-items-center gap-2">
-                            <small class="text-muted">@_alarmStates.Count alarms</small>
+                                <strong>Alarm States</strong>
+                                <small class="text-muted">@FilteredAlarmStates.Count latest (cap @MaxRows)</small>
+                            </div>
+                            <div class="d-flex align-items-center gap-2">
+                                <input type="text" class="form-control form-control-sm"
+                                       style="max-width: 240px;"
+                                       placeholder="Filter by alarm…"
+                                       @bind="_alarmFilter" @bind:event="oninput" aria-label="Filter alarms" />
+                                <button class="btn btn-link btn-sm py-0" type="button"
+                                        @onclick="() => _alarmScrollLocked = !_alarmScrollLocked"
+                                        aria-pressed="@(_alarmScrollLocked ? "true" : "false")"
+                                        aria-label="@(_alarmScrollLocked ? "Scroll locked" : "Auto-scroll enabled")">
+                                    @(_alarmScrollLocked ? "🔒 Locked" : "🔓 Auto-scroll")
+                                </button>
+                                <button class="btn btn-outline-secondary btn-sm" type="button"
+                                        @onclick="ClearAlarms" aria-label="Clear alarm table">Clear</button>
+                            </div>
                         </div>
                         <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                             <table class="table table-sm table-striped mb-0">
@@ -122,16 +195,20 @@
                                         <th>Timestamp</th>
                                     </tr>
                                 </thead>
-                                <tbody>
+                                <tbody aria-live="polite" aria-atomic="false">
-                                    @foreach (var alarm in _alarmStates.Values.OrderBy(a => a.AlarmName))
+                                    @foreach (var alarm in FilteredAlarmStates)
                                     {
                                         <tr class="@GetAlarmRowClass(alarm.State)">
                                             <td class="small">@alarm.AlarmName</td>
                                             <td>
-                                                <span class="badge @GetAlarmStateBadge(alarm.State)">@alarm.State</span>
+                                                <span class="badge @GetAlarmStateBadge(alarm.State)"
+                                                      aria-label="@($"Alarm state: {alarm.State}")">@alarm.State</span>
                                             </td>
                                             <td class="small">@alarm.Priority</td>
-                                            <td class="small text-muted">@alarm.Timestamp.LocalDateTime.ToString("HH:mm:ss.fff")</td>
+                                            <td class="small text-muted"
+                                                title="@alarm.Timestamp.LocalDateTime.ToString("HH:mm:ss.fff")">
+                                                @alarm.Timestamp.LocalDateTime.ToString("HH:mm:ss")
+                                            </td>
                                         </tr>
                                     }
                                 </tbody>
@@ -140,11 +217,6 @@
                     </div>
                 </div>
             </div>
-
-            <div class="text-muted small mt-2">
-                Snapshot received: @_snapshot.SnapshotTimestamp.LocalDateTime.ToString("HH:mm:ss") |
-                @_attributeValues.Count attributes, @_alarmStates.Count alarms
-            </div>
         }
         else if (_connected)
         {
@@ -154,6 +226,8 @@
 </div>
 
 @code {
+    private const int MaxRows = 200;
+
     private List<Site> _sites = new();
     private List<Instance> _siteInstances = new();
     private int _selectedSiteId;
@@ -161,11 +235,36 @@
     private bool _loading = true;
     private bool _connected;
     private bool _connecting;
+    private bool _connectedFromStorage;
 
     private DebugViewSnapshot? _snapshot;
+    // Keyed dictionaries hold the latest value per attribute/alarm; insertion order
+    // is preserved so we can trim the oldest when the count exceeds MaxRows.
     private Dictionary<string, AttributeValueChanged> _attributeValues = new();
     private Dictionary<string, AlarmStateChanged> _alarmStates = new();
 
+    // Filters and scroll-lock state per table.
+    private string _attrFilter = string.Empty;
+    private string _alarmFilter = string.Empty;
+    private bool _attrScrollLocked;
+    private bool _alarmScrollLocked;
+
+    private IReadOnlyList<AttributeValueChanged> FilteredAttributeValues =>
+        string.IsNullOrWhiteSpace(_attrFilter)
+            ? _attributeValues.Values.OrderBy(a => a.AttributeName).ToList()
+            : _attributeValues.Values
+                .Where(a => a.AttributeName.Contains(_attrFilter, StringComparison.OrdinalIgnoreCase))
+                .OrderBy(a => a.AttributeName)
+                .ToList();
+
+    private IReadOnlyList<AlarmStateChanged> FilteredAlarmStates =>
+        string.IsNullOrWhiteSpace(_alarmFilter)
+            ? _alarmStates.Values.OrderBy(a => a.AlarmName).ToList()
+            : _alarmStates.Values
+                .Where(a => a.AlarmName.Contains(_alarmFilter, StringComparison.OrdinalIgnoreCase))
+                .OrderBy(a => a.AlarmName)
+                .ToList();
+
     private DebugStreamSession? _session;
     private ToastNotification _toast = default!;
 
@@ -195,8 +294,15 @@
             _selectedSiteId = siteId;
             await LoadInstancesForSite();
             _selectedInstanceId = instanceId;
+            _connectedFromStorage = true;
             StateHasChanged();
             await Connect();
+
+            // Auto-reconnect notice — the user didn't initiate this connection.
+            var inst = _siteInstances.FirstOrDefault(i => i.Id == instanceId);
+            _toast.ShowInfo(
+                $"Auto-reconnected to {inst?.UniqueName ?? "instance"} from previous session.",
+                autoDismissMs: 8000);
         }
     }
 
@@ -235,11 +341,11 @@
                     switch (evt)
                     {
                         case AttributeValueChanged av:
-                            _attributeValues[av.AttributeName] = av;
+                            UpsertWithCap(_attributeValues, av.AttributeName, av);
                             _ = InvokeAsync(StateHasChanged);
                             break;
                         case AlarmStateChanged al:
-                            _alarmStates[al.AlarmName] = al;
+                            UpsertWithCap(_alarmStates, al.AlarmName, al);
                             _ = InvokeAsync(StateHasChanged);
                             break;
                     }
@@ -296,11 +402,51 @@
         await JS.InvokeVoidAsync("localStorage.removeItem", "debugView.instanceId");
 
         _connected = false;
+        _connectedFromStorage = false;
         _snapshot = null;
         _attributeValues.Clear();
         _alarmStates.Clear();
     }
 
+    /// <summary>
+    /// Disconnect and forget the persisted selection. Surfaces in the status
+    /// strip whenever the page auto-reconnects from localStorage so the user
+    /// can opt out of the carry-over session.
+    /// </summary>
+    private async Task StartFresh()
+    {
+        await Disconnect();
+        _selectedSiteId = 0;
+        _selectedInstanceId = 0;
+        _siteInstances.Clear();
+        _toast.ShowInfo("Cleared previous session — select a site and instance to begin.", autoDismissMs: 5000);
+    }
+
+    private void ClearAttributes()
+    {
+        _attributeValues.Clear();
+    }
+
+    private void ClearAlarms()
+    {
+        _alarmStates.Clear();
+    }
+
+    /// <summary>
+    /// Replace or insert a value keyed by name, then trim the oldest entries
+    /// (queue-style) so the table size never exceeds MaxRows. Dictionary
+    /// preserves insertion order, so the first key is always the oldest.
+    /// </summary>
+    private static void UpsertWithCap<T>(Dictionary<string, T> map, string key, T value)
+    {
+        map[key] = value;
+        while (map.Count > MaxRows)
+        {
+            var oldest = map.Keys.First();
+            map.Remove(oldest);
+        }
+    }
+
     private static string GetQualityBadge(string quality) => quality switch
     {
         "Good" => "bg-success",

src/ScadaLink.CentralUI/Components/Pages/Deployment/Deployments.razor

@@ -12,9 +12,12 @@
 <div class="container-fluid mt-3">
     <div class="d-flex justify-content-between align-items-center mb-3">
         <h4 class="mb-0">Deployment Status</h4>
-        <div>
+        <div class="d-flex gap-2 align-items-center">
-            <span class="text-muted small me-2">Auto-refresh: 10s</span>
+            <button class="btn btn-outline-secondary btn-sm" @onclick="ToggleAutoRefresh"
-            <button class="btn btn-outline-secondary btn-sm" @onclick="LoadDataAsync">Refresh</button>
+                    aria-label="@(_autoRefresh ? "Pause auto-refresh" : "Resume auto-refresh")">
+                @(_autoRefresh ? "⏸ Pause updates" : "▶ Resume updates")
+            </button>
+            <button class="btn btn-outline-secondary btn-sm" @onclick="LoadDataAsync" aria-label="Refresh deployments">Refresh</button>
         </div>
     </div>
 
@@ -30,7 +33,7 @@
     {
         @* Summary cards *@
         <div class="row mb-3">
-            <div class="col-md-3">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="card border-warning">
                     <div class="card-body text-center py-2">
                         <h4 class="mb-0 text-warning">@_records.Count(r => r.Status == DeploymentStatus.Pending)</h4>
@@ -38,7 +41,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-3">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="card border-info">
                     <div class="card-body text-center py-2">
                         <h4 class="mb-0 text-info">@_records.Count(r => r.Status == DeploymentStatus.InProgress)</h4>
@@ -46,7 +49,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-3">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="card border-success">
                     <div class="card-body text-center py-2">
                         <h4 class="mb-0 text-success">@_records.Count(r => r.Status == DeploymentStatus.Success)</h4>
@@ -54,7 +57,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-3">
+            <div class="col-lg-3 col-md-6 col-12">
                 <div class="card border-danger">
                     <div class="card-body text-center py-2">
                         <h4 class="mb-0 text-danger">@_records.Count(r => r.Status == DeploymentStatus.Failed)</h4>
@@ -64,37 +67,51 @@
             </div>
         </div>
 
-        <table class="table table-sm table-striped table-hover">
+        @if (_records.Count == 0)
+        {
+            <div class="text-center py-5 text-muted">
+                <p class="mb-0">No deployments recorded.</p>
+            </div>
+        }
+        else
+        {
+        <table class="table table-sm table-striped table-hover align-middle">
             <thead class="table-dark">
                 <tr>
-                    <th>Deployment ID</th>
+                    <th>Deployment</th>
                     <th>Instance</th>
                     <th>Status</th>
                     <th>Deployed By</th>
                     <th>Started</th>
                     <th>Completed</th>
-                    <th>Revision</th>
+                    <th class="text-end">Actions</th>
-                    <th>Error</th>
                 </tr>
             </thead>
             <tbody>
-                @if (_records.Count == 0)
-                {
-                    <tr>
-                        <td colspan="8" class="text-muted text-center">No deployments recorded.</td>
-                    </tr>
-                }
                 @foreach (var record in _pagedRecords)
                 {
-                    <tr class="@GetRowClass(record.Status)">
+                    var rowId = $"deploy-row-{record.DeploymentId}";
-                        <td><code class="small">@record.DeploymentId[..Math.Min(12, record.DeploymentId.Length)]...</code></td>
+                    var errorCollapseId = $"deploy-err-{record.DeploymentId}";
+                    var isFailed = record.Status == DeploymentStatus.Failed;
+                    var idShort = record.DeploymentId[..Math.Min(12, record.DeploymentId.Length)];
+                    var revShort = record.RevisionHash?[..Math.Min(8, record.RevisionHash?.Length ?? 0)];
+                    <tr id="@rowId" class="@GetRowClass(record.Status)">
+                        <td>
+                            <code class="small">@idShort@(string.IsNullOrEmpty(revShort) ? "" : $"@{revShort}")</code>
+                        </td>
                         <td>@GetInstanceName(record.InstanceId)</td>
                         <td>
-                            <span class="badge @GetStatusBadge(record.Status)">
+                            @if (isFailed)
+                            {
+                                <i class="bi bi-x-circle text-danger me-1" aria-hidden="true"></i>
+                            }
+                            <span class="badge @GetStatusBadge(record.Status)"
+                                  aria-label="@($"Deployment status: {record.Status}")">
                                 @record.Status
                                 @if (record.Status == DeploymentStatus.InProgress)
                                 {
-                                    <span class="spinner-border spinner-border-sm ms-1" style="width: 0.7rem; height: 0.7rem;"></span>
+                                    <span class="spinner-border spinner-border-sm ms-1" style="width: 0.7rem; height: 0.7rem;"
+                                          role="status" aria-label="Deployment in progress"></span>
                                 }
                             </span>
                         </td>
@@ -112,12 +129,33 @@
                                 <span class="text-muted">—</span>
                             }
                         </td>
-                        <td class="small"><code>@(record.RevisionHash?[..Math.Min(8, record.RevisionHash?.Length ?? 0)])</code></td>
+                        <td class="small text-end">
-                        <td class="small text-danger">@(record.ErrorMessage ?? "")</td>
+                            @if (isFailed && !string.IsNullOrEmpty(record.ErrorMessage))
+                            {
+                                <button class="btn btn-link btn-sm p-0" type="button"
+                                        @onclick="() => ToggleErrorExpansion(record.DeploymentId)"
+                                        aria-expanded="@(IsErrorExpanded(record.DeploymentId) ? "true" : "false")"
+                                        aria-controls="@errorCollapseId">
+                                    @(IsErrorExpanded(record.DeploymentId) ? "Hide error" : "View error")
+                                </button>
+                            }
+                        </td>
                     </tr>
+                    @if (isFailed && !string.IsNullOrEmpty(record.ErrorMessage) && IsErrorExpanded(record.DeploymentId))
+                    {
+                        <tr id="@errorCollapseId" class="table-danger">
+                            <td colspan="7">
+                                <div class="small">
+                                    <strong>Error:</strong>
+                                    <pre class="mb-0 mt-1 small" style="white-space: pre-wrap; word-break: break-word;">@record.ErrorMessage</pre>
+                                </div>
+                            </td>
+                        </tr>
+                    }
                 }
             </tbody>
         </table>
+        }
 
         @if (_totalPages > 1)
         {
@@ -149,22 +187,56 @@
     private bool _loading = true;
     private string? _errorMessage;
     private Timer? _refreshTimer;
+    private bool _autoRefresh = true;
+    private readonly HashSet<string> _expandedErrors = new();
 
     private int _currentPage = 1;
     private int _totalPages;
     private const int PageSize = 25;
+    private static readonly TimeSpan RefreshInterval = TimeSpan.FromSeconds(10);
 
     protected override async Task OnInitializedAsync()
     {
         await LoadDataAsync();
+        StartTimer();
+    }
+
+    private void StartTimer()
+    {
+        _refreshTimer?.Dispose();
         _refreshTimer = new Timer(_ =>
         {
             InvokeAsync(async () =>
             {
+                if (!_autoRefresh) return;
                 await LoadDataAsync();
                 StateHasChanged();
             });
-        }, null, TimeSpan.FromSeconds(10), TimeSpan.FromSeconds(10));
+        }, null, RefreshInterval, RefreshInterval);
+    }
+
+    private void ToggleAutoRefresh()
+    {
+        _autoRefresh = !_autoRefresh;
+        if (_autoRefresh)
+        {
+            StartTimer();
+        }
+        else
+        {
+            _refreshTimer?.Dispose();
+            _refreshTimer = null;
+        }
+    }
+
+    private bool IsErrorExpanded(string deploymentId) => _expandedErrors.Contains(deploymentId);
+
+    private void ToggleErrorExpansion(string deploymentId)
+    {
+        if (!_expandedErrors.Remove(deploymentId))
+        {
+            _expandedErrors.Add(deploymentId);
+        }
     }
 
     private async Task LoadDataAsync()

src/ScadaLink.CentralUI/Components/Pages/Deployment/Topology.razor

@@ -19,10 +19,11 @@
 @inject AuthenticationStateProvider AuthStateProvider
 @inject NavigationManager NavigationManager
 @inject IJSRuntime JSRuntime
+@implements IDisposable
 
 <div class="container-fluid mt-3">
     <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     <CreateAreaDialog @bind-IsVisible="_showCreateAreaDialog"
                       RequireSitePicker="_createAreaRequireSitePicker"
@@ -60,8 +61,10 @@
     }
     else
     {
-        <h6 class="mb-2">Topology</h6>
+        <div class="d-flex justify-content-between align-items-center mb-3">
-        <div class="d-flex align-items-center mb-2 gap-2">
+            <h4 class="mb-0">Topology</h4>
+        </div>
+        <div class="d-flex align-items-center mb-2 gap-2 flex-wrap">
             <input type="text" class="form-control form-control-sm" style="max-width: 320px;"
                    placeholder="Search sites, areas, instances..."
                    @bind="_searchText" @bind:event="oninput" @bind:after="OnSearchChanged" />
@@ -69,13 +72,22 @@
                 <button class="btn btn-outline-secondary" @onclick="OpenCreateAreaDialogRoot">+ Area</button>
                 <button class="btn btn-outline-secondary"
                         @onclick='() => NavigationManager.NavigateTo("/deployment/instances/create")'>+ Instance</button>
-                <button class="btn btn-outline-secondary" @onclick="LoadDataAsync">Refresh</button>
+                <button class="btn btn-outline-secondary" aria-label="Refresh topology" @onclick="LoadDataAsync">Refresh</button>
-                <button class="btn btn-outline-secondary" @onclick="() => _tree?.ExpandAll()">Expand</button>
+                <button class="btn btn-outline-secondary" aria-label="Expand all areas" @onclick="() => _tree?.ExpandAll()">Expand</button>
-                <button class="btn btn-outline-secondary" @onclick="() => _tree?.CollapseAll()">Collapse</button>
+                <button class="btn btn-outline-secondary" aria-label="Collapse all areas" @onclick="() => _tree?.CollapseAll()">Collapse</button>
+            </div>
+            <div class="form-check form-switch ms-2 mb-0">
+                <input type="checkbox" class="form-check-input" id="live-updates"
+                       checked="@_liveUpdates" @onchange="OnLiveUpdatesToggled" />
+                <label class="form-check-label small" for="live-updates">Live updates</label>
             </div>
         </div>
 
-        <div style="max-height: calc(100vh - 180px); overflow-y: auto; padding: 4px;">
+        <div class="alert alert-light py-2 mb-3 small">
+            @_allAreas.Count area(s) · @_allInstances.Count instance(s) across @_sites.Count site(s).
+        </div>
+
+        <div style="max-height: calc(100vh - 240px); overflow-y: auto; padding: 4px;">
             <TreeView @ref="_tree" TItem="TopoNode" Items="_treeRoots"
                       ChildrenSelector="n => n.Children"
                       HasChildrenSelector="n => n.Children.Count > 0"
@@ -96,58 +108,7 @@
             </TreeView>
         </div>
 
-        <div class="text-muted small mt-2">
+        <DiffDialog @ref="_diffDialog" />
-            @_allInstances.Count instance(s) across @_sites.Count site(s).
-        </div>
-
-        @* Diff Modal — ported from Instances.razor *@
-        @if (_showDiffModal)
-        {
-            <div class="modal d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
-                <div class="modal-dialog modal-lg">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="modal-title">Deployment Diff — @_diffInstanceName</h5>
-                            <button type="button" class="btn-close" @onclick="() => _showDiffModal = false"></button>
-                        </div>
-                        <div class="modal-body">
-                            @if (_diffLoading)
-                            {
-                                <LoadingSpinner IsLoading="true" />
-                            }
-                            else if (_diffError != null)
-                            {
-                                <div class="alert alert-danger">@_diffError</div>
-                            }
-                            else if (_diffResult != null)
-                            {
-                                <div class="mb-2">
-                                    <span class="badge @(_diffResult.IsStale ? "bg-warning text-dark" : "bg-success")">
-                                        @(_diffResult.IsStale ? "Stale — changes pending" : "Current")
-                                    </span>
-                                    <span class="text-muted small ms-2">
-                                        Deployed: @_diffResult.DeployedRevisionHash[..8]
-                                        | Current: @_diffResult.CurrentRevisionHash[..8]
-                                        | Deployed at: @_diffResult.DeployedAt.LocalDateTime.ToString("yyyy-MM-dd HH:mm")
-                                    </span>
-                                </div>
-                                @if (!_diffResult.IsStale)
-                                {
-                                    <p class="text-muted">No differences between deployed and current configuration.</p>
-                                }
-                                else
-                                {
-                                    <p class="text-muted small">The deployed revision hash differs from the current template-derived hash. Redeploy to apply changes.</p>
-                                }
-                            }
-                        </div>
-                        <div class="modal-footer">
-                            <button class="btn btn-secondary btn-sm" @onclick="() => _showDiffModal = false">Close</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        }
     }
 </div>
 
@@ -167,6 +128,12 @@
 
     private ToastNotification _toast = default!;
     private ConfirmDialog _confirmDialog = default!;
+    private DiffDialog _diffDialog = default!;
+
+    // ---- Live updates ----
+    private bool _liveUpdates = true;
+    private Timer? _liveUpdatesTimer;
+    private static readonly TimeSpan LiveUpdatesInterval = TimeSpan.FromSeconds(15);
 
     private TreeView<TopoNode> _tree = default!;
     private object? _selectedKey;
@@ -199,6 +166,41 @@
     protected override async Task OnInitializedAsync()
     {
         await LoadDataAsync();
+        StartLiveUpdatesTimer();
+    }
+
+    private void StartLiveUpdatesTimer()
+    {
+        _liveUpdatesTimer?.Dispose();
+        if (!_liveUpdates) return;
+        _liveUpdatesTimer = new Timer(_ =>
+        {
+            InvokeAsync(async () =>
+            {
+                if (!_liveUpdates) return;
+                await LoadDataAsync();
+                StateHasChanged();
+            });
+        }, null, LiveUpdatesInterval, LiveUpdatesInterval);
+    }
+
+    private void OnLiveUpdatesToggled(ChangeEventArgs e)
+    {
+        _liveUpdates = e.Value is bool b && b;
+        if (_liveUpdates)
+        {
+            StartLiveUpdatesTimer();
+        }
+        else
+        {
+            _liveUpdatesTimer?.Dispose();
+            _liveUpdatesTimer = null;
+        }
+    }
+
+    public void Dispose()
+    {
+        _liveUpdatesTimer?.Dispose();
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -364,6 +366,7 @@
                 @if (_renamingKey == node.Key)
                 {
                     <input class="form-control form-control-sm d-inline-block" style="width: auto; max-width: 220px;"
+                           aria-label="@($"Rename {node.Label}")"
                            @ref="_renameInput"
                            @bind="_renameBuffer"
                            @onkeydown="(e) => OnRenameKeyDown(e, node)"
@@ -386,9 +389,16 @@
                 <span class="badge @GetStateBadge(node.Instance!.State) ms-1" style="@labelStyle">@node.Instance!.State</span>
                 @if (node.Instance!.State != InstanceState.NotDeployed)
                 {
-                    <span class="badge @(node.IsStale ? "bg-warning text-dark" : "bg-light text-dark") ms-1" style="@labelStyle">
+                    @if (node.IsStale)
-                        @(node.IsStale ? "Stale" : "Current")
+                    {
-                    </span>
+                        <span class="badge bg-warning text-dark ms-1" style="@labelStyle" aria-label="State: Stale">
+                            <i class="bi bi-exclamation-triangle me-1"></i>Stale
+                        </span>
+                    }
+                    else
+                    {
+                        <span class="badge bg-light text-dark ms-1" style="@labelStyle" aria-label="State: Current">Current</span>
+                    }
                 }
                 break;
         }
@@ -787,36 +797,64 @@
     }
 
     // ---- Diff modal ----
-    private bool _showDiffModal;
-    private bool _diffLoading;
-    private string? _diffError;
-    private string _diffInstanceName = string.Empty;
-    private DeploymentComparisonResult? _diffResult;
-
     private async Task ShowDiff(Instance inst)
     {
-        _showDiffModal = true;
+        DeploymentComparisonResult? diffResult = null;
-        _diffLoading = true;
+        string? diffError = null;
-        _diffError = null;
-        _diffResult = null;
-        _diffInstanceName = inst.UniqueName;
         try
         {
             var result = await DeploymentService.GetDeploymentComparisonAsync(inst.Id);
             if (result.IsSuccess)
             {
-                _diffResult = result.Value;
+                diffResult = result.Value;
             }
             else
             {
-                _diffError = result.Error;
+                diffError = result.Error;
             }
         }
         catch (Exception ex)
         {
-            _diffError = $"Failed to load diff: {ex.Message}";
+            diffError = $"Failed to load diff: {ex.Message}";
         }
-        _diffLoading = false;
+
+        RenderFragment body = builder =>
+        {
+            if (diffError != null)
+            {
+                builder.OpenElement(0, "div");
+                builder.AddAttribute(1, "class", "alert alert-danger");
+                builder.AddContent(2, diffError);
+                builder.CloseElement();
+            }
+            else if (diffResult != null)
+            {
+                var stale = diffResult.IsStale;
+                builder.OpenElement(0, "div");
+                builder.AddAttribute(1, "class", "mb-2");
+                builder.OpenElement(2, "span");
+                builder.AddAttribute(3, "class", stale ? "badge bg-warning text-dark" : "badge bg-success");
+                builder.AddContent(4, stale ? "Stale — changes pending" : "Current");
+                builder.CloseElement();
+                builder.OpenElement(5, "span");
+                builder.AddAttribute(6, "class", "text-muted small ms-2");
+                builder.AddContent(7,
+                    $"Deployed: {diffResult.DeployedRevisionHash[..8]} | " +
+                    $"Current: {diffResult.CurrentRevisionHash[..8]} | " +
+                    $"Deployed at: {diffResult.DeployedAt.LocalDateTime:yyyy-MM-dd HH:mm}");
+                builder.CloseElement();
+                builder.CloseElement();
+
+                builder.OpenElement(8, "p");
+                builder.AddAttribute(9, "class", "text-muted small mb-0");
+                builder.AddContent(10, stale
+                    ? "The deployed revision hash differs from the current template-derived hash. Redeploy to apply changes."
+                    : "No differences between deployed and current configuration.");
+                builder.CloseElement();
+            }
+        };
+
+        await _diffDialog.ShowAsync($"Deployment Diff — {inst.UniqueName}", body);
     }
 
     // ---- Dropdown option helpers ----

src/ScadaLink.CentralUI/Components/Shared/DiffDialog.razor

@@ -0,0 +1,158 @@
+@* Reusable diff/comparison dialog using Bootstrap modal.
+   Mirrors the ConfirmDialog API: callers invoke ShowAsync(title, before, after)
+   via @ref to display a side-by-side or simple before/after comparison.
+   z-index ladder follows ConfirmDialog: modal 1055 > backdrop 1040 (toasts at 1090). *@
+@inject IJSRuntime JS
+@implements IAsyncDisposable
+
+@if (_visible)
+{
+    <div class="modal-backdrop fade show"></div>
+    <div @ref="_modalRef"
+         class="modal fade show d-block"
+         tabindex="-1"
+         role="dialog"
+         @onkeydown="OnKeyDownAsync">
+        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">@Title</h5>
+                    <button type="button" class="btn-close" aria-label="Close diff dialog" @onclick="Close"></button>
+                </div>
+                <div class="modal-body">
+                    @if (BodyContent != null)
+                    {
+                        @BodyContent
+                    }
+                    else
+                    {
+                        <div class="row g-3">
+                            <div class="col-md-6">
+                                <div class="small text-muted mb-1">Before</div>
+                                <pre class="border rounded p-2 small bg-light mb-0" style="max-height: 50vh; overflow: auto; white-space: pre-wrap;">@Before</pre>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="small text-muted mb-1">After</div>
+                                <pre class="border rounded p-2 small bg-light mb-0" style="max-height: 50vh; overflow: auto; white-space: pre-wrap;">@After</pre>
+                            </div>
+                        </div>
+                    }
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary btn-sm" @onclick="Close">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    private bool _visible;
+    private bool _bodyLocked;
+    private TaskCompletionSource<bool>? _tcs;
+    private ElementReference _modalRef;
+
+    [Parameter] public string Title { get; set; } = "Diff";
+    [Parameter] public string Before { get; set; } = string.Empty;
+    [Parameter] public string After { get; set; } = string.Empty;
+    /// <summary>
+    /// Optional custom body content. When supplied, it replaces the default
+    /// before/after panes — useful when the caller wants to render a richer
+    /// comparison (e.g. metadata badges, file lists, etc.).
+    /// </summary>
+    [Parameter] public RenderFragment? BodyContent { get; set; }
+
+    /// <summary>
+    /// Show the dialog with the supplied title and before/after text.
+    /// Returns when the user dismisses the dialog.
+    /// </summary>
+    public Task<bool> ShowAsync(string title, string before, string after)
+    {
+        Title = title;
+        Before = before;
+        After = after;
+        BodyContent = null;
+        return OpenAsync();
+    }
+
+    /// <summary>
+    /// Show the dialog with a custom body. Useful when the diff is not a
+    /// simple before/after string pair (e.g. a deployment comparison summary).
+    /// </summary>
+    public Task<bool> ShowAsync(string title, RenderFragment body)
+    {
+        Title = title;
+        BodyContent = body;
+        return OpenAsync();
+    }
+
+    private Task<bool> OpenAsync()
+    {
+        _visible = true;
+        _tcs = new TaskCompletionSource<bool>();
+        StateHasChanged();
+        return _tcs.Task;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_visible && !_bodyLocked)
+        {
+            _bodyLocked = true;
+            await TryLockBodyAsync();
+            try { await _modalRef.FocusAsync(); }
+            catch { /* prerender or detached: ignore */ }
+        }
+    }
+
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape")
+        {
+            Close();
+            await Task.CompletedTask;
+        }
+    }
+
+    private void Close()
+    {
+        _visible = false;
+        _ = TryUnlockBodyAsync();
+        _tcs?.TrySetResult(true);
+    }
+
+    private async Task TryLockBodyAsync()
+    {
+        try
+        {
+            await JS.InvokeVoidAsync("document.body.classList.add", "modal-open");
+        }
+        catch
+        {
+            try { await JS.InvokeVoidAsync("console.debug", "DiffDialog: JS interop unavailable for body lock."); }
+            catch { /* swallow */ }
+        }
+    }
+
+    private async Task TryUnlockBodyAsync()
+    {
+        _bodyLocked = false;
+        try
+        {
+            await JS.InvokeVoidAsync("document.body.classList.remove", "modal-open");
+        }
+        catch
+        {
+            try { await JS.InvokeVoidAsync("console.debug", "DiffDialog: JS interop unavailable for body unlock."); }
+            catch { /* swallow */ }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_bodyLocked)
+        {
+            await TryUnlockBodyAsync();
+        }
+    }
+}