Plugin Agent Display

README

# Agent 战术大屏 · v10.0

一个纯前端的 **AI 智能体调度可视化大屏**。v10.0 新增原生 WebGL 主题 HQ 智能总部：中央 Chief 总经理办公室与 8 个职能部门组成回字形总部沙盘，默认 31 名成员；点击 Chief 新增任务，点击人事部管理成员，在全景、部门、项目与人员视图中查看协作进度。在同一个 HTML 页面里切换 OPS、SPIDER、NEURAL、FACTORY、NEBULA、FORGE、WORKS、ION、PARK、HQ 十款主题，展示任务流、审核、交付与模拟指标。

单文件，无需构建、无需后端，双击即可打开。自 v5.0 起源码公开，采用 PolyForm Noncommercial License 1.0.0：非商业用途免费，商业用途需授权，详见文末「授权 License」。

> 页面中的任务、需求文本、需求评分、追问回答、工单、Agent 负载、业务指标、token 与成本全部是**模拟示例数据**，由内置模拟器生成，并未连接真实 agent、账单或业务接口；FORGE 的吸积数据包、星核质量、已锻零件、交付记录与吞吐，WORKS 的织造项目、织位进度、光丝活动、丝线总长、结点与交付记录，ION 的任务用例、决策路径、决策数、延迟、用量、置信度与 PASS/HOLD，以及 PARK 的工单、车间进度、产能、质检结果、设备读数与交付记录，也均为本地模拟。PARK 调度台只控制页面内的模拟状态；HQ 的项目、成员工作、负责人审核、Token 与交付指标也由本地模拟生成，界面新增任务不会调用真实 Agent，「真人督办」是模拟角色。HQ 成员名单可保存在当前浏览器，任务与进度不会随刷新保留。真实数据接入需要自行改造，见「配置」一节。SPIDER、NEURAL、FACTORY 的 token 成本使用示例单价：输入 ¥2 / 百万 token、缓存命中 ¥0.5 / 百万 token、输出 ¥8 / 百万 token。

## 主题

| 编号 | 主题 | 风格 | 直达 |
| --- | --- | --- | --- |
| 01 | OPS 纸面工程 | 纸面工程图 + 调度飞轮，可切粒子荧光 | `index.html#ops` |
| 02 | SPIDER 蛛网战术 | 粉框作战室 + 巡检蛛 + token 账 + 交付飞轮 | `index.html#spider` |
| 03 | NEURAL 神经星环 | 3D 神经团 + 任务脉冲 + HUD 星环 + token 账 | `index.html#neural` |
| 04 | FACTORY 机器人工厂 | 3D 机器人车间 + 子板块接力 + 总装发射 | `index.html#factory` |
| 05 | NEBULA 星核蜘蛛 | 3D 智能体星云 + 逐字审需求 + 评分派单 | `index.html#nebula` |
| 06 | FORGE 视界熔炉 | 黑洞吸积子 Agent 情报 + 星核投影出整机再拆解 + 逐件锻造交付 | `index.html#forge` |
| 07 | WORKS 天工开物 | 总控卫星派单 · 8 台机械喷射光丝 · 粒子一滴滴织出项目 | `index.html#works` |
| 08 | ION 离子回路 | 全屏决策电路 · 离子高速穿行 · 每个任务一种颜色 | `index.html#ion` |
| 09 | PARK 智造园区 | 微缩工业园区 · 6 座车间 = 6 条工作流 · 调度台控启停 | `index.html#park` |
| 10 | HQ 智能总部 | 回字形总部沙盘 · 中央总经理办公室 · 8 个部门 31 名成员 · 点 Chief 派任务、点 HR 管人员 | `index.html#hq` |

点各主题的「主题 / 换主题」按钮打开主题面板，按 T 键依次轮换 OPS → SPIDER → NEURAL → FACTORY → NEBULA → FORGE → WORKS → ION → PARK → HQ，再回到 OPS；按 Esc 关闭面板。选择保存在 localStorage；地址中的 `#ops`、`#spider`、`#neural`、`#factory`、`#nebula`、`#forge`、`#works`、`#ion`、`#park` 或 `#hq` 优先于上次选择。没有有效选择记录时默认打开 SPIDER。v10.0 修复了主题内部输入框中按 T 误切主题的问题。

