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 回程重传`}>