dsh-ui-settings-icons
English | 中文
Current release: v0.1.0
A self-contained DeepSeek Harness UI plugin that enhances the DSH Settings navigation sidebar with custom icon support. It opens a new keyed slot (settings.section.icon) for third-party plugins while providing built-in vector icons for known capability packages.
Features
Keyed Icon Slot (settings.section.icon)
- Declares a new keyed child slot
settings.section.icon under the settings shell.
- Any third-party plugin registering a settings section under
settings.section can inject its own custom SVG or React icon component keyed by its section id.
- Dynamic slot reactivity: icon updates subscribe to the SlotCore ledger and re-render without restarting the web interface.
Built-in Icon Presets and Fallbacks
- Ships with tailored 16x16 vector icons for:
codex-auth / GPT Auth (OpenAI / ChatGPT logo)antigravity-auth (Google Antigravity / Gemini spark logo)- Stock DSH sections:
models, agent-presets, plugins
- Gracefully falls back to DSH's standard gear icon (
IconSettingsOutline16) when a section provides no custom icon and matches no preset.
Full Chrome and Accessibility Parity
- Retains 100% feature and visual parity with DSH's default settings shell.
- Supports keyboard navigation (
Escape closes dialog, focus traps), ARIA dialog attributes (aria-modal, aria-labelledby, aria-current), wide/compact sidebar trigger states, and the native configuration file launcher (settings.action / open-document).
Zero-Conflict Cordis Composition
- Replaces the default
ui-settings-general row via cordis.patch.yml to prevent duplicate slot declaration conflicts.
- Adheres strictly to DSH's pure lifecycle model: all child slots, dictionaries, and store subscriptions dispose cleanly upon plugin unload.
Integrating Third-Party Icons
If you are developing a DSH plugin and want to supply a custom navigation icon for your settings section:
import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
import { MyPluginIcon } from './MyPluginIcon.tsx'
import { MySettingsPanel } from './MySettingsPanel.tsx'
export function apply(ctx: ClientContext): void {
// 1. Register your settings section body
ctx.slots.inject('settings.section', () => ctx.slots.register({
name: 'settings.section',
id: 'my-plugin',
order: 50,
label: () => 'My Plugin',
}, MySettingsPanel))
// 2. Register your custom navigation icon (key matching section id)
ctx.slots.inject('settings.section.icon', () => ctx.slots.register({
name: 'settings.section.icon',
key: 'my-plugin',
}, MyPluginIcon))
}
Requirements
- DeepSeek Harness
0.1.1-rc.1 or a compatible later 0.1.x release.
- Node.js
^22.19.0 or >=24.0.0.
Install from npm (recommended)
The npm package includes prebuilt Host and browser bundles, so no install-time build permission is required:
dsh plugin --profile web add dsh-ui-settings-icons
Restart dsh web, open Settings, and enjoy customized section icons.
Install a prebuilt release
dsh plugin --profile web add https://github.com/suntianc/dsh-ui-settings-icons/releases/download/v0.1.0/dsh-ui-settings-icons-0.1.0.tgz
Restart dsh web and open Settings.
Install from GitHub source
dsh plugin --profile web add github:suntianc/dsh-ui-settings-icons
Git dependencies are built by the package's prepare script. pnpm 10+ blocks that script until explicitly allowed, so the first command may print an allowBuilds key and stop. Copy the exact key printed by dsh under allowBuilds in ~/.dsh/profiles/web/pnpm-workspace.yaml, then run the command again. Only grant this permission after reviewing the source.
For a reproducible install, pin a release tag or commit:
dsh plugin --profile web add github:suntianc/dsh-ui-settings-icons#v0.1.0
Install a tarball
git clone https://github.com/suntianc/dsh-ui-settings-icons.git
cd dsh-ui-settings-icons
pnpm install
pnpm pack
dsh plugin --profile web add ./dsh-ui-settings-icons-0.1.0.tgz
Upgrade
Stop the running dsh web process and update the Web profile to the current release:
dsh plugin --profile web add dsh-ui-settings-icons@0.1.0
dsh plugin --profile web list
After the list reports dsh-ui-settings-icons@0.1.0, restart dsh web and refresh the browser.
Host configuration
The bundle patch replaces the stock ui-settings-general row:
| Row | Export | Purpose |
|---|
ui-settings-general (disabled) | @deepseek-ai/dsh-client-ui-settings-general | Disabled to avoid slot declaration collision |
ui-settings-icons | dsh-ui-settings-icons | Enhanced settings shell with icon slot and presets |
Development
pnpm install
pnpm run check
pnpm run build emits:
lib/index.js — Host plugin entry point;lib/invariant.js — Slot constants companion;lib/client.js — Loader-compatible browser plugin with inline CSS Modules;lib/types/** — TypeScript declarations.
Friendship links
