dsh-plugin-capabilities 0.1.6 → 0.2.1

package/src/client/McpTab.tsx

@@ -82,6 +82,128 @@ function mapToPairs(map: Record<string, string> | undefined, separator: string):
   return Object.entries(map).map(([key, value]) => `${key}${separator}${value.includes('\n') ? JSON.stringify(value) : value}`).join('\n')
 }
 
+/** YAML double-quoted scalar (JSON syntax is valid YAML); plain for simple ids. */
+function yamlScalar(value: string): string {
+  return /^[A-Za-z0-9_./@-]+$/.test(value) ? value : JSON.stringify(value)
+}
+
+/** Shape the profile patch row exactly as the host would persist it (preview). */
+export function mcpRowYaml(input: { serverName: string; transport: 'stdio' | 'streamable-http'; command?: string; args?: string[]; env?: Record<string, string>; url?: string; headers?: Record<string, string> }): string {
+  const name = input.serverName.trim() === '' ? 'server-name' : input.serverName.trim()
+  const lines = [
+    '- insert:',
+    `    - id: mcp-${name}`,
+    "      name: '@deepseek-ai/dsh-mcp-client'",
+    '      config:',
+    `        serverName: ${yamlScalar(name)}`,
+    `        transport: ${input.transport}`,
+  ]
+  if (input.transport === 'stdio') {
+    lines.push(`        command: ${yamlScalar(input.command ?? '')}`)
+    const args = input.args ?? []
+    if (args.length > 0) {
+      lines.push('        args:')
+      for (const arg of args) lines.push(`          - ${yamlScalar(arg)}`)
+    }
+    const env = input.env ?? {}
+    if (Object.keys(env).length > 0) {
+      lines.push('        env:')
+      for (const [key, value] of Object.entries(env)) lines.push(`          ${yamlScalar(key)}: ${yamlScalar(value)}`)
+    }
+  } else {
+    lines.push(`        url: ${yamlScalar(input.url ?? '')}`)
+    const headers = input.headers ?? {}
+    if (Object.keys(headers).length > 0) {
+      lines.push('        headers:')
+      for (const [key, value] of Object.entries(headers)) lines.push(`          ${yamlScalar(key)}: ${yamlScalar(value)}`)
+    }
+  }
+  return lines.join('\n')
+}
+
+/** The equivalent mcpServers JSON a foreign config or docs page would show. */
+export function mcpJsonExample(transport: 'stdio' | 'streamable-http'): string {
+  const entry = transport === 'stdio'
+    ? {
+        command: 'npx',
+        args: ['-y', '@example/mcp-server'],
+        env: { API_KEY: 'value' },
+      }
+    : {
+        type: 'http',
+        url: 'https://example.com/mcp',
+        headers: { Authorization: 'Bearer <token>' },
+      }
+  return JSON.stringify({ mcpServers: { 'server-name': entry } }, null, 2)
+}
+
+/** Fields parsed out of a pasted MCP JSON config (any common shape). */
+export interface ParsedMcpJson {
+  serverName?: string
+  transport: 'stdio' | 'streamable-http'
+  command?: string
+  args?: string[]
+  env?: Record<string, string>
+  url?: string
+  headers?: Record<string, string>
+}
+
+/** Parse one MCP server from pasted JSON: a bare entry, a dsh row, or a
+ *  `{"mcpServers": {…}}` wrapper (first entry wins). Returns the reason on bad input. */
+export function parseMcpJson(text: string): ParsedMcpJson | { error: string } {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(text)
+  } catch {
+    return { error: 'not valid JSON' }
+  }
+  if (typeof parsed !== 'object' || parsed === null) return { error: 'expected a JSON object' }
+  let record = parsed as Record<string, unknown>
+  let nameFromWrapper: string | undefined
+  const wrapped = record.mcpServers ?? record.mcp_servers ?? record.servers
+  if (typeof wrapped === 'object' && wrapped !== null && !Array.isArray(wrapped)) {
+    const first = Object.entries(wrapped as Record<string, unknown>)[0]
+    if (first === undefined) return { error: 'mcpServers object is empty' }
+    nameFromWrapper = first[0]
+    if (typeof first[1] !== 'object' || first[1] === null) return { error: 'server entry is not an object' }
+    record = first[1] as Record<string, unknown>
+  }
+  const stringMap = (value: unknown): Record<string, string> | undefined => {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) return undefined
+    const out: Record<string, string> = {}
+    for (const [key, entry] of Object.entries(value)) {
+      if (typeof entry === 'string') out[key] = entry
+    }
+    return Object.keys(out).length > 0 ? out : undefined
+  }
+  const args = Array.isArray(record.args) && record.args.every(entry => typeof entry === 'string')
+    ? record.args as string[]
+    : undefined
+  const command = typeof record.command === 'string' ? record.command : undefined
+  const url = typeof record.url === 'string' ? record.url : undefined
+  const declared = typeof record.type === 'string' ? record.type : typeof record.transport === 'string' ? record.transport : undefined
+  const httpDeclared = declared === 'http' || declared === 'streamable-http' || declared === 'sse'
+  const transport: 'stdio' | 'streamable-http' = command !== undefined && !httpDeclared
+    ? 'stdio'
+    : url !== undefined ? 'streamable-http' : httpDeclared ? 'streamable-http' : 'stdio'
+  if (transport === 'stdio' && command === undefined) return { error: 'stdio config needs a "command" field' }
+  if (transport === 'streamable-http' && url === undefined) return { error: 'http config needs a "url" field' }
+  const serverName = nameFromWrapper
+    ?? (typeof record.serverName === 'string' ? record.serverName : undefined)
+    ?? (typeof record.name === 'string' && record.name !== '@deepseek-ai/dsh-mcp-client' ? record.name : undefined)
+  const env = stringMap(record.env)
+  const headers = stringMap(record.headers)
+  return {
+    ...(serverName !== undefined ? { serverName } : {}),
+    transport,
+    ...(command !== undefined ? { command } : {}),
+    ...(args !== undefined ? { args } : {}),
+    ...(env !== undefined ? { env } : {}),
+    ...(url !== undefined ? { url } : {}),
+    ...(headers !== undefined ? { headers } : {}),
+  }
+}
+
 export function McpTab(props: { t: Translate; injected: McpInjected }): ReactElement {
   const { t, injected } = props
   const [servers, setServers] = useState<McpRow[] | null>(null)
@@ -96,6 +218,8 @@ export function McpTab(props: { t: Translate; injected: McpInjected }): ReactEle
   const [outcome, setOutcome] = useState<{ ok: boolean; text: string } | null>(null)
   const [formError, setFormError] = useState<string | null>(null)
   const [reload, setReload] = useState(0)
+  const [pasteJson, setPasteJson] = useState('')
+  const [pasteError, setPasteError] = useState<string | null>(null)
 
   const openImport = async (): Promise<void> => {
     setImportOpen(true)
@@ -150,11 +274,15 @@ export function McpTab(props: { t: Translate; injected: McpInjected }): ReactEle
 
   const openCreate = (): void => {
     setFormError(null)
+    setPasteError(null)
+    setPasteJson('')
     setEditor({ id: '', serverName: '', transport: 'stdio', command: '', args: '', env: '', url: '', headers: '' })
   }
 
   const openEdit = (row: McpRow): void => {
     setFormError(null)
+    setPasteError(null)
+    setPasteJson('')
     setEditor({
       id: row.id,
       serverName: row.serverName,
@@ -167,6 +295,40 @@ export function McpTab(props: { t: Translate; injected: McpInjected }): ReactEle
     })
   }
 
+  /** Fill the form from pasted JSON (mcpServers wrapper, bare entry, dsh row). */
+  const doPasteFill = (): void => {
+    if (editor === null || pasteJson.trim() === '') return
+    const parsed = parseMcpJson(pasteJson)
+    if ('error' in parsed) {
+      setPasteError(parsed.error)
+      return
+    }
+    // Existing rows keep their identity (serverName + transport); a pasted
+    // config of the other transport cannot apply to them.
+    const lockIdentity = editor.id !== ''
+    if (lockIdentity && parsed.transport !== editor.transport) {
+      setPasteError(t('pasteTransportMismatch'))
+      return
+    }
+    setPasteError(null)
+    setFormError(null)
+    setEditor({
+      ...editor,
+      ...(parsed.serverName !== undefined && !lockIdentity ? { serverName: parsed.serverName } : {}),
+      ...(!lockIdentity ? { transport: parsed.transport } : {}),
+      ...(parsed.transport === 'stdio'
+        ? {
+            command: parsed.command ?? editor.command,
+            args: (parsed.args ?? []).join('\n'),
+            env: mapToPairs(parsed.env, '='),
+          }
+        : {
+            url: parsed.url ?? editor.url,
+            headers: mapToPairs(parsed.headers, ':'),
+          }),
+    })
+  }
+
   const doSave = async (): Promise<void> => {
     if (editor === null) return
     setBusy(true)
@@ -373,6 +535,42 @@ export function McpTab(props: { t: Translate; injected: McpInjected }): ReactEle
                 </label>
               </>
             )}
+            <details className="dpc-format">
+              <summary>{t('formatTitle')}</summary>
+              <div className="dpc-form">
+                <label className="dpc-label">
+                  <span>{t('formatPaste')}</span>
+                  <textarea
+                    className="dpc-textarea"
+                    data-short="true"
+                    placeholder={'{\n  "mcpServers": { "name": { "command": "npx", "args": ["…"] } } }\n'}
+                    value={pasteJson}
+                    onChange={(event) => setPasteJson(event.target.value)}
+                  />
+                </label>
+                {pasteError !== null && <p className="dpc-formError">{pasteError}</p>}
+                <div className="dpc-cardRow">
+                  <Button variant="outline" size="sm" disabled={pasteJson.trim() === ''} onClick={doPasteFill}>{t('formatFill')}</Button>
+                </div>
+                <p className="dpc-formatHint">{t('formatYamlHint')}</p>
+                <pre className="dpc-code">{mcpRowYaml({
+                  serverName: editor.serverName,
+                  transport: editor.transport,
+                  ...(editor.transport === 'stdio'
+                    ? {
+                        command: editor.command.trim(),
+                        args: editor.args.split(/\r?\n/).map(line => line.trim()).filter(line => line !== ''),
+                        env: parsePairs(editor.env, '='),
+                      }
+                    : {
+                        url: editor.url.trim(),
+                        headers: parsePairs(editor.headers, ':'),
+                      }),
+                })}</pre>
+                <p className="dpc-formatHint">{t('formatJsonHint')}</p>
+                <pre className="dpc-code">{mcpJsonExample(editor.transport)}</pre>
+              </div>
+            </details>
             {formError !== null && <p className="dpc-formError">{formError}</p>}
             <div className="dpc-cardRow">
               <span className="dpc-spacer" />

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)}}
 `