feat(display): explain QUIC state and compact panels [CI]

web/display/src/display.css

@@ -116,6 +116,29 @@
   margin-top: 8px;
 }
 
+.line-loading-state,
+.line-empty-state {
+  display: flex;
+  min-height: 58px;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 16px;
+  border: 1px solid var(--glass-ring);
+  border-radius: var(--r-card);
+  background: color-mix(in srgb, var(--glass-bg) 75%, transparent);
+  color: var(--app-ink-muted);
+  font-size: 13px;
+}
+
+.line-loading-state .loading-bar {
+  height: 2px;
+}
+
+.line-empty-state {
+  color: var(--app-ink-faint);
+}
+
 .line-page .faint,
 .line-page .chart-hint,
 .line-page .chart-section h2,
@@ -1359,15 +1382,15 @@
 }
 
 .line-mini-quic-head > span,
-.line-mini-direction-row > span:first-child,
-.line-mini-tcp-row > span:first-child {
+.line-mini-direction-head > span:first-child,
+.line-mini-tcp-head > span:first-child {
   color: var(--app-ink-muted);
   font-size: 10px;
   font-weight: 600;
 }
 
 .line-mini-quic-head > strong,
-.line-mini-tcp-row > strong {
+.line-mini-tcp-head > strong {
   color: var(--app-ink);
   font-size: 14px;
   font-weight: 700;
@@ -1381,32 +1404,40 @@
   white-space: nowrap;
 }
 
-.line-mini-direction-row {
+.line-mini-direction,
+.line-mini-tcp {
   display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) 66px;
-  align-items: center;
-  gap: 5px;
+  gap: 3px;
   min-width: 0;
 }
 
-.line-mini-direction-row > span:first-child,
-.line-mini-tcp-row > span:first-child {
+.line-mini-direction-head,
+.line-mini-tcp-head {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  line-height: 1.25;
+}
+
+.line-mini-direction-head > span:first-child,
+.line-mini-tcp-head > span:first-child {
   font-weight: 500;
   white-space: nowrap;
 }
 
-.line-mini-tcp-row {
-  display: grid;
-  grid-template-columns: 34px 46px minmax(0, 1fr) max-content;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
+.line-mini-direction-head .line-mini-badge,
+.line-mini-tcp-head .line-mini-badge {
+  margin-left: auto;
+}
+
+.line-mini-tcp {
   margin-top: 2px;
   padding-top: 5px;
   border-top: 1px solid var(--app-outline-soft);
 }
 
-.line-mini-tcp-row > strong {
+.line-mini-tcp-head > strong {
   font-size: 12px;
 }
 
@@ -1693,6 +1724,7 @@
 .agent-head .flag {
   flex: none;
   width: 24px;
+  max-width: 24px;
   height: 18px;
   border-radius: 3px;
   object-fit: cover;
@@ -1801,6 +1833,16 @@
   background: color-mix(in srgb, var(--app-ink) 7%, transparent);
 }
 
+.agent-card .line-link.disconnected,
+.agent-card .line-link.disconnected:hover {
+  filter: grayscale(1);
+  opacity: 0.62;
+}
+
+.line-range.disconnected-label {
+  color: var(--app-ink-faint);
+}
+
 
 /* 线路详情、对比等页面的卡片和指标块：同样的亚克力，一层压一层 */
 .card:not(.agent-card),