【免费下载链接】nodetermNode-based terminal manager for AI coding agents — tmux-backed terminals and parallel agent sessions as draggable nodes on an infinite pan/zoom canvas. macOS, Linux, and a browser Server Edition.项目地址https://gitcode.com/gh_mirrors/no/nodeterm点击查看免费下载nodeterm 是一款基于 Node 的 AI 编码代理终端管理器它把 tmux 终端和并行的 agent 会话变成无限画布上可拖拽的节点支持 macOS、Linux 与浏览器版 Server Edition。在 macOS 上它还有一个鲜少有人讲透的功能——刘海 HUDNotch HUD当 Claude、Codex 等代理在后台干活时macBook 顶部刘海旁会走出一只像素小宠点击后整块黑胶囊会向下展开成一个迷你会话面板。本文带你拆解这套会走路的代理吉祥物背后的实现。一、先看效果刘海旁边的小黑条nodeterm 的主界面是一块可平移缩放的画布每个终端或 agent 会话都是上面的一张卡片而在 macOS 上即使你把 nodeterm 最小化屏幕顶部的刘海区域也不会闲着。有代理在跑时黑色胶囊会贴着刘海出现——这就是刘海 HUD。它和 Apple 的 Dynamic Island 思路一脉相承但展示的是你机器上 AI 代理的实时状态。二、一个隐身窗口透明、置顶、可点击穿透整个 HUD 只靠一个 Electron BrowserWindow实现窗口配置在 src/main/notch-hud.ts 中无边框、全透明、永远置顶、不抢占焦点、不出现在任务栏。它横贯屏幕顶边高度恰好覆盖刘海区域加一点扩展空间。巧妙的地方在点击穿透窗口默认设置鼠标事件穿透setIgnoreMouseEvents你点不到它——所以它永远不会挡住菜单栏但 macOS 仍会转发鼠标移动事件当指针滑到黑色胶囊上时渲染层通过 IPC 通知主进程关闭穿透此时胶囊才能接收点击展开/收起指针一离开又恢复穿透。也就是说可交互区域精确等于胶囊本身其余部分完全透明且可穿透。契约细节写在 docs/notch-hud.md 里值得细读。三、它如何知道刘海在哪里Electron 并没有暴露刘海尺寸的官方 APInodeterm 用了一个很聪明的比例判据纯函数带单元测试见 src/main/notch-hud-geometry.ts判据内置屏 顶部内缩 / 屏幕高度 ≥ 0.03NOTCH_BAR_RATIO。macOS 给有刘海的机型预留的菜单栏高度恰好等于刘海高度因此这个占比在任何缩放档位下都稳定在约 0.033而无刘海机型的菜单栏固定 24pt分辨率越高占比越小0.022天然区分开。位置假设刘海居中宽度可设置默认 168px范围 100–320。形态居中且未下移 → 胶囊与刘海融合顶部直角、底角圆角看起来刘海变宽了下移或靠左/靠右、或无刘海屏幕 → 变成一颗独立的悬浮药丸悬在菜单栏下方绝不压住系统菜单。这套纯函数hudGeometry/hudPlacement只吃参数、吐坐标渲染层完全不自行决策——所以改设置里的对齐方式和垂直偏移时胶囊会实时跟着滑无需重启。四、吉祥物揭秘像素画不是图片是终端字符这是全文最有意思的部分。走动的 Claude 吉祥物没有一张图片资源它的身体是 src/renderer/lib/mascot.ts 里两组 9×3 的终端方块字符第 0 帧: ▐▛███▜▌ / ▝▜█████▛▘ / ▘▘ ▝▝ 第 1 帧: ▐▛███▜▌ / ▝▜█████▛▘ / ▝▝ ▘▘ 两帧只有脚不同交替播放就成了走路。实现流程非常讲究解码每个█ ▐ ▌ ▘ ▝等四分之一块字符被解码成 4 个亚像素位9×3 字符放大成18×6 的像素网格绘制模块加载时一次性画到离屏 canvas导出成 />Grok / Gemini / opencode 没有小宠资产改用品牌标记 呼吸光晕纯函数 src/renderer/lib/brandPulse.ts——同一个判定两个渲染器画布角标与刘海 HUD保证同一代理在任何表面都是同一个形象。全部动画都响应系统的减弱动态效果设置。五、胶囊里到底显示什么状态优先级渲染入口是独立的 src/renderer/hud/main.ts普通 TS DOM不用 React保持轻量。折叠状态由纯函数buildIndicatorsrc/renderer/hud/indicator.ts决定规则一句话每个正在工作的代理占一个坑位——Claude 走路小宠、Codex 精灵图、其他品牌呼吸标完成未看显示闪动绿色圆点同样是 7×7 像素画等你操作显示红点。全部空闲时胶囊整个隐藏不会留一颗空黑药丸。数据从哪来主进程订阅与推送通知相同的接缝 src/core/agent-status-mirror.tsworking / needsYou / done 状态边沿、上下文百分比、子代理事件在纯模型 src/main/notch-hud-model.ts 中聚合防抖 150ms 后推给 HUD 窗口。一个容易忽略的细节面板行序按状态优先级排而不是按时间——需要你 完成未读 工作中 空闲与侧边栏一致。早期按更新时间排序导致忙碌会话每几秒就窜到顶部、把最后一行挤出去再挤回来用户看到的就是列表一直在洗牌、条目时有时无。六、展开面板与Go直达悬停 180ms或点击后同一块黑色表面向下生长出会话面板每行 吉祥物/绿色完成标记 标题 未读徽章 模型·相对时间 你的提示词截断 120 字符与手机端 Live Activity 同一常量 可展开的子代理列表最多 6 行溢出部分以N more · 1 needs you脚注明示并可点击展开全部。点面板里的Go按钮IPC 直达主窗口的Canvas.focusNodeById——刘海胶囊直接把你传送到对应节点。行上的×可单独隐藏该行隐藏时记下当时的状态真正的状态变化才会让它回来。七、设置与边界所有开关集中在 Settings → Interface → Notch仅 macOS 可见notchHud总开关默认开启仅 darwin 平台自动守护对齐方式左 / 中 / 右垂直偏移滑杆下移融合胶囊会脱落成药丸上移最多到屏幕顶边假设刘海宽度只影响融合形态的右缘贴合悬停展开开关关闭后仅点击展开另外有个看门狗会话卡死在 working 超过 20 分钟覆盖 Claude 约 10 分钟的 Bash 上限会被标记为过期刘海与手机 Live Activity 同步结束——Esc 打断的假完成不会亮起绿灯因为什么都没干成就没东西可看。八、总结小而美的三层架构层文件职责窗口/数据src/main/notch-hud.ts透明置顶窗口、鼠标穿透切换、订阅状态镜像纯逻辑src/main/notch-hud-geometry.ts、notch-hud-model.ts刘海探测、坐标/形态计算、行聚合全部可单测渲染src/renderer/hud/main.ts、lib/mascot.ts胶囊 DOM、像素吉祥物、CSS 步行动画纯函数算位置CSS 跑动画DOM 只管画——这就是 nodeterm 让一只像素小宠在刘海旁散步的全部秘密。完整契约见 docs/notch-hud.md 与精灵规范 docs/mascot-sprites.md。想亲自跑起来克隆仓库后执行npm install npm run dev即可仓库地址https://gitcode.com/gh_mirrors/no/nodeterm赞分享【免费下载链接】nodetermNode-based terminal manager for AI coding agents — tmux-backed terminals and parallel agent sessions as draggable nodes on an infinite pan/zoom canvas. macOS, Linux, and a browser Server Edition.项目地址https://gitcode.com/gh_mirrors/no/nodeterm点击查看免费下载相关推荐ThinkPython2核心算法实现10个必学的Python编程技巧ThinkPython2核心算法实现10个必学的Python编程技巧 ThinkPython2是Allen Downey教授编写的经典Python编程教材提终极指南如何用Boring Notch将MacBook刘海变身为强大音乐控制中心终极指南如何用Boring Notch将MacBook刘海变身为强大音乐控制中心 Boring Notch是一款专为MacBook设计的创新工具它能将原本闲桌面应用TREK 插件实战用纯 HTML/JS 打造登机牌上的 Koffi 行李箱吉祥物 WidgetTREK 插件实战用纯 HTML/JS 打造登机牌上的 Koffi 行李箱吉祥物 Widget Koffi 是 TREK 官方插件仓库中的一个示例插件位于后端前端MCP 服务AI 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考