4.1 KiB
4.1 KiB
7-66 [process] Page AI opencode-native UI v1
创建时间:2026-06-24
当前状态:
RECYCLED / 失败方向,仅保留为反例Owner:07-ai / Page AI / opencode-native UI
1. 结论
本稿提出的 MNote-native opencode UI 方向已废弃。用户确认目标应参考 opencode-chat:MNote 薄宿主壳 + 官方 opencode WebUI iframe + 最小 host bridge,而不是在 MNote 内复刻 opencode 消息流、tool UI、permission UI。
因此 7-66 只作为反例保留:native message timeline / composer / permission cards 可以临时作为 debug receipt,但不得成为 Page AI 主 UI,也不继续扩写。当前主线回到 7-65:
MNote Page AI = MNote host chrome + opencode 官方 WebUI iframe + MNote open/refresh/changed files receipt
opencode = 官方聊天 UI、session、tool、permission、diff、model/provider
2. 参考结论
2.1 opencode 官方 VSCode 插件
官方 VSCode 插件 sst-dev.opencode 的公开说明更偏 IDE 集成而不是完整 WebUI 复刻:
- 快捷键启动/聚焦 opencode terminal session。
- 新建 opencode terminal session。
- 自动共享当前 selection/tab。
- 支持
@File#L37-42文件引用。
这说明官方 IDE 路线不是“把 WebUI 完整 iframe 到 IDE”,而是让宿主 IDE 负责上下文、入口和文件引用,opencode runtime 负责 agent。
2.2 社区 VSCode WebUI 插件
社区方案集中在两类:
- sidebar chat + diff viewer + multi-session tabs;自动启动
opencode serve,通过 HTTP/SSE 通信。 - React webview 渲染 session、message parts、tool cards、permission、diff、provider/model。
对 MNote 的启发:不要再塞 iframe;应该使用 opencode API/SSE 重渲染 MNote-native UI,并保留 MNote 打开文件/刷新编辑器。
3. 必须覆盖的 opencode 功能
Phase A:可用会话壳
- session list / create / resume / current binding。
- 当前 session 状态:agent、model/provider、token/cost、idle/running/error。
- composer:发送 prompt、排队/运行状态、abort。
- context bar:当前页、真实 Markdown 路径、selection、allowed roots。
Phase B:消息与 parts
- user / assistant / system / synthetic 区分展示。
- 隐藏 MNote context envelope 噪声,但保留“上下文已注入”状态。
- text part 正文渲染。
- reasoning part 折叠展示。
- tool part 卡片:tool 名、状态、输入/输出摘要。
- patch part / file part / shell part / agent/subtask part 以卡片展示。
- message error、finish、tokens/cost 展示。
Phase C:权限、问题、diff
- permission.asked 列表:allow once / always / reject。
- question request:文本输入回复 / reject。
- changed files chips:点击用 MNote 打开。
- diff summary:新增/修改/删除数量;当前页命中后刷新编辑器。
- abort / revert / unrevert 留出按钮,但 MVP 可先只接 abort。
Phase D:事件驱动刷新
- 订阅
/api/page-ai/opencode/events。 - 处理
message.updated、message.part.updated、message.part.delta、session.next.*、permission.v2.asked/replied、session.diff、session.error。 - 不高频轮询;事件只触发有界 refresh:messages / permissions / diff。
4. MNote 特有集成
- changed file click:
window.__mnoteDocumentPaneRuntime.openResourceInActiveTab()。 - 当前页被修改:
refreshPrimaryDocument({ reason: 'page-ai-opencode-event' })。 - selection/current page/allowed roots 由现有 Page AI target runtime 计算。
- iframe 反代只保留
debug fallback,默认 UI 不使用 iframe。
5. 第一版验收
- 打开 Page AI 看到 MNote-native opencode 面板,不出现 iframe 空壳。
- 能创建/恢复 session。
- 能发送真实消息,看到 user message 和 assistant/text/tool/reasoning/patch 卡片之一。
- 能看到 session list、model/provider、changed files、permission 区域。
- 如 opencode/provider 出错,UI 显示真实错误,不伪装成功。
- 浏览器截图自检通过后再汇报。