Introduction

The DSH plugin ecosystem emphasizes that “everything is a plugin.” The community directory is an independent site with no official affiliation to DeepSeek / Huafan. When using the DSH Web UI daily, the default interface is relatively fixed; if you want to change the color scheme, add a full-page background, or split the sidebar, session area, and plugin panel into dockable, floating cards, you need to extend the UI on the Web client side.

Introducing dsh-ui-beautify below. It is maintained by Zalpha263, licensed under MIT, targets the DSH 0.1.1-rc.2 and above Web interface, and supports Windows / Linux / macOS.

What is it

dsh-ui-beautify is a DSH Web UI plugin used to enhance the appearance and layout capabilities of DeepSeek Harness (DSH) Web interface:

  • Four sets of color presets
  • Full-page background image
  • VSCode-style card layout
  • Unified entry point for the plugin panel
  • Automatic memory of settings
  • Undoable and Restorable

It primarily affects the style of the Web UI and panel organization. In terms of implementation, lib/client.js is the main client script, and the Host half lib/index.js is used for registration; this package is a hand-written loader format (__ModuleLoader__.load), not a tsdown product.

Core Features

Color Presets

Provides four presets: Default / Deep Sea Blue / Warm Sand / Turquoise. Light/Dark mode adaptations exist, with one-click switching. The global accent color changes with the preset.

Full-page Background Image

Supports one-click upload of local images, automatic compression, and addition of readable masks; the sidebar and main area will both display the background.

The background image is saved as a compressed data URL in the browser’s localStorage, within a quota of approximately 5MB; for very large images, the upload is automatically compressed to the longest side ≤2560px.

Card Layout

Three cards: Sidebar / Session / Docked cards. They can be dragged out as floats or snapped to any area (Top / Bottom / Left / Center / Right).

Only one card can dock in an area; if the original area already has a card, it will be squeezed into a floating card, and it will automatically snap back when the area becomes empty.

Zoom and Collapse

  • Docked state: Drag the handle to widen; double-click the handle to reset to default width.
  • Floating state: Drag edges or corners to resize.
  • When the sidebar is dragged narrower than <240px, it automatically collapses into an icon bar.
  • The middle bar (Session Area) has a minimum guarantee of 480px.
  • After the session area snaps to the left or right, the middle area no longer has a minimum guarantee.
  • Sidebar / Docked cards can be resized down to 120px; if a docked card is dragged to <140px, it will close.

Plugin Panel

The plugin panel is the unified entry point. Card mode occupies a docked card, and classic mode is a right-side docked panel, supporting plugin list and tab hosting.

Settings Memory and Undo

Color schemes, background images, and layouts are saved in the browser locally and are automatically restored after refreshing the page or restarting DSH.

Clearing, resetting, or switching back to classic mode can instantly revert changes; there are no residuals after uninstalling.

Installation and Activation

Prerequisites

  • DSH 0.1.1-rc.2 and above
  • Official installation methods require pnpm

First install pnpm:

npm install -g pnpm

Installing the Plugin

The commit hash is pinned in the install command:

dsh plugin --profile web add github:Zalpha263/dsh-ui-beautify#<full-40-digit-commit>

<full-40-digit-commit> is a placeholder that needs to be replaced with the actual full commit hash in the repository; verified materials do not provide specific commit hashes.

After installation, restart DSH and open “Settings → UI Settings” to use it.

Typical Usage

All of the following operations are accessed from “Settings → UI Settings”.

Beautifying Appearance

  1. Switch color presets.
  2. Select a local image as the full-page background.
  3. If removal is needed, click “Clear Background Image”.
  4. If restoring defaults is needed, click “Reset All”.

Layout

  1. Switch between classic layout or card layout.
  2. Open / Close the plugin panel.
  3. If restoration is needed, click “Restore Default Layout”.

Dragging Cards

Press and hold the drag handle at the top of the card to move. If the release position is in a dock area (Top / Bottom / Left / Center / Right), the card snaps back; otherwise, it floats in place. Esc can cancel the drag.

Zooming

  • Floating window: Drag edges or corners to resize.
  • Docked card: Drag the handle to widen; double-click the handle to reset to default width.

Upgrading

First push the new commit, then change the pinned commit hash in the profile’s package.json to the new commit (without BOM), and then execute:

dsh plugin --profile web install

Finally, restart DSH or perform a hard refresh of the page.

Uninstalling

dsh plugin --profile web remove dsh-ui-beautify

Applicable Scenarios and Notes

Suitable for local users who wish to adjust the DSH Web UI appearance, background, or panel layout. It is recommended to check the source code and license before installation; the plugin runs with the permissions of the current dsh process, so the source code, commit hash, and license agreement should all be confirmation items before installation.

Please note:

  • Settings are stored in the browser’s localStorage; clearing browser site data will reset the settings.
  • Background images occupy browser local storage, subject to approximately a 5MB quota limit.
  • Some style selectors are written for the current client build; they may become invalid after a major DSH version upgrade. Please verify the effects in “Beautify Appearance” after upgrading.
  • The community directory page link has not been confirmed in verified materials; this article only provides the repository address.

Links

GitHub: https://www.github.com/Zalpha263/dsh-ui-beautify