每款主题运行在独立的 Shadow DOM 中，样式和元素 id 互不干扰。隐藏主题暂停主动画与主要模拟刷新，减少资源占用。十款主题和主题面板使用系列水印「DEVELOPED BY @赛博老爸」。主题面板另有「11 · 下一款」占位，内容超出屏幕高度时可以滚动。

## 功能一览

### 01 · OPS 纸面工程

原 v1 的调度飞轮与面板作为主题 01 保留，提供「换主题」与「全屏」按钮。

- **数据飞轮**：左侧汇聚连线与三个工作流节点，中间旋转的代码和执行记录环带，右侧外射谱线，以及齿环、扫光与质检浮层。悬停节点可查看工作流详情。
- **顶部指标**：任务、运行中智能体、工作流、产出、已匹配、待复核，以及实时时钟。
- **底部四个面板**：任务日志、粒子求解器、执行代码打字展示、12 个智能体的任务与进度。
- **纸面 / 粒子荧光**：默认跟随系统深浅色；点「粒子」按钮切到荧光绿画面，按钮变为「纸面」，再点切回。深色画面包含柔光与偶发横向故障效果。
- **粒子交互**：点击粒子面板或聚焦后按 Enter 加入涡流；ADVECT / PROJECT 切换流动模式，RERUN 重置。
- **自适应**：宽屏四列面板，宽度 ≤1100px 时两列，手机竖屏单列。

### 02 · SPIDER 蛛网战术

以 1920×1080 横屏为设计尺寸，按窗口等比缩放，推荐电脑或手机横屏观看。

- **14 张角色卡**：总调度 CHIEF、12 个 agent、巡检蛛 CRAWLER，显示当前任务、进度和台词。
- **作战室**：12 个工位与总调度台，模拟派单 → 接手 → 交接 → 质检 → 交付。交接会飞出光点，或由角色踩滑板送到下一工位；空闲 agent 优先接单，久候会去沙发。质检不通过会打回重写并触发碎纸效果。
- **巡检蛛**：在屏幕上巡逻，腿抓住事件元素四角，显示锁定框和说明；打回时亮出 REWORK LOCKED，巡逻工位时织网。
- **token 消耗墙屏**：按 agent 颜色分段堆叠，显示预算线、当前速率和 TOP BURN 前四名。
- **交付飞轮**：汇聚节点轮换展示在途较多的工作流，环带滚动任务记录与 token 账；交付推动飞轮并射出光束，打回时减速。悬停节点查看接力顺序。
- **产出与成本**：今日交付、今日 token、今日成本，以及单件 token / 成本。
- **质检台**：需求覆盖、事实核验、品牌口径、合规敏感词、重复率、交付时限逐项 PASS / DROP，展示近 30 次得分曲线及最近三条结果。
- **rules.py 面板**：模拟校验 token 上限、队列深度、通过率、周期、打回次数，以及单件 token、品牌口径、事实覆盖和重复率；它是页面展示内容，无需 Python 环境。
- **其他面板与控制**：dispatch 流程芯片、执行代码打字、任务流、12 席负载、今日进度、全屏和时钟。悬停作战室角色可查看任务、排队数、今日交付和 token。

### 03 · NEURAL 神经星环

three.js（WebGL）渲染的 3D agent 协同大屏。13 团神经元代表 CHIEF 总调度与 12 个执行智能体，另有 CRAWLER 巡检探针在各团之间飞行。角色、11 条工作流与 6 个交付渠道沿用 SPIDER 的配置内容；源码在两个挂载函数内分别定义这些配置。

