嵌入 Web Shell 与 React 绑定
连接 daemon 会话并选择同源页面、代理或后端转发部署。
This page has not been translated into English yet. The original Chinese version is shown below.
Web Shell 使用 daemon HTTP/SSE 维护会话,再把事件投影为客户端 transcript。它的 Web terminal 是浏览器内的语义渲染器,提供终端风格布局与流式块,不是服务器 PTY 或 Ink 画面的简单转发。
选择嵌入层
使用 @qwen-code/web-shell 的 WebShellWithProviders 可嵌入完整界面;需要自定义 React UI 时,可从 @qwen-code/web-shell/daemon-react-sdk 使用 DaemonSessionProvider 及相应 hooks。
Provider 负责创建或附加会话、订阅 SSE,并由 DaemonSessionClient 保留重放游标。默认自动重连;测试或自定义连接管理可设置 autoReconnect={false}。
无 React 的宿主可直接使用共享 UI store。不要为了复用 reducer 引入完整 Web Shell。
浏览器部署形态
| 形态 | 路径与要求 |
|---|---|
| daemon 自己提供的页面 | 页面与 API 同源,可直接连接;适合本机验证 |
| 独立本地前端开发服务 | 与 daemon 端口不同即跨源;需同源代理或改由 daemon 提供页面 |
| 远程应用 | 通常由 BFF 持有 daemon 地址、token、工作区路由和会话信息,再向浏览器发送应用事件 |
daemon 不接受任意浏览器 Origin。旧 channel/web 草案中“浏览器完全不能直接连接”的描述属于早期设计,当前同源 Web Shell 是明确支持的路径;不能据此放开任意跨域请求。
BFF 形态应把 bearer token 留在后端,并自行决定用户可以访问哪个 daemon 与工作区。直接提供的 Web Shell 使用自己的认证流程,详见daemon 认证。
宿主仍需负责的 UI
消息、思考块、工具状态、Shell 输出、审批控件和错误展示由宿主选择布局。已知事件可以用共享原语处理;缺失的界面能力应明确展示,不要默默模拟与另一客户端完全一致。
Webview 嵌入还需由宿主连接 transport 与 UI,不能只嵌入组件就假定本机编辑器、浏览器、文件和凭据会自动出现在 daemon 所在环境。
侧栏默认值、菜单与会话操作见侧栏定制。