dsh-plugin-capabilities 0.1.5 → 0.2.0

package/src/client/SkillsTab.tsx

@@ -1,13 +1,16 @@
-/** Settings → Plugins “技能/Skills” tab: view the discovered catalog, edit the
- * user-owned root. Pure presentation-layer — data arrives through props. */
+/** Settings “技能” tab: view the discovered catalog, edit the user-owned
+ * root, toggle skills on/off, open their folders, and manage the custom
+ * skill repositories (local paths and GitHub checkouts) feeding the catalog.
+ * Pure presentation-layer — data arrives through props. */
 
 import { useEffect, useState } from 'react'
 import type { ReactElement } from 'react'
 import { Button, IconRefreshOutline14, IconSkillOutline16, Modal, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
 import { CSS } from './css.ts'
-import type { Translate } from './index.ts'
+import type { OpenTarget, Translate } from './index.ts'
+import type { RootRowView } from './MarketTab.tsx'
 
-/** One skill as the host reports it (plus the editable flag the route adds). */
+/** One skill as the host reports it (plus the flags the route adds). */
 export interface SkillRowView {
   name: string
   description: string
@@ -16,6 +19,10 @@ export interface SkillRowView {
   source: string
   provider: string
   editable: boolean
+  /** The skill's folder when it lives on disk (drives open-folder). */
+  dir?: string
+  /** File-backed skills can be enabled/disabled through the policy route. */
+  policyEditable: boolean
 }
 
 export interface SkillsInjected {
@@ -23,6 +30,11 @@ export interface SkillsInjected {
   get(name: string): Promise<{ content: string }>
   save(input: { name: string; description: string; whenToUse?: string; modelInvocable: boolean; userInvocable: boolean; content: string }): Promise<{ ok: boolean }>
   remove(name: string): Promise<{ ok: boolean }>
+  policy(name: string, enabled: boolean): Promise<{ ok: boolean }>
+  open(target: OpenTarget): Promise<{ ok: boolean }>
+  roots(): Promise<{ roots: RootRowView[] }>
+  addRoot(input: { kind: 'local' | 'git'; path?: string; url?: string }): Promise<{ ok: boolean; root: RootRowView }>
+  removeRoot(id: string): Promise<{ ok: boolean }>
 }
 
 /** Editor dialog state; null when closed. */
@@ -46,6 +58,21 @@ const SOURCE_KEYS: Record<string, string> = {
   custom: 'sourceCustom',
 }
 
+/** Status tag for the invocation policy; undefined = default (both allowed). */
+function policyTag(skill: SkillRowView): { key?: string; off: boolean } {
+  const { modelInvocable, userInvocable } = skill.invocation
+  if (!modelInvocable && !userInvocable) return { key: 'skillDisabled', off: true }
+  if (!modelInvocable) return { key: 'skillUserOnly', off: false }
+  if (!userInvocable) return { key: 'skillModelOnly', off: false }
+  return { off: false }
+}
+
+/** Add-repository form state; null when the form is collapsed. */
+interface AddRootState {
+  kind: 'local' | 'git'
+  value: string
+}
+
 export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): ReactElement {
   const { t, injected } = props
   const [skills, setSkills] = useState<SkillRowView[] | null>(null)
@@ -55,6 +82,14 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
   const [outcome, setOutcome] = useState<{ ok: boolean; text: string } | null>(null)
   const [formError, setFormError] = useState<string | null>(null)
   const [reload, setReload] = useState(0)
+  const [query, setQuery] = useState('')
+  const [sourceFilter, setSourceFilter] = useState<string>('all')
+
+  // Custom skill repositories.
+  const [roots, setRoots] = useState<RootRowView[] | null>(null)
+  const [addRoot, setAddRoot] = useState<AddRootState | null>(null)
+  const [rootBusy, setRootBusy] = useState(false)
+  const [confirmRootId, setConfirmRootId] = useState<string | null>(null)
 
   useEffect(() => {
     let current = true
@@ -62,6 +97,10 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
       (body) => { if (current) setSkills(body.skills) },
       (error: Error) => { if (current) { setSkills([]); setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }) } },
     )
+    void injected.roots().then(
+      (body) => { if (current) setRoots(body.roots) },
+      () => { if (current) setRoots([]) },
+    )
     return () => { current = false }
   }, [injected, reload, t])
 
