AI 编码 Agent 像黑盒？Noter 本地仪表盘让你边看边指挥

用 Claude Code、Codex、OpenCode 这类 AI 编码 Agent 编程时，你是否有过这样的体验：Agent 在终端里疯狂输出，但你完全不知道它在想什么？它改了什么文件？遇到了什么阻碍？下一步打算做什么？

传统的工作流是：你给一个提示 → Agent 执行 → 你盯着终端滚动 → 猜测它在干什么 → 等它停下来再问。这种”投喂式”协作不仅效率低，还让你逐渐失去了对代码的掌控感。

Noter 正是为了解决这个问题而生的——一个本地运行、浏览器端展示的 AI Agent 仪表盘，让你在 Agent 工作的同时实时看到它的上下文、文件变更、下一步计划，还能写下自己的思路，真正实现”边看边指挥”的协作模式。

问题：Agent 是黑盒

AI 编码 Agent 的本质是 LLM 在循环中调用工具。它读取你的项目、修改文件、运行命令，但这些动作只输出到终端日志。当你给了一个复杂任务，Agent 可能需要 5-10 分钟执行——这段时间里你只能被动等待。

更糟糕的是，Agent 的思考过程（它为什么决定修这个文件？它注意到了什么潜在问题？）通常不会完整呈现在终端里。你看到的只是执行结果，而非决策过程。

Noter 的解决思路很直接：在 Agent 和开发者之间加一层透明的观测面板，把 Agent 的内部状态实时投射到浏览器中。

Noter 是什么

Noter 是一个本地运行的、基于浏览器的 AI Agent 仪表盘，支持 Claude Code、OpenCode、Codex、Factory Droid、Pi 等主流编码 Agent。它通过 SSE（Server-Sent Events）、MCP（Model Context Protocol）或 JSONL 文件读取 Agent 的事件流，然后在 2×2 的四格面板中展示：

• Notes（笔记）：你自己的思考记录区，自动保存并输入到建议引擎
• Suggested Tasks（建议任务）：AI 根据 Agent 上下文和你的笔记生成的下一步任务卡片
• Agent Context（Agent 上下文）：Agent 正在做什么、修改了哪些文件、当前目标和阻碍
• Suggested Prompts（建议提示词）：可以直接复制到 Agent 中的下一步操作提示

提示：Noter 可通过 npm 安装（MIT 许可证），安装命令：npm install -g noterai，启动命令：noter。

安装与配置

第一步：安装

npm install -g noterai

CLI 命令是 noter，安装后可以直接运行：

noter

noter serve

noter --help

第二步：配置环境变量

Noter 的根目录下需要创建 .env 文件，核心配置项如下：

如果你用 Ollama 做本地摘要，确保已经拉取了模型并启动了服务：

ollama serve  # 启动 Ollama
ollama pull deepseek-v4-flash:cloud  # 或你选择的模型

第三步：连接你的 Agent

设置 ACTIVE_SOURCE 环境变量来指定 Agent 类型：

export ACTIVE_SOURCE=claude-code

export ACTIVE_SOURCE=all

启动 Noter 后，仪表盘会自动在浏览器中打开。如果使用生产模式（noter serve），访问 http://localhost:3000 即可看到 Mission Control 的四格面板。

核心功能

Mission Control：四格指挥中心

Noter 的默认界面是一个 2×2 的网格布局，四个面板各司其职：

Notes（左上）：一个无边框的文本编辑区。你可以在这里写下观察、决策或提醒——比如”注意不要修改 auth 模块”或”这个功能应该用 Factory 模式实现”。笔记会自动保存（500ms 防抖），并作为上下文喂给建议引擎。

Suggested Tasks（右上）：Noter 根据 Agent 当前上下文和你的笔记，生成优先级标注的下一步任务卡片。每张卡片包含标题、描述和优先级标签（高/中/低）。如果两个任务有冲突，还会显示冲突警告。

Agent Context（左下）：实时显示 Agent 的状态摘要——它正在做什么、修改了哪些文件、遇到了什么阻碍。这个面板可以让你一眼了解 Agent 当前的工作阶段。

Suggested Prompts（右下）：Noter 根据当前状态生成的可直接复制的提示词。比如 Agent 完成了代码编写后，可能会生成”运行测试验证变更”的提示词，点击即可复制到终端粘贴给 Agent。

