dsh-skill-hub 0.2.2 → 0.2.4

package/lib/types/client/SkillHubSettingsCard.d.ts

@@ -9,12 +9,8 @@ import type { ReactElement } from 'react';
 import type { SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client';
 import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
 import { type CardShell, type FieldState, type FormScope } from './settings-form.ts';
-/** Model-invocable dot color default. Single source for the TS side; the
- *  panel's CSS mirrors it via --hub-model (panel.module.css). */
-export declare const DEFAULT_DOT_MODEL_COLOR = "#2f81f7";
-/** User-invocable dot color default. Single source for the TS side; the
- *  panel's CSS mirrors it via --hub-user (panel.module.css). */
-export declare const DEFAULT_DOT_USER_COLOR = "#3fb950";
+import { DEFAULT_DOT_MODEL_COLOR, DEFAULT_DOT_USER_COLOR } from './panel/format.ts';
+export { DEFAULT_DOT_MODEL_COLOR, DEFAULT_DOT_USER_COLOR };
 /** The card's projected state. */
 export interface SkillHubSettingsState extends CardShell {
     enabled: FieldState;

package/lib/types/client/icons.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Vendored UI icons for dsh-skill-hub.
+ *
+ * These were originally imported from `@deepseek-ai/dsh-client-ui-primitives`.
+ * That package is still published for the rc.7/rc.2 SDK families, but newer dsh
+ * web builds no longer expose it as a standalone plugin module — they keep a
+ * static compatibility module instead. Vendoring the few tiny outline icons the
+ * hub uses makes the browser half self-contained and equally compatible with
+ * older and newer dsh hosts.
+ *
+ * SVG paths are copied verbatim from dsh-client-ui-primitives (MIT licensed)
+ * so the visuals remain pixel-identical to the dsh icon family.
+ */
+import type { JSX } from 'react';
+/** Props understood by the dsh icon family: size + optional className. */
+export interface IconProps {
+    size?: number;
+    className?: string;
+}
+/** ic_ds_chevron_down_outline_14 */
+export declare function IconChevronDownOutline14({ size, className }: IconProps): JSX.Element;
+/** ic_ds_trash_outline_16 */
+export declare function IconTrashOutline16({ size, className }: IconProps): JSX.Element;
+/** ic_ds_skill_outline_16 */
+export declare function IconSkillOutline16({ size, className }: IconProps): JSX.Element;

package/lib/types/client/locales.d.ts

@@ -18,7 +18,7 @@ export declare const zh: {
     readonly 'panel.search': "搜索技能…";
     readonly 'legend.model': "模型可调 — Agent 可自动调用";
     readonly 'legend.user': "用户可调 — 仅显式点名时触发";
-    readonly 'legend.hint': "圆点标在技能名旁；无圆点表示该技能不可被调用。";
+    readonly 'legend.hint': "每个技能最多一个圆点；无圆点 = 不可被调用。";
     readonly 'panel.enabled': "已启用";
     readonly 'panel.disabled': "已禁用";
     readonly 'panel.diagnostics': "发现诊断";
@@ -187,9 +187,9 @@ export declare const zh: {
     readonly 'settings.announceToAgent': "向 Agent 公告";
     readonly 'settings.announceToAgentHint': "在系统提示中加入本插件说明，用户提到技能管理时 Agent 知道如何协作。";
     readonly 'settings.dotModelColor': "模型可调圆点颜色";
-    readonly 'settings.dotModelColorHint': "技能名旁蓝色圆点的颜色（#rrggbb）。";
+    readonly 'settings.dotModelColorHint': "技能行/聊天 / 菜单中「模型可调」蓝色圆点的颜色（#rrggbb）。";
     readonly 'settings.dotUserColor': "用户可调圆点颜色";
-    readonly 'settings.dotUserColorHint': "技能名旁绿色圆点的颜色（#rrggbb）。";
+    readonly 'settings.dotUserColorHint': "技能行/聊天 / 菜单中「仅用户可调」绿色圆点的颜色（#rrggbb）。";
     readonly 'settings.showUseCount': "显示调用次数";
     readonly 'settings.showUseCountHint': "在技能名旁显示琥珀色调用次数。";
     readonly 'settings.showUseTime': "显示最近调用时间";

package/lib/types/client/panel/format.d.ts

@@ -2,8 +2,18 @@
  * Shared display helpers for the panel views (skill rows, detail view, and
  * dialogs): dot color styling, relative/absolute time text, and commit-SHA
  * shortening. Kept in one place so the views render identically.
+ *
+ * The invocation-status dot defaults live here (not in the settings card) so
+ * both the panel legend and the chat `/` skill menu draw from one source and
+ * so this primitives-free module stays unit-testable.
  */
 import type { CSSProperties } from 'react';
+/** Model-invocable dot color default. Single source for the TS side; the
+ *  panel's CSS mirrors it via --hub-model (panel.module.css). */
+export declare const DEFAULT_DOT_MODEL_COLOR = "#2f81f7";
+/** User-invocable dot color default. Single source for the TS side; the
+ *  panel's CSS mirrors it via --hub-user (panel.module.css). */
+export declare const DEFAULT_DOT_USER_COLOR = "#3fb950";
 /** Dot inline style from the user-chosen color (undefined keeps the CSS default). */
 export declare function dotStyle(color: string | undefined): CSSProperties | undefined;
 /** Localized relative-time text for a Unix-ms timestamp. */

package/lib/types/client/slash-dots.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Slash-menu skill dots: puts the invocation-status dot (model-callable blue /
+ * user-only green) in front of every skill candidate in the chat `/` menu.
+ *
+ * Mechanism (mirrors how dsh-at-file fills the menu icon slot): the candidate
+ * menu's rows already render an optional `icon` slot (`MenuView` renders
+ * `item.icon` in a 16×16 leading span when it's defined), but the core `/skill`
+ * source (`dsh-client-ui-skill`) returns candidates without `icon`. This module
+ * wraps that source's `candidates` and stamps each row with a colored dot,
+ * reusing the same settings (dotModelColor / dotUserColor) and the same
+ * `modelInvocable` classification the panel legend uses — so the chat menu and
+ * the Settings → 技能 panel stay in sync, and editing the color updates both.
+ *
+ * The skill source is registered by the core plugin under the `name` "skill"
+ * on the `/` trigger; re-registering the same name would throw, so this wraps
+ * the already-registered source object instead (found through the runtime
+ * source registry, which the frozen contract exposes only as `registerSource`
+ * / `sessionOf` — the lookup below is defensive: it never throws).
+ */
+import type { ClientContext, SettingsScope } from '@deepseek-ai/dsh-client-runtime/client';
+import type { InputTriggerServiceContract, InputTriggerSource } from '@deepseek-ai/dsh-client-ui-input-trigger/client';
+import type { HubSettingsValue } from '../protocol.ts';
+import type { SkillHubApi } from './api.ts';
+/**
+ * Find the core `/skill` source through the runtime registry, or undefined.
+ * The lookup never throws: a missing/reshaped registry just means no dots. Exported
+ * for unit tests; the apply path only calls it indirectly through setupSkillSlashDots.
+ * @param service - the ctx.inputTriggers service face.
+ * @returns the registered skill source, or undefined.
+ */
+export declare function findSkillSource(service: InputTriggerServiceContract): InputTriggerSource | undefined;
+/**
+ * Clear the modelInvocable cache. Called on connection/reset so a fresh
+ * catalog wins after reconnect; exported for deterministic unit tests.
+ */
+export declare function resetModelCache(): void;
+/**
+ * Wrap the core skill source so every menu row carries the invocation dot.
+ * Exported for unit tests; production wiring goes through setupSkillSlashDots.
+ * @param source - the registered `/skill` source.
+ * @param api - hub browser API for the modelInvocable lookup.
+ * @param scope - hub settings scope for the dot colors.
+ * @returns a disposer restoring the original candidates.
+ */
+export declare function wrapSkillSource(source: InputTriggerSource, api: SkillHubApi, scope: SettingsScope<HubSettingsValue>): () => void;
+/**
+ * Mount the slash-menu dots on the registered `/skill` source. Idempotent and
+ * defensive: if the core source isn't registered yet (or the registry shape
+ * changes), it retries briefly and then gives up silently — the chat keeps
+ * working, it simply shows no dots. The returned disposer restores the
+ * original candidates and clears the model cache.
+ * @param ctx - the client root context (inputTriggers + events).
+ * @param api - hub browser API.
+ * @param scope - hub settings scope for dot colors.
+ * @returns a cleanup function for `ctx.effect`.
+ */
+export declare function setupSkillSlashDots(ctx: ClientContext, api: SkillHubApi, scope: SettingsScope<HubSettingsValue>): () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-skill-hub",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "In-GUI skill hub for DeepSeek Harness (dsh): browse the full local skill catalog from the official ctx.skills registry (every root + third-party providers), toggle skills on/off, inspect bodies, surface frontmatter diagnostics, and scaffold new skills — plus a codex-style skill market (built-in catalog, upstream update checks, one-click update-all) with tracked source sync. The full manager beyond the read-only dsh-skill-manager browser.",
   "type": "module",
   "engines": {
@@ -37,42 +37,84 @@
       "platform": "web"
     }
   },
+  "dshWorkshop": {
+    "schema": "omdsh-workshop-package/v1",
+    "type": "plugin",
+    "integration": {
+      "protocol": "harness-cordis",
+      "artifact": "cordis.patch.yml"
+    },
+    "install": {
+      "mode": "guided",
+      "adapter": "third-party",
+      "failurePolicy": "manual",
+      "touchesCurrentBeforeActivation": false
+    },
+    "lifecycle": {
+      "activation": "hot-reload",
+      "dispose": "supported"
+    },
+    "permissions": [
+      "fs:read",
+      "fs:write",
+      "net:https",
+      "net:loopback"
+    ],
+    "compatibility": {
+      "dshVersions": [
+        "0.1.0-rc.7",
+        "0.1.1-rc.2"
+      ]
+    },
+    "capability": {
+      "id": "skill-hub-settings-panel",
+      "kind": "ui",
+      "invocation": "Open Settings → Skills panel; GET /api/skill-hub/catalog",
+      "expected": "The full local skill catalog (all roots) renders as groups and toggles persist an enabled/disabled row without a restart."
+    },
+    "evidence": {
+      "install": null,
+      "failureIsolation": null,
+      "hotReload": null,
+      "remove": null
+    }
+  },
   "dependencies": {
     "js-yaml": "^4.1.0",
     "schemastery": "^3.18.0"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-session": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-session-query": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-skill": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.7",
+    "@deepseek-ai/dsh-client-connection": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-locale": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-runtime": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-ui-input-trigger": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-ui-settings": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-ui-slots": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-host-webserver": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-session": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-session-query": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-settings": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-skill": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-system-prompt": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-settings-plugins": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-session": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-session-query": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-skill": "^0.1.0-rc.7",
-    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.7",
+    "@deepseek-ai/dsh-client-connection": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-locale": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-runtime": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-ui-input-trigger": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-ui-settings": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-ui-settings-plugins": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-client-ui-slots": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-host-webserver": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-session": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-session-query": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-settings": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-skill": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
+    "@deepseek-ai/dsh-system-prompt": ">=0.1.0-rc.7 <0.2.0-0 || >=0.1.1-rc.2 <0.2.0-0",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.20.0",
     "@types/react": "~18.3.1",

package/src/client/SkillHubSettingsCard.tsx

@@ -11,13 +11,10 @@ import type { SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
 import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import { ColorField, PluginSettingsCard, SwitchField } from './settings-card.tsx'
 import { booleanField, CardForm, colorField, type CardShell, type FieldState, type FormScope } from './settings-form.ts'
-
-/** Model-invocable dot color default. Single source for the TS side; the
- *  panel's CSS mirrors it via --hub-model (panel.module.css). */
-export const DEFAULT_DOT_MODEL_COLOR = '#2f81f7'
-/** User-invocable dot color default. Single source for the TS side; the
- *  panel's CSS mirrors it via --hub-user (panel.module.css). */
-export const DEFAULT_DOT_USER_COLOR = '#3fb950'
+// Single source for the TS-side dot defaults (the panel CSS mirrors these).
+import { DEFAULT_DOT_MODEL_COLOR, DEFAULT_DOT_USER_COLOR } from './panel/format.ts'
+// Re-export for any consumer that imported them from the card before the move.
+export { DEFAULT_DOT_MODEL_COLOR, DEFAULT_DOT_USER_COLOR }
 
 /** The card's projected state. */
 export interface SkillHubSettingsState extends CardShell {

package/src/client/icons.tsx

@@ -0,0 +1,61 @@
+/**
+ * Vendored UI icons for dsh-skill-hub.
+ *
+ * These were originally imported from `@deepseek-ai/dsh-client-ui-primitives`.
+ * That package is still published for the rc.7/rc.2 SDK families, but newer dsh
+ * web builds no longer expose it as a standalone plugin module — they keep a
+ * static compatibility module instead. Vendoring the few tiny outline icons the
+ * hub uses makes the browser half self-contained and equally compatible with
+ * older and newer dsh hosts.
+ *
+ * SVG paths are copied verbatim from dsh-client-ui-primitives (MIT licensed)
+ * so the visuals remain pixel-identical to the dsh icon family.
+ */
+
+import type { JSX } from 'react'
+
+/** Props understood by the dsh icon family: size + optional className. */
+export interface IconProps {
+  size?: number
+  className?: string
+}
+
+/** ic_ds_chevron_down_outline_14 */
+export function IconChevronDownOutline14({ size = 14, className }: IconProps): JSX.Element {
+  return (
+    <svg width={size} height={size} className={className} viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+/** ic_ds_trash_outline_16 */
+export function IconTrashOutline16({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg width={size} height={size} className={className} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M14.4782 4.84067L14.2138 10.1152C14.1102 12.1872 14.067 13.0115 13.3866 13.9607C13.1044 14.3546 12.7498 14.6912 12.3424 14.9535C11.8239 15.2872 11.2415 15.4316 10.5585 15.4998C9.88727 15.5668 9.04946 15.5656 7.99998 15.5656C6.95051 15.5656 6.1127 15.5668 5.44142 15.4998C4.75851 15.4316 4.17602 15.2872 3.65753 14.9535C3.25012 14.6912 2.89559 14.3546 2.61332 13.9607C1.93296 13.0115 1.88979 12.1872 1.78619 10.1152L1.52179 4.84067L2.89006 4.77277L3.15343 10.0463C3.26221 12.2218 3.32452 12.6015 3.72646 13.1624C3.90825 13.4161 4.13686 13.6334 4.39927 13.8023C4.66204 13.9714 5.00263 14.0792 5.57825 14.1367C6.16562 14.1953 6.92298 14.1963 7.99998 14.1963C9.07699 14.1963 9.83434 14.1953 10.4217 14.1367C10.9973 14.0792 11.3379 13.9714 11.6007 13.8023C11.8631 13.6334 12.0917 13.4161 12.2735 13.1624C12.6755 12.6015 12.7378 12.2218 12.8465 10.0463L13.1099 4.77277L14.4782 4.84067ZM5.43011 6.22849H6.7994V11.3909H5.43011V6.22849ZM9.20056 6.22849H10.5699V11.3909H9.20056V6.22849ZM8.53597 0.434431C9.17976 0.434431 9.6522 0.426926 10.0966 0.571258C10.2357 0.616451 10.3717 0.672554 10.502 0.738948C10.9182 0.951107 11.2464 1.29099 11.7015 1.74612L12.4978 2.54136H15.3742V3.91169H0.625732V2.54136H3.50218L4.29845 1.74612C4.75358 1.29099 5.08174 0.951107 5.49801 0.738948C5.62831 0.672554 5.76425 0.616451 5.90334 0.571258C6.34776 0.426926 6.82021 0.434431 7.46399 0.434431H8.53597ZM7.46399 1.80476C6.73208 1.80476 6.51641 1.81187 6.32617 1.87369C6.25545 1.89667 6.18668 1.92533 6.12041 1.95907C5.96398 2.03878 5.82348 2.16253 5.44142 2.54136H10.5585C10.1765 2.16253 10.036 2.03878 9.87955 1.95907C9.81329 1.92533 9.74452 1.89667 9.6738 1.87369C9.48356 1.81187 9.26789 1.80476 8.53597 1.80476H7.46399Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+/** ic_ds_skill_outline_16 */
+export function IconSkillOutline16({ size = 16, className }: IconProps): JSX.Element {
+  return (
+    <svg width={size} height={size} className={className} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M12.5113 15.4067C12.4395 15.6249 12.1308 15.6249 12.059 15.4067L11.643 14.1416C11.454 13.567 11.0033 13.1164 10.4288 12.9274L9.16369 12.5113C8.94544 12.4395 8.94544 12.1308 9.16369 12.059L10.4288 11.643C11.0033 11.454 11.454 11.0033 11.643 10.4288L12.059 9.16369C12.1308 8.94544 12.4395 8.94544 12.5113 9.16369L12.9274 10.4288C13.1164 11.0033 13.567 11.454 14.1416 11.643L15.4067 12.059C15.6249 12.1308 15.6249 12.4395 15.4067 12.5113L14.1416 12.9274C13.567 13.1164 13.1164 13.567 12.9274 14.1416L12.5113 15.4067Z'
+        fill='currentColor'
+      />
+      <path
+        d='M9.02246 0.546878C9.9822 0.546878 10.7564 0.545403 11.374 0.612307C12.0042 0.680586 12.5515 0.826244 13.0273 1.17188C13.3052 1.37376 13.5501 1.61868 13.752 1.89649C14.0975 2.37225 14.2432 2.91984 14.3115 3.54981C14.3784 4.16727 14.377 4.94206 14.377 5.90137V8.51367C13.9611 8.29533 13.5071 8.13985 13.0273 8.06055V5.90137C13.0273 4.9121 13.0259 4.22322 12.9688 3.69532C12.9129 3.18044 12.8098 2.89782 12.6592 2.69043C12.5406 2.52724 12.3966 2.38326 12.2334 2.26465C12.026 2.11404 11.7437 2.0109 11.2285 1.95508C10.7005 1.89789 10.0122 1.89649 9.02246 1.89649H6.55371C5.56395 1.89649 4.87569 1.89787 4.34766 1.95508C3.83242 2.01092 3.55022 2.11398 3.34278 2.26465C3.17953 2.38329 3.03564 2.52719 2.91699 2.69043C2.76642 2.89782 2.66325 3.18042 2.60742 3.69532C2.55027 4.22322 2.54883 4.9121 2.54883 5.90137V10.0986C2.54883 11.0878 2.55031 11.7768 2.60742 12.3047C2.66326 12.8196 2.76642 13.1032 2.91699 13.3105C3.03558 13.4736 3.17966 13.6178 3.34278 13.7363C3.5502 13.8869 3.83265 13.9901 4.34766 14.0459C4.87568 14.1031 5.56398 14.1035 6.55371 14.1035H8.08399C8.27443 14.6025 8.55077 15.0585 8.89551 15.4541H6.55371C5.59402 15.4541 4.81976 15.4546 4.20215 15.3877C3.57204 15.3194 3.02468 15.1738 2.54883 14.8281C2.27111 14.6263 2.02606 14.3813 1.82422 14.1035C1.47883 13.6278 1.33293 13.08 1.26465 12.4502C1.19783 11.8327 1.19922 11.0579 1.19922 10.0986V5.90137C1.19922 4.94206 1.1978 4.16727 1.26465 3.54981C1.33295 2.91984 1.47867 2.37225 1.82422 1.89649C2.02613 1.61864 2.27098 1.37379 2.54883 1.17188C3.02472 0.826181 3.57197 0.6806 4.20215 0.612307C4.81976 0.545393 5.594 0.546877 6.55371 0.546878H9.02246ZM9.19629 9.14649H4.5459V7.84571H9.19629V9.14649ZM11.0303 6.10645H4.5459V4.80567H11.0303V6.10645Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/client/index.tsx

@@ -31,10 +31,13 @@ import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import type {} from '@deepseek-ai/dsh-client-ui-slots'
 // Type-only: pulls the settings-plugins SlotMap merge (settings.plugin.item).
 import type {} from '@deepseek-ai/dsh-client-ui-settings-plugins/client'
+// Type-only: pulls the Context merge for ctx.inputTriggers (slash-dots wiring).
+import type {} from '@deepseek-ai/dsh-client-ui-input-trigger/client'
 import type { HubSettingsValue } from '../protocol.ts'
 import { SkillHubApi } from './api.ts'
 import { en, zh, type HubKey } from './locales.ts'
 import { applySettingsNavIcon } from './settings-nav-icon.ts'
+import { setupSkillSlashDots } from './slash-dots.tsx'
 import { SkillHubSettingsCard, SkillHubSettingsCardController } from './SkillHubSettingsCard.tsx'
 import { SkillHubPanel } from './panel/SkillHubPanel.tsx'
 
@@ -55,7 +58,7 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
  * `settingsScope` is the namespace-scope binder itself; mirror the official
  * settings-plugins inject list.
  */
-export const inject = ['slots', 'locale', 'connection', 'remote', 'settingsScope']
+export const inject = ['slots', 'locale', 'connection', 'remote', 'settingsScope', 'inputTriggers']
 
 /** Type-only surface (export discipline: no value exports beyond the plugin contract). */
 export type { SkillHubPanelProps } from './panel/SkillHubPanel.tsx'
@@ -79,6 +82,15 @@ export function apply(ctx: ClientContext): void {
     ctx.settingsScope.bind<HubSettingsValue>({ namespace: NS }),
   )
 
+  // Chat `/` menu skill dots: wrap the core skill source so every candidate
+  // row carries the invocation dot, colored from the same settings the panel
+  // legend uses (dotModelColor / dotUserColor). Own scope = independent reader;
+  // fails silent, never takes the GUI down.
+  ctx.effect(
+    () => setupSkillSlashDots(ctx, api, ctx.settingsScope.bind<HubSettingsValue>({ namespace: NS })),
+    'dsh-skill-hub: slash dots',
+  )
+
   // Plugin-management card: Settings → 插件 → 可配置插件列表.
   // rc.7's slot contract declares this keyed slot with options `key`
   // (the settings namespace the card edits), so registration is fully typed.

package/src/client/locales.ts

@@ -19,7 +19,7 @@ export const zh = {
   'panel.search': '搜索技能…',
   'legend.model': '模型可调 — Agent 可自动调用',
   'legend.user': '用户可调 — 仅显式点名时触发',
-  'legend.hint': '圆点标在技能名旁；无圆点表示该技能不可被调用。',
+  'legend.hint': '每个技能最多一个圆点；无圆点 = 不可被调用。',
   'panel.enabled': '已启用',
   'panel.disabled': '已禁用',
   'panel.diagnostics': '发现诊断',
@@ -188,9 +188,9 @@ export const zh = {
   'settings.announceToAgent': '向 Agent 公告',
   'settings.announceToAgentHint': '在系统提示中加入本插件说明，用户提到技能管理时 Agent 知道如何协作。',
   'settings.dotModelColor': '模型可调圆点颜色',
-  'settings.dotModelColorHint': '技能名旁蓝色圆点的颜色（#rrggbb）。',
+  'settings.dotModelColorHint': '技能行/聊天 / 菜单中「模型可调」蓝色圆点的颜色（#rrggbb）。',
   'settings.dotUserColor': '用户可调圆点颜色',
-  'settings.dotUserColorHint': '技能名旁绿色圆点的颜色（#rrggbb）。',
+  'settings.dotUserColorHint': '技能行/聊天 / 菜单中「仅用户可调」绿色圆点的颜色（#rrggbb）。',
   'settings.showUseCount': '显示调用次数',
   'settings.showUseCountHint': '在技能名旁显示琥珀色调用次数。',
   'settings.showUseTime': '显示最近调用时间',
@@ -228,7 +228,7 @@ export const en: Record<HubKey, string> = {
   'panel.search': 'Search skills…',
   'legend.model': 'Model-invocable — agents may call automatically',
   'legend.user': 'User-invocable — explicit invocation only',
-  'legend.hint': 'Dots sit beside the skill name; no dot means the skill is not invocable.',
+  'legend.hint': 'At most one dot per skill; no dot = not invocable.',
   'panel.enabled': 'Enabled',
   'panel.disabled': 'Disabled',
   'panel.diagnostics': 'Discovery diagnostics',
@@ -397,9 +397,9 @@ export const en: Record<HubKey, string> = {
   'settings.announceToAgent': 'Announce to agent',
   'settings.announceToAgentHint': 'Adds a system-prompt section so agents know how to collaborate when users mention skill management.',
   'settings.dotModelColor': 'Model-invocable dot color',
-  'settings.dotModelColorHint': 'Color of the blue dot beside skill names (#rrggbb).',
+  'settings.dotModelColorHint': 'Color of the blue "model-callable" dot in the skill panel and the chat / menu (#rrggbb).',
   'settings.dotUserColor': 'User-invocable dot color',
-  'settings.dotUserColorHint': 'Color of the green dot beside skill names (#rrggbb).',
+  'settings.dotUserColorHint': 'Color of the green "user-only" dot in the skill panel and the chat / menu (#rrggbb).',
   'settings.showUseCount': 'Show invocation count',
   'settings.showUseCountHint': 'Show the amber invocation count beside each skill name.',
   'settings.showUseTime': 'Show last-used time',

package/src/client/panel/SkillDetailView.tsx

@@ -42,8 +42,12 @@ export function SkillDetailView(props: SkillDetailViewProps): JSX.Element {
         <button type='button' className={css.back} onClick={onBack}>{tt('detail.back')}</button>
         <span className={css.detailName}>
           {detail.name}
-          {detail.invocation.modelInvocable ? <span className={css.dot + ' ' + css.dotModel} style={dotStyle(hubConfig?.dotModelColor)} title={tt('legend.model')} /> : null}
-          {detail.invocation.userInvocable ? <span className={css.dot + ' ' + css.dotUser} style={dotStyle(hubConfig?.dotUserColor)} title={tt('legend.user')} /> : null}
+          {/* 单一状态圆点：模型可调 → 蓝；否则用户可调 → 绿。与聊天 / 菜单同规则。 */}
+          {detail.invocation.modelInvocable
+            ? <span className={css.dot + ' ' + css.dotModel} style={dotStyle(hubConfig?.dotModelColor)} title={tt('legend.model')} />
+            : detail.invocation.userInvocable
+              ? <span className={css.dot + ' ' + css.dotUser} style={dotStyle(hubConfig?.dotUserColor)} title={tt('legend.user')} />
+              : null}
         </span>
       </div>
       <div className={css.detailMeta}>

package/src/client/panel/SkillHubPanel.tsx

@@ -14,7 +14,7 @@
 
 import { useState } from 'react'
 import type { WritableRoot } from '../../protocol.ts'
-import { IconSkillOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconSkillOutline16 } from '../icons.tsx'
 import type { SkillHubApi } from '../api.ts'
 import { tt } from '../helpers.ts'
 import { PRIVATE_SOURCE, type SortKey } from '../grouping.ts'

package/src/client/panel/SkillRow.tsx

@@ -5,7 +5,7 @@
 
 import type { JSX, KeyboardEvent } from 'react'
 import type { CatalogSkill } from '../../protocol.ts'
-import { IconTrashOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconTrashOutline16 } from '../icons.tsx'
 import { tt } from '../helpers.ts'
 import { dotStyle, relativeTimeText } from './format.ts'
 import type { SkillHubState } from './useSkillHub.ts'
@@ -16,6 +16,12 @@ export function SkillRow(props: { skill: CatalogSkill; hub: SkillHubState }): JS
   const stat = hub.uses.get(skill.name)
   const count = stat?.count ?? 0
   const lastUsed = stat?.lastUsed
+  /** 单一状态圆点：模型可调 → 蓝；否则用户可调 → 绿。与聊天 / 菜单同规则。 */
+  const dot = skill.invocation.modelInvocable
+    ? <span className={css.dot + ' ' + css.dotModel} style={dotStyle(hub.hubConfig?.dotModelColor)} title={tt('legend.model')} />
+    : skill.invocation.userInvocable
+      ? <span className={css.dot + ' ' + css.dotUser} style={dotStyle(hub.hubConfig?.dotUserColor)} title={tt('legend.user')} />
+      : null
   /** 键盘打开详情：Enter 或空格。仅当焦点在行本身（而非行内按钮）时生效。 */
   const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
     if (event.target !== event.currentTarget) return
@@ -37,8 +43,7 @@ export function SkillRow(props: { skill: CatalogSkill; hub: SkillHubState }): JS
         <div className={css.rowName}>
           <span className={css.rowNameText}>{skill.name}</span>
           {count > 0 && hub.hubConfig?.showUseCount !== false ? <span className={css.useCount}>{count}</span> : null}
-          {skill.invocation.modelInvocable ? <span className={css.dot + ' ' + css.dotModel} style={dotStyle(hub.hubConfig?.dotModelColor)} title={tt('legend.model')} /> : null}
-          {skill.invocation.userInvocable ? <span className={css.dot + ' ' + css.dotUser} style={dotStyle(hub.hubConfig?.dotUserColor)} title={tt('legend.user')} /> : null}
+          {dot}
           {lastUsed !== undefined && hub.hubConfig?.showUseTime !== false ? <span className={css.useTime}>{relativeTimeText(lastUsed)}</span> : null}
         </div>
         <div className={css.rowDesc}>{skill.description}</div>

package/src/client/panel/format.ts

@@ -2,12 +2,23 @@
  * Shared display helpers for the panel views (skill rows, detail view, and
  * dialogs): dot color styling, relative/absolute time text, and commit-SHA
  * shortening. Kept in one place so the views render identically.
+ *
+ * The invocation-status dot defaults live here (not in the settings card) so
+ * both the panel legend and the chat `/` skill menu draw from one source and
+ * so this primitives-free module stays unit-testable.
  */
 
 import type { CSSProperties } from 'react'
 import { formatRelativeTime } from '../grouping.ts'
 import { tt } from '../helpers.ts'
 
+/** Model-invocable dot color default. Single source for the TS side; the
+ *  panel's CSS mirrors it via --hub-model (panel.module.css). */
+export const DEFAULT_DOT_MODEL_COLOR = '#2f81f7'
+/** User-invocable dot color default. Single source for the TS side; the
+ *  panel's CSS mirrors it via --hub-user (panel.module.css). */
+export const DEFAULT_DOT_USER_COLOR = '#3fb950'
+
 /** Dot inline style from the user-chosen color (undefined keeps the CSS default). */
 export function dotStyle(color: string | undefined): CSSProperties | undefined {
   if (color === undefined) return undefined

package/src/client/settings-card.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState, type ReactElement } from 'react'
-import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconChevronDownOutline14 } from './icons.tsx'
 import type { HubKey } from './locales.ts'
 import type { CardShell } from './settings-form.ts'
 import css from './settings-card.module.css'