dsh-skill-hub 0.1.0 → 0.2.0

package/src/client/api.ts

@@ -9,9 +9,33 @@ import {
   type ConfigResponse,
   type CreateRequest,
   type CreateResponse,
+  type MarketCheckResponse,
+  type MarketSourceRefRequest,
+  type MarketSourceRequest,
+  type MarketSourceResponse,
+  type MarketSourcesResponse,
+  type MarketSyncResponse,
+  type RepoDiscoverResponse,
+  type RepoImportRequest,
+  type RepoImportResponse,
   type SkillDetail,
   type SkillDetailResponse,
+  type SkillDeleteRequest,
+  type SkillDeleteResponse,
+  type SourceCheckRequest,
+  type SourceCheckResponse,
+  type SourceDeleteRequest,
+  type SourceDeleteResponse,
+  type SourceRestoreRequest,
+  type SourceRestoreResponse,
+  type SourceTrashClearResponse,
+  type SourcesResponse,
+  type SourceSyncRequest,
+  type SourceSyncResponse,
   type StatsResponse,
+  type ToggleBatchRequest,
+  type ToggleBatchResponse,
+  type UpdateCheckResponse,
 } from '../protocol.ts'
 
 /** Error carrying the route's JSON error message. */
@@ -39,23 +63,48 @@ async function readJson<T>(response: Response): Promise<T> {
   return body as T
 }
 
