Foreword¶
The DeepSeek Harness (DSH) web client is ready to use out of the box, but its appearance, keyboard shortcuts, and auxiliary panels often require modifying the shell or forking the frontend to adjust. Modifying the shell means you have to re-merge changes with every upstream update, leading to high maintenance costs.
dsh-client-ui-custom takes a different approach: it acts as a pure frontend plugin injected into the web surface, adding or modifying pages in the settings without touching the shell source code. Below, we’ll cover what it does, how to install it, and how to enable its feature modules as needed.
What This Is¶
dsh-client-ui-custom is maintained by yoli-mi and is published on npm as @ha-na-bi/dsh-client-ui-custom (current version 0.1.0-rc.6, MIT license). It’s categorized as “Fun Makeover” on SkillHub, and its GitHub repository yoli-mi/dsh-client-ui-custom has about 11 stars.
The plugin is positioned as a Configurable DSH web-surface plugin: it offers wallpaper and frosted-glass themes, accent colors, custom keyboard shortcuts, usage panels, a floating history bar, Markdown rendering for user messages, a plugin marketplace, and entry animations—all configured and managed through settings, with zero shell modifications. As stated in the README, when unconfigured, it maintains a consistent appearance with the native interface.
Core Features¶
The plugin consists of seven independent modules, which can be enabled on demand via a features whitelist in the roster configuration:
| Module ID | Settings Entry | Function |
|---|---|---|
appearance |
Settings → Appearance | Wallpaper, glass level, accent color, surface opacity, fonts, preset themes, etc. |
shortcuts |
Settings → Shortcuts | New conversation, model switching, thinking intensity, send/newline gestures, usage panel, etc. |
usage |
Settings → Usage | Token and duration statistics, trend graphs, session rankings |
history |
Settings → General | Floating history bar (position, quantity, pinning) |
markdown |
Settings → General | Toggle for Markdown rendering of user messages |
marketplace |
Settings → Plugins | Third-party plugin marketplace (GitHub API + dsh-plugin topic) |
motion |
Settings → Motion | Entry animations for conversation, sidebar, new conversation, and settings panel |
When features is omitted or empty, all seven modules are enabled. If explicitly listed, only the corresponding modules are loaded.
Appearance¶
“Settings → Appearance” provides theme customization. Changes are written to the ui-custom settings namespace and take effect immediately (real-time re-rendering, no restart required). It supports small-window and full-screen previews (press F2 to exit full-screen).
It includes six built-in presets (ink-teal, ink-blue, dusty-rose, apricot-gold, mist-gray, ink-violet) and allows custom wallpaper overlays. Glass levels include off / light / frosted (default) / mica. When wallpaperBlur is explicitly set, it overrides the default radius of the selected level.
Common configuration items include preset, wallpaper, glass, accent, autoAccent (color extraction from wallpaper), various surface *Opacity settings, gradient, darkScrim, fontFamily, customCss, customVars, etc. Explicit configurations always override presets.
Shortcuts¶
“Settings → Shortcuts” stores bindings in the ui-custom namespace, allowing runtime changes without restart. Supported actions include newConversation, switchModel, cycleThinking, sendMessage, newline, usagePanel, and modelShortcuts (direct shortcuts to specific models). Combinations without Mod do not trigger when the input box is focused, avoiding typing interference.
Usage Statistics¶
“Settings → Usage” aggregates token-meter and session-stats, displaying total/input/output tokens, cache hits, duration, session count, and steps, along with trend graphs and session rankings. The time span can range from the current year to the last three days. The panel can be invoked from any interface via keyboard shortcut.
Motion¶
“Settings → Motion” provides independent toggles and styles for conversation, sidebar, new conversation, and settings interfaces, along with three one-click presets (Smooth / Elegant / Minimal). When the system’s “Reduce Motion” (prefers-reduced-motion) is enabled, it automatically degrades to a brief fade-in.
General Settings and Plugin Page Changes¶
“Settings → General” adds a floating history bar (left / right / off, default off) and Markdown rendering for user messages (disabled by default). The history bar supports click-to-jump and pinning of specific turns.
“Settings → Plugins” adds a third tab, “Plugin Marketplace,” which uses the GitHub API to discover projects tagged with the dsh-plugin topic.
Installation and Enabling¶
The official README provides the following steps. The SkillHub directory page yoli-mi/dsh-client-ui-custom serves as a community index; for installation details, refer to GitHub.
- Ensure the client build includes the package:
pnpm run build:lib:client
- Add the browser roster entry in your web profile’s patch layer, typically located at
~/.dsh/profiles/web/cordis.patch.yml(or the correspondingdsh.clientroster in your profile):
- id: ui-custom
name: '@ha-na-bi/dsh-client-ui-custom'
config:
preset: 'ink-teal'
wallpaper: '/my-wall.jpg'
wallpaperBlur: 14
- Restart the web client:
dsh web
When building from source, for the settings page to load, the ui-custom namespace must be included in the web client’s exposed settings whitelist (WEB_SETTINGS_NAMESPACES in packages/host/apiproxy/src/api-proxy.ts); the upstream README notes that this checkout has already added it.
Typical Usage¶
Enabling Only Specific Modules¶
To install only “Shortcuts” and “Usage Statistics”:
- id: ui-custom
name: '@ha-na-bi/dsh-client-ui-custom'
config:
features: [shortcuts, usage]
Full Appearance Example¶
config:
preset: 'ink-teal'
wallpaper: 'https://example.com/wall.jpg'
glass: 'mica'
autoAccent: true
chatSurfaceOpacity: 70
customCss: |
.some-hashed-class { border-radius: 16px; }
customVars:
'--my-accent-soft': 'rgb(255 127 178 / 0.3)'
Shortcuts¶
config:
shortcuts:
newConversation: 'Mod+Alt+N'
switchModel: 'Mod+Alt+M'
cycleThinking: 'Mod+Alt+T'
When preferring Enter for newline and Mod+Enter to send:
config:
shortcuts:
sendMessage: 'Mod+Enter'
newline: 'Enter'
Floating History Bar¶
Set the position to left or right in “Settings → General”; the default quantity is 10 (0 means all). You can “pin” a conversation turn to the history bar from the message action row, ensuring pinned turns are always displayed.
Use Cases and Notes¶
Who It’s For
- Developers who want to customize the DSH web interface (wallpaper, frosted glass, accent colors) without modifying the shell;
- Users needing custom keyboard shortcuts, session usage tracking, or in-app browsing of third-party plugin directories;
- Those who want a floating history bar, user message Markdown rendering, or entry animations and are comfortable toggling features individually in settings.
Notes
- The plugin runs with the permissions of the current
dshprocess; before installation, review the source code and MIT license to ensure they align with your security policies. - The “Plugin Marketplace” uses the GitHub API to fetch projects tagged with the
dsh-plugintopic and serves as a community directory index; it has no official affiliation with DeepSeek or High-Flyer. - The package depends on peer dependencies like
@deepseek-ai/cordisanddsh-client-*; versions must match the current DSH release. The README marks this as a0.1.0-rc.6pre-release; check the changelog before upgrading. - All animations respect
prefers-reduced-motion; when unconfigured for appearance items like wallpaper, the interface behaves identically to the native version.
Conclusion¶
dsh-client-ui-custom consolidates wallpaper themes, keyboard shortcuts, usage panels, history bars, Markdown rendering, plugin marketplaces, and animations into a modular web frontend plugin. Configuration takes effect immediately without shell modifications. You can use the features whitelist to selectively enable modules, whether just for shortcuts or a complete visual overhaul.
- Community Directory: SkillHub — yoli-mi/dsh-client-ui-custom
- Source Code and Full Configuration Docs: GitHub — yoli-mi/dsh-client-ui-custom
- Promotional Video (Bilibili): BV1fwbX6XEp7