@deepseek-ai/dsh-client-ui-board

Readme

# @deepseek-ai/dsh-client-ui-board — DSH Web 展板

为 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) Web GUI 开发的**展板**插件，
作为会话视图里与 对话 / 轨迹 并列的**第三个标签「展板」**。发布为 DSH 客户端插件（`dsh.client`），支持 GitHub / npm / tarball 分发。

> 本插件是「展板」，在对话过程中把项目的各层结构（界面层 / 代码层 / 功能层…）用**多层白板**和**连线**画成一张可随时查看的思维导图。绑定到当前会话的**项目**（workspace 路径），同一项目内的所有会话共享同一块展板，方便随时梳理与回顾。

## 核心模型

- **盒子**（`BoardNode`）承载文字，属于一个或多个**图层**（`layerIds`）。**连接线**（`BoardEdge`）
  连接两个**锚点**（`Anchor`），自带文字和样式。
- `Anchor` 要么是**节点侧端口**（`{kind:'node', nodeId, side}`），要么是
  某条连接线上的**一点**（`{kind:'edge', edgeId, t}`），因此一条连接线可以从另一条
  线上**分叉**/汇入。连接线始终在目标端画出箭头。
- **图层切换**是一个复选框滤镜：元素在任一勾选图层即显示。

## 模型体验（AI interop）

展板文档就是 `src/client/board.model.ts` 里的 `BoardDocument` JSON。
**AI 视图**标签渲染序列化的 JSON 并提供 *Copy*；agent 可用文件系统工具
读/写项目级 `.dsh-board.json`。`normalizeDocument` 兼容旧版
单 `layerId` / 纯节点 id 结构（且永不抛错）；`validateDocument` 报告问题。

最小文档：

```json
{
  "version": 1,
  "title": "我的项目",
  "activeLayerId": "L1",
  "layers": [ { "id": "L1", "name": "通用", "color": "#5b86e6" } ],
  "nodes": [
    { "id": "n1", "x": 60, "y": 60, "w": 180, "h": 64, "text": "界面层",
      "layerIds": ["L1"],
      "style": { "fill": "#e6faed", "stroke": "#1fc27e", "textColor": "#1f2733", "shape": "round", "fontSize": 15, "bold": true } }
  ],
  "edges": [
    { "id": "e1",
      "from": { "kind": "node", "nodeId": "n1", "side": "right" },
      "to": { "kind": "node", "nodeId": "n2", "side": "left" },
      "layerIds": ["L1"], "label": "",
      "style": { "color": "#8494a4", "width": 2, "curve": 40, "dashed": false, "arrow": true, "labelColor": "#5f6368" } }
  ]
}
```

从另一条连接线分叉用 `"from": { "kind":"edge","edgeId":"e1","t":0.5 }`；
汇入另一条线则在 `"to"` 上用同样写法。

## 关键源码

| 文件 | 作用 |
| --- | --- |
| `src/client/index.ts` | 插件入口，把展板注册进会话视图的 `conversation.view` 槽位（第三标签） |
| `src/client/BoardView.tsx` | 展板画布组件（绘制盒/线、图层切换、AI 视图） |
| `src/client/board.model.ts` | 数据模型与几何（`BoardDocument`、锚点/连线、归一化/校验） |
| `src/client/locales.ts` | 国际化的中文/英文文案 |
| `src/invariant.ts` | 包级权重伴侣的不可变声明 |

## 安装

要求已安装 `dsh` CLI（`dsh --help` 存在）。

### 从 GitHub 安装（推荐）

```sh
dsh plugin add github:LaoQianwocao/dsh-client-ui-board
```

第一次安装若 pnpm 提示需要允许构建脚本，把打印出的包 `key` 填入
profile 的 `pnpm-workspace.yaml` 的 `allowBuilds`，然后重跑 `add`。

### 从本地 tarball 安装

```sh
pnpm pack
dsh plugin add ./dsh-client-ui-board-*.tgz
```

### 手动注册（无 bundle 时的兜底）

在 profile 的 `cordis.patch.yml` 中插入：

```yaml
- insert:
    - id: ui-board
      name: '@deepseek-ai/dsh-client-ui-board'
```

之后无需改动任何官方文件，**重启 dsh web 服务**并刷新浏览器页面，会话视图即出现「展板」标签。

## 在 dshfind.com 上被发现

本仓库打上 GitHub topic：`dsh-plugin`（在仓库 Settings → Topics 添加），即可被
[dshfind.com](https://dshfind.com) 收录 —— 它索引 topic 为 `dsh-plugin` 的公开仓库。

## 结构

- `package.json` — 声明 `dsh.client`（platform: web）与 `dsh.bundle`（自注册行）
- `cordis.patch.yml` — 注册本插件的宿主端行（plugin row）
- `src/` — 源码（`board.model.ts` / `BoardView.tsx` / `locales.ts` / `invariant.ts`）
- `lib/` — 预构建产物（`index.js` / `invariant.js` / `client.js` / `types/`）