- **任务脉冲**：派单、交接沿突触束飞行，打回显示红色脉冲；抵达时神经团亮起，交付光束射向外环渠道并点亮它。
- **HUD 星环**：72 块 × 6 道能量格记录 token 流水与智能体忙碌程度，包含反向充能波、超预算琥珀提示、执行记录文字带、智能体扇区与交付渠道环。神经网与标签约三分钟一圈，标签自动翻正。
- **视角与交互**：工具栏按钮或 V 键切换环绕、正视、斜看、贴近四种视角；拖动转视角、滚轮缩放；点击神经团聚焦，悬停查看详情。
- **状态与指标**：左列展示 14 个角色状态与最近交接，右列展示神经活动热力格、突触日志和巡检统计；底部展示拓扑规模、脉冲频率、交付进度、审校通过率、token、成本与帧率。
- **性能与适配**：辉光效果使用 UnrealBloom；持续低帧率时先降低清晰度，再减少粒子。画板随比例伸展，窄屏或竖屏使用只保留星环和三个核心数字的精简版。
- **背景效果**：`AMBIENT` 控制背景粒子和流星，默认全部关闭，可按需调整。

### 04 · FACTORY 机器人工厂

three.js（WebGL）渲染的整座 3D 机器人车间，以俯瞰视角展示「总工程 → 8 个子板块 → 工区接力 → 中央总装 → 发射」的模拟生产流程。

- **总工程与总装**：双11 大促战役、智能投标交付、新品发布会、品牌出海计划轮流开工，每项拆成 8 个子板块，对应火箭、机甲、航天飞机、战斗机四种载具。子板块完成后由无人机吊装并入；全部并入后倒计时、点火发射，显示 LAUNCH SUCCESS，再开下一个工程。
- **12 个工区与总调度室**：CHIEF 控制全局，检索、拆解、文案、设计、代码、测试、审校、数据、剪辑、投放、客服、归档机器人各有不同造型与专属机器。货箱沿双向传送带流转，外圈有 AGV 巡线，4 架无人机吊装，CRAWLER 沿传送带巡检。
- **进度显示**：机器人旁的卡片显示岗位、动作、进度与当前子板块；中央总工程进度条列出 8 个子板块的待派、运输、加工、返工、吊装、已并入状态。倒计时与发射横幅出现时，卡片和总工程条变淡。
- **五个底部面板**：TASK FLOW 子板块任务流、KPI 今日指标、LINE LOAD 工区负载、RADAR 车间雷达、EXEC 执行代码。指标包含总工程交付、本工程用时、子板块、审校通过率、算力与帧率，负载面板另有 OEE 环及交接曲线。
- **视角与交互**：工具栏按钮或 V 键切换俯瞰、斜看、环绕、特写；拖动转视角、滚轮缩放；点击机器人拉近工区，按 Esc 返回；悬停查看详情。
- **视觉与适配**：UnrealBloom 辉光与软阴影；持续低帧率时依次降低清晰度、关闭阴影。画面适配 16:10、1366×768 等比例；窄屏或竖屏精简为车间与总工程、子板块、今日交付三个数字。

### 05 · NEBULA 星核蜘蛛

冰蓝、白、桃粉的 3D 星云场景：CHIEF 是中央丝带星核，12 个智能体分在三条椭圆轨道上公转，CRAWLER 星云蛛在相关工区之间跳跃、爬行和读词。

- **星图与星云蛛**：三圈分别分布 3、4、5 团星云，六种形态交替排列。星云由淡光雾、尘埃和细丝组成；星云蛛有粒子头部、丝带腹部与 8 条逆解控制的腿，贴着云面移动并随星云公转。
- **模拟审需求流程**：CHIEF 收到需求后，星云蛛按工作流逐站读词；普通词可连向下一工区，模糊词标红并向 CHIEF 追问，随后补为具体要求。全部读完后回到星核，显示回执和派单效果。评分阈值为 80 分，需求、补齐文本与评分均由本地脚本模拟，并未调用模型审查真实需求。
- **信息小框**：读出的词、模糊标记、补齐要求、连线与属性标签沿弧线飞向对应底部面板，被击中面板边框闪亮。
- **六个底部面板**：CRAWL LOG 爬取日志、SECTIONS 章节、SPEC RADAR 七维需求质量、WORD HEAT 读词热力、SPEC SCORE 评分曲线与仪表盘、CRAWLER.PY 审查脚本。顶部另有当前章节、读词计数、流程步骤与帧率。
- **视角与交互**：默认跟随，工具栏按钮或 V 键切换跟随、俯瞰、斜看、环绕；拖动转视角、滚轮缩放；点击智能体星云拉近，Esc 返回；悬停星云、星核或星云蛛查看详情。
- **视觉与适配**：UnrealBloom 辉光；持续低帧率时先降清晰度，再关辉光。窄屏或竖屏显示星云与当前需求、需求评分、今日派单三个数字。

