feat: node info, build info and acrylic web theme

Squash of recent dev work: return_session login, backend switcher, line
detail timeline, overview strips, node platform/country/ISP info with flags
and icons, build info (version, tag, time) behind site.show_build, and the
acrylic display theme.

web/display/src/pages/Compare.tsx

@@ -20,9 +20,9 @@ interface MetricInfo {
 const METRICS: MetricInfo[] = [
   { id: 'rtt.p50', label: '延迟 p50', unit: 'ms', better: 'lower' },
   { id: 'rtt.p95', label: '延迟 p95', unit: 'ms', better: 'lower' },
-  { id: 'loss.total', label: '丢包', unit: '%', better: 'lower' },
-  { id: 'loss.up', label: '上行丢包', unit: '%', better: 'lower' },
-  { id: 'loss.down', label: '下行丢包', unit: '%', better: 'lower' },
+  { id: 'loss.total', label: 'UDP 丢包', unit: '%', better: 'lower' },
+  { id: 'loss.up', label: 'UDP 上行丢包', unit: '%', better: 'lower' },
+  { id: 'loss.down', label: 'UDP 下行丢包', unit: '%', better: 'lower' },
   { id: 'jitter.up.p95', label: '上行抖动', unit: 'ms', better: 'lower' },
   { id: 'jitter.down.p95', label: '下行抖动', unit: 'ms', better: 'lower' },
   { id: 'tcp.rtt.p50', label: 'TCP RTT p50', unit: 'ms', better: 'lower' },

web/display/src/pages/Line.tsx

@@ -2,14 +2,19 @@ import { ChevronLeft } from 'lucide-react'
 import { useMemo } from 'react'
 import { Link, useParams, useSearchParams } from 'react-router-dom'
 import { api } from '@shared/api/client'
-import type { LineDto, SeriesDto, TestDto } from '@shared/api/types'
+import type { LineDto, TestDto } from '@shared/api/types'
 import { TimeChart, type ChartSeries } from '@shared/charts/TimeChart'
 import { fmtAgo, fmtMbps, fmtMs, fmtNum, fmtPct, fmtTime } from '@shared/format'
+import { NodeTag, useNodeInfos } from '@shared/nodes'
 import { fmtBytes, useHosts } from '../live'
 import { useQuery } from '@shared/hooks'
-import { Chip, Dot, Spinner, Stat } from '@shared/ui'
+import { Chip, Dot, LoadingBar, Segmented, Spinner, Stat } from '@shared/ui'
 import { PageError, ScoreChips } from '../lib'
-import { availablePresets, defaultPreset, monthsWithData, PRESETS, RangePicker, resolveRange, SLICES, type PresetValue, type RangeState, type SliceValue } from '../ranges'
+import { Minimap } from '../Minimap'
+import { readSpec, usePeriod, usePeriodSeries, writeSpec } from '../periods'
+import { dayBounds, dayKey, RangePicker, WINDOWS, type WindowValue } from '../ranges'
+
+const MIN = 60_000
 
 function tone(value: number | null | undefined, good: number, poor: number): 'ok' | 'warn' | 'bad' | '' {
   if (value === null || value === undefined) return ''
@@ -23,70 +28,216 @@ interface HostSeries {
   values: Record<string, (number | null)[]>
 }
 
+/** 指标卡片：好坏的分界（越低越好）和显示格式。 */
+const TILES: { label: string; key: string; fmt: (v: number | null | undefined) => string; good?: number; poor?: number; unit?: string }[] = [
+  { label: 'UDP 延迟 p50', key: 'rtt.p50', fmt: fmtMs },
+  { label: 'UDP 延迟 p95', key: 'rtt.p95', fmt: fmtMs },
+  { label: 'UDP 丢包', key: 'loss.total', fmt: fmtPct, good: 0.5, poor: 3 },
+  { label: 'UDP 上行丢包', key: 'loss.up', fmt: fmtPct, good: 0.5, poor: 3 },
+  { label: 'UDP 下行丢包', key: 'loss.down', fmt: fmtPct, good: 0.5, poor: 3 },
+  { label: 'UDP 最长连续丢包', key: 'loss.run_max', fmt: fmtNum, unit: '包' },
+  { label: 'UDP 上行抖动 p95', key: 'jitter.up.p95', fmt: fmtMs },
+  { label: 'UDP 下行抖动 p95', key: 'jitter.down.p95', fmt: fmtMs },
+  { label: 'TCP RTT p50', key: 'tcp.rtt.p50', fmt: fmtMs },
+  { label: 'TCP RTT p99', key: 'tcp.rtt.p99', fmt: fmtMs },
+  { label: 'TCP RTT 最大', key: 'tcp.rtt.max', fmt: fmtMs },
+  { label: 'TCP 重传率', key: 'tcp.retrans', fmt: fmtPct, good: 0.5, poor: 3 },
+]
+
+interface ChartDef {
+  id: string
+  title: string
+  unit: string
+  zero?: boolean
+  fill?: boolean
+  series: { key: string; label: string; color: string; dash?: number[] }[]
+  group: 'udp' | 'tcp' | 'score'
+  /** 占满一行。 */
+  wide?: boolean
+}
+
+const GROUPS = [
+  { id: 'udp', title: 'UDP（往返探测）' },
+  { id: 'tcp', title: 'TCP' },
+  { id: 'score', title: '评分' },
+] as const
+
+const CHARTS: ChartDef[] = [
+  { id: 'rtt', title: '延迟', group: 'udp', wide: true, unit: 'ms', series: [{ key: 'rtt.p50', label: 'p50', color: '--chart-1' }, { key: 'rtt.p95', label: 'p95', color: '--chart-2' }, { key: 'rtt.p99', label: 'p99', color: '--chart-3' }] },
+  { id: 'loss', title: '丢包', group: 'udp', unit: '%', series: [{ key: 'loss.up', label: '上行', color: '--chart-2' }, { key: 'loss.down', label: '下行', color: '--chart-3' }, { key: 'loss.total', label: '合计', color: '--chart-1', dash: [4, 3] }] },
+  { id: 'jitter', title: '抖动（p95）', group: 'udp', unit: 'ms', series: [{ key: 'jitter.up.p95', label: '上行', color: '--chart-2' }, { key: 'jitter.down.p95', label: '下行', color: '--chart-1' }] },
+  { id: 'tcp', title: '往返时延（RTT）', group: 'tcp', unit: 'ms', series: [{ key: 'tcp.rtt.p50', label: 'p50', color: '--chart-1' }, { key: 'tcp.rtt.p95', label: 'p95', color: '--chart-2' }, { key: 'tcp.rtt.max', label: '最大', color: '--chart-3' }] },
+  { id: 'retrans', title: '重传率', group: 'tcp', unit: '%', fill: true, series: [{ key: 'tcp.retrans', label: '重传率', color: '--chart-3' }] },
+  { id: 'score', title: '综合评分', group: 'score', wide: true, unit: '', series: [{ key: 'score.reality', label: 'REALITY', color: '--chart-1' }, { key: 'score.hy2', label: 'Hy2', color: '--chart-2' }, { key: 'score.mc', label: 'MC', color: '--chart-4' }, { key: 'score.base', label: '综合', color: '--chart-5', dash: [4, 3] }] },
+]
+
+/** EWMA 平滑的力度：系数越小越平滑（s = α·x + (1−α)·s）。 */
+const EWMA = [
+  { value: 'off', label: '关', alpha: 0 },
+  { value: 'low', label: '轻', alpha: 0.3 },
+  { value: 'mid', label: '中', alpha: 0.1 },
+  { value: 'high', label: '重', alpha: 0.03 },
+] as const
+type EwmaValue = (typeof EWMA)[number]['value']
+
+/** 指数加权移动平均；缺口（没有数据）处断开，缺口后重新开始，不会把缺口两边连在一起。 */
+function ewma(values: (number | null)[], alpha: number): (number | null)[] {
+  let state: number | null = null
+  return values.map((v) => {
+    if (v === null || v === undefined) {
+      state = null
+      return null
+    }
+    state = state === null ? v : alpha * v + (1 - alpha) * state
+    return state
+  })
+}
+
+/** 主机状态：实时数据（SSE）每隔几秒来一次，只重绘这一块，不影响上面的图表。 */
+function HostCard({ agentId, range }: { agentId: string | undefined; range: string | null }) {
+  const history = useQuery(
+    () => (agentId && range ? api.get<HostSeries>(`/api/public/agents/${agentId}/host`, { range }) : Promise.resolve(undefined)),
+    [agentId, range],
+    30_000,
+  )
+  const { hosts } = useHosts()
+  const host = agentId ? hosts.get(agentId)?.host : undefined
+  const data = history.data
+  const charts = useMemo(
+    () =>
+      data
+        ? {
+            usage: [
+              { label: 'CPU', values: data.values['cpu'] ?? [], color: '--chart-1' },
+              { label: '内存', values: data.values['mem'] ?? [], color: '--chart-2' },
+              { label: '磁盘', values: data.values['disk'] ?? [], color: '--chart-4' },
+            ],
+            speed: [
+              { label: '上行', values: data.values['tx_bps'] ?? [], color: '--chart-2' },
+              { label: '下行', values: data.values['rx_bps'] ?? [], color: '--chart-1' },
+            ],
+          }
+        : undefined,
+    [data],
+  )
+  if (!host && !data) return null
+  return (
+    <div className="card">
+      <div className="card-title">主机状态</div>
+      {host ? (
+        <div className="grid stats">
+          <Stat label="CPU" value={host.cpu_percent === null ? '—' : host.cpu_percent.toFixed(0)} unit="%" />
+          <Stat label="内存" value={host.mem_total ? ((100 * (host.mem_used ?? 0)) / host.mem_total).toFixed(0) : '—'} unit="%" />
+          <Stat label="磁盘" value={host.disk_total ? ((100 * (host.disk_used ?? 0)) / host.disk_total).toFixed(0) : '—'} unit="%" />
+          <Stat label="累计流量 ↑ / ↓" value={`${fmtBytes(host.net_tx_total)} / ${fmtBytes(host.net_rx_total)}`} />
+        </div>
+      ) : null}
+      {data && charts ? (
+        <div className="grid cols-2" style={{ marginTop: 16 }}>
+          <TimeChart t={data.t} unit="%" series={charts.usage} />
+          <TimeChart t={data.t} unit=" B/s" series={charts.speed} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
 export function Line() {
   const { id = '' } = useParams()
   const [params, setParams] = useSearchParams()
 
   const line = useQuery(() => api.get<LineDto>(`/api/public/lines/${encodeURIComponent(id)}`), [id], 15_000)
+  const infos = useNodeInfos()
+  const ready = Boolean(line.data)
   const sinceMs = line.data?.data_since ? Date.parse(line.data.data_since) : null
   const nowMs = useMemo(() => Date.now(), [line.data])
-  const spanMs = sinceMs === null ? null : nowMs - sinceMs
+  const todayStart = dayBounds(nowMs).start
 
-  // 时间范围：只提供有数据的档位；URL 里的值如果超出了现有的数据就退回到默认
-  const wanted = params.get('range')
-  const available = availablePresets(spanMs)
-  const preset: PresetValue = PRESETS.some((x) => x.value === wanted) && available.some((x) => x.value === wanted) ? (wanted as PresetValue) : defaultPreset(spanMs)
-  const sliceParam = params.get('slice')
-  const state: RangeState = {
-    preset,
-    month: params.get('month'),
-    slice: SLICES.some((x) => x.value === sliceParam) ? (sliceParam as SliceValue) : 'all',
-    page: Math.max(0, Number(params.get('page') ?? 0) || 0),
-  }
-  const months = useMemo(() => monthsWithData(sinceMs, nowMs), [sinceMs, nowMs])
-  const resolved = resolveRange(state, months, nowMs)
-  const rangeKey = JSON.stringify(resolved.query)
-  const setRange = (next: RangeState) => {
-    const q = new URLSearchParams()
-    if (next.month) {
-      q.set('month', next.month)
-      if (next.slice !== 'all') q.set('slice', next.slice)
-      if (next.page > 0) q.set('page', String(next.page))
-    } else {
-      q.set('range', next.preset)
-    }
+  const spec = readSpec(params)
+  const period = usePeriod(id, ready, sinceMs, nowMs, spec)
+  const series = usePeriodSeries(id, ready, period)
+
+  const update = (fn: (q: URLSearchParams) => void) => {
+    const q = new URLSearchParams(params)
+    fn(q)
     setParams(q, { replace: true })
   }
+  const dayParam = (dayStart: number) => (dayStart === todayStart ? null : dayKey(dayStart))
+  const changeDay = (next: { dayStart: number; window: WindowValue | null }) =>
+    update((q) => writeSpec(q, { ...readSpec(q), day: dayParam(next.dayStart), range: next.window, at: null }))
+  const selectRange = (fromMs: number, toMs: number) =>
+    update((q) => {
+      const a = Math.round((fromMs - period.dayStart) / MIN)
+      const b = Math.round((toMs - period.dayStart) / MIN)
+      writeSpec(q, { ...readSpec(q), day: dayParam(period.dayStart), range: null, at: `${a}_${b}` })
+    })
+  /** 点了一档时长。看的是最新的（今天、选区到现在）就继续看「最近一段」；否则保持选区的起点，往后取这么长。 */
+  const pickLength = (w: WindowValue) =>
+    update((q) => {
+      const base = { ...readSpec(q), day: dayParam(period.dayStart) }
+      const info = WINDOWS.find((x) => x.value === w)!
+      if (w === 'day' || (period.isToday && (period.live || period.toMs >= nowMs - 2 * MIN))) {
+        writeSpec(q, { ...base, range: w, at: null })
+        return
+      }
+      const start = Math.min(period.fromMs, nowMs - info.ms)
+      const a = Math.round((start - period.dayStart) / MIN)
+      writeSpec(q, { ...base, range: null, at: `${a}_${a + info.ms / MIN}` })
+    })
+  const setScale = (scale: 24 | 48) =>
+    update((q) => {
+      const current = readSpec(q)
+      // 换回 24 小时：跨零点的选区放不下了，回到默认
+      writeSpec(q, { ...current, span: scale === 24 ? '24' : null, at: scale === 24 && period.domainMin > 1440 ? null : current.at })
+    })
 
-  const series = useQuery(
-    () => (line.data ? api.get<SeriesDto>(`/api/public/lines/${encodeURIComponent(id)}/series`, { ...resolved.query, preset: 'udp,tcp,scores' }) : Promise.resolve(undefined)),
-    [id, rangeKey, Boolean(line.data)],
-    state.month ? undefined : 10_000,
-  )
   const agentId = line.data?.agent_id
-  const hostHistory = useQuery(
-    () => (agentId && !state.month ? api.get<HostSeries>(`/api/public/agents/${agentId}/host`, { range: resolved.hostRange }) : Promise.resolve(undefined)),
-    [agentId, resolved.hostRange, Boolean(state.month)],
-    30_000,
-  )
-  const { hosts } = useHosts()
-  const host = agentId ? hosts.get(agentId)?.host : undefined
   const lastTestId = line.data?.last_test?.id
   const test = useQuery(() => (lastTestId ? api.get<TestDto>(`/api/public/tests/${lastTestId}`) : Promise.resolve(undefined)), [lastTestId])
 
+  const smooth = EWMA.find((x) => x.value === params.get('ewma')) ?? EWMA[0]
   const s = series.data
-  const col = (key: string): (number | null)[] => s?.values[key] ?? []
   const m = s?.summary.metrics ?? {}
   const gaps = useMemo(() => (s?.gaps ?? []).map((g) => ({ from: Date.parse(g.from), to: Date.parse(g.to) })), [s])
-  const t = s?.t ?? []
 
-  const chart = (title: string, unit: string, list: ChartSeries[], zero = true) =>
-    s && list.some((x) => x.values.some((v) => v !== null)) ? (
-      <div className="card chart-card">
-        <h3>{title}</h3>
-        <TimeChart t={t} series={list} unit={unit} gaps={gaps} zero={zero} />
+  // 图表只在数据变化时更新；别的状态（加载中、实时推送）变化不会让它们闪
+  const charts = useMemo(
+    () =>
+      s
+        ? GROUPS.map((group) => {
+            const cards = CHARTS.filter((def) => def.group === group.id).map((def) => {
+              const raw = def.series.map((x) => ({ x, values: s.values[x.key] ?? [] }))
+              // 开了 EWMA：原始数据画成淡线垫在后面，平滑后的线画在上面
+              const list: ChartSeries[] =
+                smooth.alpha > 0
+                  ? [
+                      ...raw.map(({ x, values }) => ({ label: `${x.label}（原始）`, values, color: x.color, faint: true })),
+                      ...raw.map(({ x, values }) => ({ label: x.label, values: ewma(values, smooth.alpha), color: x.color, dash: x.dash, fill: def.fill })),
+                    ]
+                  : raw.map(({ x, values }) => ({ label: x.label, values, color: x.color, dash: x.dash, fill: def.fill }))
+              if (!list.some((x) => x.values.some((v) => v !== null))) return null
+              return { def, node: <TimeChart t={s.t} series={list} unit={def.unit} gaps={gaps} zero={def.zero !== false} height={def.wide ? 260 : 220} /> }
+            })
+            return { group, cards: cards.filter((c): c is NonNullable<typeof c> => c !== null) }
+          }).filter((g) => g.cards.length > 0)
+        : [],
+    [s, gaps, smooth.alpha],
+  )
+  const loadingNow = !ready || series.busy
+  const chartSections = charts.map(({ group, cards }) => (
+    <section className="chart-section" key={group.id}>
+      <h2>{group.title}</h2>
+      <div className="grid cols-2">
+        {cards.map(({ def, node }) => (
+          <div className={`card chart-card has-loading ${def.wide ? 'wide' : ''}`} key={def.id}>
+            <LoadingBar active={loadingNow} />
+            <h3>{def.title}</h3>
+            {node}
+          </div>
+        ))}
       </div>
-    ) : null
+    </section>
+  ))
 
   const result = test.data?.result
   const peak = result?.metrics?.['tcp.bulk.peak.max']
@@ -109,111 +260,102 @@ export function Line() {
           <div className="row wrap" style={{ marginTop: 12 }}>
             <Dot tone={line.data.online && line.data.probe_connected ? 'ok' : line.data.online ? 'warn' : 'bad'} />
             <span className="muted">{line.data.online ? (line.data.probe_connected ? '在线' : 'Agent 在线，Probe 未连接') : 'Agent 离线'}</span>
+            <span className="row" style={{ gap: 6 }}>
+              <span className="faint">Agent</span>
+              <NodeTag info={infos.get(line.data.agent_id)} />
+            </span>
+            <span className="row" style={{ gap: 6 }}>
+              <span className="faint">Probe</span>
+              <NodeTag info={infos.get(line.data.probe_id)} />
+            </span>
             {line.data.labels.map((x) => (
               <Chip key={x}>{x}</Chip>
             ))}
+            {series.loading && !s ? <Spinner /> : null}
           </div>
         ) : null}
-        <div className="toolbar">
-          <RangePicker state={state} onChange={setRange} sinceMs={sinceMs} nowMs={nowMs} />
-          <span className="right row">
-            <span className="muted">{resolved.label}</span>
-            {series.loading && !s ? <Spinner /> : null}
-          </span>
+        <div style={{ marginTop: 16 }}>
+          <RangePicker
+            dayStart={period.dayStart}
+            fromMs={period.fromMs}
+            toMs={period.toMs}
+            onChange={changeDay}
+            onWindow={pickLength}
+            scale={period.domainMin > 1440 ? 48 : 24}
+            onScale={setScale}
+            sinceMs={sinceMs}
+            nowMs={nowMs}
+            spanMs={period.spanMs}
+          >
+            <Minimap
+              domainStart={period.domainStart}
+              domainMin={period.domainMin}
+              t={period.overview.t}
+              values={period.overview.loss}
+              fromMs={period.fromMs}
+              toMs={period.toMs}
+              loading={!ready || period.busy}
+              onSelect={selectRange}
+            />
+          </RangePicker>
         </div>
       </section>
 
       <PageError error={line.error ?? series.error} />
 
+      {!s && (loadingNow || !line.error) && !series.error ? (
+        // 还没有数据：先摆出占位，每块上面有进度条
+        <div className="stack" style={{ marginTop: 24 }}>
+          <div className="tiles">
+            {Array.from({ length: 12 }, (_, i) => (
+              <div className="skeleton has-loading" key={i}>
+                <LoadingBar active />
+              </div>
+            ))}
+          </div>
+          <div className="skeleton chart has-loading">
+            <LoadingBar active />
+          </div>
+          <div className="grid cols-2">
+            {[0, 1].map((i) => (
+              <div className="skeleton chart has-loading" key={i}>
+                <LoadingBar active />
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
       {s ? (
         <div className="stack" style={{ marginTop: 24 }}>
-          <div className="card">
-            <div className="row wrap" style={{ justifyContent: 'space-between', gap: 24 }}>
-              <div className="grid stats grow">
-                <Stat label="延迟 p50" value={fmtMs(m['rtt.p50'])} />
-                <Stat label="延迟 p95" value={fmtMs(m['rtt.p95'])} />
-                <Stat label="丢包" value={fmtPct(m['loss.total'])} tone={tone(m['loss.total'], 0.5, 3)} />
-                <Stat label="上行丢包" value={fmtPct(m['loss.up'])} tone={tone(m['loss.up'], 0.5, 3)} />
-                <Stat label="下行丢包" value={fmtPct(m['loss.down'])} tone={tone(m['loss.down'], 0.5, 3)} />
-                <Stat label="抖动（上 / 下）" value={`${fmtMs(m['jitter.up.p95'])} / ${fmtMs(m['jitter.down.p95'])}`} />
-              </div>
+          <div className="tiles">
+            <div className="tile scores-tile has-loading">
+              <LoadingBar active={loadingNow} />
+              <span className="k">评分</span>
               <ScoreChips metrics={m} />
             </div>
-            <hr className="divider" />
-            <div className="grid stats">
-              <Stat label="TCP RTT p50" value={fmtMs(m['tcp.rtt.p50'])} />
-              <Stat label="TCP RTT p99" value={fmtMs(m['tcp.rtt.p99'])} />
-              <Stat label="TCP RTT 最大" value={fmtMs(m['tcp.rtt.max'])} />
-              <Stat label="TCP 重传" value={fmtPct(m['tcp.retrans'])} tone={tone(m['tcp.retrans'], 0.5, 3)} />
-              <Stat label="最长连续丢包" value={fmtNum(m['loss.run_max'])} unit="包" />
-              <Stat label="样本数（UDP / TCP）" value={`${fmtNum(s.summary.samples['udp_echo'])} / ${fmtNum(s.summary.samples['tcp_echo'])}`} />
-            </div>
-            {s.summary.coverage < 0.95 ? <p className="faint" style={{ marginTop: 12 }}>这个时间段的数据覆盖率是 {(s.summary.coverage * 100).toFixed(0)}%，阴影部分是没有数据的时段。</p> : null}
+            {TILES.map((t) => (
+              <Stat key={t.key} label={t.label} value={t.fmt(m[t.key])} unit={t.unit} tone={t.good !== undefined ? tone(m[t.key], t.good, t.poor ?? Infinity) : ''} />
+            ))}
           </div>
+          <p className="faint">
+            样本数：UDP {fmtNum(s.summary.samples['udp_echo'])} · TCP {fmtNum(s.summary.samples['tcp_echo'])}
+          </p>
+          {s.summary.coverage < 0.95 ? <p className="faint">这个时间段的数据覆盖率是 {(s.summary.coverage * 100).toFixed(0)}%，阴影部分是没有数据的时段。</p> : null}
 
-          <div className="grid cols-2">
-            {chart('延迟（UDP 往返）', 'ms', [
-              { label: 'p50', values: col('rtt.p50'), color: '--chart-1' },
-              { label: 'p95', values: col('rtt.p95'), color: '--chart-2' },
-              { label: 'p99', values: col('rtt.p99'), color: '--chart-3' },
-            ])}
-            {chart('丢包', '%', [
-              { label: '上行', values: col('loss.up'), color: '--chart-2' },
-              { label: '下行', values: col('loss.down'), color: '--chart-3' },
-              { label: '合计', values: col('loss.total'), color: '--chart-1', dash: [4, 3] },
-            ])}
-            {chart('抖动（p95）', 'ms', [
-              { label: '上行', values: col('jitter.up.p95'), color: '--chart-2' },
-              { label: '下行', values: col('jitter.down.p95'), color: '--chart-1' },
-            ])}
-            {chart('TCP 往返', 'ms', [
-              { label: 'p50', values: col('tcp.rtt.p50'), color: '--chart-1' },
-              { label: 'p95', values: col('tcp.rtt.p95'), color: '--chart-2' },
-              { label: '最大', values: col('tcp.rtt.max'), color: '--chart-3' },
-            ])}
-            {chart('TCP 重传', '%', [{ label: '重传率', values: col('tcp.retrans'), color: '--chart-3', fill: true }])}
-            {chart('综合评分', '', [
-              { label: 'REALITY', values: col('score.reality'), color: '--chart-1' },
-              { label: 'Hy2', values: col('score.hy2'), color: '--chart-2' },
-              { label: 'MC', values: col('score.mc'), color: '--chart-4' },
-              { label: '综合', values: col('score.base'), color: '--chart-5', dash: [4, 3] },
-            ])}
+          <div className="row" style={{ justifyContent: 'flex-end', gap: 8 }}>
+            <span className="faint" title="指数加权移动平均：把线条磨平，看清趋势；原始数据以淡线垫在后面">
+              EWMA 平滑
+            </span>
+            <Segmented<EwmaValue>
+              options={EWMA.map((x) => ({ value: x.value, label: x.label }))}
+              value={smooth.value}
+              onChange={(v) => update((q) => (v === 'off' ? q.delete('ewma') : q.set('ewma', v)))}
+            />
           </div>
+          {chartSections}
 
-          {host || hostHistory.data ? (
-            <div className="card">
-              <div className="card-title">主机状态</div>
-              {host ? (
-                <div className="grid stats">
-                  <Stat label="CPU" value={host.cpu_percent === null ? '—' : host.cpu_percent.toFixed(0)} unit="%" />
-                  <Stat label="内存" value={host.mem_total ? ((100 * (host.mem_used ?? 0)) / host.mem_total).toFixed(0) : '—'} unit="%" />
-                  <Stat label="磁盘" value={host.disk_total ? ((100 * (host.disk_used ?? 0)) / host.disk_total).toFixed(0) : '—'} unit="%" />
-                  <Stat label="累计流量 ↑ / ↓" value={`${fmtBytes(host.net_tx_total)} / ${fmtBytes(host.net_rx_total)}`} />
-                </div>
-              ) : null}
-              {hostHistory.data ? (
-                <div className="grid cols-2" style={{ marginTop: 16 }}>
-                  <TimeChart
-                    t={hostHistory.data.t}
-                    unit="%"
-                    series={[
-                      { label: 'CPU', values: hostHistory.data.values['cpu'] ?? [], color: '--chart-1' },
-                      { label: '内存', values: hostHistory.data.values['mem'] ?? [], color: '--chart-2' },
-                      { label: '磁盘', values: hostHistory.data.values['disk'] ?? [], color: '--chart-4' },
-                    ]}
-                  />
-                  <TimeChart
-                    t={hostHistory.data.t}
-                    unit=" B/s"
-                    series={[
-                      { label: '上行', values: hostHistory.data.values['tx_bps'] ?? [], color: '--chart-2' },
-                      { label: '下行', values: hostHistory.data.values['rx_bps'] ?? [], color: '--chart-1' },
-                    ]}
-                  />
-                </div>
-              ) : null}
-            </div>
-          ) : null}
+          <HostCard agentId={agentId} range={period.hostRange} />
 
           {test.data && result ? (
             <div className="card">

web/display/src/pages/Overview.tsx

@@ -1,16 +1,19 @@
 import { useMemo, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router-dom'
 import { api } from '@shared/api/client'
-import type { OverviewDto, OverviewLineDto } from '@shared/api/types'
-import { fmtAgo, fmtMs, fmtPct } from '@shared/format'
+import type { NodeInfoDto, OverviewDto, OverviewLineDto } from '@shared/api/types'
+import { fmtAgo } from '@shared/format'
 import { useQuery } from '@shared/hooks'
 import { Chip, Dot, Empty, Segmented, Spinner } from '@shared/ui'
 import { fmtBytes, fmtSpeed, fmtUptime, pct, useHosts, type HostItem } from '../live'
-import { PageError, ScoreChips } from '../lib'
+import { Flag, IspIcon, useNodeInfos } from '@shared/nodes'
+import { OsIcon } from '@shared/osIcon'
+import { PageError } from '../lib'
+import { LineStrips, OVERVIEW_RANGES, type OverviewRange } from '../LineStrips'
 
-const METRICS = ['rtt.p50', 'loss.total', 'jitter.up.p95', 'jitter.down.p95', 'score.base', 'score.reality', 'score.hy2', 'score.mc'].join(',')
+const METRICS = ['rtt.p50', 'loss.total', 'loss.up', 'loss.down', 'tcp.rtt.p50', 'tcp.retrans'].join(',')
 
-type SortKey = 'name' | 'rtt' | 'score'
+type SortKey = 'name' | 'rtt' | 'loss'
 
 interface AgentCard {
   id: string
@@ -20,12 +23,6 @@ interface AgentCard {
   lines: OverviewLineDto[]
 }
 
-function tone(value: number | null | undefined, good: number, poor: number): 'ok' | 'warn' | 'bad' | '' {
-  if (value === null || value === undefined) return ''
-  if (value <= good) return 'ok'
-  if (value >= poor) return 'bad'
-  return 'warn'
-}
 
 function Meter({ label, value, detail }: { label: string; value: number | null; detail?: string }) {
   const level = value === null ? '' : value >= 90 ? 'bad' : value >= 75 ? 'warn' : 'ok'
@@ -41,17 +38,49 @@ function Meter({ label, value, detail }: { label: string; value: number | null;
   )
 }
 
-function Card({ agent, host }: { agent: AgentCard; host: HostItem | undefined }) {
+function Card({ agent, host, range, infos }: { agent: AgentCard; host: HostItem | undefined; range: OverviewRange; infos: Map<string, NodeInfoDto> }) {
   const h = host?.host ?? null
   const stale = !agent.online || !host || host.stale
+  const info = infos.get(agent.id)
   return (
     <div className={`card agent-card ${agent.online ? '' : 'offline'}`}>
       <div className="agent-head">
-        <Dot tone={agent.online ? 'ok' : 'bad'} />
+        {/* 有国旗就用国旗开头（在线、离线看右边的标签），没有再用状态点 */}
+        {info?.country ? <Flag code={info.country} /> : <Dot tone={agent.online ? 'ok' : 'bad'} />}
         <span className="agent-name">{agent.name}</span>
         <Chip tone={agent.online ? 'ok' : 'bad'}>{agent.online ? '在线' : '离线'}</Chip>
         {!agent.online && host?.last_seen_at ? <span className="faint">{fmtAgo(host.last_seen_at)}</span> : null}
       </div>
+      {info?.isp_name || info?.os_name || info?.tag || info?.version ? (
+        <div className="facts">
+          {info.isp_name ? (
+            <div className="fact">
+              <span className="k">运营商</span>
+              <span className="v">
+                {info.isp_key ? <IspIcon ispKey={info.isp_key} name={info.isp_name} /> : null}
+                {info.isp_name}
+              </span>
+            </div>
+          ) : null}
+          {info.os_name ? (
+            <div className="fact">
+              <span className="k">系统</span>
+              <span className="v">
+                <OsIcon os={info.os} name={info.os_name} />
+                {[info.os_name, info.arch].filter(Boolean).join(' / ')}
+              </span>
+            </div>
+          ) : null}
+          {info.tag || info.version ? (
+            <div className="fact">
+              <span className="k">版本</span>
+              <span className="v mono-tag" title={info.version ? `版本 ${info.version}` : undefined}>
+                {info.tag || info.version}
+              </span>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
       {agent.labels.length > 0 ? (
         <div className="line-meta">
           {agent.labels.map((x) => (
@@ -65,12 +94,21 @@ function Card({ agent, host }: { agent: AgentCard; host: HostItem | undefined })
           const m = l.summary.metrics
           return (
             <Link key={l.id} to={`/line/${encodeURIComponent(l.id)}`} className="line-link">
-              <span className="muted">→ {l.probe_name}</span>
-              <span className="grow" />
-              {!l.probe_connected && l.online ? <Chip tone="warn">Probe 未连接</Chip> : null}
-              <span className="num">{fmtMs(m['rtt.p50'])}</span>
-              <Chip tone={tone(m['loss.total'], 0.5, 3)}>{fmtPct(m['loss.total'])}</Chip>
-              <ScoreChips metrics={m} compact />
+              <div className="line-top">
+                <span className="line-name">
+                  → {infos.get(l.probe_id)?.country ? <Flag code={infos.get(l.probe_id)!.country!} /> : null}
+                  {l.probe_name}
+                </span>
+                {infos.get(l.probe_id)?.isp_key ? <IspIcon ispKey={infos.get(l.probe_id)!.isp_key!} name={infos.get(l.probe_id)!.isp_name} /> : null}
+                {infos.get(l.probe_id)?.tag || infos.get(l.probe_id)?.version ? (
+                  <span className="probe-tag" title="Probe 版本">
+                    {infos.get(l.probe_id)?.tag || infos.get(l.probe_id)?.version}
+                  </span>
+                ) : null}
+                <span className="faint">近 {OVERVIEW_RANGES.find((r) => r.value === range)?.label ?? range}</span>
+                {!l.probe_connected && l.online ? <Chip tone="warn">Probe 未连接</Chip> : null}
+              </div>
+              <LineStrips lineId={l.id} range={range} m={m} />
             </Link>
           )
         })}
@@ -113,7 +151,21 @@ export function Overview() {
   const [probe, setProbe] = useState<string>('')
   const [sort, setSort] = useState<SortKey>('name')
   const { hosts, live } = useHosts()
-  const { data, error, loading } = useQuery(() => api.get<OverviewDto>('/api/public/overview', { range: '15m', metrics: METRICS }), [], 10_000)
+  const infos = useNodeInfos()
+  // 近多久的汇总和走势：3 / 6 / 12 小时，记在链接里（?range=6h）
+  const [params, setParams] = useSearchParams()
+  const range: OverviewRange = OVERVIEW_RANGES.find((r) => r.value === params.get('range'))?.value ?? '3h'
+  const setRange = (v: OverviewRange) =>
+    setParams(
+      (prev) => {
+        const next = new URLSearchParams(prev)
+        if (v === '3h') next.delete('range')
+        else next.set('range', v)
+        return next
+      },
+      { replace: true },
+    )
+  const { data, error, loading } = useQuery(() => api.get<OverviewDto>('/api/public/overview', { range, metrics: METRICS }), [range], 10_000)
 
   const probes = useMemo(() => [...new Set((data?.lines ?? []).map((l) => l.probe_name))].sort(), [data])
   const cards = useMemo(() => {
@@ -131,13 +183,13 @@ export function Overview() {
     return [...byAgent.values()].sort((a, b) => {
       if (a.online !== b.online) return a.online ? -1 : 1
       if (sort === 'name') return a.name.localeCompare(b.name)
-      const key = sort === 'rtt' ? 'rtt.p50' : 'score.base'
-      const x = best(a, key, sort === 'rtt' ? Math.min : Math.max)
-      const y = best(b, key, sort === 'rtt' ? Math.min : Math.max)
+      const key = sort === 'rtt' ? 'rtt.p50' : 'loss.total'
+      const x = best(a, key, Math.min)
+      const y = best(b, key, Math.min)
       if (x === null && y === null) return a.name.localeCompare(b.name)
       if (x === null) return 1
       if (y === null) return -1
-      return sort === 'rtt' ? x - y : y - x
+      return x - y
     })
   }, [data, probe, sort])
 
@@ -146,7 +198,7 @@ export function Overview() {
   return (
     <main className="page">
       <section className="hero">
-        <h1>线路质量</h1>
+        <h1>总览</h1>
         <p className="sub">
           {data ? `${online} / ${cards.length} 台在线` : '加载中…'}
           <span className={`live-dot ${live ? 'on' : ''}`} title={live ? '实时更新中' : '实时连接中断，正在重连'} />
@@ -154,11 +206,12 @@ export function Overview() {
         <div className="toolbar">
           {probes.length > 1 ? <Segmented options={[{ value: '', label: '全部 Probe' }, ...probes.map((p) => ({ value: p, label: p }))]} value={probe} onChange={setProbe} /> : null}
           <span className="right row">
+            <Segmented<OverviewRange> options={OVERVIEW_RANGES.map((r) => ({ value: r.value, label: `近 ${r.label}` }))} value={range} onChange={setRange} />
             <Segmented
               options={[
                 { value: 'name' as const, label: '名称' },
                 { value: 'rtt' as const, label: '延迟' },
-                { value: 'score' as const, label: '评分' },
+                { value: 'loss' as const, label: '丢包' },
               ]}
               value={sort}
               onChange={setSort}
@@ -178,7 +231,7 @@ export function Overview() {
         ) : (
           <div className="cards">
             {cards.map((c) => (
-              <Card key={c.id} agent={c} host={hosts.get(c.id)} />
+              <Card key={c.id} agent={c} host={hosts.get(c.id)} range={range} infos={infos} />
             ))}
           </div>
         )