dsh-widgets

dsh plugin --profile web add dsh-widgets

---

description: "右侧实时组件栏：会话、机器、额度与成本，一眼看完。"

---

<p align="right"><a href="README.md">English</a> · <b>简体中文</b></p>

<p align="center">

<img src="docs/icon/icon.svg" alt="dsh-widgets" width="104" height="104">

</p>

<h1 align="center">DeepSeek-Harness Widgets · 组件栏</h1>

<p align="center">

<strong>对话右边那条空带，变成一格格实时卡片；想收起来，一键就收起。</strong>

</p>

<p align="center">

61 张卡：会话 · 上下文 · 后台任务 · 这台机器 · 额度与花费 · 峰谷定价<br>

每张独立安装、2×2 / 2×4 调尺寸、按实例调阈值、不看就关；指针划过有 macOS 坞站式放大波峰。

</p>

<p align="center">

<img src="https://img.shields.io/npm/v/dsh-widgets?style=flat&label=%E6%9C%80%E6%96%B0%E7%89%88%E6%9C%AC&color=4D6BFE" alt="最新版本">

<img src="https://img.shields.io/npm/dt/dsh-widgets?style=flat&label=%E7%B4%AF%E8%AE%A1%E4%B8%8B%E8%BD%BD&color=4D6BFE" alt="累计下载">

<a href="https://github.com/Physicolor/dsh-widgets/stargazers"><img src="https://img.shields.io/github/stars/Physicolor/dsh-widgets?style=flat&label=%E2%98%85&color=08C" alt="GitHub stars"></a>

<img src="https://img.shields.io/badge/license-MIT-2EA44F?style=flat" alt="MIT License">

<img src="https://img.shields.io/badge/DSH%200.1.x%20%2F%200.2.x-4493F8?style=flat-square" alt="支持 DeepSeek Harness 0.1.x 与 0.2.x">

</p>

<p align="center">

<img src="docs/screenshots/cover.zh-CN.png" alt="DeepSeek-Harness Widgets 预览" width="100%">

</p>

<p align="center">

<img src="docs/screenshots/rail-demo-still.png" alt="组件栏静息时的网格（波峰放大动图见「波峰放大（动图）」）" width="40%">

<img src="docs/screenshots/desktop-market.png" alt="组件市场与已安装列表" width="48%">

<br>

_{装好之后的样子（左边的静帧点开是动效：<a href="docs/screenshots/rail-demo.gif">rail-demo.gif</a>，3.8 MB）· 以及安装、调尺寸、关掉每一张卡的组件市场。}

</p>

安装（30 秒）：把下面两行整段复制给你的 DSH agent，或者自己在终端跑：

# `web` 是 `dsh web` 的默认 profile 名；你自己的 profile 名 = $DSH_HOME/profiles/ 下的目录名
dsh plugin --profile web add dsh-widgets
# 装完重启 dsh web，浏览器硬刷新一次（Ctrl+Shift+R）

不会用命令也没关系——跟你的 DSH 说一句「装上 dsh-widgets 插件，重启 web 之后告诉我」就行；装完点会话头部的 组件 图标，栏就出来了。

支持 DeepSeek Harness 0.1.0-rc.6+（0.1.x）与 0.2.0-rc.1+（0.2.x）。组件栏挂在会话头部的

组件 图标后面；在 设置 → 组件 里安装、排序与调整尺寸。

你得到的：61 张卡，装的、摆的、调的都随你——

• 实时会话——轮次·步数、上下文水位与压缩、token 与缓存命中率、LLM 时长、首 token 延迟、工具调用、后台任务与子代理；
• 钱与额度——OpenCode Go 的滚动 / 周 / 月窗口；Command Code 的 5 小时 / 周 / 月限额，点一下即在整个 Key 池之间切换，外加余额、月末外推与今日推荐；
• 时间，以及官方钱包——时钟（指针或数字、六个时区）、日历（有 DSH 定时任务的日子打点；2×2 月历，2×4 多一列临近日程）、任务计时器（本回合已跑多久、此刻在等什么）、秒表（开始 / 暂停 / 复位）、倒计时（时长胶囊或最近的定时任务），以及 DeepSeek 余额卡（旁边是账本推导的当日花费）；
• 这台机器——CPU / GPU / 内存 / 磁盘 / 网络 / 供电，含迷你折线、环形图，以及本地服务与代理出口看板；
• 你自己的视图——每张卡都是独立单元：装它、选 2×2 或 2×4、改它的阈值，或者干脆关掉；其余由组件栏自行排布。

