dsh-tide-theme

dsh plugin --profile web add dsh-tide-theme

潮汐主题 · Tide Theme

<p align="center">

<img src="docs/images/icon.png" width="96" height="96" alt="Tide Theme icon" style="border-radius: 22px; box-shadow: 0 6px 20px rgba(0,0,0,0.15);" />

</p>

<p align="center">

<strong>深海潮汐蓝、真实指标、零噪音 —— 给 DeepSeek Harness 的主题与工作流增强套件</strong>

</p>

<p align="center">

<a href="https://www.npmjs.com/package/dsh-tide-theme"><img src="https://img.shields.io/npm/v/dsh-tide-theme?color=1d4ed8&label=npm" alt="npm version" /></a>

<a href="https://github.com/awesome-dsh-plugin/awesome-dsh-plugin"><img src="https://img.shields.io/badge/dsh--market-verified-16a34a" alt="dsh market" /></a>

<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue" alt="license" /></a>

</p>

关于名字：本插件原名 dsh-simplify-theme（极简主题），后更名为 dsh-tide-theme（潮汐主题 · Tide Theme）。

如果你是从旧包升级过来的，请先卸载旧包再安装新包；本地配置需重新设置一次（存储键已随包名更新）。

---

<p align="center">

<picture>

<source media="(prefers-color-scheme: dark)" srcset="docs/images/banner-dark.png" />

<img src="docs/images/banner-light.png" alt="潮汐主题功能总览" style="border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.25); width: 100%; max-width: 960px;" />

</picture>

</p>

Tide Theme 为 DSH 提供深海潮汐蓝的表面体系、清晰的文字层级与克制的信息密度，并完整保留宿主的对话、导航及分屏结构。

本文的功能截图由插件组件在隔离浏览器中使用演示数据渲染，用于展示组件样式；它们不代表当前用户会话或完整 DSH 应用的实际界面。真实宿主的布局与交互另外通过宿主结构契约测试验证。

---

设计基线

主题遵循一套固定的设计契约，而不是逐处调色。改动前先读 docs/ui-design-contract.md。

配色（6-3-1，单一 Token 来源）

占比 · 角色 · 暗色（深海暗潮） · 亮色（潮平岸阔）

60% · 主画布 / 侧栏 / 对话视口 · #0b121e · #0e1726 · #f5f8fc · #edf3fa

30% · 卡片 Surface / 浮层 / 发丝描边 · #142034 · rgba(96,165,250,.16) · #ffffff · rgba(37,99,235,.12)

10% · 唯一强调色（潮汐蓝） · #38bdf8 / #60a5fa · #1d4ed8 / #2563eb

• 禁用纯黑 #000000：底色取自深海蓝灰，最暗处仍保留色相。
• 单一强调色、饱和度克制：状态色仅按语义扩展（成功 #047857 / 警戒 #b45309 / 失败 #dc2626），不引入第二主色。
• 无霓虹辉光、无蓝紫渐变：不使用 radial-gradient 彩色光斑、drop-shadow 发光或彩色 box-shadow: 0 0 Npx；层次靠 0.5px 发丝边、明度台阶与融入背景的漫反射柔影建立。
• 对比度达标：正文与辅助文字满足 WCAG AA（≥ 4.5:1），主标题与核心读数按 AAA（≥ 7:1）取值。

字阶与读数

层级 · 字号 / 行高 · 用途

KPI 读数 · 16px / 20px · 看板大指标（TPS、TTFT、耗时）

HUD 读数 · 13px / 20px · 底栏常驻指标

正文 · 12px / 16px · 常规信息与选项

辅助说明 · 11px / 14px · 提示、单位、时间戳

• 度量读数一律等宽：TPS、Token、耗时、百分比使用 Geist Mono → JetBrains Mono → ui-monospace 的字体栈，并开启 font-variant-numeric: tabular-nums 与 font-feature-settings: "tnum" 1，数值刷新时零抖动。
• 只使用整数像素字号：不使用 10.5px / 11.5px 一类半像素值，避免 1x 屏子像素发虚。
• 不引入网络字体：界面文本走宿主系统无衬线字体。

间距与状态

• 8pt 步长：4px（图标与读数）/ 8px（HUD 单元格）/ 12px（卡片网格）/ 16px（浮层内衬）/ 24px（大区块）。
• 状态完整：加载中（与正式尺寸 1:1 的骨架条）、空数据、错误/重试、超长文本截断（min-width: 0 + ellipsis）、Hover / Active / Focus-visible / Disabled 均有独立实现。
• 焦点可见：所有可聚焦控件（标签页、开关、步进器、重置按钮、停止按钮）均提供 2px 语义焦点环。
• 视口防御：看板浮层限制 max-height: min(560px, calc(100vh - 48px)) 并可内部滚动，矮视口不会截断内容。

---

主题材质开关

底栏 HUD、用量看板与委派图这三个自绘组件，统一跟随插件设置里的主题材质开关：

开关 · 三个组件的外观 · 预览

开启（默认） · 套用潮汐材质：深海哑光微透表面、0.5px 发丝描边、自然漫反射柔影、克制的语义状态点 · 见下方各功能的「主题」图

