Вкладки серверов и страница статистики в output/index.html

По умолчанию — Статистика: доступность TCP, IP, пользователи,
матрица присутствия. Серверы открываются отдельными вкладками.

Co-authored-by: Cursor <cursoragent@cursor.com>

roles/hysteria2/tasks/export.yml

@@ -45,6 +45,8 @@
       server: {{ hysteria2_output_name }}
       domain: {{ hysteria2_domain }}
       port: {{ hysteria2_listen_port }}
+      host_ip: "{{ ansible_host | default('') }}"
+      mode: masquerade
       users:
       {% for user in hysteria2_export_users %}
         - name: {{ user.name }}

roles/hysteria2/tasks/export_global.yml

@@ -29,10 +29,17 @@
   when: not item.skipped | default(false)
   vars:
     _info: "{{ item.content | b64decode | from_yaml }}"
+    _server_name: "{{ _info.server }}"
     _entry:
-      name: "{{ _info.server }}"
+      name: "{{ _server_name }}"
       domain: "{{ _info.domain }}"
       port: "{{ _info.port }}"
+      mode: "{{ _info.mode | default('masquerade') }}"
+      host_ip: >-
+        {{
+          _info.host_ip
+          | default(hostvars[_server_name].ansible_host | default(''), true)
+        }}
       dir: "{{ item.item.path | dirname | basename }}"
       users: "{{ _info.users }}"
   become: false
@@ -43,6 +50,64 @@
   when: hysteria2_global_servers | default([]) | length > 0
   become: false
 
+- name: Probe TCP reachability of exported servers
+  ansible.builtin.wait_for:
+    host: "{{ item.host_ip if (item.host_ip | default('') | length > 0) else item.domain }}"
+    port: "{{ item.port | int }}"
+    timeout: 3
+    state: started
+  loop: "{{ hysteria2_global_servers | default([]) }}"
+  loop_control:
+    label: "{{ item.name }}"
+  register: _hysteria2_probe
+  failed_when: false
+  changed_when: false
+  become: false
+  when: hysteria2_global_servers | default([]) | length > 0
+
+- name: Merge probe result for each server
+  ansible.builtin.set_fact:
+    hysteria2_global_servers_enriched: >-
+      {{
+        (hysteria2_global_servers_enriched | default([]))
+        + [
+          hysteria2_global_servers[item] | combine({
+            'reachable': not ((_hysteria2_probe.results | default([]))[item].failed | default(true)),
+            'probe_seconds': (_hysteria2_probe.results | default([]))[item].elapsed | default(none)
+          })
+        ]
+      }}
+  loop: "{{ range(0, hysteria2_global_servers | length) | list }}"
+  when: hysteria2_global_servers | default([]) | length > 0
+  become: false
+
+- name: Replace servers list with enriched data
+  ansible.builtin.set_fact:
+    hysteria2_global_servers: "{{ hysteria2_global_servers_enriched }}"
+  when: hysteria2_global_servers_enriched is defined
+  become: false
+
+- name: Compute unique users across servers
+  ansible.builtin.set_fact:
+    hysteria2_unique_users: >-
+      {{
+        hysteria2_global_servers
+        | map(attribute='users')
+        | map('map', attribute='name')
+        | flatten
+        | unique
+        | sort
+      }}
+    hysteria2_reachable_count: >-
+      {{
+        hysteria2_global_servers
+        | selectattr('reachable')
+        | list
+        | length
+      }}
+  when: hysteria2_global_servers | default([]) | length > 0
+  become: false
+
 - name: Generate global HTML index
   ansible.builtin.template:
     src: export/global-index.html.j2
@@ -51,6 +116,8 @@
   vars:
     generated_at: "{{ now(utc=false, fmt='%Y-%m-%d %H:%M:%S') }}"
     total_users: "{{ hysteria2_global_servers | map(attribute='users') | map('length') | sum }}"
+    unique_users: "{{ hysteria2_unique_users | default([]) }}"
+    reachable_count: "{{ hysteria2_reachable_count | default(0) }}"
   when: hysteria2_global_servers | default([]) | length > 0
   become: false
 

roles/hysteria2/templates/export/global-index.html.j2

@@ -15,11 +15,14 @@
       --text: #e6edf3;
       --muted: #8b949e;
       --accent: #58a6ff;
