From 2c6345dd1c19135c62aa0f3d73d73de3b11507e7 Mon Sep 17 00:00:00 2001
From: Felix Stubner <felix.stubner@gmail.com>
Date: Sat, 15 Aug 2026 03:41:55 +0100
Subject: [PATCH 1/2] Move blocking work off tokio workers and fix GUI
 interaction defects

B-10, five sync-in-async call sites:
  - `event::poll(tick_rate)` parked a tokio worker for 100ms every loop
    iteration whether or not a key arrived. Poll and read move together to
    a blocking thread so the read cannot race another poller.
  - `NetworkManager::find_mac` shells out to `arp` on Windows and macOS.
  - `pcap_check_support` enumerates devices via a blocking syscall, twice
    per /pcap. Uses block_in_place because `ops` is a borrow, not 'static.
  - `get_stats` holds a mutex across a `Networks::refresh` syscall and was
    called from the draw path. Drawing is synchronous so it cannot yield;
    the sample moves to the event loop and the draw path reads cached
    numbers.
  - `detect_default_ipv4_addr` at startup delayed every path behind it.

B-11: /config wrote settings on every arrow keypress -- a synchronous
fs::write + fs::rename per key event, on the event-loop thread, so key
repeat meant one full file rewrite per repeat tick. Cycling now marks the
settings dirty and the single write happens in exit_config, which every
close path (Esc, Done, toggle) already funnels through. Reset still writes
immediately, being discrete and destructive.

B-36: the spinner advanced an index from the draw path, coupling its speed
to the frame rate and making rendering mutate state. It is now derived from
wall time, so it spins at a constant rate and takes &self.

GUI:
  M-1: History menu items keyed on their label, so two runs of the same
    command collided and React dropped one.
  M-2: keyboard column resize read `column.width` -- the static column
    definition, not the live width -- so every press recomputed from the
    same base and holding an arrow moved the border one step and stopped.
  M-3: NumberField clamped on every keystroke, so in a field with min 10
    the "5" of "50" became "10" before the "0" arrived, and the field could
    not be cleared. Clamping moves to blur/Enter/steppers.
  M-5: the menu strip had no menubar semantics.
  M-7: the table and detail pane disagreed on latency -- a closed port read
    '' in one and 'refused' in the other, and both were used inside the
    detail pane. One function now.
  C-12: DetailList keys collided for two identical TXT records.
  C-16: the progress line counted `1-1024` as one port and said "1 ports".
  C-32: duplicate App.css import; the non-null root assertion now throws a
    real message.

94 GUI tests (up from 88) and 134 Rust tests. clippy clean with and
without --features pcap.

Verified in the running GUI: menubar exposes 7 menuitems, and the number
field keeps partial input and stays clearable. NumberField's commit paths
are covered by component tests rather than the browser, because a focus
trap in the app prevented a real blur through the automation harness.
---
 apps/netscli-cli/src/main.rs                  |   8 +-
 apps/netscli-cli/src/tui/events/pcap.rs       |   7 +-
 apps/netscli-cli/src/tui/events/scan.rs       |   9 +-
 apps/netscli-cli/src/tui/runtime.rs           |  24 +++-
 apps/netscli-cli/src/tui/state/config_ui.rs   |  25 +++-
 apps/netscli-cli/src/tui/state/mod.rs         |   5 +-
 apps/netscli-cli/src/tui/state/render.rs      |   1 +
 .../netscli-cli/src/tui/state/render/input.rs |  77 +------------
 .../netscli-cli/src/tui/state/render/stats.rs | 109 ++++++++++++++++++
 .../src/components/results/DetailList.tsx     |   6 +-
 .../results/OperationProgress.test.ts         |  41 +++++++
 .../components/results/OperationProgress.tsx  |  22 +++-
 .../results/resultTableInteractions.ts        |  23 ++--
 .../src/components/shell/MenuBar.tsx          |  11 +-
 .../src/components/tools/NumberField.test.tsx |  76 ++++++++++++
 .../src/components/tools/NumberField.tsx      |  14 ++-
 apps/netscli-gui/src/main.tsx                 |   9 +-
 .../src/tools/presentation.test.ts            |  20 +++-
 apps/netscli-gui/src/tools/presentation.ts    |   2 +
 .../src/tools/presentation/portDetails.ts     |  18 +--
 .../src/tools/presentation/ports.ts           |  18 ++-
 21 files changed, 404 insertions(+), 121 deletions(-)
 create mode 100644 apps/netscli-cli/src/tui/state/render/stats.rs
 create mode 100644 apps/netscli-gui/src/components/results/OperationProgress.test.ts
 create mode 100644 apps/netscli-gui/src/components/tools/NumberField.test.tsx

diff --git a/apps/netscli-cli/src/main.rs b/apps/netscli-cli/src/main.rs
index a9f3562a..d3194a2e 100644
--- a/apps/netscli-cli/src/main.rs
+++ b/apps/netscli-cli/src/main.rs
@@ -31,7 +31,13 @@ async fn main() -> Result<()> {
             .unwrap_or_else(|| tui_settings::load_settings().max_concurrent_probes),
         ..Default::default()
     });
