[feature][P0] Dashboard 拓扑图前端展示+交互 — 持续优化 loop (N站马 5min 自迭代)

[s2agi]

背景

Vincent 2026-05-15 P0 指令：N站马 启动一个 /loop 5min 自迭代循环，持续优化 dashboard 拓扑图（TopoGraph）的前端展示与交互，每轮 ship 一个 preview + commit/push 到 GitHub。

这个 issue 是该 loop 的滚动追踪器 —— N站马 每轮把进展更新到本 issue 评论（类似 #62 之于通信龙巡检 loop、#10 之于文档 loop）。

范围

拓扑图前端展示 + 交互的持续打磨：

• 节点视觉（尺寸 / 配色 / 厂商标识 / 状态指示）
• 布局（间距 / 分组 / 呼吸感 / 自适应）
• 动效（连线 / 消息流动 / 状态切换过渡）
• 交互手感（hover / 点击 / zoom / pan / 拖拽 / 全屏）
• 信息密度与可读性

硬约束：零重叠 —— 节点 / label / overlay 面板 / 分组框 之间任何元素都不能重叠。每轮 ship 前自检 ring + grid 两种 layout、当前节点规模。

执行方式

• N站马 /loop 5m，每轮挑一个可见改进点做掉
• 每轮 ship 一个 dashboard preview 版本
• 每轮 commit + push 到 GitHub（commit 不加 Co-Authored-By）
• 每轮进展更新到本 issue 评论

优先级 / Owner

P0 · Owner: N站马

Related

• [feature][P0] Dashboard 拓扑图 — overlay 面板遮挡角落节点 + 视觉效果提升 #112 拓扑图整体视觉重做 umbrella（含 [feature][P0] Dashboard 拓扑图 — 节点尺寸偏大，调小 + 加尺寸调节控件 #113 节点尺寸）—— 本 loop 第一轮先收尾 [feature][P0] Dashboard 拓扑图 — overlay 面板遮挡角落节点 + 视觉效果提升 #112 的零重叠
• [feature][P0] Dashboard 拓扑图 — 节点尺寸偏大，调小 + 加尺寸调节控件 #113 节点尺寸 + 尺寸调节控件
• [feature][P3] Dashboard 不同的 Demo 是否可以有不同的 dash 展现形式，与更好的视觉冲击力 #73 不同 Demo 不同 dash 展现形式
• [feature][P3] Dashboard 前端不断进化 #9 Dashboard 前端不断进化（总 umbrella）

---

Round 结果 + 下一步规划

Round 0（issue 创建 — 北京 2026-05-15 ~10:40）

• 已完成：[feature][P0] Dashboard 拓扑图 — overlay 面板遮挡角落节点 + 视觉效果提升 #112 节点尺寸 + S/M/L 控件已 ship preview.8；label 重叠根因已定位修复（GROUP_TOP 改节点半径派生）
• 进行中：节点间距加大、ring 零重叠、Playwright 重叠检测 test → preview.9
• 下一步规划：
  1. preview.9 — 零重叠达标（workdir 分组框 label 不再糊节点）
  2. 启动 /loop 5m，进入持续打磨循环
  3. 后续轮次方向候选：连线动效 / hover 信息卡 / 节点状态过渡动画 / 配色体系 / 大规模节点（30+）布局优化 / 移动端适配
• N站马 接手后每轮追加 Round 评论。

[s2agi]

Round 1 — #112 收尾零重叠 ✅

ship: dashboard 0.4.6-preview.9, commit a97270e

两个结构性修复，让零重叠对所有 layout 鲁棒

1. overlay 面板缩进角落三角区
recent-signal/legend 压缩成 230×84 / 224×96，挪到 (16,16) / (760,16)。每个面板的内角到画布中心 (500,330) 的距离 > 325 → 完全在外环 (offline ring r=325) 之外。任何 ring 上的节点都到不了角落三角区，所以无论 ring/grid 布局，面板永远不和节点重叠。Grid gy0 也从 184 提到 126（面板变矮腾出空间）。

2. 分组框 label 改成节点半径派生
之前 GROUP_TOP 是 cellH * 0.4，band 多时被压到比节点半径还小 → label 糊到最左列节点上（你截图反映的就是这个）。现在 GROUP_TOP = nodeR + 20，固定相对节点尺寸；cellH 下限 = max(2·nodeR + 22, GROUP_TOP + 12)，保证 node↔label-of-row-above + box↔box stacking 永远有真实间隙。

Playwright 零重叠检测（新增）

scripts/topo-overlap-test.mjs —— 30 节点 × ring+grid，程序化检测 4 类重叠：node↔node / node↔panel / node↔label / box↔box。