-      --accent-2: #a371f7;
+      --accent-2: #3fb950;
       --accent-soft: rgba(88, 166, 255, 0.12);
-      --accent-soft-2: rgba(163, 113, 247, 0.12);
       --success: #3fb950;
       --success-soft: rgba(63, 185, 80, 0.15);
+      --danger: #f85149;
+      --danger-soft: rgba(248, 81, 73, 0.15);
+      --warn: #d29922;
+      --warn-soft: rgba(210, 153, 34, 0.15);
       --radius: 14px;
       --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
     }
@@ -33,96 +36,241 @@
         --text: #1f2328;
         --muted: #656d76;
         --accent: #0969da;
-        --accent-2: #8250df;
+        --accent-2: #1a7f37;
         --accent-soft: rgba(9, 105, 218, 0.08);
-        --accent-soft-2: rgba(130, 80, 223, 0.08);
         --success: #1a7f37;
         --success-soft: rgba(26, 127, 55, 0.1);
+        --danger: #cf222e;
+        --danger-soft: rgba(207, 34, 46, 0.1);
+        --warn: #9a6700;
+        --warn-soft: rgba(154, 103, 0, 0.1);
         --shadow: 0 10px 30px rgba(31, 35, 40, 0.08);
       }
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      font-family: "Segoe UI", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
-      background: var(--bg);
+      background:
+        radial-gradient(ellipse 80% 50% at 20% -10%, var(--accent-soft), transparent),
+        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(63, 185, 80, 0.08), transparent),
+        var(--bg);
       color: var(--text);
       line-height: 1.5;
       min-height: 100vh;
     }
     .hero {
-      background:
+      padding: 2rem 1.5rem 1.25rem;
-        radial-gradient(ellipse 80% 60% at 50% -10%, var(--accent-soft), transparent),
-        radial-gradient(ellipse 60% 40% at 90% 10%, var(--accent-soft-2), transparent),
-        var(--bg-soft);
-      border-bottom: 1px solid var(--border);
-      padding: 2.5rem 1.5rem 2rem;
       text-align: center;
     }
     .hero h1 {
       font-size: clamp(1.75rem, 4vw, 2.25rem);
       font-weight: 800;
       letter-spacing: -0.03em;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.35rem;
-      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      color: var(--accent);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
     }
     .hero p { color: var(--muted); font-size: 0.95rem; }
-    .stats {
+    .tabs {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-      flex-wrap: wrap;
-      margin-top: 1.25rem;
-    }
-    .stat {
-      padding: 0.5rem 1rem;
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      background: var(--bg-card);
-      font-size: 0.85rem;
-      font-weight: 600;
-    }
-    .stat span { color: var(--accent); }
-    .nav {
       position: sticky;
       top: 0;
       z-index: 50;
       display: flex;
-      gap: 0.5rem;
+      gap: 0.45rem;
       flex-wrap: wrap;
       justify-content: center;
-      padding: 0.85rem 1rem;
+      padding: 0.75rem 1rem;
-      background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
+      background: color-mix(in srgb, var(--bg-soft) 90%, transparent);
-      backdrop-filter: blur(10px);
+      backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--border);
     }
-    .nav a {
+    .tab {
-      padding: 0.4rem 0.85rem;
+      appearance: none;
-      border-radius: 999px;
       border: 1px solid var(--border);
       background: var(--bg-card);
       color: var(--text);
-      text-decoration: none;
+      padding: 0.5rem 0.95rem;
-      font-size: 0.82rem;
+      border-radius: 999px;
-      font-weight: 600;
+      font-size: 0.85rem;
-      transition: border-color 0.15s, background 0.15s, color 0.15s;
+      font-weight: 650;
+      cursor: pointer;
+      transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
     }
-    .nav a:hover {
+    .tab:hover {
       border-color: var(--accent);
       color: var(--accent);
       background: var(--accent-soft);
     }
+    .tab.active {
+      border-color: var(--accent);
+      background: var(--accent-soft);
+      color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-soft);
+    }
+    .tab .dot {
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      margin-right: 0.35rem;
+      vertical-align: middle;
+      background: var(--muted);
+    }
+    .tab .dot.up { background: var(--success); box-shadow: 0 0 8px var(--success); }
+    .tab .dot.down { background: var(--danger); }
     .container {
-      max-width: 980px;
+      max-width: 1080px;
       margin: 0 auto;
       padding: 1.5rem 1rem 3rem;
     }
-    .server-section {
+    .tab-panel { display: none; animation: fadeIn 0.2s ease; }
-      scroll-margin-top: 4.5rem;
+    .tab-panel.active { display: block; }
-      margin-bottom: 2.5rem;
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(6px); }
+      to { opacity: 1; transform: translateY(0); }
     }
