🟡 P1 dashboard 拓扑图前缀组标签太大太丑 — 移到框右下角小字 (Vincent /goal 5401)

[s2agi]

🟡 P1 dashboard 拓扑图前缀组标签太大太丑 — 移到框右下角小字

Vincent /goal (telegram 5401, 2026-05-17 07:55 北京) + screenshot 实测: "下个版本也把这个问题修一下，dash 网络图里面这个工程的名字也太大了，超级丑，尝试新的展示方案，比如都放到框的右下角的小字"

🩹 现象 (Vincent screenshot)

7 个 prefix group cluster boxes 的标签 (ai-insight · 6 / blueleap · 3 / agent-network-dashboard · 2 / p-station · 4 / pay-blueleap · 3 / 群星马 · 5 / agent-orchestra · 7) 当前实施:

• 位置: 左上角 (cluster box outside, monospace font)
• 大小: 较大 (覆盖到 cluster 节点区域)
• 视觉冲击: 红色圈出来的「超级丑」
• 问题: 跟 node 内容竞争空间, 喧宾夺主

💡 方案

A 推荐: 标签移到 cluster box 右下角, 小字 + 弱化色 (Vincent 5401 直接建议)

• font-size: 较小 (例如 fontSize=9 + opacity 0.6)
• position: bottom-right of cluster bbox
• bg: 透明 / 弱化 chip 风格
• 信息密度不变, 但不抢视觉焦点

B 备选: 浮动 chip — 鼠标 hover cluster box 才显示标签, 鼠标离开消失

• 默认空 visual, hover 才 reveal
• 信息密度降但 UX 干净

C 备选: 渐变 — 字体仍在左上角但 opacity 0.3 默认, hover cluster 才提到 1.0

• 改动最小, 保留位置

🎯 v0.11.0 fold-in

加到 #144 Hero D (或单独 P1 issue)。N站马 + N站牛 (codex) 拓扑图前端 owner。

📎 Related

• #116 dashboard 拓扑图持续优化 loop (N站马 polish cron umbrella, R317-R402 已 80-round)
• #144 v0.11.0 umbrella stub
• #83 prefix-group 聚拢 (上次 Vincent push 已 ship)
• #146 rename hot-reload — 当前 v0.10.2 P0 chain (并行)

Author-Agent: 通信龙 (Vincent /goal 5401 telegram + screenshot)

[s2agi]

✅ Hero D ship — Option C pivot (shrink + dim, top-left kept)

Owner: N站马 · Ship: 2026-05-17 北京 09:00 · Preview: @sleep2agi/agent-network-dashboard@0.5.1-preview.125

🎯 实施差异 (Vincent 5401 suggested "bottom-right" → 实际 ship "top-left shrink+dim")

Pivot 原因: Option A (literal bottom-right) 第一次 attempt → topo-overlap-test 报 7 grid collisions (label 移到 bottom-right 会撞到 cluster 内 node row 底边 + 下个 cluster 顶边)。结构上需要扩 cluster cellH 加 GROUP_BOTTOM padding, 大改 layout, 属于 #147a 后续 RFC scope。

Pivot 方案 (Option C): 保留 top-left 位置, 通过 shrink + dim 达到「不喧宾夺主」目标:

Attribute	Pre-R	Post-R	Delta
<text> fontSize	13	9	−31%
<text> opacity	1.0	0.55 rest / 1.0 hover+pin	rest −45% alpha
<tspan> count fontSize	11	8	−27%
Hitbox rect width × height	240 × 20	160 × 18	shrink −33% × −10%
Position	top-left	top-left (kept)	unchanged

Visual outcome (后图): labels 从「dominant ink」降级为「faint top-left tags」, 不再跟 node row + avatar 竞争视觉焦点。

📸 Evidence

• After screenshot: screenshots/v0.11.0-147/after.png (4 cluster boxes — agent-network-dashboard-nod / ai-insight-node / p-station-node / pay-blueleap-node)
• Commits:
  • cc6178e feat: prefix-group label shrink + dim
  • 8e20da7 chore: v0.11.0 prefix-group label fix screenshot evidence
• npm: 0.5.1-preview.125 (Vincent 实测可 npx @sleep2agi/agent-network-dashboard@0.5.1-preview.125 verify)

🔍 Vincent ack 决策点

Q: Option C (shrink+dim, top-left kept) 满足 "太大太丑" 体感, 还是必须 literal bottom-right?

• 如 OK → close 🟡 P1 dashboard 拓扑图前缀组标签太大太丑 — 移到框右下角小字 (Vincent /goal 5401) #147, v0.11.0 Hero D ✅ ship
• 如 必须 bottom-right → open #147a "cluster cellH + GROUP_BOTTOM padding RFC" (Layout 结构性改动, ~1-2d ETA, 走 RFC review)

📋 Cross-link

• #144 v0.11.0 Hero D umbrella
• #83 prefix-group 聚拢 (上次 ship 的 baseline)
• #116 dashboard 持续优化 loop (N站马 polish cron umbrella)

per methodology.md issue-centric — Vincent ack 后 close。

Author-Agent: 通信龙 (N站马 implementation, 通信龙 evidence consolidation)

[s2agi]

✅ #147 CLOSED — Vincent ack tg 5423 09:10 北京 "你继续吧"

🎯 4-element close protocol (per methodology.md §1.3)

维度	内容
版本	@sleep2agi/agent-network-dashboard@0.5.1-preview.125 (in v0.11.0 Hero D umbrella, will fold to dashboard@0.6.0 latest)
How	Option C pivot — top-left 保留位置 + shrink (<text> fontSize 13→9, count 11→8) + dim (opacity 1.0→0.55 rest, 1.0 hover/pin) + hitbox 240×20 → 160×18. Option A (literal bottom-right) 试过, 7 grid collisions due to cluster cellH structural; 留作 #147a 未来 RFC slot
Who	N站马 implementation (commit cc6178e + 8e20da7)
Verify	Screenshot screenshots/v0.11.0-147/after.png — Telegram sent Vincent 09:04, 5423 ack 09:10. topo-overlap-test grid+ring ZERO OVERLAP 通过

📊 v0.11.0 Hero D — DONE (early, ahead of schedule)

Original ETA ~0.5d, 实际 ~30min ship + 10min Vincent ack。Saved time → fold-in #146 rename hot-reload more comfortable。

📎 Cross-link

• #144 v0.11.0 umbrella — body 将更新 Hero D ✅
• #116 dashboard polish loop umbrella

Author-Agent: 通信龙 (N站马 ship + Vincent visual ack 5423)