dsh-skill-hub 0.2.0 → 0.2.2

package/src/client/panel/SkillHubPanel.tsx

@@ -2,7 +2,7 @@
  * The skill hub panel: catalog grouped by tags + source collections, search
  * and filter in one row, per-group tri-state switches with conflict dialogs,
  * upstream source tracking (check / sync / follow upstream deletion into a
- * restorable trash), codex-style market sources, disabled re-enable,
+ * restorable trash), market sources, disabled re-enable,
  * detail inspection, and the new-skill scaffold form.
  *
  * Thin shell: state and flows live in useSkillHub, the tab contents live in
@@ -12,6 +12,7 @@
  * so the detail / tag-editor early returns are safe.
  */
 
+import { useState } from 'react'
 import type { WritableRoot } from '../../protocol.ts'
 import { IconSkillOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SkillHubApi } from '../api.ts'
@@ -34,9 +35,12 @@ export interface SkillHubPanelProps {
 
 export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
   const hub = useSkillHub(props.api)
+  /** 工作区输入草稿：回车才应用，避免每次按键都触发目录重拉。 */
+  const [workspaceDraft, setWorkspaceDraft] = useState('')
   const {
     catalog, loading, loadError, successBanner, updateState, detail, detailLoading, showForm, formName, formDesc,
     formRoot, formBusy, formMessage, hubConfig, tab, skillView, sourceFilter, sortKey, search,
+    workspace, setWorkspace,
     sourcesState, tagBusy, busyNames, normalized, origins, sourceOptions, filtered,
     conflictDialog, confirmDialog, deleteSkillDialog, confirmClearTrash, branchChoice, branchBusy, marketSyncDialog,
     syncBusy, editingTag, editName, membersDraft, editSearch, uses, groupsState, sourceCheck, checkingSource, syncingSource,
@@ -136,6 +140,19 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
           <button type='button' className={css.segBtn + (tab === 'scenes' ? ' ' + css.segBtnActive : '')} onClick={() => { setTab('scenes') }}>{tt('view.scenes')}</button>
           <button type='button' className={css.segBtn + (tab === 'market' ? ' ' + css.segBtnActive : '')} onClick={() => { setTab('market'); void loadMarket() }}>{tt('view.market')}</button>
         </span>
+        <span className={css.workspaceBox}>
+          <input
+            className={css.search + ' ' + css.workspaceInput}
+            value={workspaceDraft}
+            placeholder={workspace !== '' ? workspace : tt('panel.workspacePlaceholder')}
+            title={tt('panel.workspaceHint')}
+            onChange={(event) => { setWorkspaceDraft(event.target.value) }}
+            onKeyDown={(event) => { if (event.key === 'Enter') setWorkspace((event.target as HTMLInputElement).value.trim()) }}
+          />
+          {workspace !== ''
+            ? <button type='button' className={css.opBtn} title={tt('panel.workspaceClear')} onClick={() => { setWorkspace(''); setWorkspaceDraft('') }}>✕</button>
+            : null}
+        </span>
         <button type='button' className={css.legendToggle + (showLegend ? ' ' + css.legendToggleActive : '')} onClick={() => { setShowLegend((value) => !value) }} title={tt('legend.hint')}>?</button>
         <span className={css.actions}>
           <button type='button' className={css.button + ' ' + css.primary} onClick={() => { setShowForm((value) => !value) }}>{tt('panel.new')}</button>

package/src/client/panel/SkillRow.tsx

@@ -3,7 +3,7 @@
  * disable actions. Shared by the flat list and both grouped views.
  */
 
-import type { JSX } from 'react'
+import type { JSX, KeyboardEvent } from 'react'
 import type { CatalogSkill } from '../../protocol.ts'
 import { IconTrashOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import { tt } from '../helpers.ts'
@@ -16,8 +16,23 @@ 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
+  /** 键盘打开详情：Enter 或空格。仅当焦点在行本身（而非行内按钮）时生效。 */
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+    if (event.target !== event.currentTarget) return
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      void hub.openDetail(skill.name)
+    }
+  }
   return (
-    <div className={css.row} onClick={() => { void hub.openDetail(skill.name) }}>
+    <div
+      className={css.row}
+      role='button'
+      tabIndex={0}
+      aria-label={tt('row.open', { name: skill.name })}
+      onClick={() => { void hub.openDetail(skill.name) }}
+      onKeyDown={onKeyDown}
+    >
       <div className={css.rowMain}>
         <div className={css.rowName}>
           <span className={css.rowNameText}>{skill.name}</span>

package/src/client/panel/SourcesView.tsx

@@ -1,12 +1,14 @@
 /**
- * Sources tab: the flat skill list or the grouped view (one card per
- * upstream collection with check/sync/follow-delete actions and the
- * tri-state switch, plus the uncategorized "personal" card).
+ * Sources tab: the flat skill list or the grouped view — a project-level
+ * three-tier tree (workspaces from workspace.json, each optionally split by
+ * .dsh/.agents), one card per upstream collection with check/sync/
+ * follow-delete actions and the tri-state switch, plus the uncategorized
+ * "personal" card (project skills never count as personal).
  */
 
 import type { JSX } from 'react'
 import { tt } from '../helpers.ts'
-import { filterBySource, groupSwitchView, PRIVATE_SOURCE } from '../grouping.ts'
+import { filterBySource, groupSwitchView, isProjectSource, PRIVATE_SOURCE } from '../grouping.ts'
 import { SourceStatusBadge } from './SourceStatusBadge.tsx'
 import { SkillRow } from './SkillRow.tsx'
 import { DisabledRow } from './DisabledRow.tsx'
@@ -14,6 +16,89 @@ import { GroupSummary } from './GroupSummary.tsx'
 import type { SkillHubState } from './useSkillHub.ts'
 import css from './panel.module.css'
 
+/** 项目级三级树：项目级 → 具体工作区（可折叠、可细分）→ .dsh/.agents。 */
+function ProjectTree(props: { hub: SkillHubState }): JSX.Element | null {
+  const { hub } = props
+  const { sorted, sourceFilter, origins, collapsedGroups, subdividedProjects, toggleGroupCollapse, toggleSubdivide } = hub
+  const projectSkills = filterBySource(sorted, sourceFilter, origins).filter((skill) => isProjectSource(skill.source))
+  if (projectSkills.length === 0) return null
+  // workspace 缺失（过渡态）时按 source 降级分组，避免空标题。
+  const byProject = new Map<string, { title: string; skills: typeof projectSkills }>()
+  for (const skill of projectSkills) {
+    const key = skill.workspace ?? skill.source
+    const entry = byProject.get(key)
+    if (entry === undefined) {
+      byProject.set(key, {
+        title: skill.workspaceTitle ?? skill.workspace ?? tt('groups.project'),
+        skills: [skill],
+      })
+    } else {
+      entry.skills.push(skill)
+    }
+  }
+  const topCollapsed = collapsedGroups.has('project')
+  return (
+    <section className={css.section}>
+      <div className={css.groupHead}>
+        <button type='button' className={css.disclosure} aria-expanded={!topCollapsed} onClick={() => { toggleGroupCollapse('project') }}>
+          <span className={css.chevron + (topCollapsed ? ' ' + css.chevronCollapsed : '')} />
+          <span className={css.groupTitle}>
+            {tt('groups.project')} · {byProject.size}
+          </span>
+        </button>
+      </div>
+      {!topCollapsed ? [...byProject.entries()].map(([key, proj]) => {
+        const projKey = 'project:' + key
+        const projCollapsed = collapsedGroups.has(projKey)
+        const subdivided = subdividedProjects.has(key)
+        return (
+          <div key={projKey} className={css.projectNest}>
+            <div className={css.groupHead}>
+              <button type='button' className={css.disclosure} aria-expanded={!projCollapsed} onClick={() => { toggleGroupCollapse(projKey) }}>
+                <span className={css.chevron + (projCollapsed ? ' ' + css.chevronCollapsed : '')} />
+                <span className={css.groupTitle}>
+                  {proj.title} · {proj.skills.length}
+                  <GroupSummary members={proj.skills.map((skill) => skill.name)} hub={hub} />
+                </span>
+              </button>
+              <span className={css.groupOps}>
+                <button type='button' className={css.opBtn} onClick={(event) => { event.stopPropagation(); toggleSubdivide(key) }}>
+                  {subdivided ? tt('groups.merge') : tt('groups.subdivide')}
+                </button>
+              </span>
+            </div>
+            {!projCollapsed ? (
+              subdivided ? (
+                <div className={css.projectNest}>
+                  {(['project-dsh', 'project-agents'] as const).map((source) => {
+                    const list = proj.skills.filter((skill) => skill.source === source)
+                    if (list.length === 0) return null
+                    const srcKey = projKey + ':' + source
+                    const srcCollapsed = collapsedGroups.has(srcKey)
+                    return (
+                      <div key={srcKey} className={css.projectNest}>
+                        <div className={css.groupHead}>
+                          <button type='button' className={css.disclosure} aria-expanded={!srcCollapsed} onClick={() => { toggleGroupCollapse(srcKey) }}>
+                            <span className={css.chevron + (srcCollapsed ? ' ' + css.chevronCollapsed : '')} />
+                            <span className={css.groupTitle}>
+                              {tt(('badge.source.' + source) as 'badge.source.project-dsh' | 'badge.source.project-agents')} · {list.length}
+                            </span>
+                          </button>
+                        </div>
+                        {!srcCollapsed ? list.map((skill) => <SkillRow key={skill.name} skill={skill} hub={hub} />) : null}
+                      </div>
+                    )
+                  })}
+                </div>
+              ) : proj.skills.map((skill) => <SkillRow key={skill.name} skill={skill} hub={hub} />)
+            ) : null}
+          </div>
+        )
+      }) : null}
+    </section>
+  )
+}
+
 export function SourcesView(props: { hub: SkillHubState }): JSX.Element {
   const { hub } = props
   const { catalog, groupsState, skillView, sourceFilter, origins, sorted, normalized, collapsedGroups, viewNames, sourceCheck, actionNames, checkingSource, syncingSource, batchBusy, busyNames, toggleGroupCollapse, checkSources, requestSync, requestDelete, toggleGroup, enableDisabled } = hub
@@ -24,6 +109,7 @@ export function SourcesView(props: { hub: SkillHubState }): JSX.Element {
 
   return (
     <>
+      <ProjectTree hub={hub} />
       {groupsState !== null && groupsState.collections.length === 0 ? <div className={css.empty}>{tt('groups.noCollections')}</div> : null}
       {groupsState?.collections.map((collection) => {
         const skills = filterBySource(sorted, sourceFilter, origins).filter((skill) => collection.skillNames.includes(skill.name))
@@ -81,7 +167,8 @@ export function SourcesView(props: { hub: SkillHubState }): JSX.Element {
         )
       })}
       {(() => {
-        const uncategorized = filterBySource(sorted, sourceFilter, origins).filter((skill) => origins[skill.name] === undefined)
+        // 「个人」组：无来源记录 且 非项目技能（项目技能归项目树）。
+        const uncategorized = filterBySource(sorted, sourceFilter, origins).filter((skill) => origins[skill.name] === undefined && !isProjectSource(skill.source))
         if (uncategorized.length === 0) return null
         const collapsed = collapsedGroups.has('uncategorized-source')
         return (

package/src/client/panel/panel.module.css

@@ -2,7 +2,7 @@
    cards, hairline separators, restrained accents. Theme-agnostic: all
    surfaces are translucent greys + currentColor, so light/dark both work. */
 
-.panel { padding: 28px 20px 44px; display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; color-scheme: light dark; /* Dot colors mirror src/client/api-config-scope.ts (DEFAULT_DOT_MODEL_COLOR / DEFAULT_DOT_USER_COLOR) — CSS cannot import TS, so keep the two in sync. */ --hub-model: #2f81f7; --hub-user: #3fb950; }
+.panel { padding: 28px 20px 44px; display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; color-scheme: light dark; /* Dot colors mirror src/client/SkillHubSettingsCard.tsx (DEFAULT_DOT_MODEL_COLOR / DEFAULT_DOT_USER_COLOR) — CSS cannot import TS, so keep the two in sync. */ --hub-model: #2f81f7; --hub-user: #3fb950; }
 .header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
 .title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
 .hint { font-size: 12px; opacity: .5; }
@@ -34,6 +34,8 @@
 /* Rows: hairline separators inside a card, no outer borders. */
 .row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: transparent; cursor: pointer; transition: background .12s ease; }
 .row:hover { background: rgba(128,128,128,.08); }
+/* Keyboard focus ring for the div-as-button skill row (theme-agnostic). */
+.row:focus-visible { outline: 2px solid var(--hub-model); outline-offset: -2px; }
 .rowStatic { cursor: default; }
 .rowStatic:hover { background: transparent; }
 .row + .row { border-top: 0.5px solid rgba(128,128,128,.13); }
@@ -217,3 +219,9 @@
 .sectionTitleFill { flex: 1; }
 .dialogSelect { width: 100%; margin-bottom: 12px; }
 .dialogRow { display: flex; align-items: center; gap: 8px; }
+/* Workspace (project path) picker in the subbar. */
+.workspaceBox { display: inline-flex; align-items: center; gap: 6px; }
+.workspaceInput { width: 200px; padding: 6px 10px; font-size: 12px; }
+/* Project-level three-tier tree: outer card (the .section), inner levels are
+   flat — indent + a hairline guide only, no nested card surfaces. */
+.projectNest { display: flex; flex-direction: column; margin: 2px 0 0 14px; border-left: 1px solid rgba(128,128,128,.14); }

package/src/client/panel/useSkillHub.ts

@@ -26,7 +26,7 @@ import type {
 } from '../../protocol.ts'
 import type { SkillHubApi } from '../api.ts'
 import { errorMessage, tt } from '../helpers.ts'
-import { conflictsOnClose, PRIVATE_SOURCE, sortSkills, type SortKey, type GroupSwitchState } from '../grouping.ts'
+import { conflictsOnClose, isProjectSource, PRIVATE_SOURCE, sortSkills, type SortKey, type GroupSwitchState } from '../grouping.ts'
 import type { BranchChoiceState, ConfirmDialogState, ConflictDialogState, MarketSyncDialogState } from './dialogs.tsx'
 
 /** Catalog poll interval while the panel is mounted (the provider watcher feeds this). */
@@ -98,6 +98,8 @@ export function useSkillHub(api: SkillHubApi) {
   const [repoImporting, setRepoImporting] = useState(false)
   const [repoResult, setRepoResult] = useState<RepoImportResponse | null>(null)
   const [search, setSearch] = useState('')
+  /** 工作区（项目）路径；空 = 只看用户级技能。 */
+  const [workspace, setWorkspace] = useState('')
   const [detail, setDetail] = useState<SkillDetail | null>(null)
   const [detailLoading, setDetailLoading] = useState(false)
   const [busyNames, setBusyNames] = useState<ReadonlySet<string>>(new Set())
@@ -139,8 +141,10 @@ export function useSkillHub(api: SkillHubApi) {
   const [newTagName, setNewTagName] = useState('')
   const [tagBusy, setTagBusy] = useState(false)
   const [editSearch, setEditSearch] = useState('')
-  /** 分组视图里收起的分组（key 为 tag:<id> 或 col:<name>）。 */
+  /** 分组视图里收起的分组（key 为 tag:<id>、col:<name> 或 project 树键）。 */
   const [collapsedGroups, setCollapsedGroups] = useState<ReadonlySet<string>>(new Set())
+  /** 项目级三级树里已细分（按 .dsh/.agents）的项目键。 */
+  const [subdividedProjects, setSubdividedProjects] = useState<ReadonlySet<string>>(new Set())
   const [showLegend, setShowLegend] = useState(false)
 
   const toggleGroupCollapse = useCallback((key: string): void => {
@@ -152,9 +156,18 @@ export function useSkillHub(api: SkillHubApi) {
     })
   }, [])
 
+  const toggleSubdivide = useCallback((key: string): void => {
+    setSubdividedProjects((previous) => {
+      const next = new Set(previous)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }, [])
+
   const load = useCallback(async (): Promise<void> => {
     try {
-      const next = await api.catalog()
+      const next = await api.catalog(workspace !== '' ? { cwd: workspace } : undefined)
       setCatalog(next)
       setLoadError(null)
     } catch (error) {
@@ -162,7 +175,7 @@ export function useSkillHub(api: SkillHubApi) {
     } finally {
       setLoading(false)
     }
-  }, [api])
+  }, [api, workspace])
 
   const loadUses = useCallback(async (): Promise<void> => {
     try {
@@ -246,13 +259,13 @@ export function useSkillHub(api: SkillHubApi) {
     setDetailLoading(true)
     setLoadError(null)
     try {
-      setDetail(await api.skill(name))
+      setDetail(await api.skill(name, workspace !== '' ? { cwd: workspace } : undefined))
     } catch (error) {
       setLoadError(errorMessage(error))
     } finally {
       setDetailLoading(false)
     }
-  }, [api])
+  }, [api, workspace])
 
   const toggle = useCallback(async (skill: CatalogSkill, enabled: boolean): Promise<void> => {
     setBusyNames((previous) => new Set(previous).add(skill.name))
@@ -765,7 +778,8 @@ export function useSkillHub(api: SkillHubApi) {
   const sourceOptions = useMemo(() => {
     const skills = catalog?.skills ?? []
     const repos = [...new Set(skills.map((skill) => origins[skill.name]).filter((repo): repo is string => repo !== undefined))].sort()
-    const hasPrivate = skills.some((skill) => origins[skill.name] === undefined)
+    // 项目级技能（有 workspace 归属）不算「个人」。
+    const hasPrivate = skills.some((skill) => origins[skill.name] === undefined && !isProjectSource(skill.source))
     return [...repos, ...(hasPrivate ? [PRIVATE_SOURCE] : [])]
   }, [catalog, origins])
   const filtered = useMemo(() => (catalog?.skills ?? []).filter((skill) =>
@@ -777,19 +791,19 @@ export function useSkillHub(api: SkillHubApi) {
   return {
     // state
     catalog, loading, loadError, successBanner, updateState, repoDiscoverState, scanningRepo, repoSelected, repoImporting, repoResult,
-    search, detail, detailLoading, busyNames, batchBusy, showForm, formName, formDesc, formRoot, formBusy, formMessage,
+    search, workspace, detail, detailLoading, busyNames, batchBusy, showForm, formName, formDesc, formRoot, formBusy, formMessage,
     uses, hubConfig, tab, skillView, sourceFilter, sortKey, marketState, marketCheck, branchChoice, branchBusy,
     marketSyncDialog, syncingMarket, syncBusy, newSourceName, groupsState, sourcesState, sourceCheck, checkingSource, syncingSource,
     conflictDialog, confirmDialog, deleteSkillDialog, confirmClearTrash, updateAllDialog, editingTag, editName, membersDraft, newTagName, tagBusy,
-    editSearch, collapsedGroups, showLegend,
+    editSearch, collapsedGroups, subdividedProjects, showLegend,
     // derived
     actionNames, viewNames, normalized, origins, sourceOptions, filtered, sorted,
     // actions + setters
-    setLoadError, setSuccessBanner, setSearch, setDetail, setShowForm, setFormName, setFormDesc, setFormRoot, setFormMessage,
+    setLoadError, setSuccessBanner, setSearch, setWorkspace, setDetail, setShowForm, setFormName, setFormDesc, setFormRoot, setFormMessage,
     setRepoSelected, setTab, setSkillView,
     setSourceFilter, setSortKey, setBranchChoice, setMarketSyncDialog, setNewSourceName, setConflictDialog, setConfirmDialog,
     setDeleteSkillDialog, setConfirmClearTrash, setUpdateAllDialog, setEditingTag, setEditName, setMembersDraft, setNewTagName, setEditSearch, setShowLegend,
-    toggleGroupCollapse, checkUpdate, loadMarket, openDetail, toggle, enableDisabled, batchToggleNames, toggleGroup, resolveConflict,
+    toggleGroupCollapse, toggleSubdivide, checkUpdate, loadMarket, openDetail, toggle, enableDisabled, batchToggleNames, toggleGroup, resolveConflict,
     runConfirmed, checkSources, requestSync, requestDelete, restoreTrash, clearTrash, requestDeleteSkill, runDeleteSkill, createTag,
     deleteTag, saveTag, addSource, addMarketSource, removeMarketSource, scanRepo, confirmBranchChoice, toggleRepoSelected, importRepo,
     checkMarket, syncMarketSource, confirmMarketSync, updateAll, create,

package/src/client/settings-card.tsx

@@ -8,17 +8,18 @@
 
 import { useState, type ReactElement } from 'react'
 import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { HubKey } from './locales.ts'
 import type { CardShell } from './settings-form.ts'
 import css from './settings-card.module.css'
 
 /** Card-level chrome props. */
 export interface PluginSettingsCardProps {
-  /** Locale translator for the owning plugin's namespace. */
-  t: (key: string) => string
+  /** Locale translator for the owning plugin's namespace (its own key domain). */
+  t: (key: HubKey) => string
   /** Locale key of the card title. */
-  titleKey: string
+  titleKey: HubKey
   /** Locale key of the card description. */
-  descriptionKey: string
+  descriptionKey: HubKey
   /** The form shell state. */
   state: CardShell
   onSave: () => void

package/src/index.ts

@@ -9,12 +9,14 @@
 
 import type { Context } from '@deepseek-ai/cordis'
 import type { SkillProviderControl } from '@deepseek-ai/dsh-skill'
+import { settingsNamespace } from '@deepseek-ai/dsh-settings'
 import z from 'schemastery'
 import type {} from '@deepseek-ai/dsh-host-webserver'
 import type {} from '@deepseek-ai/dsh-skill'
 import type {} from '@deepseek-ai/dsh-system-prompt'
 import type {} from '@deepseek-ai/dsh-session-query'
-import { HUB_CONFIG_DEFAULTS, resolveHubConfig, type HubConfig } from './protocol.ts'
+import type {} from '@deepseek-ai/dsh-settings'
+import { HUB_CONFIG_DEFAULTS, HEX_COLOR_RE, type HubConfig, type HubSettingsValue } from './protocol.ts'
 import { SkillHubProvider } from './provider.ts'
 import { makeRoutes } from './routes.ts'
 import { createSkillStatsReader, type SkillStatsReader } from './stats.ts'
@@ -24,7 +26,7 @@ import { SkillHubStore } from './store.ts'
 export const name = 'skill-hub'
 
 /** Services required before the skill-hub surfaces can mount. */
-export const inject = ['webServer', 'skills', 'systemPrompt']
+export const inject = ['webServer', 'skills', 'systemPrompt', 'settings']
 
 /** Plugin config, validated by the same-named schemastery schema. */
 export interface Config {
@@ -48,6 +50,26 @@ export const Config: z<Config> = z.object({
   showGroupSummary: z.boolean().default(HUB_CONFIG_DEFAULTS.showGroupSummary),
 })
 
+/**
+ * Settings namespace hosting the hub's runtime config. Since dsh rc.7 the
+ * host serves every registered settings namespace to the web client (the
+ * dsh-host-apiproxy allowlist is gone), so the browser card and the settings
+ * page edit this namespace through the official settings transport, and the
+ * plugin consumes the same resolved value — one source of truth.
+ */
+export const CONFIG_NAMESPACE = settingsNamespace('dsh-skill-hub')
+
+/** Schema of the hub's settings namespace: the card's fields (booleans + optional dot colors). */
+export const HubSettingsSchema: z<HubSettingsValue> = z.object({
+  enabled: z.boolean().default(HUB_CONFIG_DEFAULTS.enabled),
+  announceToAgent: z.boolean().default(HUB_CONFIG_DEFAULTS.announceToAgent),
+  showUseCount: z.boolean().default(HUB_CONFIG_DEFAULTS.showUseCount),
+  showUseTime: z.boolean().default(HUB_CONFIG_DEFAULTS.showUseTime),
+  showGroupSummary: z.boolean().default(HUB_CONFIG_DEFAULTS.showGroupSummary),
+  dotModelColor: z.string().pattern(HEX_COLOR_RE),
+  dotUserColor: z.string().pattern(HEX_COLOR_RE),
+})
+
 /** Order of the announcement section within the tool-guidance band. */
 const SECTION_ORDER = 152
 
@@ -59,23 +81,22 @@ export const SKILL_HUB_GUIDANCE = [
 
 /**
  * Mount the skill hub routes and announcement.
- * @param ctx - host plugin context carrying webServer/skills/systemPrompt.
+ * @param ctx - host plugin context carrying webServer/skills/systemPrompt/settings.
  * @param config - resolved plugin config (schema defaults applied by the loader).
  */
 export function apply(ctx: Context, config?: Config): void {
-  // The hub owns its runtime configuration: the cordis composition entry
-  // seeds the defaults, and the web settings card persists edits into the
-  // sidecar store (~/.dsh/dsh-skill-hub.json). The host's settings service
-  // deliberately refuses to expose third-party namespaces to the web client
-  // (dsh-host-apiproxy's allowlist), so the card talks to /api/skill-hub/config
-  // instead of the settings transport.
+  // The hub's runtime configuration lives in dsh's own settings service:
+  // since rc.7 the host serves every registered settings namespace to the
+  // web client (dsh-host-apiproxy's allowlist is gone), so the browser card
+  // and the config route edit this namespace through the official settings
+  // transport, and the host consumes the very same resolved value — one
+  // source of truth. The cordis composition entry seeds the base layer; the
+  // sidecar config survives only as a one-time migration source below.
   const base = config ?? {}
-  // Saved sidecar overrides win over the cordis entry; the shared resolver
-  // fills the rest from HUB_CONFIG_DEFAULTS (single source, see protocol.ts).
-  let current: () => HubConfig = () => resolveHubConfig({}, base)
-  // The raw saved config layer (fields the user explicitly overrode); the
-  // config route reports it so the web card can mark overridden fields.
-  let savedState: Partial<HubConfig> = {}
+  const settingsScope = ctx.settings.register(CONFIG_NAMESPACE, HubSettingsSchema, { base })
+  // The effective resolved config, read live from the settings namespace
+  // (schema defaults, then the composition base, then the user layer).
+  const current = (): HubConfig => settingsScope.get()
 
   const store = new SkillHubStore()
   let disposeRoutes: (() => void) | undefined
@@ -90,16 +111,27 @@ export function apply(ctx: Context, config?: Config): void {
   // stats route's data rather than failing to load.
   let stats: SkillStatsReader | undefined
 
+  // The raw saved config layer (fields the user explicitly overrode); the
+  // config route reports it so callers can mark overridden fields.
+  const saved = (): Partial<HubConfig> => {
+    const descriptor = ctx.settings.describe().find((entry) => entry.ns === CONFIG_NAMESPACE)
+    return (descriptor?.user as Partial<HubConfig> | undefined) ?? {}
+  }
+
   // Persist a config patch, re-point the live config, and re-sync every
-  // surface. Runs inside the config route handler; the response is written
-  // after sync() has settled the new registration set.
+  // surface through the settings transport. A patch value of undefined clears
+  // the saved override (the key leaves the user section, so the field
+  // re-inherits the base/default) — the old sidecar's reset semantics.
+  // Runs inside the config route handler; the watcher below re-syncs the
+  // surfaces once the namespace commits.
   const updateConfig = async (patch: Partial<HubConfig>): Promise<HubConfig> => {
-    await store.setConfig(patch)
-    savedState = await store.getConfig()
-    const next = resolveHubConfig(savedState, base)
-    current = () => next
-    sync()
-    return next
+    const user: Record<string, unknown> = { ...saved() }
+    for (const [key, value] of Object.entries(patch) as Array<[keyof HubConfig, boolean | string | undefined]>) {
+      if (value === undefined) delete user[key]
+      else user[key] = value
+    }
+    await settingsScope.replace(user)
+    return settingsScope.get()
   }
 
   // Register (or drop) every surface to match the current config. Each
@@ -149,7 +181,7 @@ export function apply(ctx: Context, config?: Config): void {
           invalidate: () => { providerControl?.invalidate() },
           stats,
           config: current,
-          saved: () => savedState,
+          saved,
           updateConfig,
         }).map((route) => ctx.webServer.register(route))
         return () => {
@@ -160,14 +192,29 @@ export function apply(ctx: Context, config?: Config): void {
     )
   }
 
-  // Initial registration from the composition entry, then adopt the saved
-  // sidecar config once the store has read it (re-sync re-points surfaces).
+  // Initial registration from the composition entry, then re-sync whenever
+  // the settings namespace commits (any writer — the card, the config route,
+  // or the Host document editor).
   sync()
-  void store.getConfig().then((saved) => {
-    savedState = saved
-    current = () => resolveHubConfig(saved, base)
-    sync()
-  })
+  ctx.effect(
+    () => settingsScope.watch(() => { sync() }),
+    'dsh-skill-hub: settings config watch',
+  )
+
+  // One-time migration: an install upgraded from the sidecar-configured
+  // build seeds the settings namespace from the saved sidecar config when the
+  // namespace has no user section yet. Later edits live only in the settings
+  // document; the sidecar keeps its (now-stale) copy untouched.
+  void (async () => {
+    const legacy = await store.getConfig()
+    if (Object.keys(legacy).length > 0 && Object.keys(saved()).length === 0) {
+      try {
+        await settingsScope.update(legacy as Record<string, unknown>)
+      } catch (error) {
+        ctx.logger.warn('[dsh-skill-hub] sidecar config migration into the settings namespace failed', error)
+      }
+    }
+  })()
 
   // Optional trigger statistics: while a session-query service exists, wire a
   // cached invocation-count reader into the stats route. Re-running sync()

package/src/protocol.ts

@@ -56,10 +56,16 @@ export interface CatalogSkill {
   provider: string
   /** Whether the hub may toggle this skill (user-level filesystem skills only). */
   writable: boolean
+  /** 技能来源标识（user-dsh/user-agents/project-dsh/project-agents/...）。 */
+  source: string
   /** SKILL.md creation time (epoch ms); used for "added" sorting. Absent when unknown. */
   addedAt?: number
   /** SKILL.md last-modified time (epoch ms); used for "updated" display. Absent when unknown. */
   updatedAt?: number
+  /** 项目技能的所属工作区路径（仅 project-dsh/project-agents 来源携带）。 */
+  workspace?: string
+  /** 工作区显示标题（来自 workspace.json；无则回退为路径）。 */
+  workspaceTitle?: string
 }
 
 /** One disabled skill tracked by the hub sidecar (SKILL.md renamed away). */
@@ -213,6 +219,24 @@ export interface HubConfig {
   showGroupSummary?: boolean
 }
 
+/**
+ * The resolved shape of the hub's settings namespace (schema defaults, then
+ * the composition base, then the user layer). Kept as a type alias so the
+ * browser-side settings scope snapshot is index-compatible with the card
+ * form's record shape.
+ */
+export type HubSettingsValue = {
+  enabled: boolean
+  announceToAgent: boolean
+  showUseCount: boolean
+  showUseTime: boolean
+  showGroupSummary: boolean
+  /** Model-invocable dot color (#rrggbb); absent means the panel default. */
+  dotModelColor?: string
+  /** User-invocable dot color (#rrggbb); absent means the panel default. */
+  dotUserColor?: string
+}
+
 /**
  * Hub config defaults — the single source every layer reads: the cordis
  * schema (index.ts), the host's saved-override merge, and the routes'

package/src/routes.test.ts

@@ -141,6 +141,61 @@ describe('skill-hub routes', () => {
     expect(captured).toBe('/tmp/project')
   })
 
+  it('merges every known workspace into the default catalog with workspace fields', async () => {
+    // workspace.json 声明两个工作区；每个工作区的 snapshot 返回其项目技能 + 用户级技能。
+    await mkdir(join(home, 'storages'), { recursive: true })
+    await writeFile(join(home, 'storages', 'workspace.json'), JSON.stringify({
+      tables: {
+        workspaces: {
+          a: { title: 'Alpha', path: '/ws/a' },
+          b: { title: 'Beta', path: '/ws/b' },
+        },
+      },
+    }), 'utf8')
+    skills.snapshot = async (options?: { cwd?: string }) => {
+      const user = summary({ name: 'shared-user' })
+      if (options?.cwd === '/ws/a') {
+        return { skills: [user, summary({ name: 'ws-a-skill', source: 'project-dsh', provider: 'skill-hub' })], complete: true }
+      }
+      if (options?.cwd === '/ws/b') {
+        return { skills: [user, summary({ name: 'ws-b-skill', source: 'project-agents', provider: 'skill-hub' })], complete: false }
+      }
+      return { skills: [user], complete: true }
+    }
+    const res = new FakeResponse()
+    await routeFor(SKILL_HUB_API.catalog).handler(fakeReq('GET', SKILL_HUB_API.catalog), res as never)
+    expect(res.status).toBe(200)
+    const body = res.json() as CatalogResponse
+    expect(body.complete).toBe(false) // 任一工作区不完整则整体不完整
+    const byName = new Map(body.skills.map((skill) => [skill.name, skill]))
+    expect(byName.has('ws-a-skill')).toBe(true)
+    expect(byName.get('ws-a-skill')).toMatchObject({ workspace: '/ws/a', workspaceTitle: 'Alpha', writable: false })
+    expect(byName.get('ws-b-skill')).toMatchObject({ workspace: '/ws/b', workspaceTitle: 'Beta' })
+    // 同名用户级技能只出现一次，且不带 workspace 字段。
+    expect(byName.get('shared-user')).toMatchObject({ writable: true })
+    expect(byName.get('shared-user')?.workspace).toBeUndefined()
+  })
+
+  it('falls back across workspaces when fetching a project skill detail without cwd', async () => {
+    await mkdir(join(home, 'storages'), { recursive: true })
+    await writeFile(join(home, 'storages', 'workspace.json'), JSON.stringify({
+      tables: { workspaces: { a: { title: 'Alpha', path: '/ws/a' } } },
+    }), 'utf8')
+    const calls: Array<string | undefined> = []
+    skills.get = async (name: string, options?: { cwd?: string }) => {
+      calls.push(options?.cwd)
+      return name === 'ws-a-skill' && options?.cwd === '/ws/a' ? definition({ name, source: 'project-dsh' }) : undefined
+    }
+    const res = new FakeResponse()
+    await routeFor(SKILL_HUB_API.skill).handler(fakeReq('GET', SKILL_HUB_API.skill + '?name=ws-a-skill'), res as never)
+    expect(res.status).toBe(200)
+    expect(calls).toEqual(['/ws/a']) // 工作区命中即停，不再回退用户根
+    const miss = new FakeResponse()
+    await routeFor(SKILL_HUB_API.skill).handler(fakeReq('GET', SKILL_HUB_API.skill + '?name=nope'), miss as never)
+    expect(miss.status).toBe(404)
+    expect(calls).toEqual(['/ws/a', '/ws/a', undefined]) // 未命中时回退用户根
+  })
+
   it('serves skill detail and 404s unknown names', async () => {
     skills.get = async (name: string) => name === 'demo-skill' ? definition({ path: '/x/demo-skill/SKILL.md' }) : undefined
     const ok = new FakeResponse()