# Global Packet Flow > 从全卡、多核或分布式日志制作多屏联动数据流网图。控制页只放操作、表格与证据，多个独立动画 HTML 可自由布局并共享时间；必须保留 slot×block 逐位置填充和等待状态。支持双端筛选、512 组合以内原子信包时序、group/rank 完成曲线与 P10/P50/P90/P100、包/tick 吞吐及组成，可配置 B/包和 μs/cycle。区分观测时间与真实发送时间、物理带宽与未校准时钟。 - Skill: `kirrito-k423/global-packet-flow` (Agent Skill, multi-file: 19 files) - Install (CLI): `npx skillmds@latest add kirrito-k423/global-packet-flow` - Raw SKILL.md: https://api.skillmd.com/api/skills/kirrito-k423/global-packet-flow/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: Kirrito-k423 (https://skillmd.com/u/kirrito-k423) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/kirrito-k423/global-packet-flow --- # 全局数据包流动网图 默认交付一个控制页和多个能实际联动的动画 HTML，适合拖到不同窗口和屏幕自由布局。`control.html` 只放操作、表格、日志证据和辅助说明，不重复绘制动画或曲线。`visual.html` 可跟随控制页；`visual-flow.html`、`visual-flags.html`、`visual-packets.html`、`visual-curves.html`、`visual-bandwidth.html` 分别固定网图、到达位图、信包时序、完成度和带宽视图。允许重复打开同一种动画页。未筛选时展示全量发送和接收对象；筛选后按两侧各自的范围重排并放大，只呈现范围内对象。不要用若干演示 rank 替代真实数据。 ## 先建立证据边界 1. 获取最新原始附件，记录 URL、评论编号、文件哈希和源码提交。保留原始日志；复用已解析数据前核对输入哈希。逐 rank、逐核核对实际 launch 数，不把发送 group、warmup、重复参数当作 launch。 2. 读发送分工、目标路由、接收分工、flag 映射和复制门槛。分别列出发送核、接收核、网络搬运引擎；发送核可能只提交 WQE，并非逐字节搬运数据。 3. 定义最小**可观察**单元。一个 flag 对应 512B 块时，画该块而不是伪造网卡包。记录载荷、flag、token、slot 和原输入 tokenId 的区别；没有输入 tokenId 时只标接收 slot。 4. 逐项标记实测、源码推导、未知。没有发送日志时，发送核只能由可验证公式推导，不能声称实测发送时间、在途时间或 SQ。缺失记录与值为零、零 token 任务分别处理。 5. 按 [数据契约](references/data-contract.md) 建模，先验证守恒与边界，再绘图。大整数 tick 先做整数差；原始 tick 以字符串保存。未校准时默认按接收 rank 入口对齐，并在主画面持续说明这不是全局物理时间。 ## 设计交互 - 动画页左侧发送 rank×核，右侧接收 rank×核，用 Canvas 保留当前范围的全部对象；未筛选时就是全量。两侧布局分别计算，单来源不能仍占全卡网图的一个微小格。保留所选 rank 的所有核，无任务核空心显示；足够大时标明核编号。控制页集中放播放、速度、筛选、定位、任务选择、slot 翻页、逐块证据与完整说明。 - 遵循 [多屏联动约定](references/dual-screen.md)。同步 launch、时间锚点、播放状态、速度、筛选、接收核、任务、slot 页与块选择；窗口视图独立，不能因某页切图把其他固定动画页一起切走。提供“独立视图/跟随控制页”选择。动画页点选必须反向定位控制页；新开页面和刷新接续当前状态。页面互相提供带同一会话参数的入口和全屏按钮。 - 给角色独立标识，允许按 launch、group、来源 rank、目的 rank 筛选。发送 group 不替代 launch；未获得的 launch 显示缺失而不是复制已有数据。 - 发送核点击收窄来源，接收核点击收窄目的，始终保留另一端和 group 条件。任务下拉、详情、连线与统计必须同范围；切筛选后选择有效任务，不能暗中显示范围外的详情。无关联任务时明确显示空状态。 - 按 [双端聚焦与原子时序](references/packet-timeline.md) 实现来源×目的组合图。组合数 ≤512 时自动在网图下呈现时序预览，并提供展开视图；横轴是证据支持的时间，纵轴是来源→目的组合，每个点对应一个稳定身份的原子包。游标经过其完成观测时改变状态；倒退必须恢复。提供发送优先/接收优先排序、组合分页、缩放和重合点的完整包清单。没有发送日志时标题必须使用“首次就绪观测时序”，不能把首次观察当作真实发送。 - 必须同时交付全局流动网图与 [时间完成度曲线](references/progress-curves.md)，动画窗口可以独立切换视图，控制页保留设置和表格。提供不同 group 对比、每个 group 的全部 rank 对比、任一 rank 内各 group 对比；区分接收 rank 与来源 rank 汇总口径。表格列出起点证据、P10/P50/P90/P100 与尾段，点击节点同步定位动画时间。不能只用连线动画替代趋势曲线。 - 同时交付 [区间带宽与组成](references/bandwidth.md) 视图。以相邻测量点的新增首次就绪包数除以 tick 差，保留原始包/tick；提供 B/包、μs/cycle 配置与 GB/s 换算。总量与 group/rank 两套堆叠必须逐区间守恒，支持固定 tick 窗口、精确区间定位、完整贡献表和 CSV。默认排除本机复制，首测之前与末测之后保持未知；没有校准时钟和链路计数器时只能称为观测吞吐。 - 以真实位图观察更新接收状态。区分未观察、观察为零、观察为一、已消费、无任务。首个一只证明该观察区间内已就绪；此前没有零记录时不能声称知道到达下界。 - 连线对应可追溯的来源、发送核和接收核。未获得真实发送时刻时，将运动说明为视觉提示，不让轨迹长度或速度暗示带宽、距离、延迟。暂停后保留当前窗口的连线与新增块。 - 全局概览可合并同一对端连线并限制绘制数量，必须显示合并规则、已绘数量和总量；统计和块状态不得因此采样。提供放大或筛选后查看全部细节的方法。 - 提供播放、暂停、拖动、前后观察、回到起点、跳到末尾、速度调整；切轮和筛选必须重算状态，倒放不能保留未来数据。 - 点选接收核后列出所有负责任务，包含零 token；可选任一任务查看 slot×block 位图及每块首次一的记录、此前零的范围、复制时刻与原始行号。网图底部必须始终保留此位图，不能因筛选后出现原子时序预览而隐藏。独立到达位图页显示放大的逐位置状态、行列编号、就绪/观察零/未观察/已复制计数、图例、slot 翻页和点击证据。倒退恢复此前状态；未观察不能涂成零。保留原始观察，不用动画插值改写事实。 - 使用清晰的白底、可读的 rank 标签和独立连线层。遵守减弱动态效果偏好，支持键盘选择；窄屏可滚动细节，不得裁掉核心控制项。 ## 实现与验证 使用 `scripts/render.py 模型.json --output 产物目录/index.html` 生成 `control.html`、`visual.html`、五种 `visual-*.html` 与兼容入口 `index.html`。所有实际页面都内嵌同一压缩模型、样式和脚本，不请求第三方资源。具体日志适配器放在业务产物目录，通用规则留在本技能。若业务已有便携导出，同步更新分享包的全部动画文件；明确单文件离线合并模式与多屏控制模式的分工区别。 通过同一静态 HTTP 服务打开两页，例如 `python3 -m http.server 18828 --bind 127.0.0.1 --directory 产物目录`。两页使用相同 `?session=名称`，在同一浏览器配置中共享状态；交付时启动服务并给出两个可点击 HTTP 链接及重启命令。直接打开 `file://` 只能预览，必须明确提示未联动，不能假装连接成功。 该模板面向接收位图观测回放；若数据包含真实发送事件或校准时钟，先扩展契约与页面说明再使用，不能把现有推导连线升级命名为实测轨迹。 验证每个 rank 的轮次数、每核记录序号、位图掩码、prefix、复制计数、dropped、未知数量及跨轮隔离。证明每个块最多计入一次首次到达，最终总块数等于有效 token 数乘每 token 块数；不完整输入必须报出具体缺口。 运行 `node scripts/test_progress.cjs` 检查按块加权阈值、并列时间、阶梯查询、筛选、接收/来源口径和未达状态。用独立逐块首次到达排序复算真实模型的节点，核对每个 rank×group，不仅抽看几条曲线。完整曲线可用于复盘，但要说明它包含当前游标之后的观测；当前动画填充仍只使用游标之前的数据。 运行 `node scripts/test_bandwidth.cjs` 检查首测基线、零增量、同 tick 合并、复制去重、group/rank 守恒、窗口尾段、像素积分和换算。用独立逐块枚举验证真实模型各区间的时间、包数和两套组成。原始包率不随字节或时钟配置改变；两屏须同步这些配置。用实际键盘输入和失焦验证数值控件，清除测试时钟后交付，不能把假设频率留下成为默认事实。 运行 `node scripts/test_packets.cjs`，检查 512 门槛、笛卡尔组合、原子身份、同 tick 多包、重复观察与复制去重、未知时间、零任务及正反向查询。独立复算真实模型的所有原子包，核对 task/slot/block、首次时间和 record/line。浏览器检查 64×64、1×64、64×1、1×1 的实际节点与行数、自动出现/消失、两端核点选、重合清单跨页及范围内证据定位。 运行渲染器自检、模型验证和实际浏览器交互。至少同时打开控制页、网图、到达位图和另一种图表，确认固定视图互不切换但时间、筛选、任务、slot 和块同步；刷新固定页保留视图。“跟随控制页”只影响选择跟随的窗口。确认控制页所有场景均没有可见 Canvas，原子包清单和曲线/带宽表格仍正常。检查播放、暂停、变速、倒退、切轮、group 筛选、任意核与 slot 钻取、首尾状态；验证双向选择、新开页面、刷新、关闭重连、不同 session 隔离，以及两个控制页不会使播放加速。尤其检查 ≤512 组合时网图、时序预览、逐位置填充同时可见，slot 翻页后能查看所有位置。查看最拥挤截图及控制台。检查 1280×720、1440×900、1920×1080 下动画和控制布局，允许正常滚动，不能裁掉操作区。明确区分静态检查、浏览器实测和未运行的检查。 保存模型、输入清单、原始日志定位、生成命令和验证结果。交付两页链接及独立 HTML 文件，说明如何移到两块屏幕，简述数据缺口与时间语义。仅在用户要求发布时推送或公开托管。