The settings interface of DeepSeek Harness (DSH) currently does not provide independent icon support for each functional module. As a result, the sidebar navigation can appear visually monotonous, making it difficult for developers to quickly recognize specific functional modules by icons. dsh-ui-settings-icons is a DSH UI plugin that introduces a new slot mechanism to add custom icon capabilities to the settings sidebar and provides preset icons for some known feature packages.

The plugin is maintained by suntianc and is categorized under the “Fun Skins” category. It primarily addresses the icon display issues in the DSH settings navigation sidebar.

Core Features

Keyed Icon Slot

The plugin declares a new keyed subslot settings.section.icon under the settings shell. Any third-party plugin that registers a settings section under settings.section can inject a custom SVG or React icon component by providing a key that matches the section id. The slot is dynamically reactive: icon updates automatically trigger re-rendering without restarting the web interface.

Built-in Presets and Fallback

The plugin includes built-in 16x16 vector icons for codex-auth/GPT Auth, antigravity-auth, and standard DSH sections such as models, agent-presets, and plugins. When a section does not provide a custom icon and does not match a preset, it gracefully falls back to the standard DSH gear icon.

Chrome and Accessibility Consistency

The plugin maintains 100% functional and visual consistency with the default DSH settings shell. It supports keyboard navigation (Escape closes the dialog and restores focus), ARIA dialog attributes, wide/compact sidebar trigger states, and native support for the profile launcher.

Zero-Conflict Cordis Composition

It replaces the default ui-settings-general line via cordis.patch.yml to prevent slot declaration conflicts. It strictly follows DSH’s pure lifecycle model, ensuring that all subslots, dictionaries, and storage subscriptions are properly cleaned up when the plugin is uninstalled.

Installation and Enabling

  1. Ensure the target Host uses DSH 0.1.5-rc.1 and that the dependency graph is consistent.
  2. Stop the dsh web process.
  3. Run the installation commands:
dsh plugin --profile web add dsh-ui-settings-icons@0.1.3-rc.1
dsh plugin --profile web list

After installation is complete, refresh the browser to apply the changes.

Typical Usage

If developers want to add a custom navigation icon for a settings section in a plugin, they need to register the settings section and inject the icon slot:

import type { Context } from '@deepseek-ai/cordis'
import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
import type {} from 'dsh-ui-settings-icons/client'
import { MyPluginIcon } from './MyPluginIcon.tsx'
import { MySettingsPanel } from './MySettingsPanel.tsx'

export function apply(ctx: Context): void {
  // 1. 注册设置分区主体
  ctx.slots.inject('settings.section', () => ctx.slots.register({
    name: 'settings.section',
    id: 'my-plugin',
    order: 50,
    label: () => 'My Plugin',
  }, MySettingsPanel))

  // 2. 注册自定义导航图标（key 需匹配 section id）
  ctx.slots.inject('settings.section.icon', () => ctx.slots.register({
    name: 'settings.section.icon',
    key: 'my-plugin',
  }, MyPluginIcon))
}

Applicable Scenarios and Notes

  • Version dependency: The plugin requires DeepSeek Harness 0.1.5-rc.1 as the development and minimum supported baseline. Node.js ^22.19.0 or >=24.0.0 is required.
  • Pre-installation preparation: The dsh web process must be stopped before installation.
  • Compatibility: Plugin versions 0.1.2 and earlier target the deprecated DSH 0.1.1-rc.1 client topology and cannot be loaded on 0.1.2-alpha.5.

Summary

By introducing the settings.section.icon slot, this plugin makes icon customization of the DSH settings page possible, improving the recognizability of the interface. For more details, see GitHub.