✅ [grid] nodes=30 groups=6 — node↔node:0 node↔panel:0 node↔label:0 box↔box:0
✅ [ring] nodes=30 groups=0 — node↔node:0 node↔panel:0 node↔label:0 box↔box:0
✅ ZERO OVERLAP

回归（之前的 5 套 + 新 p0round 测试）：layout / vendor / groupbox / rename / chat-theme / p0round 全绿。chat-popover 桌面 3 档 绿，mobile fullscreen flaky（pre-existing，跟本 round 改动无关）。

下一轮规划

零重叠硬约束达成 ✅。后续每 5min loop round 挑一个可见的 TopoGraph 改进点：动效（hover/click feedback）、节点信息密度（hover 卡片）、配色一致性、布局呼吸感细调…… 第二轮先选低风险的 hover/click 反馈打磨。

[s2agi]

Round 2 — 节点 hover 反馈环 ✅

ship: dashboard 0.4.6-preview.10

拓扑图节点 hover 时淡入一个外环，给出「这里能点」的视觉反馈（之前只有 cursor 变 pointer，光标变化太弱）。纯 CSS group-hover，零 React state、零每帧开销；通过全局 prefers-reduced-motion 媒体查询尊重无障碍偏好（fade 自动跳过）。

stroke-width 选 "2"，避开 status-ring 的 1.5/3 选择器（之前一开始用 1.5 让零重叠检测把 hover 环误判成节点 → 11 个 false-positive 重叠，5 秒发现并修了）。

零重叠 gate: grid+ring 双绿；chat-popover regression desktop 3 档绿。

下一轮规划: 点击反馈（click ripple）或节点 hover 状态卡片信息密度提升。

[s2agi]

Round 3 — 节点 mount fade-in（呼吸感）✅

ship: dashboard 0.4.6-preview.11

每个节点 <g> 加了 anet-fade-in —— 新 session 进入 fleet 时，或拓扑首次渲染时，节点用 150ms opacity 0→1 渐入；不再是「啪」一下出现。状态变化 / 重渲染不会重新触发（React 按 alias key 复用 <g>）。prefers-reduced-motion 自动跳过（round 29 全局 sweep 已覆盖）。

零行业务逻辑改动 —— 一个 className 就让整个拓扑「活了」。零重叠 gate 双绿。

下一轮规划：点击 ripple，或者节点状态改变时的颜色 transition 平滑化（避免色彩瞬切）。

[s2agi]

Round 4 — 节点状态色平滑过渡 ✅

ship: dashboard 0.4.6-preview.12

节点的 halo 和 status ring 两个 circle 现在用 CSS transition-[fill,stroke] 平滑过渡颜色（300ms ease-out）。idle ↔ working ↔ offline 之间状态变化（task replies / node-rename / SSE 更新）颜色淡入淡出而不是瞬切，少了「色彩抽搐」感。

stroke-width / strokeDasharray 不过渡（online↔offline 是少见的结构性变化，dasharray jump 过渡反而更难看）。纯 CSS、零 JS 成本、reduced-motion 全局媒体查询自动覆盖。

零重叠 gate 双绿。

下一轮规划：节点点击 ripple；或者 hover 时显示一个简洁的「agent inspect」卡片（vendor + model + runtime + status + last_seen）替代当前的 native title tooltip。

[s2agi]

Round 5 — #119 Servers drawer mock UI ✅

ship: dashboard 0.4.6-preview.13

#119 fold-in：右侧 collapsible drawer 列 hub 接入的服务器，每个 server 卡片显示 hostname / CPU bar / RAM bar / agent 数。默认收起 40px icon-only 不抢拓扑横向空间，展开 296px。bar 按使用率配色（green ≤60% / amber 60–85% / red >85%），眼睛先找到快爆的那台。

Round 5 是 UI mock：数据按 #119 ASCII 规格写死了 3 个 server（iZrj93pr 本机 30 agents / iZ0jlc8 1 agent / elaine-Sys 2 agents offline），让 Vincent / 团队先校验布局。卡片 schema 跟 issue 规格 1:1，等 agent-node host 元 + CommHub /api/servers ready，把 MOCK_SERVERS 换成 useSWR('/api/hub/servers') —— 一行 source swap，零渲染变更。

Drawer state 持久化（localStorage anet-servers-drawer），跟 topo layout/view 同款。AppShell 挂载所有登录后页面都有；移动端 lg 断点以下隐藏避免拥挤。Theme-aware 用 CSS 设计令牌（没有硬编码 hex）。

零重叠 gate 双绿 —— drawer 是 position:fixed，在 SVG 外，节点几何不变。

下一轮规划：① 点击 ripple（小） ② 节点 hover 详情卡（替代 native title tooltip） ③ #119 真数据接入（等 server endpoint，先做不了）。倾向 ②，富 hover 卡片提升信息密度。

[s2agi]