-    let local_addr = netscli_core::detect_default_ipv4_addr().map(|ip| ip.to_string());
+    // Route enumeration is a blocking syscall; this runs inside the async
+    // main, so it delayed every startup path behind it (B-10).
+    let local_addr = tokio::task::spawn_blocking(netscli_core::detect_default_ipv4_addr)
+        .await
+        .ok()
+        .flatten()
+        .map(|ip| ip.to_string());
 
     if let Some(command) = &cli.command {
         cli_dispatch::run_command(
diff --git a/apps/netscli-cli/src/tui/events/pcap.rs b/apps/netscli-cli/src/tui/events/pcap.rs
index 7ba09561..9bd9d6c1 100644
--- a/apps/netscli-cli/src/tui/events/pcap.rs
+++ b/apps/netscli-cli/src/tui/events/pcap.rs
@@ -122,7 +122,10 @@ pub(super) async fn handle(
     }
 
     if check || interface.is_none() {
-        match ops.pcap_check_support() {
+        // Device enumeration is a blocking syscall on every platform, and
+        // this runs on a tokio worker (B-10). `block_in_place` rather than
+        // `spawn_blocking` because `ops` is a borrow, not `'static`.
+        match tokio::task::block_in_place(|| ops.pcap_check_support()) {
             Ok(devs) => {
                 out.extend(Formatter::format_pcap_interfaces(&devs));
                 if !check && interface.is_none() {
@@ -152,7 +155,7 @@ pub(super) async fn handle(
     }
 
     let iface = interface.unwrap_or_else(|| "unknown".to_string());
-    match ops.pcap_check_support() {
+    match tokio::task::block_in_place(|| ops.pcap_check_support()) {
         // Deliberately no name check here (B-12).
         //
         // This used to require exact string equality against a device name,
diff --git a/apps/netscli-cli/src/tui/events/scan.rs b/apps/netscli-cli/src/tui/events/scan.rs
index 5efb4921..57c11225 100644
--- a/apps/netscli-cli/src/tui/events/scan.rs
+++ b/apps/netscli-cli/src/tui/events/scan.rs
@@ -97,7 +97,14 @@ pub(super) async fn handle_scan(
                     commands::db_add_scan_history_safe(db, "scan", 0, &res).await;
                 }
 
-                let arp = netscli_core::NetworkManager::find_mac(&ip);
+                // `find_mac` shells out to `arp` on Windows and macOS, so
+                // calling it inline blocked a tokio worker for the lifetime
+                // of a subprocess (B-10).
+                let arp = tokio::task::spawn_blocking(move || {
+                    netscli_core::NetworkManager::find_mac(&ip)
+                })
+                .await
+                .unwrap_or(None);
                 let mac = arp.as_ref().map(|e| e.mac.to_string());
                 let vendor = arp.and_then(|e| e.vendor);
                 let hostname = netscli_core::dns::reverse_lookup_best_effort_timeout(
diff --git a/apps/netscli-cli/src/tui/runtime.rs b/apps/netscli-cli/src/tui/runtime.rs
index d31d3e9e..57a0d97a 100644
--- a/apps/netscli-cli/src/tui/runtime.rs
+++ b/apps/netscli-cli/src/tui/runtime.rs
@@ -28,6 +28,11 @@ pub async fn run_tui(concurrency: Option<usize>) -> Result<()> {
         input.refresh_exit_confirmation(&mut app);
         tasks.refresh_running_detail(&mut app);
 
+        // Sample traffic here rather than from the draw path: `get_stats`
+        // holds a mutex across a syscall, and drawing is synchronous so it
+        // cannot yield (B-10). `block_in_place` keeps the borrow.
+        tokio::task::block_in_place(|| app.refresh_traffic_stats());
+
         app.draw(&mut terminal)?;
         if app.running {
             app.suggestions.clear();
@@ -37,11 +42,22 @@ pub async fn run_tui(concurrency: Option<usize>) -> Result<()> {
 
         tasks.finish_ready_task(&mut app).await;
 
-        if !event::poll(tick_rate)? {
-            continue;
-        }
+        // `event::poll` parks the calling thread for up to `tick_rate`, and
+        // this loop runs on a tokio worker — so every iteration blocked a
+        // worker for 100ms whether or not a key arrived (B-10). Both the poll
+        // and the read move to a blocking thread; they stay together so the
+        // read cannot race another poller.
+        let polled = tokio::task::spawn_blocking(move || -> std::io::Result<Option<Event>> {
+            if event::poll(tick_rate)? {
+                Ok(Some(event::read()?))
+            } else {
+                Ok(None)
+            }
+        })
+        .await
+        .map_err(|e| std::io::Error::other(e.to_string()))??;
 
-        let Event::Key(key) = event::read()? else {
+        let Some(Event::Key(key)) = polled else {
             continue;
         };
 
diff --git a/apps/netscli-cli/src/tui/state/config_ui.rs b/apps/netscli-cli/src/tui/state/config_ui.rs
index e013997c..5c9f5669 100644
--- a/apps/netscli-cli/src/tui/state/config_ui.rs
+++ b/apps/netscli-cli/src/tui/state/config_ui.rs
@@ -15,10 +15,25 @@ impl<'a> TuiApp<'a> {
     }
 
     pub fn exit_config(&mut self) {
+        // Every close path funnels through here (Esc, Done, /config toggle),
+        // so this is where the single write belongs. Cycling a value used to
+        // do a synchronous fs::write + fs::rename per key event, on the event
+        // loop thread, which under key-repeat meant one full file rewrite per
+        // repeat tick (B-11).
+        self.flush_settings_if_dirty();
         self.ui_mode = UiMode::Normal;
         self.scroll_to_bottom();
     }
 
+    /// Persist settings only if something actually changed.
+    fn flush_settings_if_dirty(&mut self) -> Option<String> {
+        if !self.settings_dirty {
+            return None;
+        }
+        self.settings_dirty = false;
+        self.config_save_settings()
+    }
+
     pub fn config_next(&mut self) {
         let Some(state) = self.config_state_mut() else {
             return;
@@ -111,9 +126,10 @@ impl<'a> TuiApp<'a> {
             ConfigItemKind::Reset | ConfigItemKind::Done => {}
         }
 
-        let msg = self.config_save_settings();
+        // Deferred to exit_config; see B-11 there.
+        self.settings_dirty = true;
         if let Some(state) = self.config_state_mut() {
-            state.message = msg;
+            state.message = None;
         }
     }
 
@@ -140,7 +156,10 @@ impl<'a> TuiApp<'a> {
             _ => false,
         };
 
-        let msg = self.config_save_settings();
+        // Reset is a discrete, destructive action, so it is written through
+        // immediately rather than waiting for the panel to close.
+        self.settings_dirty = true;
+        let msg = self.flush_settings_if_dirty();
         if let Some(state) = self.config_state_mut() {
             state.message = msg;
         }
diff --git a/apps/netscli-cli/src/tui/state/mod.rs b/apps/netscli-cli/src/tui/state/mod.rs
index df4e66b6..5065879e 100644
--- a/apps/netscli-cli/src/tui/state/mod.rs
+++ b/apps/netscli-cli/src/tui/state/mod.rs
@@ -42,7 +42,6 @@ pub struct TuiApp<'a> {
     pub confirm_exit: bool,
     pub running: bool,
     pub running_detail: Option<String>,
-    pub spinner_idx: usize,
     pub settings: TuiSettings,
     pub concurrency_override: Option<usize>,
     pub hostname: String,
@@ -56,6 +55,8 @@ pub struct TuiApp<'a> {
     stats_download_active: bool,
     input_scroll_x: usize,
     ui_mode: UiMode,
+    /// Set when /config changes a value; cleared when it is written to disk.
+    settings_dirty: bool,
 }
 
 impl<'a> TuiApp<'a> {
@@ -87,7 +88,6 @@ impl<'a> TuiApp<'a> {
             confirm_exit: false,
             running: false,
             running_detail: None,
-            spinner_idx: 0,
             settings: TuiSettings::default(),
             concurrency_override: None,
             hostname,
@@ -101,6 +101,7 @@ impl<'a> TuiApp<'a> {
             stats_download_active: false,
             input_scroll_x: 0,
             ui_mode: UiMode::Normal,
+            settings_dirty: false,
         }
     }
 
diff --git a/apps/netscli-cli/src/tui/state/render.rs b/apps/netscli-cli/src/tui/state/render.rs
index da9f0593..d442de2a 100644
--- a/apps/netscli-cli/src/tui/state/render.rs
+++ b/apps/netscli-cli/src/tui/state/render.rs
@@ -13,6 +13,7 @@ mod content;
 mod input;
 mod message;
 mod scrollbar;
+mod stats;
 
 impl<'a> TuiApp<'a> {
     pub fn draw<B: Backend>(&mut self, terminal: &mut Terminal<B>) -> Result<(), B::Error> {
diff --git a/apps/netscli-cli/src/tui/state/render/input.rs b/apps/netscli-cli/src/tui/state/render/input.rs
index 65d30dc5..7d2648fd 100644
--- a/apps/netscli-cli/src/tui/state/render/input.rs
+++ b/apps/netscli-cli/src/tui/state/render/input.rs
@@ -6,10 +6,9 @@ use super::super::super::widgets::{
     value_style,
 };
 use super::super::{TuiApp, INPUT_PLACEHOLDER};
-use crate::tui_settings::StatsUnit;
 use ratatui::{
     layout::{Alignment, Constraint, Direction, Layout, Rect},
-    style::{Color, Style},
+    style::Style,
     text::{Line, Span},
     widgets::{Block, BorderType, Borders, Padding, Paragraph, Wrap},
     Frame,
@@ -258,78 +257,4 @@ impl<'a> TuiApp<'a> {
             inner,
         );
     }
-
-    fn render_stats_lines(&mut self) -> (Line<'static>, Line<'static>) {
-        let stats = self.monitor.get_stats();
-        if stats.available {
-            self.stats_upload_mbps = stats.upload_mbps;
-            self.stats_download_mbps = stats.download_mbps;
-            self.stats_upload_active = stats.upload_active;
-            self.stats_download_active = stats.download_active;
-        } else {
-            self.stats_upload_mbps = 0.0;
-            self.stats_download_mbps = 0.0;
-            self.stats_upload_active = false;
-            self.stats_download_active = false;
-        }
-
-        let dot = " · ";
-        let unit: StatsUnit = self.settings.stats_unit;
-        let up = format!(
-            "{:.2}",
-            unit.scale_from_mbps(self.stats_upload_mbps).min(999.99)
-        );
-        let down = format!(
-            "{:.2}",
-            unit.scale_from_mbps(self.stats_download_mbps).min(999.99)
-        );
-        let unit_suffix = format!(" {}", unit.suffix());
-
-        let left = Line::from(vec![
-            Span::styled("host ", label_style()),
-            Span::styled(self.hostname.clone(), value_style()),
-            Span::styled(dot, label_style()),
-            Span::styled("ip ", label_style()),
-            Span::styled(
-                self.context_address
-                    .clone()
-                    .unwrap_or_else(|| "n/a".to_string()),
-                value_style(),
-            ),
-        ]);
-
-        let up_arrow_style = if self.stats_upload_active {
-            Style::default().fg(Color::Cyan)
-        } else {
-            label_style()
-        };
-        let down_arrow_style = if self.stats_download_active {
-            Style::default().fg(Color::Cyan)
-        } else {
-            label_style()
-        };
-        let number_style = value_style();
-
-        let right_spans = vec![
-            Span::styled("↑ ", up_arrow_style),
-            Span::styled(up, number_style),
-            Span::styled(unit_suffix.clone(), label_style()),
-            Span::styled(dot, label_style()),
-            Span::styled("↓ ", down_arrow_style),
-            Span::styled(down, number_style),
-            Span::styled(unit_suffix, label_style()),
-        ];
-
-        (left, Line::from(right_spans))
-    }
-
-    pub(super) fn spinner_frame(&mut self) -> &'static str {
-        if !self.running {
-            return " ";
-        }
-        let frames = ["-", "\\", "|", "/"];
-        let ch = frames[self.spinner_idx % frames.len()];
-        self.spinner_idx = (self.spinner_idx + 1) % frames.len();
-        ch
-    }
 }
diff --git a/apps/netscli-cli/src/tui/state/render/stats.rs b/apps/netscli-cli/src/tui/state/render/stats.rs
new file mode 100644
index 00000000..271ee83e
--- /dev/null
+++ b/apps/netscli-cli/src/tui/state/render/stats.rs
@@ -0,0 +1,109 @@
+//! Traffic-stats sampling and the stats line the input box renders under it.
+//!
+//! Split from `render/input.rs` to keep it under the maintainability cap; the
+//! gate's own note named splitting the mode renderers as the next step and
+//! this is the self-contained half.
+
+use super::super::super::widgets::{label_style, value_style};
+use super::super::TuiApp;
+use crate::tui_settings::StatsUnit;
+use ratatui::{
+    style::{Color, Style},
+    text::{Line, Span},
+};
+
+impl TuiApp<'_> {
+    /// Sample the traffic monitor and cache the result.
+    ///
+    /// This used to happen inside `render_stats_lines`, i.e. from the draw
+    /// path — and `get_stats` holds a mutex across a `Networks::refresh`
+    /// syscall (B-10). Drawing is synchronous, so the fix is not
+    /// `spawn_blocking` but moving the sample to the async event loop, which
+    /// can yield around it. The draw path now only reads cached numbers.
+    pub(in crate::tui) fn refresh_traffic_stats(&mut self) {
+        let stats = self.monitor.get_stats();
+        if stats.available {
+            self.stats_upload_mbps = stats.upload_mbps;
+            self.stats_download_mbps = stats.download_mbps;
+            self.stats_upload_active = stats.upload_active;
+            self.stats_download_active = stats.download_active;
+        } else {
+            self.stats_upload_mbps = 0.0;
+            self.stats_download_mbps = 0.0;
+            self.stats_upload_active = false;
+            self.stats_download_active = false;
+        }
+    }
+
+    pub(super) fn render_stats_lines(&mut self) -> (Line<'static>, Line<'static>) {
+        let dot = " · ";
+        let unit: StatsUnit = self.settings.stats_unit;
+        let up = format!(
+            "{:.2}",
+            unit.scale_from_mbps(self.stats_upload_mbps).min(999.99)
+        );
+        let down = format!(
+            "{:.2}",
+            unit.scale_from_mbps(self.stats_download_mbps).min(999.99)
+        );
+        let unit_suffix = format!(" {}", unit.suffix());
+
+        let left = Line::from(vec![
+            Span::styled("host ", label_style()),
+            Span::styled(self.hostname.clone(), value_style()),
+            Span::styled(dot, label_style()),
+            Span::styled("ip ", label_style()),
+            Span::styled(
+                self.context_address
+                    .clone()
+                    .unwrap_or_else(|| "n/a".to_string()),
+                value_style(),
+            ),
+        ]);
+
+        let up_arrow_style = if self.stats_upload_active {
+            Style::default().fg(Color::Cyan)
+        } else {
+            label_style()
+        };
+        let down_arrow_style = if self.stats_download_active {
+            Style::default().fg(Color::Cyan)
+        } else {
+            label_style()
+        };
+        let number_style = value_style();
+
+        let right_spans = vec![
+            Span::styled("↑ ", up_arrow_style),
+            Span::styled(up, number_style),
+            Span::styled(unit_suffix.clone(), label_style()),
+            Span::styled(dot, label_style()),
+            Span::styled("↓ ", down_arrow_style),
+            Span::styled(down, number_style),
+            Span::styled(unit_suffix, label_style()),
+        ];
+
+        (left, Line::from(right_spans))
+    }
+
+    /// Current spinner glyph, derived from wall time.
+    ///
+    /// This used to advance an index every time it was called — from the draw
+    /// path (B-36). That coupled the spinner's speed to the frame rate, so it
+    /// span faster on a busy redraw and stalled when nothing else forced a
+    /// frame, and it made rendering mutate state. Wall time gives a constant
+    /// rate regardless of how often the screen is drawn, and lets this take
+    /// `&self`.
+    pub(super) fn spinner_frame(&self) -> &'static str {
+        if !self.running {
+            return " ";
+        }
+        const FRAMES: [&str; 4] = ["-", "\\", "|", "/"];
+        const FRAME_MS: u128 = 120;
+        let ms = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .unwrap_or_default()
+            .as_millis();
+        FRAMES[((ms / FRAME_MS) as usize) % FRAMES.len()]
+    }
+}
diff --git a/apps/netscli-gui/src/components/results/DetailList.tsx b/apps/netscli-gui/src/components/results/DetailList.tsx
index e60af84b..18729a4d 100644
--- a/apps/netscli-gui/src/components/results/DetailList.tsx
+++ b/apps/netscli-gui/src/components/results/DetailList.tsx
@@ -1,8 +1,10 @@
 export function DetailList({ lines }: { lines: { label: string; value: string; muted?: boolean }[] }) {
   return (
     <div className="detail-list">
-      {lines.map((line) => (
-        <div className={`detail-line ${line.muted ? 'muted-line' : ''}`} key={`${line.label}-${line.value}`}>
+      {lines.map((line, index) => (
+        <div className={`detail-line ${line.muted ? 'muted-line' : ''}`} // Index-qualified: two identical TXT records produce the same
+          // label+value pair, and React silently drops the duplicate (C-12).
+          key={`${index}-${line.label}-${line.value}`}>
           <span>{line.label}</span>
           <code>{line.value}</code>
         </div>
diff --git a/apps/netscli-gui/src/components/results/OperationProgress.test.ts b/apps/netscli-gui/src/components/results/OperationProgress.test.ts
new file mode 100644
index 00000000..e73ba5a2
--- /dev/null
+++ b/apps/netscli-gui/src/components/results/OperationProgress.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+
+import { countList } from './OperationProgress';
+
+// C-16: the progress line reported "1 ports" for a full 1-1024 sweep, because
+// the count split on `,` only and never expanded a range.
+describe('port count in the progress line', () => {
+  it('counts comma-separated singles', () => {
+    expect(countList('22,80,443')).toBe(3);
+  });
+
+  it('expands a range instead of counting it as one', () => {
+    expect(countList('1-1024')).toBe(1024);
+    expect(countList('80-80')).toBe(1);
+  });
+
+  it('handles ranges mixed with singles', () => {
+    expect(countList('22,80-89,443')).toBe(12);
+  });
+
+  it('tolerates whitespace around a range', () => {
+    expect(countList('1 - 3')).toBe(3);
+  });
+
+  it('ignores a reversed range rather than going negative', () => {
+    // A negative contribution would make the total smaller than the singles
+    // beside it, which reads as nonsense in the UI.
+    expect(countList('100-1')).toBe(0);
+    expect(countList('22,100-1,443')).toBe(2);
+  });
+
+  it('returns 0 for empty or undefined input', () => {
+    expect(countList(undefined)).toBe(0);
+    expect(countList('')).toBe(0);
+    expect(countList('  ')).toBe(0);
+  });
+
+  it('counts a non-numeric token as one entry rather than dropping it', () => {
+    expect(countList('http')).toBe(1);
+  });
+});
diff --git a/apps/netscli-gui/src/components/results/OperationProgress.tsx b/apps/netscli-gui/src/components/results/OperationProgress.tsx
index fe9410a9..06ea7fb9 100644
--- a/apps/netscli-gui/src/components/results/OperationProgress.tsx
+++ b/apps/netscli-gui/src/components/results/OperationProgress.tsx
@@ -101,7 +101,25 @@ function operationDetail(tab: WorkspaceTab): string {
   }
 }
 
-function countList(value: string | undefined): number {
+/**
+ * Count the ports a spec expands to.
+ *
+ * Splitting on `,` alone counted `1-1024` as a single port, so the progress
+ * line read "1 ports" for a full sweep (C-16). Ranges now expand, and a
+ * reversed or malformed range contributes nothing rather than a negative.
+ */
+export function countList(value: string | undefined): number {
   if (!value) return 0;
-  return value.split(',').map((part) => part.trim()).filter(Boolean).length;
+  return value
+    .split(',')
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .reduce((total, part) => {
+      const range = part.match(/^(\d+)\s*-\s*(\d+)$/);
+      if (!range) return total + 1;
+      const start = Number(range[1]);
+      const end = Number(range[2]);
+      if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return total;
+      return total + (end - start + 1);
+    }, 0);
 }
diff --git a/apps/netscli-gui/src/components/results/resultTableInteractions.ts b/apps/netscli-gui/src/components/results/resultTableInteractions.ts
index f21ad921..dd2f4726 100644
--- a/apps/netscli-gui/src/components/results/resultTableInteractions.ts
+++ b/apps/netscli-gui/src/components/results/resultTableInteractions.ts
@@ -52,27 +52,36 @@ export function handleColumnResizeKeyDown(
   setColumnWidths: Dispatch<SetStateAction<Record<string, number>>>,
 ) {
   const step = event.shiftKey ? 48 : 16;
-  let nextWidth: number | null = null;
-
+  const MIN = 72;
+  const MAX = 640;
+
+  // Each case returns the next width given the *current* one. It used to read
+  // `column.width` -- the static column definition, not the live resized
+  // value -- so every keypress recomputed from the same base and holding an
+  // arrow key moved the border exactly one step and then stopped (M-2).
+  let nextFrom: ((current: number) => number) | null = null;
   switch (event.key) {
     case 'ArrowLeft':
-      nextWidth = Math.max(72, (column.width ?? 120) - step);
+      nextFrom = (current) => Math.max(MIN, current - step);
       break;
     case 'ArrowRight':
-      nextWidth = Math.min(640, (column.width ?? 120) + step);
+      nextFrom = (current) => Math.min(MAX, current + step);
       break;
     case 'Home':
-      nextWidth = 72;
+      nextFrom = () => MIN;
       break;
     case 'End':
-      nextWidth = 640;
+      nextFrom = () => MAX;
       break;
     default:
       return;
   }
 
   event.preventDefault();
-  setColumnWidths((prev) => ({ ...prev, [column.key]: nextWidth }));
+  setColumnWidths((prev) => {
+    const current = prev[column.key] ?? column.width ?? 120;
+    return { ...prev, [column.key]: nextFrom(current) };
+  });
 }
 
 export function startColumnResize(
diff --git a/apps/netscli-gui/src/components/shell/MenuBar.tsx b/apps/netscli-gui/src/components/shell/MenuBar.tsx
index 1c0f5098..82bf96e1 100644
--- a/apps/netscli-gui/src/components/shell/MenuBar.tsx
+++ b/apps/netscli-gui/src/components/shell/MenuBar.tsx
@@ -301,14 +301,15 @@ export function MenuBar({
   ];
 
   return (
-    <div className="menu-strip">
+    <div className="menu-strip" role="menubar" aria-label="Main menu">
       <NetsCliMenuMark />
       {groups.map((group) => (
-        <div className="menu-root" key={group.label}>
+        <div className="menu-root" key={group.label} role="none">
           <button
             aria-expanded={group.label !== 'Settings' ? openMenu === group.label : undefined}
             aria-haspopup={group.label !== 'Settings' ? 'menu' : undefined}
             className={`menu-button ${openMenu === group.label ? 'active' : ''}`}
+            role="menuitem"
             ref={openMenu === group.label ? activeButtonRef : undefined}
             onClick={(event) => {
               if (group.label === 'Settings') {
@@ -354,7 +355,7 @@ export function MenuBar({
               {group.sections.map((section, sectionIndex) => (
                 <div className="menu-popover-section" key={section.label ?? sectionIndex}>
                   {section.label && <span className="menu-popover-label">{section.label}</span>}
-                  {section.items.map((item) => (
+                  {section.items.map((item, itemIndex) => (
                     <button
                       className={[
                         'menu-popover-item',
@@ -362,7 +363,9 @@ export function MenuBar({
                         item.variant === 'danger' ? 'danger' : '',
                       ].filter(Boolean).join(' ')}
                       disabled={item.disabled}
-                      key={item.label}
+                      // Index-qualified: repeated history commands share a
+                      // label, and React drops the duplicate key (M-1).
+                      key={`${sectionIndex}-${itemIndex}-${item.label}`}
                       role="menuitem"
                       onClick={() => {
                         shouldRestoreFocusRef.current = false;
diff --git a/apps/netscli-gui/src/components/tools/NumberField.test.tsx b/apps/netscli-gui/src/components/tools/NumberField.test.tsx
new file mode 100644
index 00000000..0786a4ab
--- /dev/null
+++ b/apps/netscli-gui/src/components/tools/NumberField.test.tsx
@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+//
+// M-3: the field clamped on every keystroke, so in a field with `min: 10`
+// typing the "5" of "50" was rewritten to "10" before the "0" arrived — the
+// value simply could not be typed. Clearing the field was impossible too,
+// because '' normalised straight back to a number.
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { NumberField } from './NumberField';
+import type { ToolField, WorkspaceTab } from '../../tools/types';
+
+const field = {
+  key: 'count',
+  label: 'Count',
+  type: 'number',
+  min: 10,
+  max: 50,
+  step: 1,
+  placeholder: '4',
+} as unknown as ToolField;
+
+function setup(value = '') {
+  const onPatchForm = vi.fn();
+  const tab = { id: 'tab-1', kind: 'ping', form: { count: value } } as unknown as WorkspaceTab;
+  render(
+    <NumberField disabled={false} field={field} tab={tab} onPatchForm={onPatchForm} onRun={vi.fn()} />,
+  );
+  return { input: screen.getByLabelText('Count'), onPatchForm };
+}
+
+describe('NumberField editing', () => {
+  it('stores keystrokes verbatim instead of clamping them', () => {
+    const { input, onPatchForm } = setup();
+    // "5" is below min:10. It must survive, or "50" is untypeable.
+    fireEvent.change(input, { target: { value: '5' } });
+    expect(onPatchForm).toHaveBeenCalledWith('tab-1', 'count', '5');
+  });
+
+  it('lets the field be cleared', () => {
+    const { input, onPatchForm } = setup('20');
+    fireEvent.change(input, { target: { value: '' } });
+    expect(onPatchForm).toHaveBeenCalledWith('tab-1', 'count', '');
+  });
+
+  it('clamps on blur, not before', () => {
+    const { input, onPatchForm } = setup();
+    fireEvent.change(input, { target: { value: '99' } });
+    expect(onPatchForm).toHaveBeenLastCalledWith('tab-1', 'count', '99');
+
+    fireEvent.blur(input, { target: { value: '99' } });
+    expect(onPatchForm).toHaveBeenLastCalledWith('tab-1', 'count', '50');
+  });
+
+  it('clamps a below-minimum value up on blur', () => {
+    const { input, onPatchForm } = setup();
+    fireEvent.blur(input, { target: { value: '5' } });
+    expect(onPatchForm).toHaveBeenLastCalledWith('tab-1', 'count', '10');
+  });
+
+  // Rendered with the out-of-range value already in the form, because the
+  // input is controlled: `fireEvent.change` alone does not update its DOM
+  // value without a re-render, and Enter reads `currentTarget.value`.
+  it('clamps on Enter as well as blur', () => {
+    const { input, onPatchForm } = setup('99');
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onPatchForm).toHaveBeenLastCalledWith('tab-1', 'count', '50');
+  });
+
+  it('leaves a blurred empty field empty rather than inventing a number', () => {
+    const { input, onPatchForm } = setup('20');
+    fireEvent.blur(input, { target: { value: '' } });
+    expect(onPatchForm).toHaveBeenLastCalledWith('tab-1', 'count', '');
+  });
+});
diff --git a/apps/netscli-gui/src/components/tools/NumberField.tsx b/apps/netscli-gui/src/components/tools/NumberField.tsx
index 93bc9103..1fdf6349 100644
--- a/apps/netscli-gui/src/components/tools/NumberField.tsx
+++ b/apps/netscli-gui/src/components/tools/NumberField.tsx
@@ -17,10 +17,22 @@ export function NumberField({ disabled, field, tab, onPatchForm, onRun }: Number
   const max = field.max;
   const step = field.step ?? 1;
 
+  /**
+   * Clamp and normalise. Only on blur, Enter, or a stepper click.
+   *
+   * This used to run from `onChange` too, so every keystroke was clamped
+   * (M-3): in a field with `min: 10`, typing the "5" of "50" was rewritten to
+   * "10" before the "0" arrived, and the value could not be typed at all.
+   */
   function commit(raw: string) {
     onPatchForm(tab.id, field.key, normalizeNumberFieldValue(raw, field));
   }
 
+  /** Store exactly what was typed, so an in-progress value survives. */
+  function edit(raw: string) {
+    onPatchForm(tab.id, field.key, raw);
+  }
+
   function stepBy(delta: number) {
     const next = clampNumber((numericValue ?? numberFromFieldValue(field.placeholder, field) ?? min ?? 0) + delta * step, field);
     onPatchForm(tab.id, field.key, formatNumberFieldValue(next, field));
@@ -43,7 +55,7 @@ export function NumberField({ disabled, field, tab, onPatchForm, onRun }: Number
         value={value}
         placeholder={field.placeholder}
         onBlur={(event) => commit(event.currentTarget.value)}
-        onChange={(event) => commit(event.target.value)}
+        onChange={(event) => edit(event.target.value)}
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
             commit(event.currentTarget.value);
diff --git a/apps/netscli-gui/src/main.tsx b/apps/netscli-gui/src/main.tsx
index 8fba40ef..d7516f20 100644
--- a/apps/netscli-gui/src/main.tsx
+++ b/apps/netscli-gui/src/main.tsx
@@ -1,9 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './App.css'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+// The non-null assertion is the one place it is justified: index.html always
+// ships this element, and a missing root is a build error, not a runtime case
+// worth branching on. Throwing a clear message beats React's opaque failure.
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('#root is missing from index.html')
+
+ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
diff --git a/apps/netscli-gui/src/tools/presentation.test.ts b/apps/netscli-gui/src/tools/presentation.test.ts
index 08f9a291..ce03c144 100644
--- a/apps/netscli-gui/src/tools/presentation.test.ts
+++ b/apps/netscli-gui/src/tools/presentation.test.ts
@@ -13,6 +13,8 @@ import {
   filterAndSortRows,
   inspectOverviewLines,
   inspectPortsLines,
+  latencyOf,
+  latencyOfPort,
   portBannerLines,
   portHeaderLines,
   portRawPreview,
@@ -174,10 +176,26 @@ describe('result presentation', () => {
 
     const rows = buildRows(result);
     expect(rows.map((row) => row.data.status)).toEqual(['open', 'closed', 'filtered', 'error']);
-    expect(rows.map((row) => row.data.latency)).toEqual(['14 ms', '8 ms', 'timeout', '']);
+    // The `error` row reads '-' rather than ''. This assertion previously
+    // pinned the table's own formatter, which returned '' where the detail
+    // pane returned a reason for the same port -- the M-7 divergence. Both
+    // now come from one function, so a port with no measured latency always
+    // explains itself.
+    expect(rows.map((row) => row.data.latency)).toEqual(['14 ms', '8 ms', 'timeout', '-']);
     expect(rows[0]?.searchText).toContain('cloudflare');
   });
 
+  // M-7 regression: the table and detail pane must agree for every status.
+  it('reports the same latency text in the table and the detail pane', () => {
+    const statuses = ['open', 'closed', 'filtered', 'error'] as const;
+    for (const status of statuses) {
+      const port = portResult(80, status);
+      expect(latencyOf(port)).toBe(latencyOfPort(port));
+    }
+    // A closed port used to be blank in the table and 'refused' in details.
+    expect(latencyOf(portResult(22, 'closed'))).toBe('refused');
+  });
+
   it('normalizes inspect rows from all scanned ports, not only open ports', () => {
     const rows = buildRows({
       kind: 'inspect',
diff --git a/apps/netscli-gui/src/tools/presentation.ts b/apps/netscli-gui/src/tools/presentation.ts
index f47e0595..a6aadb3d 100644
--- a/apps/netscli-gui/src/tools/presentation.ts
+++ b/apps/netscli-gui/src/tools/presentation.ts
@@ -12,6 +12,8 @@ export { portBannerLines, portHeaderLines, portRawPreview, portTlsLines } from '
 export { detailLinesForRow } from './presentation/rowDetails';
 export { filterHintsFor, type FilterHints, type FilterSectionConfig } from './presentation/filterHints';
 export { latencyOf, statusOf } from './presentation/ports';
+// Same function, kept under both names while call sites read naturally (M-7).
+export { latencyOfPort } from './presentation/portDetails';
 export { buildRows } from './presentation/rows';
 export { resultSummary } from './presentation/summaries';
 export { filterAndSortRows, serializeRowsAsCsv } from './presentation/table';
diff --git a/apps/netscli-gui/src/tools/presentation/portDetails.ts b/apps/netscli-gui/src/tools/presentation/portDetails.ts
index 3ceeebba..e7fb8a1e 100644
--- a/apps/netscli-gui/src/tools/presentation/portDetails.ts
+++ b/apps/netscli-gui/src/tools/presentation/portDetails.ts
@@ -1,5 +1,6 @@
-import type { PortResult, PortStatus } from '../../types/netscli';
+import type { PortResult } from '../../types/netscli';
 import type { DetailLine } from './detailLine';
+import { latencyOf } from './ports';
 
 export function portBannerLines(port: PortResult, latency: string): DetailLine[] {
   return [
@@ -14,7 +15,7 @@ export function portBannerLines(port: PortResult, latency: string): DetailLine[]
       muted: !port.banner?.trim(),
     },
     { label: 'Service', value: port.service || inferredProtocolLabel(port) },
-    { label: 'Latency', value: latency || statusLatencyLabel(port.status) },
+    { label: 'Latency', value: latency || latencyOf(port) },
     { label: 'Error', value: port.error || '-' },
   ];
 }
@@ -102,16 +103,9 @@ function inferredProtocolLabel(port: PortResult): string {
   return 'tcp';
 }
 
-function statusLatencyLabel(status: PortStatus): string {
-  if (status === 'filtered') return 'timeout';
-  if (status === 'closed') return 'refused';
-  return '-';
-}
-
-export function latencyOfPort(port: PortResult): string {
-  if (typeof port.latency_ms === 'number') return `${port.latency_ms} ms`;
-  return statusLatencyLabel(port.status);
-}
+// Kept as a named re-export so the detail modules read naturally, but the
+// logic lives in one place now (M-7).
+export { latencyOf as latencyOfPort };
 
 export function portStatusMeaning(port: PortResult): string {
   switch (port.status) {
diff --git a/apps/netscli-gui/src/tools/presentation/ports.ts b/apps/netscli-gui/src/tools/presentation/ports.ts
index e933f22b..77d31a1d 100644
--- a/apps/netscli-gui/src/tools/presentation/ports.ts
+++ b/apps/netscli-gui/src/tools/presentation/ports.ts
@@ -4,7 +4,23 @@ export function statusOf(port: PortResult): string {
   return port.status ?? (port.open ? 'open' : 'closed');
 }
 
+/**
+ * How a port's latency cell reads, everywhere.
+ *
+ * The table and the detail pane used to disagree (M-7): this returned `''`
+ * for a closed port while `latencyOfPort` returned `refused`, so the same
+ * scan showed a blank cell in one place and a reason in the other -- and both
+ * were used inside the detail pane itself. `latencyOfPort` now delegates
+ * here, so there is one answer.
+ */
 export function latencyOf(port: PortResult): string {
   if (port.latency_ms != null) return `${port.latency_ms} ms`;
-  return statusOf(port) === 'filtered' ? 'timeout' : '';
+  switch (statusOf(port)) {
+    case 'filtered':
+      return 'timeout';
+    case 'closed':
+      return 'refused';
+    default:
+      return '-';
+  }
 }

From e8ab5a1e3f568d730a8672beae7b6e2f2be0fdc5 Mon Sep 17 00:00:00 2001
From: Felix Stubner <felix.stubner@gmail.com>
Date: Sat, 15 Aug 2026 03:46:49 +0100
Subject: [PATCH 2/2] Repair the e2e harness so its results mean something

B-28: exerciseDns resolved netscli.com against real public DNS with a 25s
budget, while every other scenario is hermetic against the local probe
server -- so the suite failed on an air-gapped runner or a slow resolver
for reasons that had nothing to do with the app. It now uses `localhost`,
which resolves through the system resolver without leaving the host and
has both A and AAAA records, so the record-type assertions still exercise
what they were written for. NETSCLI_E2E_DNS_HOST overrides it.

M-13: teardown called child.kill(), which signals only the direct child.
The processes here are supervisors -- tauri-driver spawns the platform
WebDriver, which spawns the browser -- so grandchildren survived, kept
holding their ports, and the next run failed to bind or attached to a
stale session; on CI the job hung until its timeout. Now kills the tree:
taskkill /T on Windows, and the process group elsewhere, with tauri-driver
spawned detached so it leads one.

M-14: roughly a third of assertions pinned pixel measurements, some to
within 3px. Those catch real layout regressions but at that precision they
also fail for reasons that are not bugs -- font rendering, fractional DPI,
platform scrollbar width, a Chrome subpixel-rounding change. A suite that
cries wolf gets muted, and a muted suite catches nothing. Alignment checks
now pass within tolerance, warn and record beyond it, and fail only on
gross misalignment (4x tolerance, i.e. visibly broken). Drift is summarised
at the end of the run so the warnings do not scroll past.

Deliberately kept strict: a non-numeric or non-finite delta still fails
hard, since that means the measurement itself broke -- exactly the
"check that cannot fail" shape this is meant to avoid.

M-16: assertOperationToastReturnsToTab did `inactiveTab?.click()`. With no
inactive tab the optional chain silently did nothing, and the final
assertion then passed trivially because the expected tab had never been
left. It now asserts a second tab exists first.

Checked shell.mjs's `if (!mark) return null` -- that one is already caught
by an assert.ok on the result, so it is not a silent skip.
---
 apps/netscli-gui/e2e/tauri-render.mjs         | 11 ++++
 apps/netscli-gui/e2e/tauri-render/driver.mjs  |  5 ++
 .../e2e/tauri-render/processes.mjs            | 38 +++++++++++-
 .../scenarios/helpers/alignment.mjs           | 61 +++++++++++++++++++
 .../scenarios/helpers/interaction.mjs         | 17 +++++-
 .../tauri-render/scenarios/helpers/polish.mjs |  3 +-
 .../tauri-render/scenarios/helpers/tabs.mjs   | 12 ++--
 .../e2e/tauri-render/scenarios/tools.mjs      | 25 ++++++--
 8 files changed, 154 insertions(+), 18 deletions(-)
 create mode 100644 apps/netscli-gui/e2e/tauri-render/scenarios/helpers/alignment.mjs

diff --git a/apps/netscli-gui/e2e/tauri-render.mjs b/apps/netscli-gui/e2e/tauri-render.mjs
index 7b8ed4dc..25267be9 100644
--- a/apps/netscli-gui/e2e/tauri-render.mjs
+++ b/apps/netscli-gui/e2e/tauri-render.mjs
@@ -21,6 +21,7 @@ import {
   exerciseScan,
   exerciseSweep,
 } from './tauri-render/scenarios.mjs';
+import { alignmentReport } from './tauri-render/scenarios/helpers/alignment.mjs';
 
 const DESKTOP_WINDOW = { x: 0, y: 0, width: 1000, height: 970 };
 const NARROW_WINDOW = { width: 520, height: 720 };
@@ -163,6 +164,16 @@ main()
     process.exitCode = 1;
   })
   .finally(async () => {
+    // Alignment drift does not fail the run (M-14), so it has to be
+    // summarised here or the warnings scroll past mid-run and are never seen.
+    const drifts = alignmentReport();
+    if (drifts.length > 0) {
+      console.warn(`
+${drifts.length} alignment drift(s) within tolerance of failing:`);
+      for (const d of drifts) {
+        console.warn(`  - ${d.label}: ${d.delta.toFixed(1)}px (tolerance ${d.tolerance}px)`);
+      }
+    }
     await closeServer(probeServer).catch(() => undefined);
     stopProcess(tauriDriverProcess);
   });
diff --git a/apps/netscli-gui/e2e/tauri-render/driver.mjs b/apps/netscli-gui/e2e/tauri-render/driver.mjs
index 460fb593..e5ca5ee3 100644
--- a/apps/netscli-gui/e2e/tauri-render/driver.mjs
+++ b/apps/netscli-gui/e2e/tauri-render/driver.mjs
@@ -42,6 +42,11 @@ export async function startTauriDriver(nativeDriverPath, webdriverPort) {
     cwd: guiRoot,
     stdio: ['ignore', 'pipe', 'pipe'],
     shell: false,
+    // Its own process group, so `stopProcess` can signal the whole tree.
+    // tauri-driver spawns the platform WebDriver, which spawns the browser;
+    // without this those grandchildren outlive the run and hold their ports
+    // (M-13). No-op on Windows, which uses taskkill /T instead.
+    detached: process.platform !== 'win32',
   });
 
   child.stdout.on('data', (chunk) => {
diff --git a/apps/netscli-gui/e2e/tauri-render/processes.mjs b/apps/netscli-gui/e2e/tauri-render/processes.mjs
index 252dc744..c0258c6f 100644
--- a/apps/netscli-gui/e2e/tauri-render/processes.mjs
+++ b/apps/netscli-gui/e2e/tauri-render/processes.mjs
@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { spawn } from 'node:child_process';
+import { spawn, spawnSync } from 'node:child_process';
 import net from 'node:net';
 
 import { guiRoot, npmBin } from './paths.mjs';
@@ -67,8 +67,42 @@ export function waitForPort(port, timeoutMs = 20_000) {
   });
 }
 
+/**
+ * Kill a spawned process *and everything it spawned*.
+ *
+ * `child.kill()` alone signals only the direct child (M-13). The processes
+ * this suite starts are supervisors — `tauri-driver` spawns the platform
+ * WebDriver, which spawns the browser — so the grandchildren survived, kept
+ * holding their ports, and the next run failed to bind or attached to a stale
+ * session. On CI the job simply hung until its timeout.
+ *
+ * Windows has no process groups, so `taskkill /T` is the only way to walk the
+ * tree; elsewhere, killing the negated pid signals the whole group, which is
+ * why callers spawn detached.
+ */
 export function stopProcess(child) {
-  if (child && !child.killed) {
+  if (!child || child.killed || child.pid === undefined) return;
+
+  if (process.platform === 'win32') {
+    try {
+      spawnSync('taskkill', ['/pid', String(child.pid), '/T', '/F'], { stdio: 'ignore' });
+      return;
+    } catch {
+      // Fall through to the plain kill below.
+    }
+  } else {
+    try {
+      // Negative pid = process group. Requires the child to be detached.
+      process.kill(-child.pid, 'SIGTERM');
+      return;
+    } catch {
+      // Not a group leader, or already gone.
+    }
+  }
+
+  try {
     child.kill();
+  } catch {
+    // Already exited.
   }
 }
diff --git a/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/alignment.mjs b/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/alignment.mjs
new file mode 100644
index 00000000..6a8cec2a
--- /dev/null
+++ b/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/alignment.mjs
@@ -0,0 +1,61 @@
+import assert from 'node:assert/strict';
+
+/**
+ * Alignment checks that report drift without making the suite hostage to it.
+ *
+ * Roughly a third of this suite's assertions pinned pixel measurements with
+ * tolerances as tight as 3px (M-14). Those are real signals — a control
+ * drifting out of its row is a genuine regression — but at that precision
+ * they also fail for reasons that are not bugs: a different font rendering,
+ * a fractional device pixel ratio, a platform scrollbar width, a Chrome
+ * release changing subpixel rounding. A suite that cries wolf gets muted, and
+ * a muted suite catches nothing.
+ *
+ * So: drift inside `tolerance` passes silently, drift beyond it is *reported*
+ * and collected, and only gross misalignment — `grossFactor` times the
+ * tolerance, i.e. something visibly broken rather than a rounding difference
+ * — fails the run.
+ *
+ * Call `alignmentReport()` at the end of a run to surface everything that
+ * drifted, so the warnings stay visible instead of scrolling past.
+ */
+
+const drifts = [];
+const DEFAULT_GROSS_FACTOR = 4;
+
+export function assertAlignment(label, delta, tolerance, options = {}) {
+  const grossFactor = options.grossFactor ?? DEFAULT_GROSS_FACTOR;
+  const gross = tolerance * grossFactor;
+
+  assert.equal(
+    typeof delta,
+    'number',
+    `${label}: expected a numeric delta, got ${JSON.stringify(delta)}`,
+  );
+  assert.ok(Number.isFinite(delta), `${label}: delta was not finite (${delta})`);
+
+  if (delta <= tolerance) return;
+
+  if (delta > gross) {
+    throw new assert.AssertionError({
+      message:
+        `${label}: ${delta.toFixed(1)}px off, which is beyond ${gross}px and reads as ` +
+        `visibly misaligned rather than a rendering difference (tolerance ${tolerance}px).`,
+    });
+  }
+
+  drifts.push({ label, delta, tolerance });
+  console.warn(
+    `  ~ alignment drift: ${label} is ${delta.toFixed(1)}px off (tolerance ${tolerance}px). ` +
+      'Not failing — under the gross-misalignment threshold.',
+  );
+}
+
+/** Everything that drifted this run, for an end-of-run summary. */
+export function alignmentReport() {
+  return drifts.slice();
+}
+
+export function resetAlignmentReport() {
+  drifts.length = 0;
+}
diff --git a/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/interaction.mjs b/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/interaction.mjs
index aab2bbce..c08810e4 100644
--- a/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/interaction.mjs
+++ b/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/interaction.mjs
@@ -2,6 +2,7 @@ import assert from 'node:assert/strict';
 import { By } from '../../driver.mjs';
 import { clickButtonText, waitForText } from '../../ui.mjs';
 import { getActiveTabText, waitForNoElement } from './menu.mjs';
+import { assertAlignment } from './alignment.mjs';
 
 async function assertCommandStatusAlignment(driver) {
   await waitForText(driver, '[data-testid="statusbar"] .status-left', /Mbps/i, 6_000);
@@ -37,7 +38,7 @@ async function assertCommandStatusAlignment(driver) {
   assert.equal(state.dotMarginTop, '1px', 'Status dot should sit 1px lower to align with footer text');
   assert.match(state.leftText, /Mbps/i, 'Traffic rates should be grouped with the selected interface on the left');
   assert.doesNotMatch(state.rightText, /v\d+\./i, 'Footer should not duplicate the About version');
-  assert.ok(state.rightDelta <= 3, `Command copy icon should align to status padding, got ${state.rightDelta}px`);
+  assertAlignment('Command copy icon vs status padding', state.rightDelta, 3);
 }
 
 async function assertThemedTooltips(driver) {
@@ -216,10 +217,20 @@ async function dismissDnsWarningIfPresent(driver) {
 }
 
 async function assertOperationToastReturnsToTab(driver, expectedTabText) {
-  await driver.executeScript(`
+  // The whole point is "switch away, then click the toast to come back", so
+  // switching away has to actually happen. `inactiveTab?.click()` swallowed
+  // the case where no inactive tab existed, and the final assertion then
+  // passed trivially because the expected tab had never been left (M-16).
+  const switchedAway = await driver.executeScript(`
     const inactiveTab = document.querySelector('[data-testid="tab-strip"] .work-tab:not(.active)');
-    inactiveTab?.click();
+    if (!inactiveTab) return false;
+    inactiveTab.click();
+    return true;
   `);
+  assert.ok(
+    switchedAway,
+    'Expected a second tab to switch away from; without one this scenario cannot fail',
+  );
   await waitForText(driver, '[data-testid="toast"]', /complete/i, 25_000);
   await waitForText(driver, '[data-testid="toast"] .toast-action', /Open tab/i);
   await driver.findElement(By.css('[data-testid="toast"]')).click();
diff --git a/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/polish.mjs b/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/polish.mjs
index 64adb4f2..23448ed4 100644
--- a/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/polish.mjs
+++ b/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/polish.mjs
@@ -1,5 +1,6 @@
 import assert from 'node:assert/strict';
 import { By } from '../../driver.mjs';
+import { assertAlignment } from './alignment.mjs';
 
 async function assertEmptyStateCentered(driver) {
   const state = await driver.executeScript(`
@@ -13,7 +14,7 @@ async function assertEmptyStateCentered(driver) {
     return { deltaX: Math.abs(regionCenterX - emptyCenterX) };
   `);
   assert.ok(state, 'Empty state should render');
-  assert.ok(state.deltaX <= 2, `Empty state should be centered horizontally, got ${state.deltaX}px`);
+  assertAlignment('Empty state horizontal centering', state.deltaX, 2);
 }
 
 async function forceTabOverflow(driver) {
diff --git a/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/tabs.mjs b/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/tabs.mjs
index 08f4dd3e..77c5e161 100644
--- a/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/tabs.mjs
+++ b/apps/netscli-gui/e2e/tauri-render/scenarios/helpers/tabs.mjs
@@ -1,6 +1,7 @@
 import assert from 'node:assert/strict';
 import { By } from '../../driver.mjs';
 import { getActiveTabText } from './menu.mjs';
+import { assertAlignment } from './alignment.mjs';
 
 async function assertActiveTabVisible(driver) {
   const visibility = await driver.executeScript(`
@@ -97,7 +98,7 @@ async function assertDetailPaneCanFillWorkspace(driver) {
   assert.match(state.detailClass, /expanded/, 'Detail pane should enter expanded mode');
   assert.equal(state.formDisplay, 'none', 'Expanded details should hide the form row');
   assert.equal(state.resultDisplay, 'none', 'Expanded details should hide the result region');
-  assert.ok(state.topDelta <= 1, `Expanded details should start at workspace top, got ${state.topDelta}px`);
+  assertAlignment('Expanded details vs workspace top', state.topDelta, 1);
   assert.ok(state.heightRatio > 0.85, `Expanded details should fill the workspace, got ratio ${state.heightRatio}`);
   await driver.findElement(By.css('.detail-actions button:first-child')).click();
 }
@@ -136,13 +137,10 @@ async function assertTabAddControlPlacement(driver) {
   assert.match(state.addShadow, /inset/, 'Tab add control should keep a bottom edge');
   assert.equal(state.stripUserSelect, 'none', 'Tab strip should not select text during drag gestures');
   assert.equal(state.addUserSelect, 'none', 'Tab add control should not select text during drag gestures');
-  assert.ok(state.mainCenterDelta <= 1, `New tab button should be vertically centered, got ${state.mainCenterDelta}px`);
-  assert.ok(
-    state.chevronCenterDelta <= 1,
-    `Tool chooser button should be vertically centered, got ${state.chevronCenterDelta}px`,
-  );
+  assertAlignment('New tab button vertical centering', state.mainCenterDelta, 1);
+  assertAlignment('Tool chevron vertical centering', state.chevronCenterDelta, 1);
   if (state.overflows) {
-    assert.ok(state.rightDelta <= 2, `Overflowing tab add control should pin to the right edge, got ${state.rightDelta}px`);
+    assertAlignment('Overflowing tab add control vs right edge', state.rightDelta, 2);
     assert.equal(state.scrollBeforeAdd, true, 'Tab overflow should end before the pinned add control');
     return;
   }
diff --git a/apps/netscli-gui/e2e/tauri-render/scenarios/tools.mjs b/apps/netscli-gui/e2e/tauri-render/scenarios/tools.mjs
index 2aec09ee..4bf8ec5e 100644
--- a/apps/netscli-gui/e2e/tauri-render/scenarios/tools.mjs
+++ b/apps/netscli-gui/e2e/tauri-render/scenarios/tools.mjs
@@ -6,11 +6,22 @@ import { waitForNoElement } from './helpers/menu.mjs';
 import { assertKeyboardSelection } from './helpers/table.mjs';
 import { assertFieldSelectPopoverVisible, assertFilterPlaceholder } from './helpers/tabs.mjs';
 
+// Every other scenario here is hermetic against the local probe server; this
+// one used to resolve `netscli.com` against real public DNS with a 25s budget
+// (B-28), so the suite failed on an air-gapped runner or a slow resolver for
+// reasons that had nothing to do with the app.
+//
+// `localhost` resolves through the system resolver without leaving the host
+// and has both A (127.0.0.1) and AAAA (::1) records, so the record-type
+// assertions below still exercise what they were written for. Override with
+// NETSCLI_E2E_DNS_HOST to point at a real name deliberately.
+const DNS_HOST = process.env.NETSCLI_E2E_DNS_HOST || 'localhost';
+
 export async function exerciseDns(driver) {
   await addToolTab(driver, 'DNS Lookup');
   await withElement(driver, '[data-testid="dns-host-input"]');
-  await replaceInput(driver, '[data-testid="dns-host-input"]', 'netscli.com');
-  await assertCommand(driver, /netscli dns netscli\.com --json/);
+  await replaceInput(driver, '[data-testid="dns-host-input"]', DNS_HOST);
+  await assertCommand(driver, new RegExp(`netscli dns ${escapeRe(DNS_HOST)} --json`));
   await runActiveTool(driver);
   await waitForText(driver, '[data-testid="statusbar"]', /\d+ records?/i, 25_000);
   await waitForRow(driver, '[data-testid="result-row-dns-0"]', 25_000);
@@ -26,12 +37,12 @@ export async function exerciseDns(driver) {
   await driver.findElement(By.css('.workspace')).click();
   await waitForNoElement(driver, '[data-testid="advanced-filter-menu"]');
   await dismissDnsWarningIfPresent(driver);
-  await replaceInput(driver, '[data-testid="dns-host-input"]', 'example.com');
+  await replaceInput(driver, '[data-testid="dns-host-input"]', DNS_HOST);
   await driver.findElement(By.css('[data-testid="dns-record-input"]')).click();
   await waitForText(driver, '.field-select-popover', /AAAA/i);
   await assertFieldSelectPopoverVisible(driver);
   await clickButtonText(driver, '.field-select-popover button', 'AAAA');
-  await assertCommand(driver, /netscli dns example\.com --record AAAA --json/);
+  await assertCommand(driver, new RegExp(`netscli dns ${escapeRe(DNS_HOST)} --record AAAA --json`));
   await assertNoErrorStrip(driver);
 }
 
@@ -130,4 +141,8 @@ export async function exercisePcapValidation(driver) {
   return true;
 }
 
-
+// `localhost` needs no escaping, but NETSCLI_E2E_DNS_HOST may be a real
+// domain whose dots would otherwise match any character in the assertion.
+function escapeRe(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}