Blueprint：从笔记到执行计划

Blueprint 是 Noter 的 Pro 功能（€3/月），它的工作流程是：

1. 你在 Notes 中写下想法和需求
2. Noter 把零散的笔记整理成带决策理由的分阶段执行计划（Spec）
3. 每个阶段生成可直接粘贴给 Agent 的提示词
4. Agent 执行后，根据结果自动调整后续计划

这个模式特别适合复杂任务——比如重构一个模块，你可以先在 Notes 中列出目标和约束，Blueprint 自动生成按模块拆分、带回滚方案的执行计划。

架构概览

Noter 的架构分为三层：

Agent（Claude Code/Codex/OpenCode 等）
       │ SSE / MCP / JSONL
       ▼
Express 后端（端口 3000）
  ├─ EventStore — 200 事件 FIFO 环形缓冲区
  ├─ StateManager — 摘要、建议、笔记、提示词状态管理
  ├─ Summarizer — Ollama 驱动的上下文摘要
  ├─ Suggester — Ollama 驱动的任务建议
  └─ PromptBuilder — 支持 Ollama/Anthropic/OpenAI/Gemini
       │ WebSocket
       ▼
React 前端（端口 5173 开发 / 静态文件生产）
  └─ 2×2 Mission Control 界面

所有事件数据存储在本地内存中，不会发送到外部服务器（除非你使用云端 LLM 生成提示词，那是通过 API 直接调用，不经 Noter 中转）。

实际工作流演示

以下是一个使用 Claude Code + Noter 的典型工作流：

步骤 1：在终端中给 Claude Code 一个复杂任务，比如”重构用户认证模块，将 JWT 逻辑提取到独立服务中”。

步骤 2：打开浏览器访问 Noter 仪表盘。Agent Context 面板立即显示：”正在分析 auth.go 中的 JWT 相关函数…”

步骤 3：在 Notes 面板中写下约束：”保留现有的 Refresh Token 接口，不要改动数据库 Schema”。

步骤 4：Suggested Tasks 面板更新，显示：

• 🔴 高优先级：提取 validateJWT() 到独立服务（冲突警告：与 Notes 中的 Schema 约束无冲突 ✅）
• 🟡 中优先级：更新导入路径引用
• 🟢 低优先级：添加单元测试

步骤 5：Agent 完成后，Suggested Prompts 生成测试运行提示词，复制后粘贴到终端。

整个过程你不需要中断 Agent 的工作，也不需要等到它完成才了解进展。你在仪表盘上就能看到 Agent 的实时状态、修改文件列表和下一步计划。

适用场景

Noter 最适合以下场景：

• 复杂重构：多文件修改需要跟踪，你不想等到最后才发现 Agent 走错了方向
• 团队协作：多个 Agent 窗口同时工作，需要一个统一的监控面板
• 学习和审计：想理解 Agent 的决策过程，看看它是怎么一步步解决问题的
• 多人协作：你可以一边看 Agent 执行，一边在 Notes 中记录审查意见

局限性

Noter 目前在几个方面还有改进空间：

1. 本地 LLM 依赖：建议生成功能默认依赖 Ollama 和本地模型，如果没有 GPU，摘要生成可能较慢
2. 尚未原生支持 Hermes Agent：目前支持的 Agent 包括 Claude Code、OpenCode、Codex、Factory Droid 和 Pi，Hermes 用户需要通过 ACTIVE_SOURCE=generic 使用通用 JSONL 适配器
3. Blueprint 需付费：高级的 Spec 驱动规划功能需要 €3/月订阅
4. 事件缓冲有限：EventStore 只保留最近 200 个事件，长时间运行的任务早期事件会被覆盖

总结

Noter 解决的不是”让 Agent 更智能”的问题，而是”让开发者更了解 Agent 在做什么”的问题。在一个 AI 编码 Agent 越来越自主的时代，保持对执行过程的可见性，恰恰是开发者不被边缘化的关键能力。

如果你经常和 AI 编码 Agent 协作，又苦于无法实时了解它的工作进展，Noter 值得一试。它免费、本地运行、几分钟就能配置好，不会有数据隐私方面的顾虑。

相关链接

• Noter 官方网站
• npm 包 noterai
• Ollama