+    .metrics {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: 0.85rem;
+      margin-bottom: 1.5rem;
+    }
+    .metric {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.1rem 1.2rem;
+      box-shadow: var(--shadow);
+    }
+    .metric .label {
+      font-size: 0.72rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--muted);
+      margin-bottom: 0.35rem;
+    }
+    .metric .value {
+      font-size: 1.75rem;
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      color: var(--accent);
+    }
+    .metric .sub {
+      margin-top: 0.2rem;
+      font-size: 0.78rem;
+      color: var(--muted);
+    }
+    .section-title {
+      font-size: 1.05rem;
+      font-weight: 700;
+      margin: 0 0 0.85rem;
+    }
+    .server-stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1rem;
+      margin-bottom: 1.75rem;
+    }
+    .server-stat-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.15rem 1.25rem;
+      box-shadow: var(--shadow);
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    .server-stat-card header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 0.75rem;
+    }
+    .server-stat-card h3 {
+      font-size: 1.1rem;
+      font-weight: 750;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      padding: 0.25rem 0.65rem;
+      border-radius: 999px;
+      font-size: 0.72rem;
+      font-weight: 700;
+      white-space: nowrap;
+    }
+    .badge.up {
+      background: var(--success-soft);
+      color: var(--success);
+      border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
+    }
+    .badge.down {
+      background: var(--danger-soft);
+      color: var(--danger);
+      border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
+    }
+    .meta-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.55rem 0.85rem;
+    }
+    .meta-item label {
+      display: block;
+      font-size: 0.68rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--muted);
+    }
+    .meta-item span,
+    .meta-item code {
+      font-size: 0.88rem;
+      font-weight: 600;
+      word-break: break-all;
+    }
+    .meta-item code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 0.8rem;
+    }
+    .matrix-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      background: var(--bg-card);
+      box-shadow: var(--shadow);
+    }
+    table.matrix {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 480px;
+    }
+    table.matrix th,
+    table.matrix td {
+      padding: 0.65rem 0.85rem;
+      border-bottom: 1px solid var(--border);
+      text-align: center;
+      font-size: 0.85rem;
+    }
+    table.matrix th {
+      background: var(--bg-soft);
+      font-weight: 700;
+      position: sticky;
+      top: 0;
+    }
+    table.matrix th:first-child,
+    table.matrix td:first-child {
+      text-align: left;
+      font-weight: 650;
+      white-space: nowrap;
+    }
+    table.matrix tr:last-child td { border-bottom: none; }
+    .cell-yes {
+      color: var(--success);
+      font-weight: 800;
+    }
+    .cell-no { color: var(--muted); opacity: 0.45; }
     .server-header {
       display: flex;
       flex-wrap: wrap;
@@ -137,15 +285,8 @@
       box-shadow: var(--shadow);
       border-left: 4px solid var(--accent);
     }
