dsh-ui-harmonizer

<p align="right"><b>English</b> · <a href="README.zh-CN.md">简体中文</a></p> <h1 align="center">DSH UI Harmonizer</h1>

<strong>UI harmonizer for DeepSeek Harness.</strong><br> Normalizes the official UI · reconciles every plugin · settings auto-normalizer · UI customization (incl. rounded card)

---

TL;DR: You installed a bunch of DSH plugins but the UI looks inconsistent? DSH UI Harmonizer uses CSS overrides + runtime DOM coordination to bring them back to the official design language — non-destructive, fully reversible, zero model cost.

DSH UI Harmonizer is a client-only DSH bundle plugin. It adds no model tools and modifies no session logs — it adjusts the UI purely through official slots (settings.section / settings.general.item) and the --dsw-* semantic token system.

---

Features

🎨 Official UI Normalization

Capability	Detail
Single-line header	Moves the conversation / trajectory selector into the title row; the header collapses to one line
Button capsule family	Session log, widgets, and toggle buttons unified into 32px capsules
Right-rail flush rounded rect	better-sidebar panel overlay layout; the header stays put
Unified settings header	Title 18/600 + description 13px + hairline divider

♻️ Plugin Visual Reconciliation

Target	Approach
dsh-better-sidebar	Capsule-ize toggle buttons, unify panel backgrounds, coordinate layout, smooth transitions
dsh-widgets	Matching stat capsule family, header utilities alignment
Third-party settings pages	Auto-fill headings, drop redundant icons, normalize spacing

🧹 Settings Auto-Normalizer ⭐

When any third-party plugin adds a page to settings.section that doesn't follow the official spec, this plugin auto-corrects it:

Auto-check	Fix
Missing page title	Injects an 18/600 title (from the nav label or a known mapping)
Redundant icon beside the title	Removes the title-row logo, keeps plain text
Title/description too tight	Unifies to 4px spacing + hairline divider
Inconsistent type/size	Title 18/600, description 13/20 + border-bottom

🎛️ UI Customization

The "UI Customization" block under Settings → General: chat width, markdown font size, workspace scale, UI font stack, and rounded card all adjust live. The "rounded card" renders the conversation area as a card with a rounded top-left corner and a drop shadow, auto-resizing with the sidebar width / details column.

---

Architecture

• Zero model cost: the host (node) half is a no-op; all changes happen in the browser half;
• Official design tokens: all styles use the --dsw-* semantic tokens and follow light/dark themes automatically;
• Two injection channels: static rules (CSS Modules) + dynamic <style data-plugin> tags;
• Reversible cleanup: fiber-effect disposers manage every side effect — uninstalling restores everything;
• Slot integration: settings.general.item / settings.section / shell.overlay (rounded-card overlay).

---

Installation

# via npm (plugin market)
dsh plugin --profile web add dsh-ui-harmonizer

# local development (link)
dsh plugin --profile web add link:D:/dsh-home/plugins/harness-ui-enhancer

After installing, hard-refresh the browser (Ctrl+Shift+R); the "UI Customization" block appears under Settings → General.

---

Development

…