Preface¶
The web interface of DeepSeek Harness (DSH) supports extending its interface and capabilities through plugins. A common issue after installing multiple plugins is that the official interface still has incomplete or contradictory details, third-party settings page titles, spacing, and icons vary, and style conflicts occur between plugins like better-sidebar and widgets. Modifying each plugin’s source code is costly and unfavorable for uninstallation and rollback.
Below is the client-side plugin dsh-ui-harmonizer maintained by Physicolor (npm package name dsh-ui-harmonizer). It does not modify session logs or add model tools; instead, it uses official slots and --dsw-* semantic tokens on the browser side for CSS overrides and runtime DOM coordination to bring the interface back to the official design language. It can be uninstalled with one click without leaving residuals.
What Is This¶
dsh-ui-harmonizer is a pure client-side DSH bundle plugin. The host (node) side is no-op, and all changes occur on the browser side. It injects styles and logic through official slots such as settings.section, settings.general.item, and shell.overlay, without modifying plugin source code.
- Maintainer: Physicolor
- Category: Client-side (
dsh.client.platform: web) - License: MIT
- Current version: v0.8.0
- Compatibility: DeepSeek Harness
0.1.0-rc.6and subsequent compatible0.1.xversions
Core Features¶
Official UI Normalization¶
For inconsistent or incomplete areas in the official interface, the plugin provides unified processing:
| Capability | Description |
|---|---|
| Single-line header | Merges the conversation/trace selector into the title line, collapsing the header into a single line |
| Button capsule family | Unifies conversation log, widgets, and toggle buttons into 32px capsule styles |
| Right sidebar edge-aligned rounded rectangles | Coordinates better-sidebar panel overlay layout, keeping the header fixed |
| Unified settings page header | Title 18/600, description 13px, with a thin line separator |
| Native title tooltips | Replaces elements with only HTML title with official dark Tooltip bubbles instead of native system popups |
Plugin Visual Coordination¶
Targeted style alignment for known third-party plugins:
| Target | Approach |
|---|---|
dsh-better-sidebar |
Capsulizes toggle buttons, unifies panel backgrounds, coordinates layout and transitions |
dsh-widgets |
Aligns statistics capsule family and header tool area |
| Third-party settings pages | Auto-completes titles, removes redundant icons, and unifies spacing |
Known coordination targets also include dsh-notification and dshmarket. The plugin coexists through official slot order; after uninstallation or disabling, the page reverts to defaults without residuals.
Settings Page Auto-Normalization¶
When pages registered by third-party plugins in settings.section do not meet official specifications, the plugin automatically corrects them:
| Check Item | Correction |
|---|---|
| Missing page title | Injects an 18/600 title from the navigation label or known mappings |
| Redundant icon next to title | Removes the logo in the title line, keeping only plain text |
| Tight spacing between title and description | Unifies to 4px spacing + thin line separator |
| Inconsistent font sizes | Title 18/600, description 13/20, with border-bottom added |
UI Customization¶
A “UI Customization” section appears under Settings → General, supporting real-time adjustments:
- Conversation area width
- Markdown font size
- Workspace zoom
- UI font stack
- Rounded card: The conversation area is presented as a card with rounded top-left and shadow, auto-scaling with the sidebar width and detail column.
Starting from v0.8.0, the rounded card mode wraps the conversation header; the better-sidebar toggle cluster has an opaque base when the panel is closed and collapses into a compact floating chip when opened.
Architecture Highlights¶
- Zero model cost: No model calls, no modifications to session data.
- Official design tokens: Styles are based on
--dsw-*, automatically following light/dark themes. - Dual-channel injection: CSS Modules static rules + dynamic
<style data-plugin>tags. - Reversible cleanup: Fiber-effect disposer manages side effects; uninstallation restores defaults.
Installation and Activation¶
Install via the DSH plugin marketplace (npm):
dsh plugin --profile web add dsh-ui-harmonizer
After installation, perform a hard refresh in the browser (Ctrl+Shift+R). After refreshing, the “UI Customization” section should appear under Settings → General.
For local development, you can mount using the link method (the README example path is a developer’s local directory; replace as needed):
dsh plugin --profile web add link:D:/dsh-home/plugins/harness-ui-enhancer
Typical Usage¶
After installation and hard refresh, no additional commands are needed. Interface normalization and plugin coordination take effect automatically in the background.
To adjust visual parameters, open Settings → General → UI Customization and modify the conversation width, Markdown font size, workspace zoom, font stack, or rounded card toggle as needed; changes take effect immediately.
If a subtree needs to exit the native title Tooltip unification (v0.8.0), set data-enhc-no-tooltip on an ancestor element; that subtree will revert to using the original title behavior.
Use Cases and Notes¶
Who Is This For
- Users who have installed multiple DSH web plugins, resulting in a messy interface and inconsistent settings page layouts.
- Those who want to align the web UI with the official
--dsw-*design language without modifying plugin source code. - Users who need adjustable options like conversation width, font size, and rounded cards, with the requirement that uninstallation is reversible.
Notes
- The plugin runs with the current DSH process permissions. Before installation, it is recommended to read the GitHub repository source code and confirm the MIT license.
- It is only applicable to the Web profile (
--profile web) and does not provide host-side capabilities. - The roadmap indicates that official UI normalization, plugin compatibility coordination, and unified visual styles (including rounded cards, Tooltip unification, etc.) are still under continuous iteration; material layers like Liquid Glass are optional experimental directions and have not been released as default capabilities.
- The SkillHub directory page and GitHub are community-maintained and have no official affiliation with DeepSeek / High-Flyer; installation commands should follow the README and directory page, not construct
github:owner/repoforms based on package names.
Conclusion¶
dsh-ui-harmonizer reduces the “UI friction when multiple plugins coexist” to a removable client-side polish layer: normalizing incomplete official details, coordinating known plugins like better-sidebar/widgets, auto-correcting settings page layouts, and providing real-time adjustable width, font size, and rounded cards in the settings. If you are stacking DSH web plugins, you can install this one first, then hard refresh to see the effects.
- SkillHub Directory: https://www.skillhub.cn/plugins/Physicolor/dsh-ui-harmonizer
- GitHub: https://github.com/Physicolor/dsh-ui-harmonizer