88 lines
4.1 KiB
Markdown
88 lines
4.1 KiB
Markdown
|
# 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`：
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
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 显示真实错误，不伪装成功。
|
|||
|
|
- 浏览器截图自检通过后再汇报。
|