前言¶
在 DSH（DeepSeek Harness）的 Web 界面里，有几类信息平时不容易看到：上下文窗口用了多少、本次会话花了多少钱、工作区里有哪些文件、这一会话改过哪些文件。右侧的 details 列虽然承载了一部分内容，但切换、新建会话时会被自动收起，每次都要重新点开。
dsh-sidebar-panel 的做法是：在会话头部右上角加一个面板折叠按钮，把概览、文件、改动、工具四个页签放进右侧 details 列，并让面板常驻——切换、新建会话都不自动收起，收起状态也会被记住。
这是什么¶
dsh-sidebar-panel 是 DSH Web profile 的右侧面板插件，由 kee0012 维护，当前版本 0.2.0，MIT 许可证。客户端部分注入右上角折叠按钮（样式与左侧折叠按钮一致）和面板本身；服务端部分提供一组同源 HTTP API，为面板供数据。
核心功能¶
概览：账户、上下文与会话指标¶
概览页签上方是 DeepSeek 账户卡片：官方余额通过 GET https://api.deepseek.com/user/balance 实时查询，15 秒刷新一次，附带充值按钮，跳转 https://platform.deepseek.com/usage。
下方依次是：
- 上下文窗口：已用 / 总量 / 百分比 / 距压缩；
- 本轮上下文预算；
- 会话指标：命中率、本次会话费用、运行时间、请求数、累计 tokens；
- 用量分析：按来源 / 按类型，含输入输出、命中未命中明细。
服务端数据每 5 秒自动刷新，右上角显示「更新于 HH:MM:SS」。其中请求数、费用、运行时间由服务端从会话事件日志折叠得到；插件安装之前的历史会话，会在首次访问时一次性补算。
费用是估算值：按每次请求的 usage 乘以每百万 tokens 单价（缓存命中按低价），并按请求时刻的北京时间峰 / 谷时段加权。
文件：文件树、预览与右键菜单¶
文件页签展示当前会话工作区的文件树。单击文件即可预览：文本内联显示，PDF 与图片内嵌预览，大文件给出截断提示。
右键菜单提供这些操作：
- 在文件管理器中显示；
- 添加文件引用 / 添加文件内容（文件）；
- 添加文件夹引用（文件夹）；
- 复制绝对路径 / 复制相对路径。
引用和内容会写入对话输入框，直接发送即可。
改动与工具¶
改动页签列出本次会话中被写文件类工具（write/edit/str-replace-editor 等）触碰过的文件。这个追踪只覆盖写文件类工具调用，bash/pwsh 内部发生的文件改动无法可靠捕获。
工具页签是本窗口内的工具调用列表，附参数与结果详情，为插件自建渲染。原因是插件以 priority: -1 顶替了内置 DetailsPanel（单槽位只能有一个渲染者），内置面板的工具详情座无法复用；聊天里的 Inspect 按钮仍会打开右侧列，但不会自动选中工具。
面板常驻机制¶
面板开合状态存在浏览器 localStorage（dshSidebarPanel:details-open），默认 open。切换、新建会话时插件会让面板自动保持打开，直到你主动点击收起；此后所有切换都保持收起，直到再次点开。
新建会话的 blank（hero）阶段，插件通过一条声明式 CSS 规则保持面板常驻，面板结构性固定在右侧 360px 宽度，不会全屏或遮挡聊天区。
同源 HTTP API¶
服务端提供一组同源路由供面板使用：config、overview、files、file-content、file-raw、balance、reveal、changes。比如查看配置：
curl "http://127.0.0.1:3080/dsh-sidebar-panel/api/config"
跨域防护上，GET 请求不做 Origin 校验（同源 GET 本就不带 Origin 头）；POST 依赖「不响应 CORS 预检 + 仅接受 JSON」的防线。
安装与启用¶
在 DSH 运行的终端中执行（Web profile）：
dsh plugin --profile web add github:kee0012/dsh-sidebar-panel
安装后重启 DSH，并刷新浏览器（Ctrl+Shift+R）。
另一种 npm 安装方式（dsh plugin --profile web add dsh-sidebar-panel）暂未发布到 npm registry，不建议使用。
配置¶
在 DSH 组合配置（cordis.yml）中给插件加 config 即可，未提供时全部使用默认值。可配置项包括 fileBrowser（maxEntries / maxContentChars / includeHidden）、reference（文件 / 文件夹引用模板）、changes.writeTools、pricing（enabled / currency / 峰谷时段 / 倍率 / models 单价表）。README 给出的示例：
- id: dsh-sidebar-panel
name: dsh-sidebar-panel
config:
fileBrowser:
maxEntries: 500
maxContentChars: 40000
includeHidden: false
reference:
file: '@<path>'
folder: '@<path>/'
changes:
writeTools: ['write', 'edit', 'str-replace-editor', 'patch', 'run_code']
pricing:
enabled: true
currency: CNY
offPeakStartHour: 0.5
offPeakEndHour: 8.5
offPeakMultiplier: 0.5
models:
deepseek-chat: { inputPerM: 2, cacheHitPerM: 0.5, cacheWritePerM: 2, outputPerM: 8 }
deepseek-reasoner: { inputPerM: 4, cacheHitPerM: 1, cacheWritePerM: 4, outputPerM: 16 }
若你的模型不在 pricing.models 表中，会使用 pricing.defaultModel（默认与 deepseek-chat 相同）；需要精确匹配实际账单时，按你的模型实际价格调整单价表。
开发与测试¶
经过上面的安装步骤，插件即可正常工作。如果你想参与开发，可以先做语法检查，再跑服务端单元测试：
node --check src/index.js && node --check client/client.js
node test/unit.test.mjs
单元测试 mock 了 ctx，不需要 DSH 实例。API 冒烟测试：
curl "http://127.0.0.1:3080/dsh-sidebar-panel/api/config"
GET 无需 Origin 头；POST 冒烟需要带上 Origin。
服务端依赖 @deepseek-ai/schemastery（配置 schema）与 @deepseek-ai/dsh-credentials（读取 DEEPSEEK_API_KEY 凭据），二者由 DSH 运行时提供；以源码方式开发时，在插件目录执行 pnpm install 解析依赖。
适用场景与注意事项¶
适合在浏览器里使用 DSH Web profile、希望一眼看到上下文用量 / 会话费用 / 工作区文件的人。使用前注意：
- 仅支持 DSH 的 Web profile（HTTP 同源路由）；desktop（Electron）形态下自定义 HTTP 路由不可用。
- 余额查询需要在 DSH 凭据 / 环境变量中配置 DEEPSEEK_API_KEY，否则显示「未配置」提示；key 永不下发浏览器。官方没有公开的累计消费 / 请求次数接口，账户卡片因此不展示这两项。
- 费用为估算值，匹配精度取决于定价表配置。
- 改动追踪只覆盖写文件类工具，bash/pwsh 内部的改动不在覆盖范围。
- 插件以当前 dsh 进程的权限运行，安装前建议先阅读源码并确认许可证（MIT）。
DSH 的理念是「一切皆插件」，插件生态由社区维护；文末的目录页是独立社区站点，与 DeepSeek、幻方没有官方从属关系。
结语¶
dsh-sidebar-panel 把上下文、费用、文件和工具调用这些散落的信息收进一个常驻右侧面板，省去了反复点开 details 列的操作。安装一条命令即可体验：
dsh plugin --profile web add github:kee0012/dsh-sidebar-panel
- 目录页：https://www.skillhub.cn/plugins/kee0012/dsh-sidebar-panel
- GitHub：https://github.com/kee0012/dsh-sidebar-panel