-    .server-header h2 {
+    .server-header h2 { font-size: 1.35rem; font-weight: 700; }
-      font-size: 1.35rem;
+    .server-header .domain { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
-      font-weight: 700;
-    }
-    .server-header .domain {
-      color: var(--muted);
-      font-size: 0.9rem;
-      margin-top: 0.15rem;
-    }
     .server-link {
       display: inline-flex;
       align-items: center;
@@ -244,136 +385,6 @@
       transform: scale(1.03);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
     }
-    .lightbox {
-      position: fixed;
-      inset: 0;
-      z-index: 200;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1rem;
-      box-sizing: border-box;
-      background: rgba(8, 12, 18, 0.72);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      transition: opacity 0.22s ease, visibility 0.22s ease;
-    }
-    .lightbox.open {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-    .lightbox-panel {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      width: min(94vw, 900px);
-      height: calc(100dvh - 2rem);
-      max-height: calc(100dvh - 2rem);
-      padding: 1.25rem 1.25rem 1rem;
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 18px;
-      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
-      text-align: center;
-      overflow: hidden;
-      box-sizing: border-box;
-      transform: translateY(12px) scale(0.96);
-      transition: transform 0.22s ease;
-    }
-    .lightbox.open .lightbox-panel {
-      transform: translateY(0) scale(1);
-    }
-    .lightbox-panel img {
-      display: block;
-      max-width: 100%;
-      max-height: 100%;
-      width: auto;
-      height: auto;
-      aspect-ratio: 1;
-      object-fit: contain;
-      background: #fff;
-      border-radius: 12px;
-      padding: 1rem;
-      box-sizing: border-box;
-      image-rendering: pixelated;
-    }
-    .lightbox-media {
-      flex: 1 1 auto;
-      min-height: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .lightbox-caption {
-      flex-shrink: 0;
-      margin-top: 0.85rem;
-      font-size: 0.95rem;
-      font-weight: 650;
-      color: var(--text);
-    }
-    .lightbox-hint {
-      flex-shrink: 0;
-      margin-top: 0.25rem;
-      font-size: 0.75rem;
-      color: var(--muted);
-    }
-    .lightbox-actions {
-      flex-shrink: 0;
-      margin-top: 1rem;
-      display: flex;
-      justify-content: center;
-    }
-    .lightbox-download {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.45rem;
-      padding: 0.55rem 1rem;
-      border-radius: 999px;
-      border: 1px solid var(--border);
-      background: var(--bg-input);
-      color: var(--accent);
-      text-decoration: none;
-      font-size: 0.85rem;
-      font-weight: 650;
-      transition: color 0.15s, border-color 0.15s, background 0.15s;
-    }
-    .lightbox-download:hover {
-      border-color: var(--accent);
-      background: var(--accent-soft);
-    }
-    .lightbox-download svg {
-      width: 16px;
-      height: 16px;
-      flex-shrink: 0;
-    }
-    .lightbox-close {
-      position: absolute;
-      top: 0.65rem;
-      right: 0.65rem;
-      width: 36px;
-      height: 36px;
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      background: var(--bg-input);
-      color: var(--muted);
-      cursor: pointer;
-      font-size: 1.25rem;
-      line-height: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: color 0.15s, border-color 0.15s, background 0.15s;
-    }
-    .lightbox-close:hover {
-      color: var(--accent);
-      border-color: var(--accent);
-      background: var(--accent-soft);
-    }
-    body.lightbox-open { overflow: hidden; }
     .files {
       display: flex;
       flex-wrap: wrap;
@@ -419,31 +430,268 @@
       z-index: 100;
     }
     .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
+    .lightbox {
+      position: fixed;
+      inset: 0;
+      z-index: 200;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      box-sizing: border-box;
+      background: rgba(8, 12, 18, 0.72);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition: opacity 0.22s ease, visibility 0.22s ease;
+    }
+    .lightbox.open {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+    .lightbox-panel {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: min(94vw, 900px);
+      height: calc(100dvh - 2rem);
+      max-height: calc(100dvh - 2rem);
+      padding: 1.25rem 1.25rem 1rem;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 18px;
+      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
+      text-align: center;
+      overflow: hidden;
+      box-sizing: border-box;
+      transform: translateY(12px) scale(0.96);
+      transition: transform 0.22s ease;
+    }
+    .lightbox.open .lightbox-panel { transform: translateY(0) scale(1); }
+    .lightbox-media {
+      flex: 1 1 auto;
+      min-height: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .lightbox-panel img {
+      display: block;
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      aspect-ratio: 1;
+      object-fit: contain;
+      background: #fff;
+      border-radius: 12px;
+      padding: 1rem;
+      box-sizing: border-box;
+      image-rendering: pixelated;
+    }
+    .lightbox-caption {
+      flex-shrink: 0;
+      margin-top: 0.85rem;
+      font-size: 0.95rem;
+      font-weight: 650;
+      color: var(--text);
+    }
+    .lightbox-hint {
+      flex-shrink: 0;
+      margin-top: 0.25rem;
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+    .lightbox-actions {
+      flex-shrink: 0;
+      margin-top: 1rem;
+      display: flex;
+      justify-content: center;
+    }
+    .lightbox-download {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.45rem;
+      padding: 0.55rem 1rem;
+      border-radius: 999px;
+      border: 1px solid var(--border);
+      background: var(--bg-input);
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 0.85rem;
+      font-weight: 650;
+      transition: color 0.15s, border-color 0.15s, background 0.15s;
+    }
+    .lightbox-download:hover {
+      border-color: var(--accent);
+      background: var(--accent-soft);
+    }
+    .lightbox-download svg { width: 16px; height: 16px; flex-shrink: 0; }
+    .lightbox-close {
+      position: absolute;
+      top: 0.65rem;
+      right: 0.65rem;
+      width: 36px;
+      height: 36px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: var(--bg-input);
+      color: var(--muted);
+      cursor: pointer;
+      font-size: 1.25rem;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.15s, border-color 0.15s, background 0.15s;
+    }
+    .lightbox-close:hover {
+      color: var(--accent);
+      border-color: var(--accent);
+      background: var(--accent-soft);
+    }
+    body.lightbox-open { overflow: hidden; }
+    .probe-note {
+      margin-top: 1rem;
+      font-size: 0.78rem;
+      color: var(--muted);
+    }
   </style>
 </head>
 <body>
   <header class="hero">
     <h1>Hysteria2</h1>
-    <p>Общий каталог VPN-подключений</p>
+    <p>Каталог VPN и сводная статистика</p>
-    <div class="stats">
-      <div class="stat"><span>{{ hysteria2_global_servers | length }}</span> серверов</div>
-      <div class="stat"><span>{{ total_users }}</span> пользователей</div>
-    </div>
   </header>
 
-  <nav class="nav" aria-label="Серверы">
+  <nav class="tabs" role="tablist" aria-label="Разделы">
+    <button type="button" class="tab active" role="tab" aria-selected="true" data-tab="stats" id="tab-btn-stats">Статистика</button>
 {% for server in hysteria2_global_servers %}
-    <a href="#server-{{ server.dir | e }}">{{ server.name | e }}</a>
+    <button type="button" class="tab" role="tab" aria-selected="false" data-tab="server-{{ server.dir | e }}" id="tab-btn-{{ server.dir | e }}">
+      <span class="dot {{ 'up' if server.reachable | default(false) else 'down' }}" aria-hidden="true"></span>{{ server.name | e }}
+    </button>
 {% endfor %}
   </nav>
 
   <main class="container">
+    <section class="tab-panel active" id="tab-stats" role="tabpanel" aria-labelledby="tab-btn-stats">
+      <div class="metrics">
+        <div class="metric">
+          <div class="label">Серверы</div>
+          <div class="value">{{ hysteria2_global_servers | length }}</div>
+          <div class="sub">в локальном экспорте</div>
+        </div>
+        <div class="metric">
+          <div class="label">Доступность</div>
+          <div class="value">{{ reachable_count }}/{{ hysteria2_global_servers | length }}</div>
+          <div class="sub">TCP :порт отвечает</div>
+        </div>
+        <div class="metric">
+          <div class="label">Учётки</div>
+          <div class="value">{{ total_users }}</div>
+          <div class="sub">сумма по серверам</div>
+        </div>
+        <div class="metric">
+          <div class="label">Уникальные</div>
+          <div class="value">{{ unique_users | length }}</div>
+          <div class="sub">разных пользователей</div>
+        </div>
+      </div>
+
+      <h2 class="section-title">Серверы</h2>
+      <div class="server-stats">
 {% for server in hysteria2_global_servers %}
-    <section class="server-section" id="server-{{ server.dir | e }}">
+        <article class="server-stat-card">
+          <header>
+            <div>
+              <h3>{{ server.name | e }}</h3>
+            </div>
+{% if server.reachable | default(false) %}
+            <span class="badge up">● online</span>
+{% else %}
+            <span class="badge down">● offline</span>
+{% endif %}
+          </header>
+          <div class="meta-grid">
+            <div class="meta-item">
+              <label>Домен</label>
+              <span>{{ server.domain | e }}</span>
+            </div>
+            <div class="meta-item">
+              <label>Порт</label>
+              <span>{{ server.port }}</span>
+            </div>
+            <div class="meta-item">
+              <label>IP</label>
+              <code>{{ server.host_ip | default('—') | e }}</code>
+            </div>
+            <div class="meta-item">
+              <label>Режим</label>
+              <span>{{ server.mode | default('masquerade') | e }}</span>
+            </div>
+            <div class="meta-item">
+              <label>Пользователи</label>
+              <span>{{ server.users | length }}</span>
+            </div>
+            <div class="meta-item">
+              <label>QR-коды</label>
+              <span>{{ server.users | selectattr('has_png') | list | length }}</span>
+            </div>
+          </div>
+          <div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.25rem;">
+            <button type="button" class="tab" data-tab="server-{{ server.dir | e }}" style="margin:0;">Открыть вкладку</button>
+            <a class="server-link" href="{{ server.dir | e }}/index.html">Страница сервера →</a>
+          </div>
+        </article>
+{% endfor %}
+      </div>
+
+      <h2 class="section-title">Пользователи × серверы</h2>
+      <div class="matrix-wrap">
+        <table class="matrix">
+          <thead>
+            <tr>
+              <th>Пользователь</th>
+{% for server in hysteria2_global_servers %}
+              <th>{{ server.name | e }}</th>
+{% endfor %}
+            </tr>
+          </thead>
+          <tbody>
+{% for uname in unique_users %}
+            <tr>
+              <td>{{ uname | e }}</td>
+{% for server in hysteria2_global_servers %}
+{% set names = server.users | map(attribute='name') | list %}
+              <td class="{{ 'cell-yes' if uname in names else 'cell-no' }}">{{ '✓' if uname in names else '—' }}</td>
+{% endfor %}
+            </tr>
+{% endfor %}
+          </tbody>
+        </table>
+      </div>
+      <p class="probe-note">Доступность проверена с control node при генерации ({{ generated_at | default('') }}): TCP connect к IP/домену и порту Hysteria.</p>
+    </section>
+
+{% for server in hysteria2_global_servers %}
+    <section class="tab-panel" id="tab-server-{{ server.dir | e }}" role="tabpanel" aria-labelledby="tab-btn-{{ server.dir | e }}" hidden>
       <div class="server-header">
         <div>
           <h2>{{ server.name | e }}</h2>
-          <p class="domain">{{ server.domain | e }}:{{ server.port }}</p>
+          <p class="domain">
+            {{ server.domain | e }}:{{ server.port }}
+{% if server.host_ip | default('') | length > 0 %}
+            · <code>{{ server.host_ip | e }}</code>
+{% endif %}
+{% if server.reachable | default(false) %}
+            · <span style="color:var(--success);font-weight:700;">online</span>
+{% else %}
+            · <span style="color:var(--danger);font-weight:700;">offline</span>
+{% endif %}
+          </p>
         </div>
         <a class="server-link" href="{{ server.dir | e }}/index.html">Страница сервера →</a>
       </div>
@@ -550,6 +798,33 @@
       setTimeout(function() { t.classList.remove('show'); }, 1800);
     }
 
+    (function () {
+      function activateTab(id) {
+        document.querySelectorAll('.tab[data-tab]').forEach(function (btn) {
+          var on = btn.getAttribute('data-tab') === id;
+          btn.classList.toggle('active', on);
+          btn.setAttribute('aria-selected', on ? 'true' : 'false');
+        });
+        document.querySelectorAll('.tab-panel').forEach(function (panel) {
+          var on = panel.id === 'tab-' + id;
+          panel.classList.toggle('active', on);
+          if (on) panel.removeAttribute('hidden');
+          else panel.setAttribute('hidden', '');
+        });
+        try { history.replaceState(null, '', '#' + id); } catch (e) {}
+      }
+
+      document.querySelectorAll('.tab[data-tab]').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          activateTab(btn.getAttribute('data-tab'));
+        });
+      });
+
+      var hash = (location.hash || '#stats').replace(/^#/, '');
+      if (!document.getElementById('tab-' + hash)) hash = 'stats';
+      activateTab(hash);
+    })();
+
     (function () {
       var box = document.getElementById('lightbox');
       var img = document.getElementById('lightbox-img');