web: name the two agents on each direction row of the line cards

web/display/src/LineStrips.tsx

@@ -24,13 +24,16 @@ const clock = (ms: number, showDate: boolean) => new Date(ms).toLocaleString('zh
 
 interface Props {
   lineId: string
+  /** 拨号方和监听方的名字：去程是拨号方到监听方，回程反过来。 */
+  dialer: string
+  listener: string
   range: OverviewRange
   /** 所选时间范围的汇总（左上、右上的数字）。 */
   m: Record<string, number | null | undefined>
 }
 
-/** 一条线路的 QUIC/TCP 摘要：RTT 是往返（⇄）；去程是拨号方到监听方（→），回程反过来（←）；QUIC 看各方向丢包，TCP 看各方向重传，都配质量点阵。 */
-export function LineStrips({ lineId, range, m }: Props) {
+/** 一条线路的 QUIC/TCP 摘要：RTT 是往返（⇄）；每个方向一行，写明是「拨号方 → 监听方」还是反过来；QUIC 看各方向丢包，TCP 看各方向重传，都配质量点阵。 */
+export function LineStrips({ lineId, dialer, listener, range, m }: Props) {
   const info = OVERVIEW_RANGES.find((r) => r.value === range) ?? OVERVIEW_RANGES[0]
   const series = useQuery(
     () => api.get<SeriesDto>(`/api/public/lines/${encodeURIComponent(lineId)}/series`, { range: info.value, anchor: 'now', step: info.step, preset: 'quic,tcp', metrics: 'loss.up,loss.down,loss.total,rtt.p50,rtt.p95,rtt.p99,tcp.retrans.up,tcp.retrans.down,tcp.rtt.p50' }),
@@ -75,7 +78,7 @@ export function LineStrips({ lineId, range, m }: Props) {
         </div>
         <div className="line-mini-direction">
           <div className="line-mini-direction-head" title={`去程 拨号方 → 监听方 丢包 ${fmtPct(up)}`}>
-            <span>去程 →</span>
+            <span className="line-mini-direction-name" title={`去程：${dialer} → ${listener}`}>{dialer} → {listener}</span>
             <span className={`line-mini-badge ${levelOf(up)}`}>{upText}</span>
           </div>
           <div className="bars" role="img" aria-label={`近 ${common.hoursText}每 ${common.stepText}的去程丢包`}>
@@ -86,7 +89,7 @@ export function LineStrips({ lineId, range, m }: Props) {
         </div>
         <div className="line-mini-direction">
           <div className="line-mini-direction-head" title={`回程 监听方 → 拨号方 丢包 ${fmtPct(down)}`}>
-            <span>回程 ←</span>
+            <span className="line-mini-direction-name" title={`回程：${listener} → ${dialer}`}>{listener} → {dialer}</span>
             <span className={`line-mini-badge ${levelOf(down)}`}>{downText}</span>
           </div>
           <div className="bars" role="img" aria-label={`近 ${common.hoursText}每 ${common.stepText}的回程丢包`}>
@@ -102,7 +105,7 @@ export function LineStrips({ lineId, range, m }: Props) {
         </div>
         <div className="line-mini-direction">
           <div className="line-mini-direction-head" title={`TCP 去程 拨号方 → 监听方 重传 ${fmtPct(retransUpValue)}`}>
-            <span>去程 →</span>
+            <span className="line-mini-direction-name" title={`去程：${dialer} → ${listener}`}>{dialer} → {listener}</span>
             <span className={`line-mini-badge ${levelOf(retransUpValue)}`}>{retransText(retransUpValue)}</span>
           </div>
           <div className="bars" role="img" aria-label={`近 ${common.hoursText}每 ${common.stepText}的 TCP 去程重传`}>
@@ -113,7 +116,7 @@ export function LineStrips({ lineId, range, m }: Props) {
         </div>
         <div className="line-mini-direction">
           <div className="line-mini-direction-head" title={`TCP 回程 监听方 → 拨号方 重传 ${fmtPct(retransDownValue)}`}>
-            <span>回程 ←</span>
+            <span className="line-mini-direction-name" title={`回程：${listener} → ${dialer}`}>{listener} → {dialer}</span>
             <span className={`line-mini-badge ${levelOf(retransDownValue)}`}>{retransText(retransDownValue)}</span>
           </div>
           <div className="bars" role="img" aria-label={`近 ${common.hoursText}每 ${common.stepText}的 TCP 回程重传`}>

web/display/src/display.css

@@ -1437,6 +1437,12 @@
   margin-left: auto;
 }
 
+.line-mini-direction-head > .line-mini-direction-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .line-mini-tcp {
   margin-top: 2px;
   padding-top: 5px;

web/display/src/pages/Overview.tsx

@@ -136,7 +136,7 @@ function NodeCard({ node, labels, infos }: { node: HostItem; labels: string[]; i
   )
 }
 
-/** 一条线路（拨号方 ⇄ 监听方）：RTT 是往返；去程是拨号方到监听方（左到右），回程是监听方到拨号方（右到左）。QUIC 看两个方向的丢包，TCP 看两个方向的重传。 */
+/** 一条线路（拨号方 ⇄ 监听方）：RTT 是往返；下面每个方向一行，写明是 A → B 还是 B → A（A 是拨号方）。QUIC 看两个方向的丢包，TCP 看两个方向的重传。 */
 function LineCard({ l, range, infos }: { l: OverviewLineDto; range: OverviewRange; infos: Map<string, NodeInfoDto> }) {
   const dialerInfo = infos.get(l.dialer_id)
   const agentInfo = infos.get(l.agent_id)
@@ -159,7 +159,7 @@ function LineCard({ l, range, infos }: { l: OverviewLineDto; range: OverviewRang
           {dialerInfo?.country ? <Flag code={dialerInfo.country} /> : null}
           <span className="name">{l.dialer_name}</span>
           {dialerInfo?.isp_key ? <IspIcon ispKey={dialerInfo.isp_key} name={dialerInfo.isp_name} /> : null}
-          <span className="arrow" title="RTT 是往返；去程：左 → 右，回程：右 → 左">⇄</span>
+          <span className="arrow" title="RTT 是往返，下面两行写明每个方向">⇄</span>
           {agentInfo?.country ? <Flag code={agentInfo.country} /> : null}
           <span className="name">{l.name}</span>
         </span>
@@ -170,7 +170,7 @@ function LineCard({ l, range, infos }: { l: OverviewLineDto; range: OverviewRang
           {connectionIssue ? `${connectionIssue} · ${rangeLabel}` : rangeLabel}
         </span>
       </div>
-      <LineStrips lineId={l.id} range={range} m={l.summary.metrics} />
+      <LineStrips lineId={l.id} dialer={l.dialer_name} listener={l.name} range={range} m={l.summary.metrics} />
     </Link>
   )
 }