@@ -152,8 +191,89 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
     }
   }
 
+  const doToggle = async (skill: SkillRowView): Promise<void> => {
+    const enabled = skill.invocation.modelInvocable || skill.invocation.userInvocable
+    setBusy(true)
+    try {
+      await injected.policy(skill.name, !enabled)
+      setOutcome({ ok: true, text: !enabled ? t('skillEnabled') : t('skillDisabledMsg') })
+      refreshUntil(list => {
+        const row = list.find(item => item.name === skill.name)
+        return row !== undefined && row.invocation.modelInvocable === !enabled && row.invocation.userInvocable === !enabled
+      })
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const doOpen = async (target: OpenTarget): Promise<void> => {
+    try {
+      await injected.open(target)
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+    }
+  }
+
+  const doAddRoot = async (): Promise<void> => {
+    if (addRoot === null || addRoot.value.trim() === '') return
+    setRootBusy(true)
+    setFormError(null)
+    try {
+      await injected.addRoot(addRoot.kind === 'local'
+        ? { kind: 'local', path: addRoot.value.trim() }
+        : { kind: 'git', url: addRoot.value.trim() })
+      setOutcome({ ok: true, text: t('rootAdded') })
+      setAddRoot(null)
+      void injected.roots().then(
+        (body) => setRoots(body.roots),
+        () => setRoots([]),
+      )
+      // The provider remounts asynchronously; refresh the catalog a few
+      // times so the repository's skills appear without manual reload.
+      for (let tick = 0; tick < 4; tick++) {
+        await new Promise(resolve => setTimeout(resolve, 1500))
+        void injected.list().then(
+          (body) => setSkills(body.skills),
+          () => undefined,
+        )
+      }
+    } catch (error) {
+      setFormError(String(error instanceof Error ? error.message : error))
+    } finally {
+      setRootBusy(false)
+    }
+  }
+
+  const doRemoveRoot = async (): Promise<void> => {
+    if (confirmRootId === null) return
+    setRootBusy(true)
+    try {
+      await injected.removeRoot(confirmRootId)
+      setOutcome({ ok: true, text: t('rootRemoved') })
+      setRoots(null)
+      void injected.roots().then(
+        (body) => setRoots(body.roots),
+        () => setRoots([]),
+      )
+      setReload((value) => value + 1)
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+    } finally {
+      setRootBusy(false)
+      setConfirmRootId(null)
+    }
+  }
+
   const readOnly = editor?.mode === 'view'
 
+  const needle = query.trim().toLowerCase()
+  const filtered = skills === null ? [] : skills.filter(skill =>
+    (sourceFilter === 'all' || skill.source === sourceFilter)
+    && (needle === '' || skill.name.toLowerCase().includes(needle) || skill.description.toLowerCase().includes(needle)))
+  const sources = skills === null ? [] : [...new Set(skills.map(skill => skill.source))]
+
   return (
     <div className="dpc-section">
       <style>{CSS}</style>
@@ -162,6 +282,7 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
         <IconSkillOutline16 aria-hidden="true" />
         <h3>{t('skillsTitle')}</h3>
         <span className="dpc-spacer" />
+        <Button variant="ghost" size="sm" onClick={() => void doOpen({ target: 'user-skills' })}>{t('openUserSkills')}</Button>
         <Button variant="primary" size="sm" onClick={openCreate}>{t('newSkill')}</Button>
       </div>
       <p className="dpc-intro">{t('skillsIntro')}</p>
@@ -175,39 +296,138 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
 
       <div className="dpc-listHead">
         <h3>{t('skillsTab')}</h3>
-        {skills !== null && <span className="dpc-count">{skills.length}</span>}
+        {skills !== null && <span className="dpc-count">{filtered.length}/{skills.length}</span>}
         <span className="dpc-spacer" />
-        <button type="button" className="dpc-refresh" aria-label={t('view')} title={t('view')} disabled={busy} onClick={() => setReload((value) => value + 1)}>
+        <input
+          className="dpc-search"
+          type="search"
+          placeholder={t('searchSkills')}
+          aria-label={t('searchSkills')}
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+        <button type="button" className="dpc-refresh" aria-label={t('refresh')} title={t('refresh')} disabled={busy} onClick={() => setReload((value) => value + 1)}>
           <IconRefreshOutline14 size={14} aria-hidden="true" />
         </button>
       </div>
 
+      {sources.length > 1 && (
+        <div className="dpc-chips" role="group" aria-label={t('source')}>
+          {[{ id: 'all', label: t('filterAll') }, ...sources.map(source => ({ id: source, label: t(SOURCE_KEYS[source] ?? 'sourceCustom') }))].map(chip => (
+            <button
+              key={chip.id}
+              type="button"
+              className="dpc-chip"
+              data-active={sourceFilter === chip.id ? 'true' : undefined}
+              onClick={() => setSourceFilter(chip.id)}
+            >
+              {chip.label}
+            </button>
+          ))}
+        </div>
+      )}
+
       {skills === null && <p className="dpc-empty">{t('loading')}</p>}
-      {skills !== null && skills.length === 0 && <p className="dpc-empty">{t('emptySkills')}</p>}
-      {skills !== null && skills.length > 0 && (
+      {skills !== null && filtered.length === 0 && <p className="dpc-empty">{skills.length === 0 ? t('emptySkills') : t('noMatch')}</p>}
+      {skills !== null && filtered.length > 0 && (
         <ul className="dpc-cards">
-          {skills.map((skill) => (
-            <li className="dpc-card" key={`${skill.source}/${skill.name}`}>
-              <div className="dpc-cardTop">
-                <strong className="dpc-cardTitle" title={skill.name}>{skill.name}</strong>
-                <span className="dpc-tag" data-kind="source">{t(SOURCE_KEYS[skill.source] ?? 'sourceCustom')}</span>
-              </div>
-              <p className="dpc-cardDesc" title={skill.description}>{skill.description}</p>
-              <div className="dpc-cardRow">
-                {!skill.invocation.modelInvocable && <span className="dpc-tag">⚙</span>}
-                {!skill.invocation.userInvocable && <span className="dpc-tag">/</span>}
-                <span className="dpc-spacer" />
-                <Button variant="ghost" size="sm" disabled={busy} onClick={() => void openExisting(skill)}>
-                  {skill.editable ? t('edit') : t('view')}
-                </Button>
-                {skill.editable && (
-                  <Button variant="ghost" size="sm" disabled={busy} onClick={() => setConfirmName(skill.name)}>{t('delete')}</Button>
-                )}
-              </div>
+          {filtered.map((skill) => {
+            const tag = policyTag(skill)
+            return (
+              <li className="dpc-card" key={`${skill.source}/${skill.name}`}>
+                <div className="dpc-cardTop">
+                  <strong className="dpc-cardTitle" title={skill.name}>{skill.name}</strong>
+                  <span className="dpc-tag" data-kind="source">{t(SOURCE_KEYS[skill.source] ?? 'sourceCustom')}</span>
+                  {tag.key !== undefined && <span className="dpc-tag" data-kind={tag.off ? 'off' : undefined}>{t(tag.key)}</span>}
+                </div>
+                <p className="dpc-cardDesc" title={skill.description}>{skill.description}</p>
+                <div className="dpc-cardRow">
+                  {skill.policyEditable && (
+                    <button
+                      type="button"
+                      className="dpc-switch"
+                      role="switch"
+                      aria-checked={skill.invocation.modelInvocable || skill.invocation.userInvocable}
+                      aria-label={t('toggleSkill')}
+                      title={t('toggleSkillHint')}
+                      disabled={busy}
+                      onClick={() => void doToggle(skill)}
+                    >
+                      <span className="dpc-switchKnob" />
+                    </button>
+                  )}
+                  {skill.dir !== undefined && (
+                    <button type="button" className="dpc-link" onClick={() => void doOpen({ target: 'skill', name: skill.name })}>{t('openFolder')}</button>
+                  )}
+                  <span className="dpc-spacer" />
+                  <Button variant="ghost" size="sm" disabled={busy} onClick={() => void openExisting(skill)}>
+                    {skill.editable ? t('edit') : t('view')}
+                  </Button>
+                  {skill.editable && (
+                    <Button variant="ghost" size="sm" disabled={busy} onClick={() => setConfirmName(skill.name)}>{t('delete')}</Button>
+                  )}
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+
+      <div className="dpc-listHead dpc-rootsHead">
+        <h3>{t('rootsTitle')}</h3>
+        {roots !== null && <span className="dpc-count">{roots.length}</span>}
+        <span className="dpc-spacer" />
+        {addRoot === null && (
+          <Button variant="ghost" size="sm" onClick={() => setAddRoot({ kind: 'git', value: '' })}>{t('addRoot')}</Button>
+        )}
+      </div>
+      <p className="dpc-intro">{t('rootsIntro')}</p>
+      {roots === null && <p className="dpc-empty">{t('loading')}</p>}
+      {roots !== null && roots.length === 0 && <p className="dpc-empty">{t('emptyRoots')}</p>}
+      {roots !== null && roots.length > 0 && (
+        <ul className="dpc-roots">
+          {roots.map((root) => (
+            <li className="dpc-root" key={root.id}>
+              <span className="dpc-tag" data-kind="source">{root.kind === 'git' ? 'GitHub' : t('rootLocal')}</span>
+              <strong className="dpc-rootLabel" title={root.kind === 'git' ? root.url : root.path}>{root.label}</strong>
+              <span className="dpc-rootPath">{root.kind === 'git' ? root.url : root.path}</span>
+              {!root.live && <span className="dpc-tag" data-kind="off">{t('rootStale')}</span>}
+              <span className="dpc-spacer" />
+              <button type="button" className="dpc-link" onClick={() => void doOpen({ target: 'root', id: root.id })}>{t('openFolder')}</button>
+              <Button variant="ghost" size="sm" disabled={rootBusy} onClick={() => setConfirmRootId(root.id)}>{t('delete')}</Button>
             </li>
           ))}
         </ul>
       )}
+      {addRoot !== null && (
+        <div className="dpc-form dpc-addRoot">
+          <div className="dpc-addRootRow">
+            <select
+              className="dpc-select"
+              aria-label={t('rootKind')}
+              value={addRoot.kind}
+              onChange={(event) => setAddRoot({ ...addRoot, kind: event.target.value as AddRootState['kind'] })}
+            >
+              <option value="git">GitHub</option>
+              <option value="local">{t('rootLocal')}</option>
+            </select>
+            <input
+              className="dpc-input"
+              type="text"
+              placeholder={addRoot.kind === 'git' ? 'https://github.com/anthropics/skills' : t('rootLocalPlaceholder')}
+              aria-label={t('rootPlaceholder')}
+              value={addRoot.value}
+              autoFocus
+              onChange={(event) => setAddRoot({ ...addRoot, value: event.target.value })}
+              onKeyDown={(event) => { if (event.key === 'Enter') void doAddRoot() }}
+            />
+            <Button variant="primary" size="sm" disabled={rootBusy || addRoot.value.trim() === ''} onClick={() => void doAddRoot()}>{t('add')}</Button>
+            <Button variant="ghost" size="sm" disabled={rootBusy} onClick={() => { setAddRoot(null); setFormError(null) }}>{t('cancel')}</Button>
+          </div>
+          <p className="dpc-intro">{addRoot.kind === 'git' ? t('rootGitHint') : t('rootLocalHint')}</p>
+          {formError !== null && <p className="dpc-formError">{formError}</p>}
+        </div>
+      )}
 
       <Modal
         open={editor !== null}
@@ -298,6 +518,21 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
       >
         <p>{t('deleteWarn')}</p>
       </Modal>
+
+      <Modal
+        open={confirmRootId !== null}
+        onClose={() => setConfirmRootId(null)}
+        title={t('confirmRemoveRoot')}
+        description={roots?.find(root => root.id === confirmRootId)?.label ?? undefined}
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setConfirmRootId(null)}>{t('cancel')}</Button>
+            <Button variant="primary" disabled={rootBusy} onClick={() => void doRemoveRoot()}>{t('delete')}</Button>
+          </>
+        }
+      >
+        <p>{t('removeRootWarn')}</p>
+      </Modal>
     </div>
   )
 }

package/src/client/css.ts

@@ -66,5 +66,47 @@ export const CSS = `
 .dpc-importHead{display:flex;align-items:center;gap:8px;padding:0 2px}
 .dpc-importCount{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}
 .dpc-importAll{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);cursor:pointer}
+/* Skills search + source filter chips. */
+.dpc-search{width:200px;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:4px 10px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;line-height:18px}
+.dpc-search:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}
+.dpc-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.dpc-chip{border:1px solid var(--dsw-alias-border-l2);border-radius:999px;padding:2px 10px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:16px;cursor:pointer}
+.dpc-chip:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.dpc-chip[data-active='true']{border-color:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-state-business-primary)}
+.dpc-chip:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px}
+/* Load-policy switch on skill cards (no form semantics — instant apply). */
+.dpc-switch{position:relative;flex:none;width:30px;height:18px;border:0;border-radius:999px;background:var(--dsw-alias-bg-layer-1);box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l2);cursor:pointer;transition:background .15s}
+.dpc-switch[aria-checked='true']{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 55%,transparent);box-shadow:none}
+.dpc-switchKnob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--dsw-alias-label-primary);transition:left .15s}
+.dpc-switch[aria-checked='true'] .dpc-switchKnob{left:14px;background:#fff}
+.dpc-switch:disabled{opacity:.55;cursor:default}
+.dpc-switch:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}
+/* Quiet inline link-button (open folder, homepage). */
+.dpc-link{border:0;padding:0;background:transparent;color:var(--dsw-alias-state-business-primary);font:inherit;font-size:12px;line-height:18px;cursor:pointer;text-decoration:none}
+.dpc-link:hover{text-decoration:underline}
+.dpc-link:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px;border-radius:2px}
+/* Skill repositories list + add form. */
+.dpc-rootsHead{margin-top:10px}
+.dpc-roots{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
+.dpc-root{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:8px 12px;background:var(--dsw-alias-bg-layer-3)}
+.dpc-rootLabel{flex:none;font-size:13px;line-height:18px;font-weight:600}
+.dpc-rootPath{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary);font-family:var(--ds-font-family-code)}
+.dpc-addRoot{border:1px dashed var(--dsw-alias-border-l2);border-radius:8px;padding:10px 12px}
+.dpc-addRootRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.dpc-addRootRow .dpc-select{width:auto;flex:none}
+.dpc-addRootRow .dpc-input{flex:1;min-width:200px}
+/* Market segments + env hint + MCP format preview. */
+.dpc-segments{display:inline-flex;gap:4px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:3px;background:var(--dsw-alias-bg-layer-1)}
+.dpc-segment{border:0;border-radius:6px;padding:4px 14px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:18px;cursor:pointer}
+.dpc-segment:hover{color:var(--dsw-alias-label-primary)}
+.dpc-segment[data-active='true']{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-weight:600}
+.dpc-segment:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}
+.dpc-envHint{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-state-warning-primary,var(--dsw-alias-label-secondary))}
+.dpc-format{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:8px 12px;background:var(--dsw-alias-bg-layer-1)}
+.dpc-format summary{font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);cursor:pointer;user-select:none}
+.dpc-format summary:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px;border-radius:2px}
+.dpc-format .dpc-form{margin-top:8px}
+.dpc-formatHint{margin:2px 0 0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+.dpc-code{margin:4px 0 8px;border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:8px 10px;overflow-x:auto;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font-family:var(--ds-font-family-code);font-size:11px;line-height:17px;white-space:pre}
 @media(max-width:680px){.dpc-cards{grid-template-columns:minmax(0,1fr)}}
 `

package/src/client/index.ts

@@ -1,10 +1,11 @@
 /** dsh-plugin-capabilities client entry: contributes the top-level
- * “技能与 MCP” section into Settings (beside 通用设置/模型, with Skills and
- * MCP as internal tabs). Calls the host routes with fetch. */
+ * “技能与 MCP” section into Settings (beside 通用设置/模型, with Skills, MCP,
+ * and 市场 as internal tabs). Calls the host routes with fetch. */
 
 import { createElement as h } from 'react'
 import { CapabilitiesSection } from './CapabilitiesSection.tsx'
 import type { McpInjected, McpRow } from './McpTab.tsx'
+import type { MarketInjected, RootRowView } from './MarketTab.tsx'
 import type { SkillsInjected, SkillRowView } from './SkillsTab.tsx'
 import { zh, en } from './locales.ts'
 
@@ -63,6 +64,12 @@ export interface ImportedServerView {
   headers?: Record<string, string>
 }
 
+/** Openable targets on the host (server resolves real paths). */
+export type OpenTarget =
+  | { target: 'user-skills' }
+  | { target: 'skill'; name: string }
+  | { target: 'root'; id: string }
+
 export function apply(ctx: CapabilitiesClientContext): void {
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-plugin-capabilities: dictionaries')
   const t = ctx.locale.bind(NS)
@@ -72,6 +79,13 @@ export function apply(ctx: CapabilitiesClientContext): void {
     get: (name: string) => fetchJson<SkillBody>(`/dsh-plugin-capabilities/skill?name=${encodeURIComponent(name)}`),
     save: (input: unknown) => post('/dsh-plugin-capabilities/skill/save', input) as Promise<{ ok: boolean }>,
     remove: (name: string) => post('/dsh-plugin-capabilities/skill/delete', { name }) as Promise<{ ok: boolean }>,
+    policy: (name: string, enabled: boolean) =>
+      post('/dsh-plugin-capabilities/skill/policy', { name, enabled }) as Promise<{ ok: boolean }>,
+    open: (target: OpenTarget) => post('/dsh-plugin-capabilities/open', target) as Promise<{ ok: boolean }>,
+    roots: () => fetchJson<{ roots: RootRowView[] }>('/dsh-plugin-capabilities/roots'),
+    addRoot: (input: { kind: 'local' | 'git'; path?: string; url?: string }) =>
+      post('/dsh-plugin-capabilities/roots/add', input) as Promise<{ ok: boolean; root: RootRowView }>,
+    removeRoot: (id: string) => post('/dsh-plugin-capabilities/roots/remove', { id }) as Promise<{ ok: boolean }>,
   }
 
   const mcpInjected: McpInjected = {
@@ -93,9 +107,19 @@ export function apply(ctx: CapabilitiesClientContext): void {
     desktop: window.dshDesktop !== undefined,
   }
 
+  const marketInjected: MarketInjected = {
+    skillsIndex: () => fetchJson<{ source: 'remote' | 'bundled'; repos: Array<MarketRepoView & { installedId: string | null }> }>('/dsh-plugin-capabilities/market/skills'),
+    mcpIndex: () => fetchJson<{ source: 'remote' | 'bundled'; servers: Array<MarketServerView & { installed: boolean }> }>('/dsh-plugin-capabilities/market/mcp'),
+    installSkillRepo: (url: string) =>
+      post('/dsh-plugin-capabilities/market/skills/install', { url }) as Promise<{ ok: boolean; root: RootRowView }>,
+    installMcp: (id: string) =>
+      post('/dsh-plugin-capabilities/market/mcp/install', { id }) as Promise<{ ok: boolean; id: string }>,
+    removeRoot: skillsInjected.removeRoot,
+  }
+
   // One top-level nav entry (between 模型 and 插件), not a tab under the
-  // Plugins section — the section component owns its internal Skills/MCP
-  // tabs directly, so nothing registers into settings.plugins.tab anymore.
+  // Plugins section — the section component owns its internal tabs directly,
+  // so nothing registers into settings.plugins.tab anymore.
   ctx.slots.inject('settings.section', () => {
     return ctx.slots.register({
       name: 'settings.section',
@@ -103,6 +127,35 @@ export function apply(ctx: CapabilitiesClientContext): void {
       order: 12,
       label: () => t('sectionNav'),
       locale: NS,
-    }, () => h(CapabilitiesSection, { t, skills: skillsInjected, mcp: mcpInjected }))
+    }, () => h(CapabilitiesSection, { t, skills: skillsInjected, mcp: mcpInjected, market: marketInjected }))
   })
 }
+
+/** One skills-market repository as the browser sees it. */
+export interface MarketRepoView {
+  id: string
+  name: string
+  nameZh?: string
+  description: string
+  descriptionZh?: string
+  url: string
+  homepage?: string
+  skillCount?: number
+}
+
+/** One MCP-market server as the browser sees it. */
+export interface MarketServerView {
+  id: string
+  name: string
+  nameZh?: string
+  description: string
+  descriptionZh?: string
+  transport: 'stdio' | 'streamable-http'
+  command?: string
+  args?: string[]
+  envKeys?: string[]
+  url?: string
+  homepage: string
+  category?: string
+  runtime?: string
+}