dsh-skill-hub 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-skill-hub",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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": {
@@ -43,36 +43,36 @@
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-session": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-session-query": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-skill": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.6",
+    "@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",
     "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.6",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-settings-plugins": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-session": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-session-query": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-skill": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.6",
+    "@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",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.20.0",
     "@types/react": "~18.3.1",
@@ -93,6 +93,7 @@
     "src",
     "cordis.patch.yml",
     "README.md",
+    "README.zh.md",
     "LICENSE",
     "CONTRIBUTING.md"
   ],
@@ -124,4 +125,4 @@
     "url": "https://github.com/cheshireez/dsh-skill-hub/issues"
   },
   "homepage": "https://github.com/cheshireez/dsh-skill-hub"
-}
+}

package/src/client/SkillHubSettingsCard.tsx

@@ -1,17 +1,23 @@
 /**
- * The dsh-skill-hub plugin settings card: bridges the hub's own config route
- * (ApiConfigScope → /api/skill-hub/config) onto the family-style staged card
- * form (enabled master switch + agent announcement). Registered into the
- * official `settings.plugin.item` slot so the plugin shows up in Settings →
- * 插件. The scope is a FormScope, so the card never touches the settings
- * service (the host refuses third-party namespaces).
+ * The dsh-skill-hub plugin settings card: bridges the hub's settings
+ * namespace (bound through the official settings transport) onto the
+ * family-style staged card form (enabled master switch + agent announcement).
+ * Registered into the official `settings.plugin.item` slot keyed by that
+ * namespace, so the plugin shows up in Settings → 插件 on dsh rc.7+.
  */
 
 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 { ColorField, PluginSettingsCard, SwitchField } from './settings-card.tsx'
 import { booleanField, CardForm, colorField, type CardShell, type FieldState, type FormScope } from './settings-form.ts'