### 06 · FORGE 视界熔炉

原生 WebGL 绘制的黑洞与星核投影场景。左侧 8 个子 Agent 的情报沿彩色线束汇入黑洞，星核投影出当前工单的完整产品，再拆成代表子任务的零件，逐件锻造、合拢后交付。

- **五步流程**：吸积 → 成形（完整产品投影）→ 拆解 → 锻造 → 交付。内部状态机还处理坍缩、合拢和星核回收，完成后自动轮换下一张示例工单。
- **六种投影**：人形机器人（智能客服机器人上线）、推进器（招投标资料自动生成）、工业产线（短视频生产线提速）、园区工程地图（智慧园区建设工程）、行星减速器（企业知识库迁移）、机械臂（合同审查自动化）。每张工单有 6–8 个零件，分别对应子任务与负责 Agent。
- **情报流与派发**：彩色粒子经左侧 STATE IN 总线进入黑洞后消失，在星核中停留片刻，再带着来源 Agent 的颜色从右侧 DISPATCH OUT 总线派发，伴随光尾、余烬、总线闪光与工位到达提示。右侧线束采用负责 Agent 的颜色；完整产品投影出现时黑洞隐去，交付后的回收阶段重新出现。
- **Agent 阵列与锻造工位**：左侧显示 8 个 Agent 的模拟负载、上下文与活动柱；右侧显示零件任务、负责人、进度、当前工序及交付记录。当前工序细分为解析需求、生成方案、执行改动、交叉校验、合并入核，并展示模拟 token 吞吐、累计用量与耗时。
- **四个底部面板**：事件流、调度负载、执行代码、星核遥测。`FORGE.PY` 按阶段持续逐字输出开工与提交脚本，当前行高亮、锻造时变为琥珀色，Agent 名按各自颜色显示，写满自动滚动；它是展示内容，无需 Python 环境。遥测展示模拟吸积包数、星核质量、已锻零件与交付工单，以及吸积曲线和实际帧率。
- **视角与交互**：默认环绕，工具栏按钮或 V 键切换环绕、正视、俯瞰；拖动旋转、滚轮缩放、双击复位。点击工位卡或零件标注暂时高亮聚焦该零件，稍后自动解除，也可按 Esc 解除。
- **适配与动态效果**：以 1920×1080 为基准缩放；窄屏或竖屏自动切换精简版，保留星核、当前工单、锻造进度与今日交付。系统开启「减少动态效果」时减少流光数量、停止自动环绕与 HUD 转动、减慢模拟与零件转动，并减少部分 CSS 动画。

### 07 · WORKS 天工开物

原生 WebGL 与 Canvas 2D 绘制的机械织造场景。顶部总控卫星向 8 台机械（子 Agent）派单，彩色光丝汇入 7 个织位（子任务），再一滴滴落向底部织造台，把项目逐点织出来。

