web-api: two-column layout — gateways left, IPs/routes/whois right

router/route-web-api.py

@@ -780,6 +780,9 @@ HTML_PAGE = """\
   .check-gw.block { background: #f8d7da; color: #721c24; }
   .check-gw.proxy { background: #d1d5db; color: #6b7280; }
   .check-gw.other { background: #fff3cd; color: #856404; }
+  .check-columns { display: flex; gap: 16px; margin-top: 8px; }
+  .check-col { flex: 1; min-width: 0; }
+  .check-col .check-section { margin-top: 0; }
   .check-section { margin-top: 8px; }
   .check-section-title { font-weight: 600; font-size: 0.85em; color: #666; margin-bottom: 4px; }
   .check-ips { font-family: monospace; font-size: 0.85em; color: #333; }
@@ -1109,7 +1112,13 @@ function renderCheck(data) {
   const container = $('check-gateways');
   container.textContent = '';
 
-  // 1. Gateways (IPv4 + IPv6) — first, only when checks data present (domain mode)
+  // Two-column row: left = gateways, right = whois
+  const cols = mkDiv('check-columns');
+  const colGw = mkDiv('check-col');
+  colGw.id = 'check-col-gw';
+  const colInfo = mkDiv('check-col');
+
+  // Left column: Gateways (domain mode only, file_url mode fills via SSE)
   if (data.checks && Object.keys(data.checks).length) {
     const thr = data.throttle || {};
     const spd = data.speed || {};
@@ -1143,38 +1152,32 @@ function renderCheck(data) {
       }
     }
     gsec.appendChild(gwrap);
-    container.appendChild(gsec);
 
-    // Throttle detection
+    // Throttle detection inline
     if (Object.keys(thr).length) {
-      const tsec = mkDiv('check-section');
       const slowGws = Object.entries(thr).filter(([,v]) => v.throttled);
       if (slowGws.length) {
-        tsec.appendChild(mkDiv('check-section-title', '\\u0417\\u0430\\u043c\\u0435\\u0434\\u043b\\u0435\\u043d\\u0438\\u0435 (\\u0422\\u0421\\u041f\\u0423)'));
+        gsec.appendChild(mkDiv('check-section-title', '\\u0417\\u0430\\u043c\\u0435\\u0434\\u043b\\u0435\\u043d\\u0438\\u0435 (\\u0422\\u0421\\u041f\\u0423)'));
         for (const [gw, info] of slowGws) {
           const msg = gw + ': ' + info.asset + ' \\u2014 ' + info.size + ' \\u0431\\u0430\\u0439\\u0442 \\u0437\\u0430 ' + info.time + '\\u0441';
           const el = mkDiv('check-route', msg);
           el.style.background = '#f8d7da';
           el.style.color = '#721c24';
-          tsec.appendChild(el);
+          gsec.appendChild(el);
         }
-      } else {
-        tsec.appendChild(mkDiv('check-section-title', '\\u0417\\u0430\\u043c\\u0435\\u0434\\u043b\\u0435\\u043d\\u0438\\u0435'));
-        tsec.appendChild(mkDiv('check-no-route', '\\u041d\\u0435 \\u043e\\u0431\\u043d\\u0430\\u0440\\u0443\\u0436\\u0435\\u043d\\u043e'));
       }
-      container.appendChild(tsec);
     }
+    colGw.appendChild(gsec);
   }
 
-  // 2. IPs
+  // Right column: IPs + routes + whois
   if (data.ips && data.ips.length) {
     const sec = mkDiv('check-section');
     sec.appendChild(mkDiv('check-section-title', 'IP-\\u0430\\u0434\\u0440\\u0435\\u0441\\u0430'));
     sec.appendChild(mkDiv('check-ips', data.ips.join(', ')));
-    container.appendChild(sec);
+    colInfo.appendChild(sec);
   }
 
-  // 3. Routes — group by group/list, one line per list
   const rsec = mkDiv('check-section');
   rsec.appendChild(mkDiv('check-section-title', '\\u0412 \\u0441\\u043f\\u0438\\u0441\\u043a\\u0430\\u0445 \\u043c\\u0430\\u0440\\u0448\\u0440\\u0443\\u0442\\u043e\\u0432'));
   if (data.routes && data.routes.length) {
@@ -1192,16 +1195,19 @@ function renderCheck(data) {
   } else {
     rsec.appendChild(mkDiv('check-no-route', '\\u041d\\u0435 \\u043d\\u0430\\u0439\\u0434\\u0435\\u043d\\u043e \\u0432 \\u0441\\u043f\\u0438\\u0441\\u043a\\u0430\\u0445 \\u043c\\u0430\\u0440\\u0448\\u0440\\u0443\\u0442\\u043e\\u0432'));
   }
-  container.appendChild(rsec);
+  colInfo.appendChild(rsec);
 
-  // 4. Whois
   if (data.whois && data.whois.length) {
     const wsec = mkDiv('check-section');
     wsec.appendChild(mkDiv('check-section-title', 'WHOIS'));
     wsec.appendChild(mkDiv('check-whois', data.whois.join('\\n')));
-    container.appendChild(wsec);
+    colInfo.appendChild(wsec);
   }
 
+  cols.appendChild(colGw);
+  cols.appendChild(colInfo);
+  container.appendChild(cols);
+
   $('check-result').className = 'check-result visible';
 }
 
@@ -1259,8 +1265,7 @@ async function checkDomain() {
             speedWrap = document.createElement('div');
             speedWrap.className = 'check-gateways';
             speedSection.appendChild(speedWrap);
-            const cg = $('check-gateways');
-            cg.insertBefore(speedSection, cg.firstChild);
+            $('check-col-gw').appendChild(speedSection);
           }
         } else if (evType === 'speed' && speedWrap) {
           const gw = parsed.gateway;