DeepSeek Harness Web UI:Host、Client、Remote 与 Slot 插件
JotaroRD

模块定位

Web UI 是 DeepSeek Harness 的主要产品界面,但它不是一个简单 React app。它分成 host half 和 browser half:Host 管服务和 API,Client 管浏览器 runtime、UI slots 和渲染。

源码入口:

  • packages/host/*
  • packages/client/*
  • apps/web/src/main.ts
  • packages/bundle/web-app
  • docs/subsystems/client-modules.md
  • docs/api-gateway.md

Host Half

packages/host 包含:

包 职责
webserver HTTP route carrier
apiproxy Host API gateway 和 wire contract
frontend-static SPA dist server
directory-picker/* workspace directory picker seam 和实现
plugin-inventory Loader entries 只读投影

Host 负责把运行时服务安全地暴露给浏览器,而不是让浏览器直接碰 Node 内部对象。

Client Half

packages/client 包含浏览器侧能力:

  • web:browser shell。
  • connection:host RPC 通信。
  • runtime:session、workspace、UI composition 服务。
  • web-react:React renderer。
  • ui-slots:slot 系统。
  • ui-conversation:对话界面。
  • ui-tool:工具调用树和工具卡片。
  • ui-settings-*:设置页。
  • ui-sidebar:workspace/session 导航。
  • ui-plan、ui-goal、ui-subagent、ui-jobs:协作功能面板。

数据流

1
2
3
4
5
6
7
8
flowchart LR
A["Session Log / Host Services"] --> B["API Proxy"]
B --> C["client connection"]
C --> D["client runtime"]
D --> E["UI slots"]
E --> F["React surfaces"]
A --> G["tool presentation metadata"]
G --> F

Client 不应该按工具名写死所有 UI。工具可以提供 presentation intent,UI 根据 card 类型渲染。

Slot System

Slot system 是 Web Client 的插件化基础。Feature package 不需要改中心组件,而是向 slot 注册 contribution。这样 settings tab、conversation header、sidebar entry、tool renderer 等都可以扩展。

这和后端 Cordis 插件树呼应:后端服务通过 ctx 扩展,前端 UI 通过 client slots 扩展。

Web Bundle 怎么挂载 UI

packages/bundle/web-app/cordis.patch.yml 在 base 之上挂载 host rows 和 browser plugin roster。web-runtime glue plugin 会:

  • 找到 built frontend dist。
  • 提供 webRuntime。
  • 注册 web-surface prompt section。
  • 设置 bash-visible DSH_WEB_URL。
  • 在 Loader settle 后打印 URL。

常见坑

第一,前端开发需要 built frontend 或 dev watcher。生产 web bundle 没有 source-serving fallback。

第二,UI replay 不能依赖 live-only 进程对象。要从 durable result 和 presentation metadata 渲染。

第三,Host API gateway 是共享 wire 层,不要绕过它让浏览器直接调用 Node 内部。

第四,新增 UI 功能优先找 slot,不要改大组件。

继续读源码

  • packages/host/README.md
  • packages/client/README.md
  • packages/bundle/web-app/README.md
  • docs/api-gateway.md
  • docs/subsystems/client-modules.md