- **六步流程**：下达 → 吐丝 → 织网 → 校验 → 交付 → 收网。织位错峰并行加工，交付后粒子飞散，自动进入下一个项目。
- **六个示例项目**：跨江大桥数字孪生（悬索大桥）、体育中心智慧场馆（体育场馆）、品牌官网全端改版（多端网页框架）、电网无人机巡检（巡检无人机）、算力机房扩容（机房机柜）、古塔夜游数字孪生（古塔）。每个项目包含 7 个织片，与织位、任务和负责 Agent 对应。
- **总控与机械阵列**：总控卫星带太阳翼、高增益天线与 8 个发射喇叭，派单和交付时沿牵引线传送光点。8 台机械分别是挤出喷头、激光雷达、四旋翼无人机、通信卫星、倒装机械臂、云台检测相机、球形侦察无人机和喷涂罐组，各有转动部件。
- **光丝与织造台**：光丝平时常亮，开工时变为高亮激光；机械既连接自己的织位，也向其他织位甩丝形成交错光网。织位下方垂丝滴落光点，落点溅起光圈；半透明薄板铺满地形等高线与星点，各色粒子云跟随织造前沿移动，项目逐点成形，收网时飞散。
- **五个数据面板**：机组阵列显示机械状态、任务和喷射速率；织造项目显示阶段、丝线总长、结点数与织位进度；光丝活动热力格展示 8 台机械最近 30 秒的强度（每格 2.5 秒，另有当前格）；交付记录展示近期产出；执行代码 `LOOM.PY` 随阶段逐字输出，当前行高亮、自动滚动。代码是展示内容，无需 Python 环境。
- **视角与交互**：拖动旋转织造台、滚轮缩放、双击复位；「视角」按钮或 V 键切换环绕、正视、俯瞰。点击织位卡或右侧织位列表暂时聚焦，稍后自动解除，也可按 Esc 取消；T 键轮换主题，`#works` 直达。
- **适配与动态效果**：以 1920×1080 为基准等比缩放，手机或竖屏使用精简版。系统开启「减少动态效果」时停止自动环绕并减少部分流光、转动与闪烁，模拟流程继续以较慢速度运行。

### 08 · ION 离子回路

整屏是一面斜向远处延伸的决策电路墙。决策卡以 DOM + matrix3d 贴在透视墙上；原生 WebGL 绘制交错线路、粒子与离子光球，带泛光，不依赖 three.js。

- **六个环节**：状态 STATE → 提问 ASK → 推理 THINK → 决策 DECIDE → 闸门 GATE → 执行 CODE。每个任务随机生成路径，每列可上下跳 0–3 行，离子光球逐列点亮节点。
- **12 个用例与配色**：邮件分拣（青）、线索跟进（红橙 + 金）、浏览器代理（紫）、社媒发帖（洋红）、客服工单（紫 + 粉）、会议纪要（绿）、合同审查（琥珀）、视频切片（深红）、日程任务（黄）、知识归档（青绿）、代码修复（蓝）、多 Agent 协同（冰蓝）。用例自动轮跑；换用例时电路墙快速滑动，光幕扫过、连线依次爆亮后整体换色。
- **电路与粒子**：卡片向同列上下和相邻列牵出交错线网，光点沿线游走；主路径使用平滑 S 形走线，旁路光点带动两端卡片闪亮，粒子整体向远处飘动。
- **决策卡与闸门**：节点点亮时显示亮框、横向光条、结果标签和 24 根动态柱状图，光球抵达后晕开光环。合同审查演示闸门不通过，显示「HOLD 转法务」和琥珀色置信度。
- **浮动信息**：标题、用例与四个读数不加外框，以焊盘和走线接入电路；读数包含决策数、中位延迟、单次决策用量、置信度及 PASS/HOLD。底部保留六列标签、三行决策日志和状态行。
- **视角与交互**：镜头跟随光球；「视角」按钮或 V 键切换斜视、正视、纵深、全景；滚轮缩放，上下拖动临时滑动电路墙、左右拖动改变斜角，双击复位。T 键轮换主题，`#ion` 直达。
- **适配与动态效果**：以 1920×1080 为基准等比缩放，手机或竖屏自动精简；支持系统「减少动态效果」设置。

### 09 · PARK 智造园区

一座微缩工业园区：中央调度中枢代表总调度 Agent，6 座厂房代表 6 条工作流，28 道工序与中枢共对应 29 个 Agent。工单箱从中枢经高架传送带进入车间，逐道加工后沿回收带返回，再由无人机出港交付。

| 车间 | 工序 |
| --- | --- |
| 01 内容车间 | 选题策划 → 撰写初稿 → 配图生成 → 审校润色 → 排版发布 |
| 02 研发车间 | 需求解析 → 编写代码 → 编译构建 → 自动测试 → 部署上线 |
| 03 客服车间 | 接收工单 → 意图分类 → 检索知识 → 生成回复 |
| 04 数据车间 | 数据采集 → 清洗去重 → 统计分析 → 图表绘制 → 报表签发 |
| 05 设计车间 | 需求拆解 → 草图构思 → 渲染出图 → 精修交付 |
| 06 文档车间 | 读取资料 → 拆解要求 → 撰写方案 → 合规校验 → 装订交付 |

