Cognition HUD (认知监视)
一个把「智能体正在怎么想」实时画出来的 DSH Web UI 插件。
简介
Cognition HUD 是 DSH Web UI 上的一个实时「认知监视」浮层。它把智能体正在做的事拆成三块同时呈现:一面会呼吸的方块墙——每段推理点亮格子、一道柔光横扫而过;一只在墙里游走、时不时起跳眨眼的小鲸鱼宠物;一组冷静的读数——工具意图、最近步骤、本轮用到的插件/技能/MCP,以及上下文与 token。
它不假装。面板只画真实事件:reasoning-delta 的增量、tool-call-delta 的工具名与参数、usage 的 token 数。模型不输出思考文本时,它会直接写「该模型未输出思考文本」,而不是编一段动画。墙角的「仅真实事件」就是这条底线。
交互上,它常驻右上角,可折叠成一颗带水面波动的小球并随意拖动;右键能切换思考原文、隐藏鲸鱼、切到省电动画或关闭。展开状态、位置与偏好会记住,卡片尺寸固定,不会因为工具变多而跳动。
实现上它只有一个客户端模块:订阅会话实时流,用 canvas + rAF 画墙与宠物,没有 Host 服务、不写会话日志、不联网,localStorage 只存偏好。
它显示的到底是什么
界面只呈现四类真实信号,没有一条是编出来的:
| 区域 | 数据 | 来源 |
|---|---|---|
| 思考流 | reasoning-delta 增量、block-end 的完整 reasoning 文本 |
会话实时事件 assistant/live-chunk 里的 StreamChunk |
| 工具意图 | tool-call-delta 的工具名与参数增量 |
同上 |
| 步骤/轮次 | 每次尝试的 turn / step、结束原因 |
同上,finish.reason.kind |
| Token | inputTokens / outputTokens / reasoningTokens / cacheReadTokens |
usage 块 |
面板底部的「仅真实事件」提示是刻意保留的:这里的每一个数字都能追溯到一次流式事件。模型没有输出思考文本时(部分 provider 只回文本或摘要),面板会明确显示「该模型未输出思考文本」,而不是假装有内容。
结构
Host 半 (index.js) —— 空实现。这个功能不需要 Host 服务:
浏览器端已经通过 ctx.sessions 收到实时流。
Client 半 (client.js)
├─ SessionBridge 注册在 conversation.composer.dock(会话作用域:
│ 每次切换会话都会重新挂载,拿到 sessionId)
│ └─ ctx.sessions.binding(id) → eventSource / session 快照,折叠成内存状态
├─ CognitionHud 注册在 shell.overlay(帧级浮层,不阻塞页面点击)
└─ 共享 store 两者在同一模块里共享一份订阅与节流后的快照
- 数据订阅只在
SessionBridge里发生:它没有可见输出,只负责把当前会话绑定到 store。 - 渲染完全在
CognitionHud:固定右上角,可折叠成水面圆球并拖动,不拦截底层交互。 - 不写会话日志、不落盘、不联网;刷新即重建。
交互
- 标题栏 ◉:在「方块矩阵」与「原始思考文本」之间切换(默认方块矩阵)。
- –:折叠为右上角圆球(水面球),显示速率或 token 数。
- 圆球可拖动:按住拖动到任意位置(自动夹在视口内),单击展开面板;位置在本次页面会话内保留。
- 圆球内的水面:思考时水位 34%,调用工具 52%,回答时升到 82%(最高),空闲落回 16%;运行时水面横向漂移,静止时只保留液面。
- 右键(圆球或面板):展开/收起、显示或隐藏思考原文、显示/隐藏小鲸鱼、动画流畅/省电、重置圆球位置、关闭监视(关闭仅本次页面生效)。展开状态、思考模式、小球位置、鲸鱼开关、动画档位会存到
localStorage(键dsh-cognition-hud:prefs),刷新后保留。 - 思考流区域可滚动、可聚焦(键盘可达),其余统计只读;
Esc收起(菜单打开时先关菜单)。
视觉
- 只用主题 token(
--dsw-alias-*),自动跟随明暗主题。 - 步骤瀑布条:最近 8 次尝试,按「推理 / 文本 / 工具参数」长度比例分段着色,越靠右越新。
- 速率条:最近 2.5 秒字符数的移动平均,思考越密集数值越高。
prefers-reduced-motion下关闭所有动画(脉冲、旋转、光标闪烁)。
工程约束
- 流式帧最多每 66ms 合并一次渲染,思考原文上限 16k 字符,文本 3k,工具参数 700。
- 只保留最近 8 次尝试,避免长时间会话占用内存。
- 会话绑定失败时先等
retainInfo.referenceCount > 0,再退化为自己持有一个引用(在detach时释放)。
安装 / 卸载
从 GitHub 直接安装(不需要 npm、不需要本地目录):
dsh plugin --profile desktop add github:lw24-1936/dsh-cognition-hud
或用 Releases 里的预构建 tgz(免 allowBuilds 构建授权):
dsh plugin --profile desktop add https://github.com/lw24-1936/dsh-cognition-hud/releases/latest/download/dsh-cognition-hud.tgz
装完完全退出再启动 DeepSeek Harness 一次(客户端 bundle 需要冷启动)。本地开发时也可以指向目录:
# 通过 plugin_manager action=install_bundle,target 指向本目录
卸载:plugin_manager action=remove_bundle target=@local/dsh-cognition-hud。
本轮优化(0.1.1 行为)
正确性
- 从已提交的
assistant/message/assistant/attempt里重建内容块:打开一个已经跑完的会话、或某一回合结束后,面板不再空白,仍能读到那一步的推理与工具。 - 不再在收到
assistant/message时武断地把运行状态置空,运行态只认会话快照;思考结束与回合结束分开处理。 - 绑定失败不再是黑盒:状态点与页脚带诊断信息(是否绑定 / 收到多少帧 / 多少事件)。
性能
- 思考流只渲染最后 4200 字符,更早内容折叠成一行提示,避免 1.6 万字的文本节点每帧重排。
- 工具列表与步骤列表用签名做 memo,文本增量不再触发它们的重渲染。
观感
- 面板移到右上角(避开输入框与底部 dock),顶部按阶段染色的 2px 高光条。
- 新增实时速率曲线(最近 48 个采样点的字符增量)。
- 新增「最近步骤」区:每行
T轮·S步+ 推理/回答/工具比例条 + 字数与耗时,附图例。 - 工具条改为可读标签:解析参数里的
command/file_path/pattern/query等字段,配类别符号。 - 空会话状态从一句占位改成「标题 + 怎么才会开始接收」的说明卡。
- 会话错误(
lastAgentError)以红色条展示,最多三行。 - 空闲 20 秒后整体降透明度;
Esc收起。
页脚新增:上下文输入 token(最近一次请求的 inputTokens,近似当前上下文规模)。
思考墙面(方块矩阵)
思考流固定在卡片最上方(order 上紧跟标题栏、min-height: 96px),不会被下面新增的内容挤没。
- 方块墙:96×24(2304 格),单格约 3.5px——面板尺寸下的极限密度,再细就成连续纹理而不是格子了
- 渲染:换成 canvas。底纹(全部格子的 5.5% 淡底)只在尺寸/主题变化时画一次并缓存,每帧只 blit 底图 + 画「活着」的格子(阈值 0.02),再画宠物;DPR 自适应、ResizeObserver 跟随面板尺寸,约 30fps
- 呼吸:指数衰减
exp(-dt/520)(半衰期 0.36s),点燃数量 = 22/秒 基础 +rate/4,另有一道 6 列/秒的柔光带(±2.5 列高斯,峰值 0.5) - 小鲸鱼娘是条小鲸鱼(头朝右):14×9 方块(约 49×31px)。头顶一株两片叶的小嫩芽,用深浅两种绿(
#8CE0A4/#4FB56F)做出叶面层次,不随阶段色变化;身体三阶明暗——顶部高光、身体色、下缘暗部,高光与肚皮是白色叠加层(32% / 58%),所以换成琥珀或绿色阶段色时造型不变;眼睛「白 + 深」两格,会不定时眨一下(2.2–5.8s 一次,闭眼 130ms);脚下椭圆影子随跳跃变淡 - 动效预算:思考时约 30fps,空闲时约 16fps;
prefers-reduced-motion或菜单里切「省电」后降到约 8fps,且不再起跳(只保留游走与眨眼) - 思考区高度固定:
.dshch-thought-slot锁死 104px(墙 86px + 跑马灯 14px + 间距),面板里富余的高度改由「工具意图」区吸收并内部滚动,所以墙体高度不会随内容跳动 - 动作:位置按 320ms 时间常数插值游走(1.6–3.8s 换目标),思考时每 0.48–1.38s 跳一次,正弦弧线 360ms 上浮 2 格;空闲时轻微呼吸浮动
- 文字不丢:墙下方一条单行跑马灯显示最近 110 字;点 ◉ 可切回完整文本视图
能力条(插件 / 技能 / MCP)
面板中部固定一行三组,本轮(当前 turn,跨所有 step)用到的能力实时追加:
| 组 | 来源 | 展示 |
|---|---|---|
| 插件 | 工具名按提供方归类(近似映射:read/grep → fs,bash → shell,web_* → web,cordis_* → cordis,job_* → jobs,subagent/send_message → subagent,present → deliverables,team_*、workflow、skill 之外未知的用原名) |
插件名,×n 表示调用次数,悬停看原始工具名 |
| 技能 | skill 工具调用,参数里的 name |
技能名(如 cordis-plugin-development) |
| MCP | mcp__<server>__<tool> 与 list_mcp_resources / read_mcp_resource / list_mcp_resource_templates |
server·tool,例如 rea·inspect_web_page |
Harness 不会把工具调用归属到插件包,所以「插件」这一组是按工具名做的名字映射;Client 只拿得到工具名与参数,这是能做到的最接近的归属。
卡片尺寸固定:面板高度 min(520px, 100vh - 120px);思考槽 clamp(72px, 15vh, 104px),矮窗口会自动压缩;工具条、步骤(2 行)、能力条各自固定高度并内部滚动——新能力出现不会把卡片撑大。
已知限制
- 无法在无浏览器控制的会话里做视觉验收;安装后只能确认 slot 注册与无语法/清单错误。
- 思考原文可能包含路径、密钥等敏感内容,分享屏幕前请用 ◉ 收起。
- 仅覆盖当前打开的会话;后台子智能体的思考不在本面板内(可作为下一步:按 subagent 树展开)。
No comments yet. Be the first to write one.