Round 6 — 拓扑头部加 fleet 厂商分布 chip ✅

ship: dashboard 0.4.6-preview.14

拓扑图 header 加了一条 chip 显示舰队按 model 厂商的分布：A:5 M:2 O:8 书:12 ?:3。每个厂商首字母按 monogram 颜色（继承 #96 的 vendorIdentity 映射），后接 count，按数量降序。只有一个厂商时不显示（无信号则不噪音）。

放在 header 的 Ring|Grid / working / online / vendors / active links 序列里，鉴于 lead 关心舰队多样性（「我们是不是全压一个模型？」）。一眼可见、不开节点 tooltip。

零 SVG 改动 — 是 header 元素，不影响 topo 几何。零重叠 gate 双绿。

下一轮规划：① 节点 hover 详情卡（仍欠 — 转场更深，需要小心 positioning） ② 节点状态色平滑过渡（已 Round 4 做过） ③ TopoGraph header 视觉再打磨 ④ 流连线（flow links）样式 / 速度调节。倾向 ① 或 ④。

[s2agi]

Round 7 — 消息流连线随流量律动、随距离弯曲 ✅

ship: dashboard 0.4.6-preview.15

两个 flow-link 细节优化：

1. 粒子周期随 link.count 缩短 —— duration = max(0.9, 2.6/√count)。4 倍流量的边 ≈ 2 倍速脉冲，眼睛一扫就看到「谁在热聊」。原来 duration = 2.2 + (index%5)*0.32 是 index 周期化，跟实际流量无关，不传信号。stroke-width 还按 count 走（粗细=量级），新加的速度 = 节奏，互补。

2. 曲线 lift 跟距离成比例 —— lift = sign·min(36, dist·0.18)。短链（grid 相邻 cell）原来强行 ±36 像素弯成驼峰；现在按距离比例，短链平直、长链保留曲线避免叠在邻居身上。

零节点几何改动，零重叠 gate 双绿。

下一轮规划：节点 hover 详情卡（一直欠的那个），或者 group box 悬停高亮（hover 某组让其它组淡出，focus on 一组）。倾向后者，无 positioning 风险。

[s2agi]

Round 8 — 节点 hover 时组内聚焦、组外淡出 ✅

ship: dashboard 0.4.6-preview.16

hover 任一节点 → 其它组的节点 + 其它组框淡到 28-32% 透明度，被 hover 的那一组保持满不透明。一眼看清「这个节点属于哪个团队、这个团队多大」。singleton 用自己 alias 作组键，hover 单节点只孤立它自己。

实现：原 hoveredAlias state（之前只在 denseLayout 下用于密集 label）取消密度门，全密度都生效。透明度走已有 transition-opacity Tailwind 类，零新 keyframes，全局 prefers-reduced-motion 自动跳过。

零节点几何改动；只动 opacity；零重叠 gate 双绿。

下一轮规划：① 节点 hover 详情卡（仍欠） ② 拓扑图首次入场动画（整图淡入+轻微 stagger）③ 状态色系微调（cyber+light 一致性 sweep）。倾向 ② 或 ③。

[s2agi]

Round 9 — 拓扑首次入场 stagger 动画 ✅

ship: dashboard 0.4.6-preview.17

每个节点的 anet-fade-in 加了 animation-delay = min(index, 24) × 25ms，首次绘制时拓扑像波浪一样依序铺开，而不是同步 pop。50 节点上限 600ms 全部进场（不会拖太长）。

只对 keyframe 生效；状态变化 / hover / pan / zoom 都不重 mount（React 按 alias key 保活），所以不会重新 stagger。prefers-reduced-motion 全局媒体查询自动跳过。

零节点几何改动，零重叠 gate 双绿。

下一轮规划：cyber/light 状态色一致性 sweep（status.primary/halo/text 跨主题对齐）或 hub 中心更克制（active-pulse 噪音感稍强）。

[s2agi]

Round 10 — flow links freshness fade ✅

ship: dashboard 0.4.6-preview.18

每条消息流连线现在记 from→to 配对的最近 message 时间戳。渲染时算 freshness：≤30s 满强度，5 分钟内线性衰减到 35%，之后保底 —— 主路径 / dashed overlay / 粒子三件套都按这个因子缩放，配 transition-opacity 平滑过渡。

效果：眼睛先抓到「正在聊」的边，5 分钟前的边后退成背景，不完全隐藏（还保留拓扑关系上下文）。now 在 useMemo 每次重算时捕获（5s 一次跟 messages 刷新），精度够。

零节点几何改动；零重叠 gate 双绿。

下一轮规划：① cyber/light status 色 sweep（一致性 audit） ② TopoGraph 首屏空状态打磨 ③ /node 详情页 deep link（点节点头像或浮窗里加跳转）。倾向 ②。