Update VPN client connection flow

test/web/responsive-layout-contract.test.js

@@ -6,6 +6,7 @@ import test from 'node:test';
 const root = path.resolve(import.meta.dirname, '../..');
 const styles = fs.readFileSync(path.join(root, 'src/web/styles.css'), 'utf8');
 const component = fs.readFileSync(path.join(root, 'src/web/components/ClientOverviewPage.jsx'), 'utf8');
+const diagnostics = fs.readFileSync(path.join(root, 'src/web/components/ConnectivityDiagnosticsPanel.jsx'), 'utf8');
 
 function rule(selector, source = styles) {
   const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -110,6 +111,17 @@ test('secondary menus share one right rail and both drawers open from the right'
   assert.match(component, /className={`client-drawer client-local-rules/);
 });
 
+test('connectivity diagnostics render stable compact tables before the first run', () => {
+  assert.match(diagnostics, /CONNECTIVITY_IP_SOURCES\.map/);
+  assert.match(diagnostics, /const sites = \[\.\.\.CONNECTIVITY_SITES, \.\.\.customServices\]/);
+  assert.equal((diagnostics.match(/<table className="client-diagnostics-table"/g) || []).length, 2);
+  assert.match(diagnostics, /Добавить свой сервис/);
+  assert.match(diagnostics, /client-diagnostics-refresh/);
+  assert.doesNotMatch(diagnostics, /Проверить ещё раз|client-diagnostics-empty|client-diagnostics-run/);
+  assert.match(rule('.client-diagnostics-feedback'), /min-height:\s*34px/);
+  assert.match(rule('.client-diagnostics-table'), /table-layout:\s*fixed/);
+});
+
 test('duration and Gateway access keep stable geometry without tabs', () => {
   assert.match(rule('.client-state-detail'), /min-height:\s*44px/);
   assert.match(rule('.client-duration-toggle'), /min-height:\s*44px/);