Add Gateway traffic totals and dashboard chart

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

@@ -30,6 +30,10 @@ test('desktop layout keeps the power control on a symmetric center axis', () =>
   assert.match(styles, /\.client-panel\.has-subscription \{[\s\S]*transform:\s*translateY\(-9vh\)/);
   assert.match(styles, /\.client-panel\.has-subscription \.client-power-section \{[\s\S]*height:\s*var\(--client-work-height\);[\s\S]*padding-top:\s*var\(--client-power-top\)/);
   assert.match(styles, /\.client-panel\.has-subscription \.client-form-content \{[\s\S]*padding-top:\s*var\(--client-power-top\)/);
+  assert.match(rule('.client-gateway-summary'), /grid-column:\s*1/);
+  assert.match(rule('.client-gateway-summary'), /justify-self:\s*end/);
+  assert.match(component, /client-panel\$\{showPower \? '' : ' is-setup'\}[\s\S]*is-gateway-home/);
+  assert.match(component, /const showPower = isGateway \|\| \(hasSubscription && Boolean\(selectedServerId\)\)/);
 });
 
 test('page reload plays one stable startup sequence', () => {
@@ -68,6 +72,9 @@ test('tablet and mobile regions use normal flow with viewport-safe widths', () =
 
   assert.match(responsive, /grid-template-columns:\s*minmax\(0, 1fr\)/);
   assert.match(responsive, /\.client-power-section,[\s\S]*\.client-form,[\s\S]*grid-column:\s*1/);
+  assert.match(responsive, /\.client-gateway-summary/);
+  assert.match(responsive, /\.client-power-section \{[\s\S]*order:\s*1/);
+  assert.match(responsive, /\.client-gateway-summary \{[\s\S]*order:\s*2/);
   assert.match(responsive, /width:\s*min\(100%, 380px\)/);
   assert.match(responsive, /max-height:\s*none/);
   assert.match(responsive, /overflow-y:\s*visible/);
@@ -81,6 +88,7 @@ test('tablet and mobile regions use normal flow with viewport-safe widths', () =
   assert.match(styles, /\.client-instructions\s*\{[\s\S]*width:\s*min\(470px, 100vw\)/);
   assert.match(styles, /\.client-local-rules\s*\{[\s\S]*width:\s*min\(480px, 100vw\)/);
   assert.match(styles, /\.client-instructions\.client-diagnostics\s*\{[\s\S]*width:\s*min\(580px, 100vw\)/);
+  assert.match(styles, /\.client-subscription-drawer\s*\{[\s\S]*width:\s*min\(480px, 100vw\)/);
   assert.match(styles, /\.client-confirmation-dialog\s*\{[\s\S]*width:\s*min\(430px, calc\(100vw - 48px\)\)/);
 
   for (const viewport of [320, 390, 768]) {
@@ -100,6 +108,8 @@ test('secondary menus share one right rail and both drawers open from the right'
   const zIndex = (selector) => Number(/z-index:\s*(\d+)/.exec(rule(selector))?.[1]);
 
   assert.match(component, /<nav className="client-secondary-menu" aria-label="Дополнительные меню">/);
+  assert.match(component, /client-subscription-toggle[\s\S]*client-instructions-toggle[\s\S]*client-devices-toggle/);
+  assert.match(component, /aria-controls="client-subscription-drawer"/);
   assert.match(component, /client-instructions-toggle[\s\S]*client-local-rules-toggle/);
   assert.match(component, /client-instructions-toggle[\s\S]*client-devices-toggle[\s\S]*client-diagnostics-toggle[\s\S]*client-local-rules-toggle/);
   assert.match(component, /client-diagnostics-toggle/);
@@ -132,6 +142,8 @@ test('secondary menus share one right rail and both drawers open from the right'
   assert.match(rule('.client-local-rules'), /width:\s*min\(480px, 100vw\)/);
   assert.match(component, /className={`client-drawer client-instructions/);
   assert.match(component, /className={`client-drawer client-local-rules/);
+  assert.match(component, /client-drawer client-subscription-drawer/);
+  assert.match(component, /setSubscriptionOpen\(false\)[\s\S]*setDevicesOpen\(false\)[\s\S]*setDiagnosticsOpen\(false\)/);
 });
 
 test('connectivity diagnostics render stable compact tables before the first run', () => {