Add DNS diagnostics across dataplane and client

test/web/diagnostics-feature-contract.test.js

@@ -12,6 +12,7 @@ const panel = fs.readFileSync(path.join(root, 'src/web/features/diagnostics/Conn
 const model = fs.readFileSync(path.join(root, 'src/web/features/diagnostics/connectivityResult.ts'), 'utf8');
 const customServiceAction = fs.readFileSync(path.join(root, 'src/web/features/diagnostics/customServiceAction.ts'), 'utf8');
 const boundary = fs.readFileSync(path.join(root, 'src/web/features/diagnostics/index.ts'), 'utf8');
+const dns = fs.readFileSync(path.join(root, 'src/web/features/diagnostics/DnsDiagnosticsSection.tsx'), 'utf8');
 
 const ip = { source: 'cloudflare', address: '198.51.100.10', extra: true };
 const site = { id: 'google', status: 'available', httpStatus: 204, latencyMs: 120 };
@@ -122,3 +123,19 @@ test('network identity is one stable compact row for Direct and VPN', () => {
   assert.match(panel, /else if \(path\.network == null\) status = \['is-muted', '—'\][\s\S]*if \(!status && !identity && !location\) status = \['is-error', 'Нет ответа'\]/);
   assert.doesNotMatch(panel, /traceroute|tracepath/);
 });
+
+test('DNS diagnostics reuse the drawer owner, canonical settings and independent row refresh', () => {
+  assert.match(panel, /<DnsDiagnosticsSection[\s\S]*settings=\{settings\}[\s\S]*updateSettings=\{updateSettings\}/);
+  assert.match(panel, /<DnsDiagnosticsSection[\s\S]*loadCatalog=\{loadDnsDiagnosticsCatalog\}[\s\S]*runDiagnostics=\{runDnsDiagnostics\}/);
+  assert.match(dns, /<select[\s\S]*id="client-dns-domain"[\s\S]*value=\{activeDomainId\}/);
+  assert.match(dns, /setCache\(\(current\)[\s\S]*mergeRow\(previous\[row\.resolver\.id\], row\)/);
+  assert.match(dns, /function preserveAddresses[\s\S]*ipv4: previous\.ipv4, ipv6: previous\.ipv6/);
+  assert.match(dns, /aria-busy=\{running\}/);
+  assert.match(dns, /<Refresh label=\{`Проверить: \$\{item\.label\}`\}[\s\S]*onClick=\{\(\) => void run\(item\.id\)\}/);
+  assert.match(dns, /updateSettings\([\s\S]*customDnsDomains/);
+  assert.match(dns, /updateSettings\([\s\S]*customDnsResolvers/);
+  assert.match(dns, /settings\.customDnsDomains\.length >= MAX_CUSTOM_DNS_DOMAINS/);
+  assert.match(dns, /settings\.customDnsResolvers\.length >= MAX_CUSTOM_DNS_RESOLVERS/);
+  assert.match(dns, /<b>A<\/b>[\s\S]*<b>AAAA<\/b>/);
+  assert.match(dns, /Разные ответы могут быть нормой для CDN/);
+});

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

@@ -15,6 +15,7 @@ const routing = fs.readFileSync(path.join(root, 'src/web/features/routing/Routin
 const devices = fs.readFileSync(path.join(root, 'src/web/features/devices/DevicesFeature.tsx'), 'utf8');
 const diagnosticsFeature = fs.readFileSync(path.join(root, 'src/web/features/diagnostics/DiagnosticsFeature.tsx'), 'utf8');
 const diagnostics = fs.readFileSync(path.join(root, 'src/web/features/diagnostics/ConnectivityDiagnosticsPanel.tsx'), 'utf8');
+const dnsDiagnostics = fs.readFileSync(path.join(root, 'src/web/features/diagnostics/DnsDiagnosticsSection.tsx'), 'utf8');
 const instructions = fs.readFileSync(path.join(root, 'src/web/features/instructions/InstructionsFeature.tsx'), 'utf8');
 
 function rule(selector, source = styles) {
@@ -264,6 +265,15 @@ test('responsive motion has a reduced-motion fallback', () => {
   assert.doesNotMatch(styles, /\.client-rail-action:active:not\(:disabled\) svg/);
 });
 
+test('DNS keeps three result columns while its add forms stack on narrow screens', () => {
+  assert.match(styles, /\.client-dns-row \{[\s\S]*min-height:\s*92px/);
+  assert.match(styles, /\.client-dns-result \{[\s\S]*min-height:\s*72px/);
+  assert.match(styles, /\.client-dns-header,\s*\.client-dns-row \{[\s\S]*grid-template-columns:\s*35% minmax\(0, 1fr\) minmax\(0, 1fr\) 28px/);
+  assert.match(styles, /@media \(max-width: 560px\)[\s\S]*\.client-dns-inline-form \{[\s\S]*grid-template-columns:\s*minmax\(0, 1fr\) 44px/);
+  assert.match(styles, /@media \(max-width: 560px\)[\s\S]*\.client-dns-row \{[\s\S]*grid-template-columns:\s*32% minmax\(0, 1fr\) minmax\(0, 1fr\) 44px/);
+  assert.match(dnsDiagnostics, /role="table" aria-busy=\{running\}/);
+});
+
 test('tooltips stay opaque, above adjacent content, and do not stick after pointer clicks', () => {
   const tooltip = rule('.client-tooltip');
 

test/web/style-boundaries.test.js

@@ -40,26 +40,26 @@ const expectedImports = [
 const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
 const acceptedLedger = {
   counts: {
-    cascadeEdges: 1163,
+    cascadeEdges: 1188,
     customProperties: 115,
-    declarations: 4746,
+    declarations: 4862,
     important: 0,
     keyframes: 55,
     media: 23,
-    rules: 1288,
-    variableReferences: 1237,
+    rules: 1329,
+    variableReferences: 1270,
   },
   hashes: {
-    cascadeEdges: 'c1b3eaa3d0ad08e3393cf90878f90e17a5401d79eed9072d06f39b7841d8bbfd',
+    cascadeEdges: '3d02c10ab8fd95f7eed306048e9b59ec391a0febaa9e3e235badcff3b042eef7',
     customProperties: '81d1e70737ae5a8e4b20d4c1be1b24685975a404863444da4a8821be1f0d5097',
-    declarations: 'e668191e548093c02463e57b81eb6c12b826991a5e10f5191d87b73e682cd852',
+    declarations: '0f31e2cdeeab02b9e0a845a6b50ff7e3f035a441217a418e7b5465b5a296ae16',
     duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
     duplicateSelectors: '8982145dba05b33bf1c93b2d54cfbe76305b276ff3c657aa020144016ada5848',
     keyframes: 'b9b0bf3fad92e69b93ec0c24f01da15e78bbe89a095597d64ce4f7ef5e272fdd',
-    ruleDeclarationSequences: '2cc97550fecd8bbf46217dc378cc490fd41d977abcdcc4c93a18c7593ba42f53',
-    selectors: 'c7f4752d81bbeb04612eb6c79a42bcde875c762d81591b2cdf2fb2bbd7399ea2',
-    variableReferences: '69c03c059f9ce107bc8be0397cff90e1b8b3749b8e37ba8e231e2d6cdcd61e46',
-    witnesses: '99713805eb7a5c67427ace32775f0cc503b3b2ac63240db717e71b36d09ddd68',
+    ruleDeclarationSequences: '33a0dff2428a8e712776d40d796ea05d169544eb1af02ad350759061fb2a3c3c',
+    selectors: '5734c69a504c59025e2e6b1637cfb6d1905ca1ae358783d0916a694a973eea22',
+    variableReferences: '49ad724b2812128f5344fdd55b177aa96ea9b30eb4d878dc86f2e4f3fa898182',
+    witnesses: '4e357ee4f7310d60399baa3099bd8f4ed320debc1e3c9a09f55b892a1178049c',
   },
 };
 
@@ -212,7 +212,7 @@ test('client typography uses the shared semantic scale outside the token owner',
 
 test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
   const witnesses = readStyleWitnesses(root);
-  assert.equal(witnesses.length, 1312);
+  assert.equal(witnesses.length, 1375);
   assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
   const ledger = createStyleLedger(readStyleSource(root), { witnesses });
   assert.deepEqual(ledger.counts, acceptedLedger.counts);
@@ -221,11 +221,7 @@ test('accepted stylesheet has pinned declaration, selector, keyframe, variable,
 
 test('every live production selector has an expanded DOM witness', () => {
   const unmatched = selectorsWithoutWitness(readStyleSource(root), readStyleWitnesses(root));
-  assert.deepEqual(unmatched, [
-    '.client-diagnostics-section-title button',
-    '.client-diagnostics-section-title button:disabled',
-    '.client-diagnostics-section-title button:focus-visible',
-  ]);
+  assert.deepEqual(unmatched, []);
 });
 
 test('JSX witness expansion follows cross-file components, render props, ReactNode slots, portals, and imperative classes', () => {
@@ -409,8 +405,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
   assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
 
   const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
-  assert.deepEqual(assets, ['index-BLRRtFYh.css']);
+  assert.deepEqual(assets, ['index-fllV-PfI.css']);
   const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 180634);
-  assert.equal(sha256(built), '6bf3cb9c724758de39567c606c939e6041edde82837f826e8d2d4e31ebd1d8a8');
+  assert.equal(built.byteLength, 184958);
+  assert.equal(sha256(built), '3a9ed6fdf6c5d81234de9aa0abd995bc9db1cfe298194162654edcbfe3ae7c62');
 });

test/web/ui-foundations-contract.test.js

@@ -32,7 +32,7 @@ test('all repeated client primitive consumers use the shared owners', () => {
     .map(({ source }) => source)
     .join('\n');
 
-  assert.equal((production.match(/<Tooltip\b/g) || []).length, 16);
+  assert.equal((production.match(/<Tooltip\b/g) || []).length, 17);
   assert.equal((production.match(/<CopyButton\b/g) || []).length, 2);
   assert.equal((production.match(/<RailAction\b/g) || []).length, 8);
   assert.equal((production.match(/<Drawer\b/g) || []).length, 8);