+/**
+ * Fetch with a hard timeout: a hung connection (proxy, stalled keep-alive,
+ * host wedged) must never leave the panel stuck on "loading" forever — it
+ * fails fast and surfaces the error banner instead.
+ */
+async function fetchWithTimeout(input: RequestInfo | URL, init?: RequestInit, ms = 10_000): Promise<Response> {
+  const controller = new AbortController()
+  const timer = setTimeout(() => controller.abort(), ms)
+  try {
+    return await fetch(input, { ...init, signal: controller.signal })
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
 /** The browser half's only data entry point. */
 export class SkillHubApi {
   async catalog(): Promise<CatalogResponse> {
-    const response = await fetch(SKILL_HUB_API.catalog)
+    const response = await fetchWithTimeout(SKILL_HUB_API.catalog)
     return readJson<CatalogResponse>(response)
   }
 
   async skill(name: string): Promise<SkillDetail> {
     const url = SKILL_HUB_API.skill + '?name=' + encodeURIComponent(name)
-    const response = await fetch(url)
+    const response = await fetchWithTimeout(url)
     const body = await readJson<SkillDetailResponse>(response)
     return body.skill
   }
 
-  /** Toggle a skill; resolves with the fresh catalog from the route. */
+  /** Move one writable skill into the restorable trash. */
+  async deleteSkill(name: string): Promise<SkillDeleteResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.skillDelete, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ name } satisfies SkillDeleteRequest),
+    })
+    return readJson<SkillDeleteResponse>(response)
+  }
+
+  /** Toggle one skill; resolves with the fresh catalog from the route. */
   async toggle(name: string, enabled: boolean): Promise<CatalogResponse> {
-    const response = await fetch(SKILL_HUB_API.toggle, {
+    const response = await fetchWithTimeout(SKILL_HUB_API.toggle, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ name, enabled } satisfies import('../protocol.ts').ToggleRequest),
@@ -65,7 +114,7 @@ export class SkillHubApi {
   }
 
   async create(payload: CreateRequest): Promise<CreateResponse> {
-    const response = await fetch(SKILL_HUB_API.create, {
+    const response = await fetchWithTimeout(SKILL_HUB_API.create, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify(payload),
@@ -74,24 +123,205 @@ export class SkillHubApi {
   }
 
   async stats(): Promise<StatsResponse> {
-    const response = await fetch(SKILL_HUB_API.stats)
+    const response = await fetchWithTimeout(SKILL_HUB_API.stats)
     return readJson<StatsResponse>(response)
   }
 
+  /** Toggle a whole group in one write; resolves with the fresh catalog + failures. */
+  async toggleBatch(names: string[], enabled: boolean): Promise<ToggleBatchResponse> {
+    const payload: ToggleBatchRequest = { names, enabled }
+    const response = await fetchWithTimeout(SKILL_HUB_API.toggleBatch, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    return readJson<ToggleBatchResponse>(response)
+  }
+
+  /** The user's added market sources (codex-style repo slugs). */
+  async market(): Promise<MarketSourcesResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.market)
+    return readJson<MarketSourcesResponse>(response)
+  }
+
+  /** Add a market source repo; resolves with the fresh list. */
+  async addMarketSource(repo: string): Promise<MarketSourcesResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.marketSource, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ repo } satisfies MarketSourceRequest),
+    })
+    return readJson<MarketSourceResponse>(response)
+  }
+
+  /** Remove a market source repo; resolves with the fresh list. */
+  async removeMarketSource(repo: string): Promise<MarketSourcesResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.marketSourceDelete, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ repo } satisfies MarketSourceRequest),
+    })
+    return readJson<MarketSourceResponse>(response)
+  }
+
+  /** Check every market source for updates (throttled server-side). */
+  async marketCheck(): Promise<MarketCheckResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.marketCheck)
+    return readJson<MarketCheckResponse>(response)
+  }
+
+  /** Align a market source to its pinned ref; resolves with tracked skills. */
+  async marketSync(repo: string): Promise<MarketSyncResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.marketSync, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ repo }),
+    })
+    return readJson<MarketSyncResponse>(response)
+  }
+
+  /** Pin a market source to an explicit ref (branch picker). */
+  async setMarketSourceRef(repo: string, ref: string): Promise<MarketSourcesResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.marketSourceRef, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ repo, ref } satisfies MarketSourceRefRequest),
+    })
+    return readJson<MarketSourceResponse>(response)
+  }
+
+  /** Check the hub's own latest GitHub release. */
+  async updateCheck(): Promise<UpdateCheckResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.update)
+    return readJson<UpdateCheckResponse>(response)
+  }
+
+  /** Discover importable skills in a GitHub repo. */
+  async repoDiscover(repo: string): Promise<RepoDiscoverResponse> {
+    const url = SKILL_HUB_API.repo + '?repo=' + encodeURIComponent(repo)
+    const response = await fetchWithTimeout(url)
+    return readJson<RepoDiscoverResponse>(response)
+  }
+
+  /** Install selected repo skills into the user-dsh root (records the source). */
+  async repoImport(repo: string, paths: string[], ref?: string): Promise<RepoImportResponse> {
+    const payload: RepoImportRequest = { repo, paths, ...(ref !== undefined && ref !== '' ? { ref } : {}) }
+    const response = await fetchWithTimeout(SKILL_HUB_API.repoImport, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    return readJson<RepoImportResponse>(response)
+  }
+
   /** Read the hub's runtime config (effective values + saved overrides). */
   async config(): Promise<ConfigResponse> {
-    const response = await fetch(SKILL_HUB_API.config)
+    const response = await fetchWithTimeout(SKILL_HUB_API.config)
     return readJson<ConfigResponse>(response)
   }
 
   /** Patch the hub's runtime config (null clears a saved override). */
   async saveConfig(patch: ConfigRequest): Promise<ConfigResponse> {
-    const response = await fetch(SKILL_HUB_API.config, {
+    const response = await fetchWithTimeout(SKILL_HUB_API.config, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify(patch),
     })
     return readJson<ConfigResponse>(response)
   }
-}
 
+  /** 用户 tag 分组 + 系统集合组 + origin 映射。 */
+  async groups(): Promise<import('../protocol.ts').GroupsResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.groups)
+    return readJson<import('../protocol.ts').GroupsResponse>(response)
+  }
+
+  /** 新建（无 id）或重命名（带 id）一个 tag 分组；返回全部 tag。 */
+  async saveTag(payload: import('../protocol.ts').TagSaveRequest): Promise<import('../protocol.ts').SkillTag[]> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.tag, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    const body = await readJson<import('../protocol.ts').TagSaveResponse>(response)
+    return body.tags
+  }
+
+  /** 删除一个 tag 分组；返回全部 tag。 */
+  async deleteTag(id: string): Promise<import('../protocol.ts').SkillTag[]> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.tagDelete, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id } satisfies import('../protocol.ts').TagDeleteRequest),
+    })
+    const body = await readJson<import('../protocol.ts').TagDeleteResponse>(response)
+    return body.tags
+  }
+
+  /** 直接设置某 tag 的完整成员列表；返回全部 tag。 */
+  async setTagMembers(id: string, skillNames: string[]): Promise<import('../protocol.ts').SkillTag[]> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.tagMembers, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id, skillNames } satisfies import('../protocol.ts').TagMembersRequest),
+    })
+    const body = await readJson<import('../protocol.ts').TagMembersResponse>(response)
+    return body.tags
+  }
+
+  /** 来源列表 + 派生 origin 映射 + 集合组 + 回收站。 */
+  async sources(): Promise<SourcesResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.sources)
+    return readJson<SourcesResponse>(response)
+  }
+
+  /** 检查指定（或全部）来源的上游更新。 */
+  async checkSources(repo?: string): Promise<SourceCheckResponse> {
+    const payload: SourceCheckRequest = repo !== undefined ? { repo } : {}
+    const response = await fetchWithTimeout(SKILL_HUB_API.sourceCheck, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    return readJson<SourceCheckResponse>(response)
+  }
+
+  /** 同步一个来源的所选（或全部）技能到上游最新版本。 */
+  async syncSource(repo: string, skills?: string[]): Promise<SourceSyncResponse> {
+    const payload: SourceSyncRequest = skills !== undefined ? { repo, skills } : { repo }
+    const response = await fetchWithTimeout(SKILL_HUB_API.sourceSync, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    return readJson<SourceSyncResponse>(response)
+  }
+
+  /** 跟进上游删除：把所选技能移入回收站。 */
+  async confirmDeleteSource(repo: string, skills: string[]): Promise<SourceDeleteResponse> {
+    const payload: SourceDeleteRequest = { repo, skills }
+    const response = await fetchWithTimeout(SKILL_HUB_API.sourceDelete, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    return readJson<SourceDeleteResponse>(response)
+  }
+
+  /** 从回收站恢复一个技能。 */
+  async restoreSource(name: string): Promise<SourceRestoreResponse> {
+    const payload: SourceRestoreRequest = { name }
+    const response = await fetchWithTimeout(SKILL_HUB_API.sourceRestore, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    return readJson<SourceRestoreResponse>(response)
+  }
+
+  /** Permanently delete every skill currently in the trash. */
+  async clearTrash(): Promise<SourceTrashClearResponse> {
+    const response = await fetchWithTimeout(SKILL_HUB_API.sourceTrashClear, { method: 'POST' })
+    return readJson<SourceTrashClearResponse>(response)
+  }
+}

package/src/client/grouping.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest'
+import type { CatalogSkill, SkillTag } from '../protocol.ts'
+import { conflictsOnClose, filterBySource, formatRelativeTime, groupNamesOf, groupSwitchView, PRIVATE_SOURCE, sortSkills } from './grouping.ts'
+
+function skill(name: string, writable = true): CatalogSkill {
+  return {
+    name,
+    description: '',
+    invocation: { modelInvocable: true, userInvocable: true },
+    provider: 'filesystem',
+    writable,
+  }
+}
+
+describe('groupSwitchView', () => {
+  it('is on when every member is enabled, off when none, mixed otherwise', () => {
+    const enabled = new Set(['a', 'b', 'c'])
+    expect(groupSwitchView(['a', 'b', 'c'], enabled).state).toBe('on')
+    expect(groupSwitchView(['a'], new Set()).state).toBe('off')
+    expect(groupSwitchView(['a', 'b'], new Set(['a'])).state).toBe('mixed')
+  })
+
+  it('lists the enabled and disabled sides', () => {
+    const view = groupSwitchView(['a', 'b', 'c'], new Set(['a', 'c']))
+    expect(view.enabled).toEqual(['a', 'c'])
+    expect(view.disabled).toEqual(['b'])
+  })
+})
+
+describe('conflictsOnClose', () => {
+  it('flags enabled members that live in another group', () => {
+    const members = ['a', 'b', 'c']
+    const enabled = new Set(['a', 'b'])
+    const others = [{ members: ['c', 'a'] }, { members: ['x'] }]
+    expect(conflictsOnClose(members, enabled, others)).toEqual(['a'])
+  })
+
+  it('ignores disabled members and groups without the member', () => {
+    const members = ['a', 'b']
+    const enabled = new Set(['b'])
+    const others = [{ members: ['a'] }]
+    expect(conflictsOnClose(members, enabled, others)).toEqual([])
+  })
+})
+
+describe('groupNamesOf', () => {
+  it('collects tag and collection names for a skill', () => {
+    const tags: SkillTag[] = [{ id: '1', name: 'web', skillNames: ['a'] }]
+    const collections = [{ name: 'repo/x', skillNames: ['a', 'b'] }, { name: 'repo/y', skillNames: ['b'] }]
+    expect(groupNamesOf('a', tags, collections)).toEqual(['web', 'repo/x'])
+    expect(groupNamesOf('b', tags, collections)).toEqual(['repo/x', 'repo/y'])
+    expect(groupNamesOf('c', tags, collections)).toEqual([])
+  })
+})
+
+describe('filterBySource', () => {
+  it('filters by origin repo, buckets untracked skills as private, and returns all for "all"', () => {
+    const origins = { a: 'repo/x', b: 'repo/y' }
+    const skills = [skill('a'), skill('b'), skill('c')]
+    expect(filterBySource(skills, 'repo/x', origins).map((s) => s.name)).toEqual(['a'])
+    expect(filterBySource(skills, PRIVATE_SOURCE, origins).map((s) => s.name)).toEqual(['c'])
+    expect(filterBySource(skills, 'all', origins)).toHaveLength(3)
+  })
+})
+
+describe('sortSkills', () => {
+  it('sorts by name ascending', () => {
+    const skills = [skill('zeta'), skill('alpha'), skill('beta')]
+    expect(sortSkills(skills, 'name').map((s) => s.name)).toEqual(['alpha', 'beta', 'zeta'])
+  })
+
+  it('sorts by added time descending, unknown times last', () => {
+    const skills = [
+      { ...skill('old'), addedAt: 100 },
+      { ...skill('new'), addedAt: 300 },
+      { ...skill('unknown') },
+    ]
+    expect(sortSkills(skills, 'added').map((s) => s.name)).toEqual(['new', 'old', 'unknown'])
+  })
+
+  it('sorts by invocation count descending, unknown counts as zero', () => {
+    const skills = [skill('few'), skill('many'), skill('none')]
+    const uses: Record<string, number | undefined> = { few: 2, many: 9 }
+    expect(sortSkills(skills, 'uses', (name) => uses[name]).map((s) => s.name)).toEqual(['many', 'few', 'none'])
+  })
+
+  it('does not mutate the input list', () => {
+    const skills = [skill('b'), skill('a')]
+    const sorted = sortSkills(skills, 'name')
+    expect(sorted.map((s) => s.name)).toEqual(['a', 'b'])
+    expect(skills.map((s) => s.name)).toEqual(['b', 'a'])
+  })
+})
+
+describe('formatRelativeTime', () => {
+  const now = 1_700_000_000_000
+  it('buckets relative times correctly', () => {
+    expect(formatRelativeTime(now, now)).toEqual({ key: 'time.justNow' })
+    expect(formatRelativeTime(now - 30_000, now)).toEqual({ key: 'time.justNow' })
+    expect(formatRelativeTime(now - 5 * 60_000, now)).toEqual({ key: 'time.minutesAgo', value: 5 })
+    expect(formatRelativeTime(now - 3 * 3_600_000, now)).toEqual({ key: 'time.hoursAgo', value: 3 })
+    expect(formatRelativeTime(now - 2 * 86_400_000, now)).toEqual({ key: 'time.daysAgo', value: 2 })
+    expect(formatRelativeTime(now - 14 * 86_400_000, now)).toEqual({ key: 'time.weeksAgo', value: 2 })
+  })
+
+  it('clamps future timestamps to just now', () => {
+    expect(formatRelativeTime(now + 5_000, now)).toEqual({ key: 'time.justNow' })
+  })
+})

package/src/client/grouping.ts

@@ -0,0 +1,120 @@
+/**
+ * Pure grouping helpers for the skill-hub panel (no React/DOM deps, so the
+ * merge/classify/filter logic stays unit-testable).
+ *
+ * The "分组" view unifies two ways a skill can belong to a group:
+ *  - user tags (sidecar SkillTag)
+ *  - origin collections (sidecar sources → backend-aggregated CollectionGroup)
+ *
+ * Switch semantics: a skill's enabled state is global (the file is renamed
+ * once), so a group switch is derived from its members' actual states:
+ * all members enabled → 'on', all disabled → 'off', otherwise 'mixed'.
+ * Closing a group whose member is enabled in another group is a conflict the
+ * GUI resolves with a dialog; the helpers below compute both sides.
+ */
+
+import type { CatalogSkill, CollectionGroup, SkillTag } from '../protocol.ts'
+
+/** Grouped switch state derived from member enablement. */
+export type GroupSwitchState = 'on' | 'off' | 'mixed'
+
+/** The derived switch view of one group. */
+export interface GroupSwitchView {
+  state: GroupSwitchState
+  /** Writable members currently enabled. */
+  enabled: string[]
+  /** Writable members currently disabled. */
+  disabled: string[]
+}
+
+/**
+ * Derive a group switch view from its member names and the set of currently
+ * enabled skill names (catalog.skills). Members not in the enabled set count
+ * as disabled (catalog.disabled or absent read-only rows).
+ */
+export function groupSwitchView(members: readonly string[], enabledNames: ReadonlySet<string>): GroupSwitchView {
+  const enabled: string[] = []
+  const disabled: string[] = []
+  for (const name of members) {
+    if (enabledNames.has(name)) enabled.push(name)
+    else disabled.push(name)
+  }
+  const state: GroupSwitchState = disabled.length === 0 ? 'on' : enabled.length === 0 ? 'off' : 'mixed'
+  return { state, enabled, disabled }
+}
+
+/** Names of every group a skill belongs to (tags + collections). */
+export function groupNamesOf(name: string, tags: readonly SkillTag[], collections: readonly CollectionGroup[]): string[] {
+  const names: string[] = []
+  for (const tag of tags) if (tag.skillNames.includes(name)) names.push(tag.name)
+  for (const collection of collections) if (collection.skillNames.includes(name)) names.push(collection.name)
+  return names
+}
+
+/**
+ * Members of a group that are currently enabled AND also belong to at least
+ * one other group — the set a "close" action must ask about.
+ */
+export function conflictsOnClose(
+  members: readonly string[],
+  enabledNames: ReadonlySet<string>,
+  otherGroups: ReadonlyArray<{ members: readonly string[] }>,
+): string[] {
+  return members.filter((name) => {
+    if (!enabledNames.has(name)) return false
+    return otherGroups.some((group) => group.members.includes(name))
+  })
+}
+
+/** Origin-repo filter value: skills with no source record (private skills). */
+export const PRIVATE_SOURCE = 'private'
+
+/**
+ * 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.
+ */
+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)
+}
+
+/** Catalog sort keys offered by the filter bar. */
+export type SortKey = 'name' | 'added' | 'uses'
+
+/**
+ * Sort a skill list in place-safe copy order: name ascending, added
+ * descending (newest first, unknown addedAt last), or uses descending
+ * (most-called first). Unknown values always trail.
+ */
+export function sortSkills(skills: readonly CatalogSkill[], key: SortKey, getUses?: (name: string) => number | undefined): CatalogSkill[] {
+  const list = [...skills]
+  if (key === 'name') {
+    list.sort((a, b) => a.name.localeCompare(b.name))
+  } else if (key === 'added') {
+    list.sort((a, b) => (b.addedAt ?? -Infinity) - (a.addedAt ?? -Infinity))
+  } else if (key === 'uses') {
+    list.sort((a, b) => (getUses?.(b.name) ?? 0) - (getUses?.(a.name) ?? 0))
+  }
+  return list
+}
+
+/** Localized relative-time tuple; the caller resolves it via tt(). */
+export interface RelativeTime {
+  key: 'time.justNow' | 'time.minutesAgo' | 'time.hoursAgo' | 'time.daysAgo' | 'time.weeksAgo'
+  value?: number
+}
+
+/** Format an epoch-ms timestamp as a short relative time bucket. */
+export function formatRelativeTime(ms: number, now = Date.now()): RelativeTime {
+  const diff = Math.max(0, now - ms)
+  const minutes = Math.floor(diff / 60_000)
+  if (minutes < 1) return { key: 'time.justNow' }
+  if (minutes < 60) return { key: 'time.minutesAgo', value: minutes }
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return { key: 'time.hoursAgo', value: hours }
+  const days = Math.floor(hours / 24)
+  if (days < 7) return { key: 'time.daysAgo', value: days }
+  return { key: 'time.weeksAgo', value: Math.floor(days / 7) }
+}

package/src/client/index.tsx

@@ -34,6 +34,7 @@ import type {} from '@deepseek-ai/dsh-client-ui-settings-plugins/client'
 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'
 import { SkillHubPanel } from './panel/SkillHubPanel.tsx'
 
@@ -89,7 +90,7 @@ export function apply(ctx: ClientContext): void {
   ctx.effect(
     () => ctx.slots.inject('settings.section', () => ctx.slots.register({
       name: 'settings.section',
-      id: 'skills',
+      id: 'skill-hub',
       order: 12,
       label: () => t('entry.label'),
       locale: NS,
@@ -97,5 +98,7 @@ export function apply(ctx: ClientContext): void {
     }, () => <SkillHubPanel api={api} />)),
     'dsh-skill-hub: settings section',
   )
-}
 
+  // Host shell has no section-icon registration; keep the nav gear swapped for the skill icon.
+  ctx.effect(() => applySettingsNavIcon(), 'dsh-skill-hub: settings nav icon')
+}