dsh-widgets · v1.8.5 · MIT · DeepSeek Harness 0.1.x / 0.2.x

DeepSeek Harness Widgets

右侧实时组件栏 · 61 张真实卡片 · 会话、机器、额度与成本一眼看完

将对话区域中的留白空间,转化为高信息密度、可随时隐藏的辅助界面。

61 live cards on the right of DeepSeek Harness — session, machine, quota and cost at a glance, installed with one command. Behind them: the spatial geometry, a measured visual audit, and the agent pipeline that produces each unit.

61
组件
7
分类
150
px 网格单元
13
条审计规则

一条命令安装

从插件市场添加即可——无需改任何配置文件。

dsh-widgets@1.8.5 · DeepSeek Harness 插件
$ dsh plugin --profile web add dsh-widgets
# 然后硬刷新浏览器(Ctrl+Shift+R),并点击会话顶部的组件图标展开组件栏。

以 npm 包 dsh-widgets 分发 · DeepSeek Harness 0.1.0-rc.6+ · 本地开发使用 link 安装。

什么才是好组件

在有限空间里,让最重要的信息先被看到。下面六条不是口号——每条都绑定一个真实组件和一段真实几何。

01

有用Useful

一个组件只回答一个问题。Turns · Steps 不做别的,只报当前会话的轮次与步数。

src/widgets/counts11 轮 · 137 步
02

紧凑Compact

150px 单元里放得下标题、主读数与图表:内边距 12、圆角 16、标题 13、主值 20、说明 10——全部按 scale = unit / 150 缩放。

src/client/components.tsx:45912 · 16 · 13 · 20 · 10
03

清晰Clear

主读数唯一且最大,明细退到说明字号。上下文水位里 42% 领衔,系统/工具/消息只在下面记账。

src/widgets/context-water20px 主值 / 10px 明细
04

空间分组Spatial grouping

卡片只有三层:标题行、可选说明、内容块;层与层之间固定 6px 节奏,说明行紧贴标题而不会挤走标题。

src/client/components.tsx:588gap 6px × 3 层
05

锚定Anchoring

整列右缘锚定:卡片放大只向左生长,行距靠累加行高维持,右边缘永远齐平——所以放大时不会把栏推走。

src/client/index.ts:1158right-anchored reflow
06

连续放大Continuous magnification

悬停按欧氏距离连续起峰:峰值 ×1.2,影响半径 3 格,衰减 t^1.6;指针在行内横移,上下行也会小数级让位,而不是跳档。

src/client/index.ts:1053peak 1.2 · r 3 · t^1.6
好组件 Good

一个主数字领衔,其余信息映衬——有限空间的正确打开方式。

坏组件 Bad
上下文 · 已用 · 剩余 · 窗口 · 限制 · 提示词 · 工具 · 消息 · 缓存 · 计划 · 备注 · 总计

一次性塞满所有信息——读者看不出什么重要,于是什么都不重要。

DSH Widget Design Grammar

不是配色规范,而是一套空间语法:单元、间距、层级与放大都由固定公式决定。下表每一个数字都来自插件源码。

连续放大与右缘锚定

把指针移到下面的组件栏上:这就是产品里的那套算法在跑——同一曲线、同一重排、同一间距。拖动滑块等于改产品设置。


              

src/client/index.ts:1029-1188

Widget Anatomy — 放大一个真实组件

选一个组件,看它的空间关系被逐项量出来:内边距、圆角、字号、标题到内容的节奏、动作区偏移。标注读的是真实 DOM 的矩形,不是示意图。

DSH Visual Audit

几何告诉我们哪里没对齐,设计规则告诉我们那是否要紧。下面是全部 61 个组件按规则算出的结果——没有神经网络,只有测量与规则。

Layer 1 · 几何测量

在浏览器里对真实渲染的卡片取 getBoundingClientRect:内边距、右槽对齐、块间距、溢出、动作区偏移。

Layer 2 · 设计规则

声明式规则:主读数是否唯一、字号是否形成层级、动作是否抢戏、分组与密度是否越界、放大后层级是否还稳。

评分公式

scoredim = round(100 · Σ wrule / n)
w = pass 1.0 · warn 0.6 · fail 0 · n/a 不计

分数只是规则结果的加权和:它不说“漂亮”,只说“符合或偏离这套语法”。

规则来源:DASH_GRAMMAR.RULES(js/grammar.js),常量对齐 src/client/components.tsx 与 src/client/index.ts。测量在本页真实渲染的卡片上进行;放大稳定性用 unit×1.2 的独立样本复测。

如何制作一个组件

人决定要做什么,Agent 负责怎么实现,系统负责验证它是否合格。

  1. 提出想法
  2. 填写需求
  3. Agent 实现
  4. 验证
  5. 提交

填写需求

描述你想要的组件,生成一份可以直接交给 AI Agent 的组件规格。

先填好必填项,然后生成规格——它可以交给任何 AI 编码 Agent。

贡献一个组件

每个组件都必须跨过六道硬门槛;REWORK 是正常迭代,BLOCKED 才是停。

ContractDiscoveryRegistryRuntimeMarketplaceIsolation
  1. 定义需求表 + 完整性检查
  2. 构建规格 → Worker → 组件单元
  3. 验证validate-widget-unit.mjs MVW 硬门槛
  4. 评审独立评审 Agent + 人工评审
  5. 提交注册重生成 → 进入市场

Roadmap 未来 · 尚非当前能力

  • 规模化 Agent 生产组件(单元 + 发现架构就是载体)
  • 第三方市场注册,让社区组件像插件一样加入
  • 更多语言(加 ja/ko 属纯字典扩展)
  • 可选跨设备同步(本地优先是有意为之的默认)