-import { DEFAULT_DOT_MODEL_COLOR, DEFAULT_DOT_USER_COLOR } from './api-config-scope.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'
 
 /** The card's projected state. */
 export interface SkillHubSettingsState extends CardShell {
@@ -24,22 +30,28 @@ export interface SkillHubSettingsState extends CardShell {
   showGroupSummary: FieldState
 }
 
-/** Props the slot renderer receives (locale copy + injected form actions). */
-export interface SkillHubSettingsCardProps {
-  t: (key: string) => string
-  useSkillHubSettingsCard: <T>(selector: (snapshot: SkillHubSettingsState) => T) => T
+/** The business face the card's slot registration injects. */
+export interface SkillHubSettingsCardFace {
+  hooks: {
+    /** The card's snapshot store (projected form state). */
+    skillHubSettingsCard: SnapshotStore<SkillHubSettingsState>
+  }
   save: () => void
   discard: () => void
   edit: (field: string, text: string) => void
   resetField: (field: string) => void
 }
 
+/** Props the slot renderer binds (locale copy + injected form actions). */
+export type SkillHubSettingsCardProps =
+  PropsRuntime<'settings.plugin.item'> & PropsLocale<'dsh-skill-hub'> & InjectFace<SkillHubSettingsCardFace>
+
 /** Bridges the hub's config scope onto the card's staged form. */
 export class SkillHubSettingsCardController {
   private readonly form: CardForm
   private readonly store: SnapshotStore<SkillHubSettingsState>
 
-  /** @param scope - the hub config scope the card edits (ApiConfigScope). */
+  /** @param scope - the hub settings scope the card edits (FormScope-compatible). */
   constructor(scope: FormScope) {
     this.form = new CardForm(scope, [booleanField('enabled'), booleanField('announceToAgent'), colorField('dotModelColor'), colorField('dotUserColor'), booleanField('showUseCount'), booleanField('showUseTime'), booleanField('showGroupSummary')])
     this.store = this.form.bind(() => this.projection())
@@ -62,7 +74,7 @@ export class SkillHubSettingsCardController {
    * Build the face the card's slot registration injects.
    * @returns the card's snapshot hook and its form actions.
    */
-  inject(): { hooks: { skillHubSettingsCard: SnapshotStore<SkillHubSettingsState> } } & ReturnType<CardForm['actions']> {
+  inject(): SkillHubSettingsCardFace {
     return {
       hooks: { skillHubSettingsCard: this.store },
       ...this.form.actions(),
@@ -158,4 +170,3 @@ export function SkillHubSettingsCard(props: SkillHubSettingsCardProps): ReactEle
     </PluginSettingsCard>
   )
 }
-

package/src/client/api.ts

@@ -80,13 +80,16 @@ async function fetchWithTimeout(input: RequestInfo | URL, init?: RequestInit, ms
 
 /** The browser half's only data entry point. */
 export class SkillHubApi {
-  async catalog(): Promise<CatalogResponse> {
-    const response = await fetchWithTimeout(SKILL_HUB_API.catalog)
-    return readJson<CatalogResponse>(response)
+  /** Catalog lookup options (cwd selects a workspace's project skills). */
+  catalog(options?: { cwd?: string }): Promise<CatalogResponse> {
+    const url = options?.cwd !== undefined && options.cwd !== '' ? SKILL_HUB_API.catalog + '?cwd=' + encodeURIComponent(options.cwd) : SKILL_HUB_API.catalog
+    return fetchWithTimeout(url).then((response) => readJson<CatalogResponse>(response))
   }
 
-  async skill(name: string): Promise<SkillDetail> {
-    const url = SKILL_HUB_API.skill + '?name=' + encodeURIComponent(name)
+  /** One skill's detail (cwd selects a workspace's project skills). */
+  async skill(name: string, options?: { cwd?: string }): Promise<SkillDetail> {
+    const cwd = options?.cwd !== undefined && options.cwd !== '' ? '&cwd=' + encodeURIComponent(options.cwd) : ''
+    const url = SKILL_HUB_API.skill + '?name=' + encodeURIComponent(name) + cwd
     const response = await fetchWithTimeout(url)
     const body = await readJson<SkillDetailResponse>(response)
     return body.skill
@@ -138,7 +141,7 @@ export class SkillHubApi {
     return readJson<ToggleBatchResponse>(response)
   }
 
-  /** The user's added market sources (codex-style repo slugs). */
+  /** The user's added market sources. */
   async market(): Promise<MarketSourcesResponse> {
     const response = await fetchWithTimeout(SKILL_HUB_API.market)
     return readJson<MarketSourcesResponse>(response)

package/src/client/grouping.test.ts

@@ -8,6 +8,7 @@ function skill(name: string, writable = true): CatalogSkill {
     description: '',
     invocation: { modelInvocable: true, userInvocable: true },
     provider: 'filesystem',
+    source: 'user-dsh',
     writable,
   }
 }
@@ -61,6 +62,17 @@ describe('filterBySource', () => {
     expect(filterBySource(skills, PRIVATE_SOURCE, origins).map((s) => s.name)).toEqual(['c'])
     expect(filterBySource(skills, 'all', origins)).toHaveLength(3)
   })
+
+  it('never buckets project skills as private (they belong to the project tree)', () => {
+    const origins = {}
+    const proj = skill('proj')
+    proj.source = 'project-dsh'
+    const projAgents = skill('proj-agents')
+    projAgents.source = 'project-agents'
+    const skills = [skill('personal'), proj, projAgents]
+    expect(filterBySource(skills, PRIVATE_SOURCE, origins).map((s) => s.name)).toEqual(['personal'])
+    expect(filterBySource(skills, 'all', origins)).toHaveLength(3)
+  })
 })
 
 describe('sortSkills', () => {

package/src/client/grouping.ts

@@ -69,15 +69,24 @@ export function conflictsOnClose(
 /** Origin-repo filter value: skills with no source record (private skills). */
 export const PRIVATE_SOURCE = 'private'
 
+/** 项目级技能来源（它们有 workspace 归属，不属于「个人」组）。 */
+export function isProjectSource(source: string): boolean {
+  return source === 'project-dsh' || source === 'project-agents'
+}
+
 /**
  * Apply the origin filter ('all' or a specific origin repo; skills without a
  * source record count as PRIVATE_SOURCE). The origins map is the store's
  * skillName → repo derivation, so filtering follows the tracked source
  * records instead of the filesystem root a skill happens to live under.
+ * 项目级技能（有 workspace 归属）永远不算「个人」。
  */
 export function filterBySource(skills: readonly CatalogSkill[], source: string, origins: Readonly<Record<string, string>>): CatalogSkill[] {
   if (source === 'all') return [...skills]
-  return skills.filter((skill) => (origins[skill.name] ?? PRIVATE_SOURCE) === source)
+  return skills.filter((skill) => {
+    if (isProjectSource(skill.source)) return false
+    return (origins[skill.name] ?? PRIVATE_SOURCE) === source
+  })
 }
 
 /** Catalog sort keys offered by the filter bar. */

package/src/client/index.tsx

@@ -5,11 +5,11 @@
  * Registers the dsh-skill-hub locale dictionaries and mounts two Settings
  * surfaces, both through official slots (no DOM injection):
  *  - a plugin-management card in the `settings.plugin.item` slot (Settings →
- *    插件 → 可配置插件列表), bound to the hub's own /api/skill-hub/config
- *    route via ApiConfigScope — the family-bucket card pattern
- *    (PluginSettingsCard + CardForm vendored from dsh-task-board). The host's
- *    settings service refuses third-party namespaces, so the card never
- *    touches the settings transport;
+ *    插件 → 可配置插件列表), keyed by the hub's settings namespace and bound
+ *    through the official settings transport (dsh rc.7 serves every
+ *    registered namespace to the web client, and the tab dispatches cards by
+ *    namespace) — the family-bucket card pattern (PluginSettingsCard +
+ *    CardForm vendored from dsh-task-board);
  *  - a top-level Settings section (Settings → 技能) hosting the skill hub
  *    panel: catalog, search, enable/disable, diagnostics, new-skill form.
  *
@@ -31,8 +31,8 @@ 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'
+import type { HubSettingsValue } from '../protocol.ts'
 import { SkillHubApi } from './api.ts'
-import { ApiConfigScope } from './api-config-scope.ts'
 import { en, zh, type HubKey } from './locales.ts'
 import { applySettingsNavIcon } from './settings-nav-icon.ts'
 import { SkillHubSettingsCard, SkillHubSettingsCardController } from './SkillHubSettingsCard.tsx'
@@ -48,8 +48,14 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
   }
 }
 
-/** Required services (fiber inject waiting — the runtime must be up first). */
-export const inject = ['slots', 'locale']
+/**
+ * Required services (fiber inject waiting — the runtime must be up first).
+ * `connection`/`remote` are the settings transport's own prerequisites
+ * (`ctx.settingsScope.bind` resolves them on the caller's fiber), and
+ * `settingsScope` is the namespace-scope binder itself; mirror the official
+ * settings-plugins inject list.
+ */
+export const inject = ['slots', 'locale', 'connection', 'remote', 'settingsScope']
 
 /** Type-only surface (export discipline: no value exports beyond the plugin contract). */
 export type { SkillHubPanelProps } from './panel/SkillHubPanel.tsx'
@@ -65,24 +71,24 @@ export function apply(ctx: ClientContext): void {
   const t = ctx.locale.bind(NS)
   const api = new SkillHubApi()
 
-  // The card edits the hub's own config route (ApiConfigScope), never the
-  // settings service: the host refuses third-party settings namespaces, which
-  // is what previously surfaced as "命名空间未挂载" on this card.
-  const settingsCard = new SkillHubSettingsCardController(new ApiConfigScope(api))
+  // The card edits the hub's settings namespace through the official
+  // settings transport — the configurable-plugins tab only dispatches cards
+  // whose key the Host serves, and the Host serves every registered namespace
+  // since rc.7, so this is what makes the card appear (and stay in sync).
+  const settingsCard = new SkillHubSettingsCardController(
+    ctx.settingsScope.bind<HubSettingsValue>({ namespace: NS }),
+  )
 
   // Plugin-management card: Settings → 插件 → 可配置插件列表.
-  // Runtime note: the official settings-plugins package registers cards with
-  // an 'inject' face at runtime, but its published slot contract does not
-  // declare it, so the typed register overload rejects the option. Cast the
-  // call (runtime-identical to the official cards) and keep the card fully typed.
+  // rc.7's slot contract declares this keyed slot with options `key`
+  // (the settings namespace the card edits), so registration is fully typed.
   ctx.effect(
     () => ctx.slots.inject('settings.plugin.item', () => ctx.slots.register({
       name: 'settings.plugin.item',
-      id: 'dsh-skill-hub',
-      order: 115,
+      key: NS,
       locale: NS,
       inject: () => settingsCard.inject(),
-    } as never, SkillHubSettingsCard as never)),
+    }, SkillHubSettingsCard)),
     'dsh-skill-hub: settings card',
   )
 

package/src/client/locales.ts

@@ -27,19 +27,19 @@ export const zh = {
   'panel.emptyAll': '本地还没有技能。点击「新建技能」创建第一个。',
   'panel.loading': '读取中…',
   'panel.incomplete': '（目录可能不完整）',
-  'market.addHint': '像 codex 一样添加仓库源：输入 owner/repo 或 GitHub 链接，扫描其中的技能并一键导入；导入后自动跟踪上游更新。',
+  'panel.workspacePlaceholder': '工作区路径（回车应用）',
+  'panel.workspaceHint': '填写项目路径后，面板同时显示该项目 .dsh/skills 与 .agents/skills 下的技能（只读）；留空回车恢复用户级视图。',
+  'panel.workspaceClear': '清除工作区',
   'market.addPlaceholder': 'owner/repo 或 https://github.com/…',
   'market.addSource': '添加源',
   'market.noSources': '还没有市场源。从下方内置市场添加，或输入一个 GitHub 仓库。',
-  'market.catalogTitle': '内置市场',
+  'market.title': '市场',
   'market.catalogHint': '精选技能仓库，添加后即可扫描安装，并持续检查更新。',
   'market.catalog.anthropics': 'Anthropic 官方技能合集（Claude Skills）',
   'market.catalog.superpowers': 'Superpowers 社区技能合集',
   'market.catalog.mattpocock': 'Matt Pocock 技能集',
   'market.catalog.openDesign': '设计技能合集（design-templates）',
-  'market.added': '已添加',
   'market.add': '添加',
-  'market.mySources': '我的市场源',
   'market.installed': '已装 {count}',
   'market.updatable': '可更新 {count}',
   'market.deletedUpstream': '上游已删 {count}',
@@ -104,6 +104,9 @@ export const zh = {
   'groups.empty': '还没有场景。先新建一个，再把技能归类。',
   'groups.noCollections': '暂无来源组。从市场导入技能后自动按来源聚合。',
   'groups.personal': '个人',
+  'groups.project': '项目级',
+  'groups.subdivide': '细分',
+  'groups.merge': '合并',
   'groups.noWritable': '该组没有可写技能（只读技能无法由中枢开关）',
   'groups.closeAll': '全部关闭',
   'groups.keepOn': '保留开启',
@@ -130,6 +133,7 @@ export const zh = {
   'row.disable': '禁用',
   'row.enable': '启用',
   'row.delete': '移入回收站',
+  'row.open': '查看 {name} 详情（回车）',
   'delete.confirmTitle': '移入回收站？',
   'delete.confirmText': '确定把「{name}」移入回收站吗？可随时恢复。',
   'delete.confirm': '移入回收站',
@@ -232,19 +236,19 @@ export const en: Record<HubKey, string> = {
   'panel.emptyAll': 'No skills installed yet. Create the first one.',
   'panel.loading': 'Loading…',
   'panel.incomplete': '(catalog may be incomplete)',
-  'market.addHint': 'Codex-style market sources: add a repo (owner/repo or GitHub URL), scan its skills and import; imported skills are tracked upstream automatically.',
+  'panel.workspacePlaceholder': 'Workspace path (Enter to apply)',
+  'panel.workspaceHint': 'Enter a project path to also show that workspace\'s .dsh/skills and .agents/skills skills (read-only); clear + Enter to return to the user-level view.',
+  'panel.workspaceClear': 'Clear workspace',
   'market.addPlaceholder': 'owner/repo or https://github.com/…',
   'market.addSource': 'Add source',
   'market.noSources': 'No market sources yet. Add one from the built-in catalog below, or enter a GitHub repo.',
-  'market.catalogTitle': 'Market catalog',
+  'market.title': 'Market',
   'market.catalogHint': 'Curated skill repos — add one to scan and install, with ongoing update checks.',
   'market.catalog.anthropics': 'Official Anthropic skill collection (Claude Skills)',
   'market.catalog.superpowers': 'Superpowers community skill collection',
   'market.catalog.mattpocock': 'Matt Pocock skill collection',
   'market.catalog.openDesign': 'Design skill collection (design-templates)',
-  'market.added': 'Added',
   'market.add': 'Add',
-  'market.mySources': 'My sources',
   'market.installed': '{count} installed',
   'market.updatable': '{count} updatable',
   'market.deletedUpstream': '{count} deleted upstream',
@@ -309,6 +313,9 @@ export const en: Record<HubKey, string> = {
   'groups.empty': 'No scenes yet. Create one and start categorizing skills.',
   'groups.noCollections': 'No source groups yet. Import skills from the market to group them by source.',
   'groups.personal': 'Personal',
+  'groups.project': 'Project',
+  'groups.subdivide': 'Split',
+  'groups.merge': 'Merge',
   'groups.noWritable': 'No writable skills in this group (read-only skills cannot be switched from the hub)',
   'groups.closeAll': 'Close all',
   'groups.keepOn': 'Keep on',
@@ -335,6 +342,7 @@ export const en: Record<HubKey, string> = {
   'row.disable': 'Disable',
   'row.enable': 'Enable',
   'row.delete': 'Move to trash',
+  'row.open': 'View {name} details (Enter)',
   'delete.confirmTitle': 'Move to trash?',
   'delete.confirmText': 'Move "{name}" to trash? It can be restored anytime.',
   'delete.confirm': 'Move to trash',

package/src/client/market-catalog.ts

@@ -1,6 +1,6 @@
 /**
  * Built-in market catalog: well-known skill repos shown on the market tab so
- * users can browse and install without knowing repo URLs (cc-switch-style).
+ * users can browse and install without knowing repo URLs.
  * Only the repo slug lives here; adding goes through the normal
  * market-source route and records upstream tracking like any manual source.
  */

package/src/client/panel/MarketView.tsx

@@ -1,13 +1,14 @@
 /**
- * Market tab: the built-in market catalog (one-click add), the user's market
- * sources with aggregated per-repo state (installed / updatable / deleted
- * upstream), check-all and update-all actions, and the repo scan result with
- * the importable skill checklist.
+ * Market tab: one unified market list — built-in catalog entries (add
+ * button while not yet added) and the user's market sources (full state
+ * badges + actions once added, plus custom sources), with check-all and
+ * update-all actions and the repo scan result with the importable checklist.
  */
 
-import type { JSX } from 'react'
+import { Fragment, type JSX } from 'react'
 import { tt } from '../helpers.ts'
 import { MARKET_CATALOG } from '../market-catalog.ts'
+import type { MarketSourceRecord } from '../../protocol.ts'
 import { ConfirmDialog } from './dialogs.tsx'
 import type { SkillHubState } from './useSkillHub.ts'
 import css from './panel.module.css'
@@ -24,33 +25,79 @@ export function MarketView(props: { hub: SkillHubState }): JSX.Element {
   const { marketState, marketCheck, sourceCheck, sourcesState, repoDiscoverState, scanningRepo, repoSelected, setRepoSelected, repoImporting, repoResult, newSourceName, setNewSourceName, syncingMarket, tagBusy, addSource, addMarketSource, removeMarketSource, scanRepo, checkMarket, checkSources, syncMarketSource, toggleRepoSelected, importRepo, updateAllDialog, setUpdateAllDialog, updateAll } = hub
   /** 有可更新技能的来源（全部更新按钮与确认列表共用）。 */
   const updatableRepos = Object.entries(sourceCheck).filter(([, check]) => check.changed && check.updated.length > 0)
-  return (
-    <>
-      <section className={css.section}>
-        <div className={css.sectionTitle}>{tt('market.catalogTitle')}</div>
-        <p className={css.hintLine + ' ' + css.hintPadded}>{tt('market.catalogHint')}</p>
-        {MARKET_CATALOG.map((entry) => {
-          const added = marketState.repos.some((record) => record.repo === entry.repo)
-          const busy = scanningRepo !== null || tagBusy
-          return (
-            <div key={entry.repo} className={css.row + ' ' + css.rowStatic}>
-              <div className={css.rowMain}>
-                <div className={css.rowName}>
-                  <a className={css.sourceLink} href={'https://github.com/' + entry.repo} target='_blank' rel='noreferrer'>{entry.repo}</a>
-                </div>
-                <div className={css.rowDesc}>{tt(entry.descriptionKey)}</div>
+
+  /** 一个已添加来源的完整行：状态徽章 + 操作按钮。 */
+  const sourceRow = (record: MarketSourceRecord): JSX.Element => {
+    const releaseCheck = marketCheck[record.repo]
+    const skillCheck = sourceCheck[record.repo]
+    const installedCount = sourcesState?.sources.find((source) => source.repo === record.repo)?.skills.length ?? 0
+    const scanning = scanningRepo === record.repo
+    return (
+      <div className={css.row + ' ' + css.rowStatic}>
+        <div className={css.rowMain}>
+          <div className={css.rowName}>
+            <a className={css.sourceLink} href={'https://github.com/' + record.repo} target='_blank' rel='noreferrer'>{record.repo}</a>
+            {record.ref !== undefined ? <span className={css.badge + ' ' + css.badgeSource}>{record.ref}</span> : null}
+            {installedCount > 0 ? <span className={css.badge + ' ' + css.badgeCount}>{tt('market.installed', { count: installedCount })}</span> : null}
+            {skillCheck?.changed === true && skillCheck.updated.length > 0
+              ? <span className={css.badge + ' ' + css.statusUpdated}>{tt('market.updatable', { count: skillCheck.updated.length })}</span>
+              : null}
+            {skillCheck !== undefined && skillCheck.deleted.length > 0
+              ? <span className={css.badge + ' ' + css.statusError}>{tt('market.deletedUpstream', { count: skillCheck.deleted.length })}</span>
+              : null}
+            {releaseCheck?.updateAvailable === true
+              ? <span className={css.badge + ' ' + css.statusUpdated}>{releaseCheck.latestTag !== undefined ? tt('market.newRelease', { version: releaseCheck.latestTag }) : tt('market.updated')}</span>
+              : null}
+          </div>
+        </div>
+        <button type='button' className={css.opBtn} disabled={scanning} onClick={() => { void checkMarket() }}>{tt('market.check')}</button>
+        <button type='button' className={css.opBtn + (releaseCheck?.updateAvailable === true ? ' ' + css.opDanger : '')} disabled={syncingMarket === record.repo} onClick={() => { void syncMarketSource(record.repo) }}>
+          {syncingMarket === record.repo ? tt('market.syncing') : tt('market.sync')}
+        </button>
+        <button type='button' className={css.opBtn} disabled={scanning} onClick={() => { void scanRepo(record.repo) }}>
+          {scanning ? tt('market.scanning') : tt('market.scan')}
+        </button>
+        <button type='button' className={css.opBtn} disabled={tagBusy} title={tt('market.removeHint')} onClick={() => { void removeMarketSource(record.repo) }}>{tt('market.deleteSource')}</button>
+      </div>
+    )
+  }
+
+  // 统一列表：内置目录（未添加 → 描述+添加按钮；已添加 → 完整行）在前，
+  // 自定义市场源（不在内置目录里）随后。同一个仓库不会出现两次。
+  const rows: Array<{ key: string; element: JSX.Element }> = []
+  for (const entry of MARKET_CATALOG) {
+    const record = marketState.repos.find((item) => item.repo === entry.repo)
+    if (record !== undefined) {
+      rows.push({ key: entry.repo, element: sourceRow(record) })
+    } else {
+      const busy = scanningRepo !== null || tagBusy
+      rows.push({
+        key: entry.repo,
+        element: (
+          <div className={css.row + ' ' + css.rowStatic}>
+            <div className={css.rowMain}>
+              <div className={css.rowName}>
+                <a className={css.sourceLink} href={'https://github.com/' + entry.repo} target='_blank' rel='noreferrer'>{entry.repo}</a>
               </div>
-              {added
-                ? <span className={css.badge + ' ' + css.badgeReadonly}>{tt('market.added')}</span>
-                : <button type='button' className={css.opBtn} disabled={busy} onClick={() => { void addSource(entry.repo) }}>{tt('market.add')}</button>}
+              <div className={css.rowDesc}>{tt(entry.descriptionKey)}</div>
             </div>
-          )
-        })}
-      </section>
+            <button type='button' className={css.opBtn} disabled={busy} onClick={() => { void addSource(entry.repo) }}>{tt('market.add')}</button>
+          </div>
+        ),
+      })
+    }
+  }
+  for (const record of marketState.repos) {
+    if (MARKET_CATALOG.some((entry) => entry.repo === record.repo)) continue
+    rows.push({ key: record.repo, element: sourceRow(record) })
+  }
+  const unaddedCatalog = MARKET_CATALOG.filter((entry) => !marketState.repos.some((record) => record.repo === entry.repo))
 
+  return (
+    <>
       <section className={css.section}>
         <div className={css.sectionTitle + ' ' + css.sectionHeadRow}>
-          <span className={css.sectionTitleFill}>{tt('market.mySources')}</span>
+          <span className={css.sectionTitleFill}>{tt('market.title')}</span>
           <button type='button' className={css.opBtn} onClick={() => { void checkSources(); void checkMarket() }}>{tt('market.checkAll')}</button>
           <button
             type='button'
@@ -59,7 +106,6 @@ export function MarketView(props: { hub: SkillHubState }): JSX.Element {
             onClick={() => { setUpdateAllDialog(true) }}
           >{tt('market.updateAll')}</button>
         </div>
-        <p className={css.hintLine + ' ' + css.hintPadded}>{tt('market.addHint')}</p>
         <div className={css.buttons + ' ' + css.actionsPadded}>
           <input
             className={css.input + ' ' + css.grow}
@@ -70,44 +116,11 @@ export function MarketView(props: { hub: SkillHubState }): JSX.Element {
           />
           <button type='button' className={css.button + ' ' + css.primary} disabled={newSourceName.trim() === ''} onClick={() => { void addMarketSource() }}>{tt('market.addSource')}</button>
         </div>
+        {unaddedCatalog.length > 0 ? <p className={css.hintLine + ' ' + css.hintPadded}>{tt('market.catalogHint')}</p> : null}
 
         {marketState.status === 'loading' ? <div className={css.empty}>{tt('panel.loading')}</div> : null}
-
-        {marketState.status === 'ready' && marketState.repos.length === 0 ? <div className={css.empty}>{tt('market.noSources')}</div> : null}
-        {marketState.repos.map((record) => {
-          const releaseCheck = marketCheck[record.repo]
-          const skillCheck = sourceCheck[record.repo]
-          const installedCount = sourcesState?.sources.find((source) => source.repo === record.repo)?.skills.length ?? 0
-          const scanning = scanningRepo === record.repo
-          return (
-            <div key={record.repo} className={css.row + ' ' + css.rowStatic}>
-              <div className={css.rowMain}>
-                <div className={css.rowName}>
-                  <a className={css.sourceLink} href={'https://github.com/' + record.repo} target='_blank' rel='noreferrer'>{record.repo}</a>
-                  {record.ref !== undefined ? <span className={css.badge + ' ' + css.badgeSource}>{record.ref}</span> : null}
-                  {installedCount > 0 ? <span className={css.badge + ' ' + css.badgeCount}>{tt('market.installed', { count: installedCount })}</span> : null}
-                  {skillCheck?.changed === true && skillCheck.updated.length > 0
-                    ? <span className={css.badge + ' ' + css.statusUpdated}>{tt('market.updatable', { count: skillCheck.updated.length })}</span>
-                    : null}
-                  {skillCheck !== undefined && skillCheck.deleted.length > 0
-                    ? <span className={css.badge + ' ' + css.statusError}>{tt('market.deletedUpstream', { count: skillCheck.deleted.length })}</span>
-                    : null}
-                  {releaseCheck?.updateAvailable === true
-                    ? <span className={css.badge + ' ' + css.statusUpdated}>{releaseCheck.latestTag !== undefined ? tt('market.newRelease', { version: releaseCheck.latestTag }) : tt('market.updated')}</span>
-                    : null}
-                </div>
-              </div>
-              <button type='button' className={css.opBtn} disabled={scanning} onClick={() => { void checkMarket() }}>{tt('market.check')}</button>
-              <button type='button' className={css.opBtn + (releaseCheck?.updateAvailable === true ? ' ' + css.opDanger : '')} disabled={syncingMarket === record.repo} onClick={() => { void syncMarketSource(record.repo) }}>
-                {syncingMarket === record.repo ? tt('market.syncing') : tt('market.sync')}
-              </button>
-              <button type='button' className={css.opBtn} disabled={scanning} onClick={() => { void scanRepo(record.repo) }}>
-                {scanning ? tt('market.scanning') : tt('market.scan')}
-              </button>
-              <button type='button' className={css.opBtn} disabled={tagBusy} title={tt('market.removeHint')} onClick={() => { void removeMarketSource(record.repo) }}>{tt('market.deleteSource')}</button>
-            </div>
-          )
-        })}
+        {marketState.status !== 'loading' && rows.length === 0 ? <div className={css.empty}>{tt('market.noSources')}</div> : null}
+        {marketState.status !== 'loading' ? rows.map((row) => <Fragment key={row.key}>{row.element}</Fragment>) : null}
       </section>
       {repoDiscoverState.status === 'scanning' ? <div className={css.empty}>{tt('market.scanning')}</div> : null}
       {repoDiscoverState.status === 'error' ? <div className={css.errorBanner}>{repoDiscoverState.message}</div> : null}