From 4dd89010e01928f778baec0a95ece25accccd786 Mon Sep 17 00:00:00 2001
From: Anton Liashkevich <anton.liashkevich.eng@gmail.com>
Date: Mon, 3 Aug 2026 11:08:46 -0400
Subject: [PATCH 1/2] ui: add row divider to Internet Clients list and fix
 layout break on multi-net-id chains

Rows now get a bottom border to visually separate list items. The
net-id column is capped in width with ellipsis truncation and a
tooltip, since chained sessions can report many net ids and were
overflowing the row.
---
 .../src/components/topology/InternetPanel.tsx   | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/members/nullnet-server/ui/src/components/topology/InternetPanel.tsx b/members/nullnet-server/ui/src/components/topology/InternetPanel.tsx
index 4b6b2fe..cc723d8 100644
--- a/members/nullnet-server/ui/src/components/topology/InternetPanel.tsx
+++ b/members/nullnet-server/ui/src/components/topology/InternetPanel.tsx
@@ -44,6 +44,8 @@ export default function InternetPanel() {
 
       {sessionList.map(s => {
         const isFocused = focusedClientIp === s.client_ip;
+        const netIds = chainByProxyNetId.get(s.network_id);
+        const netIdsLabel = netIds ? `nets ${netIds.join(', ')}` : `net ${s.network_id}`;
         return (
           <div
             key={s.id}
@@ -54,6 +56,7 @@ export default function InternetPanel() {
               marginBottom: 2,
               borderRadius: 5,
               border: `1px solid ${isFocused ? 'rgba(91,156,246,.45)' : 'transparent'}`,
+              borderBottom: isFocused ? undefined : '1px solid var(--t3)',
               background: isFocused ? 'rgba(91,156,246,.08)' : 'transparent',
               cursor: 'pointer',
               transition: 'background .12s, border-color .12s',
@@ -71,11 +74,15 @@ export default function InternetPanel() {
                 {s.service}{s.org ? ` · ${s.org}` : ''}
               </div>
             </div>
-            <div style={{ flexShrink: 0, textAlign: 'right' }}>
-              <div style={{ fontSize: 9.5, fontFamily: "'JetBrains Mono',monospace", color: 'var(--cyan)' }}>
-                {chainByProxyNetId.has(s.network_id)
-                  ? `nets ${chainByProxyNetId.get(s.network_id)!.join(', ')}`
-                  : `net ${s.network_id}`}
+            <div style={{ flexShrink: 0, textAlign: 'right', maxWidth: 110 }}>
+              <div
+                title={netIdsLabel}
+                style={{
+                  fontSize: 9.5, fontFamily: "'JetBrains Mono',monospace", color: 'var(--cyan)',
+                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                }}
+              >
+                {netIdsLabel}
               </div>
               <div style={{ fontSize: 9, color: 'var(--t2)' }}>{formatTime(s.created_at)}</div>
             </div>

From 7a1426156d089b283d72e2871755897672f69a31 Mon Sep 17 00:00:00 2001
From: Anton Liashkevich <anton.liashkevich.eng@gmail.com>
Date: Mon, 3 Aug 2026 11:34:37 -0400
Subject: [PATCH 2/2] ui: truncate chained net-id lists in Dashboard and
 EdgePanel

Same layout break as the Internet Clients panel: sessions routed
through a proxy chain can report many net ids, and the joined list had
no width constraint, so it wrapped across lines and inflated row
height. Both spots now truncate with an ellipsis and a tooltip with
the full list.
---
 .../ui/src/components/topology/EdgePanel.tsx  | 19 +++++++++++++------
 .../nullnet-server/ui/src/pages/Dashboard.tsx | 12 +++++++++---
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/members/nullnet-server/ui/src/components/topology/EdgePanel.tsx b/members/nullnet-server/ui/src/components/topology/EdgePanel.tsx
index e5caf4d..fe3f5de 100644
--- a/members/nullnet-server/ui/src/components/topology/EdgePanel.tsx
+++ b/members/nullnet-server/ui/src/components/topology/EdgePanel.tsx
@@ -142,6 +142,9 @@ export default function EdgePanel({ edges }: Props) {
 
       {edges.map((e, i) => {
         const session = sessionByNetId.get(e.net_id);
+        const netIdsLabel = e.via_proxy && chainByProxyNetId.has(e.net_id)
+          ? `nets ${chainByProxyNetId.get(e.net_id)!.join(', ')}`
+          : `net ${e.net_id}`;
         return (
           <div key={i} style={{
             background: 'rgba(255,255,255,.03)',
@@ -150,14 +153,18 @@ export default function EdgePanel({ edges }: Props) {
             padding: '9px 11px',
             marginBottom: 6,
           }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: session || e.via_proxy || e.egress ? 6 : 0 }}>
-              <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 10, color: 'var(--cyan)' }}>
-                {e.via_proxy && chainByProxyNetId.has(e.net_id)
-                  ? `nets ${chainByProxyNetId.get(e.net_id)!.join(', ')}`
-                  : `net ${e.net_id}`}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, marginBottom: session || e.via_proxy || e.egress ? 6 : 0 }}>
+              <span
+                title={netIdsLabel}
+                style={{
+                  fontFamily: "'JetBrains Mono',monospace", fontSize: 10, color: 'var(--cyan)',
+                  flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                }}
+              >
+                {netIdsLabel}
               </span>
               {e.setup_ms > 0 && (
-                <span style={{ fontSize: 10, color: 'var(--t2)' }}>{e.setup_ms}ms setup</span>
+                <span style={{ fontSize: 10, color: 'var(--t2)', flexShrink: 0 }}>{e.setup_ms}ms setup</span>
               )}
             </div>
             {e.egress && (
diff --git a/members/nullnet-server/ui/src/pages/Dashboard.tsx b/members/nullnet-server/ui/src/pages/Dashboard.tsx
index dd02c65..aa740e1 100644
--- a/members/nullnet-server/ui/src/pages/Dashboard.tsx
+++ b/members/nullnet-server/ui/src/pages/Dashboard.tsx
@@ -119,6 +119,9 @@ function DashboardView() {
                     <tbody>
                       {graph!.edges.map((e, i) => {
                         const session = sessionByNetId.get(e.net_id);
+                        const netIdsLabel = e.via_proxy && chainByProxyNetId.has(e.net_id)
+                          ? chainByProxyNetId.get(e.net_id)!.join(', ')
+                          : String(e.net_id);
                         return (
                           <tr
                             key={i}
@@ -136,9 +139,12 @@ function DashboardView() {
                             </td>
                             <td style={{ fontFamily: "'JetBrains Mono',monospace", fontWeight: 500 }}>{e.to}</td>
                             <td style={{ fontFamily: "'JetBrains Mono',monospace", color: 'var(--cyan)' }}>
-                              {e.via_proxy && chainByProxyNetId.has(e.net_id)
-                                ? chainByProxyNetId.get(e.net_id)!.join(', ')
-                                : e.net_id}
+                              <div
+                                title={netIdsLabel}
+                                style={{ maxWidth: 130, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                              >
+                                {netIdsLabel}
+                              </div>
                             </td>
                             <td style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, color: 'var(--t1)' }}>
                               {session?.client_net ?? <span style={{ color: 'var(--t3)' }}>—</span>}