关闭 · 全部回落到 DSH 原生 token 表面（--dsw-specific-menu / --dsw-alias-bg-layer- / --dsw-elevation-），与宿主外观完全一致 · 见下方各功能的「原生」图

开关位于 设置 → 插件 → 潮汐主题 → 潮汐主题材质，实时生效、无需重启。明暗两套配色各自成立，切换深浅色不会冷暖混用。

---

核心特性一览

1. 底栏性能 HUD 与用量看板

取代原生埋在弹窗里的统计胶囊，把关键运行指标固定在任何时候都看得见的位置：

<p align="center">

<picture>

<source media="(prefers-color-scheme: dark)" srcset="docs/images/current-dock-dark.png" />

<img src="docs/images/current-dock-light.png" alt="底栏性能 HUD 与展开的用量看板（潮汐主题材质）" style="border-radius: 10px; max-width: 620px; box-shadow: 0 8px 30px rgba(0,0,0,0.35);" />

</picture>

</p>

<details>

<summary>对比：关闭主题材质后的原生外观</summary>

<p align="center">

<picture>

<source media="(prefers-color-scheme: dark)" srcset="docs/images/current-dock-dark-native.png" />

<img src="docs/images/current-dock-light-native.png" alt="同一组件的原生外观" style="border-radius: 10px; max-width: 620px;" />

</picture>

</p>

</details>

• 单行常驻 HUD：会话规模、上下文容量、真实端到端 TPS、缓存命中率、模型累计耗时五项一行排布，形制对齐宿主原生 TodoPanel（36px 高、radius-lg 圆角）。窄屏按 760px / 640px 两级断点自动收窄，绝不截断读数。
• 加载态不突跳：数据尚未就绪时渲染与正式高度一致的骨架条，数据到达后原位替换，不产生累积布局位移。
• 严格计入首字延迟（TTFT）的真实 TPS：原生口径只算纯解码时间（会出现 200+ t/s 的虚高值）；本插件把网络往返与推理思考一并计入，还原真实生成速率。
• 上下文容量三档语义色：≤50% 安全绿、50–75% 提醒琥珀、>75% 警戒红，进度条与徽章同步换色。
• 上下文压缩即时刷新：接入 projectedTokens 与 contextBreakdown，压缩发生后容量读数立刻下降，不会停在旧采样值。
• 点击展开用量看板：系统/工具/消息三段式容量条、四张性能 KPI 卡、Token 计费构成表与会话耗时拆解。浮窗水平居中于 HUD、底边严丝合缝贴住 HUD 顶边，空间不足时自动翻转到下方或贴视口底；内容超高时浮窗内部滚动。

---

2. Agent Graph 子代理拓扑

无论工作步骤是否被宿主折叠收起，子代理的派发记录始终常驻可见：

<p align="center">

<picture>

<source media="(prefers-color-scheme: dark)" srcset="docs/images/current-delegation-dark.png" />

<img src="docs/images/current-delegation-light.png" alt="Agent Graph 子代理拓扑（潮汐主题材质）" style="border-radius: 10px; max-width: 760px; box-shadow: 0 8px 30px rgba(0,0,0,0.35);" />

</picture>

</p>

<details>

<summary>对比：关闭主题材质后的原生外观</summary>

<p align="center">

<picture>

<source media="(prefers-color-scheme: dark)" srcset="docs/images/current-delegation-dark-native.png" />

<img src="docs/images/current-delegation-light-native.png" alt="同一组件的原生外观" style="border-radius: 10px; max-width: 760px;" />

</picture>

</p>

</details>

• 弧形扇出连线：SVG 按真实几何绘制——外侧分支从枢纽侧缘引出，内侧从底部引出，以贝塞尔曲线落到卡片顶边；有子代理运行时用 1px 语义色导线配合虚线流动表示活动，不加外发光。卡片换行时只画主干，避免连线穿过上一行卡片。
• 横向 Agent 卡片阵列：网格按可用容器宽度排布，每张卡片保留标题、模型、状态与实际步骤数；步骤数不代表已完成的任务清单。
• token 消耗与预估金额：每张卡片显示该子代理的 token 用量（宿主四个互不重叠的用量桶之和），并在能查到单价时才追加预估金额。单价运行时从 OpenRouter 公开模型目录拉取，按模型名归一化匹配（去供应商前缀、./_ 视同 -、容忍日期后缀）。四桶明细放在 title 里，便于核对口径。查不到单价就不显示金额，绝不编造数字；金额未处理 OpenRouter 的分时浮动定价，因此偏保守（偏高），仅供参考、不可用于计费。
• 四色职能映射：按标题关键词把子代理归到 Research（天青）/ Code（绿）/ Analyze（琥珀）/ 其它（蓝），图标以单色前景 + 同色低透明度底呈现，不整卡套艳色渐变；关闭主题材质后统一回落为中性图标。
• 多轮次递增时序防冲突：会话级单调递增编号（第 1 次委派、第 2 次委派…），配合行级粘性绑定（claimedByRow），杜绝跨轮次编号重置或盗用旧图。
• 宁可缺省也不张冠李戴：无法确定某个工具行对应哪个子会话时不显示该节点（失败或仍在排队的 spawn_teammate 调用不会凭空占位），而不是按顺序猜一个。未匹配的

…(truncated)