dsh-question-panel-collapse

Readme

# dsh-question-panel-collapse

DeepSeek Harness (DSH) Web 的**提问面板折叠**插件：agent 向你提问时（ask_user / plan 审批等），提问面板会直接占住对话框底部一大块。本插件在**提问面板自己的 header 里**（✕ 取消按钮左边）加一个纯图标 chevron 小按钮——点它把面板**折叠成一条紧凑小条**（不是消失），再点展开，**未提交的回答草稿原样保留**。

## 功能

- **折叠（⌄）**：面板 header 内 ✕ 左边的纯图标 chevron 按钮（无文字）。点击后面板收缩成一条紧凑小条：左上角保留问题标题（13px 单行省略）、右侧保留 ✕ 取消与 chevron。
- **展开（⌃）**：点折叠条里的 chevron，面板恢复完整内容（问题、选项、提交区），回答草稿原样保留（折叠只是 CSS 隐藏内容区，面板组件与草稿 state 始终存活在 composer chain 中）。
- 折叠状态持久化到 `localStorage`（刷新/切换工作区保留）。
- 覆盖 QuestionFlow（选择题/填空）与 PlanReviewPanel（plan 审批）两种面板形态。
- 中英文双语 tooltip（跟随 DSH `locale` 服务）。
- 纯前端：无 host 命令、无 LLM 调用、不进会话日志。

## 安装

```sh
dsh plugin --profile web add ./dsh-question-panel-collapse
```

或从 GitHub 安装：

```sh
dsh plugin --profile web add "github:Townrain/dsh-question-panel-collapse#main"
```

重启 DSH Web 后生效；下次 agent 提问时，面板右上角 ✕ 左边出现 chevron 按钮。

## 工作原理

| 环节 | 机制 |
| --- | --- |
| 按钮位置 | React Portal 渲染进 `[data-question-key] header`，wrapper `insertBefore` 插到 ✕ 之前，`margin-left:auto` 贴右（header 是 flex + space-between） |
| 面板检测 | MutationObserver 监听面板 DOM 出现/消失（rAF 节流），注册在 `shell.overlay`（frame 悬浮层，不被 composer chain 的 fallback 隐藏机制影响） |
| 折叠切换 | 在 `[data-conversation-scroll]` 上切换 `dsh-question-panel-collapse-on` class，CSS 隐藏 `[data-question-scroll]` 内容区与 `footer` 提交区，header 压缩为紧凑条（标题小字、chevron 略下移） |
| 草稿保留 | 内容区 `display: none` 不动面板 state，展开后原样恢复 |
| 状态共享 | 模块级 observable + `useState` 桥（session 作用域 entry store 按 entry×session 各自实例化，无法跨组件共享），写时持久化 localStorage |
| 硬依赖 | `inject = ['slots', 'locale']` — 均为官方 harness 客户端服务；`react-dom` portal |

## 开发与打包

```sh
pnpm install
pnpm build   # tsdown: lib/index.js（ESM host）+ lib/client.js（ModuleLoader 客户端 bundle）
```

## License

MIT