206、【Agent】【OpenCode】TUI 内部：装配层与 context 工厂

【声明】本博客所有内容均为个人业余时间创作所述技术案例均来自公开开源项目如GithubApache基金会不涉及任何企业机密或未公开技术如有侵权请联系删除标题206、【Agent】【OpenCode】TUI 内部装配层与 context 工厂背景上篇 blog【Agent】【OpenCode】TUI 内部.tsx 与 .ts 的分界线讲了.tsx TypeScript JSX编译器靠后缀决定当标签还是泛型TUI 里.tsx属组件/渲染层app、context 组件、component.ts属纯逻辑层thread/worker/win32判据是是否进组件树而非是否写了 JSX——sdk.tsx几乎没 JSX 也是.tsxdirectory.ts提供数据不渲染所以.tsTUI 用的是 Solid.js。205 从文件系统看出了组件层/逻辑层的分层本篇再从架构看两个关键.tsx的分工app.tsx是装配层组合根sdk.tsx是 context 工厂的产物——一个当主板一个当网卡OpenCodeapp.tsx和sdk.tsx都属于.tsx组件层205 篇但抽象层次完全不同一个决定整棵树怎么拼一个只是树里的一块通信模块。要理解这个分工先看它们共用的地基——createSimpleContext工厂。地基context 工厂 createSimpleContextcontext/helper.tsx:3-25定义了一个生成上下文提供者的工厂TUI 里 12 个 context 文件都靠它它一次产出两样东西provider一个 Solid 组件用ctx.Provider向下提供值还带ready门控和use()取值的钩子没在 provider 内用就抛错。context/下 exit/prompt/args/sdk/tui-config/sync/theme/kv/route/keybind/local 全都由这个工厂生成。sdk.tsx工厂的一个实例——通信模块sdk.tsx:11就是工厂的一次调用生成SDKProvider与useSDK// sdk.tsx:11exportconst{use:useSDK,provider:SDKProvider}createSimpleContext({name:SDK,init:(props){/* createOpencodeClient 事件分发204 篇已拆 */},})sdk.tsx 的职责很单一造 SDK client、管事件流204 篇讲的 createSDK / internal-external 分支 / 16ms 合并 / setWorkspace 全在里面。它对上游接收 transport对下游通过useSDK()把client/event/directory/url交给18 个组件session 页、permission、question、prompt 自动补全、各 dialog…。app.tsx组合根——把 18 个模块装配成树app.tsx 的角色完全相反它不用工厂、不造模块而是把 context 工厂产出的所有 provider按依赖顺序层层嵌套组装成整棵树app.tsx:138-161render( () ( ErrorBoundary fallback{...} ArgsProvider {...input.args} ExitProvider onExit{onExit} KVProvider ToastProvider RouteProvider TuiConfigProvider config{input.config} SDKProvider url{...} directory{...} fetch{...} events{...} SyncProvider ThemeProvider mode{mode} ... PromptRefProvider App /每一层包都对应 context 工厂的一个实例App /在最内层真正渲染页面。而tui()app.tsx:107是这棵树的入口——thread.ts 把 transport 交给它它负责把 transport 分发给对应的 providerSDKProvider拿 url/fetch/events、TuiConfigProvider拿 config。数据流向一个接上游一个供下游thread.ts启动链路 │ transport: url / fetch / events / directory / config ▼ app.tsx tui() ← 接住上游做装配组合根 │ 把 transport 喂给各 provider ▼ SDKProvidersdk.tsx 的工厂产物 │ createOpencodeClient 造出 client ▼ 18 组件 useSDK() ← 从下游取 client / event通信闸口方向完全相反app.tsx 向上接 thread.ts入口/装配sdk.tsx 向下供组件取数据闸口/通信。对比总结维度app.tsxsdk.tsx角色组合根 / 装配层context 工厂的单个实例职责18 层 provider 嵌套 App /造 SDK client 管事件流生成方式手写tui() JSX 树createSimpleContext工厂对上游接 thread.ts 的 transport入口收 app 分发的 transport对下游无只管装配useSDK()供 18 组件取 client类比主板通信网卡一句话记忆helper.tsx的createSimpleContext是 context 工厂TUI 12 个 context 都由它生成 provider/usesdk.tsx是它的一个实例——只管通信useSDK()供 18 组件取 clientapp.tsx是组合根——不造模块只把 18 层 provider 按依赖顺序嵌套成树向上接住 thread.ts 的 transport。一个是主板一个是网卡。OK本篇先到这里如有疑问欢迎评论区留言讨论祝各位功力大涨技术更上一层楼更多内容见下篇 blog【Agent】【OpenCode】TUI 内部18 层 Provider 的职责地图