flvx/plans/050-monitor-tunnel-top-level.md

# 050 - 监控页面隧道独立入口

## 背景
当前监控页面的隧道流量监控嵌套在节点详情内，用户需要先点击某个节点才能看到隧道流量。
需要将隧道监控提升为与节点列表同级的入口，展示隧道质量（延迟）和流量统计。

## 设计

### 监控页面结构变更
在 `monitor.tsx` 页面增加 Tab 式结构（或并列区域），新增"隧道监控"入口与节点列表同级：
- **节点** Tab：保持现有节点卡片/列表 + 详情视图
- **隧道** Tab：新增隧道卡片/列表视图
  - 每个隧道卡片显示：隧道名称、状态、质量指标（入口→出口延迟、出口→Bing TCP延迟）
  - 点击隧道进入详情：隧道流量趋势图表（已有的 tunnel metrics chart）

### 隧道质量指标
使用已有的隧道诊断 API (`/tunnel/diagnose`) 进行 TCP 延迟测试：
- 入口→出口延迟
- 出口→Bing TCP 延迟（bing.com:443）

新增一个轻量级的后端 API 来获取隧道质量快照（定时 TCP 测试延迟），
或者前端在隧道 Tab 里手动触发诊断。

### 实现方案（前端为主）
由于后端已有完整的 tunnel metrics 和 diagnosis API，本次改动主要在前端：

1. `monitor.tsx` 增加 Tab 切换（节点 / 隧道）
2. 新建 `tunnel-monitor-view.tsx` 组件
3. 隧道列表用卡片展示质量指标
4. 点击进入隧道详情，展示流量图表
5. 从 `monitor-view.tsx` 的节点详情中移除隧道流量图表

## 任务清单

- [x] 1. 修改 `monitor.tsx`，增加节点/隧道 Tab 切换
- [x] 2. 新建 `tunnel-monitor-view.tsx` 组件，实现隧道列表视图
- [x] 3. 隧道卡片展示名称、状态、质量指标（支持手动诊断获取延迟）
- [x] 4. 隧道详情视图，展示流量趋势图表（复用已有 tunnel metrics API）
- [x] 5. 从节点详情视图中移除隧道流量图表
- [x] 6. TypeScript 编译通过验证