- **两层场景**：园区层展示厂房状态、总览、产能、调度脚本和工序矩阵；点击厂房后镜头飞入，屋顶掀开、侧墙降下，面板切换为工序流程、在制工单、车间读数、Agent 终端和节拍甘特。点击机器可进入工位特写。
- **节拍与返工**：各工位同时加工，全部完成后流水线流转一格；质检不通过的工单进入不合格料框并退回中枢重新派单，维护停顿在甘特图标黄。
- **调度台**：点中枢、顶部「调度台」、底部「OR 中枢」或按 H 键进入。各车间可启停、调产能倍率（50%–200%，下一拍生效）、调派单权重（低 / 中 / 高）、执行约 9 秒检修；全局可调中枢接单开关、接单速率、全部启停和恢复默认。停机冻结工位进度并暂停接新单，控制操作会更新日志与脚本。
- **状态反馈**：屋脊和工位塔灯、门头招牌、旋转警示光、照明、中枢端口与调度链路随运行、检修、停机状态变化。
- **机器与园区**：重载六轴臂、协作臂、SCARA、Delta、双臂机器人与成对小机器人各有工序动作，另有 AMR 搬运车和巡检工人。厂房外观各异，园区包含街道设施、多种树木、行人、货车和云影；每台机器有状态、工单、进度、六项读数、节拍、利用率与温度信息。
- **导航与视角**：数字键 1–6 进入车间，0 返回园区，← / → 切换车间，Esc 返回；「视角」按钮或 V 键切换全景、巡游、俯视。拖动转镜头、滚轮缩放、双击复位；T 键轮换主题，`#park` 直达。
- **昼夜**：昼夜按钮或 N 键切换实时、白天、黄昏、夜晚、循环五档，夜间窗灯、路灯与编号发光。
- **渲染与适配**：原生 WebGL，包含阴影、移轴虚化、泛光与机械臂 IK，不依赖 three.js。按 1920×1080 基准缩放，手机或竖屏使用精简版；低帧率时逐级关闭多重采样、降低分辨率、关闭阴影，支持系统「减少动态效果」。

### 10 · HQ 智能总部

一座放在深色底座上的单层回字形总部沙盘：中央是 Chief 的总经理办公室，周围是产品、设计、市场、运营、研发、人事、财务、法务行政 8 个部门，南侧大堂有会议室、前台大门和茶水间。原生 WebGL 绘制楼体、家具、人物和文件夹，不依赖 three.js。

- **默认成员**：Chief 小枢 + 25 个部门 Agent + 5 位真人督办，共 31 名。Agent 用青色光环标识，真人督办审核时脚下亮金色光环；各部门负责人可以是 Agent 或真人督办。这里的审核与工作均为模拟行为。
- **新增任务**：点击 Chief、总经理办公室或「新增任务」按钮，也可按 C。支持产品功能、营销活动、招聘需求、合同审查、预算申请、内容生产、运营专项 7 种类型，以及最多 5 步的自定义流程（Chief 终审也计入这 5 步）；设置拆分项数和普通 / 加急后，Chief 按部门顺序派单。你派的项目排在列表最前，完成 90 秒后移除。
- **人员管理**：点击人事部的人员管理入口、人事部成员、前台大门或按 H，可按部门筛选、搜索、新增、编辑和移出成员，调整岗位、技能、外观、类型、部门及负责人。新成员从大门入职，离职成员先移交工作再离开；工位满、重名和移出 Chief 会被拦截。名单保存在当前浏览器对应来源的 localStorage，刷新后保留，但不会跨域名、端口或设备同步；恢复默认需要两次确认。任务和项目进度不持久化。
- **项目流转**：开场有 App 3.0 新版本、年度品牌活动、春季招聘、合作协议审查、Q4 部门预算、品牌内容月、用户增长季、用户成长中心 8 个示例项目。Agent 处理 → 负责人审核 → 步行或飞送文件交接 → Chief 归档；合同、预算类包含 Chief 终审，审核不通过会返工。示例项目交付约

... (truncated)