Green mesh banner on each remote card, naming the failing leg when it is not green

2026-08-17 14:42:15 -04:00
parent d417bd5360
commit e7e9d9fecf
2 changed files with 33 additions and 0 deletions
@@ -1311,6 +1311,30 @@ function _renderActions(nodes, cfg) {
        }
      }

+      // ── Mesh health banner ─────────────────────────────────────────────────
+      // Green only when every leg holds. When one does not, the banner names which — "mesh
+      // degraded" on its own sends someone hunting through four subsystems, and the answer is
+      // already known here.
+      const mesh = remote.mesh;
+      if (mesh) {
+        const legs = [
+          ['Tailscale',   mesh.tailscale],
+          ['SSH',         mesh.ssh],
+          ['Partnership', mesh.partnership],
+          ['Onboarded',   mesh.onboarded],
+        ];
+        const bad = legs.filter(l => !l[1]).map(l => l[0]);
+        const ok  = bad.length === 0;
+        html += `<div style="margin-top:9px;padding:7px 10px;border-radius:3px;
+            background:${ok ? '#0a1a0a' : '#1a1200'};border:1px solid ${ok ? '#1a4a1a' : '#3a2800'};
+            display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
+          <span style="font-size:11px;color:${ok ? '#4caf50' : '#ff9800'};font-weight:600;">
+            ${ok ? '✓ Mesh connected — all systems good' : '⚠ Mesh degraded'}</span>
+          <span style="font-size:9px;color:${ok ? '#2e6b2e' : '#8a6a2a'};font-family:monospace;">
+            ${ok ? legs.map(l => l[0]).join(' · ') : 'failing: ' + bad.join(', ')}</span>
+        </div>`;
+      }
+
      // ── Delete Keys panel ──────────────────────────────────────────────────
      if (isDeleting) {
        html += `<div style="margin-top:10px;padding:10px;background:#0a0a0a;border:1px solid #2a1515;