一句话：装一个插件，对话右侧那条空带就变成一格格实时卡片——token 与缓存、上下文、后台任务、机器状态、额度与花费。每张卡都是独立单元，装、改尺寸、调阈值、关掉都随你；整条组件栏想收就收。

DeepSeek-Harness Widgets 会在 DeepSeek Harness 会话页的右侧放上一条组件栏。每张卡都是独立单元：从内置市场里挑，放进 1–4 列的网格，选 2×2 或 2×4，按实例单独配置，不看的直接关掉。组件栏只占用正文旁边那条空带，一键即可整栏收起。

为什么值得装：那些数字本来要另开标签页或另开面板才看得到——上下文还剩多少、这个会话花了多少、额度还有几天到期、机器烫不烫。它们更适合安静地待在对话旁边，扫一眼就走，不打断你正在做的事。

如果它帮上了忙：这个插件没有别的分发渠道，只有「被人看到」这一条——在 Physicolor/dsh-widgets 点一个 star，就是把它推到 DSH 各插件目录前列、让更多人看到的那一下（GitHub 的搜索与推荐都按 star 排序）。从视频过来的话，在弹幕或评论里说一句你装了哪几张卡，比 star 更能让我知道该往哪加；Bug 与组件想法在 issues 里一直开着。

官网 / Showcase

项目官网位于 [website/](website/)，线上地址 https://physicolor.github.io/dsh-widgets/，是一座设计系统站点：讲 dsh-widgets 是什么、为什么存在、全部 61 个真实组件，以及 DSH Widget Design Grammar（直接取自 src/client/index.ts 的真实单位/间距/放大公式，并带一条交互式组件栏跑插件自己的放大曲线与右对齐回流）、Widget Anatomy（一张真实卡片放大 ×2，每一处内边距、间距与内缩都从 DOM 实测标注）、DSH Visual Audit（13 条明示规则对全部 61 个组件按真实 getBoundingClientRect 测量打分——规则驱动，不是模型打分）、部件单元化架构、生产 Workflow，以及「需求表 → Widget Specification」生成器。站点为纯 HTML/CSS/JS，无构建步骤，所有路径都是相对路径（适配项目 Pages 的 base path）。node website/verify.mjs 自校验（静态 + SEO + Edge 无头浏览器检查，共 88 项）；组件表、静态画廊 markup 与 JSON-LD ItemList 由 node website/gen-site.mjs 从各 manifest 生成（--check 在漂移时报错）；node website/gen-og.mjs 重新生成社交分享图。部署方式见 website/README.md。

---

当前功能

多列网格布局

项目 · 说明

最多列数 · 1 / 2 / 3 / 4（设置中下拉选择，默认 2 列）。这是上限：空间不足时自动逐级回退，空间充裕也不会超过它

最多行数 · 1–12（默认 5 行）。与「最多列数」相乘就是组件区一次能摆下的格子数，也就是可放置组件的上限：「最多组件数」按 列 × 行 生效（存储值不会丢，调大列或行就立刻恢复），设置行上有感叹号标记，悬停说明是被哪一个数字覆盖的

