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

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>
   )
 }