可用宽度从哪来（为什么还有空位却不加列） · 组件栏只吃正文阅读宽度之外的余量：列宽 − 阅读宽度 − 74px − 24px（74 = 官方滚动区两侧内边距与列宽拖拽带的保留，24 = 安全余量）。阅读宽度是官方发布的 CSS 变量——DSH 0.1 叫 --dsh-chat-content-width，0.2 改名成了 --dsh-chat-user-width；插件此前只读旧名，读不到就退回估算值（1578px 窗口下 831px 而不是真实的 748px），预算少算约 83px，于是「对话区两侧明明有空间却始终少一列」。两个名字现在都读。修正后同一窗口实测：列宽 1298、阅读宽度 748 → 可用约 452px，3 列 ×130px（占用 430px）或 4 列 ×100px；正文卡片保持 748px 不被压缩。左右两条空白里只有右边的可被占用（组件栏右锚定，靠给滚动区加 padding-right 占地，正文会重新居中；占得超过 列宽 − 阅读宽度 就会压小阅读宽度，这条线不能越），左边那条是正文居中的留白

2×4 长方形组件 · 宽度为两个 2×2 加一个间距，高度与 2×2 相同；同一组件可同时以两种尺寸安装

无空隙排列 · 组件按最优适配（best-fit）打包，2×4 留下的空格由后续 2×2 回填，拖动排序永不留下空洞。3 列时若 2×4 会被「截断」，它整体前移一格、被顶掉的 2×2 后移一格（类似四舍五入），长方块不会被孤立

拖宽实时响应 · 拖动对话宽度时每帧重算可用宽度，卡片在该列数下的档位边界处立即换档（拖动期间正文内边距不做补间，与对话区同步）；列数在阈值处增减。全部为 2×4 时降级跳过 3 列（2 ⇄ 4）；显式选择 3 列则始终保留

过渡手感 · 尺寸换档与列数变化都用轻微回弹（约 4% 过冲的弹簧曲线）平滑放大/缩小与滑到新格子，另加一段按排布顺序错开的微型沉降波（约 1.6% 幅度、逐卡 30ms）——不是整块组件区一起「弹」。组件栏自身的宽度与对话区留白也用同一条弹簧，所以换档时容器、卡片、正文三者同步移动，不会出现「容器已经跳过去、卡片还在追」

悬浮放大 · 多列网格同样生效；放大时行/列都按平面距离让位，间距恒定

滚轮 = 整行挡位滚动 · 滚轮以整行为挡位（位移恒为 行高 = 卡片边长 + 间距 的整数倍），因此顶部那行永远完整、不会被截断；一档把下一行拉到顶行的位置。底部被视口切掉的那张卡直接不画（见下方「只显示完整组件」），所以组件栏里永远只有完整卡片。滚动一律走浏览器自身的平滑滚动，鼠标在卡片上、间隙里还是组件栏空白处都一样顺滑，不会出现逐格硬跳

组件栏的顶边贴在会话页头的下沿（--dsx-rail-top，首行卡片正好压在这条线上；1578×950 实测 44px，首行卡片 50px）。锚点取「组件按钮（页头里的胶囊）所在那一行」与「页头下沿」两者中更低的一个：胶囊是用户读组件栏位置的参照物（实测它在距窗口顶 11px 处），但页头本身是不透明白底 + z-index: 21，而组件栏所在的 composer seat 只有 7 —— 画在页头下沿之上的卡片是被盖住而不是被裁剪（实测把栏顶放到胶囊的 11px，首行会被盖掉 33px）。所以默认值就是「贴到胶囊那一行所允许的最高位置」。

连续波峰悬浮放大

macOS Dock 式悬浮放大，两种跟随模式（在 设置 → 组件 → 组件设置 → 悬浮放大 → 无极变化（连续跟随） 中切换）：

• 无极变化（连续跟随）：真正无极——每张卡片的缩放由它自身到指针的连续欧氏距离决定，指针任意移动，波峰都在卡片之间平滑滑动。它每一帧都落位到稳态的右对齐几何（transition: none），因此卡片右缘在移动过程中也始终与组件栏齐平，不会出现宽度/右缘失步。
• 离散（默认）：复用同一套连续几何，只把指针吸附到量化格点（行/列中心 + 相邻中点：Y 方向 2·行数−1 个点、X 方向 2·列数−1 个点），波峰在格点之间滑动同样由那条弹

…(truncated)